asynchronous web controlled thermostat

ESP32異步網絡控制恆溫器

這個項目來自我與Yves Bourdon的討論，在隨機書呆子教程實驗室論壇上，如何實現更新的Web界面來控制ESP32，而無需重新加載整個頁面或提交表單。換句話說，這裡的想法是從客戶端瀏覽器中執行異步請求，以查詢微控制器有關要顯示的數據狀態，然後在收到ESP32提供的數據後立即執行用戶界面的本地更新。

有幾種技術可以實現這一目標，包括使用Websocket，我更喜歡依靠Ajax的傳統方法。然而，伊夫想了解如何使用Ajax實施這項技術。這是該項目的目的。另一個將遵循，以說明如何進行WebSocket ...

項目概述

為了回答Yves對連接恆溫器的初始請求，我選擇設置一個具有ESP32和DHT11溫度傳感器的相當簡單的電路（但是任何傳感器都可以完成工作）。當導航器詢問ESP32以獲得當前溫度時，我還添加了一個LED來指示閃光的瞬間。控制ESP32的用戶界面與任何現代瀏覽器都兼容。特別是在智能手機上：

Web界面允許用戶調整恆溫器的溫度範圍。一旦更改了一個閾值，就會將異步HTTP請求發送到ESP32，以將新的溫度範圍存儲在其EEPROM內存中。這樣，如果ESP32出於任何原因（例如，在功率故障之後）重新啟動，則將以最後記錄的溫度範圍初始化恆溫器。 Reboot按鈕允許通過在命令上重新啟動ESP32來測試此功能。

每次進行當前溫度讀數時，接口都會完全透明，而無需重新加載頁面。溫度顯示會自動通過更改顏色來自動適應這種情況，以指示一切都很好還是是否超出了允許的範圍。傳感器上也可能發生讀數錯誤。該顯示將考慮到：

初步閱讀

為了充分了解我們在這裡做什麼，建議您查看以下關於隨機書呆子教程的教程：

ESP32/ESP8266恆溫器網絡服務器 - 基於溫度的控制輸出

如果您不熟悉Spiffs的使用，我鼓勵您也閱讀本教程：

ESP32 Web服務器使用SPIFFS（SPI Flash文件系統）

所需零件

• 1 ESP32
• 1 DHT11溫度傳感器
• 1 LED
• 2個電阻（220Ω和4.7kΩ）

接線圖和引腳

• GPIO23連接到LED的陽極
• LED的陰極通過220Ω電阻連接到地面
• GPIO32連接到DHT11溫度傳感器的數據引腳
• DHT11在其數據引腳上帶有4.7kΩ電阻

代碼

我使用paltformio IDE和Visual Studio代碼編輯器開發了代碼。因此，主程序稱為main.cpp ，位於src目錄中。如果您使用的是Arduino IDE，則必須將此程序移至項目的根源並將其重命名：

 mv src/main.cpp esp32-asynchronous-web-controlled-thermostat.ino

代碼結構

該代碼分為三個目錄：

• src包含用於編譯和上傳到ESP32的C ++代碼
• data包含Web用戶界面源代碼上傳到ESP32 SPIFFS
• scss包含SCSS格式的CSS樣式表的源代碼

Web用戶界面將以5個單獨的文件存儲在ESP32閃存文件系統上：

• index.html （接口結構）
• index.css （接口的圖形佈局）
• index.js （動態接口管理程序）
• D7MR.woff2 （用於數字顯示的字體）
• favicon.ico （瀏覽器的小圖標）

Web界面由CSS樣式表格圖形格式。源代碼以SCSS（SASSY CSS）格式編寫，並使用sass程序編譯以獲取CSS文件。請參閱官方的SASS網站以了解更多信息。

通常，SCSS語法非常接近CSS。如果您想修改源文件，則需要安裝sass工具並將CSS文件重新編譯如下：

 sass -t compressed --sourcemap=none --update scss:data

但是，如果您不想安裝其他工具，也可以直接修改CSS文件。

AJAX實現

我在這裡提出了兩種技術，可以在客戶端瀏覽器和在ESP32上運行的Web服務器之間實現異步交換：

• 使用JavaScript的XMLHttpRequest對象的經典方法
• 一種更現代的方法，它使用JavaScript的異步/等待協議

因此，您可以選擇使用一個或另一個。

我已經仔細評論了整個代碼，以使您更容易理解。不要猶豫，通過回答該項目的這篇文章來在論壇上提出問題。

學分

• 我特別要感謝我，這是奇妙的ESP32ASYNCWEBSERVER庫的作者，這使我們的生活變得更加輕鬆，當我們想通過Web應用程序與ESP32互動。

• 我還要感謝Keshikan用於界面數字顯示的DSEG7 Modern Mini常規字體。