查看: 1989|回复: 2

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

气象数据可视化

教程目录：

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

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

任务目标

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

知识目标

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

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

材料清单

硬件清单：

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

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

Mind+的链接如下：

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

动手实践

1、硬件连接

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

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

2、SIoT服务启动

STEP1：开启SIoT应用

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

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

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

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

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

3、软件编写

程序编写

STEP1：创建与保存项目文件

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

STEP2：导入素材图片

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

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

STEP3：加载扩展库

（1）点击左下角的“扩展库”；

（2）在官方库中加载“行空板”、“MQTT-py”；

（3）在pinpong库中加载“pinpong初始化”；

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

STEP4：编写程序

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

可视化面板设计

第一步：新建项目

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

（2）将鼠标移至“新建项目”位置，选择并点击“新建空白项目”。

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

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

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

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

第三步：设计可视化界面

（1）观察熟悉界面

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

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

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

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

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

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

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

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

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

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

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

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

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

4、运行调试

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

STEP2：观察效果

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

STEP3：导出项目

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

知识园地

1、物联网

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

2、SIoT

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

3、数据可视化

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

4、Mind+可视化面板

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

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