内容简介：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 的移动端页面可视化搭建工具思路
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
