電子發(fā)燒友網(wǎng)>電子資料下載>電子資料>使用基于ESP32的Web服務(wù)器的互聯(lián)網(wǎng)控制LED

使用基于ESP32的Web服務(wù)器的互聯(lián)網(wǎng)控制LED

2075508 2022-12-20 | zip | 0.54 MB | 次下載 | 2積分

資料介紹

描述

項(xiàng)目概況

在這個(gè)例子中，我們將弄清楚如何制作一個(gè)基于 ESP32 的網(wǎng)絡(luò)服務(wù)器來控制 LED 狀態(tài)，它可以從世界任何地方訪問。

我在這個(gè)項(xiàng)目中使用了 Mac 計(jì)算機(jī)，但您可以在任何可以運(yùn)行 Arduino IDE 的計(jì)算機(jī)上執(zhí)行此操作，即使是在像 Raspberry Pi 這樣的廉價(jià)低功耗計(jì)算機(jī)上也是如此。

使用 Arduino IDE 準(zhǔn)備 ESP32

為了開始使用 Arduino IDE 和 Arduino 編程語言對(duì) ESP32 進(jìn)行編程，您需要一個(gè)特殊的附加組件。通過以下鏈接了解如何在 Mac OS 上為 ESP32 準(zhǔn)備 Arduino IDE 。

所需材料

對(duì)于本教程，您需要以下項(xiàng)目：

ESP32開發(fā)板
5mm LED
電阻220ohm
帶 I2C 模塊的 16x2 LCD 顯示屏
面包板
跳線
微型 USB 數(shù)據(jù)線

構(gòu)建電路

按照下面的示意圖進(jìn)行連接。

首先將 ESP32 和 GND 上的 3V3 電源電壓輸出連接到面包板上。使用 GPIO 引腳 23 作為數(shù)字輸出引腳，通過電阻將 LED 連接到 ESP32。之后，將 16x2 LCD 顯示器的 SDA 引腳連接到 GPIO 引腳 21，將 SCL 連接到 GPIO 引腳 22。

毛邊素描

SPIFFS 文件系統(tǒng)快速概覽

SPIFFS全稱是“Serial Peripheral Interface Flash File System”，即通過SPI傳輸數(shù)據(jù)的閃存文件系統(tǒng)。相應(yīng)地，SPIFFS 是一種簡化的文件系統(tǒng)，專為具有通過 SPI 總線傳輸數(shù)據(jù)的閃存芯片（例如 ESP32 閃存）的微控制器而設(shè)計(jì)。

在以下情況下，SPIFFS 最適合與 ESP32 一起使用：

創(chuàng)建用于存儲(chǔ)設(shè)置的文件。
永久數(shù)據(jù)存儲(chǔ)。
創(chuàng)建文件來存儲(chǔ)少量數(shù)據(jù)（而不是為此使用 microSD 卡）。
存儲(chǔ)用于創(chuàng)建 Web 服務(wù)器的 HTML 和 CSS 文件。

在 Mac OS 上安裝 SPIFFS 引導(dǎo)加載程序

您可以直接使用 Arduino IDE 上的插件創(chuàng)建、保存和寫入存儲(chǔ)在 ESP32 文件系統(tǒng)中的文件。

首先，確保您安裝了最新版本的 Arduino IDE，然后執(zhí)行以下操作：

打開以下鏈接并下載壓縮包“ ESP32FS-1.0.zip”
轉(zhuǎn)到位于Documents文件夾中的 Arduino IDE 目錄。創(chuàng)建一個(gè)tools文件夾（如果不存在）。在tools目錄中創(chuàng)建另一個(gè)文件夾ESP32FS。在ESP32FS內(nèi)部創(chuàng)建另一個(gè)，稱為tool 。
將步驟 1 中下載的 ZIP 存檔解壓縮到工具文件夾中。
重新啟動(dòng)您的 Arduino IDE。
查看插件是否安裝成功，打開Arduino IDE，點(diǎn)擊“Tools”，查看該菜單中是否有“ESP32 Sketch Data Upload”項(xiàng)。

安裝庫

ESPAsyncWebServer 和 AsyncTCP 庫允許您使用 ESP32 文件系統(tǒng)中的文件創(chuàng)建 Web 服務(wù)器。有關(guān)這些庫的更多信息，請(qǐng)查看以下鏈接。

安裝 ESPAsyncWebServer 庫

單擊此處下載圖書館的 ZIP 存檔。
解壓縮此存檔。您應(yīng)該獲得 ESPAsyncWebServer-master 文件夾。
將其重命名為“ESPAsyncWebServer”。

安裝 AsyncTCP 庫

單擊此處下載圖書館的 ZIP 存檔。
解壓縮此存檔。您應(yīng)該獲得 AsyncTCP-master 文件夾。
將其重命名為“AsyncTCP”。

將 ESPAsyncWebServer 和 AsyncTCP 文件夾移動(dòng)到位于Documents目錄內(nèi)的庫文件夾中。

最后，重啟 Arduino IDE。

使用以下內(nèi)容創(chuàng)建一個(gè) index.html 文件

切換按鈕的 HTML/CSS 模板取自以下來源。另外創(chuàng)建了兩個(gè) JS 腳本。第一個(gè)在顯示 HTML 頁面之前檢查 LED 的當(dāng)前狀態(tài)。第二個(gè)用于通過更改復(fù)選框的狀態(tài)來更改 LED 的狀態(tài)。

html>
<html>
<head>

<title>Internet controlled LED using ESP32 based web servertitle>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<link rel="stylesheet" type="text/css" href="style.css">

// Verify the current status of LED
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event) {
    var button_text = "";
    button_text = document.getElementById("status").innerHTML;
    if (button_text == "ON") {
        document.getElementById("switch1").checked = true;
    }
    else if (button_text == "OFF") {
        document.getElementById("switch1").checked = false;
    }
});
script>

// Change the state of LED   
<script type="text/javascript">
    function fun1()
    {
    var text = document.getElementById("status").innerHTML;
    var chbox=document.getElementById("switch1");
        if (chbox.checked == true && text == "OFF") {
            window.location.pathname = '/on';
            chbox.checked = true;
        }
        else
        {
            window.location.pathname = '/off';
            chbox.checked = false;
        }
    }
script>
head>

<body >
    <h1>Internet controlled LED using ESP32 based web server <div id="status" style = "display: none;">%STATE%div>h1>
        <span class="switch">
            <span class="switch-border1">
                <span class="switch-border2">
                    <input id="switch1" type="checkbox" onclick="fun1()"/>
                    <label for="switch1">label>
                    <span class="switch-top">span>
                    <span class="switch-shadow">span>
                    <span class="switch-handle">span>
                    <span class="switch-handle-left">span>
                    <span class="switch-handle-right">span>
                    <span class="switch-handle-top">span>
                    <span class="switch-handle-bottom">span>
                    <span class="switch-handle-base">span>
                    <span class="switch-led switch-led-green">
                        <span class="switch-led-border">
                            <span class="switch-led-light">
                                <span class="switch-led-glow">span>
                            span>
                        span>
                    span>
                    <span class="switch-led switch-led-red">
                        <span class="switch-led-border">
                            <span class="switch-led-light">
                                <span class="switch-led-glow">span>
                            span>
                        span>
                    span>
                span>
            span>
        span>
body>
html>

使用以下內(nèi)容創(chuàng)建一個(gè) style.css 文件

body {
    font-family: arial, verdana, sans-serif;
    font-size: 8px;
    background: #1E1E20;
    text-align: center;
}
h1{
    color: white;
    font-size:30px;
}
.switch {
    display: inline-block;
    margin: 10em 2em;
    position: relative;
    border-radius: 3.5em;
    -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
    -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
    box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
}
.switch label {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.switch input {
    display: none;
}
.switch span {
    display: block;
    -webkit-transition: top 0.2s;
    -moz-transition: top 0.2s;
    -ms-transition: top 0.2s;
    -o-transition: top 0.2s;
    transition: top 0.2s;
}
.switch-border1 {
    border: 0.1em solid #000;
    border-radius: 3.5em;
    -webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
    -moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
    box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
}
.switch-border2 {
    width: 6.6em;
    height: 12.6em;
    position: relative;
    border: 0.1em solid #323232;
    background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
    background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
    border-radius: 3.4em;
}
.switch-border2:before,
.switch-border2:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: .3;
    border-radius: 3.4em;
}
.switch-border2:before {
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));
    background: -webkit-linear-gradient(#000, rgba(0,0,0,0));
    background: -moz-linear-gradient(#000, rgba(0,0,0,0));
    background: -ms-linear-gradient(#000, rgba(0,0,0,0));
    background: -o-linear-gradient(#000, rgba(0,0,0,0));
    background: linear-gradient(#000, rgba(0,0,0,0));
}
.switch-border2:after {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));
    background: -webkit-linear-gradient(rgba(0,0,0,0), #000);
    background: -moz-linear-gradient(rgba(0,0,0,0), #000);
    background: -ms-linear-gradient(rgba(0,0,0,0), #000);
    background: -o-linear-gradient(rgba(0,0,0,0), #000);
    background: linear-gradient(rgba(0,0,0,0), #000);
}
.switch-top {
    width: 100%;
    height: 84%;
    position: absolute;
    top: 8%;
    left: 0;
    z-index: 1;
    background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D),             color-stop(0.5, #4B4B4B), to(#2D2D2D));
    background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
    border-radius: 3.4em;
}
.switch-shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    border-radius: 3.4em;
    -webkit-box-shadow: 0 0 2em black inset;
    -moz-box-shadow: 0 0 2em black inset;
    box-shadow: 0 0 2em black inset;
}
.switch-handle-left,
    .switch-handle-right {
    content: '';
    display: block;
    width: 3.6em;
    height: 0;
    position: absolute;
    top: 6.6em;
    z-index: 2;
    border-bottom: 4.5em solid #111;
    border-left: 0.7em solid transparent;
    border-right: 0.7em solid transparent;
    border-radius: 0;
}
.switch-handle-left {
    left: 0.8em;
}
.switch-handle-right {
    right: 0.8em;
}
.switch-handle {
    width: 3.6em;
    height: 4.5em;
    position: absolute;
    top: 6.6em;
    left: 1.5em;
    z-index: 3;
    background: #333;
    background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
    background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
    border-radius: 0;
}
.switch-handle-top {
    width: 5em;
    height: 5em;
    position: absolute;
    top: 8.5em;
    left: 0.8em;
    z-index: 4;
    background-color: #555;
    background-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787));
    background-image: -webkit-linear-gradient(left, #5F5F5F, #878787);
    background-image: -moz-linear-gradient(left, #5F5F5F, #878787);
    background-image: -ms-linear-gradient(left, #5F5F5F, #878787);
    background-image: -o-linear-gradient(left, #5F5F5F, #878787);
    background-image: linear-gradient(to right, #5F5F5F, #878787);
    border-top: 0.2em solid #AEB2B3;
    border-radius: 2.5em;
}
.switch-handle-bottom {
    width: 3.6em;
    height: 3.6em;
    position: absolute;
    top: 4.7em;
    left: 1.5em;
    z-index: 3;
    background: #333;
    background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
    background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #1    11);
    border-top: 0.2em solid #141414;
    border-radius: 1.8em;
}
.switch-handle-base {
    width: 4.2em;
    height: 4.2em;
    position: absolute;
    top: 3.8em;
    left: 1.2em;
    z-index: 2;
    border-top: 0.2em solid rgba(255,255,255,0.35);
    border-radius: 2.1em;
    -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
    -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
    box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
}
.switch-led {
    position: absolute;
    left: 2em;
    border-radius: 1.4em;
}
.switch-led-border {
    border: 0.2em solid black;
    border-radius: 1.3em;
}
.switch-led-light {
    border-radius: 1.1em;
    -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
    -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
    box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
}
.switch-led-glow {
    width: 2em;
    height: 2em;
    position: relative;
    border-radius: 1em;
}
.switch-led-glow:before {
    content: '';
    display: block;
    width: 0.6em;
    height: 0.6em;
    position: absolute;
    top: 0.3em;
    left: 0.7em;
    background: rgba(255,255,255,0.2);
    border-radius: 0.3em;
    -webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);
    -moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);
    box-shadow: 0 0 1em rgba(255,255,255,0.75);
}
.switch-led-glow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
    filter: alpha(opacity=20);
    border: 1em solid #fff;
    border-color: transparent #fff transparent #fff;
    border-radius: 1em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.switch-led:after {
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    color: #666;
    font-family: arial, verdana, sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0.1em rgba(0,0,0,0.7);
}
.switch-led-green:after {
    content: 'ON';
    top: -1.8em;
}
.switch-led-red:after {
    content: 'OFF';
    bottom: -1.8em;
}
.switch-led-green {
    top: -5em;
    border-top: 0.1em solid rgba(0,161,75,0.5);
    border-bottom: 0.1em solid rgba(255,255,255,0.25);
}
.switch-led-green .switch-led-light {
    background: rgb(0,161,75);
    border: 0.1em solid rgb(0,104,56);
}
.switch-led-red {
    bottom: -5em;
    border-top: 0.1em solid rgba(237,28,36,0.2);
    border-bottom: 0.1em solid rgba(255,255,255,0.25);
    -webkit-box-shadow: 0 0 3em rgb(237,28,36);
    -moz-box-shadow: 0 0 3em rgb(237,28,36);
    box-shadow: 0 0 3em rgb(237,28,36);
}
.switch-led-red .switch-led-light {
    background: rgb(237,28,36);
    border: 0.1em solid rgb(161,30,45);
}
.switch-led-red .switch-led-glow {
    background: #fff;
    background: rgba(255, 255, 255, 0.3);
    filter: alpha(opacity=30);
}
/* Switch on */
.switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right {
    top: 1.5em;
    border-bottom: 0;
    border-top: 4.5em solid #111;
}
.switch input:checked~.switch-handle {
    top: 1.5em;
}
.switch input:checked~.switch-handle-top  {
    top: -1em;
    border-top: 0;
    border-bottom: 0.2em solid #AEB2B3;
}
.switch input:checked~.switch-handle-bottom {
    top: 4.2em;
    border-top: 0;
    border-bottom: 0.2em solid #141414;
}
.switch input:checked~.switch-handle-base {
    top: 4.5em;
    border-top: 0;
    border-bottom: 0.2em solid rgba(255,255,255,0.35);
}
.switch input:checked~.switch-led-green {
    -webkit-box-shadow: 0 0 3em rgb(0,161,75);
    -moz-box-shadow: 0 0 3em rgb(0,161,75);
    box-shadow: 0 0 3em rgb(0,161,75);
}
.switch input:checked~.switch-led-green .switch-led-glow {
    background: #fff;
    background: rgba(255, 255, 255, 0.4);
    filter: alpha(opacity=40);
}
.switch input:checked~.switch-led-red {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.switch input:checked~.switch-led-red .switch-led-glow {
    background: rgba(255, 255, 255, 0);
    filter: alpha(opacity=0);
}

Arduino代碼

主要是，代碼基于使用 SPIFFS 從 ESP32 Web 服務(wù)器獲取的 Arduino 代碼和如何在 Arduino IDE 上使用帶 ESP32 的 I2C LCD。

// Import required libraries
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include "SPIFFS.h"
#include 

// Replace with your network credentials
const char* ssid = "YourNetworkName";
const char* password = "YourPassword";

// set the LCD number of columns and rows
int lcdColumns = 16;
int lcdRows = 2;

// set LCD address, number of columns and rows
// if you don't know your display address, run an I2C scanner sketch
LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows);

// Set LED GPIO
const int ledPin = 23;

// Stores LED state
String ledState;

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

// Replaces placeholder with LED state value
String processor(const String& var){
    Serial.println(var);
    if(var == "STATE"){
        if(digitalRead(ledPin)){
            ledState = "ON";
        }
    else{
        ledState = "OFF";
        }
        Serial.print(ledState);
        return ledState;
    }
return String();
}
void setup(){

// initialize LCD
    lcd.init();

// turn on LCD backlight
    lcd.backlight();

// Serial port for debugging purposes

Serial.begin(115200);
    pinMode(ledPin, OUTPUT);

// Initialize SPIFFS file server 
    if(!SPIFFS.begin(true)){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
    }

// Connect to Wi-Fi
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED) {
        delay(1000);
        Serial.println("Connecting to WiFi..");
    }

// Print IP address of web server on serial interface
    Serial.println(WiFi.localIP());

// Print IP address of web server on LCD display
    lcd.setCursor(0, 0);
    lcd.print("IP address is ");
    lcd.setCursor(0, 1);
    lcd.print(WiFi.localIP());

// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html", String(), false, processor);
});

// Route to load style.css file
server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/style.css", "text/css");
});

// Route to set GPIO to HIGH
server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, HIGH);
    request->send(SPIFFS, "/index.html", String(), false, processor);
});

// Route to set GPIO to LOW
server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, LOW);
    request->send(SPIFFS, "/index.html", String(), false, processor);
});

// Start server
    server.begin();
}

void loop(){
}