30분 이내에 Raspberry Pi 모니터링 대시보드 구축

성능을 이해하려면 Raspberry Pi 대시보드가 ​​필요할 수 있습니다. 이 기사에서는 주문형 모니터링 대시보드를 신속하게 구축하여 Raspberry Pi의 CPU 성능, 메모리 및 디스크 사용량을 실시간으로 확인하고 필요에 따라 언제든지 더 많은 보기와 작업을 추가하는 방법을 보여 드리겠습니다.

이미 Appsmith를 사용하고 있다면 샘플 앱을 직접 가져와서 시작할 수도 있습니다.

Appsmith

Appsmith는 개발자가 대시보드 및 관리 패널과 같은 내부 애플리케이션을 쉽고 빠르게 구축하는 데 도움이 되는 오픈 소스 로우 코드 애플리케이션 구축 도구입니다. 이는 대시보드를 위한 훌륭한 옵션이며 기존 코딩 방법에 필요한 시간과 복잡성을 줄여줍니다.

이 예의 대시보드에는 다음 통계가 표시됩니다.

• CPU

• % 점유율
• 주파수 또는 클럭 속도
• 카운트
• 온도

• 메모리

• % 점유
• 사용 가능한 메모리 비율
• 총 메모리
• 사용 가능한 메모리

• 디스크

• 디스크 사용량 비율
• 절대 디스크 공간 사용량
• 사용 가능한 디스크 공간
• 총 디스크 공간

엔드포인트 생성

당신은 Raspberry Pi에서 이 데이터를 가져와 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이 설치되지 않은 경우 아직 Raspberry Pi에서 터미널을 열고 다음 설치 명령을 실행하세요.

$ sudo apt install python3

이제 개발을 위한 Python 가상 환경을 설정하세요.

$ python -m venv PiData

다음으로 환경을 활성화하세요. Raspberry Pi를 다시 시작한 후에 이 작업을 수행해야 합니다.

$ source PiData/bin/activate$ cd PiData

Flask, Flask-RESTful 및 향후 종속 항목을 설치하려면 Python 가상 환경에서 requirements.txt 다음 내용을 추가하세요. 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)

파일을 저장하고 사용하세요. pip는 모두 한 번에 설치합니다. Raspberry Pi를 다시 시작한 후에 이 작업을 수행해야 합니다.

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,}

다음으로 pi_stats.py 파일을 저장하고 사용합니다. psutil Raspberry Pi 시스템 통계를 검색하는 논리입니다. 다음 코드를 pi_stats.py 파일: 🎜

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)

🎜 이 코드의 기능은 다음과 같습니다: 🎜

• 使用 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' 옆에 있는 '+' 버튼을 찾아 클릭하세요.
• "빈 API 만들기"를 클릭하세요.
• 페이지 상단에서 프로젝트 이름을 "PiData"로 지정하세요.
• API의 URL을 얻으세요. localtunnel을 사용하는 경우 localtunnel.me 주소, 항상 끝 반경에 /get-stats 통계를 가져옵니다. 페이지의 첫 번째 빈 필드에 붙여넣고 "실행" 버튼을 클릭하세요. 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 Interface

사용자 인터페이스 구축

Appsmith의 인터페이스는 매우 직관적이지만, 길을 잃었다면 Appsmith에서 첫 번째 앱 빌드 튜토리얼.

캔버스의 "텍스트", "이미지" 및 "구분선" 위젯을 제목으로 드래그하세요. 다음과 같이 정리하세요:

🎜프로젝트 제목 설정🎜🎜

"텍스트" 위젯에는 페이지의 실제 제목이 포함되어 있습니다. "Raspberry Pi Stats"보다 더 멋진 것을 입력하세요. 🎜

'이미지' 위젯은 대시보드의 고유한 로고를 표시하는 데 사용됩니다. 원하는 로고를 사용할 수 있습니다. 🎜

라이브 데이터 모드를 전환하려면 '전환' 위젯을 사용하세요. 구축한 API에서 데이터를 가져오는 방법은 '속성' 패널에서 구성해야 합니다. 🎜

메인 섹션의 경우 왼쪽 위젯 라이브러리에서 다음 위젯을 사용하여 CPU 통계 영역을 만듭니다. 🎜🎜🎜Progress Bar🎜🎜Stat Box🎜🎜Chart🎜 🎜

메모리에 대해 동일한 단계를 반복합니다. 및 디스크 통계 섹션. 디스크 통계 섹션에는 차트가 필요하지 않지만 용도를 찾으면 사용하십시오. 🎜

최종 위젯 레이아웃은 다음과 같아야 합니다. 🎜🎜🎜Appsmith의 속성 설정🎜🎜

마지막 단계는 API의 데이터를 위젯에 바인딩하는 것입니다. 🎜

위젯에 데이터 바인딩

캔버스로 돌아가서 세 가지 카테고리 섹션에서 위젯을 찾으세요. CPU 통계를 설정하여 시작하십시오. 🎜

"진행률 표시줄" 위젯에 데이터를 바인딩하려면: 🎜🎜🎜"진행률 표시줄" 위젯을 클릭하여 오른쪽의 "속성" 패널을 엽니다. 🎜🎜"진행 상황" 속성을 찾으세요. 🎜🎜JavaScript를 활성화하려면 “JS” 버튼을 클릭하세요. 🎜🎜"진행률" 필드에 붙여넣습니다. {{PiData.data.cpu_percent ?? 0}}. 이 코드는 PiData. Appsmith는 PiData의 .data 연산자 내. 키 cpu_percent CPU 사용률을 표시하기 위해 Appsmith에서 사용하는 데이터가 포함되어 있습니다. 🎜🎜"진행률 표시줄" 위젯 아래에 "텍스트" 위젯을 라벨로 추가하세요. 🎜🎜🎜🎜🎜구성 화면에서 데이터 바인딩🎜🎜

在 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 데이터 포인트는 저장. 배열을 저장하려면 x 및 y의 아래 첨자 변수, 둘 다 cpu_percent 데이터 속성의 값입니다. 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

또한 값 저장 사이에 고정된 시간 간격을 설정하여 이 데이터를 자동으로 저장하려고 합니다. setInterval 함수 실행 시: 🎜

• cpu_percent 데이터는 cpu_util_data가 x 및 y 변수.
• 변경 cpu_util_data 값은 utilData.
• 기능이 자동으로 실행되도록 설정된 경우에만 1~4단계를 반복하세요. Switch 위젯을 사용하여 자동화하도록 설정했는데, getLiveData 상위 함수.

🎜"설정" 탭에서 개체의 모든 상위 함수를 찾고 "RUN ON PAGE LOAD" 옵션에서 initialOnPageLoad가 "예"로 설정되었습니다. 🎜

페이지 로드 시 실행될 기능 설정🎜🎜이제 페이지를 새로 고쳐 확인하세요. 🎜🎜캔버스로 돌아갑니다. 차트 위젯을 클릭하고 차트 데이터 속성을 찾습니다. 바인딩 {{ appsmith.store.disk_util_data }} 붙여넣으세요. 이런 식으로 0px;display:inline-block;">utils 개체를 여러 번 실행하면 차트 데이터를 얻을 수 있습니다. 자동으로 실행하려면: 🎜

• 대시보드 헤더에서 "Live Data Switch" 위젯을 찾아서 클릭하세요.
• onChange 이벤트. 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

{{ utils.getLiveData() }}. 자바스크립트 객체는 utils 및 getLiveData는 스위치를 전환할 때 활성화되고 Raspberry Pi에서 실시간 데이터를 가져오는 기능입니다. 하지만 다른 실시간 데이터도 있으므로 동일한 스위치가 해당 데이터에도 작동합니다. 자세히 알아보려면 계속 읽어보세요. 🎜

CPU 통계 섹션에서 수행한 것과 유사한 방식으로 메모리 및 디스크 섹션의 위젯에 데이터를 바인딩합니다. 🎜

메모리 부분의 바인딩은 다음과 같습니다. 🎜🎜🎜진행률 표시줄의 바인딩은 {{( PiData.data.cpu_mem_avail/1000000000).toPrecision(2) * 100 ?? 0 } . 🎜🎜세 가지 통계 상자 위젯의 바인딩은 다음과 같습니다: <code style="Background-color: rgb(231, 243, 237); padding: 1px 3px; border-radius: 4px; Overflow-wrap: break-word ; text -indent: 0px; 디스플레이: inline-block;">{ ${(PiData.data.cpu_mem_used/1000000000).toPrecision(2)} ?? 0 }} GB、{ PiData.data.disk_usage_percent ?? 0 }} /코드>. 🎜🎜세 가지 통계 상자 위젯의 바인딩은 다음과 같습니다: <code style="Background-color: rgb(231, 243, 237); padding: 1px 3px; border-radius: 4px; Overflow-wrap: break-word ; text -indent: 0px; 디스플레이: inline-block;">{ ${(PiData.data.disk_usage_used/1000000000).toPrecision(2)} ?? 0 }} GB、utils 객체, storeValue 키 이름 disk_util_data style="배경 색상: rgb(231, 243, 237); 패딩: 1px 3px; 테두리 반경: 4px; 오버플로 랩: break-word; 텍스트 들여쓰기: 0px; 디스플레이: inline-block;">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 对象在打开和关闭真实数据开关时触发的数据流可视化如下所示：

切换

在打开实时数据开关时，图表会变成这样：

显示实时数据

整体上，它既漂亮，又简约，而且非常有用。

祝你使用愉快！

当你对 psutils、JavaScript 和 Appsmith 更加熟悉时，我相信你会发现可以轻松无限地调整你的仪表板，实现非常酷的功能，例如：

• 查看先前一周、一个月、一个季度、一年或根据你的树莓派数据允许的任何自定义范围的趋势
• 为任何统计数据的阈值违规构建报警机制
• 监控连接到你的树莓派的其他设备
• 将 psutils 扩展到另一台安装有 Python 的计算机上
• 使用其他库监控你家庭或办公室的网络
• 监控你的花园
• 跟踪你自己的生活习惯

在下一个令人兴奋的项目中，祝你玩得愉快！

위 내용은 30분 이내에 Raspberry Pi 모니터링 대시보드 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!