Arduino Esp8266 Web LED控制

已于 2022-07-17 21:39:16 修改
阅读量1.6k 收藏 30
点赞数 1
分类专栏： 单片机 文章标签： 前端 服务器 网络
于 2022-06-24 11:35:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lionwerson/article/details/125442371
版权
该博客介绍了如何使用Arduino ESP8266模块搭建一个简单的Web服务器，通过网页实现LED灯的开关控制，并结合DHT11传感器实时显示环境的温度和湿度。用户可以通过浏览器访问设备IP地址进行交互，实现智能家居的基本功能。代码中包含了Web服务器的设置、HTTP请求处理以及传感器数据的读取和响应。
摘要由CSDN通过智能技术生成

Arduino Esp8266 Web LED控制

https://s2.loli.net/2022/06/24/VDNMiyFKe8Qtz4X.png

arduino esp8266 web控制和LED控制:

web.ino

#include <DHT.h>
#include <DHT_U.h>

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "FS.h"

#define DHTPIN 12

const char *ssid = "essid",
           *password = "password";

ESP8266WebServer server(80);

const int LED_PIN = 15;
int ledStatus = HIGH;

void handleRoot() {

    File index = SPIFFS.open("/index.html", "r");
    server.streamFile(index, "text/html");
    index.close();
}

void sendStatus() {
    if (ledStatus == HIGH) server.send(200, "text/plain", "HIGH");
    else server.send(200, "text/plain", "LOW");
}

void toggleLED() {
    ledStatus = ledStatus == HIGH ? LOW : HIGH;
    digitalWrite(LED_PIN, ledStatus);
    sendStatus();
}

void setup() {
    pinMode(LED_PIN, OUTPUT);
    digitalWrite(LED_PIN, ledStatus);
    Serial.begin(115200);

    SPIFFS.begin();

    WiFi.begin(ssid,password);

    while(WiFi.status() != WL_CONNECTED){
      delay(500);
      Serial.print(".");
    }
    Serial.println("");
    Serial.println("wifi connected");
    Serial.println("IP address:");
    Serial.println(WiFi.localIP());
 

    server.on("/", handleRoot);
  
    server.on("/toggle", toggleLED);
    server.on("/status", sendStatus);
 

    server.begin();
}

void loop() {
    server.handleClient();
}

index.html

<!doctype html>

<html>
    <head>
        <meta charset='UTF-8' />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"> -->
        <!-- <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css" /> -->
        <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
        <title>智能家居控制平台</title>

        <style>
        body{height: 100vh;justify-content: center;align-items: center;background-color: #efeeee;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
        }
        </style>
    </head>

    <body>
        <div class="container">
            <center>
            <h2>智能家居控制平台</h2>
            <svg id = "light" xmlns="on" width="96" height="96" fill="currentColor" class="bi bi-lightbulb"
                viewBox="0 0 16 16">
            <path
                d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z" />
            </svg>
            <h3>灯光: <span id='status'></span></h3>
            <button id='toggleBtn'>ON/OFF</button>
            </center>
        </div>
      

        <script>
          
            function makeRequest(action, callback) {
                var req = new XMLHttpRequest();

                req.open('GET', '/' + action + '?' + Date.now());
        
                if (callback !== undefined) {
                    req.onreadystatechange = function() {
                        if (req.status === 200) callback(req.responseText);
                    };
                }
                req.send(null);
            }

            var statusSpan = document.getElementById('status');
            var lightstatus = document.getElementById('light');
            function updateStatus(status) {
                
                if (status == "HIGH") {
                    statusSpan.textContent = "关";
                    lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z"/>'
                }
                else{
                    statusSpan.textContent = "开";
                    lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/>'
                }
            }

            document.getElementById('toggleBtn').addEventListener('click',
                function() {
                makeRequest('toggle', updateStatus);
            });

            makeRequest('status', updateStatus);
        </script>
    </body>
</html>

arduino.ino

#include <DHT.h>
#include <DHT_U.h>

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "FS.h"

#define DHTPIN 12
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);

const char *ssid = "essid",   //连接wifi的名称
           *password = "password"; //连接wifi的密码

ESP8266WebServer server(80);


const int LED_PIN = 15;
int ledStatus = HIGH;

void handleRoot() {
  
    File index = SPIFFS.open("/index.html", "r");
    server.streamFile(index, "text/html");
    index.close();
}


void sendStatus() {
    if (ledStatus == HIGH) server.send(200, "text/plain", "HIGH");
    else server.send(200, "text/plain", "LOW");
}


void toggleLED() {
    ledStatus = ledStatus == HIGH ? LOW : HIGH;
    digitalWrite(LED_PIN, ledStatus);
    sendStatus();
}
void sendDHT(){
    float h = dht.readHumidity();
    float t = dht.readTemperature();
    if (isnan(t)) {
    Serial.println(F("Failed to read from DHT sensor!"));
    return;
  }
    server.send(200, "text/plain", String(t));
  }

void sendDHTH(){
    float h = dht.readHumidity();
    if (isnan(h)) {
    Serial.println(F("Failed to read from DHT sensor!"));
    return;
  }
    server.send(200, "text/plain", String(h));
  }

void setup() {
    pinMode(LED_PIN, OUTPUT);
    digitalWrite(LED_PIN, ledStatus);
    Serial.begin(115200);

    SPIFFS.begin();

    
    WiFi.begin(ssid,password);

    while(WiFi.status() != WL_CONNECTED){
      delay(500);
      Serial.print(".");
    }
    Serial.println("");
    Serial.println("wifi connected");   //显示wifi已连接
    Serial.println("IP address:");      //显示获取到的IP地址
    Serial.println(WiFi.localIP());
 

    server.on("/", handleRoot);
 
    server.on("/toggle", toggleLED);
    server.on("/status", sendStatus);
    server.on("/temper",sendDHT);
    server.on("/hum",sendDHTH);
    
    dht.begin();

    server.begin();
    
}

void loop() {
    server.handleClient();
}

web.html

<!doctype html>

<html>
    <head>
        <meta charset='UTF-8' />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"> -->
        <!-- <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css" /> -->
        <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
        <title>智能家居控制平台</title>

        <style>
        body{height: 100vh;justify-content: center;align-items: center;background-color: #efeeee;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
        }
        </style>
    </head>

    <body>
        <div class="container">
            <center>
            <h2>智能家居控制平台</h2>
            <svg id = "light" xmlns="on" width="96" height="96" fill="currentColor" class="bi bi-lightbulb"
                viewBox="0 0 16 16">
            <path
                d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z" />
            </svg>
            <h3>灯光: <span id='status'></span></h3>
            <button id='toggleBtn'>ON/OFF</button>
            </center>
        </div>
        <div class="container">
            <center>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="96" height="96">
                    <path fill="none" d="M0 0h24v24H0z" />
                    <path
                        d="M8 5a4 4 0 1 1 8 0v5.255a7 7 0 1 1-8 0V5zm1.144 6.895a5 5 0 1 0 5.712 0L14 11.298V5a2 2 0 1 0-4 0v6.298l-.856.597zM8 16h8a4 4 0 1 1-8 0z" />
                </svg>
                <h3>温度: <span id="tempter"></span><span id="temper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path fill="none" d="M0 0h24v24H0z" />
                    <path
                        d="M4.5 10a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM22 10h-2a4 4 0 1 0-8 0v5a4 4 0 1 0 8 0h2a6 6 0 1 1-12 0v-5a6 6 0 1 1 12 0z" />
                </svg>
                </span></h3>
            </center>
        </div>
      

        <script>
        
            function makeRequest(action, callback) {
                var req = new XMLHttpRequest();
       
                req.open('GET', '/' + action + '?' + Date.now());
             
                if (callback !== undefined) {
                    req.onreadystatechange = function() {
                        if (req.status === 200) callback(req.responseText);
                    };
                }
                req.send(null);
            }

            var statusSpan = document.getElementById('status');
            var lightstatus = document.getElementById('light');
            function updateStatus(status) {
                
                if (status == "HIGH") {
                    statusSpan.textContent = "关";
                    lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z"/>'
                }
                else{
                    statusSpan.textContent = "开";
                    lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/>'
                }
            }

            document.getElementById('toggleBtn').addEventListener('click',
                function() {
                makeRequest('toggle', updateStatus);
            });

            function updateTemper(status) {
                var temper = document.getElementById('tempter');
                temper.textContent = status
                }
            makeRequest('status', updateStatus);
            makeRequest('temper', updateTemper);
            var timer = self.setInterval(" makeRequest('temper', updateTemper)",5000);
            
        </script>
    </body>
</html>

然后在arduino的项目目录下创建data文件夹，然后把index.html文件放入后，用

esp8266fs工具写入到flash中，连接wifi之后就可以了。

esp8266fs工具:

Releases · esp8266/arduino-esp8266fs-plugin

lionwerson
关注
专栏目录
网页控制esp8266的8个GPIO引脚状态方法美化版(四)
perseverance51博客
03-22 721
网页控制esp8266的8个GPIO引脚状态方法美化版
Arduino ESP8266 Web Service PWM控制led亮度
perseverance51博客
10-06 955
Arduino ESP8266 Web Service PWM控制led亮度 本教程展示了如何构建一个带有滑块的ESP8266 web服务器来控制LED亮度。您将学习如何将滑块添加到web服务器项目中，获取它的值，并将其保存在一个ESP8266可以使用的变量中。我们将使用这个值来控制PWM信号的占空比，并改变LED的亮度。例如，你可以控制一个伺服电机，而不是LED。 所需库 ESP8266: 安装 ESPAsyncWebServer 和 ESPAsyncTCP 库. 实例代码 #includ
ESP8266+网页控制LED
热门推荐
生活
06-07 1万+
本次我们将利用NodeMCU建立网络服务。用户通过浏览器可以访问NodeMCU所建立的网页。通过该网页，用户可实现对NodeMCU的控制。首先通过串口，当ESP8266连接WiFi成功之后会获取网页的IP地址，将该地址输入到浏览器中通过网页点击LED按键，开发板上的LED进行变化。此时LED灯是灭的，当点下网页中的LED按键，开发板上LED灯亮起来。再按一次LED熄灭。
micropython esp8266基于webServer控制LED
fjwfoshan的博客
06-03 3858
“”" 基于TCP实现webServer控制LED状态 “”" import socket, time, re from connectWiFi import connectWiFi from machine import Pin ssid = "ssid " pswd = "pswd " LED控制 %s xmlhttp.onreadystatechange = ...
网页端按钮对 esp 8266 led 灯控制
最新发布
ling_zhi_xin的博客
08-13 185
esp 8266 学习
通过网页控制ESP8266服务端的板载LED
weixin_46432495的博客
02-17 8341
一、esp开发板引脚的开关控制 两个按钮的HTML代码如下： <form action="LED-Control"><input type="submit" value="LED控制"> </form> <br> <form action="index.html"><input type="submit" value="返回首页"> </form> 可实现当点击 led控制 按.
Arduino ESP8266 AP Web 服务器示例程序
perseverance51博客
04-20 1343
Arduino ESP8266 AP Web 服务器示例程序
Arduino ESP8266基于ESPAsyncWebServer 网页GPIO控制
perseverance51博客
04-29 505
Arduino ESP8266基于ESPAsyncWebServer 网页GPIO控制
Arduino ESP8266/32 自定义IO组网页状态显示与控制
perseverance51博客
09-12 1254
Arduino ESP8266/32 自定义IO组网页状态显示与控制（演示版）
Arduino，Nodemcu,ESP8266网络连接（局域网），网页控制内部LED状态变化
weixin_43794311的博客
01-14 1599
ESP8266在Arduino开发环境下实现网络控制开发板状态
基于esp8266实现WEB控制平台控制led.rar
09-30
本代码是基于esp8266实现通过网页控制led 的亮灭，本实验亲测可用，分享给大家
基于esp8266的精简web服务器
02-07
此代码为基于esp8266的web服务器，使用的是Free RTOS实时操作系统，以web页面控制led灯为例子，适合于毕业设计加分
Arduino开发ESP8266网页服务器控制LED灯
gflytu的专栏
01-18 2117
ESP8266 WEBServer控制LED灯
web控制esp8266小灯
qq_40850266的博客
03-13 1206
代码 #include <ESP8266WiFi.h> #include <ESP8266WiFiMulti.h> #include <ESP8266WebServer.h> #include <FS.h> ESP8266WiFiMulti wifiMulti; // 建立ESP8266WiFiMulti对象 ESP8266WebServer esp8266_server(80); // 建立网络服务器对象，该对象用于响应HTTP请求。监
构建ESP8266网页控制
跨学科知识视角展现
04-12 1285
本教程是一个循序渐进的指南，显示了如何构建一个独立的ESP8266 Web服务器来控制两个输出（两个LED）。 该ESP8266 NodeMCU Web Server具有移动响应能力，可以用您本地网络中的浏览器通过任何设备进行访问。 第1部分：使用ARDUINO IDE创建Web服务器（视频） 截图 准备Arduino IDE 源代码 上传Sketch 将sketch上传到ESP-12E 将ske...
esp8266 用arduino ide用网页控制led
05-18 3889
https://www.arduino.cn/thread-82298-1-1.html原地址 安装好Arduino IDE环境后，就得在它基础上配置Arduino Core For ESP8266。以window版本为例，读者可以安装以下顺序安装： 打开Arduino IDE->菜单项文件->首选项，然后会看到附加开发版管理器网址，填入http://arduino....
NodeMCU ESP8266构建Web Server网页端控制设备
一名热爱技术的工程师的博客。分享技术干货，记录美好生活。永远相信美好的事情即将发生。
11-20 4038
内部集成了TCP/IP协议栈，可以快速构建网络功能，搭建联网应用的硬件平台；Station本文我们将把ESP8266配置为接入点（Station），自动连接到局域网中，实现通过网页端控制板载LED的亮和灭。
ESP8266实现基本的web访问，并控制LED的状态
zuoheizhu的博客
09-21 2984
1. 多个WIFI接入点设置 2.web启动与基本访问设置 #include <ESP8266WiFi.h> // 本程序使用 ESP8266WiFi库 #include <ESP8266WiFiMulti.h> // ESP8266WiFiMulti库 #include <ESP8266WebServer.h> // ESP8266WebServer库 ESP8266WiFiMulti wifiMulti; // 建立ESP8266
【ESP 保姆级教程】疯狂点灯篇 —— 案例：ESP8266 + LED + 按键 + Web页面控制（Web页面控制开关LED灯）
单片机菜鸟哥的博客
06-04 4770
案例：ESP8266 + LED + 按键 + Web页面控制，学习如何在ESP8266上控制灯亮度，使用ESPAsyncWebServer库操作web H5页面。
Arduino ESP8266 AP Web 代码
06-11
以下是一个基本的Arduino ESP8266 AP Web的代码示例，可以让你在ESP8266上建立一个简单的Web服务器，并进行基本的网络通信： ```C++ #include <ESP8266WiFi.h> // Replace with your network credentials const ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值