树莓派新玩法：基于WiFi的CPU温度与内存使用Web-GUI监控系统

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仪表板。