DIYables ESP32 Web Apps Web Joystick merupakan salah satu contoh aplikasi web dari library DIYables ESP32 Web Apps yang memungkinkan ESP32 memiliki joystick virtual berbasis browser. Dengan antarmuka ini, pengguna dapat mengendalikan robot, mobil robot, atau perangkat lain yang membutuhkan input dua dimensi (2D) tanpa harus menggunakan aplikasi tambahan. Joystick virtual dapat diakses melalui browser di komputer, laptop, tablet, maupun smartphone selama perangkat tersebut berada pada jaringan WiFi yang sama dengan ESP32. Seluruh komunikasi dilakukan menggunakan WebSocket, sehingga perpindahan posisi joystick dapat dikirim secara real-time dengan latensi yang sangat rendah. Contoh ini sangat cocok digunakan sebagai dasar pembuatan berbagai proyek robotika, seperti robot beroda, robot lengan (robotic arm), kendali kamera, maupun sistem navigasi lainnya yang memerlukan kontrol arah secara presisi.
Fitur DIYables ESP32 Web Joystick
DIYables Web Joystick menyediakan berbagai fitur yang memudahkan proses pengembangan sistem kendali berbasis web, di antaranya sebagai berikut:
1. Joystick Virtual Interaktif
Joystick ditampilkan langsung pada halaman web sehingga pengguna dapat menggerakkannya menggunakan mouse maupun layar sentuh tanpa memerlukan perangkat joystick fisik.
2. Koordinat X dan Y Secara Real-Time
Setiap perubahan posisi joystick akan menghasilkan nilai koordinat X dan Y dengan rentang -100 hingga +100. Nilai ini dapat langsung digunakan sebagai input pengendalian motor, servo, maupun aktuator lainnya.
3. Kompatibel dengan Berbagai Perangkat
Antarmuka web dapat diakses menggunakan berbagai browser modern pada komputer, laptop, smartphone android, iPhone, maupun tablet.
4. Fitur Auto Return
Joystick dapat dikonfigurasi agar kembali secara otomatis ke posisi tengah setelah dilepaskan. Fitur ini sangat berguna untuk aplikasi pengendalian kendaraan atau robot agar berhenti ketika pengguna tidak lagi memberikan perintah.
6. Sensitivitas yang Dapat Diatur
Library memungkinkan pengembang menentukan tingkat sensitivitas joystick sehingga hanya perubahan posisi tertentu saja yang dikirim ke ESP32. Hal ini membantu mengurangi lalu lintas data dan membuat sistem lebih stabil.
7. Umpan Balik Secara Langsung
Perubahan posisi joystick langsung diperbarui pada halaman web sehingga pengguna dapat mengetahui posisi joystick secara visual sekaligus melihat nilai koordinatnya.
8. Komunikasi Menggunakan WebSocket
DIYables Web Joystick menggunakan protokol WebSocket sehingga komunikasi berlangsung dua arah (bidirectional) tanpa perlu melakukan refresh halaman web. Teknologi ini memberikan respons yang jauh lebih cepat dibandingkan komunikasi HTTP biasa.
9. Indikator Posisi Netral
Antarmuka juga menyediakan indikator posisi tengah (center point) sebagai referensi ketika joystick berada pada kondisi netral.
Baca juga: DIYables ESP32 Web Apps Multiple Web Apps - Membuat Beberapa Antarmuka Web dalam Satu ESP32
Perangkat Keras yang Dibutuhkan
Sebelum memulai, siapkan beberapa perangkat berikut:
- ESP32 Dev Module ESP-WROOM-32 (38 Pin)
- Kabel USB untuk pemrograman dan catu daya
Cara Menjalankan Contoh Web Joystick pada ESP32
Ikuti langkah-langkah berikut untuk menjalankan contoh WebJoystick dari library DIYables ESP32 Web Apps:
1. Hubungkan ESP32 ke Komputer
Hubungkan board ESP32 ke komputer menggunakan kabel USB. Selanjutnya buka Arduino IDE, kemudian pilih:
- Board ESP32 yang sesuai, misalnya ESP32 Dev Module
- Port COM yang digunakan oleh board
2. Install Library DIYables ESP32 Web Apps
Buka Library Manager pada Arduino IDE. Pilih menu Sketch → Include Library → Manage Libraries atau klik ikon Library pada panel sebelah kiri.Cari library DIYables ESP32 WebApps. Kemudian install library yang dibuat oleh DIYables.
3. Install Seluruh Library Dependensi
Selama proses instalasi, Arduino IDE akan meminta pemasangan beberapa library tambahan yang menjadi dependensi. Klik tombol Install All agar seluruh library pendukung terpasang secara otomatis.
4. Buka Contoh Program WebJoystick
Setelah library berhasil diinstal, buka contoh program melalui menu:
File → Examples → DIYables ESP32 WebApps → WebJoystick
Arduino IDE akan membuka sketch contoh yang sudah siap digunakan.
5. Konfigurasi Jaringan WiFi
Sebelum mengunggah program, ubah terlebih dahulu nama jaringan WiFi dan password sesuai jaringan yang digunakan.
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
Ganti:
- YOUR_WIFI_NETWORK dengan nama jaringan WiFi.
- YOUR_WIFI_PASSWORD dengan password WiFi.
Pastikan ESP32 dan perangkat yang nantinya digunakan untuk mengakses halaman web berada pada jaringan WiFi yang sama.
6. Upload Program ke ESP32
Klik tombol Upload pada Arduino IDE, kemudian tunggu hingga proses kompilasi dan upload selesai. Setelah upload berhasil, buka Serial Monitor. Pada Serial Monitor akan muncul informasi seperti berikut.
Apabila tidak muncul informasi apa pun, tekan tombol RESET pada board ESP32, kemudian tunggu beberapa detik hingga proses koneksi WiFi selesai.
7. Buka Halaman Web Joystick
Setelah ESP32 berhasil terhubung ke jaringan WiFi, Serial Monitor akan menampilkan alamat IP, misalnya: http://10.195.113.32. Masukkan alamat tersebut ke browser pada komputer atau smartphone.
8. Membuka Halaman Web Joystick
Pada halaman utama, klik menu Web Joystick. Selanjutnya akan muncul antarmuka joystick virtual seperti berikut:
Selain melalui halaman utama, Anda juga dapat membuka halaman joystick secara langsung menggunakan URL berikut: http://10.195.113.32/web-joystick.
9. Menguji Joystick Virtual
Cobalah menggerakkan joystick menggunakan mouse atau layar sentuh. Setiap perubahan posisi akan langsung dikirim ke ESP32, kemudian nilai koordinat X dan Y akan ditampilkan pada Serial Monitor dengan rentang nilai:
- X : -100 hingga +100
- Y : -100 hingga +100
Data inilah yang nantinya dapat digunakan sebagai input untuk mengendalikan motor DC, servo, robot, maupun perangkat lainnya.
Mengatur Konfigurasi Web Joystick
Library DIYables memungkinkan pengembang melakukan konfigurasi perilaku joystick sesuai kebutuhan aplikasi.
1. Konfigurasi Default
Secara bawaan, joystick dibuat dengan pengaturan:
- Auto Return = aktif
- Sensitivity = 1
DIYablesWebJoystickPage webJoystickPage;
Dengan konfigurasi ini, joystick akan selalu kembali ke posisi tengah ketika dilepaskan.
2. Konfigurasi Kustom
Pengembang juga dapat menentukan sendiri perilaku joystick melalui konstruktor berikut:
DIYablesWebJoystickPage webJoystickPage(false, 5);
Parameter yang digunakan yaitu:
3. Auto Return
false
Joystick akan tetap berada pada posisi terakhir setelah pengguna melepaskan mouse atau jari. Apabila menggunakan:
true
Joystick akan kembali secara otomatis ke posisi tengah.
4. Sensitivity
5
Artinya data baru hanya dikirim apabila perubahan posisi joystick lebih dari 5%. Semakin besar nilai sensitivitas, semakin sedikit data yang dikirim melalui WebSocket sehingga beban komunikasi jaringan menjadi lebih ringan. Sebaliknya, nilai sensitivitas yang kecil akan menghasilkan respons yang lebih halus karena perubahan posisi kecil pun tetap dikirim ke ESP32.
Cara Menggunakan Web Joystick
Antarmuka Web Joystick dirancang agar mudah digunakan baik pada komputer maupun perangkat bergerak.
1. Komponen pada Antarmuka Web
Beberapa komponen utama yang tersedia antara lain:
- Area Joystick, yaitu area tempat pengguna menggerakkan joystick.
- Indikator Posisi, yang menunjukkan posisi joystick secara real-time.
- Koordinat X dan Y, untuk menampilkan nilai koordinat saat joystick digerakkan.
- Titik Netral (Center Point), sebagai acuan posisi tengah joystick.
2. Menggunakan Joystick pada Komputer
Jika menggunakan komputer atau laptop, langkah pengoperasiannya adalah sebagai berikut:
- Klik dan tahan tombol kiri mouse pada joystick.
- Geser mouse ke arah yang diinginkan.
- Lepaskan tombol mouse untuk mengembalikan joystick ke posisi tengah apabila Auto Return diaktifkan.
- Jika Auto Return dinonaktifkan, joystick akan tetap berada pada posisi terakhir hingga dipindahkan kembali.
3. Menggunakan Joystick pada Smartphone atau Tablet
Pada perangkat layar sentuh, joystick dapat digunakan dengan langkah berikut:
- Sentuh area joystick menggunakan satu jari.
- Geser jari sesuai arah yang diinginkan.
- Lepaskan sentuhan untuk mengembalikan joystick ke posisi netral apabila fitur Auto Return aktif.
- Disarankan menggunakan satu jari agar pergerakan joystick lebih stabil dan presisi.
Memahami Sistem Koordinat pada Web Joystick
Joystick menggunakan sistem koordinat dua dimensi yang terdiri dari sumbu X dan Y. Rentang nilai koordinat adalah sebagai berikut:
- X = -100 menunjukkan joystick berada pada posisi paling kiri.
- X = +100 menunjukkan joystick berada pada posisi paling kanan.
- Y = -100 menunjukkan joystick berada pada posisi paling bawah.
- Y = +100 menunjukkan joystick berada pada posisi paling atas.
- (0, 0) menunjukkan joystick berada tepat di posisi tengah atau posisi netral.
Apabila joystick digerakkan secara diagonal, maka nilai X dan Y akan berubah secara bersamaan. Sebagai contoh, posisi kanan atas dapat menghasilkan nilai mendekati (100, 100), sedangkan posisi kiri bawah menghasilkan nilai mendekati (-100, -100). Sistem koordinat ini memudahkan pengembang dalam mengubah posisi joystick menjadi berbagai jenis perintah, misalnya mengatur kecepatan motor kiri dan kanan pada robot differential drive, mengendalikan arah servo pan-tilt, atau mengontrol gerakan aktuator lainnya secara proporsional.
Contoh Implementasi Pemrograman Web Joystick pada ESP32
Setelah memahami cara kerja Web Joystick, langkah berikutnya adalah menghubungkan data koordinat joystick dengan berbagai perangkat keras. Nilai koordinat X dan Y yang diterima dari browser dapat digunakan untuk mengendalikan motor DC, servo, LED, maupun perangkat elektronik lainnya. Berikut beberapa contoh implementasi yang umum digunakan:
1. Membaca Nilai Koordinat Joystick (Basic Joystick Handler)
Contoh pertama menunjukkan cara menerima data koordinat X dan Y dari Web Joystick menggunakan callback onJoystickValueFromWeb().
void setup() {
// Set up joystick callback for position changes
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Store the received values
currentJoystickX = x;
currentJoystickY = y;
// Print joystick position values
Serial.println("Joystick - X: " + String(x) + ", Y: " + String(y));
// Add your control logic here
});
}
Penjelasan Program
Fungsi webJoystickPage.onJoystickValueFromWeb() merupakan callback function yang akan dipanggil secara otomatis setiap kali posisi joystick berubah pada halaman web. Library akan mengirimkan dua parameter:
- x → posisi horizontal joystick.
- y → posisi vertikal joystick.
Nilai kedua parameter tersebut berada pada rentang:
- -100 hingga +100 untuk sumbu X.
- -100 hingga +100 untuk sumbu Y.
Pada contoh di atas, nilai koordinat disimpan ke dalam variabel:
currentJoystickX
currentJoystickY
Selanjutnya nilai tersebut ditampilkan pada Serial Monitor menggunakan Serial.println(). Pada bagian inilah Anda dapat menambahkan logika program sesuai kebutuhan, misalnya mengendalikan motor, servo, relay, maupun aktuator lainnya berdasarkan posisi joystick.
2. Mengendalikan Motor DC Menggunakan Web Joystick
Salah satu aplikasi Web Joystick yang paling sering digunakan adalah sebagai pengendali robot beroda (Differential Drive Robot).
Pada contoh berikut, koordinat joystick dikonversi menjadi kecepatan motor kiri dan motor kanan.
// Pin definitions for motor driver
const int MOTOR_LEFT_PIN1 = 2;
const int MOTOR_LEFT_PIN2 = 3;
const int MOTOR_RIGHT_PIN1 = 4;
const int MOTOR_RIGHT_PIN2 = 5;
const int MOTOR_LEFT_PWM = 9;
const int MOTOR_RIGHT_PWM = 10;
void setup() {
// Configure motor pins
pinMode(MOTOR_LEFT_PIN1, OUTPUT);
pinMode(MOTOR_LEFT_PIN2, OUTPUT);
pinMode(MOTOR_RIGHT_PIN1, OUTPUT);
pinMode(MOTOR_RIGHT_PIN2, OUTPUT);
pinMode(MOTOR_LEFT_PWM, OUTPUT);
pinMode(MOTOR_RIGHT_PWM, OUTPUT);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
controlRobot(x, y);
});
}
void controlRobot(int x, int y) {
// Convert joystick coordinates to motor speeds
int leftSpeed = y + x; // Forward/backward + turn left/right
int rightSpeed = y - x; // Forward/backward - turn left/right
// Constrain speeds to valid range
leftSpeed = constrain(leftSpeed, -100, 100);
rightSpeed = constrain(rightSpeed, -100, 100);
// Control left motor
if (leftSpeed > 0) {
digitalWrite(MOTOR_LEFT_PIN1, HIGH);
digitalWrite(MOTOR_LEFT_PIN2, LOW);
analogWrite(MOTOR_LEFT_PWM, map(leftSpeed, 0, 100, 0, 255));
} else if (leftSpeed < 0) {
digitalWrite(MOTOR_LEFT_PIN1, LOW);
digitalWrite(MOTOR_LEFT_PIN2, HIGH);
analogWrite(MOTOR_LEFT_PWM, map(-leftSpeed, 0, 100, 0, 255));
} else {
digitalWrite(MOTOR_LEFT_PIN1, LOW);
digitalWrite(MOTOR_LEFT_PIN2, LOW);
analogWrite(MOTOR_LEFT_PWM, 0);
}
// Control right motor
if (rightSpeed > 0) {
digitalWrite(MOTOR_RIGHT_PIN1, HIGH);
digitalWrite(MOTOR_RIGHT_PIN2, LOW);
analogWrite(MOTOR_RIGHT_PWM, map(rightSpeed, 0, 100, 0, 255));
} else if (rightSpeed < 0) {
digitalWrite(MOTOR_RIGHT_PIN1, LOW);
digitalWrite(MOTOR_RIGHT_PIN2, HIGH);
analogWrite(MOTOR_RIGHT_PWM, map(-rightSpeed, 0, 100, 0, 255));
} else {
digitalWrite(MOTOR_RIGHT_PIN1, LOW);
digitalWrite(MOTOR_RIGHT_PIN2, LOW);
analogWrite(MOTOR_RIGHT_PWM, 0);
}
}
Penjelasan Program
Program ini menggunakan dua motor DC yang dikendalikan melalui motor driver. Pertama, callback menerima koordinat joystick webJoystickPage.onJoystickValueFromWeb(). Kemudian data dikirim ke fungsi controlRobot(x, y). Di dalam fungsi tersebut, koordinat joystick diubah menjadi kecepatan masing-masing motor.
leftSpeed = y + x;
rightSpeed = y - x;
Perhitungan tersebut memungkinkan robot melakukan beberapa gerakan sekaligus, seperti maju, muncdur, belok kiri, belok kanan, dan berputar di tempat (spin). Fungsi constrain() digunakan agar nilai kecepatan tidak melebihi batas -100 hingga +100. Selanjutnya fungsi map() mengubah rentang nilai joystick menjadi nilai PWM 0 hingga 255, sehingga kecepatan motor dapat diatur secara proporsional. Apabila nilai kecepatan bernilai positif, motor berputar maju. Sebaliknya, jika bernilai negatif, arah putaran motor dibalik. Jika nilainya nol, motor akan berhenti. Teknik seperti ini banyak digunakan pada robot beroda dua maupun kendaraan robot berbasis ESP32.
3. Mengendalikan Servo Menggunakan Web Joystick
Selain motor DC, Web Joystick juga dapat digunakan untuk mengendalikan motor servo, misalnya pada sistem pan-tilt camera, robot lengan, maupun mekanisme pengarah sensor.
#include <Servo.h>
Servo panServo; // X-axis control (left/right)
Servo tiltServo; // Y-axis control (up/down)
void setup() {
// Attach servos to pins
panServo.attach(9);
tiltServo.attach(10);
// Center servos initially
panServo.write(90);
tiltServo.write(90);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
controlServos(x, y);
});
}
void controlServos(int x, int y) {
// Map joystick coordinates to servo angles
int panAngle = map(x, -100, 100, 0, 180); // X controls pan (0-180°)
int tiltAngle = map(y, -100, 100, 180, 0); // Y controls tilt (inverted)
// Move servos to calculated positions
panServo.write(panAngle);
tiltServo.write(tiltAngle);
Serial.println("Pan: " + String(panAngle) + "°, Tilt: " + String(tiltAngle) + "°");
}
Penjelasan Program
Program diawali dengan mengimpor library Servo.h yang digunakan untuk mengendalikan motor servo. Selanjutnya dibuat dua buah objek servo, yaitu panServo untuk mengatur pergerakan horizontal (pan) dan tiltServo untuk mengatur pergerakan vertikal (tilt). Pada saat program dijalankan, kedua servo akan diposisikan pada sudut 90° sebagai posisi awal. Ketika joystick digerakkan, nilai koordinat sumbu X dan Y akan dikonversi menjadi sudut servo menggunakan fungsi map(). Nilai pada sumbu X digunakan untuk mengendalikan servo Pan, sedangkan nilai pada sumbu Y digunakan untuk mengendalikan servo Tilt. Sudut hasil konversi tersebut kemudian dikirim ke masing-masing servo menggunakan fungsi servo.write(), sehingga servo bergerak mengikuti arah joystick. Selain itu, setiap perubahan sudut juga ditampilkan pada Serial Monitor untuk memudahkan proses pemantauan dan debugging selama pengujian program.
4. Membuat Indikator Arah Menggunakan LED
Web Joystick juga dapat digunakan sebagai indikator arah sederhana menggunakan beberapa LED. Contoh berikut menyalakan LED sesuai arah pergerakan joystick.
// LED pins for position indication
const int LED_UP = 2;
const int LED_DOWN = 3;
const int LED_LEFT = 4;
const int LED_RIGHT = 5;
const int LED_CENTER = 13;
void setup() {
// Configure LED pins
pinMode(LED_UP, OUTPUT);
pinMode(LED_DOWN, OUTPUT);
pinMode(LED_LEFT, OUTPUT);
pinMode(LED_RIGHT, OUTPUT);
pinMode(LED_CENTER, OUTPUT);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
updateLEDIndicators(x, y);
});
}
void updateLEDIndicators(int x, int y) {
// Turn off all LEDs first
digitalWrite(LED_UP, LOW);
digitalWrite(LED_DOWN, LOW);
digitalWrite(LED_LEFT, LOW);
digitalWrite(LED_RIGHT, LOW);
digitalWrite(LED_CENTER, LOW);
// Check if joystick is near center
if (abs(x) < 10 && abs(y) < 10) {
digitalWrite(LED_CENTER, HIGH);
return;
}
// Activate LEDs based on direction
if (y > 20) digitalWrite(LED_UP, HIGH);
if (y < -20) digitalWrite(LED_DOWN, HIGH);
if (x > 20) digitalWrite(LED_RIGHT, HIGH);
if (x < -20) digitalWrite(LED_LEFT, HIGH);
}
Penjelasan Program
Pada contoh ini digunakan lima buah LED yang masing-masing mewakili arah joystick, yaitu:
- LED_UP untuk arah atas.
- LED_DOWN untuk arah bawah.
- LED_LEFT untuk arah kiri.
- LED_RIGHT untuk arah kanan.
- LED_CENTER untuk menunjukkan posisi netral.
Sebelum menentukan arah baru, seluruh LED dimatikan terlebih dahulu agar tidak terjadi tampilan yang saling bertumpuk. Program kemudian memeriksa apakah joystick berada di sekitar titik tengah menggunakan fungsi abs(). Jika nilai X dan Y masih berada dalam rentang -10 hingga +10, maka joystick dianggap berada pada posisi netral sehingga LED_CENTER akan menyala. Sebaliknya, apabila joystick bergerak melewati ambang batas tertentu, LED yang sesuai dengan arah pergerakan akan dinyalakan. Sebagai contoh:
- Y > 20 → LED atas menyala.
- Y < -20 → LED bawah menyala.
- X > 20 → LED kanan menyala.
- X < -20 → LED kiri menyala.
Contoh ini sangat berguna untuk memahami cara membaca koordinat joystick sebelum diterapkan pada sistem kendali yang lebih kompleks, seperti robot bergerak, kendaraan otomatis, atau sistem navigasi berbasis ESP32.
Konfigurasi Lanjutan Web Joystick pada ESP32
Selain konfigurasi dasar, DIYables Web Joystick juga menyediakan berbagai pengaturan lanjutan yang memungkinkan pengembang membuat sistem kendali yang lebih fleksibel dan responsif. Beberapa teknik berikut sering diterapkan pada proyek robotika, kendaraan otomatis, hingga sistem kendali industri agar pergerakan perangkat menjadi lebih stabil dan nyaman digunakan.
1. Mengubah Konfigurasi Joystick Saat Program Berjalan (Runtime Configuration Changes)
Secara umum, pengaturan seperti Auto Return maupun Sensitivity ditentukan saat objek joystick dibuat. Namun, library DIYables memungkinkan kedua parameter tersebut diubah kapan saja selama program berjalan. Hal ini berguna apabila proyek memiliki beberapa mode operasi, misalnya Mode Normal dan Mode Presisi, tanpa perlu me-restart ESP32.
void setup() {
// Initial setup with default values
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
handleJoystickInput(x, y);
});
// Change settings at runtime
webJoystickPage.setAutoReturn(false); // Disable auto-return
webJoystickPage.setSensitivity(10.0); // Reduce sensitivity
}
void handleJoystickInput(int x, int y) {
// Handle different modes based on current settings
static bool precisionMode = false;
// Toggle precision mode with extreme positions
if (abs(x) > 95 && abs(y) > 95) {
precisionMode = !precisionMode;
if (precisionMode) {
webJoystickPage.setSensitivity(1.0); // High sensitivity
Serial.println("Precision mode ON");
} else {
webJoystickPage.setSensitivity(10.0); // Low sensitivity
Serial.println("Precision mode OFF");
}
}
}
Penjelasan Program
Program diawali dengan mendaftarkan fungsi callback menggunakan webJoystickPage.onJoystickValueFromWeb() untuk menerima data pergerakan joystick dari halaman web. Selanjutnya dilakukan konfigurasi joystick melalui fungsi webJoystickPage.setAutoReturn(false), yang berfungsi menonaktifkan fitur Auto Return sehingga joystick akan tetap berada pada posisi terakhir meskipun sudah dilepaskan. Setelah itu, fungsi webJoystickPage.setSensitivity(10.0) digunakan untuk mengatur sensitivitas joystick menjadi 10%. Pengaturan ini membuat perubahan kecil pada joystick tidak langsung dikirim ke ESP32, sehingga jumlah data yang dikirim melalui koneksi WebSocket dapat dikurangi.
Pada fungsi handleJoystickInput(), program memeriksa apakah joystick digerakkan hingga mendekati batas maksimum pada kedua sumbu menggunakan kondisi if (abs(x) > 95 && abs(y) > 95). Jika kondisi tersebut terpenuhi, status variabel precisionMode akan berubah. Saat Precision Mode aktif, nilai sensitivitas diubah menjadi 1.0 sehingga joystick menjadi lebih responsif terhadap setiap perubahan posisi. Sebaliknya, ketika mode tersebut dinonaktifkan, sensitivitas akan dikembalikan ke nilai 10.0 agar pergerakan joystick menjadi lebih halus dan stabil. Teknik pergantian sensitivitas seperti ini umum diterapkan pada sistem robotika yang memiliki lebih dari satu mode pengoperasian, misalnya mode navigasi cepat untuk bergerak dengan kecepatan tinggi dan mode presisi untuk melakukan gerakan yang lebih akurat.
2. Menerapkan Dead Zone pada Joystick (Dead Zone Implementation)
Pada beberapa aplikasi, perubahan posisi joystick yang sangat kecil sering kali tidak diinginkan karena dapat menyebabkan motor atau servo bergerak meskipun joystick sebenarnya masih berada di sekitar posisi tengah. Untuk mengatasi hal tersebut, biasanya diterapkan Dead Zone, yaitu area di sekitar titik netral yang dianggap memiliki nilai nol.
void processJoystickWithDeadZone(int x, int y) {
const int DEAD_ZONE = 15; // 15% dead zone around center
// Apply dead zone filtering
int filteredX = (abs(x) < DEAD_ZONE) ? 0 : x;
int filteredY = (abs(y) < DEAD_ZONE) ? 0 : y;
// Scale values outside dead zone
if (filteredX != 0) {
filteredX = map(abs(filteredX), DEAD_ZONE, 100, 0, 100);
filteredX = (x < 0) ? -filteredX : filteredX;
}
if (filteredY != 0) {
filteredY = map(abs(filteredY), DEAD_ZONE, 100, 0, 100);
filteredY = (y < 0) ? -filteredY : filteredY;
}
// Use filtered values for control
controlDevice(filteredX, filteredY);
}
Penjelasan Program
Pada contoh program, nilai const int DEAD_ZONE = 15; digunakan untuk menentukan Dead Zone, yaitu area sebesar 15% di sekitar titik tengah joystick yang dianggap sebagai posisi netral. Selanjutnya, program memanfaatkan fungsi abs() untuk memeriksa apakah nilai koordinat sumbu X dan Y masih berada dalam rentang -15 hingga +15. Jika masih berada dalam rentang tersebut, nilai koordinat akan diubah menjadi 0 dengan memberikan nilai filteredX = 0 dan filteredY = 0, sehingga perangkat yang dikendalikan tidak akan merespons pergerakan joystick yang sangat kecil atau tidak disengaja.
Sebaliknya, jika nilai koordinat berada di luar area Dead Zone, fungsi map() digunakan untuk mengubah kembali rentang nilai joystick secara proporsional agar tetap menghasilkan keluaran dengan skala 0 hingga 100. Nilai hasil pemetaan tersebut kemudian diteruskan ke fungsi controlDevice() untuk mengendalikan perangkat sesuai arah dan besar pergerakan joystick. Penerapan teknik Dead Zone seperti ini banyak digunakan pada berbagai sistem kendali, seperti robot beroda, drone, lengan robot, kendaraan RC (Remote Control), maupun sistem navigasi berbasis joystick, karena mampu mengurangi pengaruh getaran kecil serta meminimalkan kesalahan akibat sentuhan ringan pada joystick.
3. Membuat Pergerakan Lebih Halus dengan Speed RampingPerubahan nilai joystick yang terlalu cepat dapat menyebabkan motor atau servo bergerak secara tiba-tiba. Kondisi ini sering menghasilkan hentakan yang kurang nyaman dan dapat mempercepat keausan mekanik. Untuk mengatasinya, digunakan teknik Speed Ramping, yaitu menaikkan atau menurunkan nilai kontrol secara bertahap hingga mencapai nilai target.
class SpeedController {
private:
int targetX = 0, targetY = 0;
int currentX = 0, currentY = 0;
unsigned long lastUpdate = 0;
const int RAMP_RATE = 5; // Change per update cycle
public:
void setTarget(int x, int y) {
targetX = x;
targetY = y;
}
void update() {
if (millis() - lastUpdate > 20) { // Update every 20ms
// Ramp X value
if (currentX < targetX) {
currentX = min(currentX + RAMP_RATE, targetX);
} else if (currentX > targetX) {
currentX = max(currentX - RAMP_RATE, targetX);
}
// Ramp Y value
if (currentY < targetY) {
currentY = min(currentY + RAMP_RATE, targetY);
} else if (currentY > targetY) {
currentY = max(currentY - RAMP_RATE, targetY);
}
// Apply ramped values
applyControlValues(currentX, currentY);
lastUpdate = millis();
}
}
void applyControlValues(int x, int y) {
// Your control logic here with smooth ramped values
Serial.println("Ramped - X: " + String(x) + ", Y: " + String(y));
}
};
SpeedController speedController;
void setup() {
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
speedController.setTarget(x, y);
});
}
void loop() {
server.loop();
speedController.update(); // Apply speed ramping
}
Penjelasan Program
Pada contoh program ini dibuat sebuah class bernama SpeedController yang berfungsi mengubah nilai joystick secara bertahap sebelum diteruskan ke perangkat yang dikendalikan. Di dalam class tersebut terdapat dua kelompok variabel, yaitu targetX dan targetY sebagai nilai tujuan yang diterima dari joystick, serta currentX dan currentY sebagai nilai yang sedang digunakan oleh sistem. Saat joystick digerakkan, callback webJoystickPage.onJoystickValueFromWeb() akan memanggil fungsi speedController.setTarget(x, y) untuk memperbarui nilai tujuan.
Namun, nilai tersebut tidak langsung diterapkan. Sebagai gantinya, fungsi update() dijalankan secara berkala setiap 20 milidetik menggunakan fungsi millis(). Pada setiap proses pembaruan, nilai currentX dan currentY hanya berubah sebesar RAMP_RATE = 5 hingga secara bertahap mencapai nilai target. Dengan mekanisme ini, perubahan kecepatan motor maupun sudut servo menjadi lebih halus dan tidak terjadi secara mendadak. Setelah proses penyesuaian selesai, nilai yang telah diproses akan diteruskan ke fungsi applyControlValues(), yang dapat diisi dengan logika untuk mengendalikan motor, servo, aktuator, atau perangkat lainnya sesuai kebutuhan. Teknik Speed Ramping sangat direkomendasikan untuk berbagai aplikasi, seperti:
- Robot berkecepatan tinggi.
- Robot AGV (Automated Guided Vehicle).
- Robot lengan (Robotic Arm).
- Kendaraan RC (Remote Control).
- Sistem pan-tilt kamera.
- Proyek IoT yang membutuhkan kontrol gerakan secara halus.
Selain menghasilkan pergerakan yang lebih mulus dan nyaman saat dioperasikan, teknik Speed Ramping juga membantu mengurangi beban mekanis pada motor dan sistem transmisi. Dengan demikian, komponen mekanis tidak mudah mengalami keausan sehingga usia pakai perangkat dapat menjadi lebih panjang.
Contoh Integrasi Web Joystick dengan Perangkat Keras
Salah satu keunggulan DIYables Web Joystick adalah kemudahannya untuk diintegrasikan dengan berbagai perangkat keras. Data koordinat X dan Y yang diterima dari browser dapat langsung digunakan sebagai input untuk mengendalikan motor, servo, LED, maupun perangkat elektronik lainnya. Berikut beberapa contoh implementasi yang dapat dijadikan referensi dalam pengembangan proyek berbasis ESP32.
1. Mengendalikan Robot Car Menggunakan Web Joystick
Contoh berikut memperlihatkan cara menggunakan Web Joystick sebagai pengendali robot mobil (Robot Car) dengan dua motor DC yang dikontrol menggunakan motor driver.
void setupRobotCar() {
// Motor driver pins
pinMode(2, OUTPUT); // Left motor direction 1
pinMode(3, OUTPUT); // Left motor direction 2
pinMode(4, OUTPUT); // Right motor direction 1
pinMode(5, OUTPUT); // Right motor direction 2
pinMode(9, OUTPUT); // Left motor PWM
pinMode(10, OUTPUT); // Right motor PWM
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Tank drive calculation
int leftMotor = y + (x / 2); // Forward/back + steering
int rightMotor = y - (x / 2); // Forward/back - steering
// Constrain to valid range
leftMotor = constrain(leftMotor, -100, 100);
rightMotor = constrain(rightMotor, -100, 100);
// Control motors
setMotorSpeed(9, 2, 3, leftMotor); // Left motor
setMotorSpeed(10, 4, 5, rightMotor); // Right motor
});
}
void setMotorSpeed(int pwmPin, int dir1Pin, int dir2Pin, int speed) {
if (speed > 0) {
digitalWrite(dir1Pin, HIGH);
digitalWrite(dir2Pin, LOW);
analogWrite(pwmPin, map(speed, 0, 100, 0, 255));
} else if (speed < 0) {
digitalWrite(dir1Pin, LOW);
digitalWrite(dir2Pin, HIGH);
analogWrite(pwmPin, map(-speed, 0, 100, 0, 255));
} else {
digitalWrite(dir1Pin, LOW);
digitalWrite(dir2Pin, LOW);
analogWrite(pwmPin, 0);
}
}
Penjelasan Program
Program ini menerapkan metode Tank Drive, yaitu sistem pengendalian dua motor secara independen.
Koordinat joystick dikonversi menjadi kecepatan motor kiri dan kanan menggunakan persamaan:
leftMotor = y + (x / 2);
rightMotor = y - (x / 2);
Dengan perhitungan tersebut robot dapat melakukan berbagai gerakan, seperti bergerak maju, bergerak mundur, belok ke kiri, belok ke kanan, dan berputar di tempat. Selanjutnya fungsi setMotorSpeed() menentukan arah putaran motor melalui pin Direction, kemudian mengatur kecepatannya menggunakan sinyal PWM. Nilai joystick yang berada pada rentang -100 hingga +100 diubah menjadi nilai PWM 0 hingga 255 menggunakan fungsi map(), sehingga kecepatan motor berubah secara proporsional mengikuti posisi joystick.
2. Mengendalikan Camera Gimbal Menggunakan Servo
Selain robot beroda, Web Joystick juga dapat digunakan sebagai pengendali Camera Gimbal yang menggunakan dua buah motor servo.
#include <Servo.h>
Servo panServo, tiltServo;
int panOffset = 90, tiltOffset = 90; // Center positions
void setupCameraGimbal() {
panServo.attach(9);
tiltServo.attach(10);
// Set initial center positions
panServo.write(panOffset);
tiltServo.write(tiltOffset);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Calculate servo positions with offset
int panPos = panOffset + map(x, -100, 100, -45, 45); // ±45° range
int tiltPos = tiltOffset + map(y, -100, 100, -30, 30); // ±30° range
// Constrain to servo limits
panPos = constrain(panPos, 0, 180);
tiltPos = constrain(tiltPos, 0, 180);
// Move servos smoothly
panServo.write(panPos);
tiltServo.write(tiltPos);
});
}
Penjelasan Program
Program ini menggunakan dua motor servo, yaitu:
- Pan Servo untuk menggerakkan kamera ke kiri dan kanan.
- Tilt Servo untuk menggerakkan kamera ke atas dan bawah.
Pada awal program, kedua servo diposisikan pada sudut 90° sebagai posisi tengah. Koordinat joystick kemudian dikonversi menjadi sudut servo menggunakan fungsi map(). Pada contoh ini:
- Sumbu X menghasilkan perubahan sudut sekitar ±45°.
- Sumbu Y menghasilkan perubahan sudut sekitar ±30°.
Fungsi constrain() digunakan agar sudut servo tetap berada dalam rentang 0° hingga 180°, sehingga servo tidak bergerak melebihi batas mekanisnya. Contoh seperti ini banyak digunakan pada sistem kamera pemantau, robot vision, maupun kamera FPV.
3. Mengendalikan Warna RGB LED Menggunakan Web Joystick
Selain untuk mengendalikan aktuator, Web Joystick juga dapat dimanfaatkan untuk membuat sistem pengaturan warna pada RGB LED.
const int RED_PIN = 9;
const int GREEN_PIN = 10;
const int BLUE_PIN = 11;
void setupRGBControl() {
pinMode(RED_PIN, OUTPUT);
pinMode(GREEN_PIN, OUTPUT);
pinMode(BLUE_PIN, OUTPUT);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Convert joystick position to RGB values
int red = map(abs(x), 0, 100, 0, 255);
int green = map(abs(y), 0, 100, 0, 255);
int blue = map(abs(x + y), 0, 141, 0, 255); // Diagonal distance
// Apply quadrant-specific color mixing
if (x > 0 && y > 0) {
// Upper right: Red + Green = Yellow
blue = 0;
} else if (x < 0 && y > 0) {
// Upper left: Green + Blue = Cyan
red = 0;
} else if (x < 0 && y < 0) {
// Lower left: Blue + Red = Magenta
green = 0;
} else if (x > 0 && y < 0) {
// Lower right: Red only
green = blue = 0;
}
// Set RGB values
analogWrite(RED_PIN, red);
analogWrite(GREEN_PIN, green);
analogWrite(BLUE_PIN, blue);
});
}
Penjelasan Program
Pada contoh ini, posisi joystick digunakan untuk menghasilkan kombinasi warna pada RGB LED. Intensitas masing-masing warna dihitung berdasarkan koordinat joystick. Sebagai contoh:
- Nilai X mengatur intensitas warna merah.
- Nilai Y mengatur intensitas warna hijau.
- Kombinasi nilai X dan Y menghasilkan intensitas warna biru.
Program juga membagi area joystick menjadi empat kuadran sehingga setiap arah menghasilkan kombinasi warna yang berbeda. Sebagai contoh:
- Kanan atas menghasilkan kombinasi Merah + Hijau (kuning).
- Kiri atas menghasilkan Hijau + Biru (cyan).
- Kiri bawah menghasilkan Merah + Biru (magenta).
- Kanan bawah menghasilkan dominasi warna merah.
Seluruh nilai warna kemudian dikirim ke pin PWM menggunakan fungsi analogWrite() sehingga intensitas cahaya LED berubah mengikuti posisi joystick.
Penyelesaian Masalah (Troubleshooting)
Saat menggunakan Web Joystick, terkadang muncul beberapa kendala yang berkaitan dengan jaringan, konfigurasi, maupun proses pembacaan koordinat. Berikut beberapa masalah yang paling sering ditemui beserta solusinya.
1. Joystick Tidak Dapat Digunakan
Jika joystick tidak merespons saat digerakkan, lakukan beberapa pemeriksaan berikut.
- Pastikan koneksi WebSocket telah berhasil dibuat.
- Periksa apakah ESP32 dan perangkat pengguna berada pada jaringan WiFi yang sama.
- Muat ulang (refresh) halaman web apabila antarmuka tidak merespons.
- Buka Serial Monitor untuk melihat apakah terdapat pesan kesalahan atau status koneksi.
2. Gerakan Joystick Terasa Tidak Stabil
Apabila pergerakan joystick terlihat tersendat atau terlalu sensitif, Anda dapat mencoba beberapa langkah berikut.
- Sesuaikan nilai Sensitivity agar respons lebih halus.
- Terapkan Dead Zone untuk menghilangkan gerakan kecil di sekitar titik tengah.
- Kurangi frekuensi pembaruan data apabila sistem terlalu sering mengirim data.
- Pastikan jaringan WiFi memiliki latensi yang rendah dan koneksi yang stabil.
3. Fitur Auto Return Tidak Berfungsi
Jika joystick tidak kembali ke posisi tengah setelah dilepas, lakukan pemeriksaan berikut.
- Pastikan fitur Auto Return telah diaktifkan pada konfigurasi joystick.
- Uji menggunakan browser atau perangkat lain untuk memastikan tidak ada masalah kompatibilitas.
- Coba gunakan metode input yang berbeda, misalnya beralih dari layar sentuh ke mouse, atau sebaliknya.
4. Nilai Koordinat Tidak Mencapai Nilai Maksimum
Apabila nilai koordinat X atau Y tidak pernah mencapai rentang maksimum, lakukan beberapa langkah berikut.
- Pastikan proses kalibrasi joystick telah dilakukan dengan benar.
- Periksa kembali proses perhitungan koordinat di dalam program.
- Bandingkan hasil pengujian menggunakan browser atau perangkat yang berbeda.
Tips Debugging Web Joystick
Selama proses pengembangan, informasi debugging sangat membantu untuk mengetahui kondisi joystick secara real-time. Contoh berikut menampilkan berbagai informasi penting pada Serial Monitor.
void debugJoystickState(int x, int y) {
Serial.println("=== Joystick Debug ===");
Serial.println("X: " + String(x) + " (" + String(map(x, -100, 100, 0, 100)) + "%)");
Serial.println("Y: " + String(y) + " (" + String(map(y, -100, 100, 0, 100)) + "%)");
Serial.println("Distance from center: " + String(sqrt(x*x + y*y)));
Serial.println("Angle: " + String(atan2(y, x) * 180 / PI) + "°");
Serial.println("=====================");
}
Informasi yang ditampilkan meliputi nilai koordinat X dan Y, persentase posisi joystick, jarak joystick dari titik tengah, dan sudut arah joystick dalam satuan derajat. Data tersebut sangat membantu ketika melakukan proses kalibrasi maupun pengujian algoritma pengendalian.
Ide Proyek Menggunakan DIYables Web Joystick
Web Joystick dapat diterapkan pada berbagai jenis proyek, mulai dari pembelajaran hingga aplikasi robotika.
1. Proyek Robotika
- Mengendalikan mobil robot melalui jaringan WiFi.
- Mengontrol robot lengan (Robotic Arm).
- Mengendalikan arah drone untuk simulasi penerbangan.
- Mengontrol robot berkaki atau robot hewan.
2. Otomasi Rumah (Smart Home)
- Mengatur posisi tirai otomatis.
- Mengendalikan arah kamera CCTV atau IP Camera.
- Mengatur warna dan tingkat kecerahan lampu RGB LED.
- Mengontrol arah putaran dan kecepatan kipas listrik.
3. Media Pembelajaran
- Praktik pengendalian motor DC dan motor servo.
- Mempelajari sistem koordinat X-Y pada embedded system.
- Membuat panel kendali berbasis web.
- Simulasi komunikasi WebSocket menggunakan ESP32.
4. Proyek Kreatif
- Membuat sistem kontrol lampu dekoratif.
- Mengendalikan efek pencahayaan yang mengikuti musik.
- Menggerakkan robot pembuat gambar sederhana.
- Membangun instalasi seni interaktif berbasis ESP32.
Mengintegrasikan Web Joystick dengan Contoh Aplikasi Lain
DIYables Web Apps memungkinkan beberapa antarmuka web digunakan secara bersamaan sehingga Anda dapat membuat sistem kendali yang lebih kompleks.
1. Menggabungkan Web Joystick dengan WebSlider
Pada contoh berikut, Web Joystick digunakan untuk menentukan arah gerakan, sedangkan WebSlider berfungsi sebagai pengatur batas kecepatan.
// Use joystick for direction, sliders for speed limits
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
int maxSpeed = getSliderValue(); // From WebSlider
int scaledX = map(x, -100, 100, -maxSpeed, maxSpeed);
int scaledY = map(y, -100, 100, -maxSpeed, maxSpeed);
controlRobot(scaledX, scaledY);
});
Dengan cara ini, pengguna dapat mengubah arah dan kecepatan robot secara terpisah sehingga pengendalian menjadi lebih fleksibel.
2. Menggabungkan Web Joystick dengan WebDigitalPins
Web Joystick juga dapat dipadukan dengan WebDigitalPins untuk mengaktifkan pin digital berdasarkan posisi joystick.
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Activate pins based on joystick quadrants
webDigitalPinsPage.setPinState(2, x > 50); // Right quadrant
webDigitalPinsPage.setPinState(3, x < -50); // Left quadrant
webDigitalPinsPage.setPinState(4, y > 50); // Upper quadrant
webDigitalPinsPage.setPinState(5, y < -50); // Lower quadrant
});
Pada contoh tersebut, setiap kuadran joystick akan mengubah status pin digital yang berbeda. Teknik ini dapat diterapkan untuk mengendalikan relay, LED, buzzer, aktuator, maupun perangkat digital lainnya berdasarkan arah pergerakan joystick.
Dengan mengombinasikan beberapa komponen dari DIYables ESP32 Web Apps, Anda dapat membangun antarmuka kontrol berbasis web yang lebih interaktif, mulai dari sistem kendali robot sederhana hingga aplikasi IoT yang lebih kompleks.
Baca juga: DIYables ESP32 Web Apps Web Digital Pins - Mengontrol dan Memantau GPIO ESP32 Melalui Web Browser
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