Web可视化开发是阿里云IoT Studio中比较重要的一个功能，通过可视化拖拽的方式，方便地将各种图表组件与设备相关的数据源关联，无需编程，即可将物联网平台上接入的设备数据可视化展现。

目前支持的组件如下图所示：

通过可视化拖拽的方式，方便地将各种图表组件与设备相关的数据源关联，无需编程，即可将物联网平台上接入的设备数据可视化展现。

我们的对接的硬件平台依然是YF3300，相关的配置如下：

当前物联网平台已经直接集成了IoT Studio，如下图所示：

首先我们在阿里云上构建YF3300的物模型，并在此基础上，我们添加温度和湿度这两个属性。

阿里云IoT Studio中的设备管理和物联网平台中的设备管理有些不同，针对IoT Studio来说，是以项目为单位的。产品和设备在同一个项目内是共享的，在不同项目之间是隔离的。因此，为使得IoT Studio中具有访问产品/设备的权限，必须将物联网平台中的设备管理中的产品关联到项目中，或者直接在项目下创建产品和设备（在项目下创建的产品和设备，将直接显示在物联网平台的设备管理模块中）。

在阿里云IoT Studio页面可以新建产品和设备，也可以绑定阿里云物联网平台中的产品和设备。并且在阿里云IoT Studio页面创建的设备，自动会出现在阿里云物联网平台中。

我们拖拉两个仪表盘，和I1和I2还有继电器Q1输出相关的组件。

相关的组件要和产品和物模型进行绑定，如下图所示：

相关配置完成后，直接发布即可。

在浏览器中，我们会直接看到对应的数据和状态发生变化，并且可以直接操作开关，控制实际的物联网设备。

想体验阿里云IoT平台的网友，可以单击如下链接：https://dev.iot.aliyun.com/sale?source=deveco_partner_yefan

【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建的更多相关文章

  1. 【阿里云IoT+YF3300】1.时代大背景下的阿里云IoT物联网的现状和未来

    “未来十到二十年,大家基本已经形成了一个共识,那便是新格局的奠定将由 AI 和物联网技术来支撑.放眼国内,在这些互联网巨头之中,未来真正成为竞争对手厮杀的,阿里和华为是首当其冲,在这两个领域双方分别暗 ...

  2. 【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP

    在上一篇<13.阿里云IoT Studio WEB监控界面构建>中,我们介绍了用阿里云IoT Studio(原Link Develop)可视化构建WEB界面程序.本篇文章将介绍用阿里云Io ...

  3. 【阿里云IoT+YF3300】3. Alink物模型之属性上传和下发

    [名词解释]属性:设备的功能模型之一,一般用于描述设备运行时的状态,如环境监测设备所读取的当前环境温度等.属性支持 GET 和 SET 请求方式.应用系统可发起对属性的读取和设置请求. 在上一篇文章& ...

  4. 【阿里云IoT+YF3300】15.阿里云物联网小程序构建

    2013年8月,“轻应用”概念提出,但是仅仅活跃四年随后淡出 ,直到2017年1月9号借助微信小程序成功续命.一时间,以微信小程序和支付宝小程序为代表的轻应用解决方案迅速贯穿多个环节,成为“万物互联” ...

  5. 【阿里云IoT+YF3300】16.云端一体化，天猫精灵操控YF3300

    “你好天猫精灵”,“主人有什么吩咐”,“打开灯”,“好的,灯已打开”.对于这样的对话应该大多数人都很熟悉,这就是智能家居的缩影.对于现在市面上层出不穷的智能家居系统,功能越来越繁杂,可是因为开发难度高 ...

  6. 【阿里云IoT+YF3300】4.Alink物模型之事件触发

    名词解释:设备的功能模型之一,设备运行时的事件,事件一般包含需要被外部感知和处理的通知信息,可包含多个输出参数.如,某项任务完成的信息,或者设备发生故障或告警时的温度等,事件可以被订阅和推送. 在工控 ...

  7. 在OneThink（ThinkPHP3.2.3）中整合阿里云OSS的PHP-SDK2.0.4，实现Web端直传，服务端签名直传并设置上传回调的实现流程

    在OneThink(ThinkPHP3.2.3)中整合阿里云OSS的PHP-SDK2.0.4,实现本地文件上传流程 by shuijingwan · 2016/01/13 1.SDK安装 github ...

  8. 【阿里云产品公测】云引擎ACE初体验

    作者:阿里云用户蓝色之鹰 :RYYjmG5;  来投票支持我把=i2]qj\  序号2. [阿里云产品公测]云引擎ACE初体验:作者:蓝色之鹰 e(OKE7  序号10.[阿里云产品公测]结构化数据服 ...

  9. 【阿里云产品公测】云引擎ACE新手实战基于Wordpress

    [阿里云产品公测]云引擎ACE新手实战基于Wordpress 作者:阿里云用户imnpc ACE(Aliyun Cloud Engine) 是一款弹性.分布式的应用托管环境,支持Java.php多种语 ...

随机推荐

  1. jenkins邮件通知html魔板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. $loj10156/$洛谷$2016$ 战略游戏 树形$DP$

    洛谷loj Desription Bob 喜欢玩电脑游戏,特别是战略游戏.但是他经常无法找到快速玩过游戏的方法.现在他有个问题. 现在他有座古城堡,古城堡的路形成一棵树.他要在这棵树的节点上放置最少数 ...

  3. Java 自增、自减

    i++/i-- 先使用变量的值,然后改变该变量的值: ++i/--i 先改变该变量的值,然后使用变量的值: : i = i++; 最终变量i的值到底是变成1呢还是保持为0呢? java中变量自增.自减 ...

  4. linux MySQL 5.7+keepalived 主备服务器自主切换

    一.环境准备1.关闭防火墙与selinux systemctl stop firewalld setenforce 0 sed -i 's/SELINUX=.*/SELINUX=disabled/g' ...

  5. notpad++使用cmd的快捷键设置

    notepad++运行批处理的设置: 运行 --> 输入运行程序名"$(FULL_CURRENT_PATH)" --> 保存(自定义的快捷键即可运行)

  6. bootstrap4.4 Stretched link的使用

    Stretched link功能介绍:扩大可点击区域. 原理 .stretched-link::after { position: absolute; top: 0; right:0; bottom: ...

  7. spring boot介绍

    spring boot简介 1.spring boot是spring家族中的一个全新的框架,它用来简化spring应用程序的创建和开发过程,也可以说spring boot能简化我们之前采用ssm框架进 ...

  8. zTree 节点勾选取消勾选 选中取消选中

    zTreeObj.cancelSelectedNode function 举例 取消当前所有被选中节点的选中状态 var treeObj = $.fn.zTree.getZTreeObj(" ...

  9. 你的应用安全吗？ ——用Xray和Synk保驾护航

    一.背景 在当下软件应用的开发过程当中,自研的内部代码所占的比例逐步地减少,开源的框架和共用库已经得到了广泛的引用.如下图所示,在一个Kubernetes部署的应用当中,我们自己开发代码所占的比例可能 ...

  10. uni-app,vue,react,Trao之缓存类封装

    uni-app,vue,react,Trao之缓存类封装 一,介绍与需求 1.1,介绍 缓存主要分为如下几个 1.LocalStorage LocalStorage是永久性的本地缓存,存储在客户端的浏 ...