【平头哥RVB2601创意应用开发】环境监测终端07-web应用设计

sipower

【平头哥RVB2601创意应用开发】环境监测终端07-web应用设计 [复制链接]

本篇文章介绍在阿里云IoT Studio平台设计一个web应用，将温度、湿度、噪声水平用仪表盘和折线图展示。为指示灯设计一个按钮和状态指示器，可以在云端控制其开关。

具体开发过程如下。登陆阿里云IoT Studio平台，地址如下。

在主页中点击“新建web应用”，在弹出对话框中填入需要的信息，点击最下面的确认按钮创建应用。如下图：

图1、新建web应用

应用创建完成后进入编辑界面，具体各部分功能如图所示，根据自己需要进行页面设计。

图2、页面设计

如果不太熟悉这个设计规则，官方也有详细的指导教程，见如下链接。

根据需要添加组件，可以手工填入每个组件的坐标和大小，让排列更整齐。在此处，我为温度、湿度、噪声水平设置了仪表盘来显示实时数据，设置了折线图展示最近一个小时的数据变化。设置了一个按钮来控制指示灯开关，并用一个图标显示指示灯的状态。界面如下图。

图3、设置好的界面

接下来为每个组件配置数据源，以温度仪表盘为例，选中它，然后点击右边配置数据源，如下图

图4、配置数据源

在弹出的对话框中依次选择目标产品，设备，属性，如下图，就能把组件和具体设备参数关联起来

图5、数据关联

在配置过程中，可以随时点击右上角的预览按钮，查看设计效果。配置完所有组件后，就可以选择发布了，如下图。这个链接地址可以绑定到自己的域名上，分享给需要人。

图6、发布应用

我的这个应用页面效果如下图，各个参数均展示出来了。如果有多台监测终端，可以把这一页编成一组，然后把各组并列展示，就是分布式监测系统了。

图7、页面效果

下面是视频展示，可以看到数据在不断更新，点击按钮也能控制指示灯开关，不过状态图标总是反应慢半拍，这个跟网络更新频率有关，目前我还解决不了。

图8、视频展示

至此，我的作品全部完成，基本实现了我预期的各个功能。感谢平头哥提供的开发板和热心的技术支持，感谢EEWORLD提供展示的平台。通过本次作品设计，我学习了RISC-V的相关知识，感受到了国产芯片和开发平台的进步，相信总有一天，会把限制我们的那些家伙全部干翻。

lugl4313820

终于完成了，阿里云可以申请多少个接入点呀。

sipower

lugl4313820 发表于 2022-4-27 13:36 终于完成了，阿里云可以申请多少个接入点呀。

我测试就用到三个，更多试过。另外我发现发的数据多了是收费的，我测试了2个多小时，花了1分钱，我开始还以为没发布产品，测试阶段是免费的呢，欠费了才发现是收费的。以前用中国移动onenet是免费的。

lugl4313820

我感觉自己建服务器才是王道，但是现在的服务器也贵了，每年都得花好几千。

freebsder

挺好看，解决了工科男的审美问题。