EventMachineとHTML5でつくる、Arduino用なんちゃってオシロスコープ

Arduinoのアナログ入力で読んだ電圧の表示用に、HTMLでオシロスコープをつくってみたよ。

ソースはこちら→niccolli/FakeScope · GitHub

仕組み

1. Arduinoからmillis()とanalogRead()の値をシリアル通信で出力
2. RubyのEventMachineで読み込み、WebSocketで配信
3. HTMLでグラフに描画

EventMachineでのシリアル通信にem-serialportを、WebSocketにem-websocketを使っています。HTMLのグラフ描画は直でCanvas……とも思ったのですが、flotr2というちょうキレイなグラフの描けるスクリプトにおまかせしています。

Arduinoのほうは値を出力するならなんでもよいのですが、ただのサイン波ではおもしろくないので、指パッチンのときに使った回路を使っています。ブレッドボードからユニバーサル基板に進化しました。

動かしてみた

赤く見切れているものはトランペットです。マイクでトランペットのベルの振動を拾い、Arduino上のシールドで増幅。それをanalogReadで読んだものを表示させています。そこそこぬるぬるしてるよね。

やり残していること

• 重い
  flotr2などはiOSでも見られる・使えるもののはずなんだけど、MobileSafariでは最終的に固まります。
• 波形がとぶ
  これはem-serialportのような。このシリアル通信ライブラリはバッファリングがないので、その部分だけ自前で実装しています。このシリアル通信のデータをみていると、ちょっと信用おけない感じがするのです。
• サンプリング周期が粗い
  これはArduino。loop()のなかでdelay()などを使ってはいないのですが、loop周期が数msなのでus/ns級の波形はたぶん見られません。ここはもう本物のオシロスコープを買えってことかな。
  追記：loop周期の問題ではなく、シリアル通信のボーレートの問題でした。ボーレートを全開にすれば早くなりますが、Ruby側で落とすぶん(上の問題)が増えているようです。

「Rubyつかってみろ」ってことでEventMachineをつかったおもちゃをつくったつもりだったけど、肝心のRuby分はうっかりすくなめ。なんかこう充実してた気がしてたのは、初めてだったからかな。