14. Interface and Application Programming¶
Overview¶
This week, I focused on creating an interactive web-based interface to control a DC motor, building off of skills I developed earlier in the year. Since I had already learned how to create web interfaces and run local servers with the ESP32, I decided to expand on that knowledge by making a joystick-based controller.
I reused my custom board from Week 10, which was designed to control a DC motor using the L298N Mini motor driver. This time, I integrated it with a web interface hosted on an ESP32-C3, enabling wireless motor control over Wi-Fi.
Group Work¶
I worked with Noah Smith to complete our Group Work site. My job was to find the benefits of using a webserver and find any other important features for it.
Web Interface and UI Behavior¶
The user interface is a virtual joystick created in the browser using HTML and JavaScript. This joystick is a draggable knob inside a circle boundary. When the knob is moved, the browser registers the X and Y position values and sends them to the ESP32-C3 through a POST request.
UI Effects:¶
- Moving the joystick up tells the motor to spin forward.
- Moving it down commands the motor to go in reverse.
- Letting go of the joystick sends a stop command, turning off the motor.
The joystickâs immediate responses is handled by JavaScript, which checks every 150 milliseconds whether the knob’s position has changed. If it has, the current X and Y values are sent through a POST request to the ESP.
Code Integration¶
The following code was uploaded to the ESP32-C3:
#include <Arduino.h>
#include <WiFi.h>
#include <ESPmDNS.h>
#define IN1_PIN 2
#define IN2_PIN 3
const char* ssid = "EngineeringStudent";
const char* password = "cls2024!";
const char* hostname = "maestro";
WiFiServer server(80);
int leftVal = 0;
int upVal = 0;
const char index_html[] PROGMEM = R"rawliteral(
// [HTML/JavaScript from previous section]
)rawliteral";
void setup() {
Serial.begin(115200);
pinMode(IN1_PIN, OUTPUT);
pinMode(IN2_PIN, OUTPUT);
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, LOW);
WiFi.begin(ssid, password);
Serial.print("Connecting");
while (WiFi.status() != WL_CONNECTED) {
delay(500); Serial.print(".");
}
Serial.println("\nWiFi connected. IP: " + WiFi.localIP().toString());
if (!MDNS.begin(hostname)) Serial.println("mDNS failed.");
else Serial.println("mDNS responder started.");
server.begin();
}
void handleGet(WiFiClient& client) {
client.print("HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nConnection: close\r\n\r\n");
client.print(index_html);
}
void handlePost(WiFiClient& client, String request) {
String body = "";
while (client.available()) body += char(client.read());
int lIndex = body.indexOf("left=");
int uIndex = body.indexOf("up=");
if (lIndex != -1) {
int amp = body.indexOf('&', lIndex);
leftVal = body.substring(lIndex + 5, amp == -1 ? body.length() : amp).toInt();
}
if (uIndex != -1) {
int amp = body.indexOf('&', uIndex);
upVal = body.substring(uIndex + 3, amp == -1 ? body.length() : amp).toInt();
}
Serial.printf("Joystick - Left: %d | Up: %d\n", leftVal, upVal);
if (upVal > 2) {
digitalWrite(IN1_PIN, HIGH);
digitalWrite(IN2_PIN, LOW); // motor forward
} else if (upVal < -2) {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, HIGH); // motor backward
} else {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, LOW); // motor stop
}
client.print("HTTP/1.1 200 OK\r\nConnection: close\r\n\r\n");
}
void loop() {
WiFiClient client = server.available();
if (client) {
String req = "";
while (client.connected() && client.available()) {
char c = client.read();
req += c;
if (req.endsWith("\r\n\r\n")) break;
}
if (req.startsWith("GET /")) handleGet(client);
else if (req.startsWith("POST /")) handlePost(client, req);
delay(10);
}
}
Reflection¶
This project helped me connect web development with physical hardware control, making the motor respond directly to joystick input. I improved my skills in parsing HTTP POST requests and managing fast data communication over Wi-Fi. Debugging the interface clarified how important timing and input handling are for smooth operation. I was really excited when the motor moved for the very first time off of the web interface. It really felt like magic to be honest.