自由研究:XY座標モニターを Webアプリ形式(node.js)で作成してみた

Pythonで作成した XY座標モニターと同じものをWebアプリ形式(node.js)で作成してみた。

使用した技術は次のものを使用した。

  • node.js
  • websocket
  • html
  • css
  • javascript

 

作成するプログラムの構成はつぎのような感じ。

  1. ユーザインタフェースにはWebブラウザを使用しWebブラウザ上で動作するプログラムは HTML/CSS/javascriptを使って作成する。
  2. Webブラウザとサーバとの通信にはhttp及びwebsocketを使って行う。
    httpで HTML/CSS/javascriptファイルをブラウザに転送する。
    websocketでWebブラウザのjavascriptとサーバのjavascriptのプログラム間でデータのやり取りを行う。
  3. サーバで動作するプログラムは nods.js を使って作成する。使用する言語は javascript となる。
  4. シリアル接続する組込機器とはサーバの node.js で動作するjavascriptプログラムがシリアル通信を行いやり取りを行う。

図にするとこんな感じ。

実際に動かした時の映像はこちら

サーバと機器のシリアル通信にあたるところは次のようなシリアルクロスケーブルを用意し、組込機器のシリアル通信で応答をするところはpythonでシミレーションをするプログラムを作成して動作確認を行った。