Visualisasi Data pada Web Server

Assalamu’alaikum!

Setelah berhasil menampilkan bacaan suhu, ketinggian, kelembapan dan tekanan dari pengukuran yang dilakukan sensor BME280 pada sebuah halaman web server, saat ini aku akan mencoba menampilkan plot supaya hasil bacaan tersebut lebih mudah diamati. Aku mengikuti tutorial pada tautan berikut: https://randomnerdtutorials.com/esp32-esp8266-plot-chart-web-server/.

Aku harus mengunduh suatu plugin untuk mengunggah filesystem. Aku sempat bingung dalam mengunduh plugin ini karena tidak menemukan nama folder yaitu arduino<nomor_versi>. Ternyata, aku memiliki folder Arduino yang sebenarnya sama saja. Karena sudah muncul ‘ESP32 Sketch Data Upload’ ketika tab Tools pada Arduino IDE ditekan, artinya plugin tersebut sudah terunduh dengan sempurna.

Selanjutnya, aku mengunduh dan memasukkan dua jenis library, yaitu ESPAsyncWebServer dan AsyncTCP. Aku menyusun rangkaian seperti berikut ini.

20200427_195127

Kemudian, aku membuat satu folder yang berisi Arduino Sketch dan folder data. Di dalam folder data ini, aku memasukkan file HTML. Kode untuk Arduino Sketch maupun HTML aku dapatkan dari tautan tutorial di atas pula. Terima kasih banyak RandomnerdTutorial! Tentu saja aku tidak lupa untuk mengganti SSID dan password sesuai dengan wifi yang digunakan di rumahku.

Bedanya dengan pembacaan sebelumnya, aku perlu meng-upload file melalui plugin tadi. Setelah upload berhasil, aku melanjutkan dengan mengunggah kode ke ESP32 seperti biasa. Oh ya, aku baru menyadari kalau ESP32 milikku yang harus ditekan tombol boot-nya setiap akan mengunggah kode cukup merepotkan 😦 Apalagi jika proses pengunggahan memakan waktu lama … Aku sempat mencari cara di internet untuk membuat ESP32 selalu dalam keadaan mampu menerima unggahan kode, tetapi cara yang kutemukan membutuhkan beberapa alat yang tidak aku miliki. Untuk sementara ini, aku tidak punya pilihan lain.

Ketika upload telah selesai, aku membuka serial monitor pada 115200 baud. Aku menekan tombol EN untuk mengetahui IP address. Ekspektasiku, akan muncul tulisan bahwa ESP32 telah terkoneksi ke wifi dan terdapat satu IP address seperti yang terlihat di serial monitor percobaan sebelumnya, screenshootnya di bawah ini.

20200427_200526 Tetapi, yang muncul justru seperti ini.

20200427_212321

JENG JENG JENG. Aku mengalami flashback karena pada percobaan sebelumnya, aku juga mengalami hal yang sama. Bahkan setelah aku menyolder sensor tersebut, masih sempat muncul tulisan seperti itu. Tetapi, entah bagaimana setelah aku biarkan beberapa lama, BME280 akhirnya terhubung juga.

Aku tidak mengubah rakitanku sama sekali. Kodenya pun aku langsung menggunakan dari RandomnerdTutorial yang di topik sebelumnya tidak ada masalah. Aku penasaran bagaimana di percobaan sebelumnya BME280 tiba-tiba terhubung, padahal aku tidak melakukan apa-apa. Sayangnya, setelah aku tunggu untuk waktu yang cukup lama, BME280-ku belum juga mau terhubung pada percobaan kali ini 😦 Aneh sekali.

Di topik sebelumnya, aku telah melakukan scanning alamat I2C BME280. Awalnya, alamat tersebut tidak aku temukan. Kemudian, setelah bacaan berhasil keluar di serial monitor, aku mencoba lagi dan ternyata kutemukan alamat seperti di bawah ini.

20200427_194614

Di percobaan ini, aku mencoba melakukan scanning, dan hasilnya sama seperti pada awal topik sebelumnya, yang muncul adalah seperti ini.

 

 

 

20200427_222522

Aku masih tidak mengerti bagaimana bisa alat yang sama, dengan rangkaian yang sama, dapat berubah dari tidak terdeteksi menjadi terdeteksi kemudian menjadi tidak terdeteksi kembali seperti ini :(. Aku mencoba membuat arduino-ku berkedip, dan lagi-lagi masih bisa. Artinya, masalah bukan pada mikrokontroller dan kabel data, tetapi ada pada hubungan dengan BME280.

Karena aku tidak mungkin membeli sensor baru, akhirnya teman sekelompokku Sulis mengijinkanku melihat hasil pekerjaan miliknya. Terima kasih Sulis!

Seharusnya, jika muncul IP address, IP address tersebut dapat dimasukkan ke browser dan muncul plot garis. Plot tersebut di-update setiap 30 detik sehingga data bisa diamati perubahannya secara nyaris real-time. Setiap titik data juga bisa ditekan untuk memunculkan detail waktu data tersebut diambil.

Sekian percobaan yang gagal kali ini 😦

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s