ატმოსფერული დაბინძურების ვიზუალიზაცია: 4 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:19

ჰაერის დაბინძურების პრობლემა სულ უფრო მეტ ყურადღებას იპყრობს. ამჯერად ჩვენ შევეცადეთ PM2.5– ის მონიტორინგი Wio LTE– ით და ახალი ლაზერული PM2.5 სენსორით.

ნაბიჯი 1: ნივთები, რომლებიც გამოიყენება ამ პროექტში

აპარატურის კომპონენტები

• Wio LTE EU Version v1.3- 4G, Cat.1, GNSS, Espruino თავსებადი
• გროვი - ლაზერული PM2.5 სენსორი (HM3301)
• Grove - 16 x 2 LCD (თეთრი ლურჯზე)

პროგრამული უზრუნველყოფის პროგრამები და ონლაინ სერვისები

• Arduino IDE
• PubNub Publish/Subscribe API

ნაბიჯი 2: აპარატურის კავშირი

როგორც ზემოთ მოცემულ სურათზე, ჩვენ დავჭრათ 2 გროვის ხაზი I2C კომუნიკაციისთვის, ისე რომ Wio LTE- ს შეუძლია ერთდროულად დაუკავშიროს LCD Grove და PM2.5 Sensor Grove. თქვენ ასევე შეგიძლიათ გამოიყენოთ I2C Hub ამის მისაღწევად.

და არ დაგავიწყდეთ, დაუკავშირეთ LTE ანტენა Wio LTE- ს და შეაერთეთ თქვენი SIM ბარათი.

ნაბიჯი 3: ვებ კონფიგურაცია

დააწკაპუნეთ აქ შესასვლელად ან რეგისტრაციისათვის PubNub ანგარიში, ის გამოყენებული იქნება რეალურ დროში მონაცემების გადასაცემად.

PubNub Admin Portal– ში ნახავთ დემო პროექტს. შეიყვანეთ პროექტი, არის 2 გასაღები, გამოაქვეყნეთ გასაღები და გამოწერის გასაღები, დაიმახსოვრეთ ისინი პროგრამული უზრუნველყოფის პროგრამირებისთვის.

ნაბიჯი 4: პროგრამული უზრუნველყოფის პროგრამირება

ნაწილი 1. Wio LTE

ვინაიდან Wio LTE– სთვის არ არსებობს PubNub ბიბლიოთეკა, ჩვენ შეგვიძლია გამოვაქვეყნოთ ჩვენი რეალურ დროში მონაცემები HTTP მოთხოვნის საშუალებით, იხილეთ PubNub REST API დოკუმენტი.

Wio LTE- ზე ჩართული თქვენი SIM ბარათიდან HTTP კავშირის შესაქმნელად, ჯერ უნდა დააყენოთ თქვენი APN. თუ ეს არ იცით, გთხოვთ დაუკავშირდეთ თქვენს მობილურ ოპერატორს.

და დააყენეთ თქვენი PubNub Publish Key, გამოწერის გასაღები და არხი APN– ის დაყენების შემდეგ. აქ არხი გამოიყენება გამომცემლებისა და გამომწერების დიფერენცირებისთვის, აბონენტები მიიღებენ მონაცემებს გამომცემლებისგან, რომლებსაც აქვთ იგივე არხი.

დააჭირეთ და გამართეთ Boot0 ღილაკი Wio LTE– ში, შეაერთეთ იგი თქვენს კომპიუტერს USB კაბელის საშუალებით, ატვირთეთ კოდი Arduino IDE– ში. ატვირთვის შემდეგ, დააჭირეთ RST ღილაკს Wio LTE– ს გადასაყენებლად.

ნაწილი 2. ვებ გვერდი

გადადით PubNub– ზე, შეიყვანეთ Demo Keyset და დააწკაპუნეთ Debug Console– ზე მარცხნივ, ის გახსნის ახალ გვერდს.

შეავსეთ თქვენი არხის სახელი ნაგულისხმევი არხის ტექსტურ ყუთში, შემდეგ დააჭირეთ ღილაკს კლიენტის დამატება. დაელოდეთ ცოტა ხანს, თქვენ ნახავთ PM1.0, PM2.5 და PM10 მნიშვნელობას Debug Console- ში.

მაგრამ ეს არ არის ჩვენთვის მეგობრული, ამიტომ ჩვენ მიგვაჩნია, რომ გამოვაჩინოთ იგი როგორც სქემა.

პირველ რიგში, შექმენით ახალი html ფაილი თქვენს კომპიუტერში. გახსენით იგი ტექსტური რედაქტორის მიერ, დაამატეთ მასში ძირითადი html ტეგები.

შემდეგ დაამატეთ PubNub და Chart.js სკრიპტი თავში, ასევე შეგიძლიათ დაამატოთ სათაური ამ გვერდზე.

ნახა მტვრის მონიტორი

უნდა იყოს ადგილი დიაგრამის გამოსაჩენად, ამიტომ ჩვენ დავამატებთ ტილოს გვერდის სხეულს.

და დაამატეთ სკრიპტის ტეგი ისე, რომ ჩვენ შეგვიძლია დავამატოთ javascript რეალურ დროში მონაცემების გამოსაწერად და დიაგრამის დასახატად.

PubNub– ის რეალურ დროში მონაცემების გამოსაწერად, უნდა ჰქონდეს PubNub ობიექტი, var pubnub = ახალი PubNub ({

PublishKey: "", subscribeKey: ""});

და დაამატე მას მსმენელი.

pubnub.addListener ({

შეტყობინება: ფუნქცია (msg) {}});

შეტყობინების წევრი ფუნქციის შეტყობინების პარამეტრის 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 ("2 დ");

var chart = new Chart (ctx, {type: "line", data: {labels: chartLabels, datasets: [{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 ფაილი ვებ ბრაუზერით და ნახავთ მონაცემების ცვლილებებს.