Visualisierung der atmosphärischen Verschmutzung - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:19

Das Problem der Luftverschmutzung erregt immer mehr Aufmerksamkeit. Diesmal haben wir versucht, PM2.5 mit Wio LTE und dem neuen Laser PM2.5 Sensor zu überwachen.

Schritt 1: Dinge, die in diesem Projekt verwendet werden

Hardware-Komponenten

• Wio LTE EU-Version v1.3- 4G, Cat.1, GNSS, Espruino-kompatibel
• Grove - Laser PM2.5-Sensor (HM3301)
• Grove - 16 x 2 LCD (Weiß auf Blau)

Software-Apps und Online-Dienste

• Arduino-IDE
• PubNub Publish/Subscribe-API

Schritt 2: Hardwareverbindung

Wie im Bild oben haben wir 2 Grove-Leitungen für die I2C-Kommunikation geschnitten, damit Wio LTE gleichzeitig mit LCD Grove und PM2.5 Sensor Grove verbunden werden kann. Sie können auch einen I2C-Hub verwenden, um dies zu erreichen.

Und nicht vergessen, LTE-Antenne an Wio LTE anschließen und SIM-Karte einstecken.

Schritt 3: Webkonfiguration

Klicken Sie hier, um sich anzumelden oder ein PubNub-Konto zu registrieren, es wird für die Übertragung von Echtzeitdaten verwendet.

Im PubNub Admin Portal sehen Sie ein Demoprojekt. Geben Sie das Projekt ein, es gibt 2 Schlüssel, Publish Key und Subscribe Key, merken Sie sich diese für die Softwareprogrammierung.

Schritt 4: Softwareprogrammierung

Teil 1. Wio LTE

Da es keine PubNub-Bibliothek für Wio LTE gibt, können wir unsere Echtzeitdaten per HTTP-Anfrage veröffentlichen, siehe PubNub REST API Document.

Um eine HTTP-Verbindung von Ihrer an Wio LTE angeschlossenen SIM-Karte herzustellen, sollten Sie zuerst Ihren APN festlegen. Wenn Sie das nicht wissen, wenden Sie sich bitte an Ihren Mobilfunkanbieter.

Und legen Sie Ihren PubNub-Veröffentlichungsschlüssel, Abonnentenschlüssel und Kanal fest, nachdem Sie den APN festgelegt haben. Ein Kanal wird hier verwendet, um Herausgeber und Abonnenten zu unterscheiden. Abonnenten erhalten Daten von Herausgebern, die denselben Kanal haben.

Drücken und halten Sie die Boot0-Taste in Wio LTE, verbinden Sie sie über ein USB-Kabel mit Ihrem Computer und laden Sie den Code in Arduino IDE darauf hoch. Drücken Sie nach dem Hochladen die RST-Taste, um Wio LTE zurückzusetzen.

Teil 2. Webseite

Wechseln Sie zu PubNub, geben Sie Demo Keyset ein und klicken Sie links auf Debug Console, um eine neue Seite zu öffnen.

Geben Sie Ihren Kanalnamen in das Textfeld Standardkanal ein und klicken Sie dann auf die Schaltfläche Client hinzufügen. Warten Sie eine Weile. In der Debug-Konsole werden die Werte PM1.0, PM2.5 und PM10 angezeigt.

Aber es ist nicht freundlich zu uns, also ziehen wir es in Betracht, es als Diagramm anzuzeigen.

Erstellen Sie zunächst eine neue HTML-Datei auf Ihrem Computer. Öffnen Sie es mit einem Texteditor und fügen Sie grundlegende HTML-Tags hinzu.

Fügen Sie dann das Skript von PubNub und Chart.js zu head hinzu. Sie können dieser Seite auch einen Titel hinzufügen.

Saatstaubmonitor

Es sollte einen Platz zum Anzeigen eines Diagramms geben, also fügen wir dem Hauptteil der Seite eine Leinwand hinzu.

Und fügen Sie ein Skript-Tag hinzu, damit wir Javascript hinzufügen können, um Echtzeitdaten zu abonnieren und das Diagramm zu zeichnen.

Um Echtzeitdaten von PubNub zu abonnieren, sollte es ein PubNub-Objekt geben, var pubnub = new PubNub({

PublishKey: "", SubscribeKey: "" });

und fügen Sie einen Listener hinzu.

pubnub.addListener({

Nachricht: Funktion (Nachricht) { } });

Das Message-Member im Parameter msg der Funktion Message sind die Daten, die wir benötigen. Jetzt können wir Echtzeitdaten von PubNub abonnieren:

pubnub.subscribe({

Kanal: ["Staub"] });

Aber wie kann man es als Diagramm anzeigen? Wir haben 4 Arrays erstellt, um Echtzeitdaten zu speichern:

var chartLabels = new Array();

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

Darunter wird das Array chartLabels verwendet, um die erreichte Zeit der Daten zu speichern, chartPM1Data, chartPM25Data und chartPM10Data werden verwendet, um PM1.0-Daten, PM2.5-Daten bzw. PM10-Daten zu speichern. Wenn Echtzeitdaten erreicht werden, verschieben Sie sie separat in Arrays.

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

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

Zeigen Sie dann das Diagramm an:

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

Öffnen Sie nun diese HTML-Datei mit einem Webbrowser, Sie sehen Datenänderungen.