上一章 【ESP8266-01】MQTT连接百度云(天工物接入)

ESP8266-01 MQTT连接百度云-进阶(物可视)

前言

前边我们讲了MQTT连接百度云了,也学会了如何上传数据,那么我们要玩一些更高大上的,让这些数据用模型替代出来,同时看起来也更加的美观,就像下图所示。


好了,本章节我们就来学习如何让数据可视化起来。

1.创建工程

1.1 打开“物联网数据可视化”

esp32 lvgl 可视化调试_stm32

1.2 创建工作区

esp32 lvgl 可视化调试_esp32 lvgl 可视化调试_02


工作区的名称自行命名;我这里命名为“hello”;

1.3 创建仪表盘

esp32 lvgl 可视化调试_嵌入式硬件_03


为仪表盘命名,下边有多个模板可以选择,像前边那么高大上的可以直接选择模板,这里演示选择空白模板,方便大家学习。

esp32 lvgl 可视化调试_esp32 lvgl 可视化调试_04

1.4 工作区

在上边操作完成之后,我们就能看到下面的区域。

esp32 lvgl 可视化调试_嵌入式硬件_05


左侧区域的模型或者元件可以直接拖放到画面显示区域,右侧进行参数配置,我们模型的数据绑定也在右侧进行,我们后边再讲。

2.创建我们的第一个模型

2.1放置一个按钮

如图所示,放置一个仪表盘。

esp32 lvgl 可视化调试_单片机_06

2.2对按钮进行参数设置

单击刚才放置的仪表盘,右侧是不是又如图所示的属性,

esp32 lvgl 可视化调试_stm32_07


在这里边,我们可以给仪表命名,可以修改颜色,可以修改范围、角度等信息。

比如我们要将仪表名字改为“室内温度”,范围改为-20~60℃,我们就可以按照下图操作

esp32 lvgl 可视化调试_esp32 lvgl 可视化调试_08


esp32 lvgl 可视化调试_经验分享_09


最终的效果就如图所示

esp32 lvgl 可视化调试_stm32_10

3 .为仪表绑定数据

仪表创建好了,那么怎么样让他动起来呢,我们就需要为他绑定我们上传的数据,具体怎样操作呢,下边我们来详细介绍。

3.1 选择数据绑定

我们单击仪表盘,在右侧可以看到如图所示的参数,我们可以给这么多信息绑定数据,但是要想让他动起来,怎样搞呢

esp32 lvgl 可视化调试_嵌入式硬件_11

3.2 选择数据源

单击指标值后边的类似与链接的按钮

esp32 lvgl 可视化调试_经验分享_12


我们选择数据表,出现了“无匹配结果”,这是为啥呢,哎,因为我们没有选择物影子,不知道匹配谁去,那怎么搞呢?

在刚才页面的顶部,我们选择数据

esp32 lvgl 可视化调试_经验分享_13


在新建的页面里选择“新建”

esp32 lvgl 可视化调试_单片机_14


新建完成后,我们为我们的数据选择参数

esp32 lvgl 可视化调试_stm32_15

名称:随意命名
类型:选择“设备影子”
区域:如果你设备影子选的北京就选北京,如果选的广州,那么这里也要选广州
物影子列表:选择自己创建的物影子,可查看上一章

esp32 lvgl 可视化调试_经验分享_16

就如图所示,点击“下一步”

esp32 lvgl 可视化调试_单片机_17


这里一定要勾选上你的属性,要不然没法用。点击“确定”

esp32 lvgl 可视化调试_stm32_18


可以看到数据表已经创建好了。

再返回画布那里选择数据绑定

esp32 lvgl 可视化调试_嵌入式硬件_19


是不是我们刚刚创建的数据表已经显示出来了,剩下的咱们开始走起

esp32 lvgl 可视化调试_嵌入式硬件_20


我们选择数据表,选择完成后,我直接讲beep_time属性当温度值使了。读者可以依据自身情况选择。点击“运行”,然后“确定”,是不是发现仪表盘的指针变化了。

esp32 lvgl 可视化调试_stm32_21


这个完成后,算是已经创建好了

4.发布和分享

我们返回仪表盘,我们看到下边又几个按钮,分别是发布、分享啥的,

esp32 lvgl 可视化调试_经验分享_22

4.1 发布

我们点击发布,会有下边的窗口,如果需要加密,那就勾选,如果不需要,直接点击确认发布

esp32 lvgl 可视化调试_esp32 lvgl 可视化调试_23

4.2 分享

点击分享,我们能看到如图所示的链接,这个链接我们用任意的浏览器就能显示。

esp32 lvgl 可视化调试_单片机_24


esp32 lvgl 可视化调试_经验分享_25


我们用esp8266或者MQTTx发送json信息,更改beep_time的值,我们的仪表盘也能跟着动起来了。

完毕