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. Iterator接口介绍(迭代器)

    第一步 第二步 第二步用while 第二步用for循环(了解) 备注:

  2. 洛谷$P2057\ [SHOI2007]$ 善意的投票 网络流

    正解:网络流 解题报告: 传送门! $umm$看到每个人要么0要么1就考虑最小割呗,,,? 然后贡献有两种?一种是违背自己的意愿,一种是和朋友的意愿违背了 所以考虑开一排点分别表示每个人,然后$S$表 ...

  3. Educational Codeforces Round 53 (Rated for Div. 2) （前五题题解）

    这场比赛没有打,后来补了一下,第五题数位dp好不容易才搞出来(我太菜啊). 比赛传送门:http://codeforces.com/contest/1073 A. Diverse Substring ...

  4. 用python做推荐系统（二）

    一.简介 继上一篇基于用户的推荐算法,这一篇是要基于商品的,基于用户的好处是可以根据用户的评价记录找出跟他兴趣相似的用户,再推荐这些用户也喜欢的电影,但是万一这个用户是新用户呢?或是他还没有对任何电影 ...

  5. 查看磁盘型号和内存及raid信息

    1.查看磁盘型号 工具:smartmontools #smartctl --help #smartctl --all /dev/sda -d megarid,1 (第一块磁盘的信息) #smartct ...

  6. Django 多表、跨表、聚合、分组查询

    前期准备: 创建表 class Book(models.Model): title = models.CharField(max_length=32) price = models.DecimalFi ...

  7. bootstrap4.4 Stretched link的使用

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

  8. Git 合并多次提交

    在合并分支的时候,希望将多次提交合并成一个,然后再 cherry-pick 到主分支. 合并分支 develop 分支做开发,可能会进行多次提交,但是在发布或者进行 PR 的时候,我们只希望看到一次提 ...

  9. ArcEngine 数据编辑(IWorkspaceFactory)

    数据编辑做过很多次,没怎么出现问题,今天出现了问题,浪费了大半天,记录一下. 问题:修改Featrue的属性,修改后停止编辑,但是没有提示是否保存修改 原因:在编辑数据的时候没有加StartEditO ...

  10. The command '/bin/sh -c unzip -o php-7.2.23-src.zip' returned a non-zero code: 1

    Dockerfile 内容 #centos7 nginx php redis inotify FROM centos:7 MAINTAINER INFOBIRD RUN yum -y update & ...