Atmosfēras piesārņojuma vizualizācija: 4 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:56

Gaisa piesārņojuma problēma piesaista arvien lielāku uzmanību. Šoreiz mēs mēģinājām uzraudzīt PM2.5 ar Wio LTE un jauno lāzera PM2.5 sensoru.

1. darbība. Šajā projektā izmantotās lietas

Aparatūras komponenti

• Wio LTE EU versija v1.3- 4G, Cat.1, GNSS, Espruino saderīga
• Grove - lāzera PM2.5 sensors (HM3301)
• Grove - 16 x 2 LCD (balts uz zila)

Programmatūras lietotnes un tiešsaistes pakalpojumi

• Arduino IDE
• PubNub publicēšanas/abonēšanas API

2. darbība. Aparatūras savienojums

Kā parādīts attēlā iepriekš, mēs sagriežam 2 biržu līnijas I2C sakariem, lai Wio LTE varētu vienlaikus izveidot savienojumu ar LCD Grove un PM2.5 Sensor Grove. Lai to panāktu, varat izmantot arī I2C centrmezglu.

Un neaizmirstiet, pievienojiet LTE antenu Wio LTE un pievienojiet tai SIM karti.

3. darbība: tīmekļa konfigurācija

Noklikšķiniet šeit, lai pieteiktos vai reģistrētu PubNub kontu, tas tiks izmantots reāllaika datu pārsūtīšanai.

PubNub administrēšanas portālā redzēsit demonstrācijas projektu. Ievadiet projektu, tur ir 2 atslēgas, publicēšanas atslēga un abonēšanas atslēga, atcerieties tos programmatūras programmēšanai.

4. solis: programmatūras programmēšana

1. daļa. Wio LTE

Tā kā Wio LTE nav PubNub bibliotēkas, mēs varam publicēt savus reāllaika datus, izmantojot HTTP pieprasījumu, skatiet PubNub REST API dokumentu.

Lai no HTTP kartes izveidotu savienojumu ar Wio LTE, vispirms jāiestata APN. Ja jūs to nezināt, lūdzu, sazinieties ar savu mobilo sakaru operatoru.

Pēc APN iestatīšanas iestatiet PubNub publicēšanas atslēgu, abonēšanas atslēgu un kanālu. Kanāls šeit tiek izmantots, lai atšķirtu izdevējus un abonentus. Abonenti saņems datus no izdevējiem, kuriem ir viens un tas pats kanāls.

Wio LTE nospiediet un turiet pogu Boot0, pievienojiet to datoram, izmantojot USB kabeli, augšupielādējiet tajā Arduino IDE kodu. Pēc augšupielādes nospiediet RST pogu, lai atiestatītu Wio LTE.

2. daļa. Web lapa

Pagriezieties uz PubNub, ievadiet Demo Keyset un kreisajā pusē noklikšķiniet uz Debug Console, tas atvērs jaunu lapu.

Aizpildiet kanāla nosaukumu līdz noklusējuma kanāla tekstlodziņam, pēc tam noklikšķiniet uz pogas Pievienot klientu. Pagaidiet kādu laiku, atkļūdošanas konsolē parādīsies PM1.0, PM2.5 un PM10 vērtība.

Bet tas mums nav draudzīgs, tāpēc mēs uzskatām, ka to parādīt kā diagrammu.

Vispirms datorā izveidojiet jaunu html failu. Atveriet to ar teksta redaktoru, pievienojiet tam pamata HTML tagus.

Pēc tam pievienojiet PubNub un Chart.js skriptu galvai, šai lapai varat pievienot arī nosaukumu.

Redzēja putekļu monitoru

Ir jābūt diagrammas attēlošanas vietai, tāpēc lapas pamattekstam pievienojam audeklu.

Un pievienojiet skripta tagu, lai mēs varētu pievienot javascript, lai abonētu reāllaika datus un zīmētu diagrammu.

Lai abonētu reāllaika datus no PubNub, jābūt PubNub objektam, var pubnub = jauns PubNub ({

publicētKey: "", subscribeKey: ""});

un pievienojiet tam klausītāju.

pubnub.addListener ({

ziņojums: funkcija (ziņa) {}});

Funkcijas ziņojuma parametra msg ziņojuma dalībnieks ir mums vajadzīgie dati. Tagad mēs varam abonēt reāllaika datus no PubNub:

pubnub.subscribe ({

kanāls: ["putekļi"]});

Bet kā to parādīt kā diagrammu? Mēs izveidojām 4 masīvus, lai saglabātu datus reāllaikā:

var chartLabels = jauns masīvs ();

var chartPM1Data = jauns masīvs (); var chartPM25Data = jauns masīvs (); var chartPM10Data = jauns masīvs ();

Tostarp chartLabels masīvs tiek izmantots, lai saglabātu datu sasniegšanas laiku, diagramma PMMDati, diagramma PM25Dati un diagramma PMM dati tiek izmantoti attiecīgi PM1.0, PM2.5 un PM10 datu glabāšanai. Kad reālā laika dati sasniedz, pārvietojiet tos uz masīviem atsevišķi.

chartLabels.push (jauns datums (). toLocalString ());

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

Pēc tam parādiet diagrammu:

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

var diagramma = jauna diagramma (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}]}});

Tagad atveriet šo html failu ar tīmekļa pārlūkprogrammu, jūs redzēsit datu izmaiņas.