Atmosfærisk forurening Visualisering: 4 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:28

Problemet med luftforurening tiltrækker mere og mere opmærksomhed. Denne gang forsøgte vi at overvåge PM2.5 med Wio LTE og ny Laser PM2.5 -sensor.

Trin 1: Ting, der bruges i dette projekt

Hardware komponenter

• Wio LTE EU Version v1.3- 4G, Cat.1, GNSS, Espruino-kompatibel
• Grove - Laser PM2.5 -sensor (HM3301)
• Grove - 16 x 2 LCD (hvid på blå)

Software -apps og onlinetjenester

• Arduino IDE
• PubNub Publish/Subscribe API

Trin 2: Hardwareforbindelse

Som billedet ovenfor skærer vi 2 grove -linjer til I2C -kommunikation, så Wio LTE kan oprette forbindelse til LCD Grove og PM2.5 Sensor Grove på samme tid. Du kan enten bruge en I2C Hub til at opnå det.

Og glem ikke, tilslut LTE -antenne til Wio LTE og tilslut dit SIM -kort til det.

Trin 3: Webkonfiguration

Klik her for at logge ind eller registrere en PubNub-konto, den vil blive brugt til at overføre data i realtid.

I PubNub Admin Portal vil du se et demoprojekt. Indtast projektet, der har 2 nøgler, Publish Key og Subscribe Key, husk dem til Software Programming.

Trin 4: Software programmering

Del 1. Wio LTE

Da der ikke er noget PubNub-bibliotek til Wio LTE, kan vi offentliggøre vores data i realtid via HTTP-anmodning, se PubNub REST API-dokument.

For at oprette en HTTP -forbindelse fra dit SIM -kort tilsluttet Wio LTE, skal du først indstille dit APN. Hvis du ikke ved det, skal du kontakte din mobiloperatør.

Og indstil din PubNub -udgivelsesnøgle, abonnementsnøgle og kanal efter indstilling af APN. En kanal her bruges til at differentiere udgivere og abonnenter. Abonnenter modtager data fra udgivere, der har samme kanal.

Tryk og hold Boot0 -knappen inde i Wio LTE, tilslut den til din computer via et USB -kabel, upload koden i Arduino IDE til den. Efter upload, skal du trykke på RST -knappen for at nulstille Wio LTE.

Del 2. Webside

Drej til PubNub, indtast Demo Keyset, og klik på Debug Console til venstre, det åbner en ny side.

Udfyld dit kanalnavn til tekstboksen Standardkanal, og klik derefter på knappen Tilføj klient. Vent et stykke tid, du vil se PM1.0, PM2.5 og PM10 værdi vises i Debug Console.

Men det er ikke venligt for os, så vi overvejer at vise det som diagram.

Først og fremmest skal du oprette en ny html -fil på din computer. Åbn den med en tekstredigerer, tilføj grundlæggende html -tags til den.

Tilføj derefter PubNub og Chart.js 'script til hovedet, du kan også tilføje en titel til denne side.

Set støvmonitor

Der skal være et sted at vise et diagram, så vi tilføjer et lærred til sidens brødtekst.

Og tilføj script-tag, så vi kan tilføje javascript for at abonnere i realtidsdata og tegne diagrammet.

For at abonnere data i realtid fra PubNub skal der have et PubNub-objekt, var pubnub = new PubNub ({

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

og tilføj en lytter til den.

pubnub.addListener ({

meddelelse: funktion (msg) {}});

Meddelelsesmedlem i parameter msg i funktionsbesked er de data, vi har brug for. Nu kan vi abonnere data i realtid fra PubNub:

pubnub.subscribe ({

kanal: ["støv"]});

Men hvordan viser man det som diagram? Vi oprettede 4 arrays for at beholde data i realtid:

var chartLabels = new Array ();

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

Blandt dem bruges chartLabels array til at holde data nået tid, chartPM1Data, chartPM25Data og chartPM10Data bruges til at holde henholdsvis PM1.0 data, PM2.5 data og PM10 data. Når data i realtid når, skal du skubbe dem til arrays separat.

chartLabels.push (ny dato (). toLocalString ());

chartPM1Data.push (meddelelse.meddelelse.pm1); chartPM25Data.push (meddelelse.meddelelse.pm25); chartPM10Data.push (meddelelse.meddelelse.pm10);

Vis derefter diagrammet:

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

Åbn nu denne html -fil med webbrowser, du vil se dataændringer.