Vizualizarea poluării atmosferice: 4 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:44

Problema poluării aerului atrage din ce în ce mai multă atenție. De data aceasta am încercat să monitorizăm PM2.5 cu Wio LTE și noul senzor Laser PM2.5.

Pasul 1: Lucruri utilizate în acest proiect

Componente hardware

• Compatibil cu Wio LTE versiunea UE v1.3- 4G, Cat.1, GNSS, Espruino
• Grove - Senzor laser PM2.5 (HM3301)
• Grove - 16 x 2 LCD (alb pe albastru)

Aplicații software și servicii online

• IDE Arduino
• API PubNub Publish / Subscribe

Pasul 2: Conexiune hardware

Ca în imaginea de mai sus, am tăiat 2 linii de grove pentru comunicații I2C, astfel încât Wio LTE să se poată conecta la LCD Grove și PM2.5 Sensor Grove în același timp. Puteți utiliza un hub I2C pentru a realiza acest lucru.

Și nu uitați, conectați antena LTE la Wio LTE și conectați-vă cartela SIM la aceasta.

Pasul 3: Configurare web

Faceți clic aici pentru a vă autentifica sau a înregistra un cont PubNub, acesta va fi utilizat pentru transmiterea datelor în timp real.

În PubNub Admin Portal, veți vedea un proiect demonstrativ. Intrați în proiect, există 2 taste, Publish Key și Subscribe Key, rețineți-le pentru programare software.

Pasul 4: Programare software

Partea 1. Wio LTE

Deoarece nu există o bibliotecă PubNub pentru Wio LTE, putem publica datele noastre în timp real prin cerere HTTP, consultați Documentul API PubNub REST.

Pentru a face o conexiune HTTP de pe cartela SIM conectată la Wio LTE, ar trebui să setați mai întâi APN-ul. Dacă nu știți acest lucru, vă rugăm să contactați operatorul dvs. de telefonie mobilă.

Și setați cheia de publicare PubNub, cheia de abonare și canalul după setarea APN. Un canal aici este utilizat pentru a diferenția editorii și abonații, abonații vor primi date de la editori care au același canal.

Țineți apăsat butonul Boot0 în Wio LTE, conectați-l la computer printr-un cablu USB, încărcați codul în Arduino IDE pe acesta. După încărcare, apăsați butonul RST pentru a reseta Wio LTE.

Partea 2. Pagină web

Accesați PubNub, introduceți Demo Keyset și faceți clic pe Consola de depanare din stânga, va deschide o pagină nouă.

Completați numele canalului dvs. în caseta de text Canal implicit, apoi faceți clic pe butonul Adăugare client. Așteptați un timp, veți vedea valoarea PM1.0, PM2.5 și PM10 apar în Consola de depanare.

Dar nu ne este prietenos, așa că ne gândim să îl afișăm ca diagramă.

Mai întâi, creați un nou fișier html în computer. Deschideți-l de un editor de text, adăugați etichete HTML de bază.

Apoi adăugați scriptul PubNub și Chart.js la cap, puteți adăuga și un titlu la această pagină.

Monitor de praf de semințe

Ar trebui să existe un loc pentru afișarea unei diagrame, așa că adăugăm o pânză în corpul paginii.

Și adăugați etichetă de script, astfel încât să putem adăuga javascript pentru a abona date în timp real și pentru a desena graficul.

Pentru a vă abona la date în timp real de la PubNub, ar trebui să existe un obiect PubNub, var pubnub = nou PubNub ({

publishKey: "", subscribeKey: ""});

și adăugați un ascultător la acesta.

pubnub.addListener ({

mesaj: funcție (msg) {}});

Membrul mesajului din parametrul msg al mesajului funcțional este datele de care avem nevoie. Acum putem abona date în timp real de la PubNub:

pubnub.subscribe ({

canal: ["praf"]});

Dar cum să-l afișați ca diagramă? Am creat 4 tablouri pentru a păstra date în timp real:

var chartLabels = new Array ();

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

Dintre acestea, matricea chartLabels este utilizată pentru a menține datele atinse în timp, chartPM1Data, chartPM25Data și chartPM10Data sunt utilizate pentru păstrarea datelor PM1.0, PM2.5 și respectiv PM10. Când ajung datele în timp real, împingeți-le la matrice separat.

chartLabels.push (new Date (). toLocalString ());

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

Apoi afișați graficul:

var ctx = document.getElementById ("diagramă"). 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}]}});

Acum deschideți acest fișier html cu browserul web, veți vedea modificări ale datelor.