Wizualizacja zanieczyszczenia atmosfery: 4 kroki

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:31

Problem zanieczyszczenia powietrza przyciąga coraz więcej uwagi. Tym razem spróbowaliśmy monitorować PM2.5 za pomocą Wio LTE i nowego Laserowego Sensora PM2.5.

Krok 1: Rzeczy użyte w tym projekcie

Komponenty sprzętowe

• Wio LTE EU Wersja v1.3- 4G, Cat.1, GNSS, kompatybilna z Espruino
• Grove - laserowy czujnik PM2,5 (HM3301)
• Grove - 16 x 2 LCD (biały na niebieskim)

Aplikacje i usługi online

• IDE Arduino
• PubNub Publikuj/Subskrybuj API

Krok 2: Połączenie sprzętowe

Jak na powyższym obrazku, przecinamy 2 linie Grove do komunikacji I2C, aby Wio LTE mogło łączyć się jednocześnie z LCD Grove i PM2.5 Sensor Grove. Aby to osiągnąć, możesz użyć koncentratora I2C.

I nie zapomnij, podłącz antenę LTE do Wio LTE i podłącz do niej kartę SIM.

Krok 3: Konfiguracja sieciowa

Kliknij tutaj, aby się zalogować lub zarejestrować konto PubNub, będzie ono używane do przesyłania danych w czasie rzeczywistym.

W portalu administracyjnym PubNub zobaczysz projekt demonstracyjny. Wejdź do projektu, masz 2 klucze, klucz publikowania i klucz subskrypcji, zapamiętaj je do programowania oprogramowania.

Krok 4: Programowanie oprogramowania

Część 1. Wio LTE

Ponieważ nie ma biblioteki PubNub dla Wio LTE, możemy publikować nasze dane w czasie rzeczywistym za pośrednictwem żądania HTTP, zobacz dokument PubNub REST API.

Aby nawiązać połączenie HTTP z karty SIM podłączonej do Wio LTE, należy najpierw ustawić swój APN. Jeśli tego nie wiesz, skontaktuj się ze swoim operatorem komórkowym.

I ustaw klucz publikacji PubNub, klucz subskrypcji i kanał po ustawieniu APN. Kanał tutaj służy do rozróżniania wydawców i subskrybentów. Subskrybenci otrzymają dane od wydawców, którzy mają ten sam kanał.

Wciśnij i przytrzymaj przycisk Boot0 w Wio LTE, podłącz go do komputera kablem USB, wgraj do niego kod w Arduino IDE. Po wgraniu naciśnij przycisk RST, aby zresetować Wio LTE.

Część 2. Strona internetowa

Przejdź do PubNub, wprowadź Demo Keyset i kliknij Debug Console po lewej stronie, otworzy się nowa strona.

Wpisz nazwę swojego kanału w polu tekstowym Kanał domyślny, a następnie kliknij przycisk Dodaj klienta. Poczekaj chwilę, w konsoli debugowania pojawią się wartości PM1.0, PM2.5 i PM10.

Ale nie jest to dla nas przyjazne, dlatego rozważamy wyświetlanie go jako wykresu.

Najpierw utwórz nowy plik html na swoim komputerze. Otwórz go za pomocą edytora tekstu, dodaj do niego podstawowe tagi html.

Następnie dodaj do nagłówka skrypt PubNub i Chart.js, możesz też dodać tytuł do tej strony.

Monitor pyłu nasion

Powinno być miejsce na wyświetlenie wykresu, więc do ciała strony dodajemy kanwę.

I dodaj tag skryptu, abyśmy mogli dodać javascript do subskrybowania danych w czasie rzeczywistym i narysowania wykresu.

Aby zasubskrybować dane w czasie rzeczywistym z PubNub, powinien mieć obiekt PubNub, var pubnub = nowy PubNub({

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

i dodaj do niego słuchacza.

pubnub.addListener({

wiadomość: function(msg) { } });

Element komunikatu w parametrze msg funkcji komunikat to dane, których potrzebujemy. Teraz możemy subskrybować dane w czasie rzeczywistym z PubNub:

pubnub.subskrybuj({

kanał: ["kurz"] });

Ale jak wyświetlić to jako wykres? Stworzyliśmy 4 tablice do przechowywania danych w czasie rzeczywistym:

var chartLabels = new Array();

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

Wśród nich tablica chartLabels służy do przechowywania czasu osiągnięcia danych, chartPM1Data, chartPM25Data i chartPM10Data służą do przechowywania odpowiednio danych PM1.0, PM2.5 i PM10. Gdy dotrą dane w czasie rzeczywistym, wypychaj je osobno do macierzy.

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

chartPM1Data.push(msg.wiadomość.pm1); chartPM25Data.push(msg.wiadomość.pm25); chartPM10Data.push(msg.wiadomość.pm10);

Następnie wyświetl wykres:

var ctx = document.getElementById("wykres").getContext("2d");

var chart = new Chart(ctx, { type: "line", data: { label: 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 }] } });

Teraz otwórz ten plik html za pomocą przeglądarki internetowej, zobaczysz zmiany danych.