ESP32网页控制LED点灯

肖特基杀手

895人浏览 · 2025-11-11 22:45:01

肖特基杀手 · 2025-11-11 22:45:01 发布

这是源自于在线仿真网站woki的一篇网页控制外设的简单示例。

1. 网页点灯的基本原理

手机/电脑浏览器 → HTTP请求 → ESP32 Web服务器 → GPIO控制 → LED灯。

简单来说我们使用浏览器像ESP32服务器发送请求，然后ESP32处理返回响应，在代码中我们需要编写一个简单的网页用来记录LED的状态，然后调用库函数sentHtml,一个类String response = R将网页转为动态的服务器可处理的事件，于是该网页由esp32服务器提供(路由映射)。这就是ESP32网页控制外设的基础，而复杂的WiFi杀手网页也是用的同样原理。

html的简介:

HTML，全称为超文本标记语言（Hyper Text Markup Language），是构建和设计网页内容的基础技术，严格来说不算作为一门编程语言。它通过标记（markup）来定义文本、图片和其他内容的含义和结构，以便在Web浏览器中显示。HTML使用一系列的标签（tags）来组织和格式化网页上的信息，使其具有可读性和逻辑性。

HTML的核心概念
HTML文档由一系列的HTML元素构成，这些元素通过开始标签（start tag）、内容（content）和结束标签（end tag）来定义。例如，一个段落可以用开始标签，段落文本内容，以及结束标签/p来表示。HTML标签不区分大小写，但通常习惯上使用小写。HTML的另一个关键概念是超文本，它通过超链接（hyperlinks）将网页内容连接起来，形成互联网的网状结构。超链接允许用户从一个页面跳转到另一个页面，无论这些页面是否位于同一网站或分布在全球各地的服务器上。

<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<img src="image.jpg" alt="描述图片">
</body>
</html>

HTML的结构

一个典型的HTML文档包含两个主要部分：头部（head）和主体（body）。头部包含了文档的元数据，如标题（title）、样式表（CSS）链接和脚本（JavaScript）链接。主体部分则包含了网页的可见内容，如文本、图片、视频、表格和表单等。

HTML的版本和发展
HTML自1990年由Tim Berners-Lee发明以来，经历了多个版本的发展。从最初的HTML 1.0到现在广泛使用的HTML5，HTML不断地增加新的功能和改进，以适应日益丰富的网络应用需求。HTML5特别强调了对多媒体内容的支持，如音频和视频，以及更丰富的交互性和语义性。

HTML的学习和应用

学习HTML是成为Web开发者的第一步。通过学习HTML，开发者可以创建结构化和语义化的网页内容，并与CSS和JavaScript等其他技术结合，开发出丰富多彩的Web应用。对于初学者来说，HTML是易于上手的入门技术，有许多在线资源和教程可以帮助学习和实践。

HTML不仅是Web开发的基础，也是网络信息交流的通用语言。无论是个人博客、企业网站还是复杂的Web应用，HTML都扮演着不可或缺的角色。通过掌握HTML，开发者可以将创意和信息呈现给全世界的用户。

2.网页点灯代码演示

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <uri/UriBraces.h>

#define WIFI_SSID "你的WiFi名称"
#define WIFI_PASSWORD "WiFi密码"
// Defining the WiFi channel speeds up the connection:
#define WIFI_CHANNEL 6//信道编码

WebServer server(80);//端口号

const int LED1 = 26;//外接LED的两个GPIO，可自行更改
const int LED2 = 27;

bool led1State = false;//默认关灯
bool led2State = false;

void sendHtml() {
  String response = R"(
    <!DOCTYPE html><html>
      <head>
        <title>ESP32 Web Server Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
          html { font-family: sans-serif; text-align: center; }
          body { display: inline-flex; flex-direction: column; }
          h1 { margin-bottom: 1.2em; } 
          h2 { margin: 0; }
          div { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; grid-gap: 1em; }
          .btn { background-color: #5B5; border: none; color: #fff; padding: 0.5em 1em;
                 font-size: 2em; text-decoration: none }
          .btn.OFF { background-color: #333; }
        </style>
      </head>
            
      <body>
        <h1>ESP32 Web Server</h1>

        <div>
          <h2>LED 1</h2>
          <a href="/toggle/1" class="btn LED1_TEXT">LED1_TEXT</a>
          <h2>LED 2</h2>
          <a href="/toggle/2" class="btn LED2_TEXT">LED2_TEXT</a>
        </div>
      </body>
    </html>
  )";
  response.replace("LED1_TEXT", led1State ? "ON" : "OFF");
  response.replace("LED2_TEXT", led2State ? "ON" : "OFF");
  server.send(200, "text/html", response);
}

void setup(void) {
  Serial.begin(115200);
  pinMode(LED1, OUTPUT);
  pinMode(LED2, OUTPUT);

  WiFi.begin(WIFI_SSID, WIFI_PASSWORD, WIFI_CHANNEL);
  Serial.print("Connecting to WiFi ");
  Serial.print(WIFI_SSID);
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(100);
    Serial.print(".");
  }
  Serial.println(" Connected!");

  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", sendHtml);

  server.on(UriBraces("/toggle/{}"), []() {
    String led = server.pathArg(0);
    Serial.print("Toggle LED #");
    Serial.println(led);

    switch (led.toInt()) {
      case 1:
        led1State = !led1State;
        digitalWrite(LED1, led1State);
        break;
      case 2:
        led2State = !led2State;
        digitalWrite(LED2, led2State);
        break;
    }

    sendHtml();
  });

  server.begin();
  Serial.println("HTTP server started (http://localhost:8180)");
}

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

简要说明

按照上面代码将LED灯接到板子的D26，D27端口，WiFi_SSID和WIFI_PASSWORD,替换为你的WiFi名称和密码，这里我用的是esp32c3supermini链接的手机热点,程序编译下载后,如果出现串口不打印ip地址的问题，在这两句代码:
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
之间加个循环，多次打印结果即可，如果用的其他esp32板子可能不会出现这种情况。
打开串口助手查看ip地址：
在这里插入图片描述

手机浏览器输入ip（192.168.156.34）访问网页服务器，点击按键就可以控制开关灯了，同时串口打印LED的状态信息。

效果如下:
在这里插入图片描述

在这里插入图片描述
当然控制舵机和风扇等外设或传感器同理，用户可自行摸索。

AI硬件创业社区

智能硬件社区聚焦AI智能硬件技术生态，汇聚嵌入式AI、物联网硬件开发者，打造交流分享平台，同步全国赛事资讯、开展 OPC 核心人才招募，助力技术落地与开发者成长。

更多推荐

技术框架设计全链路方法论：从基础原理到工程实践（三）

设计模式不是背诵的套路，而是从变化类型推导出的必然解法。责任链 Chain of Responsibility。工厂方法 Factory Method。接口定义契约 + 抽象类复用共性。解释器 Interpreter。📐 Step 3：选择设计结构。📋 Step 1：识别变化点。✅ Step 4：验证与评估。接口定义契约 + 运行时路由。装饰器 Decorator。策略 + 模板 + 注册表。