用中移物联网OneNET View2.0数据可视化工具做个大屏展示界面

中移物联网 View2.0 大屏展示

xukejing

关注

发布时间: 2020-03-26

丨

阅读: 9731

## 1、试用背景与项目简介
大家好，我是你们的老朋友xukejing，好久不见！

最近，中移物联网推出了OneNET View2.0数据可视化工具，它具有拖拽式编辑、多种功能组件、多数据源对接、自动屏幕适配、3D项目支持、多种行业应用模板、数据过滤等功能，可以帮助开发者拖拽生成高端大屏应用，轻松应对智能家居、智慧城市、水利水电、智慧医疗等数据可视化需求。

在过去，各位物联网老司机应该已经把中移物联网的老的应用管理平台的数据展示功能用得很6了，发现突然又来个View2.0，觉得既生瑜何生亮，可能会不太愿意重新再做一套应用。因此我特地试用了一些，试用体验以后，觉得把展示功能转到View2.0还是值得考虑的。

那么，为什么要用View，而不再用老的数据展示功能呢？给大家看看一个例子。
![](https://cf01.ickimg.com/bbsimages/202003/a4dfa3e08b9bf96da3e3752d93e374a5.jpg)
这是我的一个项目，这个项目已经做完很久了，也有老的展示界面。下面先看看在老的应用开发平台做出来的界面。
![](https://cf01.ickimg.com/bbsimages/202003/b0626952d4e8929fa1b6843f7fbb5f91.jpg)
这个应用的链接地址：
[https://open.iot.10086.cn/app_editor/#/view?open_id=d7de5fc56e70f18a371c8a581ef93219](https://open.iot.10086.cn/app_editor/#/view?open_id=d7de5fc56e70f18a371c8a581ef93219 "https://open.iot.10086.cn/app_editor/#/view?open_id=d7de5fc56e70f18a371c8a581ef93219")

虽然名字叫“空军一号”，但是它并不是飞机，而是个“箱子”。这是个宠物航空箱远程监视项目，硬件基于中移OneNet麒麟座开发板。装置除了监视温湿度与x、y、z轴加速度，考虑到宠物箱会被放进货仓，有可能会受到来自其他货物比如衣服、板材等释放的甲醛的毒害，还使用电化学甲醛传感器采集了甲醛浓度数据。
大家可以发现，老平台做出来的界面，看上去很简单，虽然朴素，但是很实用。

下面这个图片，就是基于新的View平台做的了。大家发现最大的区别了吧。View下面的各种控件UI都改进了，另外字体和配色比较有科技感。
![](https://cf01.ickimg.com/bbsimages/202003/a02c3ebe04d9bf6c6b7a49d6bb93f195.jpg)
这个View应用的链接地址：
[https://open.iot.10086.cn/view/main/#/share2d?id=5e7b444929b3eb00362155ec](https://open.iot.10086.cn/view/main/#/share2d?id=5e7b444929b3eb00362155ec "https://open.iot.10086.cn/view/main/#/share2d?id=5e7b444929b3eb00362155ec")

**划重点——高端大气上档次的数据可视化大屏展示**

前不久，中移OneNet社区邀请我试用一下View2.0。View2.0自带了很多现成的模板，比如智慧农业、智慧电网、智慧城市、智慧交通等，这些模板的UI也都做得非常精美。模板截图如下：
![](https://cf01.ickimg.com/bbsimages/202003/06c2100acfff35a37faa029d00700a17.jpg)

然而，我一试用就翻车了。模板里各个控件的数据都是静态的，并没有真的接入到实际设备的数据源。

一开始觉得这没啥难的，只要把已有产品的数据流拿过来怼上，前后一接不就完事了吗。
结果竟然出了个大问题，发生了数据源数据接口与UI控件输入接口不匹配的惨案，接入数据后好多控件都不能正常显示图像了。。。。。

以前的老的应用开发平台从没发生过这种事，怎么进化到View反而翻车了呢？
怎么会这样呢！！！！
不瞒您说，当时呢，我头都要炸了！！！！
![](https://cf01.ickimg.com/bbsimages/202003/704a730230e1e83dddd52d646cde075c.jpg)

经过观察，发现View新加入了一个“数据过滤器”的功能。虽然名字叫“数据过滤器”，其实确切的功能是“数据接口函数”。

也就是说，用户要自己写接口代码。不明真相的围观群众把瓜都震掉地上了。
![](https://cf01.ickimg.com/bbsimages/202003/64eee8063872253efa1fcc8c471ce085.gif)

真是好奇怪啊！为什么不直接在控件里把与OneNet数据流的接口做好，徒增不必要的重复劳动，还容易发生数据解析错误。这真是一个大坑啊。我们可以把View在物联网界推广一下，让大家一起掉坑里同甘共苦相濡以沫雨露均沾，这样心里可以平衡一点。

是不是很好奇，为什么OneNet突然把数据接口做得那么麻烦了？

OneNet始终秉承着开放合作的态度，首先可以排除不是故意给小白们添堵的。

神机妙算的我很快就猜到了原因。应该是为了过滤出高级玩家，然后送一波板子！能把数据接上的应该都是王者段位了。

所以，大家快去用View2.0做开发吧，做出项目后，板子申请成功率很可能会变成100%。

遇到坑是很正常的，不要怕，干就完了，奥利给。

## 2、接受挑战
今天要讲讲View怎样接入原有的OneNet项目的数据。

其实，我这恬不知耻的吹牛大王，除了会吹牛，也是个隐藏的高级玩家。既然前面已经发现UI控件的数据接口与OneNet数据流输出接口接不上了，那就写几个接口函数呗。我们王者遇到挫折的时候，一贯的风格都是像压路机一样直接碾压过去的。

本宝宝决定接受这个挑战！
![](https://cf01.ickimg.com/bbsimages/202003/fae632710a26e01b95842b641b217a2b.jpg)

## 3、数据过滤器的使用方法
这个项目是基于OneNet原始平台的，展示一下原有的数据流，包括温度、湿度、甲醛浓度和各轴加速度等。
![](https://cf01.ickimg.com/bbsimages/202003/69a38157a9bbb96fe6406723ac5fe51c.jpg)

View使用这些数据流前，需要先定义各个数据源，操作如下图所示：
![](https://cf01.ickimg.com/bbsimages/202003/b0558f372976dd6c407999aeecd2fb60.jpg)

来自OneNet数据流的数据是个数组，数组的at变量是时间，value变量是数值。下图展示了数据源的输出接口。
![](https://cf01.ickimg.com/bbsimages/202003/db6441be1097a6391ec678c7dee77c69.jpg)

先说说最简单的把数据接到文本控件，因为文本控件的值直接就叫value，这与数据源的输出接口一致；所以把数据源直接接入就可以了，不需要参数转换，如下图所示：
![](https://cf01.ickimg.com/bbsimages/202003/2817069e616952a0a8ad9039dda721cb.jpg)

旋钮控件与文本控件一样，值也是叫value。因此，数据源也可以直接接入：
![](https://cf01.ickimg.com/bbsimages/202003/b2f0b3f56b29bcb48caab9e06050c7b2.jpg)

仪表盘控件就稍微有些难度了，它有多个值，其中表盘数值不叫value，而是date.value。另外还有个表盘标题，叫date.name。所以就需要添加一个“数据过滤器”做参数转换。
![](https://cf01.ickimg.com/bbsimages/202003/498d0d4af7111719900ed2d213f96bfe.jpg)

折线图需要输入一个数组，数组的值有两个，分别叫x和y。以温度数据源为例，为了把数据源的at变量给x，把数据源的value变量给y，这里同样需要添加一个“数据过滤器”做参数转换。
![](https://cf01.ickimg.com/bbsimages/202003/ee563bb5c24b4b33ae678bac1b210a1b.jpg)

地图控件需要的输入数据也是一个关于经纬度的数组，接口数据名叫deviceName.lon和deviceName.lat，为了对它们赋值，同样需要写个“数据过滤器”。我的项目里没有实际的经纬度的数据流，所以在脚本里定义了经纬度的数值。
![](https://cf01.ickimg.com/bbsimages/202003/dcb0bbfaf66832fa14e32b2337d0fd22.jpg)

## 4、数据过滤器脚本
上一章使用了3个脚本，分别对应于仪表盘控件、折线图控件和地图控件接口。

仪表盘接口脚本如下，以温度表为例：
![](https://cf01.ickimg.com/bbsimages/202003/23a61b0f51296358040d91c64721a900.jpg)

折线图接口脚本如下：
![](https://cf01.ickimg.com/bbsimages/202003/effd0ffaeaae85cc3ca06ad86090b8fb.jpg)

地图控件接口脚本如下，如果没有GPS硬件，无法获取实时经纬度，需要用户自己在代码里定义：
![](https://cf01.ickimg.com/bbsimages/202003/ac35648509f2d88d8b30177374dbd7f5.jpg)

以上脚本的开源地址：
[https://github.com/xukejing/OneNet/tree/master/View2.0Demo](https://github.com/xukejing/OneNet/tree/master/View2.0Demo "https://github.com/xukejing/OneNet/tree/master/View2.0Demo")

原创作品，未经权利人授权禁止转载。详情见转载须知。举报文章

xukejing 擅长:其他应用

关注

登录后可评论，请登录或注册