当前位置: 首页 >应用方案 >技术应用 >

通过MQTT协议接入OneNet平台教程4:可视化界面配置

通过MQTT协议接入OneNet平台通信教程中,我们前边介绍了OneNet平台配置教程、MQTT连接通讯三要素及订阅发布配置教程、MQTT协议接入OneNet平台链接通讯测试配置教程到这里,关于产品的MQTT连接与通讯就全部完成了。但目前观察产品上报的数据有些繁琐,OneNet可以自行开发简单的云平台。这里我们根据这里的演示。建立个数据可视化的平台。我们在物联网平台中,找到应用开发中的数据可视化。

1  OneNet平台通信可视化界面配置
2  OneNet平台通信可视化界面配置

首先,我们新建一个项目。这里OneNet提供了一些模版可以直接使用,我们可以直接使用或者自己新建。

3  OneNet平台通信可视化界面配置

这里我们只是为了演示,所以使用一个空白模版,自己创建一个页面。

4  OneNet平台通信可视化界面配置

完成后,进入项目进行编辑。

5  OneNet平台通信可视化界面配置

接下来我们就可以看到一个可视化的编辑页面,这里我们可以更具自己喜好进行设计。这里我们演示只是为了演示效果,所以这里任意选择一个图标表示即可

6  OneNet平台通信可视化界面配置

随后,我们将数据绑定。在右侧的数据页面中,选择管理数据源。

7  OneNet平台通信可视化界面配置

数据类型选择物联网平台。其中名称,设定为我们的数据流名称,UserID是OneNet用户管理页面中可以找到。

8  OneNet平台通信可视化界面配置

accessKey就是设备密钥,产品ID、设备名称都可以在设备的详情中可以找到。

9  OneNet平台通信可视化界面配置

填写完成后,数据流会自动匹配,下拉即可看到刚才我们设置的两个属性。

10  OneNet平台通信可视化界面配置

刷新时间与获取点数任意设置即可。完成后点击创建。

11  OneNet平台通信可视化界面配置

随后下拉刚才我们创建的数据源,即可看到已经获取到了数据。

12  OneNet平台通信可视化界面配置

同样,我们再把湿度同样的方法创建湿度数据。

13  OneNet平台通信可视化界面配置

接下里即可开始绑定数据。选择刚才创建的数据源,随后,需要根据要求,在数据过滤器中设置对应数据。

14  OneNet平台通信可视化界面配置

然后点击数据处理结果,检查输出数据是否符合要求。

15  OneNet平台通信可视化界面配置
16  OneNet平台通信可视化界面配置


同样的方法,设置湿度、温度显示。

17  OneNet平台通信可视化界面配置

随后,确认无误后,保存发布项目,即可通过链接访问。

18  OneNet平台通信可视化界面配置
19  OneNet平台通信可视化界面配置


复制连接,然后确认发布,通过链接,检查是否能够成功访问

20  OneNet平台通信可视化界面配置

随后,我们再使用串口工具上报数据,检查数据是否能够同步刷新。

21  OneNet平台通信可视化界面配置
22  OneNet平台通信可视化界面配置


好了,以上就是全部的通过MQTT协议接入OneNet平台通讯教程。


今天的分享就到这里啦,EBYTE每一天都致力于更好的助力物联化、智能化、自动化的发展,提升资源利用率,更多产品更多资料,感兴趣的小伙伴可以登录我们的亿佰特官网和企业公众号(微信号:cdebyte进行了解,也可以直接拨打400电话咨询技术专员!


相关阅读:

1、通过MQTT协议接入OneNet平台教程1:OneNet平台配置

2、通过MQTT协议接入OneNet平台教程2:MQTT连接通讯配置

3、通过MQTT协议接入OneNet平台教程3:连接测试配置



亿佰特官网 4000-330-990

https://www.wjx.cn/jq/84863372.aspx