把Esp8266作为服务器端,手机PC作为客户端,发出get请求,Esp8266以http协议数据来回复gpio的端口状态!从而实现了数据交互! 主要应用智能家居,物联网这篇主要是对**(一)**和(二)的优化。新添加了OTA无线更新功能。同样也适用于DHT11温湿度数据显示在网页上
二、Html文件
这里以下图控制页面为例,如图及代码所示:这里以控制x1,m?x1=1为例子,Html文件源码见附件。html文件可以根据自己的需要修改。
写好的html后,需要将代码中的 ’ , " 替换成 \ ’ , \ “然后再压缩 Esp8266烧录Html文件优化工具 优化好的代码直接粘贴在C语言中, 其中如果需要插入端口的状态,按照”+a+"的格式添加,其中a 表示反馈状态,具体见下边说明。
html 参考代码
现在下载附件被自动设置成需要5个积分下载,太麻烦了,这里直接贴html源码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes' /> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>MeiShang Smarthome Control System</title> <link rel='stylesheet' href='http://at.alicdn.com/t/font_1640699_nk29qyrqhco.css'> <style> h2,h1{line-height:1%;} body { width: 360px; margin: 0; padding: 0; background: LightCyan; } .button { width: 130px; height: 70px; text-align: center; color: #FFF; border-radius: 1px; margin: 40px -4.5px 0px 0; position: relative; overflow: hidden; border: 0px solid #FFF; background: darkcyan; font-size: 12px; outline:none; border-radius: 5px 5px 5px 5px; } .top1 { width: 360px; height: 45px; color: white; border: 0px ; background: darkcyan; font-size: 25px; left: -40px; position: relative; top: px; } </style> </head> <body> <button class='top1'>Test System</button></a><br /> <center style='left: -20px; position: relative;'> <a href='./m?x1=1'><button type='button' class='button '><div class='m x-deng2' style='font-size:40px; color: "+a+";' ></div>客 厅</button></a> <a href='./m?x1=2'><button type='button' class='button '><div class='m x-deng' style='font-size:40px; color: "+b+";'></div>餐 厅</button></a> </br> <a href='./m?x1=3'><button type='button' class='button '><div class='m x-chuanglian' style='font-size:40px; color: "+c+";' ></div>窗 帘</button></a> <a href='./m?x1=4'><button type='button' class='button '><div class='m x-kongtiao' style='font-size:40px;' ></div>Re-start</button></a> </br> </center> </body> </html> |
三、C语言部分
在Arduino中添加以下#include
#include
打开Arduino IDE,文件->首选项->在“附加开发板管理器网址”输入http://arduino.esp8266.com/stable/package_esp8266com_index.json
注意,如果已经输入过别的网址,多个网址之间以逗号间隔。
如果在下一步中无法下载,可尝试修改为
http://wechat.doit.am/package_esp8266com_index.json
重启IDE,打开 工具->开发板->开发板管理器
稍等一会儿,然后拉到最下面,安装 esp8266 by ESP8266 Community
复制以下代码在Arduino中,修改WIFI名和密码。将第二部中压缩的html 代码粘贴到String html = " HTML代码 ";
示例中"+a+" 读取GPIO2的状态,
1 2 3 4 | if (server.arg("x1")=="1"){ if (digitalRead(2) == 0) {digitalWrite(2, 1); htmlcode();} else {digitalWrite(2, 0); htmlcode();} } |
void m()部分:html给出指令, 2号端口相应的反馈高低电平 digitalWrite(2, LOW)和digitalWrite(2, HIGH) 实现开和关。
void setup(void)部分://定义端口号16,4,5,2,14,12,13,15,0
pinMode(2, OUTPUT); 可以根据实际进行相应的添加。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | #include <ESP8266WebServer.h> #include <ArduinoOTA.h> const char* ssid = "MEI"; // WIFI名和密码 const char* password = "13641663122"; ESP8266WebServer server(80); void m(){ //-- ("/m", HTTP_GET, m);----"x1")=="1" 房间号==设备号 http:ip/m?x1=1 String ip = WiFi.localIP().toString().c_str(); if (server.arg("x1")=="1"){ if (digitalRead(2) == 0) {digitalWrite(2, 1); htmlcode();} else {digitalWrite(2, 0); htmlcode();} } if (server.arg("x1")=="2"){ if (digitalRead(4) == 0) {digitalWrite(4, 1); htmlcode();} else {digitalWrite(4, 0); htmlcode();} } if (server.arg("x1")=="3"){ if (digitalRead(5) == 0) {digitalWrite(5, 1); htmlcode();} else {digitalWrite(5, 0); htmlcode();} } if (server.arg("x1")=="4"){ htmlcode(); delay(1000);ESP.restart();} else { htmlcode();} // not found htmllink } void htmlcode(){ String a = (digitalRead(2)) ? "deepskyblue" : "white"; String b = (digitalRead(4)) ? "deepskyblue" : "white"; String c = (digitalRead(5)) ? "deepskyblue" : "white"; String html = "<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes' /><meta http-equiv='X-UA-Compatible' content='ie=edge'><title>MeiShang Smarthome Control System</title><link rel='stylesheet' href='http://at.alicdn.com/t/font_1640699_nk29qyrqhco.css'><style> h2,h1{line-height:1%;}body { width: 360px; margin: 0;padding: 0; background: LightCyan;}.button { width: 130px; height: 70px; text-align: center; color: #FFF; border-radius: 1px; margin: 40px -4.5px 0px 0; position: relative; overflow: hidden; border: 0px solid #FFF; background: darkcyan; font-size: 12px; outline:none; border-radius: 5px 5px 5px 5px;}.top1 { width: 360px; height: 45px; color: white; border: 0px ; background: darkcyan; font-size: 25px; left: -40px; position: relative; top: px;}</style></head><body><button class='top1'>Test System</button></a><br /><center style='left: -20px; position: relative;'> <a href='./m?x1=1'><button type='button' class='button '><div class='m x-deng2' style='font-size:40px; color: "+a+";' ></div>客 厅</button></a> <a href='./m?x1=2'><button type='button' class='button '><div class='m x-deng' style='font-size:40px; color: "+b+";'></div>餐 厅</button></a></br> <a href='./m?x1=3'><button type='button' class='button '><div class='m x-chuanglian' style='font-size:40px; color: "+c+";' ></div>窗 帘</button></a> <a href='./m?x1=4'><button type='button' class='button '><div class='m x-kongtiao' style='font-size:40px;' ></div>Re-start</button></a></br> </center></body></html>"; server.send(200, "text/html", html );} void setup(void){ //-定义端口号16,4,5,2,14,12,13,15,0 一,Esp8266继电器常开,接NO, HIGH; 常闭,接NC, LOW; pinMode(2, OUTPUT); digitalWrite(2, 0); pinMode(4, OUTPUT); digitalWrite(4, 0); pinMode(5, OUTPUT); digitalWrite(5, 0); Serial.begin(115200); WiFi.mode(WIFI_STA); WiFi.begin(ssid, password); ArduinoOTA.begin(); Serial.println(); // ------------------------------------------以下是串口监视器显示内容。 while (WiFi.status() != WL_CONNECTED) {delay(500); Serial.print("..");} Serial.printf("\nConnecting to %s\nIP Address : %s\n", ssid, WiFi.localIP().toString().c_str()); server.on("/", htmlcode); server.on("/m", HTTP_GET, m); server.begin();} void loop(void){server.handleClient(); ArduinoOTA.handle();} |
四、Arduino烧写
1 2 3 | 准备好Arduino,打开串口监视器,选择正确的开发板,upload speed,端口号 准备Esp8266模块,连接usb,gpio0 接GND,没接或没接好可能会报错。error: espcomm_open failed 验证,上传。大概一到两分钟。左下角会显示“上传成功”.串口监视器会打印出 IP Address : 192.168.x.x |
OTA更新,在第一次upload 后,端口号会增加一个192.168.x.x端口号,选择这个端口号。就可以实现OTA无线更新,不需要连接电脑,esp模块只需要5V,或3.3V供电即可。
五、 使用
手机或电脑打开 IP地址,如图所示
每个按钮实现一个功能。参考 void m()部分:修改相应的端口,定制各种模式。其他的,单个控制,或多组控制。