Atmosfärisk föroreningsvisualisering: 4 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:45

Problemet med luftföroreningar väcker mer och mer uppmärksamhet. Den här gången försökte vi övervaka PM2.5 med Wio LTE och nya Laser PM2.5 -sensor.

Steg 1: Saker som används i detta projekt

Hårdvarukomponenter

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

Programvaruappar och onlinetjänster

• Arduino IDE
• PubNub Publicera/prenumerera API

Steg 2: Maskinvaruanslutning

Som bilden ovan skär vi 2 grove -linjer för I2C -kommunikation, så att Wio LTE kan ansluta till LCD Grove och PM2.5 Sensor Grove samtidigt. Du kan använda en I2C Hub för att uppnå det heller.

Och glöm inte, anslut LTE -antennen till Wio LTE och anslut ditt SIM -kort till det.

Steg 3: Webbkonfiguration

Klicka här för att logga in eller registrera ett PubNub-konto, det kommer att användas för att överföra realtidsdata.

I PubNub Admin Portal ser du ett demoprojekt. Gå in i projektet, det har två nycklar, publiceringsnyckel och prenumerationsnyckel, kom ihåg dem för programvaruprogrammering.

Steg 4: Programvaruprogrammering

Del 1. Wio LTE

Eftersom det inte finns något PubNub-bibliotek för Wio LTE kan vi publicera vår realtidsdata via HTTP-begäran, se PubNub REST API Document.

För att skapa en HTTP -anslutning från ditt SIM -kort som är anslutet till Wio LTE, bör du först ställa in ditt APN. Kontakta din mobiloperatör om du inte vet det.

Och ställ in din PubNub -publiceringsnyckel, prenumerationsnyckel och kanal efter att du har ställt in APN. En kanal här, används för att skilja utgivare och prenumeranter. Prenumeranter kommer att ta emot data från utgivare som har samma kanal.

Håll ned Boot0 -knappen i Wio LTE, anslut den till din dator via en USB -kabel, ladda upp koden i Arduino IDE till den. Efter uppladdning trycker du på RST -knappen för att återställa Wio LTE.

Del 2. Webbsida

Vänd till PubNub, ange Demo Keyset och klicka på Debug Console till vänster, det öppnar en ny sida.

Fyll ditt kanalnamn i textrutan Standardkanal och klicka sedan på knappen Lägg till klient. Vänta en stund, så ser du PM1.0, PM2.5 och PM10 -värdet i Debug Console.

Men det är inte vänligt för oss, så vi överväger att visa det som diagram.

Skapa först en ny html -fil i din dator. Öppna den med en textredigerare, lägg till grundläggande html -taggar till den.

Lägg sedan till PubNub och Chart.js skript i huvudet, du kan också lägga till en titel på den här sidan.

Seeed Dust Monitor

Det bör finnas en plats för att visa ett diagram, så vi lägger till en duk till sidans kropp.

Och lägg till skripttagg så att vi kan lägga till javascript för att prenumerera data i realtid och rita diagrammet.

För att prenumerera data i realtid från PubNub bör det ha ett PubNub-objekt, var pubnub = new PubNub ({

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

och lägg till en lyssnare.

pubnub.addListener ({

meddelande: funktion (msg) {}});

Meddelandemedlemmen i parameter msg i funktionsmeddelande är den data vi behöver. Nu kan vi prenumerera realtidsdata från PubNub:

pubnub.subscribe ({

kanal: ["damm"]});

Men hur visar man det som diagram? Vi skapade 4 matriser för att behålla data i realtid:

var chartLabels = new Array ();

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

Bland dem används chartLabels -array för att hålla data nådd, chartPM1Data, chartPM25Data och chartPM10Data används för att hålla PM1.0 -data, PM2.5 -data respektive PM10 -data. När data i realtid når, skjut dem till matriser separat.

chartLabels.push (nytt datum (). toLocalString ());

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

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

Öppna nu denna html -fil med webbläsare, du kommer att se dataändringar.