Pagpapakita sa Atmospheric Polusyon: 4 na Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:13

Ang problema sa polusyon sa hangin ay nakakaakit ng higit at higit na pansin. Sa oras na ito sinubukan naming subaybayan ang PM2.5 sa Wio LTE at bagong Laser PM2.5 Sensor.

Hakbang 1: Mga Bagay na Ginamit sa Project na Ito

Mga bahagi ng hardware

• Wio LTE Bersyon ng EU v1.3- 4G, Cat.1, GNSS, Espruino Tugma
• Grove - Laser PM2.5 Sensor (HM3301)
• Grove - 16 x 2 LCD (Puti sa Asul)

Mga software app at serbisyong online

• Arduino IDE
• PubNub Publish / Subscribe API

Hakbang 2: Koneksyon sa Hardware

Tulad ng larawan sa itaas, pinutol namin ang 2 mga linya ng grove para sa komunikasyon ng I2C, upang ang Wio LTE ay maaaring kumonekta sa LCD Grove at PM2.5 Sensor Grove nang sabay. Maaari mong gamitin ang isang I2C Hub upang makamit iyon alinman din.

At huwag kalimutan, ikonekta ang antena ng LTE sa Wio LTE at isaksak dito ang iyong SIM card.

Hakbang 3: Pag-configure sa Web

Mag-click dito upang mag-login o magrehistro ng isang PubNub account, gagamitin ito para sa paglilipat ng real-time na data.

Sa PubNub Admin Portal, makakakita ka ng isang Demo Project. Ipasok ang proyekto, mayroong 2 mga susi, I-publish ang Susi at Mag-subscribe Key, alalahanin ang mga ito para sa Programming ng Software.

Hakbang 4: Programming ng Software

Bahagi 1. Wio LTE

Dahil walang library ng PubNub para sa Wio LTE, maaari naming mai-publish ang aming real-time na data sa pamamagitan ng kahilingan sa HTTP, tingnan ang PubNub REST API Document.

Upang makagawa ng isang koneksyon sa HTTP mula sa iyong SIM card na naka-plug sa Wio LTE, dapat mo munang itakda ang iyong APN. Kung hindi mo alam iyon, mangyaring makipag-ugnay sa iyong mobile operator.

At itakda ang iyong PubNub Publish Key, Subscribe Key at Channel pagkatapos itakda ang APN. Ang isang Channel dito, ay ginagamit upang makilala ang mga Publisher at Subscriber, makakatanggap ang mga Subscriber ng data mula sa Mga Publisher na may parehong Channel.

Pindutin nang matagal ang Boot0 button sa Wio LTE, ikonekta ito sa iyong computer sa pamamagitan ng isang USB cable, i-upload ang code sa Arduino IDE dito. Pagkatapos mag-upload, pindutin ang RST button upang i-reset ang Wio LTE.

Bahagi 2. Pahina ng Web

Lumiko sa PubNub, ipasok ang Demo Keyset, at i-click ang Debug Console sa kaliwa, magbubukas ito ng isang bagong pahina.

Punan ang iyong pangalan ng channel sa kahon ng teksto ng Default na Channel, pagkatapos ay i-click ang Magdagdag ng pindutan ng Client. Maghintay ng ilang sandali, makikita mo ang halagang PM1.0, PM2.5 at PM10 na lilitaw sa Debug Console.

Ngunit hindi ito magiliw sa amin, kaya isinasaalang-alang namin itong ipakita bilang tsart.

Una sa lahat, lumikha ng isang bagong html file sa iyong computer. Buksan ito ng isang text editor, magdagdag ng mga pangunahing mga html na tag dito.

Pagkatapos ay idagdag ang script ng PubNub at Chart.js sa ulo, maaari ka ring magdagdag ng isang pamagat sa pahinang ito.

Nakita ang Monitor ng Alikabok

Dapat mayroong isang lugar upang magpakita ng isang tsart, kaya nagdagdag kami ng isang canvas sa katawan ng pahina.

At magdagdag ng tag ng script upang makapagdagdag kami ng javascript upang mag-subscribe ng real-time na data at iguhit ang tsart.

Upang mag-subscribe ng real-time na data mula sa PubNub, dapat mayroong isang object na PubNub, var pubnub = bagong PubNub ({

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

at magdagdag ng isang tagapakinig dito.

pubnub.addListener ({

mensahe: pagpapaandar (msg) {}});

Ang miyembro ng mensahe sa parameter na msg ng pagpapaandar na mensahe ay ang data na kailangan namin. Ngayon ay maaari na kaming mag-subscribe ng real-time na data mula sa PubNub:

pubnub.subscribe ({

channel: ["dust"]});

Ngunit paano ito ipakita bilang tsart? Lumikha kami ng 4 na mga array upang mapanatili ang real-time na data:

var chartLabels = bagong Array ();

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

Kabilang sa mga ito, ginagamit ang array ng chartLabels upang mapanatili ang oras na naabot ang data, ginagamit ang chartPM1Data, chartPM25Data at chartPM10Data para sa pagpapanatili ng data ng PM1.0, data ng PM2.5 at data ng PM10 ayon sa pagkakabanggit. Kapag umabot ang real-time na data, itulak ang mga ito sa mga hiwalay na pag-array.

chartLabels.push (bagong Petsa (). toLocalString ());

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

Pagkatapos ay ipakita ang tsart:

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

var chart = bagong 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}]}});

Ngayon buksan ang html file na ito sa web browser, makikita mo ang mga pagbabago sa data.