ESP使用webserver实现本地控制

因为使用云服务有时候不可靠,那么离线控制就很重要。本文使用webserver实现本地网页控制。这样不需要再单独开发APP,有浏览器就可以控制。本文所有测试是靠ESP32。8266未测试。使用USE_8266控制。

核心代码如下:

html.h

#pragma onceconst char *AutoConfigHTML = u8R"esp_html(<!DOCTYPE html>
<html><head><meta charset="UTF8"><title>智能控制台</title>
</head><body style="font-size: 30px"><style>.inputText {height: 38px;font-size: 30px;line-height: 30px;padding-left: 15px;border-radius: 10px;background-color: #dff1f7;border: 2;}.inputText:focus {outline: none;background-color: #d6e4eb;}.buttonText {height: 38px;font-size: 30px;line-height: 30px;padding-left: 15px;border-radius: 10px;background-color: #FE5E08;border: none;}.buttonText:focus {outline: none;background-color: #FE5E08;}.buttonText:disabled {background-color: #c9c7c6;}</style><center><form><input id="btn_test" type="button" class="buttonText" value="点我测试" onclick="config(this)"/><br/><label id="recvtxt"/></form></center><script language="javascript">function config(sender) {var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {document.getElementById("recvtxt").innerText = "设置成功";                        }else {document.getElementById("recvtxt").innerText = "设置失败";document.getElementById("btnsendconfig").disabled = false;}}}xmlhttp.ontimeout = function () {window.location.href = "about:blank";window.close();}xmlhttp.open("GET", "/Ctrl?btn_name=" + sender.id, true);xmlhttp.timeout = 5000;xmlhttp.send();document.getElementById("btnsendconfig").disabled = true;}</script>
</body></html>
)esp_html";

webctrl.h


#include <atomic>
#include <thread>
#include <functional>
#include "html.h"#ifndef AUTOCFGSSID
#define AUTOCFGSSID "ESP_WIFI"
#endif
#ifndef AUTOCFGPSW
#define AUTOCFGPSW "12345678"
#endif#ifdef USE_8266
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
using TagWebSERVER = ESP8266WebServer;
#else
#include <WiFi.h>
#include <WebServer.h>
using TagWebSERVER = WebServer;
#endifusing FunWebServerCallback = std::function<bool(const char *)>;class CWebControl
{protected:void HandleHtmlRoot(){m_ControlWebServer.send(200, "text/html", AutoConfigHTML);}void HandleHtmlContrl(){if (m_WebServerCallback){bool bRet=m_WebServerCallback(m_ControlWebServer.arg("btn_name").c_str());m_ControlWebServer.send(bRet?200:500, "text/html", m_ControlWebServer.arg("btn_name").c_str());}}public:CWebControl() : m_bRun(false){}void Init(){WiFi.mode(WIFI_AP_STA); // 双模式WiFi.setAutoReconnect(true);IPAddress ip, gateway, subnet;ip.fromString("192.168.2.1");gateway.fromString("192.168.2.1");subnet.fromString("255.255.255.0");WiFi.softAPConfig(ip, gateway, subnet);WiFi.softAP(AUTOCFGSSID, AUTOCFGPSW);m_ControlWebServer.on("/", std::bind(&CWebControl::HandleHtmlRoot, this));m_ControlWebServer.on("/Ctrl", HTTP_GET, std::bind(&CWebControl::HandleHtmlContrl, this));}~CWebControl(){Stop();}void Stop(){m_bRun = false;m_ControlWebServer.close();if (m_LoopThread.joinable()){m_LoopThread.join();}}void SetCallBack(FunWebServerCallback callback){m_WebServerCallback = callback;}void Run(){Stop();m_bRun = true;m_ControlWebServer.begin(80);m_LoopThread = std::thread(std::bind([&]{while (m_bRun){m_ControlWebServer.handleClient();} }));}private:std::thread m_LoopThread;TagWebSERVER m_ControlWebServer;std::atomic_bool m_bRun;FunWebServerCallback m_WebServerCallback;
};

调用方法如下

// 这里定义热点名和密码,定义一定要在#include "webCtrl.h"前面
//连接如下热点 在浏览器访问 192.168.2.1 即可打开控制页面。当然IP地址可以在webCtrl.h修改成你想要的。
//#define AUTOCFGSSID "ESP_WIFI"
//#define AUTOCFGPSW "12345678"// 如果使用8266取消下行注释
// #define USE_8266
#include "webCtrl.h"// 我这里使用的是ESP32 s3.当然其它型号也是代码通用。因为这里我的板子有一颗RGB。使用它测试。请根据需要修改
#ifndef USE_8266
#include "RGB.h"
RGB rgb(1, 48);//注意我买的板子是48脚。你的板子未必是
#endifCWebControl g_WebControl;bool WebCtrlCallBack(const char *name)
{// btn_test这里需要修改HTML对应ID。我这里使用btn_test。添加按钮根据ID区分即可。if (strcmp(name, "btn_test") == 0){
#ifndef USE_8266static bool trunOn = false;rgb.showRGB(trunOn = !trunOn, 0, 255, 100);
#endif}return true;
}void setup()
{// put your setup code here, to run once:g_WebControl.Init();g_WebControl.SetCallBack(std::bind(WebCtrlCallBack, std::placeholders::_1));g_WebControl.Run();#ifndef USE_8266rgb.begin(50);
#endif
}void loop()
{// put your main code here, to run repeatedly:
}

工程代码下载:

【免费】esp32使用网页实现本地控制资源-CSDN文库

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/134534.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大数据中的分布式文件系统MapReduce的选择题

一 . 选择题 一. 单选题&#xff08;共9题&#xff0c;49.5分&#xff09; (单选题)下列传统并行计算框架,说法错误的是哪一项? A. 刀片服务器、高速网、SAN,价格贵,扩展性差上 B. 共享式(共享内存/共享存储),容错性好 C. 编程难度高 D. 实时、细粒度计算、计算密集型 正确答…

webpack 的 Loader 和 Plugin 的区别,常见的 loader 和 plugin 有哪些?

结论先行&#xff1a; 1、 Loader 和 Plugin 的区别 Loader 也叫做就是“加载器”&#xff0c;因为 webpack 原生只能解析 js 文件&#xff0c;而对于其他类型文件&#xff0c;则需要借助 loader。所以 loader 的作用就是实现对不同格式文件的解析和处理&#xff0c;例如把 E…

使用PCtoLCD2002提取字模

“模式”---“字符模式” LCD显示&#xff0c;汉字使用宋体还是比较好的&#xff0c;16*16是长、宽都是16个像素显示。

Lavarel异步队列的使用

系统为window 启动队列&#xff1a; php artisan queue:listen设置队列类 .env文件需设置&#xff1a;QUEUE_CONNECTIONredis <?phpnamespace App\Jobs;use Illuminate\Bus\Queueable; use Illuminate\Contracts\Queue\ShouldQueue; use Illuminate\Foundation\Bus\Disp…

Spark Core

Spark Core 本文来自 B站 黑马程序员 - Spark教程 &#xff1a;原地址 第一章 RDD详解 1.1 为什么需要RDD 分布式计算需要 分区控制shuffle控制数据存储、序列化、发送数据计算API等一系列功能 这些功能&#xff0c;不能简单的通过Python内置的本地集合对象&#xff08;如…

gitlab 设置 分支只读

一&#xff0c;设置master分支只读&#xff0c; 并且只有Maintainers 拥有合并权限。 二&#xff0c;设置成员权限 改为developer 三&#xff0c;邀请成员 点击右上角 Invite Members

冒泡排序算法的四种实现方式:C、C++、Java和Python

下面是冒泡排序算法的四种实现方式&#xff1a;C、C、Java和Python。 C语言实现&#xff1a; #include <stdio.h>void bubbleSort(int arr[], int n) {for (int i 0; i < n - 1; i) {for (int j 0; j < n - i - 1; j) {if (arr[j] > arr[j 1]) {int temp …

AVS3:双向梯度修正BGC

双向梯度修正&#xff08;Bi-directional Gradient Correction&#xff0c;BGC&#xff09;是利用双向参考块间的差值对预测值进行修正的技术。 BGC仅用于双向预测CU&#xff0c;设两个方向得到的单向预测值分别为pred0和pred1&#xff0c;修正前的双向预测值为predBI&#xf…

web —— html

Web —— css基础 1. HTML2. 基本HTML结构3. HTML常用标签3.1 文本相关标签3.2 HTML图像标签3.3 HTML超链接标签3.4 HTML表&#xff0c;单3.4.1 HTML表格3.4.2 HTML表单&#xff0c;输入框&#xff08;多选框&#xff0c;单选框&#xff09;下拉框 3.5 HTML分区标签3.5.1 div标…

LeetCode-94. 二叉树的中序遍历(C++)

目录捏 一、题目描述二、示例与提示三、思路四、代码 一、题目描述 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 二、示例与提示 示例 1&#xff1a; 输入&#xff1a; root [1,null,2,3] 输出&#xff1a; [1,3,2] 示例 2&#xff1a; 输入&#xf…

大数据毕业设计选题推荐-营业厅营业效能监控平台-Hadoop-Spark-Hive

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

初识Java 17-2 反射

目录 转型前检查 构建例子&#xff1a;生成层次结构 优化Creator&#xff1a;使用类字面量 优化PetCounter&#xff1a;动态验证类型 更通用的递归计数 注册工厂 本笔记参考自&#xff1a; 《On Java 中文版》 转型前检查 当我们使用传统的类型转换&#xff0c;例如&…

Java封装BufferedImage与base64互转方法

一、BufferedImage转base64 /*** BufferedImage 编码转换为 base64* param bufferedImage* return*/private static String BufferedImageToBase64(BufferedImage bufferedImage) {ByteArrayOutputStream bao new ByteArrayOutputStream();//io流try {ImageIO.write(buffered…

【系统架构设计】架构核心知识: 5 系统安全性与保密性设计

目录 一 信息安全基础 1 信息安全的基本要素 2 信息安全的范围 3 网络安全

支付卡行业(PCI)PIN安全要求和测试程序 7个控制目标、33个要求及规范性附录ABC 密钥注入-PCI认证-安全行业基础篇4

概述 用于在ATM和POS终端进行在线和离线支付卡交易处理期间&#xff0c;对个人身份号码&#xff08;PIN&#xff09;数据进行安全管理、处理和传输。 该标准具体包括 7 个控制目标和 33 个安全要求&#xff0c; 标准的结构分为标准主体部分&#xff0c;标准附录&#xff08;N…

windows查看端口号占用,并杀死进程

1、查看所有运行的端口&#xff1a; netstat -ano 2、查看被占用端口对应的 PID netstat -aon|findstr "8081" 回车执行该命令&#xff0c;最后一串数字就是 PID进程号, 这里是 19232。 3、查看指定 PID 的进程 tasklist|findstr "19232" 回车执行该…

[NLP] 使用Llama.cpp和LangChain在CPU上使用大模型

一 准备工作 下面是构建这个应用程序时将使用的软件工具: 1.Llama-cpp-python 下载llama-cpp, llama-cpp-python [NLP] Llama2模型运行在Mac机器-CSDN博客 2、LangChain LangChain是一个提供了一组广泛的集成和数据连接器&#xff0c;允许我们链接和编排不同的模块。可以常…

Ubuntu websocket程序

转自&#xff1a;C/C编程&#xff1a;WebSocketpp&#xff08;Linux Clion boostAsio&#xff09;_websocket-CSDN博客 目前自己使用的&#xff1a; #include <functional> #include <mutex> #include <set> #include <thread>#include <websock…

vue sass-loader,webpack安装卸载操作命令

检查 node-sass 的可用版本&#xff1a;运行下面的命令&#xff0c;查看 node-sass 的可用版本列表。 查看 npm view node-sass versions卸载 npm uninstall node-sass安装指定版本 npm install node-sass4.14.1安装最新版本 npm install sass-loaderlatest如果没有指定特定…

【ARM 安全系列介绍 1 -- 奇偶校验与海明码校验详细介绍】

文章目录 奇偶校验介绍奇偶校验 python 实现奇偶校验C代码实现 海明码详细介绍 奇偶校验介绍 奇偶校验是一种错误检测方法&#xff0c;广泛应用于计算机内部以及数据通信领域。其基本原理是为了使得一组数据&#xff08;通常是一字节8位&#xff09;中的“1”的个数为偶数或奇…