Vizualizimi i ndotjes atmosferike: 4 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:20

Problemi i ndotjes së ajrit tërheq gjithnjë e më shumë vëmendje. Këtë herë ne u përpoqëm të monitoronim PM2.5 me Wio LTE dhe sensor të ri Laser PM2.5.

Hapi 1: Gjërat e përdorura në këtë projekt

Komponentët e harduerit

• Wio LTE EU Version v1.3- 4G, Cat.1, GNSS, Espruino Compatible
• Grove - Sensor Laser PM2.5 (HM3301)
• Grove - 16 x 2 LCD (E Bardhë në Blu)

Aplikacionet softuerike dhe shërbimet online

• Arduino IDE
• PubNub Publikimi/Abonimi API

Hapi 2: Lidhja e harduerit

Siç është fotografia e mësipërme, ne kemi prerë 2 linja grove për komunikimin I2C, në mënyrë që Wio LTE të lidhet me LCD Grove dhe PM2.5 Sensor Grove në të njëjtën kohë. Për ta arritur këtë, mund të përdorni një Qendër I2C.

Dhe mos harroni, lidhni antenën LTE me Wio LTE dhe lidhni kartën tuaj SIM me të.

Hapi 3: Konfigurimi i Uebit

Klikoni këtu për të hyrë ose regjistruar një llogari PubNub, ajo do të përdoret për transmetimin e të dhënave në kohë reale.

Në Portalin e Administratorëve PubNub, do të shihni një Projekt Demo. Hyni në projekt, ka 2 çelësa, Publiko Çelësin dhe Regjistrohu Çelësin, mbaji mend ato për Programimin e Softuerëve.

Hapi 4: Programimi i softuerit

Pjesa 1. Wio LTE

Për shkak se nuk ka bibliotekë PubNub për Wio LTE, ne mund të publikojmë të dhënat tona në kohë reale nëpërmjet kërkesës HTTP, shiko PubNub REST API Document.

Për të bërë një lidhje HTTP nga karta juaj SIM e lidhur me Wio LTE, duhet së pari të vendosni APN -në tuaj. Nëse nuk e dini këtë, ju lutemi kontaktoni operatorin tuaj celular.

Dhe vendosni çelësin tuaj të publikimit PubNub, çelësin e pajtimit dhe kanalin pasi të keni vendosur APN. Një kanal këtu, përdoret për të dalluar Botuesit dhe Abonentët, Abonentët do të marrin të dhëna nga Botuesit që kanë të njëjtin Kanal.

Shtypni dhe mbani butonin Boot0 në Wio LTE, lidheni atë me kompjuterin tuaj nëpërmjet një kabllo USB, ngarkoni kodin në Arduino IDE në të. Pas ngarkimit, shtypni butonin RST për të rivendosur Wio LTE.

Pjesa 2. Faqja e internetit

Kthehuni te PubNub, futni Demo Keyset dhe klikoni Debug Console në të majtë, do të hapë një faqe të re.

Plotësoni emrin e kanalit tuaj në kutinë e tekstit të Kanalit të Parazgjedhur, pastaj klikoni në butonin Shto klient. Prisni pak, do të shihni që vlera PM1.0, PM2.5 dhe PM10 shfaqen në Debug Console.

Por nuk është miqësore me ne, kështu që ne konsiderojmë ta shfaqim atë si tabelë.

Së pari, krijoni një skedar të ri html në kompjuterin tuaj. Hapeni atë nga një redaktues teksti, shtoni etiketat themelore html në të.

Pastaj shtoni shkrimin e PubNub dhe Chart.js në krye, gjithashtu mund të shtoni një titull në këtë faqe.

Shikoi Monitorin e Pluhurit

Duhet të ketë një vend për të shfaqur një tabelë, kështu që ne shtojmë një kanavacë në trupin e faqes.

Dhe shtoni etiketën e shkrimit në mënyrë që të mund të shtojmë javascript për të regjistruar të dhëna në kohë reale dhe për të nxjerrë tabelën.

Për të regjistruar të dhëna në kohë reale nga PubNub, duhet të ketë një objekt PubNub, var pubnub = PubNub i ri ({

botoKy: "", subscribeKelës: ""});

dhe shtoni një dëgjues në të.

pubnub.addListener ({

mesazh: funksioni (msg) {}});

Anëtari i mesazhit në parametrin msg të mesazhit të funksionit janë të dhënat që na duhen. Tani mund të abonohemi në të dhëna në kohë reale nga PubNub:

pubnub.subscribe ({

kanali: ["pluhur"]});

Por si ta shfaqni atë si tabelë? Ne krijuam 4 grupe për të ruajtur të dhënat në kohë reale:

var chartLabels = Array e re ();

var chartPM1Data = Array e re (); var chartPM25Data = Array e re (); var chartPM10Data = Array e re ();

Midis tyre, grupi chartLabels përdoret për të mbajtur të dhënat e arritura në kohë, chartPM1Data, chart PM25Data dhe chartPM10Data përdoren për mbajtjen e të dhënave PM1.0, të dhënat PM2.5 dhe të dhënat PM10 respektivisht. Kur arrijnë të dhënat në kohë reale, shtyjini ato në vargje veç e veç.

chartLabels.push (Data e re (). teLocalString ());

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

Pastaj shfaqni tabelën:

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

var chart = tabelë e re (ctx, {type: "line", të dhëna: {labels: chartLabels, set data: [{label: "PM1.0", data: chartPM1Data, borderColor: "#FF6384", fill: false}, {label: "PM2.5", të dhënat: chartPM25Data, borderColor: "#36A2EB", mbush: false}, {label: "PM10", të dhënat: chartPM10Data, borderColor: "#CC65FE", mbush: false}]}});

Tani hapeni këtë skedar html me shfletuesin e uebit, do të shihni ndryshimet e të dhënave.