Visualización de la contaminación atmosférica: 4 pasos
Visualización de la contaminación atmosférica: 4 pasos

Tabla de contenido:

Anonim
Visualización de la contaminación atmosférica
Visualización de la contaminación atmosférica

El problema de la contaminación del aire atrae cada vez más atención. Esta vez intentamos monitorear PM2.5 con Wio LTE y el nuevo Sensor Laser PM2.5.

Paso 1: Cosas utilizadas en este proyecto

Componentes de hardware

  • Wio LTE EU Versión v1.3- 4G, Cat.1, GNSS, Compatible con Espruino
  • Grove - Sensor láser PM2.5 (HM3301)
  • Grove - LCD de 16 x 2 (blanco sobre azul)

Aplicaciones de software y servicios en línea

  • IDE de Arduino
  • API PubNub Publish / Subscribe

Paso 2: Conexión de hardware

Conexión de hardware
Conexión de hardware

Como se muestra en la imagen de arriba, cortamos 2 líneas de arboledas para la comunicación I2C, de modo que Wio LTE pueda conectarse a LCD Grove y PM2.5 Sensor Grove al mismo tiempo. Puede usar un concentrador I2C para lograrlo.

Y no se olvide, conecte la antena LTE a Wio LTE y conecte su tarjeta SIM.

Paso 3: configuración web

Configuración web
Configuración web

Haga clic aquí para iniciar sesión o registrar una cuenta PubNub, se utilizará para transmitir datos en tiempo real.

En PubNub Admin Portal, verá un proyecto de demostración. Ingrese el proyecto, tiene 2 claves, Publish Key y Subscribe Key, recuérdelas para la Programación de Software.

Paso 4: Programación de software

Parte 1. Wio LTE

Debido a que no existe una biblioteca PubNub para Wio LTE, podemos publicar nuestros datos en tiempo real a través de una solicitud HTTP, consulte el documento API REST de PubNub.

Imagen
Imagen

Para realizar una conexión HTTP desde su tarjeta SIM conectada a Wio LTE, primero debe configurar su APN. Si no lo sabe, comuníquese con su operador de telefonía móvil.

Y configure su clave de publicación de PubNub, clave de suscripción y canal después de configurar APN. Aquí, un canal se utiliza para diferenciar editores y suscriptores, los suscriptores recibirán datos de editores que tengan el mismo canal.

Mantenga presionado el botón Boot0 en Wio LTE, conéctelo a su computadora a través de un cable USB, cargue el código en Arduino IDE. Después de cargar, presione el botón RST para restablecer Wio LTE.

Parte 2. Página web

Vaya a PubNub, ingrese Demo Keyset y haga clic en Debug Console a la izquierda, se abrirá una nueva página.

Imagen
Imagen

Complete el nombre de su canal en el cuadro de texto Canal predeterminado, luego haga clic en el botón Agregar cliente. Espere un momento, verá aparecer el valor PM1.0, PM2.5 y PM10 en la consola de depuración.

Pero no es amigable para nosotros, por lo que consideramos mostrarlo como un gráfico.

En primer lugar, cree un nuevo archivo html en su computadora. Ábralo con un editor de texto, agregue etiquetas html básicas.

Luego agregue el script de PubNub y Chart.js al encabezado, también puede agregar un título a esta página.

Monitor de polvo de semillas

Debe haber un lugar para mostrar un gráfico, por lo que agregamos un lienzo al cuerpo de la página.

Y agregue una etiqueta de script para que podamos agregar javascript para suscribir datos en tiempo real y dibujar el gráfico.

Para suscribirse a datos en tiempo real de PubNub, debe haber un objeto PubNub, var pubnub = new PubNub ({

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

y agregarle un oyente.

pubnub.addListener ({

mensaje: función (msg) {}});

El miembro del mensaje en el parámetro msg de la función message son los datos que necesitamos. Ahora podemos suscribirnos a datos en tiempo real desde PubNub:

pubnub.subscribe ({

canal: ["polvo"]});

Pero, ¿cómo mostrarlo como gráfico? Creamos 4 matrices para mantener datos en tiempo real:

var chartLabels = new Array ();

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

Entre ellos, la matriz chartLabels se usa para mantener los datos alcanzados en el tiempo, chartPM1Data, chartPM25Data y chartPM10Data se usan para mantener los datos PM1.0, los datos PM2.5 y los datos PM10 respectivamente. Cuando lleguen los datos en tiempo real, envíelos a los arreglos por separado.

chartLabels.push (nueva fecha (). toLocalString ());

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

Luego muestre el gráfico:

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

Ahora abra este archivo html con el navegador web, verá cambios en los datos.