14. Interface and Application Programming

Overview

This week, I worked on creating an interactive web based interface to control a DC motor, using skills I learned earlier in the year. Since I had already learned how to create web interfaces and create local servers with the ESP32, I decided to keep with that idea 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 combined it with a web interface hosted on an ESP32-C3, creating 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 limit. 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 move forward.
• Moving it down commands the motor to go in reverse.
• Letting go of the joystick creates a stop command, turning off the motor.

The joystick’s responses is handled by JavaScript, which checks every 150 milliseconds if 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

Click here for the code file

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);
  }
}

Explaining the Code and the Web Server

It starts with connecting the microcontroller to Wi-Fi so it can be accessed through a browser. After connecting, the ESP32-C3 runs a server on port 80 and is open for incoming requests. When the browser sends a GET request to the specific port, the ESP32 responds by creating an HTML webpage as the user interface. When the user does actions on the webpage there are transformed into commands that are sent back to the ESP32 through POST requests. The ESP32 then processes these inputs and accordingly operates hardware in real time.

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.

---

Last update: October 4, 2025