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

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

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

【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建_第1张图片

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

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

【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建_第2张图片

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

【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建_第3张图片

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

【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建_第4张图片

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

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

【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建_第5张图片

【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建_第6张图片

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

【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建_第7张图片

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

【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建_第8张图片

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

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

【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建_第9张图片

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

 

你可能感兴趣的:(【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建)