Anga ya Uchafuzi wa Anga: Hatua 4

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:52

Shida ya uchafuzi wa hewa huvutia umakini zaidi na zaidi. Wakati huu tulijaribu kufuatilia PM2.5 na Wio LTE na Sura mpya ya Laser PM2.5.

Hatua ya 1: Vitu vinavyotumiwa katika Mradi huu

Vipengele vya vifaa

• Toleo la Wio LTE EU v1.3- 4G, Cat.1, GNSS, Espruino Sambamba
• Grove - Sura ya Laser PM2.5 (HM3301)
• Grove - 16 x 2 LCD (Nyeupe juu ya Bluu)

Programu za programu na huduma za mkondoni

• Arduino IDE
• PubNub Chapisha / Subscribe API

Hatua ya 2: Uunganisho wa vifaa

Kama picha hapo juu, tulikata mistari 2 ya shamba kwa mawasiliano ya I2C, ili Wio LTE iweze kuungana na LCD Grove na PM2.5 Sensor Grove kwa wakati mmoja. Unaweza kutumia Kitovu cha I2C kufanikisha hilo pia.

Na usisahau, unganisha antenna ya LTE kwa Wio LTE na unganisha SIM kadi yako.

Hatua ya 3: Usanidi wa Wavuti

Bonyeza hapa kuingia au kusajili akaunti ya PubNub, itatumika kusambaza data ya wakati halisi.

Katika Portal Admin Portal, utaona Mradi wa Maonyesho. Ingiza mradi, kuna funguo 2, Chapisha Ufunguo na Usajili Muhimu, ukumbuke kwa Programu ya Programu.

Hatua ya 4: Programu ya Programu

Sehemu ya 1. Wio LTE

Kwa sababu hakuna maktaba ya PubNub ya Wio LTE, tunaweza kuchapisha data yetu ya wakati halisi kupitia ombi la HTTP, angalia Hati ya API ya PubNub REST.

Ili kufanya unganisho la HTTP kutoka kwa SIM kadi yako iliyochomwa kwa Wio LTE, unapaswa kuweka APN yako kwanza. Ikiwa haujui hilo, tafadhali wasiliana na mwendeshaji wako wa rununu.

Na weka Kitufe chako cha Chapisha cha PubNub, Subscribe Key na Channel baada ya kuweka APN. Idhaa hapa, hutumiwa kutofautisha Wachapishaji na Wasajili, Wasajili watapokea data kutoka kwa Wachapishaji ambao wana Kituo sawa.

Bonyeza na ushikilie kitufe cha Boot0 katika Wio LTE, unganisha kwenye kompyuta yako kupitia kebo ya USB, pakia nambari hiyo kwa Arduino IDE kwake. Baada ya kupakia, bonyeza kitufe cha RST kuweka Wio LTE upya.

Sehemu ya 2. Ukurasa wa Wavuti

Washa PubNub, ingiza Keyset ya Demo, na ubonyeze Dashibodi ya Kutatua kushoto, itafungua ukurasa mpya.

Jaza jina la kituo chako kwenye sanduku la maandishi la Kituo Cha Chaguo-msingi, kisha bonyeza kitufe cha Ongeza Mteja. Subiri kwa muda, utaona PM1.0, PM2.5 na PM10 thamani zinaonekana kwenye Dashibodi ya Debug.

Lakini sio rafiki kwetu, kwa hivyo tunazingatia kuionyesha kama chati.

Kwanza kabisa, tengeneza faili mpya ya html kwenye kompyuta yako. Fungua kwa mhariri wa maandishi, ongeza vitambulisho vya msingi vya html kwake.

Kisha ongeza hati ya PubNub na Chati.js kwa kichwa, unaweza pia kuongeza kichwa kwenye ukurasa huu.

Ufuatiliaji wa Vumbi la Seeed

Inapaswa kuwa na mahali pa kuonyesha chati, kwa hivyo tunaongeza turubai kwa mwili wa ukurasa.

Na ongeza lebo ya hati ili tuweze kuongeza javascript ili kujiunga na data ya wakati halisi na kuchora chati.

Kujiandikisha data ya wakati halisi kutoka PubNub, inapaswa kuwa na kitu cha PubNub, var pubnub = mpya PubNub ({

chapishaKey: "", SubsyKey: ""}};

na ongeza msikilizaji kwake.

pubnub.addListener ({

ujumbe: kazi (msg) {}});

Mwanachama wa ujumbe katika msg ya param ya ujumbe wa kazi ni data tunayohitaji. Sasa tunaweza kusajili data ya wakati halisi kutoka PubNub:

jiandikishe ({

kituo: ["vumbi"]});

Lakini jinsi ya kuionyesha kama chati? Tuliunda safu 4 za kuweka data ya wakati halisi:

chati za varabali = Mpangilio mpya ();

chati ya varPM1Data = Mpangilio mpya (); chati ya varPM25Data = Mpangilio mpya (); chati ya varPM10Data = Mpangilio mpya ();

Miongoni mwao, safu ya chati ya chati hutumiwa kuweka data iliyofikiwa wakati, chatiPM1Data, chatiPM25Data na chatiPM10Data hutumiwa kutunza data ya PM1.0, data ya PM2.5 na data ya PM10 mtawaliwa. Wakati data ya wakati halisi inafikia, wasukume kwa safu tofauti.

chatiLabels.push (Tarehe mpya (). toLocalString ());

chati PM1Data.push (msg.message.pm1); chatiPM25Data.push (msg.message.pm25); chati PM10Data.push (msg.message.pm10);

Kisha onyesha chati:

var ctx = document.getElementById ("chati"). pataContext ("2d");

chati ya var = Chati mpya (ctx, {type: "line", data: {labels: chartLabels, datasets: [{label: "PM1.0", data: chartPM1Data, borderColor: "# FF6384", fill: false}, {lebo: "PM2.5", data: chartPM25Data, borderColor: "# 36A2EB", fill: false}, {label: "PM10", data: chartPM10Data, borderColor: "# CC65FE", fill: false}]}}});

Sasa fungua faili hii ya html na kivinjari cha wavuti, utaona mabadiliko ya data.