内容简介:Arduino MQTT 搭建物联网可视化温度实时监测
Arduino MQTT 搭建物联网可视化温度实时监测
-
开发所需元器件
Ardunio UNO Wifi 开发面板 x1
DHT11 温湿度传感器 x1
10k欧姆电阻 x1
-
搭建MQTT服务器:
搭建MQTT服务选择开源软件Mosquitto,下载地址及各系统安装方法见 https://mosquitto.org/download/
此实例安装于Mac系统,利用brew安装,安装命令brew install mosquitto
- 安装完成后,文件目录位于/usr/local/Cellar/mosquitto/1.4.11_2/ 配置文件位于目录/usr/local/etc/mosquitto/
-
设置 mosquitto MQTT服务启动websoc监听,修改配置文件/usr/local/etc/mosquitto/mosquitto.conf
#listener port-number [ip address/host name] listener 1883 listener 9001 protocol 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/以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Jmeter + Grafana搭建实时监控可视化
- 前端工程实践之可视化搭建系统(一)
- 使用 QuickBI 搭建酷炫可视化分析
- RocketMQ 可视化环境搭建和基础代码使用
- 可视化搭建平台的地图组件和日历组件方案选型
- 基于 vue 的移动端页面可视化搭建工具思路
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
精彩绝伦的CSS
[美] Eric A. Meyer / 姬光 / 人民邮电出版社 / 2012-7 / 49.00元
内容简介: 打造现代布局的专业技术 本书远非只是介绍基础知识,它不仅全面细致地讲解布局与效果,而且展望了HTML5和CSS3的未来。业内很少有人能像Eric A. Meyer一样详细阐明CSS,他在本书中深入分析了普遍适用的实用技术,讲解了如何选用正确的工具、如何通过jQuery使用CSS效果和CSS3技术。 本书主要内容如下: 显示或隐藏元素 通过XHTML为bod......一起来看看 《精彩绝伦的CSS》 这本书的介绍吧!