内容简介：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 的移动端页面可视化搭建工具思路
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Uberland
Alex Rosenblat / University of California Press / 2018-11-19 / GBP 21.00
Silicon Valley technology is transforming the way we work, and Uber is leading the charge. An American startup that promised to deliver entrepreneurship for the masses through its technology, Uber ins......一起来看看 《Uberland》 这本书的介绍吧!
