3. ESP32-CAM & IoT MQTT Panel

Bagaimana membuat alat yang dapat memantau dari jarak yang sangat jauh?
Menurut saya, cara yang paling mudah adalah dengan menggunakan ESP32-CAM dan blok image di Adafruit IO. Alternatif lain adalah menggunakan ESP32-CAM dan panel Image di aplikasi IoT MQTT Panel di HP Android. Lebih jelasnya, ikuti uraian berikut ini:

Daftar isi:

Berikut ini uraian langkah masing-masing. 

========================================================================================

1. ESP32-CAM & Adafruit IO

Berikut ini langkah-langkah penggunaan blok image di Adafruit IO untuk menampilkan gambar foto yang ditangkap oleh ESP32-CAM secara periodik:
1. Buat akun di https://io.adafruit.com, klik Sign In di pojok kanan atas, pilih Create an Adafruit Account.


Gambar 1. Klik Sign In, klik Create an Adafruit Account

Gambar 2. Isi nama, email, username dan password, kemudian klik Create Account

Gambar 3. Akun Adafruit sudah berhasil dibuat

2.  Berikutnya, klik IO, klik Feeds, klik New Feed.

Gambar 4. Klik IO, klik Feeds, klik New Feed

3. Buat feed baru dengan nama "camera", klik Create.

Gambar 5. Di jendela Create a new Feed, isi Name = camera, klik Create

4. Buka halaman feed camera dengan meng-klik namanya di daftar Feed.

Gambar 6. Muncul nama camera di daftar Feed, klik 2 kali untuk membuka halamannya

5. Berhubung data gambar cukup besar ukurannya (lebih dari 1 KB), maka buat Feed History dari ON menjadi OFF, agar data gambar bisa ditampilkan di Adafruit IO. Klik Feed History, pilih History = OFF.

Gambar 7. Buat Feed History dari ON menjadi OFF

6. Setelah feed berhasil dibuat, langkah berikutnya buat Dashboard dengan meng-klik Dashboards, pilih New Dashboard.

Gambar 8. Pilih Dashboards, klik New Dashboard

7. Di jendela Create a new Dashboard, beri nama Dashboard, kemudian klik Save.

Gambar 9. Isi sembarang nama di kolom Name, klik Create  

8. Buka halaman Dashboard dengan meng-klik 2 kali pada nama Dashboard yang baru saja dibuat. Setelah halaman Dashboard terbuka, klik Dashboard Settings, pilih Create new Block.

Gambar 10. Klik Dashboard Settings, pilih Create New Block

9. Di jendela Create a New Block, pilih blok Image (bergambar kamera)

Gambar 11. Di jendela Create a New Block, pilih blok Image

10. Muncul jendela Connect a Feed, pilih feed camera, klik Next Step.

Gambar 12. Di jendela Connect a Feed, pilih feed camera, klik Next Step

11. Di jendela Block Settings, klik Create Block.

Gambar 13. Di jendela Block settings, klik Create Block

12. Terlihat blok Image muncul di halaman Dashboard. Klik Dashboard Settings, pilih Edit Layout, perbesar ukuran blok Image dengan menarik garis tepinya, setelah itu klik Save Layout.

Gambar 14. Terlihat blok Image muncul di halaman Dashboard, perbesar ukuran dengan Edit Layout 

Gambar 15. Tarik garis tepi blok sehingga ukuran blok menjadi lebih besar, klik Save Layout

13. Sampai di sini pembuatan Feed dan Dashboard di Adafruit IO selesai. Langkah berikutnya adalah memprogram ESP32-CAM. Program ESP32-CAM ini saya ambil dari referensi berikut ini:
Berikut ini kode programnya:


14. Buka software IDE Arduino. Copy program di atas, tempelkan kode program tersebut di halaman program. Isi titik-titik di baris instruksi 31, 32, 35 dan 36 dengan nama Wi-Fi, password Wi-Fi, AIO Username dan AIO Key yang digunakan. 

15. Berikutnya, berhubung ukuran data gambar cukup besar, maka perbesar ukuran buffer (MAXBUFFERSIZE) di library Adafruit_MQTT.h. Untuk itu buka file Adafruit_MQTT.h di folder Adafruit_MQTT_Library, di folder libraries. Klik kanan file tersebut, pilih Open with, pilih Notepad. Di baris 114, ganti angka 512 menjadi 36000.

Gambar 16. Di file Adafruit_MQTT.h, ubah nilai MAXBUFFERSIZE dari 512 menjadi 36000

16. Hubungkan ESP32-CAM ke port USB komputer. Pilih Board = AI Thinker ESP32-CAM, dan atur Port ke port yang digunakan (buka Device Manager untuk mengetahui Port yang digunakan). Kemudian Upload program ke ESP32-CAM. 

17. Setelah upload program berhasil, tunggu beberapa saat. Seharusnya pada tampilan Dashboard Adafruit IO akan menampilkan tangkapan gambar ESP32-CAM, seperti gambar berikut ini.

Gambar 17. ESP32-CAM mengambil gambar, LED-Flash ESP32-CAM menyala

Gambar 18. Halaman feed camera menampilkan tangkapan gambar ESP32-CAM

Gambar 19. Dashboard Adafruit IO menampilkan tangkapan gambar ESP32-CAM

Gambar 20. Agar tampilan Dashboard ini dapat di-share, buat Dashboard Privacy menjadi ON

Gambar 21. Klik pada Share Links, tekan tombol Copy di link paling bawah

Gambar 22. Tempelkan link yang sudah di-copy di browser, maka tampilan Dashboard dapat dibuka

18. Sampai di sini langkah-langkah monitoring jarak jauh dengan ESP32-CAM dan Adafruit IO. 


========================================================================================

2. ESP32-CAM & IoT MQTT Panel

Berikut ini langkah-langkah penggunaan panel image di aplikasi IoT MQTT Panel untuk menampilkan gambar foto yang ditangkap oleh ESP32-CAM secara periodik:
1. Install IoT MQTT Panel dari Google Playstore, kemudian buka IoT MQTT Panel, klik pada tombol Setup a Connection.
2. Di halaman Add Connection, isi nama Connection = (isi dengan nama sembarang), isi broker web = io.adafruit.com, kemudian klik tombol + Dashboard.
3. Isi nama Dashboard dengan nama sembarang, kemudian klik tombol Save.
4. Berikutnya buka Additional options dengan meng-klik panah ke bawah, isi Username dan Password dengan AIO username dan AIO key. Klik tombol Create.
5. Muncul halaman dengan nama Connection yang sudah diisikan. Klik pada nama Connection tersebut.
6. Terbuka halaman Dashboard pada Connection tersebut. Klik tombol Add Panel untuk menambahkan panel pada Dashboard. 
7. Muncul daftar panel yang bisa ditambahkan. Klik pada panel Image.
8. Pada halaman panel Image, isi Panel Name dengan nama sembarang, dan isi Topic dengan nama AIO username, diikuti /feeds/camera. Pilih Image source = Base64 Payload. Klik Create.
9. Maka seharusnya muncul halaman Dashboard dengan panel Image, yang menampilkan gambar yang ditangkap oleh ESP32-CAM.

Gambar-gambar berikut ini menunjukkan langkah-langkah pengaturan di atas.



Gambar 23. Langkah-langkah pengaturan di IoT MQTT Panel untuk monitoring jarak jauh

Untuk lebih jelasnya mengenai pembuatan monitoring jarak jauh dengan ESP32-CAM, Adafruit IO dan IoT MQTT Panel ini, silahkan melihat video berikut ini:

Video monitoring jarak jauh dengan ESP32-CAM, Adafruit IO dan IoT MQTT Panel 

No comments:

Post a Comment