Atmosferos taršos vizualizacija: 4 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:47

Vis daugiau dėmesio sulaukia oro taršos problema. Šį kartą bandėme stebėti PM2.5 su „Wio LTE“ir nauju lazeriniu PM2.5 jutikliu.

1 žingsnis: šiame projekte naudojami dalykai

Techninės įrangos komponentai

• Suderinama su „Wio LTE EU“versija 1.3–4G, Cat.1, GNSS, „Espruino“
• Grove - lazerinis PM2.5 jutiklis (HM3301)
• Grove - 16 x 2 LCD (balta ant mėlynos)

Programinės įrangos programos ir internetinės paslaugos

• „Arduino IDE“
• PubNub Publish/Subscribe API

2 žingsnis: aparatinės įrangos prijungimas

Kaip parodyta aukščiau esančiame paveikslėlyje, I2C ryšiui nukirtome 2 giraitės linijas, kad „Wio LTE“vienu metu galėtų prisijungti prie „LCD Grove“ir „PM2.5 Sensor Grove“. Norėdami tai padaryti, galite naudoti „I2C Hub“.

Ir nepamirškite, prijunkite LTE anteną prie „Wio LTE“ir prijunkite prie jos SIM kortelę.

3 veiksmas: žiniatinklio konfigūravimas

Spustelėkite čia, jei norite prisijungti arba užregistruoti „PubNub“paskyrą, ji bus naudojama perduoti duomenis realiuoju laiku.

„PubNub“administravimo portale pamatysite demonstracinį projektą. Įveskite projektą, jame yra 2 raktai, „Publish Key“ir „Subscribe Key“, nepamirškite jų programinės įrangos programavimui.

4 žingsnis: programinės įrangos programavimas

1 dalis. „Wio LTE“

Kadangi nėra „PubNub“bibliotekos, skirtos „Wio LTE“, mes galime paskelbti savo realaus laiko duomenis per HTTP užklausą, žr. PubNub REST API dokumentą.

Norėdami užmegzti HTTP ryšį iš SIM kortelės, prijungtos prie „Wio LTE“, pirmiausia turite nustatyti APN. Jei to nežinote, kreipkitės į savo mobiliojo ryšio operatorių.

Nustatę „APN“, nustatykite „PubNub“paskelbimo raktą, prenumeratos raktą ir kanalą. Čia esantis kanalas naudojamas norint atskirti leidėjus ir prenumeratorius. Prenumeratoriai gaus duomenis iš leidėjų, turinčių tą patį kanalą.

Paspauskite ir palaikykite „Boot0“mygtuką „Wio LTE“, prijunkite jį prie kompiuterio USB kabeliu, įkelkite į jį „Arduino IDE“kodą. Įkėlę paspauskite RST mygtuką, kad iš naujo nustatytumėte „Wio LTE“.

2 dalis. Tinklalapis

Pasukite į „PubNub“, įveskite demonstracinį raktų rinkinį ir kairėje spustelėkite „Debug Console“, jis atvers naują puslapį.

Užpildykite kanalo pavadinimą iki numatytojo kanalo teksto laukelio, tada spustelėkite mygtuką Pridėti klientą. Palaukite šiek tiek, ir „Debug Console“pamatysite PM1.0, PM2.5 ir PM10 reikšmes.

Tačiau mums tai nėra draugiška, todėl svarstome, kaip ją parodyti kaip diagramą.

Pirmiausia sukurkite naują html failą savo kompiuteryje. Atidarykite jį naudodami teksto redaktorių, pridėkite prie jo pagrindines HTML žymas.

Tada pridėkite „PubNub“ir „Chart.js“scenarijų į galvą, taip pat galite pridėti šio puslapio pavadinimą.

Pamačiau dulkių monitorių

Turėtų būti vieta diagramai rodyti, todėl prie puslapio turinio pridedame drobę.

Ir pridėkite scenarijaus žymą, kad galėtume pridėti „JavaScript“, kad galėtumėte prenumeruoti duomenis realiuoju laiku ir nubrėžti diagramą.

Norėdami užsiprenumeruoti duomenis realiuoju laiku iš „PubNub“, turi būti „PubNub“objektas, var pubnub = naujas PubNub ({

publisKey: "", subscribeKey: ""});

ir pridėkite prie jo klausytoją.

pubnub.addListener ({

pranešimas: funkcija (žinutė) {}});

Funkcijos pranešimo parametro msg pranešimo narys yra mums reikalingi duomenys. Dabar galime užsiprenumeruoti duomenis realiuoju laiku iš „PubNub“:

pubnub.subscribe ({

kanalas: ["dulkės"]});

Bet kaip tai parodyti kaip diagramą? Mes sukūrėme 4 masyvus, kad galėtume saugoti duomenis realiuoju laiku:

var chartLabels = new Array ();

var diagramaPM1Data = naujas masyvas (); var diagramaPM25Data = naujas masyvas (); var chartPM10Data = naujas masyvas ();

Tarp jų „chartLabels“masyvas naudojamas duomenų pasiekimo laikui išlaikyti, diagrama PMMData, diagrama PM25Data ir diagrama PMMData naudojami atitinkamai PM1.0, PM2.5 ir PM10 duomenims saugoti. Kai duomenys pasiekiami realiuoju laiku, perkelkite juos į masyvus atskirai.

chartLabels.push (nauja data (). toLocalString ());

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

Tada parodykite diagramą:

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

var diagrama = nauja diagrama (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}]}});

Dabar atidarykite šį html failą naudodami žiniatinklio naršyklę, pamatysite duomenų pakeitimus.