Dalam banyak proyek Internet of Things (IoT), menampilkan data sensor dalam bentuk angka saja sering kali kurang informatif. Oleh karena itu, diperlukan antarmuka (user interface) yang mampu menyajikan data secara visual sehingga lebih mudah dipahami. Salah satu bentuk visualisasi yang paling umum digunakan adalah analog gauge atau meter analog berbentuk lingkaran, seperti yang sering dijumpai pada speedometer kendaraan maupun panel instrumen industri. Library DIYables ESP32 WebApps menyediakan contoh aplikasi Web Analog Gauge yang memungkinkan ESP32 menampilkan data sensor secara real-time melalui browser web tanpa memerlukan aplikasi tambahan. Antarmuka ini berjalan menggunakan WebSocket, sehingga setiap perubahan nilai sensor langsung diperbarui pada tampilan gauge tanpa perlu me-refresh halaman. Pada tutorial ini Anda akan mempelajari cara menjalankan contoh Web Analog Gauge pada ESP32, mulai dari instalasi library hingga mengakses tampilan gauge melalui browser di komputer maupun smartphone.
Mengenal DIYables ESP32 Web Analog Gauge
Web Analog Gauge merupakan contoh aplikasi yang disediakan oleh library DIYables ESP32 WebApps untuk membuat tampilan pengukur analog berbentuk lingkaran (circular gauge) yang dapat diakses melalui jaringan WiFi. Setelah program dijalankan, ESP32 akan berfungsi sebagai web server, kemudian browser akan menampilkan sebuah gauge interaktif yang terus diperbarui sesuai nilai yang dikirim oleh ESP32. Antarmuka ini sangat cocok digunakan untuk menampilkan berbagai data analog, seperti nilai sensor suhu, tegangan listrik (Voltage), arus listrik (Current), tekanan udara, ketinggian air, intensitas cahaya, kelembapan, kecepatan motor, nilai ADC ESP32, dan berbagai data sensor analog lainnya. Dengan tampilan berbentuk meter analog, perubahan nilai sensor dapat diamati secara lebih intuitif dibandingkan hanya melihat angka.
Baca juga: Library DIYables ESP32 WebApps - Membangun Aplikasi Web Interaktif untuk ESP32 dengan Mudah
Fitur DIYables ESP32 Web Analog Gauge
1. Tampilan Gauge Analog Profesional
Aplikasi menampilkan gauge analog berbentuk lingkaran lengkap dengan skala pengukuran dan jarum indikator yang bergerak secara dinamis mengikuti perubahan nilai sensor.
2. Rentang Pengukuran Dapat Dikonfigurasi
Pengguna dapat menentukan sendiri nilai minimum, nilai maksimum, dan satuan pengukuran (unit). Sebagai contoh:
- 0–100 °C
- 0–5 Volt
- 0–100 %
- 0–1023 ADC
Rentang tersebut ditentukan langsung pada saat pembuatan objek gauge sehingga tidak memerlukan konfigurasi tambahan.
3. Pembaruan Data Secara Real-Time
Nilai sensor diperbarui menggunakan teknologi WebSocket, sehingga browser menerima perubahan data secara langsung. Metode ini tidak perlu melakukan refresh halaman, penggunaan bandwith lebih efisien, dan animasi jarum gauge terlihat lebih halus.
4. Zona Warna sebagai Indikator Kondisi
Gauge mendukung penggunaan beberapa zona warna, misalnya:
- Hijau → kondisi normal
- Kuning → kondisi waspada
- Merah → kondisi kritis
Dengan adanya indikator warna, pengguna dapat mengetahui kondisi sensor hanya dengan melihat tampilan gauge.
5. Presisi Nilai yang Dapat Diatur
Jumlah angka di belakang koma dapat disesuaikan sesuai kebutuhan. Sebagai contoh: 25, 25.3, dan 25.37. Fitur ini berguna ketika menampilkan data sensor yang membutuhkan tingkat ketelitian tertentu.
6. Komunikasi Menggunakan WebSocket
Library ini memanfaatkan WebSocket sebagai media komunikasi antara ESP32 dan browser. Berbeda dengan metode HTTP biasa, WebSocket memungkinkan komunikasi berlangsung secara dua arah (bidirectional), sehingga ESP32 dan browser dapat saling mengirim serta menerima data secara langsung tanpa perlu melakukan permintaan (request) berulang. Penggunaan WebSocket juga menawarkan latensi yang rendah, pembaruan data secara real-time, serta memberikan pengalaman pengguna yang lebih responsif karena setiap perubahan dapat ditampilkan secara instan pada halaman web.
7. Mendukung Berbagai Perangkat
Web Analog Gauge memiliki antarmuka yang bersifat responsif (responsive), sehingga dapat diakses dengan nyaman melalui berbagai jenis perangkat, seperti komputer desktop, laptop, tablet, smartphone Android, maupun iPhone. Tampilan halaman web akan menyesuaikan ukuran layar secara otomatis, sehingga informasi tetap mudah dibaca dan digunakan tanpa perlu melakukan pengaturan tambahan.
8. Konfigurasi Lebih Sederhana
Sebagian besar parameter gauge cukup ditentukan saat objek dibuat pada program Arduino. Dengan demikian, pengguna tidak perlu melakukan konfigurasi tambahan melalui halaman web.
Perangkat Keras yang Dibutuhkan
Sebelum memulai praktik, siapkan beberapa perangkat berikut:
- ESP32 Dev Module ESP-WROOM-32 (38 Pin)
- Kabel USB untuk menghubungkan ESP32 ke komputer
Menginstal Library DIYables ESP32 WebApps
Sebelum menjalankan contoh program, terlebih dahulu instal library DIYables ESP32 WebApps pada Arduino IDE. Ikuti langkah-langkah berikut:
1. Hubungkan ESP32 ke Komputer
Sambungkan board ESP32 ke komputer menggunakan kabel USB. Pastikan driver USB sudah terinstal sehingga board dapat dikenali oleh sistem operasi.
2. Buka Arduino IDE
Jalankan Arduino IDE, kemudian pilih:
Tools → Board → ESP32 Arduino → ESP32 Dev Module
Selanjutnya pilih port COM yang sesuai melalui menu:
Tools → Port
3. Instal Library DIYables ESP32 WebApps
Klik ikon Library Manager yang berada di sisi kiri Arduino IDE. Kemudian lakukan pencarian dengan kata kunci:
DIYables ESP32 WebApps
Pilih library DIYables ESP32 WebApps by DIYables, kemudian klik tombol Install.
4. Instal Seluruh Library Dependensi
Saat proses instalasi berlangsung, Arduino IDE biasanya akan meminta pemasangan beberapa library tambahan (dependencies). Klik tombol Install All agar seluruh library pendukung ikut terinstal.
Library tambahan tersebut diperlukan agar contoh program dapat dikompilasi tanpa mengalami error.
Membuka Contoh Program Web Analog Gauge
Setelah seluruh library berhasil diinstal, buka contoh program bawaan melalui menu berikut:
File → Examples → DIYables ESP32 WebApps → WebAnalogGauge.
Contoh sketch tersebut telah berisi konfigurasi dasar sehingga dapat langsung dijalankan setelah kredensial WiFi disesuaikan.
Mengatur Koneksi WiFi
Sebelum program diunggah ke ESP32, ubah terlebih dahulu nama jaringan WiFi dan password sesuai jaringan yang digunakan. Temukan bagian kode berikut:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
Kemudian ubah menjadi:
const char WIFI_SSID[] = "Nama_WiFi_Anda";
const char WIFI_PASSWORD[] = "Password_WiFi_Anda";
Pastikan ESP32 dan perangkat yang digunakan untuk membuka browser berada pada jaringan WiFi yang sama, sehingga halaman web dapat diakses tanpa kendala.
Mengunggah Program ke ESP32
Setelah konfigurasi selesai dilakukan, klik tombol Upload pada Arduino IDE. Arduino IDE akan melakukan proses kompilasi program, mengunggah sketch ke ESP32, dan menjalankan program secara otomatis setelah proses upload selesai.
Membuka Serial Monitor
Setelah upload berhasil, buka Serial Monitor. Apabila proses koneksi berhasil, Serial Monitor akan menampilkan informasi seperti berikut.
Jika belum muncul informasi apa pun, tekan tombol EN (Enable/Reset) pada board ESP32 untuk melakukan restart.
Mengakses Antarmuka Web Analog Gauge
Setelah ESP32 berhasil terhubung ke jaringan WiFi, Serial Monitor akan menampilkan alamat IP yang diperoleh dari router. Contohnya: http://10.195.113.32. Masukkan alamat tersebut ke browser pada komputer maupun smartphone yang terhubung ke jaringan WiFi yang sama.
Membuka Halaman Web Analog Gauge
Pada halaman utama, klik menu Web Analog Gauge. Browser akan menampilkan antarmuka gauge analog seperti berikut:
Selain melalui halaman utama, Anda juga dapat mengakses halaman gauge secara langsung menggunakan format URL berikut: http://alamat-ip-esp32/web-analog-gauge/. Sebagai contoh: http://10.195.113.32/web-analog-gauge/. Setelah halaman berhasil dimuat, browser akan menampilkan gauge analog interaktif yang memperlihatkan nilai sensor secara real-time. Setiap perubahan data yang dikirim oleh ESP32 akan langsung menggerakkan jarum gauge secara otomatis tanpa perlu me-refresh halaman, sehingga proses pemantauan menjadi lebih cepat, responsif, dan mudah dipahami.
Fitur Antarmuka Web Analog Gauge
Salah satu keunggulan DIYables ESP32 Web Analog Gauge adalah antarmuka web yang dirancang sederhana namun informatif. Semua data sensor ditampilkan secara real-time melalui browser sehingga pengguna dapat memantau kondisi sensor dengan mudah tanpa memerlukan aplikasi tambahan. Berikut beberapa fitur utama yang tersedia pada antarmuka Web Analog Gauge.
a. Tampilan Gauge Analog Interaktif
Antarmuka Web Analog Gauge menggunakan tampilan gauge analog berbentuk lingkaran (circular gauge) yang menyerupai panel instrumen pada kendaraan atau peralatan industri. Desain ini membuat perubahan nilai sensor lebih mudah diamati dibandingkan hanya menampilkan angka.
b. Gauge Berbentuk Lingkaran
Web Analog Gauge menampilkan indikator berbentuk jarum yang bergerak secara dinamis mengikuti perubahan nilai sensor secara real-time. Tampilan ini memudahkan pengguna untuk mengamati perubahan nilai dengan cepat sekaligus memberikan kesan profesional. Oleh karena itu, gauge berbentuk lingkaran sangat cocok digunakan pada berbagai dashboard monitoring berbasis Internet of Things (IoT).
c. Rentang Nilai Fleksibel
Library ini memungkinkan pengguna menentukan sendiri rentang pengukuran sesuai karakteristik sensor yang digunakan. Misalnya, gauge dapat dikonfigurasi untuk menampilkan rentang 0–5 Volt, 0–100 °C, 0–1023 ADC, atau 0–300 PSI. Seluruh rentang tersebut ditentukan saat objek gauge dibuat di dalam program Arduino, sehingga dapat disesuaikan dengan kebutuhan setiap proyek.
d. Menampilkan Nilai Sensor Secara Langsung
Selain menampilkan posisi jarum, Web Analog Gauge juga menampilkan nilai sensor dalam bentuk angka lengkap dengan satuan pengukurannya. Sebagai contoh, nilai dapat ditampilkan sebagai 4,72 V atau 27,6 °C. Dengan adanya tampilan numerik ini, pengguna dapat membaca hasil pengukuran secara lebih akurat tanpa harus memperkirakan posisi jarum pada gauge.
e. Indikator Zona Warna
Web Analog Gauge mendukung penggunaan beberapa zona warna untuk menunjukkan kondisi sensor secara visual. Misalnya, warna hijau menunjukkan kondisi normal, kuning menandakan kondisi waspada, sedangkan merah mengindikasikan kondisi kritis. Fitur ini membantu pengguna mengenali status sistem hanya dengan melihat warna yang ditampilkan pada gauge, sehingga proses monitoring menjadi lebih cepat dan efektif.
f. Pengaturan Presisi Tampilan
Jumlah angka di belakang koma dapat diatur sesuai tingkat ketelitian yang dibutuhkan. Sebagai contoh, nilai dapat ditampilkan sebagai 25, 25,4, atau 25,47. Pengaturan presisi ini memungkinkan hasil pengukuran ditampilkan secara lebih sederhana maupun lebih detail, tergantung kebutuhan aplikasi yang sedang dikembangkan.
Pembaruan Data Secara Real-Time
DIYables Web Analog Gauge menggunakan WebSocket sebagai media komunikasi antara ESP32 dan browser. Berbeda dengan metode HTTP biasa yang mengharuskan browser melakukan refresh halaman, WebSocket memungkinkan data dikirim secara langsung setiap kali nilai sensor berubah.
1. Pembaruan Data Otomatis
Setiap pembacaan sensor baru akan langsung dikirim oleh ESP32 menuju browser. Pengguna tidak perlu menekan tombol refresh untuk melihat perubahan nilai.
2. Pergerakan Jarum Lebih Halus
Saat nilai sensor berubah, posisi jarum gauge juga berubah secara bertahap sehingga animasi terlihat lebih alami dan nyaman dipantau. Hal ini membuat dashboard tampak lebih profesional dibandingkan perubahan yang terjadi secara tiba-tiba.
3. Indikator Status Koneksi
Antarmuka web juga menyediakan indikator status koneksi sehingga pengguna dapat mengetahui apakah browser masih terhubung dengan ESP32. Apabila koneksi terputus, indikator tersebut akan membantu proses identifikasi masalah komunikasi.
4. Kompatibel dengan Berbagai Perangkat
Karena menggunakan teknologi web, dashboard dapat diakses melalui berbagai perangkat, seperti komputer dekstop, laptop, tablet, smartphone Android maupun iPhone. Tampilan akan menyesuaikan ukuran layar secara otomatis sehingga tetap nyaman digunakan.
Konfigurasi Program Web Analog Gauge
Setelah memahami tampilan antarmuka, langkah berikutnya adalah mempelajari bagaimana Web Analog Gauge dikonfigurasi di dalam program Arduino. Secara umum terdapat dua bagian penting, yaitu membuat objek gauge dan mengirim nilai sensor ke antarmuka web.
1. Mengatur Rentang Gauge
Objek gauge dibuat menggunakan kelas DIYablesWebAnalogGaugePage.
Contoh kode:
// Configure gauge range and units
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // 0-100 Volts
// Set up value request callback
gaugePage.onGaugeValueRequest(onGaugeValueRequested);
Pada contoh di atas, terdapat beberapa parameter penting sebagai berikut:
a. Nilai Minimum
Parameter pertama, yaitu 0.0, merupakan nilai minimum atau batas bawah yang dapat ditampilkan oleh gauge. Nilai ini biasanya disesuaikan dengan rentang pengukuran sensor yang digunakan sehingga indikator dapat bekerja dengan benar.
b. Nilai Maksimum
Parameter kedua, yaitu 100.0, berfungsi sebagai nilai maksimum atau batas atas skala gauge. Jika sensor yang digunakan memiliki rentang pengukuran yang berbeda, nilai ini dapat diubah sesuai kebutuhan. Misalnya, untuk mengukur tegangan 0–5 Volt dapat menggunakan kode DIYablesWebAnalogGaugePage gaugePage(0.0, 5.0, "V");, sedangkan untuk sensor suhu dengan rentang -20 hingga 80 °C dapat menggunakan DIYablesWebAnalogGaugePage gaugePage(-20.0, 80.0, "°C");.
c. Satuan Pengukuran
Parameter selanjutnya digunakan untuk menentukan satuan pengukuran yang akan ditampilkan pada gauge. Sebagai contoh, jika parameter diisi dengan "V", maka nilai yang ditampilkan akan menggunakan satuan Volt. Pengguna dapat menyesuaikan satuan ini dengan jenis sensor yang digunakan, seperti Volt (V), Ampere (A), Derajat Celsius (°C), Persen (%), PSI, Lux, maupun RPM. Dengan adanya satuan pengukuran, informasi yang ditampilkan menjadi lebih mudah dipahami.
d. Callback Pembacaan Nilai
Selain mengatur tampilan gauge, program juga perlu menentukan bagaimana nilai sensor dikirim ke halaman web. Hal ini dilakukan melalui kode gaugePage.onGaugeValueRequest(onGaugeValueRequested); yang berfungsi untuk mendaftarkan callback function. Setiap kali halaman web meminta data terbaru, library akan memanggil fungsi callback tersebut secara otomatis. Di dalam fungsi inilah pengguna dapat membaca nilai sensor, kemudian mengirimkannya ke Web Analog Gauge agar tampilan selalu diperbarui secara real-time.
2. Mengirim Nilai Sensor ke Gauge
Nilai sensor dikirim melalui callback menggunakan fungsi sendGaugeValue().
Contoh implementasinya sebagai berikut:
void onGaugeValueRequested() {
// Read sensor value (example with potentiometer)
int sensorValue = analogRead(A0);
float voltage = (sensorValue / 1023.0) * 5.0;
// Send to gauge
gaugePage.sendGaugeValue(voltage);
}
Mari kita pahami fungsi dari setiap bagian kode tersebut agar lebih mudah mengetahui alur pengiriman data dari sensor ke Web Analog Gauge.
a. Membaca Nilai Sensor
Kode int sensorValue = analogRead(A0); digunakan untuk membaca nilai analog dari sensor yang terhubung ke pin A0. Hasil pembacaan berupa nilai ADC (Analog to Digital Converter) yang umumnya berada pada rentang 0 hingga 1023. Khusus pada ESP32, rentang nilai ADC dapat berbeda bergantung pada konfigurasi resolusi yang digunakan.
b. Mengubah Nilai Menjadi Tegangan
Setelah nilai ADC diperoleh, langkah berikutnya adalah mengubahnya menjadi nilai tegangan menggunakan kode float voltage = (sensorValue / 1023.0) * 5.0;. Perhitungan ini mengonversi nilai digital menjadi satuan Volt, sehingga lebih mudah dipahami. Sebagai contoh, nilai ADC 0 akan menghasilkan 0 Volt, nilai 512 sekitar 2,5 Volt, sedangkan nilai 1023 setara dengan 5 Volt. Rumus konversi ini dapat disesuaikan dengan karakteristik sensor maupun tegangan referensi yang digunakan pada proyek.
c. Mengirim Data ke Browser
Setelah nilai sensor berhasil diproses, data dikirim ke halaman web menggunakan fungsi gaugePage.sendGaugeValue(voltage);. Fungsi sendGaugeValue() akan mengirimkan nilai terbaru ke browser melalui koneksi WebSocket. Begitu data diterima, tampilan Web Analog Gauge akan diperbarui secara otomatis dan jarum indikator akan bergerak mengikuti perubahan nilai sensor secara real-time.
Opsi Kustomisasi Web Analog Gauge
Web Analog Gauge dapat disesuaikan untuk berbagai jenis proyek IoT. Beberapa parameter berikut dapat diubah sesuai kebutuhan aplikasi.
1. Mengubah Rentang Pengukuran
Anda dapat menyesuaikan rentang gauge berdasarkan karakteristik sensor. Parameter yang dapat diubah meliputi:
- Nilai minimum, yaitu batas pembacaan terendah yang akan ditampilkan.
- Nilai maksimum, yaitu batas pembacaan tertinggi pada gauge.
- Satuan (unit), seperti V, A, °C, PSI, Lux, atau satuan lainnya.
- Presisi tampilan, yaitu jumlah angka di belakang koma yang akan ditampilkan.
Dengan konfigurasi tersebut, satu komponen gauge dapat digunakan untuk berbagai jenis sensor.
2. Mengintegrasikan Berbagai Jenis Sensor
Web Analog Gauge tidak terbatas hanya untuk pembacaan tegangan. Anda dapat menghubungkannya dengan berbagai jenis sensor sesuai kebutuhan proyek. Beberapa contohnya sebagai berikut:
- Sensor analog, seperti sensor tegangan, arus, tekanan, dan sensor cahaya.
- Sensor digital, misalnya sensor suhu, kelembapan, atau sensor gas yang menggunakan komunikasi I2C, SPI, maupun antarmuka digital lainnya.
- Nilai hasil perhitungan, yaitu data yang diperoleh dari pengolahan beberapa sensor sekaligus, seperti daya listrik, efisiensi sistem, atau rata-rata pembacaan sensor.
- Data yang telah dikalibrasi, yaitu nilai sensor yang telah dikoreksi menggunakan faktor kalibrasi agar hasil pengukuran lebih akurat.
Dengan fleksibilitas tersebut, DIYables ESP32 Web Analog Gauge dapat diterapkan pada berbagai aplikasi, mulai dari sistem monitoring sederhana hingga dashboard pemantauan industri berbasis ESP32.
Contoh Program ESP32 Web Analog Gauge dengan Potensiometer
Setelah memahami cara kerja Web Analog Gauge, sekarang saatnya menghubungkannya dengan perangkat keras. Pada contoh berikut, nilai yang ditampilkan pada gauge berasal dari potensiometer yang terhubung ke pin analog ESP32. Setiap perubahan posisi knop potensiometer akan dibaca oleh ESP32, kemudian nilainya dikirim secara real-time ke browser menggunakan WebSocket. Jarum gauge akan bergerak mengikuti perubahan nilai tersebut tanpa perlu me-refresh halaman. Berikut adalah program lengkapnya.
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Define pin
#define PIN_ANALOG 36
// Create WebApp server and page instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
// Gauge configuration constants
const float GAUGE_MIN_VALUE = 0.0;
const float GAUGE_MAX_VALUE = 100.0;
const String GAUGE_UNIT = "%";
DIYablesWebAnalogGaugePage webAnalogGaugePage(GAUGE_MIN_VALUE, GAUGE_MAX_VALUE, GAUGE_UNIT);
// variables
unsigned long lastUpdateTime = 0;
const unsigned long UPDATE_INTERVAL = 500;
const float STEP_SIZE = 1.0;
float currentGaugeValue = GAUGE_MIN_VALUE;
float step = STEP_SIZE;
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - Web Analog Gauge Example");
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webAnalogGaugePage);
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
setupCallbacks();
}
void setupCallbacks() {
webAnalogGaugePage.onGaugeValueRequest([]() {
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
Serial.println("Web client requested gauge value - Sent: " + String(currentGaugeValue, 1) + GAUGE_UNIT);
});
}
void loop() {
webAppsServer.loop();
if (millis() - lastUpdateTime >= UPDATE_INTERVAL) {
lastUpdateTime = millis();
currentGaugeValue = analogRead(PIN_ANALOG);
currentGaugeValue = map(currentGaugeValue, 0, 4095, 0, 100);
if (currentGaugeValue >= GAUGE_MAX_VALUE || currentGaugeValue <= GAUGE_MIN_VALUE) {
step *= -1;
}
if (currentGaugeValue < GAUGE_MIN_VALUE) currentGaugeValue = GAUGE_MIN_VALUE;
if (currentGaugeValue > GAUGE_MAX_VALUE) currentGaugeValue = GAUGE_MAX_VALUE;
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
Serial.println("Gauge: " + String(currentGaugeValue, 1) + GAUGE_UNIT);
}
delay(10);
}
Penjelasan Program
Meskipun contoh program di atas cukup panjang, alur kerjanya sebenarnya sederhana. Program hanya melakukan tiga proses utama, yaitu membaca nilai analog dari potensiometer, mengubah nilai tersebut menjadi persentase, lalu mengirimkannya ke antarmuka web.
1. Mengatur Kredensial WiFi
Bagian berikut digunakan untuk menentukan jaringan WiFi yang akan digunakan ESP32.
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
Ganti nilai tersebut sesuai dengan nama jaringan (SSID) dan password WiFi Anda.
2. Menentukan Pin Analog
#define PIN_ANALOG 36
Pin GPIO36 digunakan sebagai masukan analog. Pada contoh ini, kaki tengah potensiometer dihubungkan ke pin tersebut sehingga setiap perubahan posisi knop akan menghasilkan nilai ADC yang berbeda.
3. Membuat Web Server
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
Objek ini berfungsi sebagai web server yang akan melayani permintaan dari browser. Port yang digunakan yaitu:
- 80 untuk layanan HTTP.
- 81 untuk komunikasi WebSocket.
4. Mengatur Konfigurasi Gauge
const float GAUGE_MIN_VALUE = 0.0;
const float GAUGE_MAX_VALUE = 100.0;
const String GAUGE_UNIT = "%";
Parameter yang digunakan saat membuat objek Web Analog Gauge berfungsi untuk menentukan karakteristik tampilan gauge. Pada contoh ini, gauge dikonfigurasi dengan nilai minimum 0, nilai maksimum 100, serta menggunakan satuan persen (%). Konfigurasi tersebut sesuai untuk menampilkan data yang memiliki rentang 0 hingga 100 persen. Jika Web Analog Gauge digunakan untuk jenis sensor lain, nilai minimum, nilai maksimum, maupun satuan pengukurannya dapat disesuaikan dengan kebutuhan. Misalnya, untuk sensor tegangan dapat menggunakan satuan Volt (V), untuk sensor suhu menggunakan Derajat Celsius (°C), sedangkan sensor tekanan dapat menggunakan PSI. Dengan demikian, gauge dapat digunakan secara fleksibel pada berbagai aplikasi monitoring berbasis Arduino maupun ESP32.
5. Membuat Halaman Web Analog Gauge
DIYablesWebAnalogGaugePage webAnalogGaugePage(
GAUGE_MIN_VALUE,
GAUGE_MAX_VALUE,
GAUGE_UNIT
);
Objek ini akan menghasilkan halaman web yang menampilkan gauge analog.
6. Menjalankan Server Web
Pada fungsi setup(), program akan menginisialisasi Serial Monitor, menambahkan halaman Home, menambahkan halaman Web Analog Gauge, menjalankan web server, dan menghubungkan ESP32 ke jaringan WiFi. Jika koneksi gagal, ESP32 akan terus mencoba menjalankan server hingga berhasil.
7. Callback Saat Browser Meminta Data
webAnalogGaugePage.onGaugeValueRequest([]() {
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
});
Fungsi callback ini dijalankan ketika browser pertama kali membuka halaman atau melakukan koneksi ulang. ESP32 kemudian langsung mengirim nilai sensor terbaru sehingga tampilan gauge langsung sesuai dengan kondisi sebenarnya.
8. Membaca Nilai Potensiometer
Pada fungsi loop(), program membaca nilai analog menggunakan perintah berikut:
currentGaugeValue = analogRead(PIN_ANALOG);
ESP32 memiliki ADC 12-bit sehingga nilai yang dihasilkan berada pada rentang 0 – 4095. Semakin besar posisi potensiometer, semakin besar pula nilai ADC yang dibaca.
9. Mengubah Nilai ADC Menjadi Persentase
Nilai ADC kemudian dikonversi menggunakan fungsi:
currentGaugeValue = map(currentGaugeValue, 0, 4095, 0, 100);
Artinya:
- ADC 0 menjadi 0%
- ADC 2048 menjadi sekitar 50%
- ADC 4095 menjadi 100%
Dengan demikian, tampilan gauge akan memiliki skala 0 hingga 100 persen.
10. Mengirim Nilai ke Browser
Setelah nilai diperoleh, ESP32 mengirimkannya menggunakan:
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
Browser akan menerima data tersebut melalui WebSocket, kemudian jarum gauge bergerak mengikuti nilai terbaru secara otomatis.
Kasus Penggunaan Web Analog Gauge
Web Analog Gauge dapat diterapkan pada berbagai proyek berbasis ESP32 yang membutuhkan visualisasi data sensor secara langsung. Beberapa contoh penerapannya antara lain sebagai berikut:
1. Monitoring Energi Listrik
Gauge digunakan untuk menampilkan tegangan, arus, daya listrik, dan konsumsi energi. Visualisasi ini memudahkan proses pemantauan sistem kelistrikan secara real-time.
2. Stasiun Cuaca (Weather Station)
Gauge dapat digunakan untuk menampilkan data dari berbagai sensor lingkungan, seperti suhu udara, kelembapan, tekanan udara maupun intensitas cahaya.
3. Laboratorium Elektronika
Pada kegiatan praktikum, gauge dapat dimanfaatkan untuk menampilkan hasil pengukuran sensor sehingga mahasiswa atau siswa dapat mengamati perubahan data secara langsung.
4. Pengembangan Perangkat IoT
Saat mengembangkan sistem IoT, Web Analog Gauge sangat membantu untuk memantau data sensor tanpa harus membuat aplikasi Android maupun desktop.
Implementasi pada Berbagai Bidang
Selain sebagai media pembelajaran, Web Analog Gauge juga dapat digunakan pada berbagai aplikasi nyata. Beberapa di antaranya yaitu:
- Smart Home, untuk memantau kondisi rumah secara otomatis.
- Smart Agriculture, untuk mengawasi kelembapan tanah, suhu, dan kondisi tanaman.
- Monitoring Industri, untuk menampilkan parameter mesin secara real-time.
- Penelitian dan Prototipe, sebagai dashboard visual selama proses pengembangan sistem.
Pemecahan Masalah (Troubleshooting)
Jika Web Analog Gauge tidak bekerja sebagaimana mestinya, lakukan beberapa pemeriksaan berikut.
1. Nilai Gauge Tidak Berubah
Jika jarum gauge tetap diam, kemungkinan penyebabnya antara lain:
- ESP32 belum berhasil terhubung ke jaringan WiFi.
- Browser kehilangan koneksi WebSocket.
- Nilai sensor tidak berhasil dikirim dari ESP32.
- Rentang minimum dan maksimum gauge tidak sesuai.
- Terjadi kesalahan pada program.
Gunakan Serial Monitor untuk memastikan data sensor terus diperbarui dan tidak muncul pesan error.
2. Nilai Gauge Tidak Sesuai
Jika nilai yang ditampilkan tidak akurat, lakukan pemeriksaan berikut:
- Pastikan kabel sensor telah terhubung dengan benar.
- Periksa konfigurasi pin analog pada ESP32.
- Lakukan kalibrasi sensor jika diperlukan.
- Pastikan proses konversi nilai menggunakan rumus atau fungsi map() sudah benar.
3. Halaman Web Tidak Dapat Diakses
Jika browser tidak dapat membuka halaman Web Analog Gauge, periksa beberapa hal berikut:
- Pastikan alamat IP yang dimasukkan sudah benar.
- Pastikan komputer dan ESP32 berada pada jaringan WiFi yang sama.
- Periksa pengaturan firewall jika menggunakan komputer.
- Gunakan jaringan WiFi 2,4 GHz, karena sebagian besar board ESP32 tidak mendukung jaringan 5 GHz.
- Muat ulang (refresh) halaman browser.
Fitur Lanjutan
Selain menampilkan satu buah gauge, library DIYables ESP32 WebApps juga mendukung berbagai fitur lanjutan yang dapat digunakan untuk mengembangkan dashboard monitoring yang lebih kompleks.
1. Menampilkan Beberapa Gauge Sekaligus
Anda dapat membuat beberapa gauge dalam satu halaman untuk menampilkan parameter yang berbeda.
Contohnya:
DIYablesWebAnalogGaugePage voltageGauge(0.0, 5.0, "V");
DIYablesWebAnalogGaugePage currentGauge(0.0, 2.0, "A");
DIYablesWebAnalogGaugePage tempGauge(-40.0, 85.0, "°C");
server.addApp(&voltageGauge);
server.addApp(¤tGauge);
server.addApp(&tempGauge);
Dengan cara ini, satu dashboard dapat digunakan untuk memantau beberapa sensor secara bersamaan.
2. Menggabungkan dengan Web Plotter
Selain menampilkan nilai saat ini, data sensor juga dapat dikirim ke Web Plotter untuk menampilkan grafik perubahan nilai terhadap waktu.
Contohnya:
// Send same value to both gauge and plotter
gaugePage.sendGaugeValue(voltage);
plotterPage.sendData("Voltage", voltage);
Kombinasi gauge dan plotter membuat proses analisis data menjadi lebih mudah karena pengguna dapat melihat nilai saat ini sekaligus riwayat perubahan data.
Integrasi dalam Pembelajaran STEM
Web Analog Gauge sangat sesuai digunakan sebagai media pembelajaran pada bidang STEM (Science, Technology, Engineering, and Mathematics) karena menggabungkan konsep elektronika, pemrograman, serta teknologi web dalam satu proyek.
1. Tujuan Pembelajaran
Melalui proyek ini, peserta didik dapat mempelajari berbagai konsep penting, antara lain:
- Visualisasi data, yaitu memahami proses konversi sinyal analog menjadi tampilan digital.
- Prinsip kerja sensor, termasuk cara memperoleh dan mengolah data hasil pengukuran.
- Komunikasi web real-time, menggunakan teknologi WebSocket antara ESP32 dan browser.
- Pemrograman mikrokontroler, seperti penggunaan callback, pembacaan sensor, dan pengiriman data.
2. Contoh Kegiatan Praktikum
Beberapa aktivitas yang dapat dilakukan di kelas menggunakan Web Analog Gauge antara lain:
- Membandingkan karakteristik berbagai jenis sensor.
- Melakukan kalibrasi sensor untuk meningkatkan akurasi pengukuran.
- Mengintegrasikan beberapa sensor ke dalam satu dashboard monitoring.
- Melatih kemampuan troubleshooting ketika terjadi kesalahan pada sensor maupun komunikasi jaringan.
Dengan berbagai fitur tersebut, DIYables ESP32 Web Analog Gauge menjadi solusi yang praktis untuk membangun dashboard monitoring berbasis web yang responsif, informatif, dan mudah dikembangkan pada berbagai proyek Internet of Things (IoT) menggunakan ESP32.
Baca juga: DIYables ESP32 Web Apps Multiple Web Apps - Membuat Beberapa Antarmuka Web dalam Satu ESP32
Dalam praktik, hasil dan kendala yang ditemui bisa berbeda tergantung perangkat, konfigurasi, versi library, dan sistem yang digunakan.
- Diskusi umum dan tanya jawab praktik: https://t.me/edukasielektronika
- Kendala spesifik dan kasus tertentu: http://bit.ly/Chatarduino
0 Komentar