使用Google Charts來可視化傳感器數(shù)據(jù)

描述

為了最大限度地減少機(jī)器的停機(jī)時(shí)間，對(duì)機(jī)器進(jìn)行預(yù)測(cè)分析是非常必要的。定期檢查有助于提高機(jī)器的工作時(shí)間，進(jìn)而提高其容錯(cuò)能力。無線振動(dòng)和溫度傳感器可以幫助我們分析機(jī)器中的振動(dòng)。我們?cè)谥暗牟┛椭锌吹綗o線振動(dòng)和溫度傳感器如何服務(wù)于不同的應(yīng)用，并幫助我們檢測(cè)故障和機(jī)器中的不規(guī)則振動(dòng)。

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

• ThingHz 無線溫濕度傳感器
• 硬件設(shè)置
• 使用無線網(wǎng)關(guān)設(shè)備收集數(shù)據(jù)
• 使用這些傳感器進(jìn)行振動(dòng)分析。
• 如何使用 ESP32 網(wǎng)絡(luò)服務(wù)器制作網(wǎng)頁。
• 在網(wǎng)頁中加載谷歌圖表。

硬件和軟件規(guī)格

軟件規(guī)范

• 谷歌圖表 API
• Arduino IDE

硬件規(guī)格

• ThingHz 溫濕度傳感器

獲取溫度傳感器值

?

?

?

?

?

1 / 2

?

?

使用 ESP32webServer 提供網(wǎng)頁

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

• 包括庫“ WebServer.h ”

#include "WebServer.h"

• 然后初始化一個(gè) Web Server 類的對(duì)象。然后發(fā)送服務(wù)器請(qǐng)求以使用 server.on() 在 root 和其他 URL 中打開網(wǎng)頁。并使用server.begin() 啟動(dòng)服務(wù)器。

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

• 現(xiàn)在調(diào)用我們已將網(wǎng)頁存儲(chǔ)在 SPIFFS 中的不同 URL 路徑的回調(diào)。有關(guān) SPIFFS 的更多信息，請(qǐng)關(guān)注此博客。“ /dht22 ” URL 路徑將以 JSON 格式給出傳感器數(shù)據(jù)的值。

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);  }

• 現(xiàn)在使用任何文本編輯器創(chuàng)建一個(gè) HTML 網(wǎng)頁，在我們的例子中我們使用的是 notepad++。要了解有關(guān)創(chuàng)建網(wǎng)頁的更多信息，請(qǐng)?jiān)L問此博客。在此網(wǎng)頁中，我們調(diào)用谷歌圖表 API 將傳感器值提供給圖表。此網(wǎng)頁托管在根網(wǎng)頁上。您可以在此處找到HTML 網(wǎng)頁代碼。
• 在下一步中，我們只需要處理 Web 服務(wù)器。

server.handleClient();

數(shù)據(jù)可視化

?

Google Charts 提供了一種非常有效的方式來可視化您的網(wǎng)站或靜態(tài)網(wǎng)頁上的數(shù)據(jù)。從簡(jiǎn)單的折線圖到復(fù)雜的分層樹狀圖，谷歌圖表庫提供了大量即用型圖表類型。

整體代碼

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