0
0

Thingsboard开源物联网平台智慧农业实例快速部署教程（二）【手把手部署UI与动态数据】

Thingsboard开源物联网平台智慧农业实例快速部署教程（二）【部署UI与动态数据】

文章目录

1. 页面总览

本篇博文致力于快速部署，所以不会详解thingsboard中的相关知识点。详解请参照官方文档。
基础的服务部署见笔者上一篇博文ThingsBoard开源物联网平台智慧农业实例快速部署教程（Ubuntu、CentOS适用）

搭建页面整体效果如下：

在这里插入图片描述

动态效果如下：

在这里插入图片描述

2. 设备

2.1 数据字段定义

从页面中能够看到我们有9个大棚的数据，数据是动态更新的，从页面上的数据能够看到有（命名未按标准，类型定义随意）：
字段意义所用模块类型latitude纬度地图doublelongitude经度地图doubleN水解性氮土壤盐分折线图doubleP有效磷土壤盐分折线图doubleK速效钾土壤盐分折线图doubleillumination光照强度光照监控折线图doubletemperature气温大棚温度仪表盘doubleairHumidity空气湿度大棚湿度仪表盘doubleCO2二氧化碳浓度空气监测表格doublesoilTemperature土壤温度土地监测表格doublepH土壤pH值土地监测表格doublesoilMoisture土壤湿度土地监测表格doubleventilate通风空气监测表格boolname大棚编号报警器string

2.2 设备映射关系

10个大棚都属于大棚这个类型，在设备定义中的关系映射为有10个大棚设备，每个大棚设备大棚x都有配置大棚。

在这里插入图片描述

2.3 添加设备

添加设备配置

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

添加设备

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

以此类推创建9个

由于地图上需要展示设备的位置，所以需要经纬度，一般设大棚位置不变动，考虑将其固定为大棚的属性，同样大棚编号也设置为固有属性。

在这里插入图片描述

3 仪表盘UI

进入仪表盘库编辑UI

在这里插入图片描述

点击编辑的笔尖

在这里插入图片描述

点击实体别名

实体别名相当于将设备接入仪表盘的媒介，有多种规则接入，按需选择。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

为了某些特殊需要，也可以再添加单个设备的映射

在这里插入图片描述

请读者点击添加别名，笔者用编辑别名来展示参数选择

在这里插入图片描述

3.1 地图模块

按照笔者上篇博文，已经导入了一个仪表盘，在导入的仪表盘中有一个地图组件，如果我们自行导入地图组件的话按如下操作

在这里插入图片描述

在这里插入图片描述

设置腾讯地图，使用腾讯地图的key（需要读者自行申请），设置经度纬度字段。与设备属性字段设置对应起来

在这里插入图片描述

接下来就是绑数据的阶段，数据源设置刚刚创建的实体，别名为Silos，因为我们的引入规则为设备类型。所以10个具有大棚配置的大棚设备的数据都进入了数据源中。

在这里插入图片描述

数据设置属性，将经纬度加入

在这里插入图片描述

在这里插入图片描述

效果：

在这里插入图片描述

3.2 空气监测土地监测模块

这一部分选择实体表实现，在之前导入的布局中已经有实体表的组件，可以直接编辑，如果自己需要自行创建，那么可以选择组件包中的这个组件

在这里插入图片描述

空气监测的数据源设置如下

在这里插入图片描述

编号字段为实体字段，映射实体的系统自有值，所以实体字段name的值就是实体代表设备的设备名：大棚1、大棚2…，注意标签反应为表格的列名，下面的值都为name字段映射的设备名

在这里插入图片描述

下面的通风、空气湿度等等均为时序数据，新建数据键的时候添加时序数据的类型，键名要设置好，这里的数据是通过API接收json串的key，表格的值为实时更新的value，通过传统http或者mqtt等API接入，设置单位后每个值都会自动附带单位。

在这里插入图片描述

空气湿度设置如下

在这里插入图片描述

二氧化碳浓度设置如下

在这里插入图片描述

空气监测的导入仪表盘组件字体与直接添加组件默认不一样，这个是在设置中实现的，手动设置了标题样式，需要一点点的html基础

在这里插入图片描述

土地监测组件设置

在这里插入图片描述

与上述设置方式基本一致

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

效果如下：

在这里插入图片描述

在这里插入图片描述

读者的应该是暂时没有数据的，动态数据制造会在下面的章节4中介绍。

3.3 光照监控

光照监控使用如下组件

在这里插入图片描述

在这里插入图片描述

如下设置数据源

在这里插入图片描述

注意标签使用变量表达式（${entityName}），这样有条理

在这里插入图片描述

效果如下：

在这里插入图片描述

3.4 温度湿度

温度湿度采用这个部件

在这里插入图片描述

在这里插入图片描述

设置数据源，由于我们这个组件最大允许一个数据源，所以我们设置实体为单个设备的大棚1，数据键为时序字段。

在这里插入图片描述

设置标题并显示

在这里插入图片描述

设置刻度与最值

在这里插入图片描述

设置标题显示以及单位显示

在这里插入图片描述

效果如下

在这里插入图片描述

接下来设置湿度组件，湿度使用如下组件

在这里插入图片描述

在这里插入图片描述

设置数据源

在这里插入图片描述

在这里插入图片描述

设置刻度最值

在这里插入图片描述

设置单位

在这里插入图片描述

效果如下

在这里插入图片描述

3.5 土壤盐分

土壤盐分也是单个大棚显示多项数据，设置一个大棚的数据与光照监控的组件用法一致，不再赘述，时序数据源设置如下

在这里插入图片描述

设置标题显示

在这里插入图片描述

设置你要选择显示的统计信息

在这里插入图片描述

效果如下

在这里插入图片描述

但是这仍然只能显示一个大棚数据，切换多个查看大棚实时数据数据在这里使用动作->状态改变来实现，动作是在组件上形成反馈的功能，状态类似于页面

状态在这里选择

在这里插入图片描述

为大棚2单独设置一个状态，添加大棚2状态

在这里插入图片描述

在这里插入图片描述

将默认页面的组件复制过去

在这里插入图片描述

选择大棚2粘贴

在这里插入图片描述

将盐分数据源设为大棚2

在这里插入图片描述

在这里插入图片描述

在大棚1中添加按钮动作，设置为更新当前仪表盘状态，转到大棚2状态

在这里插入图片描述

设置如下：

在这里插入图片描述

大棚2等也是如此设置动作，效果如下（后期笔者动过部分组件，正常来说复制的完全一样差别不会这么大）

在这里插入图片描述

同样的方法设置温度和湿度，效果如上

由于笔者对API不熟悉，实际上应该有办法通过代码来直接变更数据源，但是短时间内笔者未找到，而且这是一篇快速部署教程，暂时也不拘泥于细节。

事实上动作可以采用自定义动作类型，但是widget上下文中只能使用当前数据源，没有找到能够读到全局实体别名并重新设置数据源的办法。如果有有经验的读者希望不吝赐教，十分感谢！

在这里插入图片描述

3.6 报警器

报警器需要在设备配置中设置告警规则，操作流程如下

在这里插入图片描述

详细设置：

在这里插入图片描述

支持若干条件表达，添加键名和规则

在这里插入图片描述

在这里插入图片描述

添加完成后来到仪表盘，添加如下部件

在这里插入图片描述

添加数据源，为了不使报警信息消失，采用一年的时间让消息堆积（看个人需求）

在这里插入图片描述

注意：除了位置是设备属性“编号”以外，其余的均为告警字段可以联系到内部的alarm，仅标签按照自己的需要设计即可

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

效果如下

在这里插入图片描述

至此UI设计（拖拖拽拽完毕）

4 模拟设备数据

为了让页面动起来，我们设计Linux脚本使用HTTP API进行模拟设备数据上报。

使用POST方式发送json串来上报数据，url格式如下：

http(s)://host:port/api/v1/$ACCESS_TOKEN/telemetry

$ACCESS_TOKEN

为设备访问令牌，获取方式为

在这里插入图片描述

单一设备的上报脚本

fakeData.sh

，其接收一个参数，作为设备访问令牌，上报数据，上报的数据通过读取当前目录的

data.txt

进行匹配

#!/bin/bash# Author:Moresweet# Date:2023.3.26# blog:https://blog.csdn.net/qq_38853759?spm=1000.2115.3001.5343# 检查脚本参数是否正确if[$# -ne 1];thenecho"Usage: $0 <device_id>"exit1fi# 设置设备号和 URLdevice_id=$1url="http://127.0.0.1:8080/api/v1/${device_id}/telemetry"# 无限循环发送 POST 请求whiletrue;do# 读取数据文件，生成 JSON 数据并发送 POST 请求whileread -r line;do# 解析数据行key=$(echo"$line"|awk'{print $1}')min=$(echo"$line"|awk'{print $2}')max=$(echo"$line"|awk'{print $3}')# 生成随机值if[ -z "$max"];then# 值列只有一个字段，当作字符串处理value=$minelse# 值列有两个字段，生成随机数value=$(awk -v min="$min" -v max="$max"'BEGIN{srand(); printf("%.2f\n", min+rand()*(max-min+0.0001))}')fi# 构建 JSON 数据json="{\"${key}\":${value}}"# 发送 POST 请求curl -X POST -H "Content-Type: application/json" -d "$json""$url"done< data.txt

    # 等待 5 秒钟后再次发送请求sleep5done

data.txt

内容如下，每一行是json串的一个键值对，键为每一行的第一个数据，数据之间用空格隔开，第二个数据为合理值的最小阈值，第三个数据为合理值的最大阈值，如果本行只有第二个数据，则直接作为字符串作为对应键的值。

N 1530
P 2040
K 250300
illumination 3000035000
temperature 2332
airHumidity 3070
CO2 400800
soilTemperature 1525
pH 5.07.0
soilMoisture 5080
ventilate true

start.sh

为启动脚本，思路为在列表中取出所有访问令牌，作为参数后台运行

fakeData.sh

脚本，每个运行延时2秒，因为随机数的产生一般是取时间为种子，所以并不是真正的随机数，延时为了避免所有设备脚本产生的随机数一摸一样。

#!/bin/bash# 定义设备参数列表（按需修改此处）devices=("xxxxxxxxxxxxxxxxx""hdalhdaslhdalsdhasl""cuvsaBdfdsL""dasdsaLOHdsadL""IkkkHJDSFSDlkjfds""hhfds""afsdfdsfsdfgfgfgh""kjlhfldsjsldf""gfeuheshfdsfjfsdkj")# 遍历设备列表执行fakeData.sh脚本并将其后台运行fordevicein"${devices[@]}"do
  ./fakeData.sh "$device"&# 加延时防止伪随机数按时间产生“相同”的“随机”值sleep2done

stop.sh

为结束脚本，如下所示

#!/bin/bash# 查找所有名为 fakeData.sh 的进程pids=$(pgrep fakeData.sh)# 循环杀死每个进程forpidin$pids;dokill$piddone

5 实际运行

运行填补

start.sh

中的设备列表以及修改

fakeData.sh

中的ip地址即可。

设置运行权限

chmod u+x start.sh
chmod u+x stop.sh
chmod u+x fakeData.sh

启动脚本

./start.sh

停止脚本

./stop.sh

运行结果

在这里插入图片描述

标签： 物联网 腾讯云 阿里云
本文转载自: https://blog.csdn.net/qq_38853759/article/details/129779835
版权归原作者 Moresweet猫甜 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Thingsboard开源物联网平台智慧农业实例快速部署教程（二）【手把手部署UI与动态数据】”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

如何给SaaS应用做安全

【软件测试】自动化常用函数

postman变量和脚本功能介绍

Python Selenium常见的报错以及措施

idea导出配置文件

如何在visual studio中 生成 并 使用dll和lib文件

Docker homeassistant 反向代理 外网访问

文章导航