Visualització de la contaminació atmosfèrica: 4 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:14

El problema de la contaminació atmosfèrica crida cada vegada més l’atenció. Aquesta vegada hem intentat controlar PM2.5 amb Wio LTE i el nou sensor làser PM2.5.

Pas 1: coses utilitzades en aquest projecte

Components de maquinari

• Wio LTE Versió UE v1.3- 4G, Cat.1, GNSS, compatible amb Espruino
• Grove - Sensor làser PM2.5 (HM3301)
• Grove - LCD de 16 x 2 (blanc sobre blau)

Aplicacions de programari i serveis en línia

• IDE Arduino
• API PubNub Publish / Subscribe

Pas 2: connexió de maquinari

Com es mostra a la imatge superior, vam tallar 2 línies de bosquet per a la comunicació I2C, de manera que Wio LTE es pugui connectar al LCD Grove i al sensor PM2.5 al mateix temps. Podeu utilitzar un hub I2C per aconseguir-ho.

I no ho oblideu, connecteu l’antena LTE a Wio LTE i connecteu-hi la targeta SIM.

Pas 3: Configuració web

Feu clic aquí per iniciar sessió o registrar un compte de PubNub, que s’utilitzarà per transmetre dades en temps real.

Al Portal d’administració de PubNub, veureu un projecte de demostració. Introduïu el projecte, hi ha 2 claus, Publicar clau i Subscriure clau, recordeu-les per a la programació de programari.

Pas 4: programació de programari

Part 1. Wio LTE

Com que no hi ha cap biblioteca PubNub per a Wio LTE, podem publicar les nostres dades en temps real mitjançant una sol·licitud HTTP. Consulteu el document API de PubNub REST.

Per establir una connexió HTTP des de la targeta SIM connectada a Wio LTE, primer heu d’establir l’APN. Si no ho sabeu, poseu-vos en contacte amb el vostre operador de telefonia mòbil.

I definiu la vostra clau de publicació, subscripció i canal de PubNub després de configurar APN. Un canal aquí s’utilitza per diferenciar els editors i els subscriptors; els subscriptors rebran dades dels editors que tinguin el mateix canal.

Manteniu premut el botó Boot0 de Wio LTE, connecteu-lo a l'ordinador mitjançant un cable USB i pengeu-hi el codi en IDE Arduino. Després de carregar, premeu el botó RST per restablir Wio LTE.

Part 2. Pàgina web

Gireu a PubNub, introduïu el conjunt de claus de demostració i feu clic a Consola de depuració a l'esquerra, s'obrirà una pàgina nova.

Empleneu el nom del vostre canal al quadre de text del canal per defecte i feu clic al botó Afegeix client. Espereu un temps, veureu que apareixen els valors PM1.0, PM2.5 i PM10 a la consola de depuració.

Però no ens resulta amable, de manera que considerem mostrar-lo com a gràfic.

En primer lloc, creeu un fitxer html nou a l’ordinador. Obriu-lo mitjançant un editor de text, afegiu-hi etiquetes HTML bàsiques.

A continuació, afegiu l'script de PubNub i Chart.js al cap, també podeu afegir un títol a aquesta pàgina.

Monitor de pols de llavors

Hi hauria d’haver un lloc on mostrar un gràfic, de manera que afegim un llenç al cos de la pàgina.

I afegiu una etiqueta de script per poder afegir javascript per subscriure dades en temps real i dibuixar el gràfic.

Per subscriure dades en temps real de PubNub, hauria de tenir un objecte PubNub, var pubnub = nou PubNub ({

publishKey: "", subscribeKey: ""});

i afegiu-hi un oient.

pubnub.addListener ({

missatge: funció (msg) {}});

El membre del missatge del paràmetre msg del missatge de la funció són les dades que necessitem. Ara podem subscriure dades en temps real de PubNub:

pubnub.subscribe ({

canal: ["pols"]});

Però, com mostrar-lo com a gràfic? Hem creat 4 matrius per conservar dades en temps real:

var chartLabels = new Array ();

var chartPM1Data = new Array (); var chartPM25Data = new Array (); var chartPM10Data = new Array ();

Entre ells, la matriu chartLabels s’utilitza per mantenir el temps assolit de les dades, chartPM1Data, chartPM25Data i chartPM10Data s’utilitzen per conservar les dades PM1.0, PM2.5 i PM10 respectivament. Quan arribin les dades en temps real, empenyeu-les a matrius per separat.

chartLabels.push (new Date (). toLocalString ());

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

A continuació, mostreu el gràfic:

var ctx = document.getElementById ("gràfic"). 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}]}});

Ara obriu aquest fitxer html amb el navegador web, veureu canvis de dades.