Arduino MQTT 搭建物联网可视化温度实时监测

来源：互联网发布：淘宝自制美白面膜编辑：程序博客网时间：2024/05/22 06:28

Arduino MQTT 搭建物联网可视化温度实时监测

开发所需元器件
Ardunio UNO Wifi 开发面板 x1
DHT11 温湿度传感器 x1
10k欧姆电阻 x1
搭建MQTT服务器：
搭建MQTT服务选择开源软件Mosquitto,下载地址及各系统安装方法见https://mosquitto.org/download/
此实例安装于Mac系统，利用brew安装，安装命令brew install mosquitto
1. 安装完成后，文件目录位于/usr/local/Cellar/mosquitto/1.4.11_2/ 配置文件位于目录/usr/local/etc/mosquitto/
2. 设置 mosquitto MQTT服务启动websoc监听,修改配置文件/usr/local/etc/mosquitto/mosquitto.conf
```
#listener port-number [ip address/host name]listener 1883listener 9001protocol websockets
```

启动服务

    命令行启动/usr/local/Cellar/mosquitto/1.4.11_2/sbin/mosquitto -c /usr/local/etc/mosquitto/mosquitto.conf

连接元器件与线路板
按如下线路图连接元器件

R1为10k欧姆电阻
连接Arduino Wifi 到网络
参考http://www.arduino.org/learning/getting-started/getting-started-with-arduino-uno-wifi
由于要连接MQTT服务，设置Arduino MQTT客户端连接
编写Arduino运行代码
Arduino 发送数据到MQTT服务采用Arduino Ciao Library

/**  *  Demo IoT use Arduino UNO WiFi DHT11 to monitor Temperature and Humidity *  @Author:fzh *  @mail:81597228@qq.com */#include "DHT.h"#include <Wire.h>#include <UnoWiFiDevEd.h>#define CONNECTOR "mqtt"#define TOPIC "DHT11_TOPIC"// what digital pin we're connected to#define DHTPIN 7    // Uncomment whatever type you're using!#define DHTTYPE DHT11   // DHT 11// Initialize DHT sensor.// Note that older versions of this library took an optional third parameter to// tweak the timings for faster processors.  This parameter is no longer needed// as the current DHT reading algorithm adjusts itself to work on faster procs.DHT dht(DHTPIN, DHTTYPE);void setup() {  Serial.begin(9600);  //DHT11 begin  dht.begin();  //Ciao begin  Ciao.begin();}void loop() {  // Wait a few seconds between measurements.  delay(6000);  // Reading temperature or humidity takes about 250 milliseconds!  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)  float h = dht.readHumidity();  // Read temperature as Celsius (the default)  float t = dht.readTemperature();  // Check if any reads failed and exit early (to try again).  if (isnan(h) || isnan(t)) {    Serial.println("Failed to read from DHT11 sensor!");    return;  }  Serial.print("Humidity: ");  Serial.print(h);  Serial.print(" %\t");  Serial.print("Temperature: ");  Serial.println(t);  String data = "{\"H\":" + String(h) +",\"T\":" + String(t)+"}";  // pushes data into a channel  Ciao.write(CONNECTOR, TOPIC,data); }

温、湿度web可视化
浏览器客户端展示数据，需要与MQTT服务通讯，这里采用MQTT client mqtt.js
可视化展示采用实时数据图表可视化epoch.js
代码如下：

<!DOCTYPE HTML><html><head>  <title>epoch.js mqtt.js</title>    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js" type="text/javascript"></script>    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>    <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>    <script src="http://epochjs.github.io/epoch/js/epoch.js" charset="utf-8"></script>    <link rel="stylesheet" href="http://epochjs.github.io/epoch/css/epoch.css"></head><body><div id="container" style="min-width: 310px; height: 200px; margin: 30 auto" class="epoch"></div><script>   $(function(){     var temperatureData = {       label: "temperature",       values:[]     };     var humidityData = {       label: "humidity",       values:[]     };     var chartData = [temperatureData,humidityData];     var temperature,humidity,nextData = [];     var mychart = $('#container').epoch({       type: 'time.line',       data: chartData,       ticks:{ right: 5, bottom: 50, left: 5 },       axes: ['left', 'bottom', 'right']     });     var client = mqtt.connect('http://192.168.31.175:9001'); // you add a ws:// url here     client.subscribe("DHT11_TOPIC")     client.on("message", function (topic, msg) {       nextData = [];       //console.log([topic, msg].join(": "));       var jsonData = JSON.parse(msg);       // console.log(jsonData);       time = parseInt(new Date().getTime() / 1000);       temperature = {time:time,y:jsonData.T};       humidity = {time:time,y:jsonData.H};       nextData.push(temperature);       nextData.push(humidity);       mychart.push(nextData);     })   });</script></body></html>

这里写图片描述

参考资源：
http://www.circuitbasics.com/how-to-set-up-the-dht11-humidity-sensor-on-an-arduino/
https://mosquitto.org/download/
http://www.arduino.org/learning/getting-started/getting-started-with-arduino-uno-wifi
http://www.arduino.org/learning/reference/ciao-library
https://github.com/mqttjs/MQTT.js
http://epochjs.github.io/epoch/real-time/

阅读全文

2 1