asynchronous web controlled thermostat
1.0.0
このプロジェクトは、ページ全体をリロードしたりフォームを送信する必要なく、ESP32を制御するための更新されたWebインターフェイスを実装する方法について、ランダムオタクチュートリアルラボフォーラムで、Yves Bourdonとの議論から出てきました。言い換えれば、ここでのアイデアは、クライアントブラウザからの非同期リクエストを実行して、表示されるデータのステータスに関するマイクロコントローラーを照会し、ESP32が提供するデータが受信されるとすぐにユーザーインターフェイスのローカル更新を実行することです。
これを達成するためのいくつかの手法があります。これには、WebSocketの使用など、AJAXに依存する従来の方法を好むことが非常に好みます。それにもかかわらず、YvesはAjaxでこの手法を実装する方法を理解したかったのです。これがこのプロジェクトの目的です。もう1つは、WebSocketを進める方法を説明するために続きます...
接続されたサーモスタットに対するYVEの最初のリクエストに答えるために、ESP32とDHT11温度センサーを備えたかなり単純な回路をセットアップすることを選択しました（ただし、どのセンサーもジョブを実行できます）。また、ナビゲーターがESP32を尋問して現在の温度を取得する瞬間をフラッシュで示すLEDを追加しました。 ESP32を制御するユーザーインターフェイスは、最新のブラウザと互換性があります。特にスマートフォンで：
 |  |
Webインターフェイスにより、ユーザーはサーモスタットの温度範囲を調整できます。しきい値の1つが変更されるとすぐに、非同期HTTP要求がESP32に送信され、EEPROMメモリに新しい温度範囲を保存します。これにより、ESP32が何らかの理由で（停電後）何らかの理由で再起動する場合、サーモスタットは最後に記録された温度範囲で初期化されます。 Rebootボタンを使用すると、この機能をコマンド上のESP32を再起動してテストできます。
現在の温度読み取りが行われるたびに、ページをリロードする必要なく、インターフェイスが完全に透明な方法で更新されます。また、温度ディスプレイは、色を変更して、すべてが問題ないか、許可されている範囲がないかどうかを示すことにより、状況に自動的に適応します。センサーの読み取りエラーも発生する可能性があります。ディスプレイはこれを考慮します：
ここで何をしているのかを完全に理解するには、ランダムオタクチュートリアルの次のチュートリアルをご覧ください。
ESP32/ESP8266サーモスタットWebサーバー - 温度に基づく出力を制御する
頂点の使用に慣れていない場合は、このチュートリアルも読むことをお勧めします。
spiffsを使用したESP32 Webサーバー（SPIフラッシュファイルシステム）
Paltformio IDEおよびVisual Studioコードエディターでコードを開発しました。したがって、メインプログラムはmain.cppと呼ばれ、 srcディレクトリにあります。 Arduino IDEを使用している場合、このプログラムをプロジェクトの根本に移動し、そのように名前を変更する必要があります。
mv src/main.cpp esp32-asynchronous-web-controlled-thermostat.ino
コードは3つのディレクトリに分かれています。
srcは、ESP32にコンパイルしてアップロードするC ++コードが含まれていますdataには、ESP32スピフにアップロードするWebユーザーインターフェイスソースコードが含まれていますscssは、SCSS形式のCSSスタイルシートのソースコードが含まれていますWebユーザーインターフェイスは、ESP32フラッシュメモリファイルシステムに5つの個別のファイルとして保存されます。
index.html （インターフェイス構造）index.css （インターフェイスのグラフィカルレイアウト）index.js （動的インターフェイス管理プログラム）D7MR.woff2 （数値ディスプレイに使用されるフォント）favicon.ico （ブラウザ用の小さなアイコン） Webインターフェイスは、CSSスタイルシートによってグラフィカルにフォーマットされています。ソースコードは、SCSS（Sassy CSS）形式で記述され、 sassプログラムを使用してCSSファイルを取得してコンパイルされます。詳細については、公式のSASS Webサイトをご覧ください。
一般に、SCSS構文はCSSに非常に近いです。ソースファイルを変更する場合は、 sassツールをインストールし、次のようにCSSファイルを再コンパイルする必要があります。
sass -t compressed --sourcemap=none --update scss:data
ただし、追加のツールをインストールしたくない場合は、CSSファイルを直接変更することもできます。
ここでは、クライアントブラウザとESP32で実行されているWebサーバーの間に非同期交換を実装する2つの手法を提案します。
XMLHttpRequestオブジェクトを使用する古典的な方法したがって、どちらか一方を使用することができます。
コード全体について注意深くコメントして、あなたが理解しやすくします。プロジェクトに捧げられたこの投稿に答えることで、フォーラムで質問することを躊躇しないでください。
特に、Webアプリケーションを介してESP32と対話したいときに私たちの生活をずっと楽にする幻想的なESP32ASYNCWEBSERVERライブラリの著者であるDev No Devに感謝したいと思います。
また、インターフェイスのデジタルディスプレイに使用した彼のDSEG7 Modern MiniレギュラーフォントについてKeshikanに感謝したいと思います。
