Vizualizácia znečistenia atmosféry: 4 kroky

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:59

Problém znečistenia ovzdušia priťahuje čoraz väčšiu pozornosť. Tentokrát sme sa pokúsili monitorovať PM2,5 pomocou Wio LTE a nového laserového senzora PM2,5.

Krok 1: Veci použité v tomto projekte

Hardvérové komponenty

• Kompatibilné s Wio LTE EU verzia v1.3- 4G, Cat.1, GNSS, Espruino
• Grove - laserový snímač PM2,5 (HM3301)
• Grove - 16 x 2 LCD (biely na modrom)

Softvérové aplikácie a online služby

• Arduino IDE
• PubNub Publish/Subscribe API

Krok 2: Pripojenie hardvéru

Ako na obrázku vyššie sme pre komunikáciu I2C prerušili 2 hájové linky, aby sa Wio LTE mohlo pripojiť k LCD Grove a PM2.5 Sensor Grove súčasne. Na dosiahnutie tohto cieľa môžete použiť aj I2C Hub.

A nezabudnite, pripojte LTE anténu k Wio LTE a zapojte do nej svoju SIM kartu.

Krok 3: Webová konfigurácia

Kliknutím sem sa prihlásite alebo zaregistrujete účet PubNub, ktorý bude slúžiť na prenos údajov v reálnom čase.

Na portáli pre správu PubNub uvidíte ukážkový projekt. Vstúpte do projektu, tam sú 2 kľúče, publikovací kľúč a predplatiteľský kľúč, zapamätajte si ich pre softvérové programovanie.

Krok 4: Programovanie softvéru

Časť 1. Wio LTE

Pretože pre Wio LTE neexistuje žiadna knižnica PubNub, môžeme údaje v reálnom čase publikovať prostredníctvom požiadavky HTTP, pozrite si dokument API REST API PubNub.

Ak chcete vytvoriť pripojenie HTTP z karty SIM zapojenej do siete Wio LTE, najskôr nastavte APN. Ak to neviete, kontaktujte svojho mobilného operátora.

A po nastavení APN nastavte svoj publikačný kľúč PubNub, predplatiteľský kľúč a kanál. Kanál tu slúži na rozlíšenie vydavateľov a predplatiteľov. Odberatelia budú dostávať údaje od vydavateľov, ktorí majú rovnaký kanál.

Vo Wio LTE stlačte a podržte tlačidlo Boot0, pripojte ho k počítaču pomocou kábla USB, nahrajte doň kód v Arduino IDE. Po nahraní resetujte Wio LTE stlačením tlačidla RST.

Časť 2. Webová stránka

Otočte sa na PubNub, zadajte Demo Keyset a kliknite na Debug Console vľavo, otvorí sa nová stránka.

Vyplňte názov kanála do textového poľa Predvolený kanál a potom kliknite na tlačidlo Pridať klienta. Chvíľu počkajte, v Debug Console sa zobrazí hodnota PM1.0, PM2.5 a PM10.

Nie je to však pre nás priateľské, preto zvažujeme jeho zobrazenie ako grafu.

Najprv vytvorte vo svojom počítači nový html súbor. Otvorte ho v textovom editore, pridajte k nemu základné html značky.

Potom do hlavy pridajte skript PubNub a Chart.js. Na túto stránku môžete pridať aj názov.

Videl monitor prachu

Malo by byť miesto na zobrazenie grafu, preto do tela stránky pridáme plátno.

A pridajte značku skriptu, aby sme mohli pridať javascript na odber údajov v reálnom čase a kreslenie grafu.

Na prihlásenie sa na odber údajov v reálnom čase z PubNub by mal existovať objekt PubNub, var pubnub = nový PubNub ({

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

a pridajte k tomu poslucháča.

pubnub.addListener ({

správa: funkcia (msg) {}});

Člen správy v parametri msg funkčnej správy sú údaje, ktoré potrebujeme. Teraz sa môžeme prihlásiť na odber údajov v reálnom čase z PubNub:

pubnub.subscribe ({

kanál: ["prach"]});

Ako ho však zobraziť ako graf? Vytvorili sme 4 polia na uchovávanie údajov v reálnom čase:

var chartLabels = new Array ();

var chartPM1Data = nové pole (); var chartPM25Data = nové pole (); var chartPM10Data = nové pole ();

Medzi nimi sa pole chartLabels používa na udržanie dosiahnutého času údajov, chartPM1Data, chartPM25Data a chartPM10Data sa používajú na uchovávanie údajov PM1.0, údajov PM2,5 a PM10. Keď dosiahnete údaje v reálnom čase, presuňte ich do polí oddelene.

chartLabels.push (nový dátum (). toLocalString ());

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

Potom zobrazte graf:

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

Teraz otvorte tento html súbor vo webovom prehliadači, uvidíte zmeny údajov.