ESP32 Web服務(wù)器:從網(wǎng)頁(yè)控制LED
ESP系列WiFi模塊在基于物聯(lián)網(wǎng)項(xiàng)目的愛好者和行業(yè)中非常受歡迎。ESP32是ESP系列模塊中最受歡迎的板之一,它具有雙核32位CPU,內(nèi)置Wi-Fi,藍(lán)牙和足夠數(shù)量的I/O引腳。它是一種小型且經(jīng)濟(jì)有效的設(shè)備,可用于使任何項(xiàng)目與互聯(lián)網(wǎng)通信。在這個(gè)項(xiàng)目中,我將創(chuàng)建一個(gè)帶有ESP32的web服務(wù)器,使用Arduino IDE環(huán)境控制LED。Web服務(wù)器是我們存儲(chǔ)網(wǎng)頁(yè)、處理網(wǎng)頁(yè)并將其傳送給Web客戶端的地方。Web服務(wù)器可以通過(guò)本地網(wǎng)絡(luò)上的任何設(shè)備訪問(wèn)。在之前的教程中,我們使用樹莓派構(gòu)建了相同的web服務(wù)器。
需求
?ESP32模塊
?USB電纜
?電路試驗(yàn)板
?LED
?跳線
?電阻器1 k
線路圖
編程部分
完整的ESP32 web服務(wù)器代碼在本項(xiàng)目的末尾給出。在本節(jié)中,我將告訴您代碼的實(shí)際工作原理。
你需要做的第一件事是包括WiFi庫(kù)。
現(xiàn)在輸入您的網(wǎng)絡(luò)憑據(jù),即您的WiFi網(wǎng)絡(luò)的SSID和密碼內(nèi)的雙倒逗號(hào)。
接下來(lái),聲明一個(gè)WiFi Server庫(kù)的對(duì)象,這樣我們就可以訪問(wèn)它的函數(shù)了。所形成的實(shí)例的參數(shù)將是端口號(hào),因?yàn)镠TTP的默認(rèn)端口號(hào)是80,所以我將使用這個(gè)值。
下面這行創(chuàng)建了一個(gè)變量來(lái)存儲(chǔ)HTTP請(qǐng)求的標(biāo)頭:
現(xiàn)在,您必須創(chuàng)建輔助變量來(lái)存儲(chǔ)輸出的當(dāng)前狀態(tài)。
現(xiàn)在,將GPIO分配到您的輸出,這里我使用GPIO2引腳作為我的輸出,您可以根據(jù)您正在使用的輸出更改它。
在void setup()函數(shù)中,我們將初始化波特率,LED輸出,并使用WiFi.begin(ssid,password)將模塊與Wi-Fi連接;函數(shù)。該功能啟動(dòng)Wi-Fi連接,等待連接成功,并在串口監(jiān)視器上打印ESP IP地址。
在loop()函數(shù)中,您必須編寫當(dāng)新客戶端與web服務(wù)器建立連接時(shí)發(fā)生的事情。ESP32總是使用server.available()偵聽傳入的客戶端;并將輸入的數(shù)據(jù)存儲(chǔ)到一個(gè)字符串變量中,并在串行監(jiān)視器上打印數(shù)據(jù)。
現(xiàn)在,if和else語(yǔ)句檢查在您的網(wǎng)頁(yè)中按下了哪個(gè)按鈕,并相應(yīng)地控制輸出。例如,如果您按下GPIO2 ON按鈕,則ESP32接收到/2/ON URL上的請(qǐng)求,ESP32將LED打開。
用于ESP32 Webserver的HTML代碼
在HTML中創(chuàng)建網(wǎng)頁(yè)對(duì)這個(gè)項(xiàng)目來(lái)說(shuō)是最重要的,ESP32將發(fā)送一個(gè)響應(yīng)到你的瀏覽器,其中包含一些HTML代碼來(lái)構(gòu)建網(wǎng)頁(yè)。-這里我們已經(jīng)嵌入了完整的HTML代碼在Arduino代碼使用client.println。最后給出了完整的代碼。
下面一行表示我們正在發(fā)送HTML。
下面的代碼行使網(wǎng)頁(yè)在任何瀏覽器中都能響應(yīng)。
現(xiàn)在我們要樣式我們的網(wǎng)頁(yè),裝飾你的頁(yè)面,你可以使用CSS樣式按鈕和背景。您可以根據(jù)自己的需要更改屬性。
現(xiàn)在設(shè)置網(wǎng)頁(yè)的標(biāo)題。在這里,你可以給任何名字或任何你喜歡的東西。
現(xiàn)在您必須編寫代碼來(lái)顯示GPIO 2的當(dāng)前狀態(tài)。使用output2state變量,以便在變量更改時(shí)立即更新狀態(tài)。
現(xiàn)在,根據(jù)GPIO的當(dāng)前狀態(tài)顯示on或off按鈕。如果當(dāng)前狀態(tài)是關(guān)閉的,你必須顯示ON按鈕,反之亦然。
最后,當(dāng)響應(yīng)結(jié)束時(shí),必須清除header變量,并使用client.stop()停止與客戶端的連接。
這是整個(gè)項(xiàng)目的編程過(guò)程;本文最后給出了該項(xiàng)目的完整代碼,您可以查看。
用Arduino IDE編程ESP32
現(xiàn)在您正處于上傳ESP32代碼的階段,我們將使用Arduino IDE通過(guò)以下步驟上傳ESP32中的代碼:
通過(guò)USB電纜將ESP32連接到PC上,并如上所述制作電路,這里我使用的是GPIO2,您可以根據(jù)您的需要使用。
打開Arduino IDE并將此代碼復(fù)制到IDE窗口,但請(qǐng)確保您提供了正確的網(wǎng)絡(luò)WiFi憑據(jù)。
現(xiàn)在進(jìn)入Tools——> Board——> ESP32 Dev module。
現(xiàn)在轉(zhuǎn)到Tools—>Port,選擇ESP32連接的端口。
現(xiàn)在單擊upload上傳代碼。
上傳完成后,您將在輸出控制臺(tái)中發(fā)現(xiàn)如下消息。
現(xiàn)在打開你的串行監(jiān)視器,按下ESP32的重置按鈕,現(xiàn)在你的ESP開始連接到你的網(wǎng)絡(luò),一旦連接,它會(huì)給你這個(gè)ESP的IP。
現(xiàn)在打開瀏覽器并輸入此IP地址,您將找到以下網(wǎng)頁(yè)。
從這個(gè)網(wǎng)頁(yè),你可以控制你的LED,你可以看到在串行監(jiān)視器以及后臺(tái)發(fā)生了什么。
這就是你如何成功地創(chuàng)建一個(gè)web服務(wù)器,并從網(wǎng)頁(yè)控制LED。這樣,您也可以使用ESP32網(wǎng)絡(luò)服務(wù)器從世界任何地方控制家用電器。
本文編譯自iotdesignpro