原文博客:Doi技术团队
链接地址:https://blog.doiduoyi.com
初心:记录优秀的Doi技术团队学习经历
Data-View介绍
数据视图系统(Data-View)
用户上传不同类型的数据,根据不同的数据类型绘制成不同的图形。实现数据可视化,作为物联网或者App Inventor中的数据持久化平台使用。
同样地,你也可以通过Data-View制造数据,传输给,从而实现控制硬件。
项目地址:https://dataview.doiduoyi.com/
你可以通过Data-View做什么?
- App Inventor或者其他第三方通过接口传数据给Data-View,Data-View根据数据变化,实时绘制不同的数据图形。
- 通过Data-View添加数据,第三方可以通过接口获取到数据。
- Data-View上绘制成的图形都可以生产Html静态文件下载
基础概念
Data-View的数据结构分3层
- 频道:
- 数据域的集合,里面可以包含多个数据域
- 数据域:
- 具有特定单一类型数据点的集合。
- 目前数据域支持的数据点类型有:
- 整型
- 字符串类型
- 布尔类型
- 数据点:
- 具体数据
如图:
1.png频道
2.png数据域
目前支持的功能有:
-
查询选项,可以查询一段时间内所有的数据点
3.png -
模拟数据,此功能可以增加数据点,同时也可以通过这个功能给App Inventor或者硬件发送数据
4.png -
密钥,通过接口API操作数据域的私钥
5.png
-
可以对数据域信息的修改和订阅数据域(订阅后,会该数据域会出现在仪表盘)
6.png
-
导出。可以导出App Inventor 2 积木代码的程序,或者将图形导出成html格式的文件
7.png
数据点
Dava-View根据多个数据点的数据绘制出图形。
如下图,下图是整型类型的数据点所绘制的图形。
8.png
功能
App Inventor发送数据到Data-View
-
打开app.wxbit 网站 。网址:https://app.wxbit.com/#503564
9.png
-
新建一个项目
10.png -
在左边拖拉一个按钮到中间的屏幕中,并重命名为添加数值
11.png -
回到Data_View,我们创建一个渠道,并且创建一个数据域,名称叫app,类型选择数值型。
注意:数据域类型为数值型
Image.png
-
进入app该数据域,并且选择导出,然后点击添加数据点(此时已经成功复制)。
12.png
-
回到app.wxbit,点击右上角的逻辑设计
13.png
-
按下 F12 打开浏览器的开发者面板,于面板上方选中 控制台(Console) 选项卡,将已复制的代码粘贴至 控制台(Console) 中的输入框,按下 Enter 后即可将积木导入编辑页面。
14.png
-
按下回车后,界面会出现以下函数块
15.png
-
点击左边的添加数值,然后拖动第一个模块到界面
16.png
-
此时界面有两个代码块
17.png
-
点击左边的函数,找出添加数据点(数值),拖进界面
18.png
-
点击左边的数学,找出随机1到100的数值,拖进界面
19.png
-
此时界面的图如下
20.png -
这个时候,点击右上角的组件设计,回到设计页面
-
选择http组件,拖到界面中
21.png
- 点击右上角逻辑设计,回到代码版块
-
点击左边,选择Http客户端,拖进界面,并跟外名称为Web客户端
22.png
-
点击左边,选择计时器,拖入界面
23.png
-
点击右上角的逻辑设计,检查代码块
24.png
-
此时开发以及完成, 可以导出APK到手机安装了
25.png
-
将下载的应用安装到手机
26.png
-
点击添加数值按钮
23.回到Data-View的app数据域界面
27.png
-
可以点击导出,点击绘制编辑器。绘制自己想要的图像或者下载图像
28.png
网友评论