Visualisasi Pencemaran Atmosfera: 4 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:10

Masalah pencemaran udara semakin menarik perhatian. Kali ini kami cuba memantau PM2.5 dengan Wio LTE dan Sensor Laser PM2.5 baru.

Langkah 1: Perkara Yang Digunakan dalam Projek Ini

Komponen perkakasan

• Wio LTE EU Versi v1.3- 4G, Cat.1, GNSS, Espruino Sesuai
• Grove - Sensor PM2.5 Laser (HM3301)
• Grove - LCD 16 x 2 (Putih di Biru)

Aplikasi perisian dan perkhidmatan dalam talian

• Arduino IDE
• API Penerbitan / Langgan PubNub

Langkah 2: Sambungan Perkakasan

Seperti gambar di atas, kami memotong 2 jalur alur untuk komunikasi I2C, supaya Wio LTE dapat menyambung ke LCD Grove dan PM2.5 Sensor Grove pada masa yang sama. Anda boleh menggunakan Hub I2C untuk mencapainya.

Dan jangan lupa, sambungkan antena LTE ke Wio LTE dan pasangkan kad SIM anda ke dalamnya.

Langkah 3: Konfigurasi Web

Klik di sini untuk log masuk atau mendaftar akaun PubNub, ia akan digunakan untuk menghantar data masa nyata.

Di Portal Admin PubNub, anda akan melihat Projek Demo. Masuk ke projek, ada 2 kunci, Publish Key dan Subscribe Key, ingatlah untuk Programming Software.

Langkah 4: Pengaturcaraan Perisian

Bahagian 1. Wio LTE

Oleh kerana tidak ada perpustakaan PubNub untuk Wio LTE, kami dapat menerbitkan data masa nyata kami melalui permintaan HTTP, lihat Dokumen API PubNub REST.

Untuk membuat sambungan HTTP dari kad SIM anda yang disambungkan ke Wio LTE, anda harus menetapkan APN anda terlebih dahulu. Sekiranya anda tidak mengetahui perkara itu, sila hubungi operator mudah alih anda.

Dan tetapkan Kunci Publish PubNub anda, Kunci Langganan dan Saluran setelah menetapkan APN. Saluran di sini, digunakan untuk membezakan Penerbit dan Pelanggan, Pelanggan akan menerima data dari Penerbit yang mempunyai Saluran yang sama.

Tekan dan tahan butang Boot0 di Wio LTE, sambungkan ke komputer anda melalui kabel USB, muat naik kod dalam Arduino IDE kepadanya. Selepas memuat naik, tekan butang RST untuk menetapkan semula Wio LTE.

Bahagian 2. Halaman Web

Belok ke PubNub, masukkan Demo Keyset, dan klik Debug Console di sebelah kiri, ia akan membuka halaman baru.

Isi nama saluran anda ke kotak teks Saluran Lalai, kemudian klik butang Tambah Pelanggan. Tunggu sebentar, anda akan melihat nilai PM1.0, PM2.5 dan PM10 muncul di Debug Console.

Tetapi itu tidak mesra bagi kami, jadi kami mempertimbangkan untuk memaparkannya sebagai carta.

Pertama sekali, buat fail html baru di komputer anda. Buka dengan editor teks, tambahkan tag html asas padanya.

Kemudian tambahkan skrip PubNub dan Chart.js ke kepala, anda juga boleh menambahkan tajuk ke halaman ini.

Monitor Debu Terlihat

Harus ada tempat untuk memaparkan carta, jadi kami menambahkan kanvas ke isi halaman.

Dan tambah tag skrip supaya kita dapat menambahkan javascript untuk melanggan data masa nyata dan melukis carta.

Untuk melanggan data masa nyata dari PubNub, harus ada objek PubNub, var pubnub = PubNub baru ({

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

dan tambahkan pendengar kepadanya.

pubnub.addListener ({

message: function (msg) {}});

Anggota pesan dalam parameter pesan fungsi berfungsi adalah data yang kita perlukan. Sekarang kita boleh melanggan data masa nyata dari PubNub:

pubnub.subscribe ({

saluran: ["habuk"]});

Tetapi bagaimana memaparkannya sebagai carta? Kami membuat 4 tatasusunan untuk menyimpan data masa nyata:

var chartLabels = Array baru ();

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

Antaranya, array chartLabels digunakan untuk memastikan data mencapai masa, chartPM1Data, chartPM25Data dan chartPM10Data digunakan untuk menyimpan data PM1.0, data PM2.5 dan data PM10 masing-masing. Apabila data masa nyata sampai, dorong mereka ke tatasusunan secara berasingan.

chartLabels.push (Tarikh baru (). toLocalString ());

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

Kemudian paparkan carta:

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

var chart = Chart baru (ctx, {type: "line", data: {label: chartLabels, dataset: [{label: "PM1.0", data: chartPM1Data, borderColor: "# FF6384", isi: false}, {label: "PM2.5", data: chartPM25Data, borderColor: "# 36A2EB", isi: false}, {label: "PM10", data: chartPM10Data, borderColor: "# CC65FE", isi: false}]}});

Sekarang buka fail html ini dengan penyemak imbas web, anda akan melihat perubahan data.