HTMAA 2024 - Week 13: Interface and Application Programming

Interface and Application Programming

This week's task was to write an application that interfaces a user with an input and/or output device that I made. In my case:

One ESP32 (Server) reads a switch, updates an LED (Green/Red), and shares the LED status via an HTTP server.
A second ESP32 (Client) fetches this status from the server and turns its own LEDs on/off accordingly.
I also created a simple HTML & JavaScript interface that displays the LED status and lets you reset the LED to green.

Below is a snapshot of the HTML interface I created, followed by the code for each part. Scroll down for the final demonstration video!

Screenshot of the HTML interface — A screenshot of the interface webpage showing LED status and a reset button.

1. ESP32 Server Code (With Switch)

This code goes on the ESP32 that has the switch (on pin D1). It hosts the HTTP server, reports GREEN or RED status, and handles a /reset request to turn the LED back to green.

#include <WiFi.h>

// Wi-Fi credentials
const char* ssid     = "PACO_LAPTOP";
const char* password = "12345678";

// HTTP server on port 80
WiFiServer server(80);

// Pins
const int switchPin   = D1;
const int greenLedPin = D2;
const int redLedPin   = D4;

// Track last state
int lastSwitchState;
bool isReset = false;

void setup() {
  Serial.begin(115200);
  pinMode(switchPin,   INPUT_PULLUP);
  pinMode(greenLedPin, OUTPUT);
  pinMode(redLedPin,   OUTPUT);

  // Default LED state
  digitalWrite(greenLedPin, HIGH);
  digitalWrite(redLedPin,   LOW);

  // Connect to Wi-Fi
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi connected!");
  Serial.print("Server IP address: ");
  Serial.println(WiFi.localIP()); // For the client/web page to connect

  server.begin();
}

void loop() {
  // Check switch state
  int currentSwitchState = digitalRead(switchPin);
  if (currentSwitchState != lastSwitchState) {
    lastSwitchState = currentSwitchState;
    if (currentSwitchState == LOW) {
      Serial.println("Switch changed to ON");
      digitalWrite(greenLedPin, HIGH);
      digitalWrite(redLedPin, LOW);
    } else {
      Serial.println("Switch changed to OFF");
      digitalWrite(greenLedPin, LOW);
      digitalWrite(redLedPin, HIGH);
    }
  }

  // Handle HTTP clients
  WiFiClient client = server.available();
  if (client) {
    Serial.println("Client connected!");
    String request = client.readStringUntil('\\r');
    client.flush();

    // Ignore browser's favicon request
    if (request.indexOf("GET /favicon.ico") >= 0) {
      Serial.println("Ignoring favicon request");
      client.stop();
      return;
    }

    // Handle reset request
    if (request.indexOf("GET /reset") >= 0) {
      Serial.println("Reset request received");
      isReset = true;
      digitalWrite(greenLedPin, HIGH);
      digitalWrite(redLedPin, LOW);
    }

    // Determine LED status
    String ledStatus = (digitalRead(greenLedPin) == HIGH) ? "GREEN" : "RED";

    // Send HTTP response
    client.println("HTTP/1.1 200 OK");
    client.println("Content-Type: application/json");
    client.println("Access-Control-Allow-Origin: *");
    client.println("Connection: close");
    client.println();
    client.println("{\"led_status\": \"" + ledStatus + "\"}");

    delay(10); // short delay
    client.stop();
  }
}

2. ESP32 Client Code (With LEDs)

This code belongs on the second ESP32, which does not have the switch. Instead, it periodically fetches the LED state from the server's IP address and updates GREEN or RED LEDs on pins D2 and D3 (or whatever pins you’ve wired).

#include <WiFi.h>

// Wi-Fi credentials
const char* ssid     = "PACO_LAPTOP";
const char* password = "12345678";

// IP of the server board (check Serial Monitor on server)
const char* serverIP = "192.168.137.63";
const uint16_t serverPort = 80;

// Pins
const int greenLedPin = D2;
const int redLedPin   = D3;

void setup() {
  Serial.begin(115200);
  pinMode(greenLedPin, OUTPUT);
  pinMode(redLedPin,   OUTPUT);

  digitalWrite(greenLedPin, LOW);
  digitalWrite(redLedPin,   LOW);

  // Connect to Wi-Fi
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi connected!");
  Serial.print("Client IP address: ");
  Serial.println(WiFi.localIP());
}

void loop() {
  // Periodically get the LED status
  String ledStatus = getLEDStatus();

  if (ledStatus == "GREEN") {
    digitalWrite(greenLedPin, HIGH);
    digitalWrite(redLedPin,   LOW);
    Serial.println("LED is GREEN.");
  } else if (ledStatus == "RED") {
    digitalWrite(greenLedPin, LOW);
    digitalWrite(redLedPin,   HIGH);
    Serial.println("LED is RED.");
  } else {
    Serial.println("No valid status received.");
  }

  delay(3000); // Check every 3 seconds
}

String getLEDStatus() {
  WiFiClient client;
  if (!client.connect(serverIP, serverPort)) {
    Serial.println("Connection to server failed!");
    return "";
  }

  // Basic HTTP GET request
  client.print(String("GET / HTTP/1.1\\r\\n") +
               "Host: " + serverIP + "\\r\\n" +
               "Connection: close\\r\\n\\r\\n");

  unsigned long timeout = millis();
  while (client.available() == 0) {
    if (millis() - timeout > 2000) {
      Serial.println(">>> Client Timeout !");
      client.stop();
      return "";
    }
  }

  // Read the response
  String response;
  while (client.available()) {
    response += client.readStringUntil('\\r');
  }
  client.stop();

  // Check if "GREEN" or "RED" is in the response
  if (response.indexOf("GREEN") >= 0) {
    return "GREEN";
  } else if (response.indexOf("RED") >= 0) {
    return "RED";
  }

  return "";
}

3. HTML Webpage Interface

Finally, here is the simple HTML + JavaScript code for the user interface. It shows the current LED status and allows you to reset the LED to green. Make sure to update the esp32IP with the server's IP address.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESP32 LED Status Monitor</title>
</head>
<body style="background-color: #121212; color: #25bcf8; text-align:center; font-family: Arial, sans-serif;">

    <h1>ESP32 LED Status Monitor</h1>
    <p id="status">Fetching LED status...</p>
    <div id="led" style="width:50px; height:50px; border-radius:50%; margin:0 auto; background-color:grey;"></div>
    <br>
    <button onclick="resetLED()" style="padding: 10px 20px;">Reset LED</button>

    <h3>Debug Info</h3>
    <p id="debug">Waiting for response...</p>

    <script>
        // Point this to your ESP32 Server's IP address
        const esp32IP = "http://192.168.137.63";

        function updateStatus() {
            fetch(esp32IP)
                .then(response => {
                    document.getElementById("debug").innerText = "HTTP Response Status: " + response.status;
                    if (!response.ok) {
                        throw new Error("Network response was not OK");
                    }
                    return response.json();
                })
                .then(data => {
                    const status = data.led_status;
                    document.getElementById("status").innerText = "LED Status: " + status;

                    const ledElement = document.getElementById("led");
                    ledElement.style.backgroundColor = (status === "GREEN") ? "lime" : "red";

                    document.getElementById("debug").innerText += "\\nSuccessfully fetched status!";
                })
                .catch(error => {
                    console.error("Error fetching LED status:", error);
                    document.getElementById("status").innerText = "Error fetching status!";
                    document.getElementById("debug").innerText += "\\nError: " + error.message;
                });
        }

        function resetLED() {
            fetch(esp32IP + "/reset")
                .then(response => {
                    document.getElementById("debug").innerText = "Reset HTTP Response: " + response.status;
                    if (!response.ok) {
                        throw new Error("Failed to reset LED");
                    }
                    return response.json();
                })
                .then(() => {
                    updateStatus();
                })
                .catch(error => {
                    console.error("Error resetting LED:", error);
                    document.getElementById("debug").innerText += "\\nReset Error: " + error.message;
                });
        }

        // Fetch status every 5 seconds
        setInterval(updateStatus, 5000);

        // Fetch once on page load
        updateStatus();
    </script>

</body>
</html>

Note: To avoid CORS or mixed HTTP/HTTPS issues, open this page using a local server (e.g., "Live Server" in Visual Studio Code) at http://127.0.0.1:5500 or similar. The ESP32 code includes Access-Control-Allow-Origin: * to allow cross-origin requests.

Demonstration Video

Below is a short video demonstrating how the switch, client board, and web interface all interact.

Video: Demonstration of the ESP32 server, client, and web interface in action.

Assignments

Group Assignment:

Compare as many tool options as possible ✓

Individual Assignment:

Write an application that interfaces a user with an input and/or output device that you made ✓