Huab Cua Pollution Visualization: 4 Kauj Ruam

2024 Tus sau: John Day | [email protected]. Kawg hloov kho: 2024-01-30 09:27

Qhov teeb meem huab cua ua rau neeg nyiam thiab mloog ntxiv. Lub sijhawm no peb tau sim tshuaj xyuas PM2.5 nrog Wio LTE thiab Laser PM2.5 Sensor tshiab.

Kauj Ruam 1: Yam Khoom Siv Hauv Txoj Haujlwm no

Cov khoom siv kho vajtse

• Wio LTE EU Version v1.3- 4G, Cat.1, GNSS, Espruino Tau tshaj
• Grove - Laser PM2.5 Sensor (HM3301)
• Grove - 16 x 2 LCD (Dawb rau Xiav)

Software apps thiab cov kev pabcuam online

• Arduino IDE Cov
• PubNub Tshaj Tawm/Sau Npe API

Kauj Ruam 2: Kev Kho Vajtse Txuas

Raws li daim duab saum toj no, peb txiav 2 txoj kab ntoo rau I2C kev sib txuas lus, kom Wio LTE tuaj yeem txuas rau LCD Grove thiab PM2.5 Sensor Grove tib lub sijhawm. Koj tuaj yeem siv I2C Hub kom ua tiav qhov ntawd.

Thiab tsis txhob hnov qab, txuas LTE tus kav hlau txais xov rau Wio LTE thiab txuas koj daim npav SIM rau nws.

Kauj ruam 3: Web Configuration

Nyem rau qhov no txhawm rau nkag mus lossis sau npe rau PubNub tus lej, nws yuav siv rau xa cov ntaub ntawv ntawm lub sijhawm.

Hauv PubNub Admin Portal, koj yuav pom qhov Demo Project. Nkag mus rau qhov haujlwm, muaj 2 tus yuam sij, Tshaj Tawm Tus Kheej thiab Sau Npe Tseem Ceeb, nco ntsoov lawv rau Software Programming.

Kauj ruam 4: Software Programming

Ntu 1. Wio LTE

Vim tias tsis muaj PubNub lub tsev qiv ntawv rau Wio LTE, peb tuaj yeem tshaj tawm peb cov ntaub ntawv ntawm lub sijhawm tiag tiag ntawm HTTP thov, saib PubNub REST API Cov Ntawv.

Txhawm rau txuas HTTP los ntawm koj daim npav SIM txuas rau Wio LTE, koj yuav tsum teeb tsa koj li APN ua ntej. Yog tias koj tsis paub qhov ntawd, thov hu rau koj tus neeg teb xov tooj.

Thiab teeb tsa koj li PubNub Publish Key, Sau Npe Tseem Ceeb thiab Channel tom qab teeb tsa APN. Ib Channel ntawm no, yog siv los sib txawv Publishers thiab Subscribers, Subscribers yuav tau txais cov ntaub ntawv los ntawm Publishers uas muaj tib Channel.

Nias thiab tuav Boot0 khawm hauv Wio LTE, txuas nws rau koj lub khoos phis tawj ntawm USB cable, xa cov cai hauv Arduino IDE rau nws. Tom qab rub tawm, nias RST khawm kom rov pib dua Wio LTE.

Ntu 2. Web Page

Tig rau PubNub, nkag mus rau Demo Keyset, thiab nyem Debug Console ntawm sab laug, nws yuav qhib nplooj ntawv tshiab.

Sau koj lub npe channel rau Default Channel text box, tom qab ntawd nyem Ntxiv Client khawm. Tos ib pliag, koj yuav pom PM1.0, PM2.5 thiab PM10 tus nqi tshwm hauv Debug Console.

Tab sis nws tsis yog tus phooj ywg rau peb, yog li peb txiav txim siab los tso nws ua daim duab.

Ua ntej tshaj plaws, tsim cov ntawv html tshiab hauv koj lub computer. Qhib nws los ntawm tus kws kho ntawv nyeem, ntxiv cov cim html yooj yim rau nws.

Tom qab ntawd ntxiv PubNub thiab Chart.js cov ntawv rau lub taub hau, koj tseem tuaj yeem ntxiv lub npe rau nplooj ntawv no.

Pom Dust Monitor

Yuav tsum muaj qhov chaw tso saib daim duab, yog li peb ntxiv daim canvas rau nplooj ntawv lub cev.

Thiab ntxiv cov ntawv sau kom peb tuaj yeem ntxiv javascript txhawm rau sau npe cov ntaub ntawv ntawm lub sijhawm thiab kos daim duab.

Txhawm rau sau cov ntaub ntawv ntawm lub sijhawm tiag tiag los ntawm PubNub, yuav tsum muaj PubNub yam khoom, var pubnub = new PubNub ({

publishingKey: "", subscribeKey: ""});

thiab ntxiv tus mloog rau nws.

pubnub.addListener ({

xov: muaj nuj nqi (msg) {}});

Cov tswv cuab xov xwm hauv kab lus ntawm kev ua haujlwm xov yog cov ntaub ntawv peb xav tau. Tam sim no peb tuaj yeem sau npe cov ntaub ntawv raws sijhawm los ntawm PubNub:

pubnub.subscribe ({

channel: ["hmoov av"]});

Tab sis yuav ua li cas tso saib nws raws li daim ntawv qhia? Peb tsim 4 arrays kom khaws cov ntaub ntawv ntawm lub sijhawm:

var chartLabels = Array tshiab ();

var chartPM1Data = Array tshiab (); var chartPM25Data = Array tshiab (); var chartPM10Data = Array tshiab ();

Ntawm lawv, chartLabels array tau siv los khaws cov ntaub ntawv mus txog lub sijhawm, chartPM1Data, chartPM25Data thiab chartPM10Data tau siv los khaws PM1.0 cov ntaub ntawv, PM2.5 cov ntaub ntawv thiab cov ntaub ntawv PM10 feem. Thaum cov ntaub ntawv ntawm lub sijhawm tiag tiag mus txog, thawb lawv mus rau arrays cais.

chartLabels.push (Hnub Tshiab (). toLocalString ());

chartPM1Data.push (msg.message.pm1); chartPM25Data.push (msg.message.pm25); chartPM10Data.push (msg.message.pm10);

Tom qab ntawd tso saib daim duab:

var ctx = document.getElementById ("chart"). getContext ("2d");

var chart = new Chart (ctx, {type: "line", data: {labels: chartLabels, datasets: [{label: "PM1.0", data: chartPM1Data, borderColor: "#FF6384", fill: false}, {label: "PM2.5", data: chartPM25Data, borderColor: "#36A2EB", fill: false}, {label: "PM10", data: chartPM10Data, borderColor: "#CC65FE", fill: false}]}});

Tam sim no qhib cov ntaub ntawv html nrog lub vev xaib, koj yuav pom cov ntaub ntawv hloov pauv.