【云雀气象仪基础应用教程】第四课：气象数据可视化
气象数据可视化教程目录：[*]第一课、气象数据实时观测
[*]第二课：气象数据采集与存储
[*]第三课：气象数据预警
[*]第四课：气象数据可视化
[*]第五课：高尔夫助手
[*]第六课：露营小助手
[*]第七课：物联网校园气象站系统
[*]第八课：机器视觉天气情况探测
在上个项目中，我们制作了一个气象数据预警装置，将获取到的气象数据实时显示在了行空板的屏幕上，并在气候不佳时进行预警提醒。然而，行空板的屏幕尺寸有限，并且只是以数值形式呈现数据，不够美观。那么，有什么办法能让我们更直观得查看气象数据，及其变化情况呢？
让我们使用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，从而实现接收数据或者发送数据，整个项目可以指定一个数据源。
Mind+可视化面板界面
项目拓展
试一试使用可视化面板的其他组件，进一步发挥创意，使得物联网气象显示器的效果更加亮眼直观吧。
附录
附录1：素材链接
链接：https://pan.baidu.com/s/1a105qDXBnkU8nzzymJtR2Q?pwd=8wxu
请问Siot V2提供类似v1的webapi吗？https://siot.readthedocs.io/zh_CN/latest/5.advanced/03_webapi.html peterlhj 发表于 2023-10-21 11:08
请问Siot V2提供类似v1的webapi吗？https://siot.readthedocs.io/zh_CN/latest/5.advanced/03_webapi.html ...
暂时没
页:
[1]