Visualisasi Polusi Atmosfer: 4 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:56

Masalah polusi udara semakin menarik perhatian. Kali ini kami mencoba memonitor PM2.5 dengan Wio LTE dan Sensor Laser PM2.5 baru.

Langkah 1: Hal-hal yang Digunakan dalam Proyek Ini

Komponen perangkat keras

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

Aplikasi perangkat lunak dan layanan online

• Arduino IDE
• PubNub Publish/Subscribe API

Langkah 2: Koneksi Perangkat Keras

Seperti gambar di atas, kami memotong 2 jalur grove untuk komunikasi I2C, sehingga Wio LTE dapat terhubung ke Grove LCD dan Grove Sensor PM2.5 secara bersamaan. Anda juga dapat menggunakan I2C Hub untuk mencapainya.

Dan jangan lupa, sambungkan antena LTE ke Wio LTE dan pasang kartu SIM Anda ke sana.

Langkah 3: Konfigurasi Web

Klik di sini untuk login atau mendaftarkan akun PubNub, itu akan digunakan untuk mengirimkan data real-time.

Di Portal Admin PubNub, Anda akan melihat Proyek Demo. Masuk ke proyek, ada 2 kunci, Publish Key dan Subscribe Key, ingat itu untuk Pemrograman Perangkat Lunak.

Langkah 4: Pemrograman Perangkat Lunak

Bagian 1. Wio LTE

Karena tidak ada pustaka PubNub untuk Wio LTE, kami dapat mempublikasikan data waktu nyata kami melalui permintaan HTTP, lihat Dokumen PubNub REST API.

Untuk membuat koneksi HTTP dari kartu SIM Anda yang dicolokkan ke Wio LTE, Anda harus mengatur APN Anda terlebih dahulu. Jika Anda tidak mengetahuinya, silakan hubungi operator seluler Anda.

Dan atur PubNub Publish Key, Subscribe Key, dan Channel Anda setelah mengatur APN. Channel disini, digunakan untuk membedakan Publisher dan Subscriber, Subscriber akan menerima data dari Publisher yang memiliki Channel yang sama.

Tekan dan tahan tombol Boot0 di Wio LTE, sambungkan ke komputer Anda melalui kabel USB, unggah kode di Arduino IDE ke sana. Setelah mengunggah, tekan tombol RST untuk mengatur ulang Wio LTE.

Bagian 2. Halaman Web

Buka PubNub, masukkan Demo Keyset, dan klik Debug Console di sebelah kiri, itu akan membuka halaman baru.

Isi nama saluran Anda ke kotak teks Saluran Default, lalu klik tombol Tambah Klien. Tunggu beberapa saat, Anda akan melihat nilai PM1.0, PM2.5 dan PM10 muncul di Debug Console.

Tapi itu tidak ramah bagi kami, jadi kami mempertimbangkan untuk menampilkannya sebagai grafik.

Pertama-tama, buat file html baru di komputer Anda. Buka dengan editor teks, tambahkan tag html dasar ke dalamnya.

Kemudian tambahkan skrip PubNub dan Chart.js ke kepala, Anda juga dapat menambahkan judul ke halaman ini.

Pemantau Debu Benih

Harus ada tempat untuk menampilkan bagan, jadi kami menambahkan kanvas ke badan halaman.

Dan tambahkan tag skrip sehingga kita dapat menambahkan javascript untuk berlangganan data waktu nyata dan menggambar bagan.

Untuk berlangganan data real-time dari PubNub, harus ada objek PubNub, var pubnub = new PubNub({

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

dan tambahkan pendengar ke dalamnya.

pubnub.addListener({

pesan: fungsi(pesan) {} });

Anggota pesan dalam pesan parameter fungsi pesan adalah data yang kita butuhkan. Sekarang kita dapat berlangganan data real-time dari PubNub:

pubnub.berlangganan({

saluran: ["debu"] });

Tapi bagaimana cara menampilkannya sebagai grafik? Kami membuat 4 array untuk menyimpan data waktu nyata:

var chartLabels = new Array();

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

Diantaranya, array chartLabels digunakan untuk menyimpan data mencapai waktu, chartPM1Data, chartPM25Data dan chartPM10Data masing-masing digunakan untuk menyimpan data PM1.0, data PM2.5 dan data PM10. Saat data real-time mencapai, dorong mereka ke array secara terpisah.

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

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

Kemudian tampilkan grafiknya:

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", isi: false }, { label: "PM10", data: chartPM10Data, borderColor: "#CC65FE", isi: false }] } });

Sekarang buka file html ini dengan browser web, Anda akan melihat perubahan data.