在不到 30 分鐘內構建一個樹莓派監控儀表盤-魔扣目錄

你可能需要一個樹莓派的儀表盤，以了解其性能情況。在本文中，我將演示如何快速構建一個按需監控儀表盤，以實時查看你的樹莓派的 CPU 性能、內存和磁盤使用情況，并根據需要隨時添加更多視圖和操作。

如果你已經使用 Appsmith，你還可以直接導入?示例應用程序?并開始使用。

Appsmith

Appsmith 是一個開源的?低代碼?應用構建工具，幫助開發人員輕松快速地構建內部應用，如儀表盤和管理面板。它是一個用于儀表盤的很好選擇，并減少了傳統編碼方法所需的時間和復雜性。

在此示例的儀表盤中，我顯示以下統計信息：

CPU

創建一個端點

你需要一種從樹莓派獲取這些數據并傳遞給 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

登錄后復制

接下來，激活該環境。你必須在重新啟動樹莓派后執行此操作。

$ source PiData/bin/activate$ cd PiData

登錄后復制

為了安裝 Flask、Flask-RESTful 和以后需要的依賴項，請在你的 Python 虛擬環境中創建一個名為?requirements.txt?的文件，并將以下內容添加到其中：

flaskflask-restfulgunicorn

登錄后復制

保存文件，然后使用?pip?一次性安裝它們。你必須在重新啟動樹莓派后執行此操作。

(PyData)$ python -m pip install -r requirements.txt

登錄后復制

接下來，創建一個名為?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 上構建儀表盤

硬件監控儀表盤

要制作一個像這樣的儀表盤，你需要將公開的 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” 面板中看到成功的響應。

Appsmith 界面

構建用戶界面

Appsmith 的界面非常直觀，但如果你感到迷失，我建議你查看?在 Appsmith 上構建你的第一個應用程序?教程。

在畫布上拖動”文本Text”、”圖像Image”和”分隔線Divider”小部件作為標題。將它們排列如下：

設置項目標題

“文本Text” 小部件包含你頁面的實際標題。鍵入比“Raspberry Pi Stats”更酷的內容。

“圖像Image” 小部件用于展示儀表盤的獨特標志。你可以使用你喜歡的任何標志。

使用 “開關Switch” 小部件來切換實時數據模式。從你構建的 API 獲取數據，需要在 “屬性Property” 面板進行配置。

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

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

對于內存和磁盤統計信息部分，重復相同的步驟。磁盤統計信息部分不需要圖表，但如果你能找到用途，那也可以使用它。

你的最終小部件布局應該類似于以下：

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” 小部件作為標簽。

在配置屏幕中綁定數據

在 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 溫度數據。

如果一切順利，你將得到一個漂亮的儀表盤，如下所示：

樹莓派的儀表盤

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（是）”。

設置頁面加載時要執行的函數

現在刷新頁面進行確認。

返回到畫布。單擊 “圖表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_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_total/1000000000).toPrecision(2)} ?? 0 }} GB。

這里的圖表需要更新你為 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 對象在打開和關閉真實數據開關時觸發的數據流可視化如下所示：

切換

在打開實時數據開關時，圖表會變成這樣：

顯示實時數據

整體上，它既漂亮，又簡約，而且非常有用。