jjzjj

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

Moresweet猫甜 2023-04-18 原文

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

文章目录

1. 页面总览

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

搭建页面整体效果如下:

动态效果如下:

2. 设备

2.1 数据字段定义

从页面中能够看到我们有9个大棚的数据,数据是动态更新的,从页面上的数据能够看到有(命名未按标准,类型定义随意):

字段意义所用模块类型
latitude纬度地图double
longitude经度地图double
N水解性氮土壤盐分折线图double
P有效磷土壤盐分折线图double
K速效钾土壤盐分折线图double
illumination光照强度光照监控折线图double
temperature气温大棚温度仪表盘double
airHumidity空气湿度大棚湿度仪表盘double
CO2二氧化碳浓度空气监测表格double
soilTemperature土壤温度土地监测表格double
pH土壤pH值土地监测表格double
soilMoisture土壤湿度土地监测表格double
ventilate通风空气监测表格bool
name大棚编号报警器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 ]; then
    echo "Usage: $0 <device_id>"
    exit 1
fi

# 设置设备号和 URL
device_id=$1
url="http://127.0.0.1:8080/api/v1/${device_id}/telemetry"

# 无限循环发送 POST 请求
while true; do
    # 读取数据文件,生成 JSON 数据并发送 POST 请求
    while read -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=$min
        else
            # 值列有两个字段,生成随机数
            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 秒钟后再次发送请求
    sleep 5
done

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

N 15 30
P 20 40
K 250 300
illumination 30000 35000
temperature 23 32
airHumidity 30 70
CO2 400 800
soilTemperature 15 25
pH 5.0 7.0
soilMoisture 50 80
ventilate true

start.sh为启动脚本,思路为在列表中取出所有访问令牌,作为参数后台运行fakeData.sh脚本,每个运行延时2秒,因为随机数的产生一般是取时间为种子,所以并不是真正的随机数,延时为了避免所有设备脚本产生的随机数一摸一样。

#!/bin/bash

# 定义设备参数列表(按需修改此处)
devices=("xxxxxxxxxxxxxxxxx" "hdalhdaslhdalsdhasl" "cuvsaBdfdsL" "dasdsaLOHdsadL" "IkkkHJDSFSDlkjfds" "hhfds" "afsdfdsfsdfgfgfgh" "kjlhfldsjsldf" "gfeuheshfdsfjfsdkj")

# 遍历设备列表执行fakeData.sh脚本并将其后台运行
for device in "${devices[@]}"
do
  ./fakeData.sh "$device" &
  # 加延时防止伪随机数按时间产生“相同”的“随机”值
  sleep 2
done

stop.sh为结束脚本,如下所示

#!/bin/bash

# 查找所有名为 fakeData.sh 的进程
pids=$(pgrep fakeData.sh)

# 循环杀死每个进程
for pid in $pids; do
  kill $pid
done

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

运行结果

有关Thingsboard开源物联网平台智慧农业实例快速部署教程(二)【手把手部署UI与动态数据】的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序,虽然我自己可以处理一大堆yml文件,但我说的语言(非常)有限,最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器,其中一些翻译器不愿意或无法处理存储库中的100多个文件,处理语言数据。谢谢&问候,安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题,我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - 每次我尝试部署时,我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手,我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目,而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  3. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf),开发人员无需担心javascript或jquery的东西。据我所知,JSF是一个规范,基于规范的各种可用实现,prim

  4. ruby-on-rails - Ruby on Rails 可以部署在 Azure 网站上吗? - 2

    我可以在Azure网站上部署RubyonRails吗? 最佳答案 还没有。目前仅支持.NET和PHP。 关于ruby-on-rails-RubyonRails可以部署在Azure网站上吗?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/12964010/

  5. jenkins部署1--jenkins+gitee持续集成 - 2

    前置步骤我们都操作完了,这篇开始介绍jenkins的集成。话不多说,看操作1、登录进入jenkins后会让你选择安装插件,选择第一个默认的就行。安装完成后设置账号密码,重新登录。2、配置JDK和Git都需要执行路径,所以需要先把执行路径找到,先进入服务器的docker容器,2.1JDK的路径root@69eef9ee86cf:/usr/bin#echo$JAVA_HOME/usr/local/openjdk-82.2Git的路径root@69eef9ee86cf:/#whichgit/usr/bin/git3、先配置JDK和Git。点击:ManageJenkins>>GlobalToolCon

  6. 深度学习部署:Windows安装pycocotools报错解决方法 - 2

    深度学习部署:Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯:公主号AiCharm本系列是作者在跑一些深度学习实例时,遇到的各种各样的问题及解决办法,希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  7. Ruby,使用包含 TK GUI 的 ocra 部署一个 exe - 2

    Ocra无法处理需要“tk”的应用程序require'tk'puts'nope'用奥克拉http://github.com/larsch/ocra不起作用(如链接中的一个问题所述)问题:https://github.com/larsch/ocra/issues/29(Ocra是1.9的"new"rubyscript2exe,本质上它用于将rb脚本部署为可执行文件)唯一的问题似乎是缺少tcl的DLL文件我不认为这是一个问题据我所知,问题是缺少tk的DLL文件如果它们是已知的,则可以在执行ocra时将它们包括在内有没有办法知道tk工作所需的DLL依赖项? 最佳答

  8. ruby-on-rails - NameError(未初始化常量 Unzipper::Zip)但仅在 Heroku 部署(Rails)上 - 2

    我有一个类unzipper.rb,它使用Rubyzip解压文件。在我的本地环境中,我可以成功解压缩文件,而无需使用require'zip'明确包含依赖项但是在Heroku上,我得到一个NameError(uninitializedconstantUnzipper::Zip)我只能通过使用明确的require来解决问题:为什么这在H​​eroku环境中是必需的,但在本地主机上却不是?我的印象是Rails自动需要所有gem。app/services/unzipper.rbrequire'zip'#OnlyrequiredforHeroku.Workslocallywithout!class

  9. ruby - Sinatra + Heroku + Datamapper 使用 dm-sqlite-adapter 部署问题 - 2

    出于某种原因,heroku尝试要求dm-sqlite-adapter,即使它应该在这里使用Postgres。请注意,这发生在我打开任何URL时-而不是在gitpush本身期间。我构建了一个默认的Facebook应用程序。gem文件:source:gemcuttergem"foreman"gem"sinatra"gem"mogli"gem"json"gem"httparty"gem"thin"gem"data_mapper"gem"heroku"group:productiondogem"pg"gem"dm-postgres-adapter"endgroup:development,:t

  10. 物联网MQTT协议详解 - 2

    一、什么是MQTT协议MessageQueuingTelemetryTransport:消息队列遥测传输协议。是一种基于客户端-服务端的发布/订阅模式。与HTTP一样,基于TCP/IP协议之上的通讯协议,提供有序、无损、双向连接,由IBM(蓝色巨人)发布。原理:(1)MQTT协议身份和消息格式有三种身份:发布者(Publish)、代理(Broker)(服务器)、订阅者(Subscribe)。其中,消息的发布者和订阅者都是客户端,消息代理是服务器,消息发布者可以同时是订阅者。MQTT传输的消息分为:主题(Topic)和负载(payload)两部分Topic,可以理解为消息的类型,订阅者订阅(Su

随机推荐