Visualisatie van atmosferische vervuiling: 4 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:17

De problematiek van luchtverontreiniging trekt steeds meer aandacht. Deze keer probeerden we PM2.5 te monitoren met Wio LTE en de nieuwe Laser PM2.5-sensor.

Stap 1: Dingen die in dit project worden gebruikt

Hardware onderdelen

• Wio LTE EU-versie v1.3- 4G, Cat.1, GNSS, Espruino-compatibel
• Grove - Laser PM2.5-sensor (HM3301)
• Grove - 16 x 2 LCD (wit op blauw)

Software-apps en online services

• Arduino IDE
• PubNub Publish/Subscribe API

Stap 2: Hardwareverbinding

Zoals de afbeelding hierboven, snijden we 2 grove lijnen voor I2C-communicatie, zodat Wio LTE tegelijkertijd verbinding kan maken met LCD Grove en PM2.5 Sensor Grove. Je kunt ook een I2C Hub gebruiken om dat te bereiken.

En vergeet niet, sluit de LTE-antenne aan op Wio LTE en sluit je simkaart erop aan.

Stap 3: Webconfiguratie

Klik hier om in te loggen of een PubNub-account te registreren, het zal worden gebruikt voor het verzenden van realtime gegevens.

In PubNub Admin Portal ziet u een demoproject. Voer het project in, er zijn 2 sleutels, Publish Key en Subscribe Key, onthoud ze voor softwareprogrammering.

Stap 4: Softwareprogrammering

Deel 1. Wio LTE

Omdat er geen PubNub-bibliotheek is voor Wio LTE, kunnen we onze realtime gegevens publiceren via HTTP-verzoek, zie PubNub REST API-document.

Om een HTTP-verbinding te maken vanaf uw SIM-kaart die is aangesloten op Wio LTE, moet u eerst uw APN instellen. Als je dat niet weet, neem dan contact op met je mobiele provider.

En stel uw PubNub-publicatiesleutel, abonneersleutel en kanaal in nadat u APN hebt ingesteld. Een kanaal hier wordt gebruikt om uitgevers en abonnees te onderscheiden. Abonnees ontvangen gegevens van uitgevers die hetzelfde kanaal hebben.

Houd de Boot0-knop in Wio LTE ingedrukt, sluit hem aan op uw computer via een USB-kabel, upload de code in Arduino IDE ernaar. Druk na het uploaden op de RST-knop om Wio LTE te resetten.

Deel 2. Webpagina

Ga naar PubNub, voer Demo Keyset in en klik op Debug Console aan de linkerkant, er wordt een nieuwe pagina geopend.

Vul uw kanaalnaam in het tekstvak Standaardkanaal in en klik vervolgens op de knop Client toevoegen. Wacht even, je ziet de PM1.0-, PM2.5- en PM10-waarde verschijnen in Debug Console.

Maar het is niet vriendelijk voor ons, dus we overwegen het als grafiek weer te geven.

Maak eerst een nieuw html-bestand op uw computer. Open het met een teksteditor, voeg er basis-html-tags aan toe.

Voeg vervolgens het script van PubNub en Chart.js toe, je kunt ook een titel aan deze pagina toevoegen.

Zaadstofmonitor

Er zou een plaats moeten zijn om een grafiek weer te geven, dus we voegen een canvas toe aan de hoofdtekst van de pagina.

En voeg een scripttag toe zodat we javascript kunnen toevoegen om realtime gegevens te abonneren en de grafiek te tekenen.

Om realtime gegevens van PubNub te abonneren, moet er een PubNub-object zijn, var pubnub = nieuwe PubNub({

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

en voeg er een luisteraar aan toe.

pubnub.addListener({

bericht: functie (bericht) { } });

Het berichtlid in parameter msg van functiebericht zijn de gegevens die we nodig hebben. Nu kunnen we realtime gegevens van PubNub abonneren:

pubnub.subscribe({

kanaal: ["stof"] });

Maar hoe het als grafiek weer te geven? We hebben 4 arrays gemaakt om realtime gegevens te bewaren:

var chartLabels = nieuwe Array();

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

Onder hen wordt de chartLabels-array gebruikt om de bereikte tijd van gegevens te behouden, chartPM1Data, chartPM25Data en chartPM10Data worden gebruikt voor respectievelijk het bewaren van PM1.0-gegevens, PM2.5-gegevens en PM10-gegevens. Wanneer realtime gegevens worden bereikt, pusht u ze afzonderlijk naar arrays.

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

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

Geef vervolgens de grafiek weer:

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

Open nu dit html-bestand met de webbrowser, u ziet gegevenswijzigingen.