WebブラウザとArduinoに接続したグラフィックLCDで遠隔スケッチ

秋月でグラフィックLCD(GLCD、バックライト付グラフィック液晶表示器 128x64ドット SG12864ASLB−GB: ディスプレイ・表示器 秋月電子通商-電子部品・ネット通販)を買ったので、GLCDをArduinoに繋いで、iPod touchで描いた絵を表示させるシステムを作ってみた。

iPod touchSafari上に表示したWebページのタッチイベントを読むことで絵を描く。イベントは通常のWebブラウザのマウスイベントだと"mousedown"/"mouseup"/"mousemove"だが、iOSSafariは"touchstart"/"touchend"/"touchmove"となる。しかも、タッチイベントは同時に複数点で発生する事(マルチタッチ)が考慮されており、どのイベントを採用するか決定する必要がある。今回は、シングルタッチによるイベントとし、最初に発生したイベントのみを扱う。タッチイベントが発生した点をプロットしていけば、絵になるという考えだ。

タッチイベントが発生した点の集合:点データはWebSocketを通してWebSocketサーバに送る。

次に、Arduinoに接続したGLCDを制御するプログラムを書いた。シリアルポートから点データを受け取り、それをGLCD上にプロットする。GLCDの制御にはKS0108 libraryを用いている。Ethernet Shieldを使ってもう少しネットワーク機器っぽくしてみたかったが、GLCDが使用するArduinoピンが多いので諦めた。Arduino Megaっぽいものがあればどうにかなるかもしれない。

最後に、iPod touchSafari上に表示したWebページから送られてくる点データを、Arduinoのシリアルポートに転送するWebSocketサーバをPython/Tornadoで書いた。Arduinoとの通信にはpySerialを用いている。

解説文を含めた実演動画を作成して公開した。

絵心があれば何か描けるのだろうが、デモにしてはインパクトの弱い(しかも汚い)手書き文字の描画にした。