自由研究：XY座標モニターを Webアプリ形式（ESP32）で作成してみた

その１ではホストはnode.jsで実現し、機器とはシリアルケーブルで接続してデータのやり取りを行った。

その１の投稿はこちら

今回は、ホスト（node.js）と機器を ESP32 で一つにまとめて実現してみようと思う。

ESP32のWifiアクセスポイントサーバ機能やWifiアクセスクライアント機能を使いネットワークに接続し、ESP32上にサーバ（httpサーバ／websocketサーバ）を稼働させることにする。

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

  1. ユーザインタフェースにはWebブラウザを使用しWebブラウザ上で動作するプログラムは HTML/CSS/javascriptを使って作成する。
  2. Webブラウザとサーバとの通信にはhttp及びwebsocketを使って行う。
    httpで HTML/CSS/javascriptファイルをブラウザに転送する。
    websocketでWebブラウザのjavascriptとサーバのjavascriptのプログラム間でデータのやり取りを行う。
  3. ESP32で動作するサーバ（httpサーバとwebsocketサーバ）プログラムを作成する。使用する言語は c となる。

図にするとこんな感じ。

作成した全てのプログラム（Webブラウザで動作する html / CSS / javascript ファイルとESP32で動作するプログラム）は ESP32 に書き込むこととなる。利用者はネットワーク上のWebブラウザから「 http://ESP32のIPアドレス/ 」でアクセスすれば　ESP32のデータを GUIで見ることができることになる。

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

ESP32, 全て, 技術メモ