【PBL项目实战】户外智慧农场项目实战系列——6.文本与图片、背景云端响应

【PBL项目实战】户外智慧农场项目实战系列——6.文本与图片、背景云端响应

原文链接  https://mp.weixin.qq.com/s/eIozKfmCBo8Afp5QoorqWQ

本系列以户外智慧农场项目实战为项目式学习PBL案例，主要讲解ESP32主控板与阿里云物联网平台的通讯过程。当然，本文的使用方法理论上通用于所有ESP32主控，我们也开源了Mind+和米思齐Mixly双平台的阿里云物联网平台图形化库，以及工业级485变送器图形化库。大家可以在如下仓库找到：

Mixly阿里云物联网平台MQTT图形化库：

https://gitee.com/LNSFAIoT/Mixly-Alibaba-Cloud-IoT-Platform-MQTT-graphical-library.git

Mind+阿里云物联网平台JSON解析图形化库：

https://gitee.com/LNSFAIoT/Mindplus-Alibaba-Cloud-IoT-Platform-JSON-parsing-graphical-library.git

Mind+多合一空气质量传感器（RS485）图形化库：

https://gitee.com/LNSFAIoT/mindplus-all-in-one-air-quality-sensor.git

Mind+多合一土壤传感器（RS485）图形化库：

https://gitee.com/LNSFAIoT/mindplus-all-in-one-soil-sensor.git

Mind+多合一气象传感器（RS485）图形化库：

https://gitee.com/LNSFAIoT/mindplus-all-in-one-weather-sensor.git

Mind+Mixly双平台ESP32 LED点阵大屏图形化库：

https://gitee.com/LNSFAIoT/Mindplus-Mixly-ESP32-LED-matrix-large-screen-graphical-library.git

其他开源系列请见

https://gitee.com/LNSFAIoT

本系列将会有：

1、【PBL项目实战】户外智慧农场项目实战系列——阿里云物联网平台的开通与云端可视化应用的新建

2、【PBL项目实战】户外智慧农场项目实战系列——产品与设备的新建及与云端可视化应用的关联

3、【PBL项目实战】户外智慧农场项目实战系列——云端应用可视化页面开发及设备数据源的配置与调试

4、【PBL项目实战】户外智慧农场项目实战系列——Mind+Mixly双平台ESP32数据上云及云端可视化实时展示

5、【PBL项目实战】户外智慧农场项目实战系列——天气预报API接口对接

6、【PBL项目实战】户外智慧农场项目实战系列——文本与图片、背景云端响应

https://mp.weixin.qq.com/s/eIozKfmCBo8Afp5QoorqWQ

7、【PBL项目实战】户外智慧农场项目实战系列——Mind+Mixly双平台RS485工业级多合一空气质量传感器数据上云及云端可视化实时展示

8、【PBL项目实战】户外智慧农场项目实战系列——Mind+Mixly双平台RS485工业级多合一土质检测传感器数据上云及云端可视化实时展示

9、【PBL项目实战】户外智慧农场项目实战系列——Mind+Mixly双平台RS485工业级多合一气象传感器数据上云及云端可视化实时展示

10、【PBL项目实战】户外智慧农场项目实战系列——植物园花果识别与云端实时同步

11、【PBL项目实战】户外智慧农场项目实战系列——云端视频流直播

12、【PBL项目实战】户外智慧农场项目实战系列——图表、二维数据表等可视化应用

13、【PBL项目实战】户外智慧农场项目实战系列——Mind+Mixly双平台LED屏本地大屏显示

在我们官方的可视化页面，可从网址 http://nanyaoweb.lnsfaiot.top 进入。在我们的页面展示中可以直观的看到不同图片、背景以及文字的不同响应效果，如图1所示。

图1 官方页面展示效果

官方使用文档

阿里云物联网平台的组件众多且功能强大，我们也只是为常用的组件功能提供了一个详细的图文教程，当然首先要推荐的是大家要学会看官方的资料库：

https://help.aliyun.com/document_detail/150676.html

首页>物联网应用开发>Web可视化开发>组件>基础组件

1.文本

阿里云物联网平台的IoT Studio支持创建不同数据类型的自定义属性，数据类型分别有整数、单精度浮点、双精度浮点、枚举、布尔、字符串、时间、结构体以及数组，如图2所示。

图2 阿里云功能属性的数据类型

阿里云平台对于【文字】组件的介绍可通过以下网址查看：

https://help.aliyun.com/document_detail/154672.html

首页>物联网应用开发>Web可视化开发>组件>基础组件>文字

首先先在产品下创建自定义属性，注意该属性的数据类型选择下拉列表中的文本（text），创建的内容如图3所示。

图3 创建text数据类型的功能属性

成功添加页面如图4所示。

图4 成功添加【天气小贴士】功能属性

每一次编辑【功能属性】后都需要重新【发布物理型上线】，如图5所示。

图5 发布物理型上线

成功发布上线界面如图6所示，功能属性列表已新增【天气小贴士】。

图6 成功发布界面

进入应用开发主页（可从https://studio.iot.aliyun.com 进入），开始对文本组件进行配置。

选择自己需要配置的应用进行编辑，这里选择【阿里云物联网平台测试案例】Web应用进行编辑，如图7所示。

图7 返回Web应用编辑页面的参考步骤

【文字】组件的选择和配置的过程如图8所示。

图8 选择【文字】组件

这里主要介绍对文本内容进行配置。对文本组件内容的配置分为两种，分别是动态配置和静态配置。

1动态配置

指文本的内容随着设备上报的参数改变而改变。

这个改变的内容可以是设备直接上报的数值也可以是随着参数的改变而显示不同内容

2静态配置

指文本的内容是固定不变的，无需配置设备参数，直接输入文本内容即可。

图9【文字】组件的样式配置

更多的配置内容可点击图10的组件样式右下角的蓝色字体，前往阿里云官方帮助文档查看详细介绍。

图10 官方帮助文档的快捷入口

在这里主要讲解通过ESP32主控直接上报text数据类型的内容进行网页可视化展示的过程。

点击如图11所示红色箭头指向的蓝色配置图标（形如饼堆积状）进行动态配置（静态配置直接在文本内容对应的输入框内输入相应的内容即可）。

图11 组件绑定数据源

配置完成后，可以看到组件需要进行一次【在线调试】用来校验数据，具体调试方法及过程在本系列文档中已详细介绍，可前往“【PBL项目实战】户外智慧农场项目实战系列——3.云端可视化页面开发及设备数据源的配置与调试”查看。

调试的方式可以分为两种，分别是【在线调试】和【设备模拟】。在前面文章中已介绍了通过【设备模拟器】进行设备调试，本文将介绍另一种方式，即【在线调试】。

在线调试需要设备联网上线，所以我们将先介绍代码，再讲解调试结果。

图12 组件报错

从图13可以看到组件未调试或调试不通过，其报错的信息会在Web应用编辑页面的右上角【Debug】（图标类似昆虫状）和组件样式配置的地方会有详细的报信息供查看。

图13 组件报错的详细信息查看处

接下来进行代码编写。

Mind+

网络WiFi的初始化和连接阿里云平台的MQTT协议初始化，这里给出完整初始化代码，如图14所示。

具体代码介绍在本系列的“【PBL项目实战】户外智慧农场项目实战系列——4.ESP32E数据上云及云端可视化实时展示”中已详细说明可前往查看。

图14 WiFi与MQTT协议初始化

需要显示的天气小贴士的内容可以多条随机上报，可通过Mind+所支持的【变量】下的【列表】将多个字符串内容存储在一个列表里。

新建【列表】的过程如图15所示。

图15 新建列表

声明全局【列表】变量来存储所需要显示的文本内容，也就是【循环执行】积木外通过【小贴士】列表中添加列表元素的积木进行初始化即可，如图16红色框的内容所示。

图16 初始化列表内容

成功新建列表后，接下来我们需要将列表的内容通过MQTT协议随机上报至阿里云IoT Studio，在Web页面上进行实时显示。

使用阿里云MQTT协议上报需要遵循固定的阿里云JSON格式，关于如何导入【阿里云物联网平台JSON解析】第三方库以及阿里云数据上报的代码逻辑编写已在本系列中的“【PBL项目实战】户外智慧农场项目实战系列——4.ESP32E数据上云及云端可视化实时展示”详细讲解，可前往查看。

选择用户库【LNSFAIoT:阿里云物联网平台JSON解析】如图17所示。

图17 JSON解析库的导入

通过MQTT发送消息的积木将列表里面的内容随机上报，随机上报在编写代码时需要注意几点：

1、在选择列表的项目时第一位列表的内容对应代码填写1。

2、随机的范围是从1开始到最大的项目数结束，这样可以保证列表里面各项的内容均可被遍历查询到。 

Mind+上报文字的图形化代码编写过程如图18所示。

图18 Mind+上报文字的图形化代码编写过程

完整代码如图19所示。

图19 Mind+上报文字的完整代码

完整代码可前往文末下载。

Mixly

Mixly软件平台的网络WiFi的初始化和连接阿里云平台的MQTT协议初始化，这里给出完整初始化代码。关于导入【岭师人工智能素养教育共同体】库文件的过程以及具体代码介绍在本系列的“【PBL项目实战】户外智慧农场项目实战系列——4.ESP32E数据上云及云端可视化实时展示”中已详细说明，可前往查看。

导入【岭师人工智能素养教育共同体】的库文件，如图20所示。

图20 导入【岭师人工智能素养教育共同体】

初始化WIFI和阿里云，如图21所示。

图21 WiFi与的MQTT协议初始化

初始化字符串数组，如图22所示。

图22 初始化字符串列表内容

阿里云上报文本数据的代码编写如图23所示。

图23 阿里云上报语句的编写过程

完整代码如图24所示。

图24 Mixly上报文字的完整代码

完整代码可前往文末下载。

前面提到的关于组件的【在线调试】的做法就是将上述代码烧录下载到主控板后，成功连接上网络后将数据上报，当阿里云收到正确格式的数据后，会自动解析并在Web应用页面更新数据。组件调试成功界面如图25所示。

图25 组件调试成功界面

除此之外，文本还可以设置成滚动字体的个性化方式，选择【基础组件】下的【跑马灯】以及组件配置数据源的过程如图26所示。

图26 滚动字体的数据源配置

【跑马灯】个性化样式的配置如图27所示。

图27 【跑马灯】个性化样式界面

最终效果展示图如图28所示。

图28 最终效果展示图

2.图片

在Web应用编辑界面中。选择【图片】组件进行配置，使得图片随着设备上报内容的不同从而进行切换。

同样地，配置【图片】组件需要在配置之前新建一个功能属性，其数据类型为text，用于上报图片的URL地址。

简单了解一下URL地址：

URL地址

Uniform Resource Locator，统一资源定位符。俗称网页地址，简称网址，是Internet上用来描述信息资源地址（Address）的字符串，如同在网络上的门牌，一个完整的URL包括协议部分、网址、文件地址部分。

从概念出发我们可以得知图片的URL地址代表该图片在网络中有自己独一无二的地址，通过这个地址可利用直接找到该图片。

接下来创建图片URL的功能属性如图29所示，详细自定义功能的配置内容如图30所示。

图29 新建【图片】的功能属性

图30 自定义功能配置的详细内容

返回到Web应用编辑界面。选择组件【图片】，图片组件与新建的图片功能属性相关联的过程如图31所示。

图31 【图片】组件的选择和数据源配置

完成配置后，接下来进行在线调试。之所以建议使用在线调试，是因为需要先排除数据内容上报是否报错，格式是否正确问题。排查后，在编写代码上传，当遇到问题，无法上传成功时，可以直接定位到代码排查。

直接上传图片是无法上传的，阿里云支持的数据格式不包含特殊的格式如图片、视频等，所以我们只需要将图片的URL地址上传即可。 

网上有大量优质的在线免费图床，可以直接将图片转为URL地址。

注意：在这里本文仅提供一个参考的免费图床整理网址，操作使用该网址时需要注意维护自身财产与隐私等安全，所造成的损失本团队概不负责。

通过在线上传图片至图床，在页面的下方获取图片的URL地址，如图32所示。

图32 获取URL地址

【图片】组件在线调试成功的界面如图33所示。

图33【图片】组件调试成功界面

Mind+

初始化新列表【背景图片】，本例的列表初始化了四张图片的URL地址，上报阿里云的积木在上报文本（本文章第一步介绍的内容）的基础同时上报图片URL，代码编写的过程如图34所示。

图34 初始化列表与阿里云上报的代码编写过程

图片URL的上报与小贴士的文本上报一样，采用随机上报列表内容的方式进行展示，其图形化积木如图35所示。

图35 随机上报文字和图片的图形化积木

完整代码如图36所示。

图36 Mind+完整代码

完整代码可前往文末下载。

Mixly

初始化字符串【photo】数组用于存放图片的URL地址，如图37所示。

图37 初始化字符串数组的内容

阿里云上报图片URL地址数据的代码编写过程如图38所示。

图38 阿里云上报图片URL地址

阿里云同时上报图片URL地址和小贴士的文本数据，需要使用阿里云JSON格式的多参数合并上报，其代码编写的格式如图39所示。

图39 JSON多参数上报的图形化代码

图片URL的上报与小贴士的文本上报均采用随机上报列表内容的方式进行展示，其图形化积木如图40所示。

图40 随机上报文字和图片的图形化积木编写

完整代码如图41所示。

图41 Mixly完整代码

完整代码可前往文末下载。

上传代码，等待连接上WiFi和阿里云（Mind+ & Mixly均可通过打开串口0串口查看WiFi和阿里云MQTT是否初始化成功），如图42所示，可以看到Web应用页面上的图片和文本两个组件的变化显示。

图42 Web应用页面的文字和图片显示

3.背景

页面的背景修改

点击空白画布，点击右侧【背景图像】下的【上传图片】按钮。

图43 修改背景图片

在弹出的弹窗中点击【上传图片】，可以从本地上传图片，也可以直接在已有的不同分类模板图片中任意选择一张，这里选择从本地上传图片。

图44 上传背景图片

点击【上传图片】，选择本地图片，【标签】列表可以任意选择，不同种类的标签，这里选择【通用】。

图45 上传图片素材弹窗

上传成功后，选择刚刚上传的图片点击【确定】即可应用。

图46 应用上传的背景图片素材

背景图片成功修改，如图47所示。

图47 成功修改背景图片

背景云端响应

如果需要背景图具备云端响应的效果，这按照本文的步骤二【图片】进行配置。配置完成后，将图片拉伸至与编辑页面同高等宽，再右击将其置于最底层即可，如图48所示。

图48 背景图片底层显示

预览

点击右上角眼睛状的按钮进行移动应用预览。

图49 预览按钮

预览效果如图50所示。

图50 电脑网页预览效果

以上就完成了基于ESP32E的文本、图片与背景云端响应的过程。

通过直接拖拽组件进行配置，将应用展示页面设计得更加美观，轻松完成软件前端与后端的对接和配置，是不是简单方便呢？如果您期待更多的网页组件的使用以及配置，别走开！敬请期待下一篇!

完整测试代码可前往【人工智能素养教育共同体】的官方gitee网站下载：

Mind+Mixly双平台ESP32文本与背景以及图片云端响应

https://gitee.com/LNSFAIoT/Mindplus-Mixly-ESP32-text-and-background-and-image-cloud-responsive

THE   END

关注我们

       更多精彩内容请关注我们的微信公众号：  人工智能素养教育共同体，欢迎添加我们的企业微信，加入智慧农场项目学习群。 

        更多PBL开源项目请前往微信公众号查看。

本文原创，转载请注明出处！

觉得内容还不错的话，欢迎一键三连支持原创。