21ic电子技术开发论坛 › 开发板专区 › 其它 › esp8285针脚显示不方便看？基于html网页的esp8285的软显 ...
返回列表 发新帖我要提问本帖赏金: 300.00元(功能说明)

[WiFi] esp8285针脚显示不方便看？基于html网页的esp8285的软显示面板来解决

[复制链接]
 楼主| 了了2 发表于 2024-12-20 20:36 | 显示全部楼层 |阅读模式
<
ESP8285, HTML, 显示面板
本帖最后由 了了2 于 2024-12-23 11:36 编辑

#有奖活动# #申请原创#  @21小跑堂


前言：
esp8285在烧录代码之后，往往不太好直观的观察到所有针脚的实际状态。为了解决该问题，有两种方式：一种是通过硬显示屏来作为硬显示面板进行展示，一种是使用基于html页面的软显示面板来进行展示。本文编写了一个基于html网页的远程显示软面板，实现了第二种方式。这种方式在节省了硬显示屏的同时，达到了与硬显示面板观察针脚相同的效果。

一．实验目标
    实现一个基于html网页的esp8285软显示面板。
通过将esp8285作为热点，用测试手机或者电脑连接到esp8285热点上之后，在测试机的浏览器中，访问网页连接地址，访问到页面，在页面上实时观看针脚的实际运行状态。展示的引脚顺序要和实际的物理引脚顺序一致。
二．实验思路
将esp8285作为wifi的热点，并作为服务器提供页面，用手机或者电脑连接到esp8285的热点上之后，进入浏览器，访问192.168.4.1的网页地址，访问到网页，在网页上查看所有针脚的状态了。为了实时显示针脚状态，页面需要实现5秒的自动刷新机制。
大体实现步骤如下：
1. 在arduinio ide中编写热点代码和网页代码
2. 将代码烧录部署到esp8285中
3. 手机通过wifi连接到esp8285提供的热点esp8285-AP,输入密码连接
4. 通过访问ap的ip192.168.4.1，默认端口为80，访问到页面，每5秒页面自动刷新，实时查看esp8285的针脚状态
三．实验材料
1. 开发电脑，安装有arduinio ide。安装过程请参考专栏上一篇《Esp8285开发环境搭建 - 21ic电子网》
   图片1.png
2. Esp8285
图片2.png

3. Esp8285与开发电脑连接的usb线
   图片3.png
4. 测试用手机或用开发电脑
能通过浏览器进行访问
图片4.png

四．实验步骤
1. 搭建arduinio ide开发环境，并安装esp8285插件，具体请参考上一篇文章：《Esp8285开发环境搭建 - 21ic电子网》本文不再赘述
2. 创建esp8285的示例.选择 文件-->示例-->ESP8266WEBSERVER-->HTTPSERVER
图片5.png

3. 通过usb线把esp8285和开发电脑连接
图片6.png
4. 编写代码
打开编辑器页面之后，编写如下代码：
复制
  1. #include <ESP8266WiFi.h>
    

  2. #include <ESP8266WebServer.h>
    

  3. #include <pgmspace.h>
    


  4. 

  5. const char* ssid = "ESP8285_AP";
    

  6. const char* password = "12345678";
    


  7. 

  8. ESP8266WebServer server(80);
    


  9. 

  10. // 上排和下排的引脚映射
    

  11. const int upperPins[] = {3, 1, -1, -1, 16, -1, 5, 4, 0, 2, -1, -1}; // 只映射有效引脚
    

  12. const int lowerPins[] = {3, 1, -1, -1, A0, -1, 14, 12, 13, 15, -1, -1}; // 适配ADC引脚A0
    


  13. 

  14. // 上排和下排的引脚标签
    

  15. const char upperLabels[][7] PROGMEM = {"RX", "TX", "GND", "3.3V", "16", "RST", "5", "4", "0", "2", "GND", "3.3V"};
    

  16. const char lowerLabels[][7] PROGMEM = {"RX", "TX", "GND", "5V", "ADC", "EN", "14", "12", "13", "15", "GND", "VIN"};
    


  17. 

  18. void setup() {
    

  19.   Serial.begin(115200);
    

  20.   delay(1000);
    


  21. 

  22.   if (WiFi.softAP(ssid, password)) {
    

  23.     Serial.println("Access Point started successfully");
    

  24.   } else {
    

  25.     Serial.println("Failed to start Access Point");
    

  26.   }
    


  27. 

  28.   Serial.print("AP IP address: ");
    

  29.   Serial.println(WiFi.softAPIP());
    


  30. 

  31.   server.on("/", HTTP_GET, handleRoot);
    

  32.   server.begin();
    

  33.   Serial.println("HTTP server started");
    

  34. }
    


  35. 

  36. void loop() {
    

  37.   server.handleClient();
    

  38. }
    


  39. 

  40. void handleRoot() {
    

  41.   String html = F(
    

  42.     "<!DOCTYPE html><html><head>"
    

  43.     "<style>"
    

  44.     "body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f8ff; }"
    

  45.     "h1 { color: #333; }"
    

  46.     "table { margin: auto; border-collapse: collapse; }"
    

  47.     "td { padding: 10px; margin: 5px; background-color: #e0e0e0; border-radius: 5px; }"
    

  48.     ".high { background-color: #90ee90; }"
    

  49.     ".low { background-color: #ffcccb; }"
    

  50.     "</style></head><body>"
    

  51.     "<h1>ESP8285 Pin Status</h1><table><tr>"
    

  52.   );
    


  53. 

  54.   // 上排展示
    

  55.   html += "<td><table><tr><th colspan='2'>Upper Row</th></tr>";
    

  56.   for (size_t i = 0; i < sizeof(upperPins) / sizeof(upperPins[0]); i++) {
    

  57.     html += "<tr><td>";
    

  58.     html += FPSTR(upperLabels[i]);
    

  59.     html += "</td><td>";
    


  60. 

  61.     if (upperPins[i] != -1) {
    

  62.       pinMode(upperPins[i], INPUT);
    

  63.       int pinState = digitalRead(upperPins[i]);
    

  64.       html += "<span class='" + String(pinState == HIGH ? "high" : "low") + "'>" + (pinState == HIGH ? "HIGH" : "LOW") + "</span>";
    

  65.     } else {
    

  66.       html += "N/A";
    

  67.     }
    


  68. 

  69.     html += "</td></tr>";
    

  70.   }
    

  71.   html += "</table></td>";
    


  72. 

  73.   // 下排展示
    

  74.   html += "<td><table><tr><th colspan='2'>Lower Row</th></tr>";
    

  75.   for (size_t i = 0; i < sizeof(lowerPins) / sizeof(lowerPins[0]); i++) {
    

  76.     html += "<tr><td>";
    

  77.     html += FPSTR(lowerLabels[i]);
    

  78.     html += "</td><td>";
    


  79. 

  80.     if (lowerPins[i] != -1) {
    

  81.       if (i == 4) {
    

  82.         // Special handling for ADC pin
    

  83.         int adcValue = analogRead(lowerPins[i]);
    

  84.         html += "<span>" + String(adcValue) + "</span>";
    

  85.       } else {
    

  86.         pinMode(lowerPins[i], INPUT);
    

  87.         int pinState = digitalRead(lowerPins[i]);
    

  88.         html += "<span class='" + String(pinState == HIGH ? "high" : "low") + "'>" + (pinState == HIGH ? "HIGH" : "LOW") + "</span>";
    

  89.       }
    

  90.     } else {
    

  91.       html += "N/A";
    

  92.     }
    


  93. 

  94.     html += "</td></tr>";
    

  95.   }
    

  96.   html += "</table></td>";
    


  97. 

  98.   html += "</tr></table></body></html>";
    

  99.   server.send(200, "text/html", html);
    

  100. }


代码解析：热点名称：ESP8285_AP，密码12345678.这个就是测试时候需要连接的wifi和密码。请记住
芯片作为服务器，提供出来的网关是：192.168.4.0，esp8285的默认的ip是192.168.4.1。如果需要连接esp8285,那么访问的就是192.168.4.1，而非连接到WiFi后获取的测试机的自身ip，例如：192.168.4.2，192.168.4.3等。

针脚上下排针脚顺序：
上：RX ，TX， GND，3.3V，16， RST ，5，4，0，2，GND，3 .3V
下：RX ，TX， GND，5V，ADC，EN ，14，12， 13 ，15 ，GND ，VIN

没有实际状态的针脚，状态值显示未NA. 数字针脚的高电平显示未HIGH,低电平显示未LOW.ADC引脚显示为A0（ADC是模拟引脚，显示的是数字，具体解释请参考附录1）。

编写代码的时候，按照该顺序进行设置。

5. 编译代码
成功之后
图片7.png

6. 代码部署烧录
点击按钮之后，成功状态如下
图片8.png
7. 测试连接热点
测试手机或者电脑打开wifi列表，找到对应的无线名称，并连接。
具体用户名和密码从代码的解析里获取：本实验具体是热点名称：ESP8285_AP，密码12345678。
如果代码中你自己有过修改，请注意不要忘记自己代码里的是啥，以便这里连接时使用


图片9.png

8. 通过网页访问

打开测试手机或电脑的浏览器，并访问ip:192.168.4.1,
具体的ip本文是192.168.4.1，如果找不到，请到开发电脑部署时的串口监视器里查找。
图片10.png
  查看结果
图片11.png



五． 实验结果
访问到的页面如下：
图片12.png

每隔5秒钟，页面会自动刷新。对应的数字引脚的状态如果发生变化的话，页面上状态的显示也会对应发生变化。

注：为了便于查看，我把对应的GND,VCC等没有具体状态的引脚，也标注在了上面，它们的状态可以忽略，不过顺序和物理引脚的顺序一致。
DOIT这块板子，针脚标注时候是横向的文字，按照文字的正确方向看，会有上排针脚和下排针脚， 图片13.png
我给做了个上排，下排的定义。对应在页面里 图片14.png 。芯片的从左到右，对应的是页面的从上到下。


六．方案局限性与扩展思路
本文是将esp8285作为热点，测试机只有连接热点之后才能看到针脚状态，这是该方案的局限性。一旦连接到热点，可能就会失去访问互联网的能力（热点本身没联网）。
要解决该问题，需要编写软件服务器代码，并将服务代码例如mq的消费者部署到公网，将esp8285通过mq的方式进行消息的生产，消息的内容里面获取到针脚的状态值，并上送到消息中心。然后再服务器的消息消费中心获取消息，并显示到html页面中。


七：附录
1.注：ADC引脚简介
ESP8285的ADC引脚是一个模拟输入引脚，用于读取模拟信号。该引脚标记为A0，与ESP8266类似。以下是关于ESP8285 ADC引脚的一些关键点：
1. **电压范围**：ADC引脚能够读取的电压范围通常是0到1.0伏特。输入电压超过这个范围可能会损坏芯片，因此需要注意电压的限制。
2. **分辨率**：ADC的分辨率为10位，这意味着其可以将模拟信号转换为0到1023之间的整数值。
3. **用途**：ADC引脚常用于接收来自传感器的模拟信号，如光敏电阻、温度传感器等。
请确保在使用时遵循这些参数，以避免对器件造成损坏。如果需要将更高的电压输入到ADC引脚上，可以通过分压器将电压降到1.0伏特以内。
2.知识点解析：为什么热点要使用80端口？选择80端口是因为80端口是HTTP的默认端口。在公网访问或者外网访问的时候，默认开通的端口是80端口，其他端口都需要进行额外处理。
防火墙，安全软件等默认开放的端口是80，其他端口如果要进行访问的话，需要在配置上进行特殊配置才可以。其实其他端口号也可以访问，但是需要进行额外的配置，也需要对防火墙等进行设置才能使用。所以本文使用了默认的80端口号
3.附录源码
源码请用Arduino lDE 2.3.2 工具打开
针脚状态回显.rar (6.07 MB, 下载次数: 0)


1lcd12864插件安装.jpg
2.lcd12864插件安装成功.jpg
回复 赏

举报

打赏榜单

21小跑堂 打赏了 300.00 元 2024-12-23

相关帖子
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

了了2

6

主题

8

帖子

0

粉丝
快速回复 在线客服 返回列表 返回顶部