Атмосферанын булганышынын визуализациясы: 4 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:41

Абанын булганышы көйгөйүнө көбүрөөк көңүл бурулууда. Бул жолу биз PM2.5ди Wio LTE жана жаңы Лазердик PM2.5 сенсор менен көзөмөлдөөгө аракет кылдык.

1 -кадам: Бул долбоордо колдонулган нерселер

Аппараттык компоненттер

• Wio LTE EU Version v1.3- 4G, Cat.1, GNSS, Espruino Compatible
• Grove - Лазердик PM2.5 сенсор (HM3301)
• Grove - 16 x 2 LCD (Ак түстө)

Программалык камсыздоо жана онлайн кызматтары

• Arduino IDE
• PubNub Publish/Subscribe API

2 -кадам: Аппараттык туташуу

Жогорудагы сүрөттө, биз Wio LTE бир убакта LCD Grove жана PM2.5 Sensor Grove туташа алат деп, I2C байланыш үчүн 2 Grove линияларын кесип. Буга жетүү үчүн I2C Hub колдоно аласыз.

Жана унутпаңыз, LTE антеннасын Wio LTEге туташтырыңыз жана ага SIM картаңызды сайыңыз.

3 -кадам: Желе конфигурациясы

PubNub каттоо эсебине кирүү же катталуу үчүн бул жерди басыңыз, ал реалдуу убакытта маалыматтарды берүү үчүн колдонулат.

PubNub Админ Порталында сиз Демо Долбоорду көрөсүз. Долбоорду киргизиңиз, 2 ачкыч бар, Басып чыгаруу ачкычы жана Жазылуу ачкычы, Программалык камсыздоо үчүн аларды эстеп коюңуз.

4 -кадам: Программалык камсыздоо

1 -бөлүк. Wio LTE

Wio LTE үчүн PubNub китепканасы жок болгондуктан, биз реалдуу убакыт маалыматтарыбызды HTTP суранычы аркылуу жарыялай алабыз, PubNub REST API документин караңыз.

SIM картаңыздан Wio LTEге туташкан HTTP туташуу үчүн, биринчи APN'иңизди орнотушуңуз керек. Эгер муну билбесеңиз, мобилдик операторуңузга кайрылыңыз.

Жана APN орноткондон кийин PubNub Publish Key, Subscribe Key жана Channel орнотуңуз. Бул жердеги канал, Басып чыгаруучулар менен Жазылуучуларды айырмалоо үчүн колдонулат, Жазылуучулар бир эле Каналы бар Басмалардан маалыматтарды алышат.

Wio LTEдеги Boot0 баскычын басып кармап туруңуз, аны компьютериңизге USB кабели аркылуу туташтырыңыз, кодду Arduino IDEге жүктөңүз. Жүктөп бергенден кийин, Wio LTEди баштапкы абалга келтирүү үчүн RST баскычын басыңыз.

2 -бөлүм. Веб -баракча

PubNubга кайрылыңыз, Demo Keyset'ти киргизиңиз жана сол жактагы Debug Console чыкылдатыңыз, ал жаңы баракты ачат.

Каналыңыздын атын Демейки Канал текст кутучасына толтуруп, андан кийин Клиент кошуу баскычын чыкылдатыңыз. Бир аз күтө туруңуз, Debug Consoleдо PM1.0, PM2.5 жана PM10 мааниси пайда болот.

Бирок бул бизге достук эмес, ошондуктан биз аны диаграмма катары көрсөтүүнү ойлонобуз.

Биринчиден, компьютериңизде жаңы HTML файлын түзүңүз. Аны текст редактору аркылуу ачыңыз, ага негизги html тегдерин кошуңуз.

Андан кийин PubNub менен Chart.jsтин скриптин башына кошуңуз, сиз дагы бул баракчанын аталышын кошо аласыз.

Чаңдын мониторун көрүңүз

Диаграмманы көрсөтө турган жер болушу керек, андыктан барактын денесине холст кошобуз.

Жана JavaScriptти реалдуу убакытта жазылып, диаграмманы чийүү үчүн скрипт тэгин кошуңуз.

PubNubдан реалдуу убакытта жазылуу үчүн PubNub объектиси болушу керек, var pubnub = жаңы PubNub ({

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

жана ага угуучу кошуу.

pubnub.addListener ({

кабар: функция (msg) {}});

Функциянын билдирүүсүнүн msg параметриндеги билдирүүнүн мүчөсү бизге керектүү маалыматтар. Эми биз PubNubдан реалдуу убакыт маалыматтарына жазыла алабыз:

pubnub.subscribe ({

канал: ["чаң"]}));

Бирок аны диаграмма катары кантип көрсөтүү керек? Биз реалдуу убакытта маалыматтарды сактоо үчүн 4 массивди түздүк:

var chartLabels = жаңы Array ();

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

Алардын ичинен, chartLabels массиви маалыматка жеткен убакытты сактоо үчүн колдонулат, chartPM1Data, chartPM25Data жана chartPM10Data тийиштүү түрдө PM1.0 маалыматтарын, PM2.5 маалыматтарын жана PM10 маалыматтарын сактоо үчүн колдонулат. Качан реалдуу убакытта маалыматтар жетет, аларды өзүнчө массивдерге түртүңүз.

chartLabels.push (new Date (). toLocalString ());

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

Андан кийин диаграмманы көрсөтүңүз:

var ctx = document.getElementById ("диаграмма"). getContext ("2d");

var chart = new Chart (ctx, {type: "line", data: {labels: chartLabels, data set: [{label: "PM1.0", data: chartPM1Data, borderColor: "#FF6384", fill: false}, {label: "PM2.5", data: chartPM25Data, borderColor: "#36A2EB", fill: false}, {label: "PM10", data: chartPM10Data, borderColor: "#CC65FE", толтуруу: false}]}});

Эми бул html файлын веб -браузер менен ачыңыз, анда сиз өзгөрүүлөрдү көрөсүз.