【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

产品推荐:阿里云物联网开发者工具(IoT Studio),立刻免费体验吧!  
  

构建web可视化的控制平台

上篇我们已经能够完全通过云端控制设备了,但是必须要一条一条指令的发,并不是很方便,也并不方便交付给客户使用,所以我们需要可视化的用户界面(UI)

阿里云iot studio 提供了一套基于拖拽式构建的快速web开发工具,能够很方便的构建我们的用户界面应用

首先

【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

点击开发服务-IOT studio 然后点击新建项目

【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

点击创建一个空白项目

【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

给项目起个名字然后就点确定

【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

然后进入项目 我们点击web可视化开发

【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

创建一个新的web应用

【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

再来编个名字,然后确定

【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

这样我们就进入了开发界面了。。左边有很多的网页元素,中间是主界面,大家可以尝试着拖动一些元素过来

然后,我们需要按照下图方式构建一个应用框架

【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

​主要用到了 2个按钮分别调整颜色和内容, 一个滑条 0-5000 10步进,还有两个文本框

我们来调整各个项目的参数

【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

依次点击交互-事件【点击】 - 动作【调用服务】 - 产品与物的管理 - 物的管理服务 -设置物的属性

然后在参数中填入产品ID 设备ID 和我们的开关指令(开指令)

{
  "productKey": "a15mLG9bUxt",
  "deviceName": "uJCypeOEunEP4R5MJEar",
  "properties": {"onoff":1}
}

这样,我们单击这个按钮就能够给设备发送开的指令了。。

同样的,我们还要设定一个关闭的按钮

【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

其他都不变只是最后的指令参数变为0

{
  "productKey": "a15mLG9bUxt",
  "deviceName": "uJCypeOEunEP4R5MJEar",
  "properties": {"onoff":0}
}

随后我们要处理下滑条,让滑条的数据与设备数据同步,这样我们就能通过滑条看到设备的设置频率,也能够通过改变滑条调整设备的频率了

【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

一次设置数据绑定到固定设备【因为我们是测试,所以直接绑定到设备,实际使用的时候应该使用动态来源】

这样我们的控制界面就可以使用了

【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

点击保存可预览,我们就可以通过网页直接通过阿里云IOT物联网直接控制我们的变频器了。

【实践】工业用变频器上云 【5】 阿里云IOT STUDIO web可视化开发工具实现UI

发布后的效果。我们可以直接将网页嵌入其他软件中或者直接绑定域名发布给用户

至此,本系列完整的利用了阿里云的IOT工具,完整的构建了一套能够运行的案例系统。 如果有任何想法欢迎和我交流

上一篇:Java实现字符串的匹配


下一篇:【实践】工业用变频器上云 【1】 硬件介绍 与阿里云IOT设备创建