HOME >> 鉄道模型実験室 > 登山鉄道レイアウトとモニタ式操作盤 ESP32のWiFi通信テスト
鉄道模型実験室 No.223 登山鉄道レイアウトとモニタ式操作盤 ESP32のWiFi通信テスト
登山鉄道レイアウトの操作盤について、以前検討したモニタ方式の操作画面からWiFiを使った通信によって、操作できないか検討をしている。 今回は、クライアント側で画像を用意し、Webサーバとの通信は指令だけのやり取りとする方法を検討しました。
.
■ テスト回路の構成
先回のテスト結果、ESP32 をサーバとして使用した場合、画像の取扱が出来なかった。 いや、我が技量では、その方法が見つけられなかったと言うべきですが、そこで、画像の取扱いはクライアント側で用意する方法を検討した。 この方法では、いろいろな制約が出てくるが、まず、このような方法が成り立つかを検証することにした。
***************************************
その方法は、ESP32 を受信専用のサーバとして立ち上げておき、クライアント側は自分自身で構成した画面から、Lesson05 の方法でデータを送るという処理方法で検討するものです。 最初に、機器類の立ち位置を説明しておきます。
右のイラストの様に構成しました。 ノートパソコンを使ってESP32をWEBサーバとして構成しておき、LEDを接続させておきます。 そして、別のパソコン上にクライアント側のファイルを作っておきます。 そして、WiFi通信を使ってESP32のWEBサーバにアクセスして操作指令を伝達し、LEDの点滅を指示しようとするものです。
操作画面は、ひとつのポイント操作部を使って、定位と反位を切り替えてみる事にしました。 切り替えの指令はLEDの点灯具合で確認します。
テストの状況を上に示します。 デスクトップパソコンは何時も使用してもので、すぐ右側にはWiFiルータが設置されいます。
void handleLedOnOff() {
String htmlh;
htmlh = "<!DOCTYPE html>";
htmlh += "<html lang='ja'>";
htmlh += "<meta charset=\"utf-8\">";
htmlh += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">";
htmlh += "<body><p>ポイントを反位にしました。</p></body>";
htmlh += "</html>";
String htmls;
htmls = "<!DOCTYPE html>";
htmls += "<html lang='ja'>";
htmls += "<meta charset=\"utf-8\">";
htmls += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">";
htmls += "<body><p>ポイントを定位にしました。</p></body>";
htmls += "</html>";
if (server.hasArg("click")) //clickが送信されたかどうかの確認
{
if (server.arg("click").equals("on")) //clickの値がonかどうかの判定
{
digitalWrite(led, HIGH); //LED ON
server.send(200, "text/html", htmlh);
}
else if (server.arg("click").equals("off")) //clickの値がoffかどうかの判定
{
digitalWrite(led, LOW); //LED OFF
server.send(200, "text/html", htmls);
}
}
}
■ WEBサーバの設定
最初にサーバ側の設定をしておきます。 サーバの役割は、アクセスして来た時に送られてきたデータを判別して、LEDを点灯させたり、消灯させるように指示することだけです。 そして、クライアントに向けてhtmlファイルを送信する必要がありません。
でも、最初にトライした時、サーバから、“ Not Found ” のメッセージが送られて来ました。 そこで折角の返信と言うことでメッセージを設定して返信するように設定しました。
***********************************
スケッチはLesson05 の内容から、アクセスして来た時の処理関数部分を右の様に修正しました。 クリックがオンであればLEDを」点灯させ、ポイントを反位にしましたとメッセージを送るようにしています。
反対に、クリックがオフであれば、定位に戻したと判断してLEDを消灯させるのです。
返信部分は、なるべくスリムになるように記述を絞っています。
■ クライアント側の設定
次にクライアント側の画面を作りました。 参考にしたのは、「モニタ式の操作盤を作ろう ボタンの画像を作る」（2021/8/13）です。 この時のコンテンツを利用して再構成しました。
まず、別ファイルであったJavaScript の部分をHTMLファイルの中に移動させて記述し、ひとつのファイルとしました。 そして、JavaScript 部分は、ボタン類をクリックした時に画像を取替えるだけのアクションにしました。
また、上記の実施報告例では、通信の肝となる発信命令を、
webiopi().GPIO.digitalWrite(23,GPIO.HIGH);
と記述していました。 ラズベリーパイを使った場合は、webiopi(） という便利なライブラリを使っていたので、このようなコマンドで指令を送信できました。 しかし、今回はこの方法が利用できませんので、この部分を全て削除しました。
その代わりとして、GET方式を使ってサーバにデータを送信させます。
<a href="http://192.xxx.xxx.xx/?click=off" target="message"><img src= "tei.gif" width="31" height="31" onClick="change3()"></a>
これは、定位ボタンの画像に WEBサーバにアクセスするリンクを貼り、そのアドレスに ?click=off という情報を載せて送信させるようにしたものです。 これは、先に学んだLesson05 の方法と一緒です。
.
■ テスト送信の結果
最初は、簡単な仕組みで実施し、LEDの点滅を制御できたのですが、Not Found のメッセージに悩まされました。 指定のアドレスにアクセス出来ているのに、返事が無いので、このようなメッセージを表示するのではないかと思いました。
この状態では、新しい画面を表示してしまい、その結果、いちいち元の画面に戻る必要があったのです。 新しいブラウザに表示させてみたのですが、クリックするたびにその画面が増えていってしまうのです。 送信を止める方法も検討したのですが、見つけることが出来ませんでした、
しかし、あるサイトで、アクセス結果を表示させる方法として、フォーム内に表示できるように方法が説明されていました。 その方法は表示するフォームをターゲット部に記述しておく方法で、これを活用することにしました。
それが上記に示すtarget="message" の指示なのです。
勿論、メッセージを表示させる message という名のフレームとして、
<p><iframe src="message.html" width="350" height="80" name="message">正位です</iframe></p>
という記述も追加しています。
ここでは、初期状態で message.html の内容を記述させていますが、本文での表示文字と重複していますね・・・・・・・・・・・・！
テスト中のクライアントの画面を右上に示します。 「反」のボタンを押すと転轍機の表示が分岐側に代わり、フレームにもメッセージが表示されています。 今回は左のポイントだけを対象にしていますが、この仕掛けの結果は上々なので、他のボタンも細工していきます。
********************************************
意外と簡単に実施できたのでシメシメです。
でも、難題はスライダー式の計器表示なのです。 これが何故だかうまく動きませんでした。 さて、どうするかです・・・・・・・。
2022/10/29