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

栏目: 后端 · 发布时间: 7年前

内容简介:Arduino MQTT 搭建物联网可视化温度实时监测

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 1883
      listener 9001
      protocol websockets
  • 启动服务

    命令行启动/usr/local/Cellar/mosquitto/1.4.11_2/sbin/mosquitto -c /usr/local/etc/mosquitto/mosquitto.conf
  • 连接元器件与线路板

  • 按如下线路图连接元器件

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

    R1为10k欧姆电阻

  • 连接Arduino Wifi 到网络

    参考 http://www.arduino.org/learning/getting-started/getting-started-with-arduino-uno-wifi

  • 由于要连接MQTT服务,设置Arduino 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>

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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

精彩绝伦的CSS

精彩绝伦的CSS

[美] Eric A. Meyer / 姬光 / 人民邮电出版社 / 2012-7 / 49.00元

内容简介: 打造现代布局的专业技术 本书远非只是介绍基础知识,它不仅全面细致地讲解布局与效果,而且展望了HTML5和CSS3的未来。业内很少有人能像Eric A. Meyer一样详细阐明CSS,他在本书中深入分析了普遍适用的实用技术,讲解了如何选用正确的工具、如何通过jQuery使用CSS效果和CSS3技术。 本书主要内容如下: 显示或隐藏元素 通过XHTML为bod......一起来看看 《精彩绝伦的CSS》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具