該項目使用丙烯酸板創建自定義的家庭自動化原型，并將ESP32設置為Web服務器，從而來控制不同負載組件。

接線圖：

引腳接線表：

對于可調光的LED燈泡，只需將其連接到Robotdyn AC調光器的任何輸出引腳即可。

從繼電器輸出到交流負載的連接類似于上圖。只需將一根線直接連接到交流負載，然后將另一根交流線連接到繼電器的通用連接，然后將常開引腳連接到交流負載即可。

注意： 連接交流負載時要非常小心，如果連接不正確，可能會觸電。

ESP32 Web服務器：

為了控制交流負載，將ESP32配置為Web服務器，以便能夠響應來自瀏覽器的HTTP請求。因此，通過使用筆記本電腦或手機中的瀏覽器，就可以控制該家庭自動化項目。（Web Server的工作原理）

將應用程序部署在ESP32串行外設接口閃存文件系統（SPIFFS）中。應用程序用戶界面由帶有CSS和Javascript的HTML頁面組成，用于設計和處理用戶交互。使用SPIFFS比將所有頁面都放入arduino變量的效果要好得多。

PlatformIO中的代碼：

項目代碼：點擊查看

打開Visual Studio代碼，然后單擊“文件”-》“將文件夾添加到工作區”。然后，選擇已下載或復制的文件夾。

應將代碼導入Visual Studio代碼中。單擊最左側的資源管理器選項卡以查看代碼。

使用PlatformIO IDE，可以輕松配置依賴項。在Arduino IDE中，使用庫管理器配置依賴文件，而在PlatformIO中，使用platformio.ini文件設置依賴關系。

單擊platformio.ini文件，lib_deps部分中配置了以下庫。該ESP32家庭自動化項目特定于以下項目。使用PlatformIO，不需要手動添加任何內容，因為這些依賴項已自動下載并配置。

https://github.com/me-no-dev/ESPAsyncTCP.git

https://github.com/me-no-dev/ESPAsyncWebServer.git

https://github.com/bblanchon/ArduinoJson.git

https://github.com/RobotDynOfficial/RBDDimmer.git

HTML / CSS / Javascript：

所有靜態文件（例如HTML，級聯樣式表（CSS）和Javascript文件）都位于PlatformIO項目的data文件夾內。所有這些文件都需要使用PlatformIO Upload Task上載到ESP32 SPIFFS 。

ESP32家庭自動化項目僅包含1個名為index.html的html頁面，并包含了需要的所有用戶界面。（文件）

index.html：包含該項目的主要用戶界面。

該部分包含對需要在移動瀏覽器正確渲染所有的meta標簽。它還包含標題標簽，以討論該項index.html需要3個其他文件來處理樣式和用戶交互。

wholeframework.min.css –是我使用流行的mincss庫使用的主要樣式表。

toggle-switchy –是一個CSS庫，可用于將復選框轉換為切換類型的界面

custom.css –是自定義樣式文件。

在body標簽結束之前，導入custom.js文件，該文件用于在用戶切換復選框時處理事件。

該代碼僅用于導航和顯示網站頁面。

toggle-switchy CSS庫將每個復選框的樣式設置為看起來像一個切換框。還需注意以下“模板”構造。它們是模板變量，將由ESPAsyncWebServer的模板處理引擎替換。

％TUBE_TEMPLATE_STATUS％

％BULB_TEMPLATE_STATUS％

％SOCKET_TEMPLATE_STATUS％

％DIMMER_VALUE％

當瀏覽器處理HTML / CSS / Javascript時，它將如下面的用戶界面所示呈現。這就是ESP32家庭自動化項目進行交互并使用手機瀏覽器控制AC負載的方式。

custom.js：自定義javascript文件，它將處理網頁和用戶之間的交互。

如果用戶切換了燈泡復選框，則它應該更新用戶界面的值，并通過digitalWrite函數切換GPIO引腳的值。

該代碼使用Fetch API，而不是使用XMLHTTPRequest對象。在從DOM中選擇元素并將函數處理程序附加到事件之后，將向Web服務器發送JSON請求，然后處理響應并刷新網頁。另外，使用javascript async / await語法來處理JSON請求的等待/處理。

如果想查看用戶界面發送的JSON請求，在瀏覽器中單擊F12，然后轉到“網絡”選項卡。將應用程序部署到ESP32后，即可執行此操作。如果切換任何開關，那么在幕后就會有一個請求發送到具有對GPIO的控制權的ESP32異步Web服務器。

下面3個文件為ESP32家庭自動化項目提供了動力。它們是為ESP32 Web服務器提供動力的文件，它們執行以下操作：

創建一個Web服務器并偵聽來自瀏覽器的HTTP請求

保存AutomationProto類的當前狀態，以便即使在多個瀏覽器中訪問該類，也仍將獲得相同的狀態。

更新GPIO引腳的值

將代碼分為頭文件和cpp文件，以進一步清理代碼結構。頭文件將包含項目的框架，而cpp文件將顯示實現。如，automation.h是頭文件，Automation.cpp是cpp文件。

自動化：

在創建該項目時，嘗試遵循面向對象的編程，因此將AutomationProto表示為一個類。

此C ++頭文件包含將控制項目的類。

此外，它包含為調光燈供電所需的導入頭文件。已使用Robotdyn AC Dimmer庫，因此已將其導入此處。

此類還表示交流負載的狀態，因此可以看到每個交流負載的布爾屬性。一個屬性表示燈管光（m_tube），燈座（m_socket），燈泡（m_bulb）和調光燈值（m_dimValue）。

它還包含所有getters和setters屬性，以更改類的私有變量。在main.cpp文件中，可以看到如何導入此類。

Automation.cpp：包含代碼的實現。它還定義了ESP32引腳來控制功率繼電器。

引腳分配：

管腳– GPIO 16

燈泡引腳– GPIO 17

插座引腳– GPIO 18

調光器輸出引腳– GPIO 32

調光器過零引腳– GPIO 36

該代碼行導入了automation.h，并為AutomationProto類定義了C ++構造函數。已經將所有變量初始化為false來表示“ OFF ”狀態。如果將其設置為true，則表示“ ON ”狀態。

該代碼代表了GPIO引腳分配。

上面的代碼是一個自定義方法，它將初始化AutomationProto類，并使用arduino digitalWrite命令設置所有GPIO輸出。調光器類也在此方法中初始化。

每個AC負載都由一個getter和setter方法表示，該方法將設置類的私有值。此外，在此處調digitalWrite代碼，以便根據需要打開或關閉GPIO。

main.cpp：負責服務來自瀏覽器的HTTP請求，并處理硬件的接口。

這些是include語句，這些語句將告訴所需的頭文件。

更新以下網絡連接用戶名和密碼，以匹配您的wifi網絡證書。

定義了ESP32 Web服務器，它將偵聽默認端口80并導入我們的AutomationProto類。

上面的代碼是“模板”處理器功能，并將在復選框上設置屬性“ checked ”。在上面有關index.html模板變量的討論中，此函數正在處理和替換它們。在“ /”根目錄或index.html調用上調用此函數。

當請求發送到服務器并且服務器不知道如何響應時，將調用上面的函數。

上面的代碼是setup（）函數的開始。初始化串行對象，然后開始連接到wifi。之后，開始初始化SPIFFS。使用proto.init（）函數調用來初始化類。

第2行：在此函數中映射“ / toggle / socket”

第4行：檢查“ status”參數是否設置為true或false。以下參數是由JavaScript代碼設置的。因此，如果將checbox切換為true，則發送“ true ”，否則發送“ false ”。

第6-8行：提取參數，然后將值設置為類AutomationProto

第9-10行：為JavaScript調用定義了一個返回值。

第12-16行：如果由于任何原因未定義參數，則將變量“ isError ”與消息一起設置為true

第18-20行：通過ArduinJSON庫將響應發送回調用瀏覽器

燈管和燈泡按鈕中也發生了類似的情況。唯一的區別是調光燈泡。

第2行：偵聽請求“ / dimmer / change”，當擴展調光器的值時調用該請求。

第6-9行：通過調用proto.setDimmerValue（value.toInt（））;提取調光器輸入范圍的值，并設置AutomationProto類的值；

添加到ESP32：

如果要將其添加到ESP32，則可以從PlatformIO IDE執行以下操作。

首先，需要通過ESP32的SPIFFS將靜態文件上傳到項目的數據文件夾中。為此，單擊PlatformIO圖標，然后單擊“上傳文件系統映像”。如果看到消息“正在連接。..”?？赡苄枰獑螕鬍SP32中的啟動按鈕。

接下來，通過單擊“ Upload and Monitor”將代碼上傳到ESP32的閃存中。如果看到消息“正在連接。..”。再次，則可能需要再次單擊啟動按鈕。

一旦顯示了PlatformIO的監視器，然后等待顯示該消息。如果看到這樣的消息，請轉到手機瀏覽器并輸入以下ip地址?，F在，將被轉到index.html頁面。

如果看到“ WiFi失??！”消息，請單擊ESP32中的reset按鈕，等待一段時間以使其再次初始化，然后重試。
責任編輯:pj