本帖最后由 了了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电子网》 2. Esp8285
3. Esp8285与开发电脑连接的usb线 4. 测试用手机或用开发电脑 能通过浏览器进行访问
四．实验步骤1. 搭建arduinio ide开发环境，并安装esp8285插件，具体请参考上一篇文章：《Esp8285开发环境搭建 - 21ic电子网》本文不再赘述 2. 创建esp8285的示例.选择 文件-->示例-->ESP8266WEBSERVER-->HTTPSERVER
3. 通过usb线把esp8285和开发电脑连接 4. 编写代码 打开编辑器页面之后，编写如下代码： #include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <pgmspace.h>
const char* ssid = "ESP8285_AP";
const char* password = "12345678";
ESP8266WebServer server(80);
// 上排和下排的引脚映射
const int upperPins[] = {3, 1, -1, -1, 16, -1, 5, 4, 0, 2, -1, -1}; // 只映射有效引脚
const int lowerPins[] = {3, 1, -1, -1, A0, -1, 14, 12, 13, 15, -1, -1}; // 适配ADC引脚A0
// 上排和下排的引脚标签
const char upperLabels[][7] PROGMEM = {"RX", "TX", "GND", "3.3V", "16", "RST", "5", "4", "0", "2", "GND", "3.3V"};
const char lowerLabels[][7] PROGMEM = {"RX", "TX", "GND", "5V", "ADC", "EN", "14", "12", "13", "15", "GND", "VIN"};
void setup() {
Serial.begin(115200);
delay(1000);
if (WiFi.softAP(ssid, password)) {
Serial.println("Access Point started successfully");
} else {
Serial.println("Failed to start Access Point");
}
Serial.print("AP IP address: ");
Serial.println(WiFi.softAPIP());
server.on("/", HTTP_GET, handleRoot);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
}
void handleRoot() {
String html = F(
"<!DOCTYPE html><html><head>"
"<style>"
"body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f8ff; }"
"h1 { color: #333; }"
"table { margin: auto; border-collapse: collapse; }"
"td { padding: 10px; margin: 5px; background-color: #e0e0e0; border-radius: 5px; }"
".high { background-color: #90ee90; }"
".low { background-color: #ffcccb; }"
"</style></head><body>"
"<h1>ESP8285 Pin Status</h1><table><tr>"
);
// 上排展示
html += "<td><table><tr><th colspan='2'>Upper Row</th></tr>";
for (size_t i = 0; i < sizeof(upperPins) / sizeof(upperPins[0]); i++) {
html += "<tr><td>";
html += FPSTR(upperLabels[i]);
html += "</td><td>";
if (upperPins[i] != -1) {
pinMode(upperPins[i], INPUT);
int pinState = digitalRead(upperPins[i]);
html += "<span class='" + String(pinState == HIGH ? "high" : "low") + "'>" + (pinState == HIGH ? "HIGH" : "LOW") + "</span>";
} else {
html += "N/A";
}
html += "</td></tr>";
}
html += "</table></td>";
// 下排展示
html += "<td><table><tr><th colspan='2'>Lower Row</th></tr>";
for (size_t i = 0; i < sizeof(lowerPins) / sizeof(lowerPins[0]); i++) {
html += "<tr><td>";
html += FPSTR(lowerLabels[i]);
html += "</td><td>";
if (lowerPins[i] != -1) {
if (i == 4) {
// Special handling for ADC pin
int adcValue = analogRead(lowerPins[i]);
html += "<span>" + String(adcValue) + "</span>";
} else {
pinMode(lowerPins[i], INPUT);
int pinState = digitalRead(lowerPins[i]);
html += "<span class='" + String(pinState == HIGH ? "high" : "low") + "'>" + (pinState == HIGH ? "HIGH" : "LOW") + "</span>";
}
} else {
html += "N/A";
}
html += "</td></tr>";
}
html += "</table></td>";
html += "</tr></table></body></html>";
server.send(200, "text/html", html);
}
代码解析：热点名称：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. 编译代码 成功之后
6. 代码部署烧录 点击按钮之后，成功状态如下 7. 测试连接热点 测试手机或者电脑打开wifi列表，找到对应的无线名称，并连接。 具体用户名和密码从代码的解析里获取：本实验具体是热点名称：ESP8285_AP，密码12345678。 如果代码中你自己有过修改，请注意不要忘记自己代码里的是啥，以便这里连接时使用
8. 通过网页访问
打开测试手机或电脑的浏览器，并访问ip:192.168.4.1, 具体的ip本文是192.168.4.1，如果找不到，请到开发电脑部署时的串口监视器里查找。 查看结果
五． 实验结果 访问到的页面如下：
每隔5秒钟，页面会自动刷新。对应的数字引脚的状态如果发生变化的话，页面上状态的显示也会对应发生变化。
注：为了便于查看，我把对应的GND,VCC等没有具体状态的引脚，也标注在了上面，它们的状态可以忽略，不过顺序和物理引脚的顺序一致。 DOIT这块板子，针脚标注时候是横向的文字，按照文字的正确方向看，会有上排针脚和下排针脚，
我给做了个上排，下排的定义。对应在页面里
。芯片的从左到右，对应的是页面的从上到下。
六．方案局限性与扩展思路本文是将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)
|
楼主
标题置顶
标题高亮
