?? 隨著這幾年智能家居行業的快速發展，家庭用的智能面板越來越普及。智能面板不僅可以用來顯示時間、家用電器的狀態、回家/離家模式選擇還可以用來調節空調溫度、加濕器狀態等等信息，給人們的生活帶來了很多便利。本文則是以最常用的智能溫濕度面板為例，介紹如何使用快速打造一個UI面板。

1、簡介

?? 本文將基于HaaS UI Lite開發框架使用Python語言進行家居溫濕度面板的打造。

1.1、準備

?? 本案例打造需要使用到如下硬件：

• • M5StackCore2開發板 一臺
  • SHT3X溫濕度傳感器 一個

1.2、硬件連線圖

?? 將SHT3X和M5StackCore2通過I2C接口連接起來，硬件連線圖如下圖所示。

2、設備端開發

2.1、開發環境

?? 在進行下一步之前請確保M5StackCore2開發環境已經搭建完畢，詳情請參考M5StackCore2快速開始中的說明。

2.2、創建解決方案

?? 如下圖所示，打開VS Code之后在新建一個基于helloworld的python工程，設定好工程名稱（“humiture_panel”）及工作區路徑之后，硬件類型選擇m5stackcore2，點擊立即創建，創建一個Python輕應用的解決方案。

?? 下載本案例腳本的代碼解壓后全部復制，覆蓋“humiture_panel”工程根目錄下的所有文件，main.py文件如下圖所示：

3、運行效果

?? 將humiture_panel工程推送到M5StackCore2開發板之后，腳本會自動運行。屏幕上面顯示如下信息：

?? 腳本運行過程中日志如下。其中：

• python execute from /data/pyamp/main.py：代表Python腳本開始運行
• create humiture device：創建溫濕度傳感器對象
• create humiture panel：創建溫濕度面板
• temperature: 21.32931：從溫濕度傳感器讀取到的溫度值
• humidity: 33.0602：從溫濕度傳感器讀取到的相對濕度值

==== python execute bootpy ======== python file check /data/pyamp/main.py ======== python execute from /data/pyamp/main.py ==== create humiture device create humiture panel temperature: 21.32931 humidity: 33.0602 temperature: 21.35601 humidity: 33.11513 temperature: 21.38539 humidity: 33.12886

4、HaaS UI Lite 溫濕度面板模板說明

?? 本案例中使用到了HaaS UI Lite封裝的溫濕度面板類型的模板。此模板的代碼實現請參考humiturePanel.py的實現?；诖四０蹇梢院芊奖愕膶貪穸刃畔@示在面板上。下面是對模板元素及面板庫API的說明。

4.1、溫濕度面板元素

?? 如下圖所示，此溫濕度面板一共有8個元素，編號為1-4的元素是溫度顯示的組成部分，編號為5-8的元素為相對濕度顯示的組成部分。

?? 下面是humiturePanel面板模板代碼中顯示各元素的位置，讀者可以根據自己的需求對其進行替換或修改。

元素ID	功能	相關代碼	說明
1	溫度圖標	self.createTemperatureItem(self.container, RESOURCES_ROOT + "temperature.png", RESOURCES_ROOT + "centigrade_l.png", "Temperature")	靜態圖片，尺寸：64*64
2	溫度值	self.temperatureLable.set_text(str(int(temperature)))	動態更新
3	溫度單位圖標	self.createTemperatureItem(self.container, RESOURCES_ROOT + "temperature.png",RESOURCES_ROOT + "centigrade_l.png", "Temperature")	靜態圖片，尺寸：64*64
4	溫度英文字串	同“元素1”	字符串
5	相對濕度圖標	self.createHumidityItem(self.container, RESOURCES_ROOT + "humidity.png", "Humidity")	靜態圖片，尺寸：
6	相對濕度值	self.humidityLable.set_text(str(int(humidity)) + " %")	動態更新
7	相對濕度單位圖標	同“元素6”	%為符號
8	相對濕度英文字串	同“元素5”	靜態文字

4.2、溫濕度面板模板API說明

HumiturePanel() - 創建溫濕度面板對象

• 函數原型

panelObj = HumiturePanel()

• 參數說明

無

• 返回值

創建成功返回溫濕度面板類型的對象

• 示例代碼

from humiturePanel import HumiturePanel humiturePage = HumiturePanel() print('create humiture panel')

• 代碼輸出

create humiture panel

showTemperature(temperature) - 更新溫度值到面板上

• 函數功能：

更新溫度值temperature到面板上

• 函數原型

HumiturePanel.showTemperature(temperature)

• 參數說明

參數	類型	必選參數？	說明
temperature	int	是	如果是float等類型的變量，則會被強制轉換成int型

• 返回值

無

• 示例代碼

from humiturePanel import HumiturePanel humiturePage = HumiturePanel() print('create humiture panel') humiturePage.showTemperature(26) print('update temperature value done')

• 代碼輸出

create humiture panel update temperature value done

showHumidity(humidity) - 更新相對濕度值到面板上

• 函數功能：

更新相對濕度值humidity到面板上

• 函數原型

HumiturePanel.showHumidity(humidity)

• 參數說明

參數	類型	必選參數？	說明
humidity	int	是	如果是float等類型的變量，則會被強制轉換成int型

• 返回值

無

• 示例代碼

from humiturePanel import HumiturePanel humiturePage = HumiturePanel() print('create humiture panel') humiturePage.showHumidity(62) print('update humidity value done')

• 代碼輸出

create humiture panel update humidity value done

showHumiture(tempearture, humidity) - 同時更新溫度和相對濕度值到面板上

• 函數功能：

更新溫度tempearture和相對濕度值humidity到面板上

• 函數原型

HumiturePanel.showHumiture(tempearture, humidity)

• 參數說明

參數	類型	必選參數？	說明
temperature	int	是	如果是float等類型的變量，則會被強制轉換成int型
humidity	int	是	如果是float等類型的變量，則會被強制轉換成int型

• 返回值

無

• 示例代碼

from humiturePanel import HumiturePanel humiturePage = HumiturePanel() print('create humiture panel') humiturePage.showHumiture(26, 62) print('update humiture value done')

• 代碼輸出

create humiture panel update humiture value done

本示例中使用的是SHT3X溫濕度傳感器獲取溫度和相對濕度信息并將其顯示在屏幕上。您也可以參考HaaS硬件積木的頁面來查來選擇其它的溫濕度傳感器。

5、思考

?? 本案例中使用外置的溫濕度傳感器對環境溫濕度進行測量并顯示在面板上。HaaS官網中還有通過其它開發板(ESP32、HaaS EDU K1等)量測環境溫度。假設有一臺“ESP32溫濕度計”開發板（和M5StackCore2不是同一臺設備的情況下）布置在智慧農業的大棚中。請讀者思考下如何通過物聯網平臺遠程獲取到“ESP32溫濕度計”的溫室度信息并顯示在M5StackCore2的面板上。

提示：

在物聯網平臺建立一個虛擬的溫濕度面板設備，創建“溫度”和“濕度”的物模型，通過物聯網平臺的“規則引擎”能力將“ESP32溫濕度計”的溫室度信息流轉到“虛擬的溫濕度面板設備”的物模型，物模型數據下發到M5StackCore2設備可以正確顯示了。

總結

以上是生活随笔為你收集整理的使用 ESP32 + HaaS Python 打造智能温湿度UI面板的全部內容，希望文章能夠幫你解決所遇到的問題。

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