devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ESP32网页控制显示数据原来如此简单

作者：小小林熬夜学编程 | 2024-04-23 00:03:22

赞

踩

ESP32网页控制显示数据原来如此简单

一、写在前头

        本文着重于ESP32与网页的交互，并没有针对网页进行UI优化，也不会对HTM5的组件进行详细介绍，只讲解一些关键的JS函数。

        代码以Arduino框架进行开发，使用ESPAsyncWebServer库实现WebServer，通过JS代码配合库文件的回调函数进行使用，只讲交互部分，文章内容不关注数据的来源以及控制。

二、如何对ESP32进行配置

（1）基础配置

        ESPAsyncTCP库下载

        ESPAsyncWebServer库下载

        首先需要一些基础框架，对库文件的引用，并设置好端口号和网站的首页

  1. #include <ESPAsyncWebServer.h>    // 包含异步Web服务器库文件
  2.  
  3. AsyncWebServer server(80);        // 创建WebServer对象, 端口号80
  4. // 使用端口号80可以直接输入IP访问，使用其它端口需要输入IP:端口号访问
  5. // 一个储存网页的数组
  6. const char index_html[] PROGMEM = R"rawliteral(
  7. <!DOCTYPE HTML>
  8. <html>
  9. <head>
  10.     <meta charset="utf-8">
  11. </head>
  12. <body>
  13.      <h2>ESP32 网页</h2>
  14. </body>
  15. <script>
  16.     
  17. </script>)rawliteral";
  18. void setup()
  19. {
  20.   // 你需要再此处添加WiFi操作代码，开启热点或者连接到热点
  21.   // 添加HTTP主页，当访问的时候会把网页推送给访问者
  22.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
  23.             { request->send_P(200, "text/html", index_html); });
  24.   server.begin();  // 初始化HTTP服务器
  25. }
  26.  
  27.  
  28. void loop()
  29. {
  30. }

        当你添加上WiFi操作代码，把这个程序烧录入ESP32，并通过浏览器访问ESP32的IP地址时，浏览器会显示这个画面：

三、 如何在网页上显示数据

（1）打包你需要显示的数据

        以显示温度和湿度为例，需要将温湿度打包为HTML代码块

  1. String Merge_Data(void)
  2. {
  3.   int Humidity = 50;// 此处应为获取温度代码
  4.   int Temperature = 26;// 此处应为获取湿度代码
  5.   // 将温湿度打包为一个HTML显示代码
  6.   String dataBuffer = "<p>";
  7.   dataBuffer += "<h1>传感器数据 </h1>";
  8.   dataBuffer += "<b>温度: </b>";
  9.   dataBuffer += String(Temperature);
  10.   dataBuffer += "<br/>";
  11.   dataBuffer += "<b>湿度: </b>";
  12.   dataBuffer += String(Humidity );
  13.   dataBuffer += "<br /></p>";
  14.   // 最后要将数组返回出去
  15.   return dataBuffer;
  16. }

（2）添加对应的响应

        然后在setup中，server初始化前添加响应代码，把数据返回出去。

  1. void setup()
  2. {
  3.   // 你需要再此处添加WiFi操作代码，开启热点或者连接到热点
  4.   // 添加HTTP主页，当访问的时候会把网页推送给访问者
  5.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
  6.             { request->send_P(200, "text/html", index_html); });
  7.   // 设置反馈的信息，在HTML请求这个Ip/dht这个链接时，返回打包好的传感器数据
  8.   server.on("/dht", HTTP_GET, [](AsyncWebServerRequest *request)
  9.             { request->send_P(200, "text/plain", Merge_Data().c_str()); });
  10.   server.begin();  // 初始化HTTP服务器
  11. }

（3）修改HTML定时请求数据

        数据打包好了，也返回给HTML了，这个时候我们就需要HTML定时去请求数据，所以我们要在HTML中使用JS代码的定时器，来定时采集数据。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5. </head>
  6. <body>
  7.      <h2>ESP32 网页</h2>
  8.      <!-- 创建一个ID位dht的盒子用于显示获取到的数据 -->
  9.      <div id="dht">
  10.      </div>
  11. </body>
  12. <script>
  13.      // 设置一个定时任务, 1000ms执行一次
  14.      setInterval(function () {
  15.         var xhttp = new XMLHttpRequest();
  16.         xhttp.onreadystatechange = function () {
  17.             if (this.readyState == 4 && this.status == 200) {
  18.                 // 此代码会搜索ID为dht的组件，然后使用返回内容替换组件内容
  19.                 document.getElementById("dht").innerHTML = this.responseText;
  20.             }
  21.         };
  22.         // 使用GET的方式请求 /dht
  23.         xhttp.open("GET", "/dht", true);
  24.         xhttp.send();
  25.     }, 1000)
  26. </script>

        当代码请求到结果的时候，就会使用结果替换ID为dht的组件内容(此处为DIV盒子)。所以，我们在打包数据的时候就要提前对数据加上HTML代码进行美化，如果不加以美化，返回的就只会是单纯的一串字符串，可读性极差。烧录代码后，显示效果如下：

        

温湿度显示效果

 四、如何下发数据

（1）修改HTML添加必要的组件

        以按钮为例，我们需要在HTML中添加一个按钮

<button onclick="set()"> 发送数据 </button>

        按钮需要绑定onclick运行JS函数

  1. // 按下按钮会运行这个JS函数
  2. 	function set() {
  3. 		var payload = "ESP32"; // 需要发送的内容
  4. 		// 通过get请求给 /set
  5. 		var xhr = new XMLHttpRequest();
  6. 		xhr.open("GET", "/set?value=" + payload, true);
  7. 		xhr.send();
  8. 	}

        当我们按下按钮的时候，触发onclick事件，进而运行JS中的函数 set。

        运行JS函数后，会将payload已GET的方式提交到/set。

        

                                                                 

（2）在ESP32添加对应的响应

        上面的HTML发送过来的数据，通用需要添加对应的响应来获取内容z

  1. // 下发处理回调函数
  2. void Config_Callback(AsyncWebServerRequest *request)
  3. {
  4.   if (request->hasParam("value")) // 如果有值下发
  5.   {
  6.     String HTTP_Payload = request->getParam("value")->value();    // 获取下发的数据
  7.     Serial.printf("[%lu]%s\r\n", millis(), HTTP_Payload.c_str()); // 打印调试信息
  8.   }
  9.   request->send(200, "text/plain", "OK"); // 发送接收成功标志符
  10. }
  11.   
  12. void setup()
  13. {
  14.   // 你需要再此处添加WiFi操作代码，开启热点或者连接到热点
  15.   // 添加HTTP主页，当访问的时候会把网页推送给访问者
  16.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
  17.             { request->send_P(200, "text/html", index_html); });
  18.   // 设置反馈的信息，在HTML请求这个Ip/dht这个链接时，返回打包好的传感器数据
  19.   server.on("/dht", HTTP_GET, [](AsyncWebServerRequest *request)
  20.             { request->send_P(200, "text/plain", Merge_Data().c_str()); });
  21.   server.on("/set", HTTP_GET, Config_Callback);   // 绑定配置下发的处理函数
  22.   server.begin();  // 初始化HTTP服务器
  23. }

        这样，数据就从HTML到了ESP32，接下来就是对HTTP_Payload 字符串内的数据进行处理即可，在此不再赘述。

五、最终的代码

  1.  
  2. #include <ESPAsyncWebServer.h>    // 包含异步Web服务器库文件
  3.  
  4. AsyncWebServer server(80);        // 创建WebServer对象, 端口号80
  5. // 使用端口号80可以直接输入IP访问，使用其它端口需要输入IP:端口号访问
  6. // 一个储存网页的数组
  7. const char index_html[] PROGMEM = R"rawliteral(
  8. <!DOCTYPE HTML>
  9. <html>
  11. <head>
  12. 	<meta charset="utf-8">
  13. </head>
  15. <body>
  16. 	<h2>ESP32 网页</h2>
  17. 	<!-- 创建一个ID位dht的盒子用于显示获取到的数据 -->
  18. 	<div id="dht">
  19. 	</div>
  20. 	<button onclick="set()"> 发送数据 </button>
  21. </body>
  23. <script>
  24. 	// 按下按钮会运行这个JS函数
  25. 	function set() {
  26. 		var payload = "ESP32"; // 需要发送的内容
  27. 		// 通过get请求给 /set
  28. 		var xhr = new XMLHttpRequest();
  29. 		xhr.open("GET", "/set?value=" + payload, true);
  30. 		xhr.send();
  31. 	}
  32. 	// 设置一个定时任务, 1000ms执行一次
  33. 	setInterval(function () {
  34. 		var xhttp = new XMLHttpRequest();
  35. 		xhttp.onreadystatechange = function () {
  36. 			if (this.readyState == 4 && this.status == 200) {
  37. 				// 此代码会搜索ID为dht的组件，然后使用返回内容替换组件内容
  38. 				document.getElementById("dht").innerHTML = this.responseText;
  39. 			}
  40. 		};
  41. 		// 使用GET的方式请求 /dht
  42. 		xhttp.open("GET", "/dht", true);
  43. 		xhttp.send();
  44. 	}, 1000)
  46. </script>)rawliteral";
  47. String Merge_Data(void)
  48. {
  49.   int Humidity = 50;// 此处应为获取温度代码
  50.   int Temperature = 26;// 此处应为获取湿度代码
  51.   // 将温湿度打包为一个HTML显示代码
  52.   String dataBuffer = "<p>";
  53.   dataBuffer += "<h1>传感器数据 </h1>";
  54.   dataBuffer += "<b>温度: </b>";
  55.   dataBuffer += String(Temperature);
  56.   dataBuffer += "<br/>";
  57.   dataBuffer += "<b>湿度: </b>";
  58.   dataBuffer += String(Humidity );
  59.   dataBuffer += "<br /></p>";
  60.   // 最后要将数组返回出去
  61.   return dataBuffer;
  62. }
  63.  
  64. // 下发处理回调函数
  65. void Config_Callback(AsyncWebServerRequest *request)
  66. {
  67.   if (request->hasParam("value")) // 如果有值下发
  68.   {
  69.     String HTTP_Payload = request->getParam("value")->value();    // 获取下发的数据
  70.     Serial.printf("[%lu]%s\r\n", millis(), HTTP_Payload.c_str()); // 打印调试信息
  71.   }
  72.   request->send(200, "text/plain", "OK"); // 发送接收成功标志符
  73. }
  74.   
  75. void setup()
  76. {
  77.   // 你需要再此处添加WiFi操作代码，开启热点或者连接到热点
  78.   // 添加HTTP主页，当访问的时候会把网页推送给访问者
  79.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
  80.             { request->send_P(200, "text/html", index_html); });
  81.   // 设置反馈的信息，在HTML请求这个Ip/dht这个链接时，返回打包好的传感器数据
  82.   server.on("/dht", HTTP_GET, [](AsyncWebServerRequest *request)
  83.             { request->send_P(200, "text/plain", Merge_Data().c_str()); });
  84.   server.on("/set", HTTP_GET, Config_Callback);   // 绑定配置下发的处理函数
  85.   server.begin();  // 初始化HTTP服务器
  86. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/471156
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号