Nano 33 IoT + EC/pH/ORP + WebAPK: 8 Langkah

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

Oleh ufireIkuti Lainnya oleh penulis:

Tentang: Tambahkan kemampuan untuk mengukur pH, ORP, EC, atau salinitas ke proyek Arduino atau Raspberry Pi Anda. Selengkapnya Tentang ufire »

Alat untuk mengukur EC, pH, ORP, dan suhu. Ini dapat digunakan untuk memantau pengaturan kolam atau hidroponik. Ini akan berkomunikasi melalui Bluetooth Low Energy dan menampilkan informasi pada halaman web menggunakan Web Bluetooth. Dan untuk bersenang-senang, kami akan mengubahnya menjadi Aplikasi Web Progresif yang dapat Anda instal dari web.

Langkah 1: Apa Semua Istilah Itu?

EC/pH/ORP/suhu adalah beberapa pengukuran kualitas air yang paling umum. Konduktivitas listrik (EC) digunakan dalam hidroponik untuk mengukur larutan nutrisi, pH untuk seberapa asam/basa air, dan ORP digunakan untuk membantu menentukan kemampuan air untuk mendisinfeksi itu sendiri

• Bluetooth Low Energy adalah protokol nirkabel untuk mengirim dan menerima informasi dengan mudah. Papan Arduino yang digunakan dalam proyek ini adalah Nano 33 IoT dan dilengkapi dengan antarmuka WiFi dan BLE.
• Web Bluetooth adalah sekumpulan API yang diimplementasikan di browser Google Chrome (dan Opera) yang memungkinkan halaman web berkomunikasi langsung dengan perangkat BLE.
• Aplikasi Web Progresif pada dasarnya adalah halaman web yang bertindak seperti aplikasi biasa. Android dan iPhone menanganinya secara berbeda, dan keduanya berbeda di desktop, jadi Anda perlu membaca sedikit untuk mengetahuinya secara spesifik.

Langkah 2: Perangkat Keras

Sebelum kita dapat merakit perangkat keras, ada satu hal yang harus diperhatikan. Perangkat sensor uFire ISE datang dengan alamat I2C yang sama dan kami menggunakan dua, jadi salah satunya harus diubah. Untuk proyek ini, kita akan memilih salah satu papan ISE dan menggunakannya untuk mengukur ORP. Ikuti langkah-langkah di sini, ubah alamat menjadi 0x3e.

Sekarang setelah alamatnya diubah, menyatukan perangkat keras menjadi mudah. Semua perangkat sensor menggunakan sistem koneksi Qwiic, jadi hubungkan saja semuanya dalam satu rantai. Anda memerlukan satu kabel Qwiic ke Male untuk menghubungkan salah satu sensor ke Nano 33. Kabelnya konsisten dan diberi kode warna. Hubungkan hitam ke GND Nano, merah ke pin +3.3V atau +5V, biru ke pin SDA yaitu A4, dan kuning ke pin SCL di A5.

Untuk proyek ini, informasi suhu diharapkan berasal dari sensor EC, jadi pastikan untuk memasang sensor suhu ke papan EC. Semua papan memiliki kemampuan untuk mengukur suhu sekalipun. Jangan lupa untuk memasang probe EC, pH dan ORP ke sensor yang sesuai. Mereka mudah dipasang dengan konektor BNC.

Jika Anda memiliki selungkup, memasukkan semua ini ke dalam akan menjadi ide yang bagus, terutama mengingat air akan terlibat.

Langkah 3: Perangkat Lunak

Bagian perangkat lunak ini dibagi menjadi dua bagian utama: firmware pada Nano 33, dan halaman web.

Aliran dasarnya adalah ini:

• Halaman web terhubung ke Nano melalui BLE
• Halaman web mengirimkan perintah berbasis teks untuk meminta informasi atau mengambil tindakan
• Nano mendengarkan perintah itu, menjalankannya, dan mengembalikan informasi
• Halaman web menerima tanggapan dan memperbarui UI yang sesuai

Pengaturan ini memungkinkan halaman web untuk melakukan semua fungsi yang diperlukan yang Anda harapkan, seperti melakukan pengukuran atau mengkalibrasi sensor.

Langkah 4: Layanan dan Karakteristik BLE

Salah satu hal pertama yang harus dipelajari adalah dasar-dasar cara kerja BLE.

Ada banyak analogi, jadi mari kita pilih buku. Sebuah layanan akan menjadi sebuah buku, dan sebuah karakteristik akan menjadi halaman-halamannya. Dalam "buku BLE" ini, halaman memiliki beberapa properti non-buku seperti dapat mengubah apa yang dikatakan halaman dan menerima pemberitahuan ketika itu terjadi.

Perangkat BLE dapat membuat layanan sebanyak yang diinginkan. Beberapa telah ditentukan sebelumnya dan bertindak sebagai cara untuk menstandarisasi informasi yang umum digunakan seperti Tx Power atau kehilangan koneksi, ke hal-hal yang lebih spesifik seperti Insulin atau Pulse Oksimetri. Anda juga dapat membuatnya dan melakukan apa pun yang Anda inginkan dengannya. Mereka didefinisikan dalam perangkat lunak dan diidentifikasi dengan UUID. Anda dapat membuat UUID di sini.

Dalam firmware untuk perangkat ini, ada satu layanan, yang didefinisikan sebagai:

BLEService uFire_Service("4805d2d0-af9f-42c1-b950-eae78304c408");

dan dua karakteristik:

BLEStringCharacteristic tx_Characteristic("50fa7d80-440a-44d2-967a-ec7731ec736a", BLENotify, 20);

BLStringCharacteristic rx_Characteristic("50fa7d80-440b-44d2-967b-ec7731ec736b", BLEWrite, 20);

tx_Characteristic akan menjadi tempat perangkat mengirimkan informasi, seperti pengukuran EC, untuk ditampilkan di halaman web. Rx_Characteristic adalah tempat ia akan menerima perintah dari halaman web untuk dieksekusi.

Proyek ini menggunakan perpustakaan ArduinoBLE. Jika Anda perhatikan, Anda akan melihat ada beberapa perbedaan untuk menyatakan suatu karakteristik. Proyek ini menggunakan BLEStringCharacteristic karena kita akan berurusan dengan tipe String dan itu lebih mudah, tetapi Anda juga dapat memilih BLECharCharacteristic atau BLEByteCharacteristic dari beberapa lainnya.

Selain itu, ada beberapa properti yang dapat Anda berikan karakteristiknya. tx_Characteristic memiliki BLENotify sebagai opsi. Itu berarti bahwa halaman web kita akan menerima pemberitahuan ketika nilainya berubah. rx_Characteristic memiliki BLEWrite yang memungkinkan halaman web kita untuk memodifikasinya. Ada yang lain.

Lalu ada sedikit kode-lem untuk mengikat semua hal ini bersama-sama:

BLE.setLocalName("uFire BLE");

BLE.setAdvertisedService(uFire_Service); uFire_Service.addCharacteristic(tx_Characteristic); uFire_Service.addCharacteristic(rx_Characteristic); BLE.addService(uFire_Service); rx_Characteristic.setEventHandler(BLEWritten, rxCallback); BLE.iklan();

Ini kurang lebih cukup jelas, tapi mari kita sentuh beberapa poin.

rx_Characteristic.setEventHandler(BLEWritten, rxCallback);

Di sinilah Anda memanfaatkan pemberitahuan tentang nilai yang diubah. Baris memberitahu kelas untuk menjalankan fungsi rxCallback ketika nilainya diubah.

BLE.iklan();

adalah apa yang memulai semuanya. Perangkat BLE secara berkala akan mengirimkan paket kecil informasi yang mengumumkan bahwa itu ada di luar sana dan tersedia untuk dihubungkan. Tanpa itu, itu tidak akan terlihat.

Langkah 5: Perintah Teks

Seperti disebutkan sebelumnya, perangkat ini akan berbicara dengan halaman web melalui perintah teks sederhana. Semuanya mudah diimplementasikan karena kerja keras telah dilakukan. Sensor uFire dilengkapi dengan perpustakaan berbasis JSON dan MsgPack untuk mengirim dan menerima perintah. Anda dapat membaca lebih lanjut tentang perintah EC dan ISE di halaman dokumentasinya.

Proyek ini akan menggunakan JSON karena sedikit lebih mudah untuk dikerjakan dan dibaca, tidak seperti format MsgPack yang biner.

Berikut adalah contoh bagaimana semuanya saling terkait:

• Halaman web meminta perangkat untuk pengukuran EC dengan mengirimkan ec (atau lebih khusus menulis ec ke karakteristik rx_Characteristic)
• Perangkat menerima perintah dan menjalankannya. Kemudian mengirimkan kembali respons berformat JSON dari {"ec":1.24} dengan menulis ke karakteristik tx_Characteristic.
• Halaman web menerima informasi dan menampilkannya

Langkah 6: Halaman Web

Halaman web untuk proyek ini akan menggunakan Vue.js untuk front-end. Tidak diperlukan backend. Selain itu, untuk membuat semuanya lebih sederhana, tidak ada sistem build yang digunakan. Ini dibagi menjadi folder biasa, js untuk javascript, css untuk CSS, aset untuk ikon. Bagian htmlnya tidak ada yang istimewa. Ini menggunakan bulma.io untuk menata dan membuat antarmuka pengguna. Anda akan melihat banyak hal di bagian ini. Ini menambahkan semua css dan ikon, tetapi juga menambahkan satu baris secara khusus.

Itu memuat file manifest.json kami yang membuat semua hal PWA terjadi. Ini menyatakan beberapa informasi yang memberi tahu ponsel kami bahwa halaman web ini dapat diubah menjadi aplikasi.

Javascript adalah tempat sebagian besar hal menarik terjadi. Ini dipecah menjadi file, app.js berisi dasar-dasar untuk membuat halaman web Vue berjalan bersama dengan semua variabel terkait UI dan beberapa hal lainnya. ble.js memiliki hal-hal bluetooth.

Langkah 7: Javascript dan Web Bluetooth

Pertama, ini hanya berfungsi di Chrome dan Opera. Saya berharap browser lain akan mendukung ini, tetapi untuk alasan apa pun, mereka tidak. Lihat app.js dan Anda akan melihat UUID yang sama yang kami gunakan di firmware kami. Satu untuk Layanan uFire, dan masing-masing untuk karakteristik tx dan rx.

Sekarang jika Anda melihat di ble.js, Anda akan melihat fungsi connect() dan disconnect().

Fungsi connect() berisi beberapa logika untuk menjaga UI tetap sinkron, tetapi sebagian besar mengatur hal-hal untuk mengirim dan menerima informasi tentang karakteristik.

Ada beberapa keanehan ketika berhadapan dengan Web Bluetooth. Koneksi harus dimulai dengan semacam interaksi fisik pengguna, seperti mengetuk tombol. Anda tidak dapat terhubung secara terprogram saat halaman web dimuat, misalnya.

Kode untuk memulai koneksi terlihat seperti ini:

this.device = menunggu navigator.bluetooth.requestDevice({

filter: [{ namePrefix: "uFire" }], Layanan opsional: [this.serviceUuid] });

Filter: dan bagian Layanan opsional diperlukan untuk menghindari melihat setiap perangkat BLE di luar sana. Anda akan berpikir hanya bagian filter yang akan baik-baik saja, tetapi Anda juga memerlukan bagian optionalServices juga.

Kode di atas akan menampilkan dialog koneksi. Ini adalah bagian dari antarmuka Chrome dan tidak dapat diubah. Pengguna akan memilih dari daftar. Bahkan jika hanya ada satu perangkat yang akan terhubung dengan aplikasi, pengguna masih harus melalui dialog pemilihan ini, karena masalah keamanan.

Sisa kodenya adalah menyiapkan layanan dan karakteristik. Perhatikan bahwa kami menyiapkan rutinitas panggilan balik, mirip dengan panggilan balik pemberitahuan firmware:

service = menunggu server.getPrimaryService(this.serviceUuid);

karakteristik = menunggu service.getCharacteristic(this.txUuid); menunggu karakteristik.startNotifications(); character.addEventListener("characteristicvaluechanged", this.value_update);

this.value_update sekarang akan dipanggil setiap kali ada informasi baru tentang karakteristik tx.

Salah satu hal terakhir yang dilakukannya adalah mengatur timer untuk memperbarui informasi setiap 5 detik.

value_update() hanyalah fungsi panjang yang menunggu informasi JSON baru masuk dan memperbarui UI dengannya.

ec.js, ph.js, dan orp.js berisi banyak fungsi kecil yang mengirimkan perintah untuk mengambil informasi dan mengkalibrasi perangkat.

Untuk mencoba ini, Anda harus ingat bahwa untuk menggunakan Web Bluetooth, Bluetooth harus dilayani melalui HTTPS. Salah satu dari banyak opsi untuk server HTTPS lokal adalah serve-https. Dengan firmware yang diunggah, semuanya terhubung, dan halaman web disajikan, Anda seharusnya dapat melihat semuanya berfungsi.

Langkah 8: Bagian PWA

Ada beberapa langkah untuk mengubah halaman web menjadi aplikasi yang sebenarnya. Aplikasi Web Progresif dapat melakukan lebih dari yang digunakan proyek ini.

• Instalasi halaman web
• Setelah diinstal, akses offline dimungkinkan
• Dimulai dan dijalankan sebagai aplikasi biasa dengan ikon aplikasi yang terlihat biasa

Untuk memulai, kita perlu membuat banyak file. Yang pertama adalah file manifest.json. Ada beberapa situs yang akan melakukan ini untuk Anda, App Manifest Generator, menjadi salah satunya.

Beberapa hal yang perlu dipahami:

• Lingkup aplikasi itu penting. Saya meletakkan halaman web ini di ufire.co/uFire-BLE/. Itu berarti ruang lingkup aplikasi saya adalah /uFire-BLE/.
• URL awal juga penting. Ini adalah jalur ke halaman web khusus Anda dengan domain dasar yang sudah diasumsikan. Jadi karena saya meletakkan ini di ufire.co/uFire-BLE/, URL awalnya adalah /uFire-BLE/ juga.
• Mode Tampilan akan menentukan tampilan aplikasi, Standalone akan membuatnya tampak seperti aplikasi biasa tanpa tombol atau antarmuka Chrome.

Anda akan berakhir dengan file json. Itu harus ditempatkan di akar halaman web, tepat bersama dengan index.html.

Hal berikutnya yang Anda perlukan adalah Service Worker. Sekali lagi, mereka dapat melakukan banyak hal, tetapi proyek ini hanya akan menggunakan caching agar aplikasi ini dapat diakses secara offline. Implementasi pekerja layanan sebagian besar adalah boilerplate. Proyek ini menggunakan contoh Google dan mengubah daftar file yang akan di-cache. Anda tidak dapat menyimpan file di luar domain Anda.

Buka FavIcon Generator dan buat beberapa ikon.

Hal terakhir adalah menambahkan beberapa kode dalam fungsi Vue mounted().

mount: function () { if ('serviceWorker' di navigator) { navigator.serviceWorker.register('service-worker.js'); } }

Ini akan mendaftarkan pekerja dengan browser.

Anda dapat memeriksa apakah semuanya berfungsi, dan jika tidak, mungkin mencari tahu alasannya dengan menggunakan Lighthouse, ia akan menganalisis situs dan memberi tahu Anda segala macam hal.

Jika semuanya berfungsi, saat Anda membuka halaman web, Chrome akan menanyakan apakah Anda ingin memasangnya dengan spanduk sembulan. Anda dapat melihatnya beraksi di ufire.co/uFire-BLE/ jika Anda menggunakan Chrome seluler. Jika Anda menggunakan desktop, Anda dapat menemukan item menu untuk menginstalnya.