Vizualizacija zagađenja atmosfere: 4 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:36

Problem zagađenja zraka privlači sve veću pozornost. Ovaj smo put pokušali pratiti PM2.5 s Wio LTE -om i novim laserskim PM2.5 senzorom.

Korak 1: Stvari korištene u ovom projektu

Hardverske komponente

• Wio LTE EU verzija v1.3- 4G, kat.1, GNSS, Espruino kompatibilno
• Grove - Laserski osjetnik PM2.5 (HM3301)
• Grove - 16 x 2 LCD (bijelo na plavo)

Softverske aplikacije i mrežne usluge

• Arduino IDE
• PubNub Publish/Subscribe API

Korak 2: Povezivanje hardvera

Kao na gornjoj slici, izrezali smo 2 linije šuma za I2C komunikaciju, tako da se Wio LTE može istovremeno spojiti na LCD Grove i PM2.5 Sensor Grove. Za to možete koristiti i I2C Hub.

I ne zaboravite, spojite LTE antenu na Wio LTE i priključite svoju SIM karticu na nju.

Korak 3: Web konfiguracija

Kliknite ovdje za prijavu ili registraciju PubNub računa, on će se koristiti za prijenos podataka u stvarnom vremenu.

Na AdMin Portalu PubNub vidjet ćete demo projekt. Unesite projekt, postoje 2 ključa, ključ za objavu i ključ za pretplatu, zapamtite ih za softversko programiranje.

Korak 4: Programiranje softvera

Dio 1. Wio LTE

Budući da ne postoji knjižnica PubNub za Wio LTE, naše podatke u stvarnom vremenu možemo objaviti putem HTTP zahtjeva, pogledajte dokument PubNub REST API.

Da biste HTTP vezu sa svoje SIM kartice priključili na Wio LTE, najprije postavite APN. Ako to ne znate, obratite se svom mobilnom operateru.

Postavite svoj PubNub ključ za objavljivanje, ključ za pretplatu i kanal nakon postavljanja APN -a. Ovdje se kanal koristi za razlikovanje izdavača i pretplatnika. Pretplatnici će primati podatke od izdavača koji imaju isti kanal.

Pritisnite i držite gumb Boot0 u Wio LTE, povežite ga s računalom putem USB kabela, prenesite kôd u Arduino IDE na njega. Nakon prijenosa pritisnite gumb RST za vraćanje Wio LTE na zadano.

Dio 2. Web stranica

Idite na PubNub, unesite Demo Keyset i kliknite Debug Console s lijeve strane, otvorit će se nova stranica.

Ispunite naziv kanala u tekstualni okvir Zadani kanal, a zatim kliknite gumb Dodaj klijenta. Pričekajte neko vrijeme, vidjet ćete da se vrijednosti PM1.0, PM2.5 i PM10 pojavljuju u Debug Consoleu.

No, nije nam prijateljski nastrojen, pa smatramo da ga prikažemo kao grafikon.

Prvo stvorite novu html datoteku na svom računalu. Otvorite ga uređivačem teksta, dodajte mu osnovne html oznake.

Zatim dodajte PubNub i skriptu Chart.js u glavu, a ovoj stranici možete dodati i naslov.

Vidio Monitor prašine

Trebalo bi postojati mjesto za prikaz grafikona pa u tijelo stranice dodajemo platno.

I dodajte oznaku skripte kako bismo mogli dodati javascript za pretplatu na podatke u stvarnom vremenu i crtanje grafikona.

Da biste se pretplatili na podatke u stvarnom vremenu s PubNub-a, morate imati PubNub objekt, var pubnub = novi PubNub ({

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

i tome dodati slušatelja.

pubnub.addListener ({

poruka: funkcija (poruka) {}});

Član poruke u parametru msg poruke funkcije su nam potrebni podaci. Sada se možemo pretplatiti na podatke u stvarnom vremenu s PubNub-a:

pubnub.subscribe ({

kanal: ["prašina"]});

Ali kako to prikazati kao grafikon? Izradili smo 4 polja za čuvanje podataka u stvarnom vremenu:

var chartLabels = novi Array ();

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

Među njima, niz chartLabels koristi se za čuvanje dosegnutih podataka, chartPM1Data, chartPM25Data i chartPM10Data se koriste za čuvanje PM1.0 podataka, PM2.5 podataka i PM10 podataka. Kad podaci u stvarnom vremenu dođu, odvojeno ih gurnite u nizove.

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

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

Zatim prikažite grafikon:

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

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

Sada otvorite ovu html datoteku s web preglednikom, vidjet ćete promjene podataka.