【PBL項目實戰】戶外智慧農場項目實戰系列之4——Mind+Mixly雙平臺ESP32數據上云及云端可視化實時展示

原文鏈接? https://mp.weixin.qq.com/s/r_NeJdPoio9IVselx6Ru1Q

? ? ? ?本系列以戶外智慧農場項目實戰為項目式學習PBL案例，主要講解ESP32主控板與阿里云物聯網平臺的通訊過程。當然，本文的使用方法理論上通用于所有ESP32主控，我們也開源了Mind+和米思齊Mixly雙平臺的阿里云物聯網平臺圖形化庫。大家可以在如下倉庫找到：

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項目實戰】戶外智慧農場項目實戰系列——阿里云物聯網平臺的開通與云端可視化應用的新建

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

2、【PBL項目實戰】戶外智慧農場項目實戰系列——產品與設備的新建及與云端可視化應用的關聯

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

3、【PBL項目實戰】戶外智慧農場項目實戰系列——云端應用可視化頁面開發及設備數據源的配置與調試

https://mp.weixin.qq.com/s/5OT57-_QlN7lwRMWvey4lw

4、【PBL項目實戰】戶外智慧農場項目實戰系列——Mind+Mixly雙平臺ESP32數據上云及云端可視化實時展示

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

5、【PBL項目實戰】戶外智慧農場項目實戰系列——天氣預報API接口對接

https://mp.weixin.qq.com/s/jditkIEd-UK6cSQyCC_-Eg

6、【PBL項目實戰】戶外智慧農場項目實戰系列——文本與圖片、背景云端響應

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

7、【PBL項目實戰】戶外智慧農場項目實戰系列——Mind+Mixly雙平臺RS485工業級多合一空氣質量傳感器數據上云及云端可視化實時展示

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

8、【PBL項目實戰】戶外智慧農場項目實戰系列——Mind+Mixly雙平臺RS485工業級多合一土質檢測傳感器數據上云及云端可視化實時展示

9、【PBL項目實戰】戶外智慧農場項目實戰系列——Mind+Mixly雙平臺RS485工業級多合一氣象傳感器數據上云及云端可視化實時展示

10、【PBL項目實戰】戶外智慧農場項目實戰系列——植物園花果識別與云端實時同步

11、【PBL項目實戰】戶外智慧農場項目實戰系列——云端視頻流直播

12、【PBL項目實戰】戶外智慧農場項目實戰系列——圖表、二維數據表等可視化應用

13、【PBL項目實戰】戶外智慧農場項目實戰系列——Mind+Mixly雙平臺LED屏本地大屏顯示實現

---

? ? ? ?本系列以樂鑫目前主推的ESP32E主控為例，ESP32E同時支持Mind+和Mixly雙平臺圖形化編程，并且價格低廉，是入門物聯網學習的絕佳硬件平臺之一。

? ? ? ?本文章測試所用主控板為：https://item.taobao.com/item.htm?ft=t&id=677654692365

? ? ? ?其他ESP32E主控板暫未測試。另請注意ESP32其他系列主控與ESP32E并不兼容，不保證其他主控適配本測試代碼。

? ? ? ?Mind+選擇【Firebeetle ESP32-E】主控，如圖1所示。

圖1 Mind+主控選擇Firebeetle ESP32-E

? ? ? ?Mixly選擇【Arduino ESP32]系列后，選擇頁面右上角的【ESP32 Dev Module】板卡，如圖2所示。

圖2 Mixly主控選擇Arduino ESP32

程序詳解

1.導入庫

選擇Mind+擴展功能

? ? ? ?在Mind+上傳模式下，點擊代碼編輯頁面的左下角【擴展】按鈕。

圖3 Mind+上傳模式界面

? ? ? ?在【網絡服務】下點擊【MQTT】和【Wi-Fi】。

圖4 網絡服務選擇MQTT和Wi-Fi

Mixly導入我們提供的阿里云物聯網平臺MQTT圖形化庫

? ? ? ?注意，我們的庫目前需要從本文最上方的gitee鏈接下載并手動導入，目前開放了本案例需要用的WiFi和阿里云MQTT庫。其他的庫也會隨著本系列的連載陸續開源的，有需要合作使用的可以聯系我們。

? ? ? ?打開Mixly編輯界面左上角的【設置】，點擊【管理庫】。

圖5 點擊【管理庫】

? ? ? ?選擇【庫管理器】的【導入庫】，選擇彈窗的右上角的【本地導入】（即紅色箭頭指向的紅色框處），導入上一步下載好的庫文件中的【?LNSFAIoT_MQTT_Mixly.xml?】文件即可，如圖6所示。

圖6 本地導入庫文件

? ? ? ?從左側導入的庫文件列表可以看到已經有【嶺師人工智能素養教育共同體】的庫文件，其下有多種不同類型的積木，從其中任意拖拽出積木至畫布中，如圖7所示可以看到右側的代碼區有代碼生成，即導入成功。

圖7 成功導入庫文件

2.初始化WiFi

? ? ? ?ESP32與阿里云物聯網平臺的數據交互通常是基于MQTT協議進行通訊的。而MQTT協議是基于WiFi網絡的數據傳輸協議。所以在程序初始化在最開始，我們需要設置好要連接的WiFi信息（務必注意的是主流的ESP32系列目前只兼容2.4GHz的WiFi網絡）。

Mind+

? ? ? ?從Mind+編輯界面左側的【網絡服務】中找到【Wi-Fi】，然后選中所需的積木將其拖拽至畫布中。WiFi初始化代積木的編寫如圖8所示，在Wi-Fi第一句初始化中需要填入自己的熱點的名稱和密碼。

? ? ? ?注意：熱點需要是2.4G的，且熱點名和密碼不能含有中文和特殊符號，否則無法連接上。

圖8 Mind+ WiFi初始化代碼

Mixly

? ? ? ?從Mixly編輯界面左側的【嶺師人工智能素養教育共同體】中找到【物聯網平臺】下的【WiFi】，然后選中所需的積木將其拖拽至畫布中。

? ? ? ?同樣需要填好自己熱點的名稱和密碼，WiFi積木的編寫如圖9的紅色框5所示。

圖9 Mixly WiFi初始化代碼

3.初始化MQTT

（1）獲取三元組

? ? ? ?初始化阿里云MQTT的三元組（ProductKey、DeviceName、DeviceSecret）需要在阿里云IoT Studio平臺上獲取。

Mind+

? ? ? ?從Mind+編輯界面左側的【網絡服務】中找到【MQTT】，然后選中所需的積木將其拖拽至畫布中，Mind+的MQTT初始化代碼編寫如圖10所示。

圖10 Mind+ MQTT初始化

Mixly

? ? ? ?從Mixly編輯界面左側的【嶺師人工智能素養教育共同體】庫中找到【物聯網平臺】下的【阿里云】，然后選中第一個阿里云初始化積木將其拖拽至WiFi下拼接。MQTT積木的編寫如圖11的紅色框5所示。

?圖11? Mixly初始化阿里云三元組

? ? ? ?如圖12所示，找到【設備列表】頁面（可從https://studio.iot.aliyun.com/projects?選擇您需要綁定的項目進入），本例程選擇lnsfaiot_farm項目。

圖12 項目管理界面

? ? ? ?進入項目后，可以通過左側點擊【設備】找到【設備列表】，從設備列表中點擊該設備記錄中最右側的【查看】（藍色字樣），如圖13所示箭頭指向的紅色方框。

圖13 設備管理頁面

? ? ? ?點擊查看【DeviceSecret】，如圖14所示箭頭指向的紅色方框。

圖14 查看三元組

? ? ? ?將獲取的三元組分別復制、粘貼按照對應關系填入初始化MQTT積木的參數ProductKey、DeviceName、DeviceSecret輸入框中。

? ? ? ?注意：三元組的各個屬性需要與阿里云初始化積木中的屬性內容一致！

Mind+

? ? ? ?Mind+的初始化積木與平臺上的設備證書之間的對應關系如圖15所示。

圖15 Mind+三元組對應關系

? ? ? ?MQTT始化代積木的編寫如圖16所示，在MQTT第一句初始化中【物聯網平臺】下拉列表選中【阿里云】，參數中【服務器地址】不需要修改，三元組（ProductKey、DeviceName、DeviceSecret）需要填入圖15中復制的三元組數據。

? ? ? ?注意：不要有多余的空格和字符，注意檢查。

圖16 Mind+三元組

Mixly

? ? ? ?Mixly的初始化積木與平臺上的設備證書之間的對應關系如圖17所示。

圖17 Mixly三元組對應關系

? ? ? ?MQTT始化代積木的編寫如圖18所示，在MQTT初始化中三元組（ProductKey、DeviceName、DeviceSecret）需要填入圖17中復制的三元組數據。

圖18 Mixly三元組

（2）Topic 信息

? ? ? ?初始化MQTT的Topic列表同樣需要在阿里云IoT Studio平臺上獲取。

? ? ? ?找到【產品】頁面（可從圖12所標注的方式進入），通過左側點擊【產品】找到【產品列表】，從產品列表中點擊指定產品記錄中最右側的【查看】（藍色字樣），如圖19所示箭頭指向的紅色方框。

圖19 產品頁面

? ? ? ?在【產品詳情】頁中，點擊【Topic 類列表】查看，如圖20中的紅色框1、2所示。

? ? ? ?本范例的Mind+MQTT初始化阿里云平臺的Topic積木只需要使用物模型通信Topic。其中【設備上報數據至云端】選擇描述是【設備屬性上報】的語句，而【云端響應動作下發至設備】選擇描述是【設備屬性設置】語句。如圖20紅色框3、4所示，本范例選擇設備屬性上報。

圖20 獲取Topics

? ? ? ?這里我們使用【/sys/hj06uL7wcD6/${deviceName}/thing/event/property/post】Topic語句作為訂閱Topic。

? ? ? ?其中${deviceName}需要修改為步驟（1）所獲取的三元組中的設備名，即DeviceName，所以修改后的訂閱Topic應為【/sys/hj06uL7wcD6/farm/thing/event/property/post】，不修改則無法進行上報或設置。

Mind+

? ? ? ?Mind+的MQTT初始化參數積木中需要初始Topic_0，將上面由圖20獲得的訂閱Topic填入如圖21紅色框位置。

圖21 Mind+填寫Topic_0

Mixly

? ? ? ?Mixly的MQTT初始化參數積木中需要初始主題Topic，將上面由圖20獲得的訂閱Topic填入下圖22紅色框中的Topic_0位置。

圖22 Mixly填寫Topic_0

4.數據上云

（1）導入第三方用戶庫

? ? ? ?上報至阿里云的參數包裝成阿里云JSON格式，網上有些JSON格式的積木僅支持單參數上報，而我們自己基于? ? ? ?mind+官方支持的阿里云物聯網平臺MQTT功能編寫的阿里云物聯網平臺JSON解析圖形化庫，支持多參數并發上報以及數據下發，支持Mind+和Mixly雙平臺圖形化編程。

? ? ? ?阿里云物聯網平臺JSON解析圖形化庫目前已開發，可前往gitee進行下載，文章開頭有相應的下載地址。

Mind+

? ? ? ?在Mind+【擴展】中的【用戶庫】進行阿里云物聯網平臺JSON解析積木的導入有2種方式：

• 方法1?

? ? ? ?利用gitee網址復制在Mind+用戶庫搜索欄中進行在線下載。

? ? ? ?阿里云物聯網平臺JSON解析：? ? ? ?https://gitee.com/LNSFAIoT/Mindplus-Alibaba-Cloud-IoT-Platform-JSON-parsing-graphical-library.git

圖23 在線下載

• 方法2

? ? ? ?選擇直接下載可導入文件.mpext?文件，直接外部導入?。

? ? ? ?阿里云物聯網平臺JSON解析：

? ? ? ??lnsfaiot-aliyunjson-thirdex-V0.0.2.mpext

圖24 本地導入

? ? ? ?導入成功界面如圖25所示。

圖25 成功導入用戶庫

（2）編寫圖形化代碼

Mind+

? ? ? ?從Mind+編輯界面左側的【網絡服務】中找到【MQTT】，然后選中【MQTT發送消息】的積木將其拖拽至畫布中并放置在循環中，如圖26所示。

圖26?拖拽MQTT發送消息的積木

? ? ? ?從Mind+編輯界面左側的【用戶庫】中找到【LNSFAloT:阿里云物聯網平臺JSON解析】，然后選中【用戶標識】和【鍵值對】積木將其拖拽至【MQTT發送消息】的橢圓輸入框中，代碼編寫如圖27所示。

? ? ? ?每30分鐘循環發送阿里云json鍵值對至Topic_0作為上報云端的訂閱信息，其中鍵值對中的標識符為【temperature】，值為多合一空氣質量傳感器所采集的空氣溫度實時參數值。

? ? ? ?注意：每條上報至阿里云云端的消息間隔均不能低于30秒~30分鐘，否則會被阿里云封號限制使用。

圖27?Mind+上報空氣溫度代碼

Mixly

? ? ? ?從Mixly編輯界面左側的【嶺師人工智能素養教育共同體】庫中找到【物聯網平臺】下的【阿里云】，然后選中【Aliyun上報】的積木將其拖拽至畫布中，如圖28所示。

? ? ? ?注意：只要將積木直接拖拽放置在Mixly的編輯頁面即有效，且不同積木放置的高低也會影響其代碼生成的先后順序。

圖28【?Aliyun上報】積木

? ? ? ?MQTT發送消息的圖形化代碼編寫如圖29所示。

圖29?Mixly上報空氣溫度代碼

? ? ? ?為了便于判斷初始化是否成功，可以在WiFi和MQTT循環判斷是否已連接的積木后分別加上Eirebeetle ESP32E的串口0打印語句。

? ? ? ?注意：

? ? ?? ? ? ??1.需要將ESP32E通過燒錄線連接在電腦上才能通過串口0打印消息。

? ? ?? ? ? ? ?2.使用串口0打印。首先需要對ESP32E的串口0進行波特率的初始化，默認是9600。

Mind+

? ? ? ?Mind+完整代碼如圖30所示。

圖30?Mind+完整代碼

? ? ? ?注意：串口0波特率默認是9600。如果需要設置成其他波特率，對應代碼中需要顯示添加串口0的初始化語句，并且點擊右下角設置一下黑窗口，否則會輸出亂碼。設置黑窗口（串口0）的波特率如圖31所示。

圖31?修改Mind+串口0窗口波特率

? ? ? ?如圖32所示，成功下載程序至ESP32E主控后，點擊黑窗口左下角的連接按鈕后串口0（黑窗口）會成功打印出"WiFi初始化成功！"和"MQTT初始化成功！"，證明初始化成功，若哪一句沒有成功打印，需要返回去檢查該段代碼。

圖32 Mind+串口0成功初始化

Mixly

? ? ? ?Mixly完整代碼如圖33所示。

圖33?Mixly完整代碼

? ? ? ?在代碼燒錄成功后，會自動打開下方的串口0窗口，可以看到初始化成功后自動打印的消息（也可以通過點擊Mixly編輯界面右上角的第一個按鈕打開），如圖34所示。

圖34?Mixly串口0成功初始化

? ? ? ?完整的測試代碼可前往文末下載。

5.判斷上報的消息

? ? ? ?前往https://iot.console.aliyun.com/lk/monitor/log打開日志服務查看設備上報的消息。

圖35?打開日志服務

? ? ? ?查看設備獲取的參數，找到業務類型是【設備到云消息】，點擊【查看】。?

圖36?找到設備上云的消息

? ? ? ?從彈窗中可以看出我們定義的功能屬性溫度的標識符temperature上報的對應數值是24.7，證明成功實現傳感器數據上云。

圖37?查看設備獲取的參數

? ? ? ?從移動應用的編輯頁面也可以看到參數此刻已經上報成功。

圖38?移動頁面顯示成功上報的數據

? ? ? ?以上就完成了ESP32E的數據上云及云端可視化實時展示的過程。

? ? ? ?通過直接拖拽組件進行配置，利用圖形化積木完成開源硬件物聯網云端可視化展示，是不是簡單方便呢？如果您期待更多的網頁組件的使用以及配置，別走開！敬請期待下一篇!

? ? ? ?完整測試代碼可前往【人工智能素養教育共同體】的官方gitee網站下載:

? ? ? ?ESP32數據上云及云端可視化實時展示

https://gitee.com/LNSFAIoT/ESP32-data-is-visualized-on-the-cloud-and-cloud-in-real-time.git

THE? ?END

關注我們

? ? ? ?更多精彩內容請關注我們的微信公眾號：??人工智能素養教育共同體，歡迎添加我們的企業微信，加入智慧農場項目學習群。?

?? ? ? ?更多PBL開源項目請前往微信公眾號查看。

本文原創，轉載請注明出處！

覺得內容還不錯的話，歡迎一鍵三連支持原創。?

總結

以上是生活随笔為你收集整理的【PBL项目实战】户外智慧农场项目实战系列之4——Mind+Mixly双平台ESP32数据上云及云端可视化实时展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。