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

2023-10-20 05:18
文章标签 网页 未来 制作 传感器 esp8266 温湿度 无损 4.9 王家 开壳

本文主要是介绍老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

  • 前言
      • ==**注意：因光合未来源程序的影响，刷完本程序可能出现不停地重启的问题，解决办法是用乐鑫 Flash Download Tool(esp8266固件烧写升级)工具进行擦除后，载烧录本程序即可正常使用...**==
  • 正式开始
    • 一、废话不多说，先上效果图
    • 二、需要准备的物品
    • 三、制作刷机线
    • 四、代码
    • 五、下载程序
    • 总结

前言

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

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

正式开始

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

电脑浏览器访问：
电脑浏览器访问
手机浏览器访问
在这里插入图片描述
只要在 同一个局域网 内，所有设备均可访问

二、需要准备的物品

在这里插入图片描述
1、电脑，需安装arduino ide
2、电烙铁一把
3、光和未来ESP8266温湿度传感器
4、usb转ttl
5、usb公头（可剪开废弃的数据线获得）
6、杜邦线四根
7、otg线一根

三、制作刷机线

有了以上材料就可以开始制作刷机线了
在这里插入图片描述
按如图所示通过杜邦线将usb公头与usb转ttl模块连接起来，定义如下：

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

做好后的下载线是这样的
在这里插入图片描述装好壳子之后
在这里插入图片描述

四、代码

将以下代码拷贝到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 seconddigitalWrite(LED_BUILTIN, HIGH);  // Turn the LED off by making the voltage HIGHpinMode(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 networkWiFi.mode(WIFI_STA);WiFi.begin(ssid, password);//Static IP setting---by Fangwifi_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 networkwhile (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 temperatureHumidity = 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;}

五、下载程序

在这里插入图片描述

  1. 如图连接光和未来模块和电脑， 注意光合未来模块的开关要处于关闭状态，非常重要
  2. 代码修改好后点击上传按钮，或者键盘快捷键ctl+U
  3. 等到IDE出现connecting…_____如下图
    在这里插入图片描述
  4. 等到IDE出现connecting…_____后按下光合未来上的开关，即开始代码下载了
    在这里插入图片描述
    在这里插入图片描述

5.下载成功后拔掉otg线，关闭光合未来的开关再重新打开，等待esp模块连上wifi，大概几秒就好了，然后打开 同一局域网 下的手机或者电脑的浏览器，访问 http://192.168.1.88，如在代码中修改了ip，则需要输入你修改的ip，注意不要和现有设备冲突， 即可看到如下界面了
在这里插入图片描述

总结

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

这篇关于老王家4.9元ESP8266温湿度传感器（光和未来）不开壳无损制作网页温湿度计的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/244909。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
EasyPlayer.js网页H5 Web js播放器能力合集

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求，要求做一款播放器，发现能力上跟EasyPlayer.js基本一致，满足要求： 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏（单屏/全屏） 多分屏（2*2） 多分屏（3*3） 多分屏（4*4） 播放控制 播放（单个或全部） 暂停（暂停时展示最后一帧画面） 停止（单个或全部） 声音控制（开关/音量调节） 主辅码流切换 辅助功能 屏
阅读更多...
禁止复制的网页怎么复制

禁止复制的网页怎么复制

禁止复制的网页怎么复制 文章目录 禁止复制的网页怎么复制前言准备工作操作步骤一、在浏览器菜单中找到“开发者工具”二、点击“检查元素（inspect element）”按钮三、在网页中选取需要的片段，锁定对应的元素四、复制被选中的元素五、粘贴到记事本，以`.html`为后缀命名六、打开`xxx.html`，优雅地复制 前言 在浏览网页的时候，有的网页内容无法复制。比如「360
阅读更多...
用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

上回我们学到创建一个地形和一个人物，今天我们实现一下人物实现移动和跳起，依次点击，我们准备创建一个C#文件 创建好我们点击进去，就会跳转到我们的Vision Studio，然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类，继承自MonoBehaviour{private Rigidbo
阅读更多...
国产游戏行业的崛起与挑战：技术创新引领未来

国产游戏行业的崛起与挑战：技术创新引领未来

国产游戏行业的崛起与挑战：技术创新引领未来 近年来，国产游戏行业蓬勃发展，技术水平不断提升，许多优秀作品在国际市场上崭露头角。从画面渲染到物理引擎，从AI技术到服务器架构，国产游戏已实现质的飞跃。然而，面对全球游戏市场的激烈竞争，国产游戏技术仍然面临诸多挑战。本文将探讨这些挑战，并展望未来的机遇，深入分析IT技术的创新将如何推动行业发展。 国产游戏技术现状 国产游戏在画面渲染、物理引擎、AI
阅读更多...
火语言RPA流程组件介绍--浏览网页

火语言RPA流程组件介绍--浏览网页

🚩【组件功能】：浏览器打开指定网址或本地html文件 配置预览 配置说明 网址URL 支持T或# 默认FLOW输入项 输入需要打开的网址URL 超时时间 支持T或# 打开网页超时时间 执行后后等待时间(ms) 支持T或# 当前组件执行完成后继续等待的时间 UserAgent 支持T或# User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器
阅读更多...
未来工作趋势：零工小程序在共享经济中的作用

未来工作趋势：零工小程序在共享经济中的作用

经济在不断发展的同时，科技也在飞速发展。零工经济作为一种新兴的工作模式，正在全球范围内迅速崛起。特别是在中国，随着数字经济的蓬勃发展和共享经济模式的深入推广，零工小程序在促进就业、提升资源利用效率方面显示出了巨大的潜力和价值。 一、零工经济的定义及现状 零工经济是指通过临时性、自由职业或项目制的工作形式，利用互联网平台快速匹配供需双方的新型经济模式。这种模式打破了传统全职工作的界限，为劳动
阅读更多...
起点中文网防止网页调试的代码展示

起点中文网防止网页调试的代码展示

起点中文网对爬虫非常敏感。如图，想在页面启用调试后会显示“已在调试程序中暂停”。 选择停用断点并继续运行后会造成cpu占用率升高电脑卡顿。 经简单分析网站使用了js代码用于防止调试并在强制继续运行后造成电脑卡顿，代码如下： function A(A, B) {if (null != B && "undefined" != typeof Symbol && B[Symbol.hasInstan
阅读更多...
（入门篇）JavaScript 网页设计案例浅析-简单的交互式图片轮播

（入门篇）JavaScript 网页设计案例浅析-简单的交互式图片轮播

网页设计已经成为了每个前端开发者的必备技能，而 JavaScript 作为前端三大基础之一，更是为网页赋予了互动性和动态效果。本篇文章将通过一个简单的 JavaScript 案例，带你了解网页设计中的一些常见技巧和技术原理。今天就说一说一个常见的图片轮播效果。相信大家在各类电商网站、个人博客或者展示页面中，都看到过这种轮播图。它的核心功能是展示多张图片，并且用户可以通过点击按钮，左右切换图片。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2