Hình dung ô nhiễm khí quyển: 4 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:33

Vấn đề ô nhiễm không khí ngày càng thu hút nhiều sự quan tâm. Lần này, chúng tôi đã cố gắng theo dõi PM2.5 bằng Wio LTE và Cảm biến Laser PM2.5 mới.

Bước 1: Những thứ được sử dụng trong dự án này

Các thành phần phần cứng

• Tương thích Wio LTE phiên bản EU v1.3- 4G, Cat.1, GNSS, Espruino
• Grove - Cảm biến Laser PM2.5 (HM3301)
• Grove - LCD 16 x 2 (Trắng trên Xanh)

Ứng dụng phần mềm và dịch vụ trực tuyến

• Arduino IDE
• API PubNub Xuất bản / Đăng ký

Bước 2: Kết nối phần cứng

Như hình trên, chúng tôi cắt 2 đường rãnh cho giao tiếp I2C, để Wio LTE có thể kết nối với LCD Grove và PM2.5 Sensor Grove cùng một lúc. Bạn có thể sử dụng Trung tâm I2C để đạt được điều đó.

Và đừng quên, kết nối ăng-ten LTE với Wio LTE và cắm thẻ SIM của bạn vào đó.

Bước 3: Cấu hình web

Nhấp vào đây để đăng nhập hoặc đăng ký tài khoản PubNub, tài khoản này sẽ được sử dụng để truyền dữ liệu thời gian thực.

Trong Cổng thông tin quản trị PubNub, bạn sẽ thấy một Dự án trình diễn. Vào dự án, có 2 key là Publish Key và Subscribe Key, hãy ghi nhớ chúng cho phần Lập trình phần mềm.

Bước 4: Lập trình phần mềm

Phần 1. Wio LTE

Vì không có thư viện PubNub cho Wio LTE, chúng tôi có thể xuất bản dữ liệu thời gian thực của mình thông qua yêu cầu HTTP, xem Tài liệu API PubNub REST.

Để tạo kết nối HTTP từ thẻ SIM được cắm vào Wio LTE, trước tiên bạn nên đặt APN của mình. Nếu bạn không biết điều đó, vui lòng liên hệ với nhà cung cấp dịch vụ di động của bạn.

Và đặt Khóa xuất bản PubNub, Khóa đăng ký và Kênh của bạn sau khi thiết lập APN. Kênh ở đây, được sử dụng để phân biệt Nhà xuất bản và Người đăng ký, Người đăng ký sẽ nhận được dữ liệu từ Nhà xuất bản có cùng Kênh.

Nhấn và giữ nút Boot0 trong Wio LTE, kết nối nó với máy tính của bạn qua cáp USB, tải mã trong Arduino IDE lên nó. Sau khi tải lên, nhấn nút RST để đặt lại Wio LTE.

Phần 2. Trang Web

Quay sang PubNub, nhập Demo Keyset và nhấp vào Debug Console ở bên trái, nó sẽ mở ra một trang mới.

Điền tên kênh của bạn vào hộp văn bản Kênh mặc định, sau đó nhấp vào nút Thêm ứng dụng khách. Chờ một lúc, bạn sẽ thấy giá trị PM1.0, PM2.5 và PM10 xuất hiện trong Debug Console.

Nhưng nó không thân thiện với chúng tôi, vì vậy chúng tôi xem xét hiển thị nó dưới dạng biểu đồ.

Trước hết, hãy tạo một tệp html mới trong máy tính của bạn. Mở nó bằng một trình soạn thảo văn bản, thêm các thẻ html cơ bản vào nó.

Sau đó thêm tập lệnh của PubNub và Chart.js vào đầu, bạn cũng có thể thêm tiêu đề cho trang này.

Màn hình bụi đã thấy

Cần có một nơi để hiển thị biểu đồ, vì vậy chúng tôi thêm canvas vào phần nội dung của trang.

Và thêm thẻ script để chúng ta có thể thêm javascript để đăng ký dữ liệu thời gian thực và vẽ biểu đồ.

Để đăng ký dữ liệu thời gian thực từ PubNub, cần có một đối tượng PubNub, var pubnub = new PubNub ({

PublishingKey: "", subscribeKey: ""});

và thêm một người nghe vào nó.

pubnub.addListener ({

message: function (msg) {}});

Thành phần thông báo trong thông báo tham số msg của thông báo hàm là dữ liệu chúng ta cần. Giờ đây, chúng tôi có thể đăng ký dữ liệu thời gian thực từ PubNub:

pubnub.subscribe ({

kênh: ["bụi"]});

Nhưng làm thế nào để hiển thị nó dưới dạng biểu đồ? Chúng tôi đã tạo 4 mảng để giữ dữ liệu thời gian thực:

var chartLabels = new Array ();

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

Trong số đó, mảng chartLabels được sử dụng để giữ dữ liệu đạt đến thời gian, chartPM1Data, chartPM25Data và chartPM10Data được sử dụng để giữ dữ liệu PM1.0, dữ liệu PM2.5 và dữ liệu PM10 tương ứng. Khi dữ liệu thời gian thực đạt đến, hãy đẩy chúng vào các mảng riêng biệt.

chartLabels.push (new Date (). toLocalString ());

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

Sau đó, hiển thị biểu đồ:

var ctx = document.getElementById ("biểu đồ"). getContext ("2d");

var chart = new Chart (ctx, {type: "line", data: {label: 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}]}});

Bây giờ mở tập tin html này bằng trình duyệt web, bạn sẽ thấy dữ liệu thay đổi.