The interface is an important part of my final project as I am planning on controlling the servo movement from the UI.

I created a basic HTML/CSS web interface that is stored inside the ESP32C3. It has buttons to start, stop, test, and set angles for the servo motors. I used CSS to keep it simple and centered. The UI is accessed through the ESP32’s local IP in a browser.

The interface communicates with the ESP32C3 over WIFI. When you press a button on the webpage, it sends an HTTP GET request to the ESP32. The ESP32 uses server.on() to listen for these requests and responds by moving the servos.

The microcontroller and the device you are opening the IP adress should be on the same WIFI adress. This is how you assign a WIFI adress to a ESP32C3:

1
2


const char* ssid = "wifi_name";
const char* password = "password";

The two libraries let the esp32 connect to Wi-Fi

1
2


#include <WiFi.h>
#include <WebServer.h>

The following line creates a web server object on the esp32 that listens for incoming HTTP requests on port 80

1

WebServer server(80);

After a successful connection this line prints the ESP32’s local IP address. This is how you access the controller from your browser

1

println(WiFi.localIP());

HTML and CSS goes between:

1
2


const char index_html[] PROGMEM = R"rawliteral( <!DOCTYPE html>
</html> )rawliteral"

Connects the ESP32 to the Wi-Fi.

1

WiFi.begin(ssid, password);

UI:

I used an online image’s URL for the background.

Issues

One issue I faced was that the servos (SG90S) were jittery and making noise when i would press buttons but they would not be moving properly. I realized the servos were having trouble handling the mechanism attached. I switched to stronger servos (MG996R) and this problem was solved.

UI and Servo

Final Code:

Click Here