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. 【题解】多少个$1$(exBSGS)

    [题解]多少个\(1\)(exBSGS) 解方程: \[ \underbrace {1\dots1}_{n}\equiv k \mod m \] 其实就是 \[ \dfrac {10^n-1} {9} ...

  2. Java函数式接口与Lambda表达式

    什么是函数式接口? 函数式接口是一种特殊的接口,接口中只有一个抽象方法. 函数式接口与Lambda表达式有什么关系? 当需要一个函数式接口的对象时,可以提供一个lambda表达式. package l ...

  3. Linux 学习笔记 5 文件的下载、压缩、解压、初步认识yum

    写在前面 上节我们通过简单的几组命令,已经完全的实现了文件的移动.删除.更名.以及复制,我们最常用的基本玩法,本节将带着大家学习压缩.解压的相关步骤. Linux 学习笔记 4 创建.复制.移动.文件 ...

  4. 洛谷P1189 SEARCH 题解 迭代加深

    题目链接:https://www.luogu.com.cn/problem/P1189 题目大意: 给你一个 \(n \times m\) 的矩阵,其中有一些格子可以走,一些各自不能走,然后有一个点是 ...

  5. 1033 旧键盘打字 (20 分)C语言

    题目描述 旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是怎样? 输入描述: 输入在2行中分别给出坏掉的那些键.以及应 ...

  6. ElementUi 两个表格反选

    ElementUi 两个表格反选 1.先看看实现的图 表格内容显示 <el-row :gutter="20"> <el-col :span="16&qu ...

  7. 单用户登陆demo-后者挤到前者，类似QQ

    单用户登陆demo ,采用的是Tp5. 流程是,当用户首次登陆是验证用户帐号密码,成功的,用当前时间戳加上用户id和ip 拼接成一个标识,暂且sign ,然后存入cookie ,时间戳存入缓存redi ...

  8. Core 定时任务之HangFire

    ASP.NET Core 使用 Hangfire 很简单,首先,Nuget 安装程序包 > install-package Hangfire -pre 然后ConfigureServices添加 ...

  9. 《Java核心技术》 JVM指令集

    https://www.jianshu.com/p/bc91c6b46d7b

  10. colab上基于tensorflow2.0的BERT中文多分类

    bert模型在tensorflow1.x版本时,也是先发布的命令行版本,随后又发布了bert-tensorflow包,本质上就是把相关bert实现封装起来了. tensorflow2.0刚刚在2019 ...