DIYables ESP32 Web Plotter merupakan salah satu fitur pada library DIYables ESP32 Web Apps yang memungkinkan ESP32 menampilkan data sensor secara real-time melalui browser web dalam bentuk grafik interaktif. Berbeda dengan Serial Plotter pada Arduino IDE yang hanya dapat diakses dari komputer tempat ESP32 terhubung, Web Plotter dapat diakses dari berbagai perangkat yang berada pada jaringan WiFi yang sama, seperti komputer, laptop, tablet, maupun smartphone. Fitur ini sangat bermanfaat dalam berbagai aplikasi Internet of Things (IoT) karena memudahkan proses monitoring, analisis data, pengujian sensor, hingga debugging tanpa harus selalu membuka Arduino IDE. Data yang dikirim oleh ESP32 akan diperbarui secara langsung melalui komunikasi WebSocket, sehingga perubahan nilai sensor dapat diamati dengan latensi yang sangat rendah.
Fitur DIYables ESP32 Web Plotter
DIYables ESP32 Web Plotter menyediakan berbagai fitur yang dirancang untuk mempermudah proses visualisasi data dari ESP32.
1. Visualisasi Data Secara Real-Time
Data sensor yang dikirim oleh ESP32 akan langsung ditampilkan dalam bentuk grafik pada browser tanpa perlu melakukan refresh halaman.
2. Mendukung Hingga 8 Jalur Data
Web Plotter mampu menampilkan hingga 8 kanal data secara bersamaan dalam satu grafik. Fitur ini sangat cocok untuk aplikasi yang menggunakan beberapa sensor sekaligus, misalnya sensor suhu, kelembapan, tekanan udara, cahaya, maupun sensor lainnya.
3. Skala Grafik Otomatis
Sumbu Y (Vertical Axis) akan menyesuaikan secara otomatis berdasarkan rentang nilai yang diterima, sehingga grafik tetap mudah dibaca meskipun nilai sensor berubah secara signifikan.
4. Grafik Interaktif
Pengguna dapat melakukan berbagai interaksi pada grafik, seperti:
- Memperbesar (Zoom In)
- Memperkecil (Zoom Out)
- Menggeser tampilan (Pan)
- Mengamati perubahan data secara lebih detail
5. Komunikasi Berbasis WebSocket
Pengiriman data dilakukan menggunakan protokol WebSocket, sehingga komunikasi antara ESP32 dan browser berlangsung dua arah (bidirectional) dengan latensi yang rendah. Dibandingkan metode HTTP biasa, WebSocket jauh lebih efisien untuk aplikasi monitoring real-time.
6. Dapat Diakses dari Berbagai Perangkat
Antarmuka Web Plotter bersifat responsif sehingga dapat diakses melalui komputer, laptop, tablet maupun smartphone selama perangkat tersebut berada pada jaringan WiFi yang sama dengan ESP32.
7. Konfigurasi Grafik yang Fleksibel
Pengembang dapat menyesuaikan berbagai parameter tampilan, seperti judul grafik, nama masing-masing data, label sumbu, rentang nilai minimum dan maksimum, serta jumlah data yang ditampilkan. Kemampuan ini membuat Web Plotter dapat digunakan pada berbagai jenis aplikasi monitoring.
Baca juga: DIYables ESP32 Web Apps Web Joystick - Membuat Joystick Virtual Berbasis Web untuk ESP32
Perangkat Keras yang Dibutuhkan
- ESP32 Dev Module ESP-WROOM-32 (38 Pin)
- Kabel USB untuk menghubungkan ESP32 ke komputer
Cara Menggunakan DIYables ESP32 Web Plotter
Ikuti langkah-langkah berikut untuk menjalankan contoh program Web Plotter:
1. Hubungkan ESP32 ke Komputer
Sambungkan board ESP32 ke komputer menggunakan kabel USB.
2. Jalankan Arduino IDE
Buka aplikasi Arduino IDE yang telah terinstal pada komputer.
3. Pilih Board dan Port
Pilih jenis board yang digunakan, buka menu Tools → Board → ESP32 Arduino → ESP32 Dev Module. Kemudian pilih Port COM yang sesuai dengan board ESP32 Anda.
4. Instal Library DIYables ESP32 Web Apps
Pada Arduino IDE, buka menu Library Manager atau klik ikon Library di sisi kiri Arduino IDE. Cari library DIYables ESP32 WebApps. Kemudian instal library DIYables ESP32 WebApps by DIYables.
Selama proses instalasi, Arduino IDE akan meminta instalasi beberapa library pendukung. Klik tombol Install All agar seluruh dependensi terinstal secara otomatis.
5. Membuka Contoh Program Web Plotter
Setelah proses instalasi selesai, buka contoh program melalui menu File → Examples → DIYables ESP32 Web Apps → WebPlotter.
Program contoh ini sudah berisi implementasi dasar Web Plotter sehingga dapat langsung digunakan.
6. Konfigurasi Jaringan WiFi
Sebelum program diunggah, ubah informasi jaringan WiFi sesuai dengan jaringan yang digunakan.
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
Ganti nilai YOUR_WIFI_NETWORK dengan nama jaringan WiFi (SSID) dan YOUR_WIFI_PASSWORD dengan password WiFi. Pastikan ESP32 dan perangkat yang digunakan untuk membuka browser berada pada jaringan yang sama.
7. Upload Program ke ESP32
Klik tombol Upload pada Arduino IDE dan tunggu hingga proses kompilasi dan upload selesai.
8. Buka Serial Monitor
Setelah upload berhasil, buka Serial Monitor.
Apabila tidak muncul informasi apa pun, tekan tombol EN (Reset) pada board ESP32 untuk melakukan restart. Pada Serial Monitor akan ditampilkan alamat IP yang diperoleh ESP32 dari jaringan WiFi, misalnya: http://10.195.113.32
Catat alamat IP tersebut karena akan digunakan untuk mengakses Web Plotter.
9. Membuka Halaman Web Plotter
Masukkan alamat IP ESP32 ke browser.
Contoh: http://10.195.113.32
Selanjutnya akan muncul halaman utama Web Apps.
Klik menu Web Plotter untuk membuka halaman grafik. Selain melalui halaman utama, Web Plotter juga dapat langsung diakses menggunakan URL http://10.195.113.32/web-plotter. Setelah halaman terbuka, grafik akan mulai menampilkan data yang dikirim oleh ESP32 secara real-time.
Kustomisasi Web Plotter
DIYables Web Plotter dapat dikembangkan sesuai dengan kebutuhan aplikasi. Berikut beberapa bentuk kustomisasi yang umum digunakan.
1. Mengganti Sumber Data
Secara default, contoh program menggunakan data simulasi. Agar lebih bermanfaat, data tersebut dapat diganti menggunakan pembacaan sensor sebenarnya.
a. Menggunakan Satu Sensor
void sendTemperatureData() {
float temperature = analogRead(A0) * (5.0 / 1023.0) * 100; // LM35 temperature sensor
webPlotterPage.sendPlotData(temperature);
}
b. Menggunakan Beberapa Sensor
void sendMultipleSensors() {
float temperature = readTemperature();
float humidity = readHumidity();
float light = analogRead(A1) / 10.0;
float pressure = readPressure();
webPlotterPage.sendPlotData(temperature, humidity, light, pressure);
}
c. Menggunakan Array Data
void sendSensorArray() {
float sensors[6] = {
analogRead(A0) / 10.0, // Sensor 1
analogRead(A1) / 10.0, // Sensor 2
analogRead(A2) / 10.0, // Sensor 3
digitalRead(2) * 50, // Digital state
millis() / 1000.0, // Time counter
random(0, 100) // Random data
};
webPlotterPage.sendPlotData(sensors, 6);
}
2. Mengubah Tampilan Grafik
DIYables Web Plotter memungkinkan pengembang mengatur berbagai parameter tampilan.
a. Konfigurasi Plot Kustom
void setupCustomPlot() {
webPlotterPage.setPlotTitle("Environmental Monitoring Station");
webPlotterPage.setAxisLabels("Time (minutes)", "Sensor Readings");
webPlotterPage.setYAxisRange(0, 100); // Fixed Y-axis range
webPlotterPage.setMaxSamples(100); // Show more data points
}
b. Konfigurasi Dinamis
void setupDynamicPlot() {
webPlotterPage.setPlotTitle("Smart Garden Monitor");
webPlotterPage.setAxisLabels("Sample #", "Values");
webPlotterPage.enableAutoScale(true); // Auto-adjust Y-axis
// Configure callbacks for interactive features
webPlotterPage.onPlotterDataRequest([]() {
Serial.println("Client connected - sending initial data");
sendInitialDataBurst();
});
}
3. Pemrosesan Data Sebelum Ditampilkan
Data sensor sering kali mengandung noise sehingga perlu diproses terlebih dahulu.
a. Filter Moving Average
Teknik Moving Average digunakan untuk menghaluskan pembacaan sensor sehingga grafik menjadi lebih stabil.
float movingAverage(float newValue) {
static float readings[10];
static int index = 0;
static float total = 0;
total -= readings[index];
readings[index] = newValue;
total += readings[index];
index = (index + 1) % 10;
return total / 10.0;
}
void sendFilteredData() {
float rawValue = analogRead(A0);
float filteredValue = movingAverage(rawValue);
webPlotterPage.sendPlotData(rawValue / 10.0, filteredValue / 10.0);
}
b. Menambahkan Timestamp
Timestamp berguna untuk mengetahui waktu setiap data dikirim sehingga memudahkan proses analisis maupun pencatatan data.
void sendTimestampedData() {
unsigned long currentTime = millis() / 1000;
float sensorValue = analogRead(A0) / 10.0;
// Send time and value as separate data series
webPlotterPage.sendPlotData(currentTime, sensorValue);
// Also log to Serial for debugging
Serial.print("Time: ");
Serial.print(currentTime);
Serial.print("s, Value: ");
Serial.println(sensorValue);
}
4. Contoh Integrasi Web Plotter
DIYables Web Plotter dapat diintegrasikan dengan berbagai proyek ESP32.
a. Monitoring Lingkungan
#include <DHT.h>
#define DHT_PIN 2
#define DHT_TYPE DHT22
DHT dht(DHT_PIN, DHT_TYPE);
void sendEnvironmentalData() {
float temperature = dht.readTemperature();
float humidity = dht.readHumidity();
float lightLevel = analogRead(A0) / 10.0;
if (!isnan(temperature) && !isnan(humidity)) {
webPlotterPage.sendPlotData(temperature, humidity, lightLevel);
Serial.print("T: ");
Serial.print(temperature);
Serial.print("°C, H: ");
Serial.print(humidity);
Serial.print("%, Light: ");
Serial.println(lightLevel);
}
}
b. Monitoring Motor dan Sistem Kendali
void sendMotorData() {
int motorSpeed = analogRead(A0); // Speed potentiometer
int currentDraw = analogRead(A1); // Current sensor
int motorPosition = digitalRead(2); // Position sensor
float speedPercent = (motorSpeed / 1023.0) * 100;
float currentAmps = (currentDraw / 1023.0) * 5.0;
float positionDegrees = motorPosition * 90;
webPlotterPage.sendPlotData(speedPercent, currentAmps, positionDegrees);
}
c. Visualisasi Pengontrol PID
float setpoint = 50.0;
float kp = 1.0, ki = 0.1, kd = 0.01;
float integral = 0, previousError = 0;
void sendPIDData() {
float input = analogRead(A0) / 10.0;
float error = setpoint - input;
integral += error;
float derivative = error - previousError;
float output = (kp * error) + (ki * integral) + (kd * derivative);
previousError = error;
// Plot setpoint, input, error, and output
webPlotterPage.sendPlotData(setpoint, input, error, output);
}
5. Optimasi Performa
Untuk aplikasi dengan kecepatan pembacaan sensor yang tinggi, optimasi sangat diperlukan agar tampilan tetap responsif.
a. Transmisi Data yang Efisien
unsigned long lastPlotUpdate = 0;
const unsigned long PLOT_INTERVAL = 100; // Update every 100ms
void efficientDataSending() {
if (millis() - lastPlotUpdate >= PLOT_INTERVAL) {
lastPlotUpdate = millis();
// Only send data at defined intervals
float value1 = analogRead(A0) / 10.0;
float value2 = analogRead(A1) / 10.0;
webPlotterPage.sendPlotData(value1, value2);
}
}
b. Pengiriman Data Bersyarat
float lastSentValue = 0;
const float CHANGE_THRESHOLD = 5.0;
void sendOnChange() {
float currentValue = analogRead(A0) / 10.0;
// Only send if value changed significantly
if (abs(currentValue - lastSentValue) > CHANGE_THRESHOLD) {
webPlotterPage.sendPlotData(currentValue);
lastSentValue = currentValue;
}
}
Ide Proyek Menggunakan DIYables ESP32 Web Plotter
1. Penelitian dan Eksperimen
- Monitoring suhu, kelembapan, dan tekanan udara secara real-time.
- Analisis data akselerometer untuk pengujian mesin atau struktur.
- Monitoring kualitas air menggunakan sensor pH, suhu, dan kekeruhan.
- Monitoring performa panel surya berdasarkan intensitas cahaya, tegangan, dan arus.
2. Pembelajaran dan Praktikum
- Praktikum fisika untuk mengamati perubahan hasil pengukuran.
- Praktikum kimia dengan visualisasi perubahan suhu selama reaksi.
- Penelitian biologi untuk memonitor kondisi lingkungan pertumbuhan tanaman.
- Visualisasi fungsi matematika maupun algoritma secara interaktif.
3. Smart Home dan IoT
- Monitoring konsumsi daya listrik.
- Sistem penyiraman tanaman otomatis.
- Monitoring suhu dan kelembapan ruangan.
- Dashboard sistem keamanan berbasis sensor gerak dan sensor pintu.
4. Robotika dan Sistem Kendali
- Monitoring posisi dan kecepatan robot.
- Analisis performa motor DC maupun motor servo.
- Visualisasi data dari beberapa sensor secara bersamaan.
- Monitoring algoritma navigasi robot secara real-time.
Penyelesaian Masalah (Troubleshooting)
1. Grafik Tidak Menampilkan Data
Beberapa penyebab yang perlu diperiksa antara lain:
- Pastikan ESP32 berhasil terhubung ke jaringan WiFi.
- Periksa apakah koneksi WebSocket berhasil dibuat.
- Pastikan fungsi sendPlotData() dipanggil secara berkala.
- Buka Serial Monitor dan periksa apakah terdapat pesan kesalahan.
2. Grafik Bergerak Tidak Stabil
Apabila grafik terlihat berfluktuasi secara berlebihan:
- Terapkan filter Moving Average.
- Kurangi frekuensi pengiriman data.
- Pastikan sensor bekerja dengan baik.
- Gunakan catu daya yang stabil.
3. Tampilan Web Terasa Lambat
Jika antarmuka menjadi lambat ketika digunakan:
- Kurangi jumlah sampel menggunakan fungsi setMaxSamples().
- Perbesar interval pengiriman data.
- Gunakan browser versi terbaru.
- Aktifkan Hardware Acceleration apabila tersedia.
4. Koneksi WebSocket Sering Terputus
Apabila komunikasi sering terputus:
- Pastikan sinyal WiFi cukup kuat.
- Periksa konfigurasi router.
- Tambahkan mekanisme Auto Reconnect.
- Pantau penggunaan memori ESP32 agar tidak mengalami kekurangan memori (Out of Memory).
Tips Debugging
1. Mengaktifkan Log yang Lebih Detail
void debugPlotterData() {
Serial.println("=== Plotter Debug Info ===");
Serial.print("Free RAM: ");
Serial.println(freeMemory());
Serial.print("Connected clients: ");
Serial.println(server.getConnectedClients());
Serial.print("Data rate: ");
Serial.println("Every " + String(DATA_INTERVAL) + "ms");
Serial.println("========================");
}
2. Membuat Data Uji
void generateTestPattern() {
static float phase = 0;
float sine = sin(phase) * 50 + 50;
float cosine = cos(phase) * 30 + 70;
float triangle = (phase / PI) * 25 + 25;
webPlotterPage.sendPlotData(sine, cosine, triangle);
phase += 0.1;
if (phase > 2 * PI) phase = 0;
}
Fitur Lanjutan
DIYables Web Plotter juga menyediakan berbagai fitur tambahan yang dapat digunakan untuk mengembangkan aplikasi monitoring yang lebih kompleks.
1. Pemformatan Data Kustom
void sendFormattedData() {
float temp = 25.5;
float humidity = 60.3;
// Create custom formatted data string
String dataLine = String(temp, 1) + "\t" + String(humidity, 1);
webPlotterPage.sendPlotData(dataLine);
}
2. Integrasi dengan Web Apps Lain
void setupMultipleApps() {
// Add multiple web applications
server.addApp(new DIYablesHomePage());
server.addApp(new DIYablesWebDigitalPinsPage());
server.addApp(new DIYablesWebSliderPage());
server.addApp(&webPlotterPage);
server.addApp(new DIYablesNotFoundPage());
// Configure interactions between apps
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Use slider values to control what gets plotted
float scaleFactor = slider1 / 255.0;
// ... plotting logic
});
}
3. Kontrol Real-Time Menggunakan Web Plotter
void controlAndPlot() {
// Read control inputs
int targetSpeed = analogRead(A0);
// Control hardware
analogWrite(9, targetSpeed / 4); // PWM output
// Read feedback
int actualSpeed = analogRead(A1);
int motorCurrent = analogRead(A2);
// Plot target vs actual
webPlotterPage.sendPlotData(
targetSpeed / 4.0, // Target speed
actualSpeed / 4.0, // Actual speed
motorCurrent / 10.0 // Current draw
);
}
Contoh Implementasi DIYables ESP32 Web Plotter dengan Sensor DHT11
Sebagai contoh penerapan, Web Plotter dapat digunakan untuk menampilkan data suhu dan kelembapan dari sensor DHT11 secara real-time. Nilai yang dibaca sensor akan dikirim oleh ESP32 melalui WebSocket, kemudian divisualisasikan dalam bentuk grafik pada browser. Dengan implementasi ini, perubahan suhu maupun kelembapan dapat dipantau secara langsung tanpa perlu membuka Serial Monitor, sehingga proses pengujian menjadi lebih mudah dan efisien.
Di bawah ini merupakan kode program lengkap untuk mengintegrasikan DIYables ESP32 Web Plotter dengan sensor DHT11.
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
#include <DHT.h>
#define DHT_PIN 21
#define DHT_TYPE DHT11
DHT dht(DHT_PIN, DHT_TYPE);
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebPlotterPage webPlotterPage;
// Simulation variables
unsigned long lastDataTime = 0;
const unsigned long DATA_INTERVAL = 1000; // Send data every 1000ms
float timeCounter = 0;
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins and sensors here
dht.begin();
Serial.println("DIYables ESP32 WebApp - Web Plotter Example");
// Add home and web plotter pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webPlotterPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Configure the plotter
webPlotterPage.setPlotTitle("Real-time Data Plotter");
webPlotterPage.setAxisLabels("Time (s)", "Values");
webPlotterPage.enableAutoScale(true);
webPlotterPage.setMaxSamples(50);
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Set up callbacks
webPlotterPage.onPlotterDataRequest([]() {
Serial.println("Web client requested data");
sendSensorData();
});
Serial.println("\nWebPlotter is ready!");
Serial.println("Usage Instructions:");
Serial.println("1. Connect to the WiFi network");
Serial.println("2. Open your web browser");
Serial.println("3. Navigate to the Arduino's IP address");
Serial.println("4. Click on 'Web Plotter' to view real-time data");
Serial.println("\nGenerating simulated sensor data...");
}
void loop() {
// Handle web server and WebSocket connections
webAppsServer.loop();
// Send sensor data at regular intervals
if (millis() - lastDataTime >= DATA_INTERVAL) {
lastDataTime = millis();
sendSensorData();
timeCounter += DATA_INTERVAL / 1000.0; // Convert to seconds
}
delay(10000);
}
void sendSensorData() {
// Generate simulated sensor data
// In a real application, replace these with actual sensor readings
// Simulated temperature sensor (sine wave with noise)
float temperature = 25.0 + 5.0 * sin(timeCounter * 0.5) + random(-100, 100) / 100.0;
// Simulated humidity sensor (cosine wave)
float humidity = 50.0 + 20.0 * cos(timeCounter * 0.3);
// Simulated light sensor (triangle wave)
float light = 512.0 + 300.0 * (2.0 * abs(fmod(timeCounter * 0.2, 2.0) - 1.0) - 1.0);
// Simulated analog pin reading
float analogValue = analogRead(A0);
// Send data using different methods:
// Method 1: Send individual values (uncomment to use)
// webPlotterPage.sendPlotData(temperature);
// Method 2: Send multiple values at once
webPlotterPage.sendPlotData(temperature, humidity, light / 10.0, analogValue / 100.0);
// Method 3: Send array of values (alternative approach)
// float values[] = {temperature, humidity, light / 10.0, analogValue / 100.0};
// webPlotterPage.sendPlotData(values, 4);
// Method 4: Send raw data string (for custom formatting)
// String dataLine = String(temperature, 2) + " " + String(humidity, 1) + " " + String(light / 10.0, 1);
// webPlotterPage.sendPlotData(dataLine);
// Print to Serial Monitor in Serial Plotter compatible format
// Format: Temperature Humidity Light Analog (tab-separated for Serial Plotter)
Serial.print(temperature, 1);
Serial.print("\t");
Serial.print(humidity, 1);
Serial.print("\t");
Serial.print(light / 10.0, 1);
Serial.print("\t");
Serial.println(analogValue / 100.0, 2);
}
void sendEnvironmentalData() {
float temperature = dht.readTemperature();
float humidity = dht.readHumidity();
if (!isnan(temperature) && !isnan(humidity)) {
webPlotterPage.sendPlotData(temperature, humidity);
Serial.print("T: ");
Serial.print(temperature);
Serial.print("°C, H: ");
Serial.println(humidity);
}
}
Baca juga: DIYables ESP32 Web Apps Web Monitor - Cara Membuat Serial Monitor Berbasis Web pada 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