Légköri szennyezés megjelenítése: 4 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:42

A légszennyezés problémája egyre több figyelmet vonz. Ezúttal a PM2.5 monitorozását próbáltuk meg Wio LTE -vel és az új Laser PM2.5 érzékelővel.

1. lépés: A projektben használt dolgok

Hardver alkatrészek

• Wio LTE EU verzió v1.3- 4G, Cat.1, GNSS, Espruino kompatibilis
• Grove - Lézer PM2.5 érzékelő (HM3301)
• Grove - 16 x 2 LCD (fehér és kék)

Szoftveralkalmazások és online szolgáltatások

• Arduino IDE
• PubNub Publish/Subscribe API

2. lépés: Hardvercsatlakozás

A fenti kép szerint 2 ligetet vágtunk az I2C kommunikációhoz, hogy a Wio LTE egyszerre csatlakozzon az LCD Grove és a PM2.5 Sensor Grove -hoz. Ennek eléréséhez használhatja az I2C Hub -ot is.

És ne felejtse el, csatlakoztassa az LTE antennát a Wio LTE -hez, és csatlakoztassa hozzá a SIM -kártyát.

3. lépés: Webkonfiguráció

Kattintson ide a PubNub-fiók bejelentkezéséhez vagy regisztrálásához, ez valós idejű adatok továbbítására szolgál.

A PubNub adminisztrációs portálján egy demo projektet fog látni. Lépjen be a projektbe, két kulcs van, a közzétételi kulcs és az előfizetési kulcs, ne feledje őket a szoftver programozáshoz.

4. lépés: Szoftverprogramozás

1. rész: Wio LTE

Mivel nincs PubNub könyvtár a Wio LTE számára, valós idejű adatainkat HTTP kérésen keresztül tehetjük közzé, lásd PubNub REST API dokumentum.

Ha HTTP -kapcsolatot szeretne létrehozni a Wio LTE -re szánt SIM -kártyáról, először állítsa be az APN -t. Ha ezt nem tudja, forduljon mobilszolgáltatójához.

Az APN beállítása után állítsa be a PubNub közzétételi kulcsot, az előfizetési kulcsot és a csatornát. Az itt található csatorna a megjelenítők és az előfizetők megkülönböztetésére szolgál, az előfizetők adatokat kapnak az azonos csatornával rendelkező kiadóktól.

Nyomja meg és tartsa lenyomva a Boot0 gombot a Wio LTE -ben, csatlakoztassa a számítógéphez USB -kábellel, és töltse fel a kódot az Arduino IDE -ben. A feltöltés után nyomja meg az RST gombot a Wio LTE alaphelyzetbe állításához.

2. rész. Weboldal

Forduljon a PubNub -hoz, írja be a Demo Keyset -et, és kattintson a Hibakereső konzol bal oldali elemére, és új oldal nyílik meg.

Töltse ki csatornája nevét az Alapértelmezett csatorna szövegmezőbe, majd kattintson az Ügyfél hozzáadása gombra. Várjon egy kicsit, és megjelenik a PM1.0, PM2.5 és PM10 érték a hibakeresési konzolban.

De nem barátságos számunkra, ezért fontoljuk meg diagramként való megjelenítését.

Először is hozzon létre egy új html fájlt a számítógépén. Nyissa meg egy szövegszerkesztővel, adjon hozzá alapvető HTML -címkéket.

Ezután adja hozzá a PubNub és a Chart.js szkriptjét a fejéhez, és címet is hozzáadhat ehhez az oldalhoz.

Látta a porfigyelőt

Egy diagram megjelenítési helynek kell lennie, ezért vásznat adunk az oldal törzséhez.

És adjon hozzá szkriptcímkét, hogy javascriptet adjunk hozzá a valós idejű adatok előfizetéséhez és a diagram rajzolásához.

A PubNub-ból valós idejű adatok előfizetéséhez rendelkeznie kell egy PubNub objektummal, var pubnub = új PubNub ({

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

és adj hozzá egy hallgatót.

pubnub.addListener ({

üzenet: function (msg) {}});

A függvényüzenet msg paraméterében lévő üzenettag a szükséges adatok. Most előfizethetünk valós idejű adatokat a PubNub-ról:

pubnub.subscribe ({

csatorna: ["por"]});

De hogyan lehet diagramként megjeleníteni? Létrehoztunk 4 tömböt a valós idejű adatok tárolására:

var chartLabels = new Array ();

var chartPM1Data = új tömb (); var chartPM25Data = új tömb (); var chartPM10Data = új tömb ();

Ezek közül a chartLabels tömb az adatok elérési idejének megőrzésére szolgál, a chartPM1Data, chartPM25Data és chartPM10Data a PM1.0, PM2.5 és PM10 adatok tárolására szolgál. Amikor a valós idejű adatok eléri, tolja őket külön tömbökbe.

chartLabels.push (új dátum (). toLocalString ());

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

Ezután jelenítse meg a diagramot:

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}]}});

Most nyissa meg ezt a html fájlt webböngészővel, és látni fogja az adatok változásait.