Atmosfer çirkliliyinin görmə qabiliyyəti: 4 addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:46

Hava çirkliliyi problemi getdikcə daha çox diqqəti cəlb edir. Bu dəfə Wio LTE və yeni Lazer PM2.5 Sensoru ilə PM2.5 -i izləməyə çalışdıq.

Addım 1: Bu Layihədə İstifadə Edilən Şeylər

Avadanlıq komponentləri

• Wio LTE EU Version v1.3- 4G, Cat.1, GNSS, Espruino Uyğundur
• Grove - Lazer PM2.5 Sensoru (HM3301)
• Grove - 16 x 2 LCD (Mavi Ağ)

Proqram proqramları və onlayn xidmətlər

• Arduino IDE
• PubNub Publish/Subscribe API

Addım 2: Avadanlıq Bağlantısı

Yuxarıdakı şəkildəki kimi, Wio LTE -nin LCD Grove və PM2.5 Sensor Grove -yə eyni vaxtda qoşula bilməsi üçün I2C ünsiyyəti üçün 2 grove xətti kəsdik. Buna nail olmaq üçün I2C Hub istifadə edə bilərsiniz.

Unutmayın, LTE antenasını Wio LTE -yə qoşun və SİM kartınızı ona qoşun.

Addım 3: Veb Konfiqurasiyası

Bir PubNub hesabına daxil olmaq və ya qeydiyyatdan keçmək üçün bura vurun, real vaxt məlumatlarını ötürmək üçün istifadə ediləcək.

PubNub Admin Portalında bir Demo Layihəsi görəcəksiniz. Layihəyə daxil olun, 2 açarınız var: Yayım Açarı və Abunəlik Açarı, onları Proqramlaşdırma üçün xatırlayın.

Addım 4: Proqramlaşdırma

Hissə 1. Wio LTE

Wio LTE üçün PubNub kitabxanası olmadığından, real vaxt məlumatlarımızı HTTP tələbi ilə dərc edə bilərik, PubNub REST API Sənədinə baxın.

Wio LTE -ə qoşulmuş SIM kartınızdan HTTP bağlantısı qurmaq üçün əvvəlcə APN -ni təyin etməlisiniz. Bunu bilmirsinizsə, mobil operatorunuzla əlaqə saxlayın.

APN qurduqdan sonra PubNub Nəşr Açarını, Abunəlik Açarını və Kanalınızı təyin edin. Buradakı bir Kanal, Yayımçıları və Abunəçiləri fərqləndirmək üçün istifadə olunur, Abunəçilər eyni Kanalı olan Nəşriyyatlardan məlumat alacaqlar.

Wio LTE -də Boot0 düyməsini basıb saxlayın, USB kabel vasitəsilə kompüterinizə qoşun, Arduino IDE -də kodu yükləyin. Yüklədikdən sonra Wio LTE -ni yenidən qurmaq üçün RST düyməsini basın.

Hissə 2. Web Səhifəsi

PubNub -a dönün, Demo Keyset daxil edin və soldakı Debug Console düyməsini basın, yeni bir səhifə açacaq.

Kanalınızın adını Standart Kanal mətn qutusuna daxil edin, sonra Müştəri əlavə et düyməsini basın. Bir müddət gözləyin, Debug Console'da PM1.0, PM2.5 və PM10 dəyərlərinin görünəcəyini görəcəksiniz.

Ancaq bizim üçün dost deyil, buna görə də onu qrafik olaraq göstərməyi düşünürük.

Əvvəlcə kompüterinizdə yeni bir html faylı yaradın. Bir mətn redaktoru ilə açın, ona əsas html etiketləri əlavə edin.

Sonra PubNub və Chart.js skriptini başınıza əlavə edin, bu səhifəyə bir başlıq da əlavə edə bilərsiniz.

Toz izləyicisi

Bir qrafiki göstərmək üçün bir yer olmalıdır, buna görə səhifənin gövdəsinə bir kətan əlavə edirik.

Və skript etiketini əlavə edin ki, real vaxt məlumatlarına abunə olmaq və qrafik çəkmək üçün javascript əlavə edə bilək.

PubNub-dan real vaxt məlumatlarına abunə olmaq üçün bir PubNub obyekti olmalıdır, var pubnub = yeni PubNub ({

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

və buna bir dinləyici əlavə edin.

pubnub.addListener ({

mesaj: funksiya (msg) {}});

Msg funksiyası mesajının mesaj üzvü ehtiyac duyduğumuz məlumatdır. İndi PubNub-dan real vaxt məlumatlarına abunə ola bilərik:

pubnub.subscribe ({

kanal: ["toz"]});

Ancaq onu qrafik olaraq necə göstərmək olar? Real vaxt məlumatlarını saxlamaq üçün 4 sıra yaratdıq:

var chartLabels = yeni Array ();

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

Bunlardan, chartLabels dizisi məlumatların əldə edildiyi vaxtı saxlamaq üçün istifadə olunur, chartPM1Data, chartPM25Data və chartPM10Data sırasıyla PM1.0 məlumatlarını, PM2.5 məlumatlarını və PM10 məlumatlarını saxlamaq üçün istifadə olunur. Real vaxt məlumatları çatdıqda onları ayrı-ayrılıqda dizilərə itələyin.

chartLabels.push (yeni Tarix (). toLocalString ());

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

Sonra qrafiki göstərin:

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

var chart = yeni Qrafik (ctx, {type: "line", data: {labels: chartLabels, data set: [{label: "PM1.0", data: chartPM1Data, borderColor: "#FF6384", fill: false}, {etiket: "PM2.5", data: chartPM25Data, borderColor: "#36A2EB", doldur: yanlış}, {etiket: "PM10", məlumat: chartPM10Data, borderColor: "#CC65FE", doldur: yanlış}]}});

İndi bu html faylını veb brauzerlə açın, məlumat dəyişikliklərini görəcəksiniz.