OneNet平台使用可视化界面(MQTT协议)

项目效果：

在OneNet平台建立一个可视化界面，实现效果是下位机的温度，湿度可以在该界面显示，同时该界面可以控制下位机的灯亮与灭。

搭建环境:

软件:keil(编写C语言-修改硬件的程序)+onenet平台（建立可视化界面-上位机功能）；

硬件:野火指南者开发板；

可视化界面：

含有折线图，仪表盘和开关。

折线图是显示湿度值；仪表盘用来显示温度值；开关用来控制灯亮灭。

注意：每个控件都需要和产品的数据流有关联。—-“数据流选择”

OneNET – 中国移动物联网开放平台 注册登陆进入onenet平台，点击右上角-“控制台”，进入如下界面，点击“多协议接入”，找到“MQTT协议”，添加产品，然后进入下一个界面。

点击这个新建的产品进入到如下图的界面，点击“设备列表”，“数据流” 去建立设备和数据流，然后点击“应用管理”，跳转到“数据可视化”界面。（具体网址： 物联网平台）

图示1

进入数据可视化界面，点击“新建项目”，选择2D-空白模板，然后建个名称，开始编辑这个模板。 

 在画布上面添加仪表盘，具体操作参看如下界面的标示。 

点击“数据”—〉“数据源选择”（目的：数据和控件关联关系），按照下图的步骤创建，其中数据类型–onenet，名称可任意设置，红色椭圆标记是参考前面“多协议接入”建立新产品时的产品ID，accesskey–来自产品概况（图示1），设备–来自设备列表的设备名称（图示1），数据流–来自数据流模板（图示1）{控件功能是什么对应相关的数据流，比如：仪表盘–数据流为temperature，折线图–数据流为humidity，开关–数据流为ledFlag}。

往下找到“数据”—〉“私有过滤器”，修改程序（可以参考官方的网址 OneNET – 中国移动物联网开放平台），最终呈现的效果就是可以显示标题“温度”和数值。

function last(arr) {

    var len = arr ? arr.length : 0;

    if (len) return arr[len – 1];

}

return [{

    value:last(data).value,

    name: ‘温度’   

}]

 相同的方法设置“基本折线图”，放置相关控件，然后“数据”—〉“数据源选择”—〉humidity（对应项目的数据流），同时“数据过滤器”内的程序改为：

data.forEach((item, index) => {

    item.x = item.update_at

    item.y = item.value

});

在“样式”—〉“数据系列”–〉“系列名”—湿度。

同样在“控制”中找到“按钮”，放置该按钮，然后在“样式”–〉“数据系列”—〉“系列1”—〉“命令内容”改为“LEDON”（单片机程序可以控制灯亮的命令），“系列2”—〉“命令内容”改为“LEDOFF”，在“数据”—〉“数据源选择”—〉对应项目的数据流。

这篇文章是参考了up主（学的很杂的一个人）B站视频最终实现了我的效果（感谢），主要为了记录这个实现过程，本文主要介绍可视化界面的控件实现的过程。