2011-04-10

タイトルのとおりですが，iPadにArduinoをつなぐのをやってみました．cdsで明るさをセンシングして，Processingを使って書かれたWebページ上で表示しています．

（※音声解説つきです）

いろいろ苦労したので記録を残しておきたいと思います．

コトの発端

ArduinoとiPadを連携させる方法をいろいろ調べてたら，USBキーボードのふりをさせたArduinoをカメラコネクションキットを使ってiPadに接続するという方法を発見．

http://mobilecore.net/diary/diary20101127/

これは面白そうだと思って実際にトライしてみたらいろいろ落とし穴がありましたね．

ArduinoをUSBキーボードにするカラクリ

まず，１つ目のポイントは，この人の動画で使われているArduinoはUNOだということ．Arduino UNOは，これまでのバージョンで使われていたUSB-シリアル変換チップが，FT232Rからatmega8u2に変更されています．
atmega8u2の中身を書き変えれば，ホスト側からHIDとして見えるようなデバイス（例えば，USBマウス，USBキーボード，USBジョイスティックなど）として見えるようにできるらしいのですが，肝心のatmega8u2の書き変えに関する情報が物凄く少ない！（英語ですら）．しかも意外にめんどそう．

そもそもatmega8u2を書き変えちゃうと，USB-シリアルの機能が失われてArduinoの書き変えが面倒になってしまうので，Arduino UNOのHID化は断念しました．

ArduinoをUSBキーボード化するシールドを自作してみる

第2案として，以下のページを参考にしながらキーボードエミュレータを作ることにしました．
practicalarduino.com -&nbsppracticalarduino リソースおよび情報

まぁ実に簡単な回路で作れてしまうのですが，最初68Ωの抵抗が手に入らなくてあれぇーってなりましたね．もともとV-USBというAVRマイコンのプロジェクトからの移植らしいので，その辺の情報を漁ってたらこんな記述が．
AVR USB接続の周辺機器をPCから操作する〜仮想COMポート〜

68Ωは”経験に基づいた推測値”で、30〜100Ωなら動作するそうです。

だそうなので，75Ωの抵抗でやりました．実際，75Ωでやってる人も結構見かけますね．ちなみに2.2kΩのほうの抵抗は，USBの規格的には1.5kΩらしいのですが，これも許容範囲ですね．

ソースコードは，以下のページからダウンロードすればOKです．
Google Code Archive - Long-term storage for Google Code Project Hosting.

ダウンロードしたファイルの中にある「USBKeyboardDemo1」というサンプルコードをそのまま使います．12番ピンにつながっているスイッチを押したら，USBキーボードのふりをして「hello world」の文字を出力してくれるプログラムなのですが，ここにもしれっと落とし穴が．

当初，ボタンスイッチを付けるのが面倒だったので，ボタンスイッチの押下判定まわりのコードを省いて，挿したらすぐに「hello world」を送ってくれるプログラムを書いたのですが，それをやっちゃうと認識しない！どうやら，挿してすぐにUsbKeyboard.sendKeyStroke()をやるのは御法度だったようで．．．（適当にdelayを入れてもダメだったので，接続が確立するまで何回かUsbKeyboard.update()を呼んでいる？）

ようやく「自作USBキーボード」をiPadに接続

まぁ，そんなことをやっているうちに，UNO以前の機種でも「キーボードのふりをするArduino」が作れるようになったので，今度はiPadにつないでみることに．

iPadへの接続はカメラコネクションキットを使います．本来はUSBでカメラとiPadをつないで写真を送るのが目的の道具ですが，USBキーボードも動作します．デバイスを接続したときに「デバイスを使用できません。接続されているUSBデバイスには対応していません。」とか怒られますが，そのまま動作します．メモ帳に思う存分「hello world」をたたきこめます．

じゃあ次はアプリだ・・・

デバイスはできたので，次はiPad側のアプリケーションをどうしようかという話です．前述の人は，キーボード入力に反応するiPadのネイティブアプリを自作していたようなんですが，Apple デベロッパーライセンスを持っていない自分としては，Webブラウザ上で動作するなんらかのプログラミング環境でやりたい．どうするか．そうだ！ Processing.jsがあるじゃないか！
Processing.js

Processingはご存じのとおり，初心者でも簡単に扱えるメディアプログラミング環境なんですが，これをJavaScriptベースでWeb上で動かせるProcessing.jsというものがあります．実際のやり方は以下のページがわかりやすいです．
ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記

で，Processing.jsなら簡単に書けるし，Web上で動くのであればデベロッパーライセンスなしにタダでアプリケーションが作れるじゃん！という大変おいしい話・・・のように見えるのですが，実はここにも落とし穴が．

なんと，iPhone/iPadのSafariではJavaScriptに対してキーイベントが飛びません．これはひどい．他のブラウザもいくつか試しましたが，ほとんどダメ．もしかしたらiOSでの制限かもしれません．iPadでニセキーボードは動いてるし，Processing.jsを使ったサイトも閲覧できてる，なのに肝心のキーボード入力が届かないとかどういうことなの．．．

仕方がないので，コード側でどうにかならないか調べてたらこんなページが．
javascript - IPad Disable keyevent on input - Stack Overflow

Maybe you can make the textbox completely transparent (alpha:0)

そ，そうかー！見えないテキストボックスを作って，そこにきたデータをJavaScriptでProcessingのコードに渡せばいいのか！（※もちろん，iPhone/iPad以外なら，こんな小細工をせずとも普通に「keyPressed」イベントでいけます）

ようやくすべてがつながった

というわけで，最終的にHTMLとCSSとJavaScriptを駆使して作ったページがこちら．
iPad + USB-keyboard + Processing.js

左上にある黄色い四角（実はテキストボックス）を１回タッチしてからキーボードの０〜９のキーをタイプすると，ゲージが動きます．

さきほどのUSBキーボードのふりをするArduinoに，光センサ（cds）をちょい足しして明るさを0〜9の値（キー）で出力するようにプログラムしました．結果は最初にご覧頂いたとおりです．若干挙動が遅い気もしますが（テキストボックスの処理の遅延？），とりあえずできたので満足しています．

（2011/04/24 追記）ソースコードなどをこちらのエントリに記載しました．

How to bulid iPad with Arduino + Processing.js - Imaginable Reality

Imaginary Code

from kougaku-navi.net

移転

iPadにArduinoをつなぎ，Webブラウザ上でProcessingを使ってセンサデータを可視化