crm开发定制基于ESP8266的空气温湿度检测系统

一、crm开发定制课题研究意义、crm开发定制现状及应用分析

crm开发定制作为物联技术在居住环crm开发定制境中的综合体现, crm开发定制现今已被越来越多的中crm开发定制国消费者所接受。crm开发定制环境监测作为其中的一crm开发定制项重要组成部分, crm开发定制通常会通过各种传感器对空气温度、湿度、燃气浓度、火焰探测等项目进行监测。其中空气温湿度的智能检测常作为附加功能应用于空调、加湿器、除湿器等家电, 需要启动体量较大的家电才能实现检测, 成本较高;而传统的简易物理温湿度测量仪不具备远程实时显示的功能, 便捷性较低。

本文设计提出的基于的空气温湿度检测系统, 具有通过远程实时显示空气温湿度讯息的功能, 具备系统结构简易、硬件连接简单、网页制作便捷、成本较低等优点。

二、课题总体方案设计及功能模块

(一)课题总体方案设计

本系统由检测对象、、ESP8266开发板、web端、蜂鸣器等部分构成。检测对象为空气温湿度信息;传感器把在空气中获取的温湿度信息转变为电信号输出至ESP8266开发板;开发板首先将接收到的空气温湿度信息进行数据处理, 通过比特与数值的换算公式,输出可直接读取的温湿度数字和符号信息,例如“32℃ 78%”;然后开发板通过wifi与web端相连接, web端接收并实时显示开发板输出的温湿度信息;最后将温湿度信息数据与设定的阀值进行对比,实现高温报警。

(二)功能模块

三、系统硬件平台及接口设计

 (一)系统硬件平台

1、ESP8266 MCU 开发板

ESP8266作为一款WIFI网络通信模块,能够实现数据的网络传输,具有运行稳定、价格便宜等特点,该模块不仅能独立运行、也可作为子模块搭载于其他控制器运行。ESP8266支持AP/STA/AP+STA三种工作模式,这里选择STA工作方式,将 ESP8266 作为站点连接到由接入点建立的 WiFi 网络。

2、DHT11数字温湿度传感器

DHT11 数字温湿度传感器,包括一个电阻式感湿元件和一个NTC测温元件,是一款含有已校准数字信号输出的温湿度复合传感器。该产品精度高、可靠性好、响应快、稳定性强、抗干扰能力强、性价比极高并且连接方便。

3、0955无源蜂鸣器

0955无源蜂鸣器内部不带震荡源,直接用直流信号无法令其鸣叫。必须使用2K-5K的波形脉冲信号才能驱动它。

4、电源模块

电源信号由USB接口提供,目的是方便提供电源的来源和可靠性。

(二)接口设计

 四、系统软件功能设计,程序流程图及代码实现

(一)系统软件功能设计

用HTML标签、CSS、JavaScript等语言,制作一款简单实用的web端实时温湿度显示界面,调用API接口,将传感器获取的温湿度信息传送到显示界面。

(二)程序流程图

(三)代码实现

 1、硬件代码(Arduino C)

  1. #include <ESP8266WiFi.h>
  2. #include <ESP8266WebServer.h>
  3. #include "DHT.h"
  4. // Uncomment one of the lines below for whatever DHT sensor type you're using!
  5. #define DHTTYPE DHT11 // DHT 11
  6. #define frequency 300 //无源蜂鸣器频率设为300
  7. #define PIN_BEEP 15 // 无源蜂鸣器接ESP8266引脚D8(GPIO15)
  8. /*Put your SSID & Password*/
  9. const char* ssid = "Xiaomi 12X"; // Enter SSID here
  10. const char* password = "12345678"; //Enter Password here
  11. ESP8266WebServer server(80);
  12. // DHT Sensor
  13. uint8_t DHTPin = D4;
  14. // Initialize DHT sensor.
  15. DHT dht(DHTPin, DHTTYPE);
  16. float Temperature;
  17. float Humidity;
  18. void setup()
  19. {
  20. Serial.begin(115200);
  21. delay(100);
  22. pinMode(PIN_BEEP, OUTPUT);
  23. pinMode(DHTPin, INPUT);
  24. dht.begin();
  25. Serial.println("Connecting to ");
  26. Serial.println(ssid);
  27. //connect to your local wi-fi network
  28. WiFi.begin(ssid, password);
  29. //check wi-fi is connected to wi-fi network
  30. while (WiFi.status() != WL_CONNECTED)
  31. {
  32. delay(1000);
  33. Serial.print(".");
  34. }
  35. Serial.println("");
  36. Serial.println("WiFi connected..!");
  37. Serial.print("Got IP: ");
  38. Serial.println(WiFi.localIP());
  39. server.on("/", handle_OnConnect);
  40. server.onNotFound(handle_NotFound);
  41. server.begin();
  42. Serial.println("HTTP server started");
  43. }
  44. void loop()
  45. {
  46. server.handleClient();
  47. }
  48. void handle_OnConnect()
  49. {
  50. Temperature = dht.readTemperature(); // Gets the values of the temperature
  51. Humidity = dht.readHumidity(); // Gets the values of the humidity
  52. server.send(200, "text/html", SendHTML(Temperature,Humidity));
  53. }
  54. void handle_NotFound()
  55. {
  56. server.send(404, "text/plain", "Not found");
  57. }
  58. String SendHTML(float Temperaturestat,float Humiditystat){
  59. String ptr = "<!DOCTYPE html> <html lang=\"en\">";
  60. ptr += "<head>";
  61. ptr += "<meta charset=\"UTF-8\">";
  62. ptr += "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">";
  63. ptr += "<meta http-equiv=\"refresh\" content=\"1\">";
  64. ptr += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">";
  65. ptr += "<title>智能检测</title>";
  66. ptr += "<style>";
  67. ptr += "#webpage{background-color: rgb(239, 227, 227)}";
  68. ptr += ".main_1{border-radius: 15px; margin: 60px; text-align: center}"; // 圆角长方体
  69. ptr += ".font_1{color: rgb(255, 255, 255); text-align: center; margin: 7px}"; // 文本框
  70. ptr += ".foot_2{font-size: 25px; width: 300px; height: 70px; margin: 80px auto; text-align: center; line-height: 70px; padding: 15px;}";
  71. ptr += "</style>";
  72. ptr += "</head>";
  73. ptr += "<body style=\"background-color:rgb(239, 227, 227); background-size: 100%;\">";
  74. //文本“室内温室检测系统”
  75. ptr += "<div id=\"webpage\" style=\"height: 100px; margin: auto;\">";
  76. ptr += "<h1 style=\"text-align: center; line-height: 100px; color: rgb(7, 12, 7); font-size: 80px;\">客房温湿度检测</h1>\";
  77. ptr += "</div>";
  78. //文本“室内温度”
  79. ptr += "<div class=\"main_1\" style=\"width:430px; height: 450px;float: left; padding: 15px; background-color: rgb(62, 109, 95);\">\";
  80. ptr += "<h2 class=\"font_1\" style=\"text-align: center; line-height: 120px; font-size: 80px; margin: 50px;\">室内温度</h2>\";
  81. ptr += "<h2 class=\"font_1\" style=\"font-size: 80px; line-height: 150px;\">";
  82. ptr += (int)Temperaturestat;
  83. ptr += "°C </h2>\";
  84. ptr += "</div>";
  85. //文本“室内湿度”
  86. ptr += "<div class=\"main_1\" style=\"width:430px; height: 450px;float: right; padding: 15px; background-color: rgb(124, 85, 59);\">\";
  87. ptr += "<h2 class=\"font_1\" style=\"text-align: center; line-height: 120px; font-size: 80px; margin: 50px;\">室内湿度</h2>\";
  88. ptr += "<h2 class=\"font_1\" style=\"font-size: 80px; line-height: 150px;\">";
  89. ptr += (int)Humiditystat;
  90. ptr += "% </h2>\";
  91. ptr += "</div>";
  92. //定义温度变量,并且赋值,用于逻辑判断。
  93. int wd = Temperaturestat ;
  94. int i =0;
  95. if (wd>=30)
  96. {
  97. ptr += "<div class=\"foot_2\"> 天气炎热,注意防暑 </div>";
  98. for(i=0;i<3;i++)
  99. {
  100. tone(PIN_BEEP, frequency); //打开蜂鸣器
  101. delay(300);
  102. noTone(PIN_BEEP); //关闭蜂鸣器
  103. }
  104. }
  105. if (29>=wd && wd>20)
  106. {
  107. ptr += "<div class=\"foot_2\"> 天气晴朗,适合玩耍 </div>";
  108. }
  109. if (wd<10)
  110. {
  111. ptr += "<div class=\"foot_2\"> 天气酷寒,注意保暖 </div>";
  112. }
  113. ptr +="</body>\";
  114. ptr +="</html>\";
  115. return ptr;
  116. }

2、web端代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>监控系统</title>
  8. <style>
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. }
  13. body {
  14. width: 100%;
  15. background-color: rgb(232, 232, 168);
  16. margin: 0;
  17. padding: 0;
  18. font-family: "montserrat";
  19. background-image: linear-gradient(125deg, rgb(232, 232, 168), rgb(188, 152, 210), #c2e9fb, #C2FFD8);
  20. background-size: 400%;
  21. animation: bganimation 15s infinite;
  22. }
  23. @keyframes bganimation {
  24. 0% {
  25. background-position: 0% 50%;
  26. }
  27. 50% {
  28. background-position: 100% 50%;
  29. }
  30. 100% {
  31. background-position: 0% 50%;
  32. }
  33. }
  34. .box .header {
  35. width: 500px;
  36. margin: 50px auto;
  37. padding: 50px;
  38. }
  39. .header h1 {
  40. text-align: center;
  41. border-radius: 25%;
  42. background-color: rgb(215, 226, 179);
  43. line-height: 100px;
  44. }
  45. .center ul {
  46. display: flex;
  47. justify-content: space-around;
  48. list-style: none;
  49. }
  50. .center ul li {
  51. width: 150px;
  52. height: 80px;
  53. text-align: center;
  54. line-height: 80px;
  55. background-color: antiquewhite;
  56. }
  57. .center ul li a {
  58. display: block;
  59. width: 100%;
  60. height: 100%;
  61. }
  62. .center ul li:hover {
  63. background-color: #c2e9fb;
  64. box-shadow: 10px 10px 5px grey;
  65. }
  66. .times {
  67. width: 300px;
  68. height: 50px;
  69. text-align: center;
  70. line-height: 50px;
  71. border-radius: 50px;
  72. padding: 0 auto;
  73. margin: 100px auto;
  74. background-color: rgb(232, 232, 168);
  75. background-color: rgb(254, 254, 254);
  76. }
  77. .foot {
  78. font-size: 20px;
  79. width: 300px;
  80. height: 70px;
  81. margin: 80px auto;
  82. text-align: center;
  83. line-height: 70px;
  84. padding: 15px;
  85. }
  86. </style>
  87. </head>
  88. <body>
  89. <div class="box">
  90. <div class="header">
  91. <h1>室内温室检测系统</h1>
  92. </div>
  93. <div class="center">
  94. <ul>
  95. <li><a href="http://192.168.205.49" style="text-decoration: none;">主人房</a></li>
  96. <li><a href="http://192.168.205.32" style="text-decoration: none;">客房</a></li>
  97. </ul>
  98. </div>
  99. <div class="times"></div>
  100. <div class="foot">
  101. 开发人员:伍家麒、邱宝滢
  102. </div>
  103. </div>
  104. </body>
  105. <script>
  106. const times = document.querySelector('.times')
  107. function getDate() {
  108. const date = new Date()
  109. let h = date.getHours()
  110. let m = date.getMinutes()
  111. let s = date.getSeconds()
  112. h = h < 10 ? '0' + h : h
  113. m = m < 10 ? '0' + m : m
  114. s = s < 10 ? '0' + s : s
  115. times.innerHTML = `时间:${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${h}:${m}:${s}`
  116. }
  117. getDate()
  118. setInterval(getDate, 1000)
  119. </script>
  120. </html>

五、 实验测试、结果分析

室内温湿度检测系统设计完成后,对其功能进行测试。当手动握住温湿度传感器时,温度处于报警区间。在此过程中,通过wifi与web端连接,将数据实时传送到web界面,当数据改变时,web界面呈现的数据发生改变。经过以上测试,说明系统正常运行并满足其设计要求。实验结果图如下:

六、总结、心得体会

本系统以ESP 8266为核心部件的控制系统,利用web编程,最终基本上实现了各项要求。虽然系统还存在一些不足,不过大体能反映出设计的目的和要求,与理论计算的结果相进。空气质量检测系统已成为21世纪热门研究话题之一,无论是从生产还是生活方面,与人类都是息息相关的,而智能化的控制温湿度已经发展成为一种必然。

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发