老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计

2024-02-20 18:17:22

老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计

前言

前段时间无意间在老王家发现这款温湿度计，ESP8266-12F，竟然只要4.9元，查了下是光合未来的产品，官网还在，app不能用。光是安信可的ESP8266-12F就不止这个价格了，而且还有两块小电池，一个dht11模块，果断下手。到手后研究了下，再综合前辈的经验，可以做到无需开壳刷固件，故此记录，分享给需要的人。

注意：因光合未来源程序的影响，刷完本程序可能出现不停地重启的问题，解决办法是用乐鑫 Flash Download Tool(esp8266固件烧写升级)工具进行擦除后，载烧录本程序即可正常使用…

正式开始

一、废话不多说，先上效果图

电脑浏览器访问：
老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计
手机浏览器访问
老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计
只要在 同一个局域网 内，所有设备均可访问

二、需要准备的物品

老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计
1、电脑，需安装arduino ide
2、电烙铁一把
3、光和未来ESP8266温湿度传感器
4、usb转ttl
5、usb公头（可剪开废弃的数据线获得）
6、杜邦线四根
7、otg线一根

三、制作刷机线

有了以上材料就可以开始制作刷机线了
老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计
按如图所示通过杜邦线将usb公头与usb转ttl模块连接起来，定义如下：

usb公头 usb转ttl模块
电源正 3V3或者5V
信号负（D-） TXD
信号正（D+） RXD
电源负 GND

做好后的下载线是这样的
老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计装好壳子之后
老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计

四、代码

将以下代码拷贝到arduino IDE里面
所需的库自行百度安装，此处不再赘述
代码中
const char* ssid = "Running_free"; // 这里填wifi名，只支持2.4G
const char* password = "Running_free_pass"; //这里填wifi密码

这两行填入自己的wifi信息

这里可以改成自己想要的IPIP4_ADDR(&info.ip, 192, 168, 1, 88); IP可以不改

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "DHT.h"

uint8_t LEDPin = 12; 
 
#include <Ticker.h>  //导入定时器库
Ticker flipper;  //实例化定时器对象
int count = 0;
void flip() {     //回调函数
//  int state = digitalRead(LED_BUILTIN);  
//  digitalWrite(LED_BUILTIN, !state);  
  int state = digitalRead(LEDPin);  
//  digitalWrite(LEDPin, !state);  
digitalWrite(LEDPin, 1); 
delay(800);
digitalWrite(LEDPin, 0);
  ++count;
  if (count == 20) {
    flipper.attach(0.1, flip);  //每隔0.1秒执行一次回调函数
  }
  else if (count == 120) {
    flipper.detach();
  }
}

// Uncomment one of the lines below for whatever DHT sensor type you're using!
#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
//#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

/*Put your SSID & Password*/
const char* ssid = "Running_free";  // 这里填wifi名，只支持2.4G
const char* password = "Running_free_pass";  //这里填wifi密码


ESP8266WebServer server(80);
IPAddress myIP;       // IP address in your local wifi net

// DHT Sensor
//uint8_t DHTPin = D4; 
uint8_t DHTPin = 4; 
//uint8_t LEDPin = 12; 
               
// Initialize DHT sensor.
DHT dht(DHTPin, DHTTYPE);                

float Temperature;
float Humidity;
 
void setup() {
  Serial.begin(74880);
  delay(100);
  
  pinMode(LED_BUILTIN, OUTPUT);     // Initialize the LED_BUILTIN pin as an output
//  digitalWrite(LED_BUILTIN, LOW);   // Turn the LED on (Note that LOW is the voltage level
//  // but actually the LED is on; this is because
//  // it is active low on the ESP-01)
//  delay(2000);                      // Wait for a second
  digitalWrite(LED_BUILTIN, HIGH);  // Turn the LED off by making the voltage HIGH

pinMode(LEDPin, OUTPUT);
digitalWrite(LEDPin, LOW);
flipper.attach(30, flip);//每隔0.5秒执行一次回调函数
  
  pinMode(DHTPin, INPUT);

  dht.begin();              

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);

  //Static IP setting---by Fang
  wifi_station_dhcpc_stop();
  struct ip_info info;
  IP4_ADDR(&info.ip, 192, 168, 1, 88);
  IP4_ADDR(&info.gw, 192, 168, 1, 1);
  IP4_ADDR(&info.netmask, 255, 255, 255, 0);
  wifi_set_ip_info(STATION_IF, &info);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);

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

}
void loop() {
  
  server.handleClient();
  
}

void handle_OnConnect() {

 Temperature = dht.readTemperature(); // Gets the values of the temperature
  Humidity = dht.readHumidity(); // Gets the values of the humidity 
  server.send(200, "text/html", SendHTML(Temperature,Humidity)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(float Temperaturestat,float Humiditystat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head> <meta name=\"viewport\" content=\"width=device-width,  initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600\" rel=\"stylesheet\">\n";
  ptr +="<meta charset=\"UTF-8\">\n";
  ptr +="<title>智能温湿计</title>\n";
  ptr +="<style>html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #333333;}\n";
  ptr +="body{margin-top: 50px;}\n";
  ptr +="h1 {margin: 50px auto 30px;}\n";
  ptr +=" .wd {margin: 50px auto 30px;width: auto;color: #f39c12}\n";
  ptr +=" .wd1 {margin: 50px auto 30px;width: auto;color: #3498db}\n";
  ptr +=".side-by-side{display: inline-block;vertical-align: middle;position: relative;}\n";
  ptr +=".humidity-icon{background-color: #3498db;width: 30px;height: 30px;border-radius: 50%;line-height: 36px;}\n";
  ptr +=".humidity-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
  ptr +=".humidity{font-weight: 300;font-size: 60px;color: #3498db;}\n";
  ptr +=".temperature-icon{background-color: #f39c12;width: 30px;height: 30px;border-radius: 50%;line-height: 40px;}\n";
  ptr +=".temperature-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
  ptr +=".temperature{font-weight: 300;font-size: 60px;color: #f39c12;}\n";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;right: -20px;top: 15px;}\n";
  ptr +=".data{padding: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  
   ptr +="<div id=\"webpage\">\n";
   
   ptr +="<h1>室内温室检测系统</h1>\n";
   ptr +="<div class=\"data\">\n";
   ptr +="<div class=\"side-by-side temperature-icon\">\n";
   ptr +="<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n";
   ptr +="width=\"9.915px\" height=\"22px\" viewBox=\"0 0 9.915 22\" enable-background=\"new 0 0 9.915 22\" xml:space=\"preserve\">\n";
   ptr +="<path fill=\"#FFFFFF\" d=\"M3.498,0.53c0.377-0.331,0.877-0.501,1.374-0.527C5.697-0.04,6.522,0.421,6.924,1.142\n";
   ptr +="c0.237,0.399,0.315,0.871,0.311,1.33C7.229,5.856,7.245,9.24,7.227,12.625c1.019,0.539,1.855,1.424,2.301,2.491\n";
   ptr +="c0.491,1.163,0.518,2.514,0.062,3.693c-0.414,1.102-1.24,2.038-2.276,2.594c-1.056,0.583-2.331,0.743-3.501,0.463\n";
   ptr +="c-1.417-0.323-2.659-1.314-3.3-2.617C0.014,18.26-0.115,17.104,0.1,16.022c0.296-1.443,1.274-2.717,2.58-3.394\n";
   ptr +="c0.013-3.44,0-6.881,0.007-10.322C2.674,1.634,2.974,0.955,3.498,0.53z\"/>\n";
   ptr +="</svg>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"side-by-side temperature-text\">室内温度：</div>\n";
   ptr +="<div class=\"side-by-side temperature\">";
   ptr +=(int)Temperaturestat;
   ptr +="<span class=\"superscript\">°C</span></div>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"data\">\n";
   ptr +="<div class=\"side-by-side humidity-icon\">\n";
   ptr +="<svg version=\"1.1\" id=\"Layer_2\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\"; width=\"12px\" height=\"17.955px\" viewBox=\"0 0 13 17.955\" enable-background=\"new 0 0 13 17.955\" xml:space=\"preserve\">\n";
   ptr +="<path fill=\"#FFFFFF\" d=\"M1.819,6.217C3.139,4.064,6.5,0,6.5,0s3.363,4.064,4.681,6.217c1.793,2.926,2.133,5.05,1.571,7.057\n";
   ptr +="c-0.438,1.574-2.264,4.681-6.252,4.681c-3.988,0-5.813-3.107-6.252-4.681C-0.313,11.267,0.026,9.143,1.819,6.217\"></path>\n";
   ptr +="</svg>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"side-by-side humidity-text\">室内湿度：</div>\n";
   ptr +="<div class=\"side-by-side humidity\">";
   ptr +=(int)Humiditystat;
   ptr +="<span class=\"superscript\">%</span></div>\n";
   ptr +="</div>\n";
   //定义温度变量，并且赋值，用于逻辑判断。
    int wd = Temperaturestat ;
     
   if (wd>=30){
    ptr +="<div class=\"wd\">今天天气热，注意防暑哦</div>\n";
   }
   if (29>=wd&&wd>20){
    ptr +="<div class=\"wd1\">今天天气不错吆，尽情的玩耍吧</div>\n";
   }
   if (wd<10){
    ptr +="<div class=\"side-by-side humidity-text\">今天天气比较冷，多穿点衣服，小心着凉</div>\n";
   }
   ptr +="</div>\n";
   ptr +="</body>\n";
   ptr +="</html>\n";
   return ptr;
   }

五、下载程序

老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计

  1. 如图连接光和未来模块和电脑， 注意光合未来模块的开关要处于关闭状态，非常重要
  2. 代码修改好后点击上传按钮，或者键盘快捷键ctl+U
  3. 等到IDE出现connecting…_____如下图
    老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计
  4. 等到IDE出现connecting…_____后按下光合未来上的开关，即开始代码下载了
    老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计
    老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计

5.下载成功后拔掉otg线，关闭光合未来的开关再重新打开，等待esp模块连上wifi，大概几秒就好了，然后打开 同一局域网 下的手机或者电脑的浏览器，访问 http://192.168.1.88，如在代码中修改了ip，则需要输入你修改的ip，注意不要和现有设备冲突， 即可看到如下界面了
老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计

总结

1、一定要在等到IDE出现connecting…_____后在打开光合未来上的开关，否则下载不成功
2、个人建议不要长时间给模块充电或者插电使用，因为内部没有充电电路，就是通过usb口直接接了一个二极管到电池，长时间充电容易发生故障
3、研究了下为什么这样可以下载程序成功，因为在该模块中把esp8266的rx和tx引脚分别直接接到了usb口的D+和D-，GPIO0接到了usb口的Sense引脚，而otg线内部是将Sense引脚和GND短接的，所以就相当于插上otg线后再给模块通电，esp模块gpio0被拉低，就进入了下载模式，所以用此方法无法打印串口信息。如需打印串口信息，需要用数据线代替otg线，即不要短接Sense引脚和GND

上一篇：RK3288 android 7.1.2 使用CPU Serial固定USB以太网MAC地址


下一篇：小白日更第七十天-＞经典垃圾收集器之Serial收集器