การแสดงภาพมลพิษในบรรยากาศ: 4 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:06

ปัญหามลพิษทางอากาศได้รับความสนใจมากขึ้นเรื่อยๆ ครั้งนี้เราพยายามตรวจสอบ PM2.5 ด้วย Wio LTE และ Laser PM2.5 Sensor ใหม่

ขั้นตอนที่ 1: สิ่งที่ใช้ในโครงการนี้

ส่วนประกอบฮาร์ดแวร์

• Wio LTE รุ่น EU v1.3- 4G, Cat.1, GNSS, Espruino Compatible
• Grove - เลเซอร์ PM2.5 เซนเซอร์ (HM3301)
• Grove - 16 x 2 LCD (สีขาวบนพื้นน้ำเงิน)

แอพซอฟต์แวร์และบริการออนไลน์

• Arduino IDE
• PubNub เผยแพร่/สมัครสมาชิก API

ขั้นตอนที่ 2: การเชื่อมต่อฮาร์ดแวร์

ดังภาพด้านบน เราตัด 2 grove line สำหรับการสื่อสาร I2C เพื่อให้ Wio LTE สามารถเชื่อมต่อกับ LCD Grove และ PM2.5 Sensor Grove ได้พร้อมกัน คุณสามารถใช้ I2C Hub เพื่อบรรลุเป้าหมายนั้นได้เช่นกัน

และอย่าลืมเชื่อมต่อเสาอากาศ LTE กับ Wio LTE แล้วเสียบซิมการ์ดของคุณเข้าไป

ขั้นตอนที่ 3: การกำหนดค่าเว็บ

คลิกที่นี่เพื่อเข้าสู่ระบบหรือลงทะเบียนบัญชี PubNub จะใช้สำหรับการส่งข้อมูลตามเวลาจริง

ใน PubNub Admin Portal คุณจะเห็นโครงการสาธิต เข้าโครงการมี 2 คีย์ คือ Publish Key และ Subscribe Key จำไว้สำหรับ Software Programming

ขั้นตอนที่ 4: การเขียนโปรแกรมซอฟต์แวร์

ส่วนที่ 1 Wio LTE

เนื่องจากไม่มีไลบรารี PubNub สำหรับ Wio LTE เราจึงสามารถเผยแพร่ข้อมูลแบบเรียลไทม์ผ่านคำขอ HTTP โปรดดูเอกสาร PubNub REST API

หากต้องการเชื่อมต่อ HTTP จากซิมการ์ดที่เสียบกับ Wio LTE คุณควรตั้งค่า APN ก่อน หากคุณไม่ทราบ โปรดติดต่อผู้ให้บริการมือถือของคุณ

และตั้งค่า PubNub Publish Key, Subscribe Key และ Channel ของคุณหลังจากตั้งค่า 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 ไปที่ส่วนหัว คุณสามารถเพิ่มชื่อเรื่องในหน้านี้ได้

เครื่องวัดฝุ่น Seeed

ควรมีที่สำหรับแสดงแผนภูมิ ดังนั้นเราจึงเพิ่มผืนผ้าใบลงในเนื้อหาของหน้า

และเพิ่มแท็กสคริปต์เพื่อให้เราสามารถเพิ่มจาวาสคริปต์เพื่อสมัครรับข้อมูลแบบเรียลไทม์และวาดแผนภูมิ

หากต้องการสมัครรับข้อมูลแบบเรียลไทม์จาก 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("chart").getContext("2d");

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 นี้ด้วยเว็บเบราว์เซอร์ คุณจะเห็นการเปลี่ยนแปลงข้อมูล