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. 【题解】有标号的DAG计数3

    [HZOI 2015] 有标号的DAG计数 III 我们已经知道了\(f_i\)表示不一定需要联通的\(i\)节点的dag方案,考虑合并 参考[题解]P4841 城市规划(指数型母函数+多项式Ln), ...

  2. ResponsibilityChainPattern(责任链模式)-----Java/.Net

    职责链模式(称责任链模式)将请求的处理对象像一条长链一般组合起来,形成一条对象链.请求并不知道具体执行请求的对象是哪一个,这样就实现了请求与处理对象之间的解耦

  3. flask 中的 werkzeug Local，LocalStack 和 LocalProxy 技术应用

    什么是 Local wsgi 每次请求,会把过程进行抽离无状态话,过程数据存储在本次请求的全局变量中,使用到了Local. Local 作为每次请求的全局命令空间,属于每次请求的私有 LocalSta ...

  4. 使用Theia——添加语言支持

    上一篇:使用Theia——创建插件 Theia——添加语言支持 Theia中TextMate的支持 使用TextMate语法可以为大部分源文件提供精准的着色修饰,虽然这只是在语法级别上(没有语言本身的 ...

  5. Python基础(二)：操作基本数据类型

    Python是一门解释型语言,它的优势在于代码简洁,易于理解,可以通过大量已封装好的内建方法和第三方模块方法完成日常所需的操作. 字符串 索引 起始下标为0 (从前往后数),末尾下标为-1(从后往前数 ...

  6. 小小知识点（十八）U盘中病毒了，System Volume Information文件夹删除不掉

    win+R调出命令窗口后搜索cmd,启用cmd命令编辑器,并输入以下命令: attrib "H:\System Volume Information" -s   //这句话可以选择 ...

  7. Java 从入门到进阶之路（二十一）

    在之前的文章我们介绍了一下 Java 中的日期操作,本章我们来看一下 Java 集合框架中的Collection. 早在 Java 2 中之前,Java 就提供了特设类.比如:Dictionary, ...

  8. oop(面向对象语言的三大特征)：封装，继承，多态； （抽象），函数绑定

    封装/隐藏 : 通过类的访问限定符实现的   private    public 继承的意义之一:代码的复用 类的继承是指在一个现有类的基础上去构建一个新的类,构造出来的新类被称为派生类(子类),现有 ...

  9. Kafka日志压缩剖析

    1.概述 最近有些同学在学习Kafka时,问到Kafka的日志压缩(Log Compaction)问题,对于Kafka的日志压缩有些疑惑,今天笔者就为大家来剖析一下Kafka的日志压缩的相关内容. 2 ...

  10. 2次方的期望dp

    某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(    我们来简化一下这个游戏的规则    有n次点击要做,成功了就是o,失败了就是x,分数是按comb计算的,连续a个com ...