使用Google Charts來可視化傳感器數據

描述

為了最大限度地減少機器的停機時間，對機器進行預測分析是非常必要的。定期檢查有助于提高機器的工作時間，進而提高其容錯能力。無線振動和溫度傳感器可以幫助我們分析機器中的振動。我們在之前的博客中看到無線振動和溫度傳感器如何服務于不同的應用，并幫助我們檢測故障和機器中的不規則振動。

在本博客中，我們將使用 Google Charts 來可視化傳感器數據。谷歌圖表是檢查和分析傳感器數據的交互式方式。它為我們提供了許多選項，如折線圖、pi 圖表、直方圖、多值圖表等。因此，在這里我們將學習以下內容：

• ThingHz 無線溫濕度傳感器
• 硬件設置
• 使用無線網關設備收集數據
• 使用這些傳感器進行振動分析。
• 如何使用 ESP32 網絡服務器制作網頁。
• 在網頁中加載谷歌圖表。

硬件和軟件規格

軟件規范

• 谷歌圖表 API
• Arduino IDE

硬件規格

• ThingHz 溫濕度傳感器

獲取溫度傳感器值

?

?

?

?

?

1 / 2

?

?

使用 ESP32webServer 提供網頁

首先，我們將使用 ESP32 托管一個網頁。要托管網頁，我們只需要按照以下步驟操作：

• 包括庫“ WebServer.h ”

#include "WebServer.h"

• 然后初始化一個 Web Server 類的對象。然后發送服務器請求以使用 server.on() 在 root 和其他 URL 中打開網頁。并使用server.begin() 啟動服務器。

Webserver server  server.on("/", handleRoot);server.on("/dht22", handleDHT);  
server.onNotFound(handleNotFound);  
server.begin();

• 現在調用我們已將網頁存儲在 SPIFFS 中的不同 URL 路徑的回調。有關 SPIFFS 的更多信息，請關注此博客。“ /dht22 ” URL 路徑將以 JSON 格式給出傳感器數據的值。

void handleRoot() {File  file = SPIFFS.open("/chartThing.html", "r");  
server.streamFile(file,"text/html");  
file.close();}void handleDHT(){StaticJsonBuffer<100> jsonBuffer;  
JsonObject& root = jsonBuffer.createObject();  
root["rmsx"] = rms_x;    
root["rmsy"] = rms_y;    
char jsonChar[100];    
root.printTo((char*)jsonChar, root.measureLength() + 1);    
server.send(200, "text/json", jsonChar);  }

• 現在使用任何文本編輯器創建一個 HTML 網頁，在我們的例子中我們使用的是 notepad++。要了解有關創建網頁的更多信息，請訪問此博客。在此網頁中，我們調用谷歌圖表 API 將傳感器值提供給圖表。此網頁托管在根網頁上。您可以在此處找到HTML 網頁代碼。
• 在下一步中，我們只需要處理 Web 服務器。

server.handleClient();

數據可視化

?

Google Charts 提供了一種非常有效的方式來可視化您的網站或靜態網頁上的數據。從簡單的折線圖到復雜的分層樹狀圖，谷歌圖表庫提供了大量即用型圖表類型。

整體代碼

可以在此處找到此博客的固件。