Vizualizacija atmosferskega onesnaženja: 4 koraki

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:05

Problem onesnaženosti zraka pritegne vse več pozornosti. Tokrat smo poskušali spremljati PM2.5 z Wio LTE in novim laserskim senzorjem PM2.5.

1. korak: Stvari, uporabljene v tem projektu

Strojne komponente

• Združljivo z različico Wio LTE EU v1.3- 4G, kat.1, GNSS, Espruino
• Grove - laserski senzor PM2,5 (HM3301)
• Grove - 16 x 2 LCD (bela na modri)

Programske aplikacije in spletne storitve

• Arduino IDE
• PubNub Publish/Subscribe API

2. korak: Povezava strojne opreme

Kot je prikazano na zgornji sliki, smo za I2C komunikacijo prerezali dve liniji gajev, tako da se lahko Wio LTE hkrati poveže z LCD Grove in senzorjem PM2.5 Sensor Grove. Za dosego tega lahko uporabite tudi zvezdišče I2C.

In ne pozabite, priključite anteno LTE na Wio LTE in nanjo priključite kartico SIM.

3. korak: Spletna konfiguracija

Kliknite tukaj, če se želite prijaviti ali registrirati račun PubNub, ki bo uporabljen za prenos podatkov v realnem času.

Na skrbniškem portalu PubNub boste videli predstavitveni projekt. Vnesite projekt, na voljo sta dva ključa, ključ za objavo in ključ za naročnino, zapomnite si jih za programsko programiranje.

4. korak: Programiranje programske opreme

Del 1. Wio LTE

Ker ni knjižnice PubNub za Wio LTE, lahko objavimo naše podatke v realnem času prek zahteve HTTP, glejte dokument PubNub REST API.

Če želite vzpostaviti povezavo HTTP s kartice SIM, priključene na Wio LTE, morate najprej nastaviti APN. Če tega ne veste, se obrnite na mobilnega operaterja.

Po nastavitvi APN nastavite svoj PubNub Publish Key, Subscribe Key in Channel. Tu je kanal, ki se uporablja za razlikovanje med založniki in naročniki, naročniki bodo prejemali podatke od založnikov, ki imajo isti kanal.

Pritisnite in držite gumb Boot0 v Wio LTE, ga povežite z računalnikom prek kabla USB, vanj naložite kodo v Arduino IDE. Po nalaganju pritisnite gumb RST za ponastavitev Wio LTE.

Del 2. Spletna stran

Pojdite na PubNub, vnesite Demo Keyset in na levi kliknite Debug Console, odprla se bo nova stran.

Izpolnite ime kanala v besedilno polje Privzeti kanal in kliknite gumb Dodaj odjemalca. Počakajte nekaj časa, v konzoli za odpravljanje napak bodo prikazane vrednosti PM1.0, PM2.5 in PM10.

Ni pa prijazen do nas, zato menimo, da ga prikažemo kot grafikon.

Najprej ustvarite novo datoteko html v računalniku. Odprite ga z urejevalnikom besedil in mu dodajte osnovne oznake HTML.

Nato v glavo dodajte skript PubNub in Chart.js, tej strani lahko dodate tudi naslov.

Glejte Monitor prahu

Moral bi biti prostor za prikaz grafikona, zato telesu telesa dodamo platno.

In dodajte oznako skripta, da lahko dodamo javascript, da se naročimo na podatke v realnem času in narišemo grafikon.

Če se želite naročiti na podatke v realnem času iz storitve PubNub, morate imeti objekt PubNub, var pubnub = nov PubNub ({

publishedKey: "", subscribeKey: ""});

in mu dodaj poslušalca.

pubnub.addListener ({

sporočilo: funkcija (sporočilo) {}});

Član sporočila v parametru msg sporočila funkcije so podatki, ki jih potrebujemo. Zdaj se lahko naročimo na podatke v realnem času iz PubNub-a:

pubnub.subscribe ({

kanal: ["prah"]});

Toda kako to prikazati kot grafikon? Ustvarili smo 4 matrike za shranjevanje podatkov v realnem času:

var chartLabels = nov Array ();

var chartPM1Data = nov niz (); var chartPM25Data = nov niz (); var chartPM10Data = nov niz ();

Med njimi se matrika chartLabels uporablja za shranjevanje doseženih časov, grafikoniPM1Data, chartPM25Data in chartPM10Data se uporabljajo za shranjevanje podatkov PM1.0, podatkov PM2.5 oziroma PM10. Ko pridejo podatki v realnem času, jih ločeno potisnite v matrike.

chartLabels.push (nov datum (). toLocalString ());

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

Nato prikažite grafikon:

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

var chart = nov grafikon (ctx, {type: "line", data: {labels: chartLabels, nabori podatkov: [{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}]}});

Zdaj odprite to datoteko html s spletnim brskalnikom, videli boste spremembe podatkov.