ויזואליזציה של זיהום האטמוספירה: 4 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:15

בעיית זיהום האוויר מושכת יותר ויותר תשומת לב. הפעם ניסינו לעקוב אחר PM2.5 באמצעות Wio LTE וחיישן לייזר PM2.5 חדש.

שלב 1: דברים המשמשים בפרויקט זה

רכיבי חומרה

• Wio LTE האיחוד האירופי גרסה v1.3- 4G, Cat.1, GNSS, תואם אספרואינו
• גרוב - חיישן לייזר PM2.5 (HM3301)
• גרוב - 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 תראה פרויקט הדגמה. היכנסו לפרויקט, יש 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, הזן את מקש ההדגמה ולחץ על מסוף באגים בצד שמאל, הוא יפתח דף חדש.

מלא את שם הערוץ שלך בתיבת הטקסט של ערוץ ברירת המחדל, ולאחר מכן לחץ על הלחצן הוסף לקוח. המתן זמן מה, תראה ערך PM1.0, PM2.5 ו- PM10 מופיע במסוף באגים.

אבל זה לא ידידותי אלינו, ולכן אנו שוקלים להציג זאת כתרשים.

ראשית, צור קובץ HTML חדש במחשב שלך. פתח אותו עורך טקסט, הוסף אליו תגי html בסיסיים.

לאחר מכן הוסף את הסקריפט של PubNub ו- Chart.js לראש, תוכל גם להוסיף כותרת לדף זה.

ראה צג אבק

צריך להיות מקום להצגת תרשים, לכן נוסיף קנבס לגוף הדף.

והוסף תג סקריפט כדי שנוכל להוסיף ג'אווסקריפט כדי להירשם כמנוי לנתונים בזמן אמת ולצייר את התרשים.

כדי להירשם למידע בזמן אמת מ- PubNub, אמור להיות אובייקט PubNub, var pubnub = PubNub חדש ({

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

והוסף לו מאזין.

pubnub.addListener ({

message: function (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 ("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 זה עם דפדפן אינטרנט, תראה שינויים בנתונים.