該項目將向你介紹一個可以通過本地WiFi上的網絡瀏覽器進行控制的恒溫器的制作。

起初，我建立這個項目是因為我需要這樣的設備，而且我也想了解網絡技術。我想用我的智能手機從家里打開車庫加熱器，這樣我就可以在進去之前讓它暖和起來。我還想看看我是否可以為ESP32網絡服務器構建一個外觀漂亮的移動網絡應用程序，該應用程序足夠簡單且重量輕。這是我使用HTML5、Javascript、JSON、Bootstrap、Knockout和其他網絡技術的學習過程。我大部分時間都在這里，進行網絡研究和反復試驗。我將分享我的調試設置。

ESP32Arduino代碼使用ESP32庫，并不復雜，讓您了解HTML協議的具體細節。雖然這是一個完整的工作系統（除了外殼）和一個功能齊全的Web應用程序，但它也是破解其他應用程序的一個很好的起點。

關于這個項目的一些警告：

該項目只能用于低壓（24v或更低）低電流（2A或更低）兩線恒溫器應用，其中加熱單元中的單獨繼電器控制電源電流，并且加熱單元本身具有自己的安全系統。它不應用于直接控制任何加熱元件。

由于它沒有按照任何安全標準設計，因此建造者可以將其安全地用作恒溫器并監控其運行。如果它由于某種原因失敗并保持打開狀態，并且它在您房間外的冰點以下會凍結。如果它發生故障并保持關閉狀態，加熱器可能會持續運行并產生高溫。一種選擇是將其與現有恒溫器串聯（或并聯），以便在項目卡在關閉（或打開）位置時有備用。這有助于避免一種故障模式，但不能避免另一種，因此需要進行監控。

先決條件

熟悉Arduino環境和電路板管理

使用跳線和無焊面包板的原型設計實踐

對Web技術概念的基本了解

步驟

1.將ESP32的板定義加載到ArduinoIDE中。

2.編輯Arduino代碼，配置WiFi訪問名稱、安全代碼和溫控器名稱。

3.編譯代碼并加載到ESP32開發板中。（可以使用WiFi遠程編程）

4.按照原理圖連接電路。

5.找到IP地址并在網絡瀏覽器中打開

6.打開恒溫器并更改設定點。

它是如何工作的-硬件

ESP32板支持WiFi連接，具有IO功能，可與繼電器板連接，打開和關閉繼電器，并與DHT22溫濕度傳感器連接。繼電器觸點連接到加熱系統的2線恒溫器端子。當繼電器閉合時，它會完成2線恒溫器電路并導致加熱系統加熱。

繼電器板接受兩個低電平有效的輸入來控制每個單獨的繼電器。本項目僅使用一個繼電器。另一個可以用于其他目的。繼電器板使用兩級光隔離器和繼電器本身將敏感的MCU數字I/O引腳與加熱系統電隔離。對于現實世界的MCU項目，確保隔離對于可靠和穩健的運行非常重要。靜電、交流噪聲、電源噪聲/可變性會導致MCU獲得虛假輸入信號、鎖定，或者最糟糕的是永久損壞。調試這些類型的問題是一件令人頭疼的事情，因此隔離很重要。光隔離器將來自MCU的數字輸出轉換為光（通過LED），然后光檢測器拾取光并將其轉換為隔離電路上的電壓。

這樣，MCU引腳與驅動繼電器的電位電絕緣。在此電路中，驅動繼電器的電源仍由與ESP32板電源（USB電源）相同的電源提供。也可以使用單獨的電源，這就是板上有跳線的原因。繼電器本身作為一個機械開關，還在雙線加熱系統恒溫器端子和該項目的電源之間提供了第二階段的電氣隔離。在此電路中，驅動繼電器的電源仍由與ESP32板電源（USB電源）相同的電源提供。也可以使用單獨的電源，這就是板上有跳線的原因。繼電器本身作為一個機械開關，還在雙線加熱系統恒溫器端子和該項目的電源之間提供了第二階段的電氣隔離。在此電路中，驅動繼電器的電源仍由與ESP32板電源（USB電源）相同的電源提供。也可以使用單獨的電源，這就是板上有跳線的原因。繼電器本身作為一個機械開關，還在雙線加熱系統恒溫器端子和該項目的電源之間提供了第二階段的電氣隔離。

DHT22溫濕度傳感器具有我們應用所需的測量范圍和精度：

它使用串行單線通信接口發送代表溫度和濕度的 5 字節數據。

在正常操作期間（初始編程后），ESP32 板通過 5v USB 充電器供電。該 5v 電源也分配給其他板。在這個項目中，跳線用于連接組件，但在原型設計階段之后，焊接連接將提高長期可靠性。

工作原理 - 軟件
ESP32 實現了一個簡單的溫度控制器和一個Web 服務器。

簡單的溫度控制器執行以下功能：

1. 通過單線接口從 DHT22 傳感器串行采集溫度和濕度數據。

2. 根據溫度是低于還是高于設定點打開和關閉繼電器。控制器具有一定的滯后性，因此當溫度接近設定點時，控制器不會因測量誤差而反復開關。

3. 從 Internet 上的服務器獲取時間數據，以便將內部 ESP32 時鐘與該 Internet 服務器同步以獲得官方時間。

4. 維護一個看門狗定時器來檢測系統鎖定或故障并自動重啟。只要主程序循環正常運行，此計時器就會不斷重置。如果由于某些錯誤或故障導致主循環不重復，則計時器倒計時并重置 MCU。

Web 服務器可以響應來自客戶端瀏覽器的四種不同類型的請求：

1. HTTP - 當它收到這個請求時，ESP32 將 HTML 文件以長字符串的形式發送到瀏覽器。HTML 文件包含在瀏覽器客戶端上運行的 javascript，并向 Web 服務器發出其他類型的請求。

2. GET - 當它收到這個請求時，ESP32 以 JSON 消息的形式發送溫度、濕度、繼電器狀態（開/關）、設定點、時間和其他信息。一般來說，JSON 是具有層次結構的鍵值對的文本消息。在這個應用程序中，我們保持簡單，不使用任何層次結構。

{ Type: "TH&Relay", Name: "Cave", Temp: "69.44", RelH: "34.60", Tset: "40", Heater: "0", Control: "0", StartTime: "1552185144", CurrentTime: "1552185151", Wifi_ssi: "-42" }
瀏覽器客戶端上的 javascript 接收并解析它以更新瀏覽器中保存的數據對象。這些可以在客戶端上顯示和操作。

3. OPTIONS - 這是在 POST 操作之前完成的必需請求，以進行安全檢查，以確保客戶端可以將信息發布到服務器。

4. POST - 當 Web 服務器收到此請求時，它會收到來自客戶端的 JSON 消息，其中包含設定點溫度以及是否應激活溫度控制。

{Control: "1", Tset: "72"}

Web 服務器解析這些數據并設置內部變量以供進一步處理。

網頁設計與調試
這個項目使用了一些 Web 技術和標準，使我能夠保持 HTML 文件內容靜態和小，同時仍然提供動態和響應式網頁。這是我在這個項目上學習的重點，也是我花最多時間研究網絡和通過反復試驗學習的地方。

調試設置
我認為學習 Web 界面的最佳方式是在瀏覽器中使用開發人員調試功能。我用火狐。在菜單中有一個名為“Web Developer”的選項，然后是“Web Console”。這允許您查看傳遞給服務器的消息、錯誤消息、javascript 異常等。由于 ESP32 上的 Web 服務器只處理上述 4 個不同的請求，它并不真正關心是哪個網頁發出這些請求。它可能是使用請求 1 加載的網頁。但它也可能是另一個網頁 - 例如您在本地計算機上打開的“index.html”文件。因此，這允許您在文本編輯器中對此文件進行小幅更改（我使用 Notepad++，因為它知道 html 格式），然后刷新瀏覽器并查看呈現的頁面會發生什么：

網頁設計

HTML 文件在一個文件中包含嵌入的 CSS、HTML 和 Javascript。它使用Bootstrap來設計響應式網站，它是 CSS（層疊樣式表）、HTML 和 Javascript 的集合。它使用 javacript 庫KnockoutJS在發生數據更改時動態更新瀏覽器視圖。為了保持 HTML 文件較小，這些庫不保存在 HTML 文件本身中。它們使用所謂的CDN （內容交付網絡）提供商鏈接。此外，javascript 使用新的原生fetch()函數來實現服務器調用 2-4。最后它在 fontawesome 中使用了一些 glyphicon字體用于重新加載按鈕（圓形箭頭）和火焰圖標 - 表示正在要求打開加熱器。

Bootstrap簡化了網頁的布局，并且布局可以適當地適應移動屏幕或更大的屏幕。它有一系列小部件和樣式來幫助制作一個看起來干凈的網站。

KnockoutJS是 javascript 中的一個輕量級框架，似乎在某種程度上已經失寵，但對于我的要求來說似乎很完美。我在研究中了解到的是，現在人們使用 Angular 和 react，這似乎需要他們自己的開發工具，并且似乎需要大量學習。當數據發生變化時，KnockoutJS 框架會自動更新 UI。它旨在將 UI 與保存在瀏覽器 DOM（數據對象模型）中的底層數據隔離開來。對我來說，這是網頁設計中最具挑戰性的部分，因為它依賴于 Javascript 的許多面向對象的概念。淘汰賽網站提供了一些教程和示例供您學習。幸運的是，一旦它起作用了，我就不必做任何進一步的改進，因為它與 UI 更改無關，這就是重點。

fetch()是 javascipt 原生的一個新函數，用于處理 GET、OPTIONS 和 POST 等 http 協議的客戶端-服務器通信。另一種方法是使用額外的 jQuery AJAX 調用或其他 javascript 庫。這是更多信息。https://davidwalsh.name/fetch

CDN用于向瀏覽器提供 CSS 和 javascript 庫和代碼，以便 ESP32 Web 服務器不必提供這些。內容交付網絡是提供此內容的地理上分散的服務器的集合，通常需要為大容量或快速響應付費。對于這個項目，我們使用免費服務，這些服務可以很好地滿足我們所需的數量和響應時間。如果您查看“index.html”文件，您將看到這些服務器的 url 鏈接，例如 boostrap 4.3.1 使用下面的鏈接合并。

fontawsome 用于向 UI 添加一些漂亮的字形圖標以反映加熱器狀態和刷新按鈕。在 HTML 中，這是：

從 Arduino 代碼提供網頁- HTML 文件存儲了一個字符串常量，以便在 Web 服務器中處理它。但是為了調試，我將文件作為“index.html”保存在 PC 的本地驅動器上，并在瀏覽器中打開該文件。瀏覽器并不真正關心它如何接收這個文件（本地或從 ESP32 Web 服務器），因此我可以在這個文件中快速更改 HTML，刷新瀏覽器，然后查看結果。完成后，我使用在線工具將 index.html 轉換為字符串。然后將此字符串粘貼到 Arduino 代碼中。

最終成果：

我設計了一個可以 3D 打印的外殼，并用兩個螺絲將它固定在墻上，板之間可以用熱熔膠粘合。