使用百度云IOT 实现网站自动显示物联网设备信息

使用百度云IOT 实现网站自动显示物联网设备信息

    • 主要目的
    • python模拟设备接入百度天工“物接入”
    • 设置规则引擎
    • 设置时序数据库
    • 将时序数据库数据绑定到图表中(物可视)
    • 生成HTML文件插入任意需要插入的网站中

主要目的

分步展示通过Python代码模拟物联网设备接入百度云天工项目“物接入”,完成“物解析”,通过“规则引擎”插入时序数据库,完成“时序数据库"操作,通过"可视化"发布物联网设备实时显示界面

python模拟设备接入百度天工“物接入”

通过Python模板代码,将本地信息(如本项目中的随机温度)发送到百度云

  1. 百度云注册物接入 ,图片如下;
    使用百度云IOT 实现网站自动显示物联网设备信息_第1张图片2.网络测试MQII通讯是否成功,图片如下图
    使用百度云IOT 实现网站自动显示物联网设备信息_第2张图片3.运行代码 Python代码如下
// An highlighted block
import paho.mqtt.client as mqtt
import sys
import uuid
import time,random
import numpy as np

broker = 'n4mtxv8.mqtt.iot.gz.baidubce.com'
port = 1883
username = 'n4mtxv8/user3'
password = 'bNONDP5ZRPzVsc0h'
clientid = 'test_mqtt_python_' + str(uuid.uuid4())
topic = 'PUBSUB'

def on_connect(client, userdata, rc):
    print('Connected. Client id is: ' + clientid)
    client.subscribe(topic)
    print('Subscribed to topic: ' + topic)

    client.publish(topic, 'Message from Baidu IoT demo')
    print('MQTT message published.')

def on_message(client, userdata, msg):
    msg = str(msg.payload, 'utf-8')
    print('MQTT message received: ' + msg)
    if msg == 'exit':
        sys.exit()

client = mqtt.Client(clientid)
client.on_connect = on_connect
client.on_message = on_message
client.username_pw_set(username, password)

print('Connecting to broker: ' + broker)
client.connect(broker, port)

while True:
    ss=np.random.randint(100)
    print (ss)
    string1="{\"ts\":%s, \"deviceid\":\"%s\",\"temperature\":%s} " %(int(time.time()),clientid,ss)    
    client.publish(topic,payload=string1,qos=0)
    time.sleep(5)
    client.loop_start()

名词解释:topic 尤其重要该话题必须具有上传权限,需在百度云上完成设置
使用百度云IOT 实现网站自动显示物联网设备信息_第3张图片使用百度云IOT 实现网站自动显示物联网设备信息_第4张图片
到处我们可以看到从python模拟设备发送的数据,显示在百度测试连接网页上啦
并可以使用通用MQII 1.70 在本地看到我发送的数据效果如图
使用百度云IOT 实现网站自动显示物联网设备信息_第5张图片

设置规则引擎

设置结果如下图
使用百度云IOT 实现网站自动显示物联网设备信息_第6张图片

设置时序数据库

设计结果如下图
使用百度云IOT 实现网站自动显示物联网设备信息_第7张图片

将时序数据库数据绑定到图表中(物可视)

设置图如下
使用百度云IOT 实现网站自动显示物联网设备信息_第8张图片

生成HTML文件插入任意需要插入的网站中

// An highlighted block
<!DOCTYPE html>
<html>
    <head>
        <!-- 加载 物可视SDK-->
        <script type="text/javascript" src="https://iotviz.cdn.bcebos.com/bin/prod/sdk/bdiotvizplayer.min.js"></script>
        <style>
            html, body {
                font-size: 12px;
                font-family: "PingFang SC";
                display: block;
                margin: 0;
                width: 100%;
                height: 100%;
            }

            #content {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="content"></div>

        <script type="text/javascript">
            const bdIotVizPlayer = window.BDIotVizPlayer;
            const container = document.getElementById('content');
            const myDashboard = bdIotVizPlayer({
                containerElement: container,
                dashboardId: '5c49adee959b5e1c3c808fd2',
                fillMode: 'none', // <-- Optional, Possible value: 'none', 'contain', 'cover', 'responsive'
                token: {
                    type: 'embedded', // <-- Must be 'embedded'
                    value: '7589ee574eeb946903a6c6149a47a90e' // <-- Access Token for current dashboard
                }
            });
            myDashboard.getDashboardConfig().then(function(config){
                console.log(config); // <--- Current Dashboard Config
            });
            // 'myDashboard' exposes the API to the dashboard loaded
            // refer to API doc for complete API description
        </script>
    </body>
</html>

你可能感兴趣的:(说明文档)