在不到 30 分鐘內建立樹莓派監視器儀表板-Nginx-PHP中文網

在不到 30 分钟内构建一个树莓派监控仪表盘

你可能需要一個樹莓派的儀表板，以了解其效能狀況。在本文中，我將示範如何快速建立一個按需監控儀錶板，以即時查看你的樹莓派的 CPU 效能、記憶體和磁碟使用情況，並根據需要隨時添加更多視圖和操作。

如果你已經使用 Appsmith，你也可以直接匯入範例應用程式並開始使用。

Appsmith

Appsmith 是開源的低程式碼應用程式建置工具，可協助開發人員輕鬆快速地建立內部應用，例如儀表板和管理面板。它是一個用於儀表板的很好選擇，並減少了傳統編碼方法所需的時間和複雜性。

在此範例的儀表板中，我顯示以下統計資料：

佔用百分比
#頻率或時脈速度
計數

溫度

記憶體

佔用百分比
可用記憶體百分比
總記憶體

空閒記憶體

#磁碟

磁碟使用百分比
絕對磁碟空間使用量
可用磁碟空間

總磁碟空間

建立一個端點你需要一個從樹莓派取得這些資料並傳遞給Appsmith 的方法。 psutil 是用於監控和分析的 Python 函式庫，而 Flask-RESTful 則是一個建立

REST API

的 Flask 擴充功能。

Appsmith 每隔幾秒鐘調用REST API 以自動刷新數據，並以JSON 物件作為回應，其中包含所有所需的統計信息，如下所示：

{ "cpu_count": 4,"cpu_freq": [600.0,600.0,1200.0 ],"cpu_mem_avail": 463953920,"cpu_mem_free": 115789824,"cpu_mem_total": 971063296,"cpu_mem_used": 436252672,"cpu_percent": 1.8,"disk_usage_free": 24678121472,"disk_usage_percent": 17.7,"disk_usage_total": 31307206656,"disk_usage_used": 5292728320,"sensor_temperatures": 52.616 }

登入後複製

1、設置REST API

如果你的樹莓派尚未安裝Python，請在樹莓派上打開終端並運行此安裝命令：

$ sudo apt install python3

登入後複製

現在為你的開發設定一個

Python虛擬環境

：

$ python -m venv PiData

登入後複製

接下來，啟動該環境。你必須在重新啟動樹莓派後執行此操作。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$ source PiData/bin/activate$ cd PiData</pre><div class="contentsignin">登入後複製</div></div>為了安裝Flask、Flask-RESTful 和以後需要的依賴項，請在你的Python 虛擬環境中建立一個名為

requirements.txt

的文件，並將以下內容新增到其中：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">flaskflask-restfulgunicorn</pre><div class="contentsignin">登入後複製</div></div>儲存文件，然後使用

pip

一次安裝它們。你必須在重新啟動樹莓派後執行此操作。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">(PyData)$ python -m pip install -r requirements.txt</pre><div class="contentsignin">登入後複製</div></div>接下來，建立一個名為 pi_stats.py 的檔案來存放使用 psutil 檢索樹莓派系統統計資料的邏輯。將以下程式碼貼到

pi_stats.py

檔案中：

from flask import Flaskfrom flask_restful import Resource, Apiimport psutilapp = Flask(__name__)api = Api(app)class PiData(Resource):def get(self):return "RPI Stat dashboard"api.add_resource(PiData, '/get-stats')if __name__ == '__main__':app.run(debug=True)

登入後複製

###這段程式碼的功能如下：###

使用 app = Flask(name) 来定义嵌套 API 对象的应用程序。
使用 Flask-RESTful 的 API 方法来定义 API 对象。
在 Flask-RESTful 中将 PiData 定义为具体的 Resource 类，以公开每个支持的 HTTP 方法。
使用 api.add_resource(PiData, '/get-stats') 将资源 PiData 附加到 API 对象 api。
每当你访问 URL /get-stats 时，将返回 PiData 作为响应。

2、使用 psutil 读取统计信息

要从你的树莓派获取统计信息，你可以使用 psutil 提供的这些内置函数：

cpu_percentage、cpu_count、cpu_freq 和 sensors_temperatures 函数分别用于获取 CPU 的占用百分比、计数、时钟速度和温度。sensors_temperatures 报告了与树莓派连接的所有设备的温度。要仅获取 CPU 的温度，请使用键 cpu-thermal。
virtual_memory 函数可返回总内存、可用内存、已使用内存和空闲内存的统计信息（以字节为单位）。
disk_usage 函数可返回总磁盘空间、已使用空间和可用空间的统计信息（以字节为单位）。

将所有函数组合到一个 Python 字典中的示例如下：

system_info_data = {'cpu_percent': psutil.cpu_percent(1),'cpu_count': psutil.cpu_count(),'cpu_freq': psutil.cpu_freq(),'cpu_mem_total': memory.total,'cpu_mem_avail': memory.available,'cpu_mem_used': memory.used,'cpu_mem_free': memory.free,'disk_usage_total': disk.total,'disk_usage_used': disk.used,'disk_usage_free': disk.free,'disk_usage_percent': disk.percent,'sensor_temperatures': psutil.sensors_temperatures()['cpu-thermal'][0].current,}

登入後複製

下一节将使用该字典。

3、从 Flask-RESTful API 获取数据

为了在 API 响应中看到来自树莓派的数据，请更新 pi_stats.py 文件，将字典 system_info_data 包含在 PiData 类中：

from flask import Flaskfrom flask_restful import Resource, Apiimport psutilapp = Flask(__name__)api = Api(app)class PiData(Resource):def get(self):memory = psutil.virtual_memory()disk = psutil.disk_usage('/')system_info_data = {'cpu_percent': psutil.cpu_percent(1),'cpu_count': psutil.cpu_count(),'cpu_freq': psutil.cpu_freq(),'cpu_mem_total': memory.total,'cpu_mem_avail': memory.available,'cpu_mem_used': memory.used,'cpu_mem_free': memory.free,'disk_usage_total': disk.total,'disk_usage_used': disk.used,'disk_usage_free': disk.free,'disk_usage_percent': disk.percent,'sensor_temperatures': psutil.sensors_temperatures()['cpu-thermal'][0].current, }return system_info_dataapi.add_resource(PiData, '/get-stats')if __name__ == '__main__':app.run(debug=True)

登入後複製

你的脚本已经就绪，下面运行 PiData.py：

$ python PyData.py * Serving Flask app "PiData" (lazy loading) * Environment: production WARNING: This is a development server. Do not run this in a production environment. * Debug mode: on * Running on http://127.0.0.1:5000 (Press CTRL+C to quit) * Restarting with stat * Debugger is active!

登入後複製

你有了一个可以工作的 API。

4、将 API 提供给互联网

你可以在本地网络中与 API 进行交互。然而，要在互联网上访问它，你必须在防火墙中打开一个端口，并将传入的流量转发到由 Flask 提供的端口。然而，正如你的测试输出建议的那样，在 Flask 中运行 Flask 应用程序仅适用于开发，而不适用于生产。为了安全地将 API 提供给互联网，你可以使用安装过程中安装的 gunicorn 生产服务器。

现在，你可以启动 Flask API。每次重新启动树莓派时都需要执行此操作。

$ gunicorn -w 4 'PyData:app'Serving on http://0.0.0.0:8000

登入後複製

要从外部世界访问你的树莓派，请在网络防火墙中打开一个端口，并将流量定向到你树莓派的 IP 地址，端口为 8000。

首先，获取树莓派的内部 IP 地址：

$ ip addr show | grep inet

登入後複製

内部 IP 地址通常以 10 或 192 或 172 开头。

接下来，你必须配置防火墙。通常，你从互联网服务提供商（ISP）获取的路由器中嵌入了防火墙。通常，你可以通过网络浏览器访问家用路由器。路由器的地址有时会打印在路由器的底部，它以 192.168 或 10 开头。不过，每个设备都不同，因此我无法告诉你需要点击哪些选项来调整设置。关于如何配置防火墙的完整描述，请阅读 Seth Kenlon 的文章《打开端口并通过你的防火墙路由流量》。

或者，你可以使用 localtunnel 来使用动态端口转发服务。

一旦你的流量到达树莓派，你就可以查询你的 API：

$ curl https://example.com/get-stats{ "cpu_count": 4, "cpu_freq": [600.0,600.0,1200.0 ], "cpu_mem_avail": 386273280, ...

登入後複製

如果你已经执行到这一步，那么最困难的部分已经过去了。

5、重复步骤

如果你重新启动了树莓派，你必须按照以下步骤进行操作：

使用 source 重新激活 Python 环境
使用 pip 刷新应用程序的依赖项
使用 gunicorn 启动 Flask 应用程序

你的防火墙设置是持久的，但如果你使用了 localtunnel，则必须在重新启动后启动新的隧道。

如果你愿意，可以自动化这些任务，但那是另一个教程的内容。本教程的最后一部分是在 Appsmith 上构建一个用户界面，使用拖放式小部件和一些 JavaScript，将你的树莓派数据绑定到用户界面。相信我，从现在开始很容易！

在 Appsmith 上构建仪表盘

在不到 30 分钟内构建一个树莓派监控仪表盘硬件监控仪表盘

要制作一个像这样的仪表盘，你需要将公开的 API 端点连接到 Appsmith，使用 Appsmith 的小部件库构建用户界面，并将 API 的响应绑定到小部件上。如果你已经使用 Appsmith，你可以直接导入示例应用程序并开始使用。

如果你还没有，请注册一个免费的 Appsmith 帐户。或者，你可以选择自托管 Appsmith。

将 API 作为 Appsmith 数据源连接

登录到你的 Appsmith 帐户。

在左側導覽列中找到並點擊 “查詢或 JSQUERIES/JS” 旁邊的 “ ” 按鈕。
點選「建立一個空白 APICreate a blank API」。
在頁面頂部，將你的專案命名為「PiData」。
取得你的 API 的 URL。如果你使用的是 localtunnel，則是一個 localtunnel.me 地址，總是在末尾添加 /get-stats 以獲得統計資料。將其貼到頁面的第一個空白欄位中，然後點擊 “RUN” 按鈕。

確保在 “回應Response” 面板中看到成功的回應。

在不到 30 分钟内构建一个树莓派监控仪表盘 Appsmith 介面

建立使用者介面

#Appsmith 的介面非常直觀，但如果你感到迷失，我建議你查看在Appsmith 上建立你的第一個應用程式教學。

在畫布上拖曳"文字Text"、"圖像Image"和"分隔線Divider"小工具作為標題。將它們排列如下：

在不到 30 分钟内构建一个树莓派监控仪表盘設定項目標題

「文字Text」小工具包含你頁面的實際標題。鍵入比“Raspberry Pi Stats”更酷的內容。

「影像Image」小工具用來展示儀表板的獨特標誌。你可以使用你喜歡的任何標誌。

使用 “開關Switch” 小工具來切換即時資料模式。從你建立的 API 取得數據，需要在 "屬性Property" 面板進行配置。

對於主體部分，使用來自左側的小部件庫的以下小部件創建一個CPU 統計資訊區域，使用以下小部件：

進度條Progress Bar
統計框Stat Box
圖表Chart

對於記憶體和磁碟統計資訊部分，重複相同的步驟。磁碟統計資訊部分不需要圖表，但如果你能找到用途，那也可以使用它。

你的最終小部件佈局應該類似於以下：

在不到 30 分钟内构建一个树莓派监控仪表盘 Appsmith 中的屬性設定

最後一步是將API 的數據綁定到你的小部件上。

將資料綁定到小部件上

回到畫布，並在三個類別的部分中找到你的小部件。首先設定 CPU 統計資訊。

要將資料綁定到“進度條Progress Bar” 小部件：

點擊“進度條Progress Bar” 小部件，以打開右側的“屬性Property”面板。
尋找 “進度Progress” 屬性。
點選 “JS” 按鈕以啟動 JavaScript。
在 “進度Progress” 欄位中貼上 {{PiData.data.cpu_percent ?? 0}}。此程式碼引用了你的 API 的資料流，名稱為 PiData。 Appsmith 將回應資料緩存在 PiData 的 .data 運算子內。鍵 cpu_percent 包含了 Appsmith 用來顯示 CPU 使用率百分比的資料。
在 “進度條Progress Bar” 小部件下方新增一個 “文字Text” 小工具作為標籤。

在不到 30 分钟内构建一个树莓派监控仪表盘在設定畫面中綁定資料

在 CPU 部分有三个 “统计框Stat Box” 小部件。将数据绑定到每个小部件的步骤与绑定 “进度条Progress Bar” 小部件的步骤完全相同，只是你需要从 .data 运算符中绑定不同的数据属性。按照相同的步骤进行操作，但有以下例外：

使用 {{${PiData.data.cpu_freq[0]} ?? 0 }} 来显示时钟速度。
使用 {{${PiData.data.cpu_count} ?? 0 }} 来显示 CPU 计数。
使用 {{${(PiData.data.sensor_temperatures).toPrecision(3)} ?? 0 }} 来显示 CPU 温度数据。

如果一切顺利，你将得到一个漂亮的仪表盘，如下所示：

在不到 30 分钟内构建一个树莓派监控仪表盘树莓派的仪表盘

CPU 利用率趋势图

你可以使用 “图表Chart” 小部件将 CPU 利用率显示为趋势线，并使其随时间自动更新。

首先，单击小部件，在右侧找到 “图表类型Chart Type” 属性，并将其更改为 “折线图LINE CHART”。为了显示趋势线，需要将 cpu_percent 存储在数据点数组中。你的 API 目前将其作为单个时间数据点返回，因此可以使用 Appsmith 的 storeValue 函数（Appsmith 内置的 setItem 方法的一个原生实现）来获取一个数组。

在 “查询或 JSQUERIES/JS” 旁边单击 “+” 按钮，并将其命名为 “utils”。

将以下 JavaScript 代码粘贴到 “代码Code” 字段中：

export default {getLiveData: () => {//When switch is on:if (Switch1.isSwitchedOn) {setInterval(() => {let utilData = appsmith.store.cpu_util_data;PiData.run()storeValue("cpu_util_data", [...utilData, {x: PiData.data.cpu_percent,y: PiData.data.cpu_percent}]); }, 1500, 'timerId')} else {clearInterval('timerId');}},initialOnPageLoad: () => {storeValue("cpu_util_data", []);}}

登入後複製

为了初始化 Store，你在 initialOnPageLoad 对象中创建了一个 JavaScript 函数，并将 storeValue 函数放在其中。

你使用 storeValue("cpu_util_data", []); 将 cpu_util_data 中的值存储到 storeValue 函数中。此函数在页面加载时运行。

到目前為止，每次刷新頁面時，程式碼都會將 cpu_util_data 中的一個資料點儲存到 Store 中。為了儲存一個數組，你使用了 x 和 y 的下標變量，兩者都儲存了來自 cpu_percent 資料屬性的值。

你也希望透過設定儲存值之間的固定時間間隔來自動儲存這些資料。執行 setInterval 函數：

取得儲存在 cpu_util_data 中的值。
呼叫 API PiData。
使用最新的 cpu_percent 資料將 cpu_util_data 更新為 x 和 y# 變數。
將 cpu_util_data 的值儲存在鍵 utilData# 中。
僅當設定為自動執行函數時，才會重複執行步驟 1 到 4。你使用 Switch 小工具將其設為自動執行，這解釋了為什麼有一個 getLiveData 父函數。

在「設定Settings」標籤中，找到物件中的所有父函數，並在「頁面載入時執行RUN ON PAGE LOAD」選項中將 initialOnPageLoad 設定為「Yes（是）」。

在不到 30 分钟内构建一个树莓派监控仪表盘設定頁面載入時要執行的函數

現在重新整理頁面進行確認。

回到畫布。按一下 “圖表Chart” 小工具，並找到 “圖表資料Chart Data” 屬性。將綁定 {{ appsmith.store.disk_util_data }} 貼到其中。這樣，如果你自己多次運行物件 utils，就可以取得圖表資料。要自動運行此操作：

尋找並點擊儀錶板標題中的 “即時資料開關Live Data Switch” 小工具。
找出 onChange 事件。
將其綁定到 {{ utils.getLiveData() }}。 JavaScript 物件是 utils，而 getLiveData 是在你切換開關時啟動的函數，它會從你的樹莓派取得即時資料。但是還有其他即時數據，因此同一開關也適用於它們。繼續閱讀以了解詳情。

將資料綁定到記憶體和磁碟部分的小部件與你在 CPU 統計資訊部分所做的方式類似。

對於記憶體部分，綁定如下所示：

進度條中的綁定為：{{( PiData.data.cpu_mem_avail/1000000000).toPrecision( 2) \* 100 ?? 0 }}。
三個統計框小工具的綁定分別為：{{ \${(PiData.data.cpu_mem_used/1000000000).toPrecision(2)} ?? 0 }} GB 、{{ \${(PiData.data.cpu_mem_free/1000000000).toPrecision(2)} ?? 0}} GB 和 {{{ \${(PiData.data.cpu_mem_to# 和 {{{ \${(PiData.data.cpu_mem_total/1000000000 ).toPrecision(2)} ?? 0 }} GB

對於磁碟部分，進度條和統計框小部件的綁定分別變為：

進度條的綁定為：{{ PiData. data.disk_usage_percent ?? 0 }}
三個統計框小工具的綁定分別為：{{ \${(PiData.data.disk_usage_used/1000000000).toPrecision(2)} ?? 0 }} GB 、{{ \${(PiData.data.disk_usage_free/1000000000).toPrecision(2)} ?? 0 }} GB 和 {{ \${(PiData.data.disk_usage_to# 和

。

這裡的圖表需要更新你為CPU 統計資料建立的 utils 對象，使用 storeValue 鍵名稱為 #disk_util_data#，嵌套在 getLiveData 下面，其邏輯與 cpu_util_data 類似。對於磁碟使用率圖表，我們儲存的

disk_util_data### 的邏輯與 CPU 使用率趨勢圖的邏輯相同。 ###

export default {getLiveData: () => {//When switch is on:if (Switch1.isSwitchedOn) {setInterval(() => { const cpuUtilData = appsmith.store.cpu_util_data; const diskUtilData = appsmith.store.disk_util_data;  PiData.run();  storeValue("cpu_util_data", [...cpuUtilData, { x: PiData.data.cpu_percent,y: PiData.data.cpu_percent }]); storeValue("disk_util_data", [...diskUtilData, { x: PiData.data.disk_usage_percent,y: PiData.data.disk_usage_percent }]);}, 1500, 'timerId')} else {clearInterval('timerId');}},initialOnPageLoad: () => {storeValue("cpu_util_data", []);storeValue("disk_util_data", []);}}

登入後複製

通过使用 utils JavaScript 对象在打开和关闭真实数据开关时触发的数据流可视化如下所示：

在不到 30 分钟内构建一个树莓派监控仪表盘切换