Визуализация на атмосферното замърсяване: 4 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:52

Проблемът със замърсяването на въздуха привлича все повече внимание. Този път се опитахме да наблюдаваме PM2.5 с Wio LTE и нов лазерен PM2.5 сензор.

Стъпка 1: Нещата, използвани в този проект

Хардуерни компоненти

• Wio LTE EU версия v1.3- 4G, Cat.1, GNSS, Espruino съвместими
• Grove - Лазерен PM2.5 сензор (HM3301)
• Grove - 16 x 2 LCD (бяло на синьо)

Софтуерни приложения и онлайн услуги

• Arduino IDE
• PubNub API за публикуване/абониране

Стъпка 2: Хардуерна връзка

Както е на снимката по -горе, изрязахме 2 линии горичка за I2C комуникация, така че Wio LTE да може да се свърже едновременно с LCD Grove и PM2.5 Sensor Grove. Можете да използвате и I2C Hub, за да постигнете това.

И не забравяйте, свържете LTE антената към Wio LTE и включете вашата SIM карта към нея.

Стъпка 3: Уеб конфигурация

Щракнете тук, за да влезете или да регистрирате акаунт в PubNub, той ще се използва за предаване на данни в реално време.

В портала за администриране на PubNub ще видите демонстрационен проект. Влезте в проекта, има 2 ключа, Публикуване на ключ и Ключ за абонамент, запомнете ги за Софтуерно програмиране.

Стъпка 4: Софтуерно програмиране

Част 1. Wio LTE

Тъй като няма библиотека на PubNub за Wio LTE, можем да публикуваме нашите данни в реално време чрез HTTP заявка, вижте Документ за API на REST на PubNub.

За да направите HTTP връзка от вашата SIM карта, свързана към Wio LTE, първо трябва да зададете своя APN. Ако не знаете това, моля, свържете се с вашия мобилен оператор.

И задайте своя PubNub ключ за публикуване, ключ за абонамент и канал, след като зададете APN. Тук канал се използва за разграничаване на издатели и абонати, абонатите ще получават данни от издатели, които имат същия канал.

Натиснете и задръжте бутона Boot0 в Wio LTE, свържете го с компютъра си чрез USB кабел, качете кода в Arduino IDE към него. След качване натиснете бутона RST, за да нулирате Wio LTE.

Част 2. Уеб страница

Обърнете се към PubNub, въведете Демонстрационен набор от клавиши и щракнете върху Debug Console отляво, ще се отвори нова страница.

Попълнете името на канала си до текстовото поле по подразбиране на канала, след което щракнете върху бутона Добавяне на клиент. Изчакайте известно време, ще видите стойности PM1.0, PM2.5 и PM10, които се появяват в конзолата за отстраняване на грешки.

Но това не е приятелски за нас, затова смятаме да го покажем като диаграма.

Първо създайте нов html файл на компютъра си. Отворете го с текстов редактор, добавете към него основни html тагове.

След това добавете скрипта на PubNub и Chart.js, можете също да добавите заглавие към тази страница.

Видял монитор за прах

Трябва да има място за показване на диаграма, така че добавяме платно към тялото на страницата.

И добавете скриптов маркер, за да можем да добавим javascript, за да се абонирате за данни в реално време и да нарисувате диаграмата.

За да се абонирате за данни в реално време от PubNub, трябва да има обект PubNub, var pubnub = нов PubNub ({

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

и добавете слушател към него.

pubnub.addListener ({

съобщение: функция (съобщение) {}});

Членът на съобщението в параметър msg на функционално съобщение е данните, от които се нуждаем. Сега можем да се абонираме за данни в реално време от PubNub:

pubnub.subscribe ({

канал: ["прах"]});

Но как да го покажем като диаграма? Създадохме 4 масива за съхраняване на данни в реално време:

var chartLabels = нов масив ();

var chartPM1Data = нов масив (); var chartPM25Data = нов масив (); var chartPM10Data = нов масив ();

Сред тях масивът 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 ("2d");

var chart = new Chart (ctx, {type: "line", data: {labels: chartLabels, набори от данни: [{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}]}});

Сега отворете този html файл с уеб браузър, ще видите промени в данните.