Raspberry Pi是一款靈活強大的硬件平臺，適用于各種創意項目，而性能監控則是確保其高效運行的關鍵。本文介紹了一款基于NiceGUI和Python構建的圖形用戶界面（GUI），允許用戶通過WiFi網絡遠程監控Raspberry Pi的CPU溫度。該GUI可通過瀏覽器直接訪問，操作便捷且用戶友好。

NiceGUI是一個優秀的Python庫，能大幅簡化交互式現代網頁界面的開發流程。本項目還展示了通過降低學習曲線來快速設計其他GUI的捷徑。

我使用Windows 10電腦和Thonny編輯器，通過SSH在Raspberry Pi上進行遠程Python代碼開發。SSH（安全shell）是一種允許從其他設備（如Windows電腦）安全遠程訪問Raspberry Pi的協議。

準備工作

開始之前，請確保以下條件已滿足：

1.Raspberry Pi主板（運行Raspberry Pi OS或其他Linux系統）

2.已安裝"Thonny"集成開發環境及"Paramiko"插件

3.已安裝"NiceGUI"和"NiceGUI-HighCharts" Python包

Raspberry Pi是由Raspberry Pi基金會開發的低成本、高擴展性單板計算機，涵蓋從入門款（如Zero/Zero W）到高性能型號（如4代和5代）的豐富產品線（圖1）。

圖1：Raspberry Pi Zero Q開發板

1-請根據您的硬件型號下載對應的操作系統鏡像。建議使用"Raspberry Pi Imager"工具將系統燒錄至MicroSD卡（圖2）。通過讀卡器連接SD卡至電腦，配置主機名、用戶名、密碼并啟用SSH功能。推薦使用高速MicroSD卡（如32GB SanDisk Ultra Class10）。

圖2：Raspberry Pi Imager配置界面

將SD卡插入Raspberry Pi，上電啟動。等待系統初始化完成后，若未自動連接，請在WiFi列表中選擇您的網絡完成配置。

2-在Windows系統安裝最新版的Thonny Python IDE（當前為4.1.7）。通過"工具"菜單進入"管理插件"，搜索安裝"Paramiko"包（圖3）。該插件是SSH通信的必要組件。

圖3：Thonny編輯器中安裝Paramiko插件

在"運行"菜單選擇"配置解釋器"，從下拉菜單選擇"遠程Python 3 (SSH)"。輸入Raspberry Pi的IP地址（示例：192.168.100.28）、用戶名，點擊連接（圖4）。后續將提示輸入SSH密碼（即Imager中設置的憑據）。

圖4：Thonny中配置SSH連接參數

提示：如何知道Raspberry Pi的IP地址？

在Raspberry Pi終端執行：

hostname -I

成功連接后Thonny的Shell窗口將顯示如圖5的SSH會話。

圖5：Python遠程連接建立

3-"NiceGui" 和 "NiceGui-Highcharts" 包默認未安裝在您的Raspberry Pi上。請在Raspberry Pi終端或SSH客戶端中輸入以下命令安裝缺失的包：

python3-m pip install niceguipython3 -m pip install nicegui-highcharts

提示：如何選擇SSH客戶端？

部分人（包括我）不喜歡直接操作Raspberry Pi硬件，更傾向于通過PC遠程管理。為此，您需要一個SSH客戶端。我推薦使用 Bitvise SSH Client（免費軟件），也可選擇PuTTY。輸入Raspberry Pi的IP地址和SSH憑據后，即可連接到Pi服務器（見圖6）。

圖6：Bitvise客戶端與遠程終端

Code

以下代碼顯示全部Raspberry Pi的Python代碼：

import psutilimport timefrom nicegui import ui, runimport asyncioui.page_title(“Monitoring”)def get_cpu_temperature():temperature = psutil.sensors_temperatures()[“cpu_thermal”][0].currentreturn temperaturedef get_ram_info():# Get RAM informationram = psutil.virtual_memory()total_ram = ram.total / (1024.03) used_ram = ram.used / (1024.03)free_ram = ram.available / (1024.0**3)ram_usage_percent = ram.percentreturn total_ram, used_ram, free_ram, ram_usage_percentchart_options = {“chart”: {“type”: “gauge”,“plotBackgroundColor”: None,“plotBackgroundImage”: None,“plotBorderWidth”: 0,“marginTop”: 0,“plotShadow”: False,“height”: “80%”,},“title”: {“text”: None},“pane”: {“startAngle”: -90,“endAngle”: 89.9,“background”: None,“center”: [“50%”, “75%”],“size”: “100%”,},“yAxis”: {“min”: 0,“max”: 120,“tickPixelInterval”: 72,“tickPosition”: “inside”,“tickColor”: “#FFFFFF”, # Default background color“tickLength”: 20,“tickWidth”: 2,“minorTickInterval”: None,“labels”: {“distance”: 20, “style”: {“fontSize”: “20px”}},“lineWidth”: 0,“plotBands”: [{“from”: 0,“to”: 60,“color”: “#55BF3B”, # green“thickness”: 20,},{“from”: 60,“to”: 80,“color”: “#DDDF0D”, # red“thickness”: 20,},{“from”: 80,“to”: 120,“color”: “#DF5353”, # yellow“thickness”: 20,},],},“series”: [{“name”: “Speed”,“data”: [80],“tooltip”: {“valueSuffix”: ” C”},“dataLabels”: {“format”: “{y} C”,“borderWidth”: 0,“color”: “#333333”, # Default title color“style”: {“fontSize”: “26px”},},“dial”: {“radius”: “80%”,“backgroundColor”: “gray”,“baseWidth”: 12,“baseLength”: “0%”,“rearLength”: “0%”,},“pivot”: {“backgroundColor”: “gray”, “radius”: 6},}],“credits”: {“enabled”: False},}with ui.row().classes(“justify-center w-full”):mylabel = ui.label(“RAM Usage”).style(“font-size: 25px”)progress_bar = ui.linear_progress().style(“height: 40px;”)mylabel = ui.label(“CPU Temperature”).style(“font-size: 25px”)mygauge = ui.highchart(chart_options).classes(“w-full”)async def compute():while True:mygauge.options[“series”][0][“data”][0] = int(get_cpu_temperature())total, used, free, usage_percent = get_ram_info()progress_bar.value = f”{used: .2f}”mygauge.update()await asyncio.sleep(5)ui.timer(0, compute)ui.run()

導入

圖7展示了代碼中的導入部分：

圖7：代碼的導入部分

psutil:用于訪問系統級信息，如CPU溫度、內存使用量、磁盤I/O等。

time:提供時間處理函數

nicegui:基于Web技術的GUI框架，允許用Python快速構建跨平臺界面。

asyncio:支持異步編程范式，實現非阻塞I/O操作。

函數

圖8顯示函數部分：

圖8：函數部分代碼

get_cpu_temperature():通過傳感器獲取CPU溫度

get_ram_info():收集系統的內存信息，包括總內存、已用內存、空閑內存和使用百分比，然后把這些值轉換成GB單位，以便更易讀，在Python中可以一次性返回多個變量

Highcharts配置

圖 9，展示了一個“chart_options”字典，用來配置儀表圖，yAxis 的 min 和 max 值分別定義儀表的最小值和最大值

圖9：儀表圖被配置為顯示CPU溫度

用戶界面設計

圖10 演示了使用 ui.row() 創建的水平布局容器，用于組織以下UI元素：

圖10：用戶界面設計

異步數據更新機制

compute()函數在一個循環中運行，每5秒更新一次儀表和進度條。儀表的更新是通過修改mygauge.options['series'][0]['data'][0]實現的，而進度條可能也是類似的機制。還可以使用UI定時器來完成同樣的工作。

圖11顯示這個函數：

圖11：compute()函數，使用異步數據更新

定時器和事件循環

設置一個計時器來重復調用“compute()”函數。“ui.run()”啟動NiceGUI服務器，它在web界面上托管儀表板。圖12顯示了這一部分:

圖12: 定時器和事件循環

當您運行該腳本時，NiceGUI web服務器啟動，并且可以通過web瀏覽器訪問儀表板。儀表板的地址是“http://:8080”，在我的例子中地址如下:“http://192.168.100.28:8080”。最后，您應該將Python文件傳輸到您的Pi板，然后您可以通過“http://localhost:8080”并通過來自其他設備的IP地址來訪問GUI儀表板。