资讯专栏INFORMATION COLUMN

使用IoT Studio搭建气象监测屏

李昌杰 / 737人阅读

摘要:使用开发监控大屏平台,即物联网开发平台。在应用编辑器中,搭建实时气象数据监控面板。设置完成后,该文字组件将显示气象监测设备上报的温度值。

 

1、概述

本实践案例中使用LoRa气象监测设备监测气象信息,上报温度、湿度、大气压、经度、纬度等数据,并使用IoT Studio平台搭建监控大屏,展示气象监测设备最新上报的数据和历史数据曲线图。

架构图

本案例的架构图如下。

 

方案设计

实现过程:

  1. 自主搭建气象站的LoRa网络。
  2. 配置LoRa气象监测设备接入物联网平台。
  3. 在IoT Studio平台搭建监控大屏。

物料准备

购买LoRa网关和LoRa气象监测设备硬件。

购买已通过Link WAN认证的产品(内置Link WAN密钥),可访问广域物联网阿里云IoT元器件馆

2、配置LoRa网关

使用LoRa设备之前,您需在物联网络管理平台上配置LoRa网关,搭建物联网所需的网络服务。

前提条件

已开通物联网络管理平台

操作步骤

  1. 登录物联网络管理平台控制台
  2. 在左侧导航栏,选择快速入门。
  3. 选择搭建与分享网络对应的开始搭建。

  4. 单击开始体验。
  5. 注册网关,填入您的网关基本信息和位置信息后,单击下一步。网关的GwEUI、PIN Code和频段信息,请在您网关设备的标签上查看。

    如下图所示。

  6. 将网关通电、连网。

    稍等片刻之后,网关状态显示为在线,则表示网关连网上线成功。

  7. 添加入网凭证,单击下一步。

  8. 将凭证授权给自己,单击完成。

执行结果

将凭证授权给自己后,在物联网平台上使用该凭证创建连网方式为LoRaWAN的产品。

3、配置LoRa设备接入物联网平台

配置LoRa网关后,您需要在物联网平台上创建LoRa产品和设备,定义物模型,编写、提交LoRa设备的数据解析脚本。

创建产品和设备

  1. 登录物联网平台控制台
  2. 在实例概览页,找到对应的实例,单击实例进入实例详情页。

  3. 在左侧导航栏,选择设备管理 > 产品。
  4. 在产品页,单击创建产品,创建一个连网方式为LoRaWAN的产品。
    参数说明
    产品名称自定义产品名称。
    所属品类选择为自定义品类。
    节点类型选择直连设备。
    连网方式选择为LoRaWAN。
    入网凭证选择您在物联网络平台中创建并已授权的入网凭证。
    数据格式选择为透传/自定义。
    认证方式选择为设备密钥。
  5. 产品创建成功后,单击添加设备栏下的前往添加,添加一个设备。

    设备的DevEUI和PIN Code,请在您的设备标签上查看。

  6. 测试设备连接物联网平台。

    按照设备上的标识,为设备连接天线、GPS天线、电池或电源。

    设备上电约2分钟后,在物联网平台控制台对应的实例下的设备页的设备列表中,该设备的状态会显示为在线。

定义物模型

物模型是将物理空间中的实体进行数字化,并在云端构建该实体的数据模型。在物联网平台中,定义物模型即定义产品功能(包括属性、事件、服务)。完成功能定义后,系统将自动生成该产品的物模型。本示例中,气象监测设备上报温度、湿度、气压、地理位置坐标等信息。因此,先在物联网平台上,为这些信息定义数据模型,即定义对应的属性。

  1. 在物联网平台控制台对应实例下的左侧导航栏,选择设备管理 > 产品 。
  2. 在产品页,找到之前创建的产品,单击对应的查看。
  3. 在产品详情页功能定义页签下,选择编辑草稿 > 添加自定义功能,添加以下自定义功能。
    属性名标识符类型取值范围步长单位读写类型
    温度Temperaturedouble-99~1000.01读写
    湿度Humiditydouble1~1000.01%读写
    大气压Atmospherefloat550 ~10600.01hPa读写
    经度Longitudedouble-180~1800.01°读写
    纬度Latitudedouble-90~900.01°读写
    海拔Altitudefloat0~99990.01m读写
    X加速度Acceleration_Xfloat-1000~10000.01mg读写
    Y加速度Acceleration_Yfloat-1000~10000.01mg读写
    Z加速度Acceleration_Zfloat-1000~10000.01mg读写
    运行速度Speedfloat-10000 ~100000.01Km/h读写
    电池电压Battery_voltagefloat0~1000000.01V读写
    气体阻力Gas_resistancefloat-10000 ~100000.01读写

    新增物模型的详细操作说明,请参见单个添加物模型

  4. 单击发布上线将物模型发布为正式版。

编写数据解析脚本

本示例中,LoRa设备上报的数据是二进制格式,如01880537A5109D5A00846C。其中 1、2 字节为数据标识码01 88;3、4、5字节为海拔数据altitude:339m;6、7、8字节为纬度数据latitude:34.1925;9、10、11字节为经度数据longitude:108.8858

阿里云物联网平台的标准数据格式为Alink JSON格式,不能直接使用二进制数据进行业务处理;并且物联网平台下发的数据也是Alink JSON格式。您需要根据您的设备数据格式和定义的物模型,编写数据解析脚本,提交到物联网平台,以供物联网平台调用来解析上下行数据。

  1. 登录物联网平台控制台,在对应实例的产品详情页,选择数据解析页签。
  2. 在编辑脚本输入框中,输入解析脚本。

    说明 脚本代码中属性的标识符必须与定义物模型时定义的一致。

    详细的数据解析脚本编写指导,请参见LoRaWAN设备数据解析

    本示例的数据解析脚本如下:

    // var COMMAND_REPORT = 02;// var COMMAND_SET = 01;var ALINK_PROP_REPORT_METHOD = "thing.event.property.post"; //标准ALink JSON格式Topic,设备上传属性数据到云端。var ALINK_PROP_SET_METHOD = "thing.service.property.set";var ALINK_VERSION = "1.1";function rawDataToProtocol(bytes) {    var uint8Array = new Uint8Array(bytes.length);    for (var i = 0; i < bytes.length; i++) {        uint8Array[i] = bytes[i] & 0xff;    }    var dataView = new DataView(uint8Array.buffer, 0);    var jsonMap = {};    // var fHead = uint8Array[0]; // 第0个BYTE为上报协议。// if (fHead == COMMAND_REPORT)    {        jsonMap["method"] = ALINK_PROP_REPORT_METHOD; //ALink JSON格式 - 属性上报。        jsonMap["version"] = ALINK_VERSION; //ALink JSON格式 - 协议版本号固定字段。        jsonMap["id"] = "" + 12345; //ALink JSON格式 - 标示该次请求id值。        var params = {};        switch (dataView.getInt16(0)) {        case 0x0267:            params["Temperature"] = Math.floor(dataView.getInt16(2) * 0.1 * 10) / 10;//保留两位小数。            params["Humidity"] = Math.floor(100 * dataView.getUint8(6) * 0.01 / 2 * 10) / 10;            params["Atmosphere"] = Math.floor(dataView.getInt16(9) * 0.1 * 10) / 10;            break;        case 0x0188:            var buffer = new Uint8Array(4);            buffer[0] = 0;            buffer[1] = uint8Array[2];            buffer[2] = uint8Array[3];            buffer[3] = uint8Array[4];            var latitude = new DataView(buffer.buffer, 0);            params["Latitude"] = Math.floor(latitude.getInt32(0) * 0.0001 * 10000) / 10000;            buffer[0] = 0;            buffer[1] = uint8Array[5];            buffer[2] = uint8Array[6];            buffer[3] = uint8Array[7];            var longitude = new DataView(buffer.buffer, 0);            params["Longitude"] = Math.floor(longitude.getInt32(0) * 0.0001 * 10000) / 10000;            buffer[0] = 0;            buffer[1] = uint8Array[8];            buffer[2] = uint8Array[9];            buffer[3] = uint8Array[10];            var altitude = new DataView(buffer.buffer, 0);            params["Altitude"] = Math.floor(altitude.getInt32(0) * 0.01 * 100) / 100;            break;        case 0x0371:            params["Acceleration_X"] = dataView.getInt16(2);            params["Acceleration_Y"] = dataView.getInt16(4);            params["Acceleration_Z"] = dataView.getInt16(6);            break;        case 0x0702:            params["Battery_voltage"] = dataView.getInt16(2)/10;            params["Speed"] = Math.floor(dataView.getInt16(6) * 0.01 * 100) / 100;            break;        case 0x0902:            params["Gas_resistance"] = dataView.getInt16(2);            break;        }        jsonMap["params"] = params; //ALink JSON 格式 - params 标准字段 }        return jsonMap;    }    function protocolToRawData(bytes) {        var method = json["method"];        var id = json["id"];        var version = json["version"];        var payloadArray = [];        return payloadArray;    }}                        
  3. 测试脚本。
    1. 选择模拟类型为设备上报数据。
    2. 在模拟输入下的输入框中,输入一个模拟数据:01880537A5109D5A00846C
    3. 单击执行。

    解析结果显示在运行结果栏中。

  4. 确认脚本能正确解析数据后,单击提交,将脚本提交到物联网平台系统。

    说明 物联网平台不能调用草稿状态的脚本,只有已提交的脚本才会被调用来解析数据。

    设备上报的属性数据经脚本成功解析后,您可以在该设备的设备详情页物模型数据 > 运行状态页签下,查看设备上报的属性数据。

4、使用IoT Studio开发监控大屏

IoT Studio平台,即物联网开发平台。您可以使用IoT Studio中的Web应用编辑器可搭建监控大屏,用于展示设备上报的数据。

操作步骤

  1. 在物联网平台控制台左侧导航栏,选择IoT Studio > 项目管理,在普通项目下单击新建项目,新建一个普通项目,具体操作参见普通项目

    创建成功,自动进入该项目。

  2. 在项目左侧导航栏,选择产品,再单击关联物联网平台产品,将已创建的气象监测产品与该项目关联,具体操作参见关联产品至普通项目
  3. 在项目左侧导航栏,选择设备,再单击关联物联网平台设备,将要监控数据的来源设备与该项目关联,具体操作参见关联设备至普通项目
  4. 在项目左侧导航栏,选择主页,单击Web应用 > 新建,新建一个Web应用,具体操作参见创建Web应用
  5. 在Web应用编辑器中,搭建实时气象数据监控面板。
    1. 选择自定义新增页,设置页面标题和背景颜色等面板页面显示效果。
    2. 在左侧导航栏中,选择

      组件,打开组件列表。
    3. 从组件列表中,拖拽一个矩形组件到画布上,并配置组件样式,具体操作参见矩形
    4. 从组件列表中,拖拽一个文字组件重叠于矩形组件上,再配置文字组件的数据源为气象监测设备的温度属性,具体操作参见文字

      设置完成后,该文字组件将显示气象监测设备上报的温度值。

    5. 从组件列表中,拖拽一个文字组件重叠于矩形组件上,文字内容设置为温度(℃),作为温度显示组件的标题。
    6. 选中配置好的三个组件,单击鼠标右键,选择成组,将这三个组件组成组件组。

    7. 根据要展示的属性数量,复制多个组。

      复制组件组时,各组件的显示效果配置和数据源配置同时被复制。

    8. 对复制的组件组单击鼠标右键,选择解散组。

      复制的组件组所有配置均相同。需先解散组,才能重新配置组件数据源等信息。

    9. 分别将数据源设置为该产品的其他属性,并设置对应的属性名称和单位。
    10. 如有需要,还可在页面上增加其他组件,如图片组件等,参见基础组件使用说明

      控制面板效果参考图如下。

    11. 所有组件配置完成后,单击页面上方的

      预览,预览和测试应用页面。
  6. 在Web应用编辑器中,新建空白页面,配置属性数据曲线展示图。

    以配置温度数据展示曲线图为例。

    1. 在左侧导航栏,选择

      页面,再单击新建符号+,新增空白页面。
    2. 在左侧导航栏,选择

      组件,拖拽一个实时曲线组件到画布上,并配置实时曲线组件的数据源为气象监测设备的温度属性,具体操作参见实时曲线
    3. 配置曲线图的显示样式。调整曲线图大小、坐标,设置是否显示时间选择器,设置系列名称为温度等。

      说明 如果选中时间选择器前的复选框,表示曲线图上显示时间选择器。应用发布后,可以设置时间,查看对应时间段的温度数据。

    4. 配置完成后,单击页面上方的

      预览,预览和测试应用页面。
  7. 单击页面上方的

    发布,发布应用。

后续步骤

应用发布后,在左侧导航栏中选择

应用设置,可以开启应用Token验证,为应用绑定您自己的域名等。

更多Web应用可视化开发操作指导,请参见Web可视化开发文档

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/123020.html

相关文章

  • 智能家居实训

    摘要:致力于建立行业产品技术施工等标准,为企业提供行业信息和技术交流相关规范培训产品服务展示监督检测和咨询服务,维护会员单位消费者的合法权益,积极推进智能家居行业的良性可持续发展。这是编制并发布的中国智能家居生态发展白皮书,具有一定的权威性。 ...

    BothEyes1993 评论0 收藏0
  • 鸿蒙(HMOS)开发基础篇(三)开发工具特性介绍

    DevEco Studio特性介绍 1 开发平台介绍1.1 应用开发1.2 设备开发 2 分布式应用开发2.1 UI设计Preview2.2 调试 X 往期文章 1 开发平台介绍 鸿蒙开发包含了分布式应用开发和分布式设备开发 1.1 应用开发 鸿蒙应用是在多设备运行的,同一个工程可以在多设备自适应,根据设备选择交互方式、UI布局,这个问题还在不断的发展和完善,需要开发者共同推进 鸿蒙应用...

    不知名网友 评论0 收藏0
  • 开发之路(设计模式二:观察者模式)

    摘要:继续我们的设计模式学习,有个好的观察者可以让你开发效率大大提高直接进入正题,我们用一个气象站程序来模拟此模式。内置了观察者模式的实现。 继续我们的设计模式学习,有个好的观察者可以让你开发效率大大提高 直接进入正题,我们用一个气象站程序来模拟此模式。有一个气象站程序,能对湿度,温度,气压进行监测并显示在显示装置上面模拟图如下,此系统中有三个部分气象站:获取实际气象数据的装置Weather...

    n7then 评论0 收藏0
  • 启明云端分享:小米智能手环主控的秘密

    摘要:年末,年即将走进尾声,忙碌了一年准备给家里人买一份礼物,这些天看了很多产品,最终选定了小米智能手环。 年末,2021年即将走进尾声,忙碌了一年准备给家里人买一份礼物...

    wpw 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<