1447浏览
查看: 1447|回复: 2

【云雀气象仪基础应用教程】第四课:气象数据可视化

[复制链接]
气象数据可视化
教程目录:

在上个项目中,我们制作了一个气象数据预警装置,将获取到的气象数据实时显示在了行空板的屏幕上,并在气候不佳时进行预警提醒。然而,行空板的屏幕尺寸有限,并且只是以数值形式呈现数据,不够美观。那么,有什么办法能让我们更直观得查看气象数据,及其变化情况呢?

让我们使用Mind+可视化面板,在大屏幕上查看实时的气象结果,并自主设计数据不同的呈现方式,让界面更加炫酷吧!

任务目标

使用行空板与云雀气象仪采集气象数据,并发送到SIoT物联网服务器上,再结合Mind+可视化面板,将气象数据以图表的形式呈现。

【云雀气象仪基础应用教程】第四课:气象数据可视化图1

知识目标

1、了解物联网、SIoT及数据可视化。

2、掌握使用Mind+可视化面板设计气象数据显示屏的方法。

材料清单

硬件清单:

【云雀气象仪基础应用教程】第四课:气象数据可视化图2

软件使用:Mind+编程软件x1

Tips:软件需要使用Mind+1.8.0及以上版本,SIoT需使用V2版,由于行空板上默认内置的是SIoT V1版,因此我们需要更新SIoT,更新方法和

Mind+的链接如下:

https://mindplus.dfrobot.com.cn/dashboard_edu0161

动手实践

1、硬件连接

STEP1:将云雀气象仪连接到行空板的IIC口,如下图所示。

【云雀气象仪基础应用教程】第四课:气象数据可视化图3

STEP2:通过USB连接线将行空板连接到电脑。

【云雀气象仪基础应用教程】第四课:气象数据可视化图4

2、SIoT服务启动

STEP1:开启SIoT应用

按下行空板的HOME键进入菜单,单击“应用开关”,找到SIoT应用后点击启用,如下图所示。

【云雀气象仪基础应用教程】第四课:气象数据可视化图5

STEP2:登录SIoT物联网平台创建Topic

打开连接服务器端电脑的浏览器,输入“10.1.2.3”,进入行空板网页菜单后,点击SIoT应用的“打开页面”按钮,登录SIoT物联网平台(账号“siot”密码“dfrobot”)。

【云雀气象仪基础应用教程】第四课:气象数据可视化图6

登陆后,依次创建“siot/温度数据”、“siot/湿度数据”、“siot/气压数据”、“siot/风速数据”、“siot/风向数据”、“siot/高温预警”总共六个Topic,创建Topic操作示例如下,

【云雀气象仪基础应用教程】第四课:气象数据可视化图7

创建完成后,即可在数据管理页面看到相应的Topic显示。

【云雀气象仪基础应用教程】第四课:气象数据可视化图8

3、软件编写

程序编写

STEP1:
创建与保存项目文件

启动Mind+,保存项目并命名为“04、气象数据可视化”。

STEP2:导入素材图片

在项目文件中导入需要的背景素材图。(图片文件与程序文件同在项目文件夹中)。

Tips:图片素材链接见附录1

STEP3:加载扩展库

(1)点击左下角的“扩展库”;

(2)在官方库中加载“行空板”、“MQTT-py”;

(3)在pinpong库中加载“pinpong初始化”;

(4)在用户库中输入“https://gitee.com/liliang9693/ext-yunque”,加载云雀气象仪图形化库。

【云雀气象仪基础应用教程】第四课:气象数据可视化图9

STEP4:编写程序

【云雀气象仪基础应用教程】第四课:气象数据可视化图10

【云雀气象仪基础应用教程】第四课:气象数据可视化图11


【云雀气象仪基础应用教程】第四课:气象数据可视化图12

Tips:初始化MQTT积木中的服务器地址填写为“10.1.2.3”。

【云雀气象仪基础应用教程】第四课:气象数据可视化图13

可视化面板设计

第一步:新建项目

(1)点击Mind+上方的“可视化面板”按钮,开启“Mind+数据可视化”窗口。

【云雀气象仪基础应用教程】第四课:气象数据可视化图14

(2)将鼠标移至“新建项目”位置,选择并点击“新建空白项目”。

【云雀气象仪基础应用教程】第四课:气象数据可视化图15

【云雀气象仪基础应用教程】第四课:气象数据可视化图16

(3)在项目名称中输入“物联网气象显示器”,在描述中输入“气象数据可视化_行空板”。

【云雀气象仪基础应用教程】第四课:气象数据可视化图17

第二步:连接SIoT物联网平台

(1)项目创建后,自动回到项目管理界面,此时点击“编辑”按钮可对创建的项目进行编辑。

【云雀气象仪基础应用教程】第四课:气象数据可视化图18

(2)进入项目后,会要求我们连接SIoT物联网平台,在弹出的窗口界面中,修改服务器的IP地址为“10.1.2.3”,再点击完成按钮。

【云雀气象仪基础应用教程】第四课:气象数据可视化图19

【云雀气象仪基础应用教程】第四课:气象数据可视化图20

第三步:设计可视化界面

(1)观察熟悉界面

【云雀气象仪基础应用教程】第四课:气象数据可视化图21

(2)在设置栏中,调整布局,W为1920,H为1080(W为画布的宽,H对应高),主题设置选择“深色”,封面设置选择“自动生成”。

【云雀气象仪基础应用教程】第四课:气象数据可视化图22

(3)找到“组件栏--装饰组件”中的“文字”组件,拖入编辑区的上方,单击该“文字”组件,在“设置栏”调整其属性,如下。

【云雀气象仪基础应用教程】第四课:气象数据可视化图23

【云雀气象仪基础应用教程】第四课:气象数据可视化图24

(4)找到“组件栏--装饰组件”中的“时钟”组件,拖入编辑区的左上角,单击该“时钟”组件,在“设置栏”调整其属性,如下,组件宽度设置为192,组件高度设置为176,其余默认。

【云雀气象仪基础应用教程】第四课:气象数据可视化图25

(5)找到“组件栏--显示组件”中的“标签文字”组件,拖入时钟的下方,单击该“标签文字”组件,在“设置栏”调整其属性,如下,设置标题为“温度”,Topic选择“siot/温度数据”,组件大小选择“小”,标签描述为“”,标签单位为“℃”。

【云雀气象仪基础应用教程】第四课:气象数据可视化图26

(6)用同样的方法再拖入三个标签组件,分别对应湿度、气压、风速。其中,湿度标签组件的Topic选择“siot/湿度数据”,单位为“%”;气压标签组件的Topic选择“siot/气压数据”,单位为“hpa”;风速标签组件的Topic选择“siot/风速数据”,单位为“m/s”,效果如下。

【云雀气象仪基础应用教程】第四课:气象数据可视化图27

(7)找到“组件栏--显示组件”中的“单行文字”组件,拖入风速标签组件的下方,单击该“标签文字”组件,在“设置栏”调整其属性,如下,设置标题为“风向”,Topic选择“siot/风向数据”,组件宽度设置为126,其余默认。

【云雀气象仪基础应用教程】第四课:气象数据可视化图28

(8)找到“组件栏--图表组件”中的“折线图”组件,拖入标题“物联网气象显示器”的下方,单击该“折线图”组件,在“设置栏”调整其属性,如下,设置标题为“温度随时间的变化曲线”,Topic选择“siot/温度数据”,组件宽度设置为620,组件高度280,其余默认。

【云雀气象仪基础应用教程】第四课:气象数据可视化图29

(9)在右侧再拖入一个折线图,标题设置为“风速随时间的变化曲线”,Topic选择“siot/风速数据”,宽度620,高度280,单位为“m/s”。

【云雀气象仪基础应用教程】第四课:气象数据可视化图30

(10)找到“组件栏--显示组件”中的“进度仪表盘”组件,拖入折线图下方,单击该“仪表盘”组件,在“设置栏”调整其属性,如下,设置标题为“当前气压仪表图”,Topic选择“siot/气压数据”,组件宽度设置为400,组件高度260,单位hpa,最小值0,最大值1200,分段6。

【云雀气象仪基础应用教程】第四课:气象数据可视化图31

(11)找到“组件栏--显示组件”中的“水波图”组件,拖入仪表图右侧,单击该“水波图”组件,在“设置栏”调整其属性,如下,设置标题为“当前湿度水波图”,Topic选择“siot/湿度数据”,组件宽度设置为400,组件高度260。

【云雀气象仪基础应用教程】第四课:气象数据可视化图32

(12)找到“组件栏--装饰组件”中的“色块”组件,拖入水波图右侧,单击该“色块”组件,在“设置栏”调整其属性,如下,设置标题为“高温预警”,组件宽度设置为400,组件高度260,颜色为黑色。

【云雀气象仪基础应用教程】第四课:气象数据可视化图33

(13)找到“组件栏--基础组件”中的“自定义开关”组件,拖入色块内,单击该“自定义开关”组件,在“设置栏”调整其属性,如下,设置标题为“”,Topic选择“siot/高温预警”,隐藏底色,开的标志为1,关的标志为0,分别选择以下两张警报灯作为开关标志。

【云雀气象仪基础应用教程】第四课:气象数据可视化图34

(14)最后,综合调整各板块位置,点击右上角“全屏”按钮,查看初步布局效果。

【云雀气象仪基础应用教程】第四课:气象数据可视化图35

4、运行调试

STEP1:远程连接行空板并运行程序

STEP2:观察效果

观察全屏后的可视化面板,可以看到实时的温度、湿度、气压值一方面以数值的形式呈现在上方,与行空板屏幕同步,另一方面,数据的变化情况也以折线图等图表形式显示在了界面上。

【云雀气象仪基础应用教程】第四课:气象数据可视化图36


STEP3:导出项目

最后,退出全屏模式后,我们可以点击项目名称,将项目导出保存到本地。

【云雀气象仪基础应用教程】第四课:气象数据可视化图37

【云雀气象仪基础应用教程】第四课:气象数据可视化图38

知识园地

1、物联网

物联网(Internet of Things,简称IoT)是借助互联网、传统电信网等信息承载体,让所有能行使独立功能的普通物体实现互联互通的网络。通过物联网,我们可以用中心计算机将各种机器、设备连接起来,进行集中管理,实现物物相连。比如,将家中的灯、风扇、空调等电器连入物联网中后可以通过手机来控制它们开关。

【云雀气象仪基础应用教程】第四课:气象数据可视化图39

2、SIoT

SIoT是一个为教育定制的物联网系统,可以帮助中小学生理解物联网原理,并且能够基于物联网技术开发各种创意应用。

【云雀气象仪基础应用教程】第四课:气象数据可视化图40

3、数据可视化

数据可视化是将数据以图形、表格等视觉化的形式展示出来,旨在让数据更易于理解、分析和交流。常见的可视化类型有条形图、折线图、饼图热力图等,适用于不同的场景。

4、Mind+可视化面板

Mind+从1.8.0版本开始增加数据可视化面板,可以直观的呈现物联网数据。

在可视化面板中,一个项目包含多个小组件,小组件可以绑定topic,从而实现接收数据或者发送数据,整个项目可以指定一个数据源。

【云雀气象仪基础应用教程】第四课:气象数据可视化图41

Mind+可视化面板界面


项目拓展

试一试使用可视化面板的其他组件,进一步发挥创意,使得物联网气象显示器的效果更加亮眼直观吧。

附录

附录1:素材链接

链接:https://pan.baidu.com/s/1a105qDXBnkU8nzzymJtR2Q?pwd=8wxu

peterlhj  见习技师

发表于 2023-10-21 11:08:28

请问Siot V2提供类似v1的webapi吗?https://siot.readthedocs.io/zh_C ... nced/03_webapi.html
回复

使用道具 举报

木子呢  管理员
 楼主|

发表于 2023-10-23 13:44:53

peterlhj 发表于 2023-10-21 11:08
请问Siot V2提供类似v1的webapi吗?https://siot.readthedocs.io/zh_CN/latest/5.advanced/03_webapi.html ...

暂时没
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2024 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail