Մթնոլորտային աղտոտման արտացոլում `4 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:48

Օդի աղտոտվածության խնդիրն ավելի ու ավելի մեծ ուշադրություն է գրավում: Այս անգամ մենք փորձեցինք վերահսկել PM2.5- ը Wio LTE- ով և նոր Laser PM2.5 սենսորով:

Քայլ 1: Այս նախագծում օգտագործվող բաները

Սարքավորման բաղադրիչներ

• Wio LTE EU տարբերակ v1.3- 4G, Cat.1, GNSS, Espruino համատեղելի
• Grove - լազերային PM2.5 տվիչ (HM3301)
• Grove - 16 x 2 LCD (սպիտակ կապույտի վրա)

Softwareրագրային ապահովման ծրագրեր և առցանց ծառայություններ

• Arduino IDE
• PubNub Publish/Subscribe API

Քայլ 2: Սարքաշարի միացում

Ինչպես վերևի նկարում, մենք կտրեցինք 2 պուրակի գիծ I2C հաղորդակցության համար, որպեսզի Wio LTE- ն միաժամանակ միանա LCD Grove- ին և PM2.5 Sensor Grove- ին: Դրան հասնելու համար կարող եք օգտագործել I2C հանգույց:

Եվ մի մոռացեք, միացրեք LTE ալեհավաքը Wio LTE- ին և միացրեք ձեր SIM քարտը դրան:

Քայլ 3: Վեբ կազմաձևում

Կտտացրեք այստեղ ՝ PubNub հաշիվ մուտք գործելու կամ գրանցելու համար, այն կօգտագործվի իրական ժամանակի տվյալների փոխանցման համար:

PubNub Admin Portal- ում դուք կտեսնեք ցուցադրական նախագիծ: Մուտքագրեք նախագիծը, կա 2 բանալի ՝ Publish Key և Subscribe Key, հիշեք դրանք Softwareրագրավորման ծրագրավորման համար:

Քայլ 4: Softwareրագրային ապահովման ծրագրավորում

Մաս 1. Wio LTE

Քանի որ Wio LTE- ի համար PubNub գրադարան չկա, մենք կարող ենք մեր իրական ժամանակի տվյալները հրապարակել HTTP հարցման միջոցով, տե՛ս PubNub REST API փաստաթուղթը:

Wio LTE- ին միացված ձեր SIM քարտից HTTP կապ հաստատելու համար նախ պետք է սահմանեք ձեր APN- ը: Եթե դա չգիտեք, դիմեք ձեր բջջային օպերատորին:

Եվ APN- ը սահմանելուց հետո սահմանեք ձեր PubNub հրապարակման բանալին, բաժանորդագրման բանալին և ալիքը: Ալիքն այստեղ օգտագործվում է Հրատարակիչներին և Բաժանորդներին տարբերակելու համար: Բաժանորդները տվյալներ կստանան նույն Ալիք ունեցող Հրատարակիչներից:

Սեղմեք և պահեք Boot0 կոճակը Wio LTE- ում, միացրեք այն ձեր համակարգչին USB մալուխի միջոցով, վերբեռնեք Arduino IDE- ի կոդը դրան: Վերբեռնելուց հետո սեղմեք RST կոճակը ՝ Wio LTE- ն վերականգնելու համար:

Մաս 2. Վեբ էջ

Անցեք PubNub- ին, մուտքագրեք Demo Keyset և ձախից կտտացրեք Debug Console ՝ այն կբացի նոր էջ:

Լրացրեք ձեր ալիքի անունը Default Channel տեքստային դաշտում, այնուհետև կտտացրեք Ավելացնել հաճախորդ: Մի քիչ սպասեք, կտեսնեք PM1.0, PM2.5 և PM10 արժեքը կհայտնվեն Debug Console- ում:

Բայց դա մեզ համար բարեկամական չէ, ուստի մենք համարում ենք, որ այն ցուցադրենք որպես գծապատկեր:

Սկզբում ստեղծեք նոր HTML ֆայլ ձեր համակարգչում: Բացեք այն տեքստային խմբագրիչով, դրան ավելացրեք հիմնական html պիտակներ:

Այնուհետև գլխին ավելացրեք PubNub և Chart.js սցենարը, կարող եք նաև վերնագիր ավելացնել այս էջին:

Տեսավ փոշու մոնիտոր

Պետք է տեղ լինի գծապատկեր ցուցադրելու համար, այնպես որ մենք կտավ ենք ավելացնում էջի մարմնին:

Եվ ավելացրեք սցենարի պիտակ, որպեսզի մենք կարողանանք ավելացնել javascript ՝ իրական ժամանակի տվյալները բաժանորդագրվելու և գծապատկերը գծելու համար:

PubNub- ից իրական ժամանակի տվյալներ բաժանորդագրվելու համար պետք է լինի PubNub օբյեկտ, var pubnub = նոր PubNub ({

publishedKey: "", subscribeKey: ""});

և դրան մի ունկնդիր ավելացրու:

pubnub.addListener ({

հաղորդագրություն ՝ գործառույթ (msg) {}});

Ֆունկցիայի հաղորդագրության պարամետրերի հաղորդագրության հաղորդագրության անդամը մեզ անհրաժեշտ տվյալներն են: Այժմ մենք կարող ենք բաժանորդագրվել իրական ժամանակի տվյալներին PubNub- ից.

pubnub.subscribe ({

ալիք ՝ ["փոշի"]});

Բայց ինչպե՞ս այն ցուցադրել որպես գծապատկեր: Մենք ստեղծեցինք 4 զանգված `իրական ժամանակի տվյալները պահելու համար.

var chartLabels = նոր զանգված ();

var chartPM1 Տվյալներ = նոր զանգված (); var chartPM25 Տվյալներ = նոր զանգված (); var chartPM10 Տվյալներ = նոր զանգված ();

Դրանցից chartLabels զանգվածը օգտագործվում է տվյալների հասնելու ժամանակը պահելու համար, chartPM1Data, chartPM25Data և chartPM10Data- ն օգտագործվում են համապատասխանաբար PM1.0, PM2.5 և PM10 տվյալներ պահելու համար: Երբ իրական ժամանակի տվյալները հասնում են, դրանք առանձին մղեք զանգվածների:

chartLabels.push (նոր Ամսաթիվ (). toLocalString ());

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

Այնուհետև ցուցադրեք գծապատկերը.

var ctx = document.getElementById («գծապատկեր»). getContext («2 դ»);

var chart = new Chart (ctx, {type: "line", data: {labels: chartLabels, datasets: [{label: "PM1.0", data: chartPM1 Data, borderColor: "#FF6384", fill: false}, {label: "PM2.5", data: chartPM25Data, borderColor: "#36A2EB", fill: false}, {label: "PM10", data: chartPM10Data, borderColor: "#CC65FE", fill: false}]}});

Այժմ բացեք այս HTML ֆայլը վեբ դիտարկիչով, կտեսնեք տվյալների փոփոխություններ: