【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建

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

  Web可视化开发是阿里云IoT Studio中比较重要的一个功能,通过可视化拖拽的方式,方便地将各种图表组件与设备相关的数据源关联,无需编程,即可将物联网平台上接入的设备数据可视化展现。
  目前支持的组件如下图所示:
图片1.png
工业组件.PNG
组件开发.PNG
(还支持组件开发,目前处在内测之中)
  通过可视化拖拽的方式,方便地将各种图表组件与设备相关的数据源关联,无需编程,即可将物联网平台上接入的设备数据可视化展现。
  我们的对接的硬件平台依然是YF3300,相关的配置如下:
图片2.png
  当前物联网平台已经直接集成了IoT Studio,如下图所示:
图片3.png
  首先我们在阿里云上构建YF3300的物模型,并在此基础上,我们添加温度和湿度这两个属性。
图片4.png
  阿里云IoT Studio中的设备管理和物联网平台中的设备管理有些不同,针对IoT Studio来说,是以项目为单位的。产品和设备在同一个项目内是共享的,在不同项目之间是隔离的。因此,为使得IoT Studio中具有访问产品/设备的权限,必须将物联网平台中的设备管理中的产品关联到项目中,或者直接在项目下创建产品和设备(在项目下创建的产品和设备,将直接显示在物联网平台的设备管理模块中)。
  在阿里云IoT Studio页面可以新建产品和设备,也可以绑定阿里云物联网平台中的产品和设备。并且在阿里云IoT Studio页面创建的设备,自动会出现在阿里云物联网平台中。
图片5.png
图片6.png
  我们拖拉两个仪表盘,和I1和I2还有继电器Q1输出相关的组件。
图片7.png
  相关的组件要和产品和物模型进行绑定,如下图所示:
图片8.png
  相关配置完成后,直接发布即可。
  在浏览器中,我们会直接看到对应的数据和状态发生变化,并且可以直接操作开关,控制实际的物联网设备。
图片9.png
  想体验阿里云IoT平台的网友,可以单击如下链接:https://dev.iot.aliyun.com/sale?source=deveco_partner_yefan

相关实践学习
钉钉群中如何接收IoT温控器数据告警通知
本实验主要介绍如何将温控器设备以MQTT协议接入IoT物联网平台,通过云产品流转到函数计算FC,调用钉钉群机器人API,实时推送温湿度消息到钉钉群。
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品,7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前,请先开通下方两个云产品,让学习更流畅: IoT物联网平台:https://iot.console.aliyun.com/ LinkWAN物联网络管理平台:https://linkwan.console.aliyun.com/service-open
相关文章
|
25天前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
34 3
|
21天前
|
移动开发 数据可视化 前端开发
可视化设计web界面的工具
有什么可视化设计web界面的工具
30 0
|
1月前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
54 5
|
1月前
|
传感器 存储 架构师
构建基于 IoT 的废物管理系统:软件架构师指南
构建基于 IoT 的废物管理系统:软件架构师指南
72 9
|
22天前
|
消息中间件 监控 Kafka
Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面
随着大数据技术的发展,Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面,方便管理和监控 Kafka 集群。本文详细介绍了 Kafka Manager 的部署步骤和基本使用方法,包括配置文件的修改、启动命令、API 示例代码等,帮助你快速上手并有效管理 Kafka 集群。
41 0
|
2月前
|
缓存 Kubernetes Java
阿里云 SAE Web:百毫秒高弹性的实时事件中心的架构和挑战
SAE 事件中心通过智能诊断显示通知与用户连接起来,SAE WEB 百毫秒弹性实例给事件中心带来了新的实时性、海量数据和高吞吐的挑战,本篇将带您了解 SAE 整体事件中心的架构和挑战。
150 10
|
2月前
|
前端开发 开发者 容器
【布局革命!】Flexbox与Grid双剑合璧:解锁Web设计新纪元,让响应式界面瞬间焕发光彩!
【9月更文挑战第1天】本文通过问答形式深入探讨了Flexbox和Grid布局的特点与应用场景。Flexbox专为单轴布局设计,适用于响应式导航栏和列表;Grid布局则适用于二维布局,可精确控制元素的位置和大小,适合构建复杂的内容区域和仪表板。文章还提供了示例代码,帮助读者更好地理解和应用这两种布局方式,以创建高效、美观的Web界面。
82 9
|
2月前
|
监控 前端开发 数据库连接
Zabbix 5.0 LTS的web界面安装及修改zabbix web管理员的默认密码
这篇文章是关于如何安装Zabbix 5.0 LTS的web界面以及如何修改Zabbix web管理员默认密码的教程。
175 1
|
2月前
|
前端开发 JavaScript 开发者
现代前端框架激烈交锋,高效响应式 Web 界面的归属扑朔迷离!
【9月更文挑战第6天】本文通过实际案例,比较了主流前端框架 Vue.js、React 和 Angular 的特点与优势。Vue.js 以简洁的语法和灵活的组件化架构著称,适合小型到中型项目;React 强调性能和可扩展性,适用于大型应用;Angular 凭借全面的功能和严格架构,适合企业级开发。开发者应根据项目需求和技术栈选择合适的框架。
55 0
|
3月前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
59 0
下一篇
无影云桌面