Node.jsとHTML5でつくるオシロスコープ

EventMachine版から半年、Node.jsとWebブラウザでオシロスコープをつくるしくみをまとめます。

処理の流れ

内部の動きを順に並べると、次のようになります。

Arduino

1. Arduinoのmillis()で時間を読み出す
2. analogRead()で電圧を読み取る。
3. "時間,電圧"のように、カンマで区切った文字列を、シリアル通信で送る。

Node.js

1. Socket.IOでWebSocketサーバをたてる
2. シリアルポートを監視
3. シリアルポートにArduinoからデータが来たら、WebSocketでブラウザに送る。

ブラウザ

1. Socket.IOでWebSocketサーバにつなぐ
2. WebSocket経由で時間・電圧の文字列を受けたら配列に保存
3. Canvasを使い、配列からグラフを描画する。
4. グラフの描画を定期的に繰り返すことで、アニメーションにする。

が、オシロスコープの簡単な流れ。Arduinoで取得した電圧の読み値が若干の遠回りをしているので、微妙に遅れて表示されてしまうのが弱点。

ソースはgithubに載せています。が、もっと汎用性を高めないと。うちの環境の痕跡が若干残っています。課題です。