DIYables ESP32 Web Apps Web Rotator - Cara Membuat Kontrol Sudut Servo dan Stepper Berbasis Web pada ESP32

Elga Aris Prastyo Juli 23, 2026

Mengendalikan posisi motor servo atau motor stepper umumnya dilakukan menggunakan potensiometer, tombol, maupun perintah yang dikirim melalui Serial Monitor. Namun, metode tersebut kurang praktis ketika sistem perlu dikendalikan dari jarak jauh atau melalui perangkat yang berbeda. Library DIYables ESP32 Web Apps menyediakan solusi yang lebih modern melalui fitur Web Rotator, yaitu antarmuka berbasis web yang memungkinkan pengguna mengatur sudut rotasi langsung dari browser. Nilai sudut yang dipilih akan dikirim ke ESP32 secara real-time menggunakan komunikasi WebSocket, sehingga posisi servo atau motor stepper dapat berubah tanpa perlu me-refresh halaman web. Pendekatan ini sangat bermanfaat untuk proses pengujian, kalibrasi, sistem robotika, kontrol aktuator, hingga berbagai proyek Internet of Things (IoT) karena perubahan sudut dapat dilakukan secara cepat dan interaktif.

Fitur DIYables ESP32 Web Rotator

Web Rotator memiliki berbagai fitur yang dirancang untuk mempermudah proses pengendalian aktuator melalui browser.

1. Kontrol Sudut Interaktif

Pengguna dapat mengatur sudut putar hanya dengan mengklik atau menggeser cakram (rotary dial) pada halaman web. Nilai sudut akan langsung dikirim ke ESP32.

2. Mendukung Dua Mode Operasi

Web Rotator menyediakan dua mode pengendalian, yaitu:

- Continuous Rotation (0°–360° atau lebih) untuk aktuator yang dapat berputar terus-menerus.

- Limited Rotation untuk servo standar yang memiliki batas sudut tertentu.

3. Respons Real-Time

Setiap perubahan sudut langsung dikirim ke ESP32 melalui WebSocket, sehingga tidak diperlukan proses reload halaman seperti pada komunikasi HTTP biasa.

4. Indikator Posisi Sudut

Antarmuka menampilkan arah putaran beserta nilai sudut yang sedang dipilih sehingga pengguna dapat mengetahui posisi aktuator dengan mudah.

5. Kompatibel di Berbagai Perangkat

Web Rotator dapat diakses menggunakan komputer, laptop, tablet maupun smartphone.  Seluruh fitur tetap berfungsi baik menggunakan mouse maupun layar sentuh.

6. Konfigurasi Fleksibel

Pengembang dapat menentukan rentang sudut minimum, rentang sudut maksimum, mode operasi, posisi awal maupun resolusi perubahan sudut. 

7. Komunikasi WebSocket

Pengiriman data dilakukan menggunakan protokol WebSocket sehingga komunikasi berlangsung dua arah (bidirectional) dengan latensi yang sangat rendah.

8. Antarmuka Modern

Tampilan Web Rotator dirancang sederhana namun responsif dengan animasi rotasi yang halus sehingga nyaman digunakan saat melakukan pengujian perangkat.

 

Baca juga: DIYables ESP32 Web Apps Web Plotter - Cara Membuat Grafik Data Sensor Berbasis Web pada ESP32 

Perangkat Keras yang Dibutuhkan

- Modul ESP32 DevKit ESP-WROOM-32 (38 Pin)

- Kabel USB yang mendukung transfer data

Cara Menginstal Library DIYables ESP32 Web Apps

Ikuti langkah-langkah berikut untuk menginstal library pada Arduino IDE.

1. Hubungkan papan ESP32 ke komputer menggunakan kabel USB.

2. Jalankan Arduino IDE.

3. Pilih jenis board ESP32 yang digunakan melalui menu Tools → Board, kemudian pilih Port COM yang sesuai.

4. Buka Library Manager melalui ikon Library di sisi kiri Arduino IDE.

5. Ketik DIYables ESP32 WebApps

6. Pilih DIYables ESP32 WebApps Library.

7. Klik Install dan tunggu hingga proses instalasi selesai.

Setelah proses instalasi berhasil, library siap digunakan pada proyek ESP32.



8. Setelah proses instalasi dimulai, Arduino IDE akan meminta pemasangan beberapa library pendukung.

9. Klik Install All agar seluruh dependensi terinstal secara otomatis.



Membuka Contoh Program Web Rotator

Setelah library berhasil diinstal, buka contoh program bawaan.

1. Pilih menu:

File → Examples → DIYables ESP32 WebApps → WebRotator

2. Ubah informasi jaringan WiFi sesuai dengan jaringan yang digunakan.

 

const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";

const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";

 

3. Klik tombol Upload untuk mengunggah program ke ESP32.

4. Setelah proses upload selesai, buka Serial Monitor.

5. Tunggu hingga alamat IP ESP32 muncul seperti berikut:


 

Jika Serial Monitor belum menampilkan apa pun, tekan tombol EN (Reset) pada papan ESP32 untuk melakukan restart.

Mengakses Web Rotator Melalui Browser

Setelah ESP32 berhasil terhubung ke jaringan WiFi, alamat IP perangkat akan muncul pada Serial Monitor. Contohnya: http://10.195.113.32. Masukkan alamat IP tersebut ke browser pada komputer maupun smartphone. Halaman utama Web Apps akan muncul.



Selanjutnya pilih menu Web Rotator.



Selain melalui halaman utama, Anda juga dapat membuka Web Rotator secara langsung menggunakan alamat http://10.195.113.32/web-rotator. Setelah halaman terbuka, putar kontrol sudut menggunakan mouse maupun sentuhan layar. Setiap perubahan sudut akan langsung dikirim ke ESP32 sehingga dapat digunakan untuk mengendalikan motor servo ataupun motor stepper secara real-time.

Mengenal Antarmuka Web Rotator

1. Kontrol Cakram (Rotary Dial)

Bagian utama Web Rotator berupa sebuah cakram virtual yang digunakan sebagai pengatur sudut. Fitur yang tersedia meliputi:

- Pengaturan sudut melalui klik maupun drag.

- Nilai sudut diperbarui secara langsung.

- Animasi rotasi yang halus.

- Tampilan sudut dalam satuan derajat.

- Indikator mode operasi yang sedang digunakan.

2. Antarmuka Responsif

Web Rotator dirancang agar tetap nyaman digunakan pada berbagai perangkat. Keunggulannya meliputi:

- Mendukung penggunaan mouse.

- Mendukung layar sentuh.

- Tata letak otomatis menyesuaikan ukuran layar.

- Area kontrol mudah dikenali sehingga mempermudah pengoperasian.

Konfigurasi Program

1. Pengaturan Web Rotator


// Continuous rotation mode (full 0-360 degrees)

DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);


// Limited rotation mode with custom range

DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);


// Set up angle callback

webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);


2. Menerima Nilai Sudut dari Browser


void onRotatorAngleReceived(float angle) {

    Serial.print("Rotator angle received: ");

    Serial.print(angle, 1);

    Serial.println("°");

    

    // Control your hardware here

}


Mode Operasi Web Rotator

Web Rotator menyediakan dua mode pengoperasian yang dapat dipilih sesuai kebutuhan aplikasi.

1. Continuous Rotation Mode

Mode ini digunakan untuk perangkat yang dapat berputar tanpa batas tertentu. Karakteristiknya antara lain:

- Mendukung rotasi mulai 0° hingga 360° bahkan lebih.

- Nilai sudut tidak di-reset setelah melewati 360°.

- Cocok digunakan untuk Servo Continuous Rotation, Turntable, Sistem Pan-Tilt, dan Antena Otomatis.

Konfigurasi: 

 

ROTATOR_MODE_CONTINUOUS

 

2. Limited Rotation Mode

Mode ini digunakan untuk servo standar yang memiliki batas sudut tertentu. Karakteristiknya meliputi:

- Sudut minimum dan maksimum dapat ditentukan.

- Sistem akan menolak perintah di luar rentang tersebut.

- Aman digunakan untuk mencegah servo bergerak melewati batas mekanis.

Sangat cocok digunakan pada servo SG90, servo MG996R, lengan robot, katup otomatis, dan mekanisme pengarah. 

Konfigurasi:

 

ROTATOR_MODE_LIMITED

minAngle

maxAngle

 

Integrasi dengan Perangkat Keras

1. Mengendalikan Motor Servo

Berikut contoh integrasi Web Rotator dengan motor servo.

Catatan: Potongan program berikut hanya merupakan contoh parsial dan harus digabungkan ke dalam sketch utama ESP32.


#include <Servo.h>

Servo myServo;


// Set rotator to limited mode: 0 to 180 degrees

DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);


void setup() {

    myServo.attach(9);  // Servo on pin 9

    webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);

}


void onRotatorAngleReceived(float angle) {

    // Directly write angle (0-180) to servo

    myServo.write((int)angle);

}


2. Mengendalikan Motor Stepper

Web Rotator juga dapat digunakan sebagai pengendali motor stepper.


#include <Stepper.h>

const int stepsPerRevolution = 200;

Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);


void onRotatorAngleReceived(float angle) {

    // Calculate steps for desired angle

    int steps = (angle / 360.0) * stepsPerRevolution;

    myStepper.step(steps);

}


Opsi Kustomisasi

1. Pengaturan Rentang Sudut

Beberapa parameter yang dapat disesuaikan meliputi:

- Sudut minimum.

- Sudut maksimum.

- Posisi awal ketika ESP32 dinyalakan.

- Resolusi perubahan sudut.

2. Penyesuaian Tampilan Antarmuka

Antarmuka Web Rotator secara otomatis menyesuaikan konfigurasi yang diterapkan.

Beberapa elemen yang akan berubah antara lain:

- Tampilan batas sudut.

- Indikator mode operasi.

- Penanda posisi sudut saat ini.

- Efek gradasi dan animasi antarmuka.

Contoh Web Rotator Mengendalikan Motor Servo

Berikut merupakan contoh implementasi lengkap Web Rotator untuk mengendalikan motor servo menggunakan ESP32.


#include <DIYablesWebApps.h>

#include <Servo.h>


Servo myServo;

const int SERVO_PIN = 26; 


// 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

UnoR4ServerFactory serverFactory;

DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);

DIYablesHomePage homePage;


// Rotator configuration constants

const int ROTATOR_MODE = ROTATOR_MODE_CONTINUOUS;  // Change to ROTATOR_MODE_LIMITED for limited rotation

const float MIN_ANGLE = 0.0;                       // Minimum angle for limited mode

const float MAX_ANGLE = 180.0;                     // Maximum angle for limited mode


// Create WebRotator page with configuration

//DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);

DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, MIN_ANGLE, MAX_ANGLE);


// Variables for angle tracking

float currentAngle = 0.0;


void setup() {

  Serial.begin(9600);

  delay(1000);


  // TODO: Initialize your hardware pins here

  myServo.attach(SERVO_PIN, 500, 2400); // SG90


  Serial.println("DIYables WebApp - Web Rotator Example");


  // Add pages to server

  webAppsServer.addApp(&homePage);

  webAppsServer.addApp(&webRotatorPage);


  // Set 404 Not Found page (optional - for better user experience)

  webAppsServer.setNotFoundPage(DIYablesNotFoundPage());


  // Set callback functions for WebRotator

  webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);


  // Start server

  webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);

  delay(3000);


  Serial.print("WiFi Status: ");

  Serial.println(WiFi.status());


  Serial.print("Local IP: ");

  Serial.println(WiFi.localIP());


  if (ROTATOR_MODE == ROTATOR_MODE_LIMITED) {

    Serial.println("\nRotator Mode: Limited");

    Serial.print("Angle Range: ");

    Serial.print(MIN_ANGLE);

    Serial.print("° to ");

    Serial.print(MAX_ANGLE);

    Serial.println("°");

  } else {

    Serial.println("\nRotator Mode: Continuous Rotation");

  }


  Serial.println("\nTurn the disc in your web browser to control the rotator!");

}


void loop() {

  // Handle web server and WebSocket connections

  webAppsServer.loop();


  // Simulate rotator movement or control actual hardware here

  // For demonstration, we'll just echo back the received angle


  delay(10);

}


/**

 * Callback function called when angle is received from web interface

 * This is where you would control your actual rotator hardware

 */

void onRotatorAngleReceived(float angle) {

  currentAngle = angle;


  Serial.print("Rotator angle received: ");

  Serial.print(angle, 1);

  Serial.println("°");


  // TODO: Add your rotator control code here

  // Examples:

  // - Control servo motor: servo.write(map(angle, 0, 360, 0, 180));

  // - Control stepper motor: stepper.moveTo(angle * stepsPerDegree);

  // - Control DC motor with encoder feedback

  // - Send commands to external rotator controller


  // Note: No echo back to avoid interfering with smooth web interface rotation

  angle = constrain(angle, 0, 180);

  int servoAngle = 180 - angle;

  myServo.write(servoAngle);

}


/**

 * Example function to change rotator mode at runtime

 * Call this function to switch between continuous and limited modes

 */

void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {

  webRotatorPage.setRotatorMode(mode, minAng, maxAng);


  Serial.print("Rotator mode changed to: ");

  if (mode == ROTATOR_MODE_LIMITED) {

    Serial.print("Limited (");

    Serial.print(minAng);

    Serial.print("° to ");

    Serial.print(maxAng);

    Serial.println("°)");

  } else {

    Serial.println("Continuous");

  }

}


/**

 * Example function to send angle updates to web interface

 * Call this function when your rotator position changes

 */

void sendAngleUpdate(float angle) {

  currentAngle = angle;

  webRotatorPage.sendToWebRotator(angle);


  Serial.print("Angle update sent to web: ");

  Serial.print(angle, 1);

  Serial.println("°");

}


Contoh Penerapan Web Rotator

1. Proyek Pembelajaran

Web Rotator sangat cocok digunakan sebagai media pembelajaran pada berbagai topik, seperti:

- Pengendalian motor servo menggunakan PWM.

- Dasar-dasar robotika.

- Sistem pan-tilt kamera.

- Pengarah antena otomatis.

- Pengendalian aktuator melalui web.

2. Aplikasi IoT dan Industri

Selain untuk pembelajaran, Web Rotator juga dapat diterapkan pada berbagai sistem nyata, misalnya:

- Tirai otomatis.

- Ventilasi otomatis.

- Pintu otomatis.

- Lengan robot.

- Robot mobile.

- Sistem positioning jarak jauh.

- Pengendalian katup industri.

- Sistem otomasi mesin.

Penyelesaian Masalah (Troubleshooting)

1. Rotasi Tidak Merespons

Apabila motor tidak bergerak, lakukan beberapa pemeriksaan berikut.

- Pastikan ESP32 telah berhasil terhubung ke jaringan WiFi.

- Periksa apakah koneksi WebSocket berhasil dibuat.

- Pastikan callback penerima data telah dikonfigurasi dengan benar.

- Periksa kembali sambungan kabel servo atau motor.

- Gunakan catu daya yang memadai agar motor bekerja stabil.

2. Sudut Tidak Sesuai

Jika posisi motor tidak sesuai dengan sudut yang dipilih:

- Periksa kembali konfigurasi batas sudut.

- Pastikan nomor pin yang digunakan sudah benar.

- Periksa proses pemetaan (mapping) nilai sudut di dalam program.

- Tampilkan nilai sudut pada Serial Monitor untuk mempermudah proses debugging.

3. Tidak Bisa Terhubung ke Halaman Web

Jika browser tidak dapat membuka halaman Web Rotator:

- Pastikan alamat IP yang dimasukkan sudah benar.

- Periksa apakah perangkat berada pada jaringan WiFi yang sama dengan ESP32.

- Pastikan jaringan menggunakan frekuensi 2,4 GHz, karena sebagian besar modul ESP32 tidak mendukung jaringan WiFi 5 GHz.

- Muat ulang halaman browser atau restart ESP32 apabila diperlukan.

Fitur Lanjutan

1. Mengubah Mode Saat Program Berjalan

Mode operasi dapat diubah tanpa perlu memprogram ulang ESP32.


void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {

    webRotatorPage.setRotatorMode(mode, minAng, maxAng);

    

    Serial.print("Rotator mode changed to: ");

    if (mode == ROTATOR_MODE_LIMITED) {

        Serial.print("Limited (");

        Serial.print(minAng);

        Serial.print("° to ");

        Serial.print(maxAng);

        Serial.println("°)");

    } else {

        Serial.println("Continuous");

    }

}


2. Mengirim Umpan Balik Posisi

Posisi aktuator dapat dikirim kembali ke halaman web sehingga pengguna dapat melihat posisi aktual motor.


void sendAngleUpdate(float angle) {

    currentAngle = angle;

    webRotatorPage.sendToWebRotator(angle);

    

    Serial.print("Angle update sent to web: ");

    Serial.print(angle, 1);

    Serial.println("°");

}


Catatan: Mengirim data posisi terlalu sering dapat meningkatkan beban komunikasi WebSocket sehingga animasi rotasi menjadi kurang halus. Gunakan fitur ini hanya jika aplikasi benar-benar memerlukan pembaruan posisi secara real-time.

3. Kontrol Multi-Sumbu

Web Rotator juga dapat dikembangkan untuk mengendalikan beberapa servo atau motor stepper secara bersamaan, misalnya pada sistem robotik multi-axis.

 

DIYablesWebRotatorPage panRotator(ROTATOR_MODE_CONTINUOUS);

DIYablesWebRotatorPage tiltRotator(ROTATOR_MODE_LIMITED, -90.0, 90.0);


server.addApp(&panRotator);

server.addApp(&tiltRotator);


Implementasi pada Pembelajaran STEM

1. Materi yang Dapat Dipelajari

Melalui proyek ini, pengguna dapat mempelajari berbagai konsep penting, antara lain:

- Pengendalian motor servo dan motor stepper.

- Pengukuran serta representasi sudut.

- Komunikasi WebSocket pada aplikasi IoT.

- Pengembangan antarmuka web berbasis ESP32.

- Pemrograman callback dan komunikasi real-time.

2. Aktivitas Praktikum

Web Rotator dapat dimanfaatkan untuk berbagai kegiatan praktikum, seperti:

- Kalibrasi motor servo.

- Pengujian akurasi posisi motor.

- Integrasi sensor dengan aktuator.

- Pengembangan sistem robotika sederhana.

- Latihan troubleshooting perangkat keras dan perangkat lunak.

 

Baca juga: DIYables ESP32 Web Apps Web Slider - Cara Membuat Web Slider untuk Mengontrol Nilai Analog ESP32 Secara Real-Time

 

 

 

Dalam praktik, hasil dan kendala yang ditemui bisa berbeda tergantung perangkat, konfigurasi, versi library, dan sistem yang digunakan.

Tags:

Posting Komentar

0 Komentar