Week 14 - Interface and Application programming

This week we have the following tasks to complete:

write an application that interfaces a user with an input &/or output device that you made
compare as many tool options as possible

Control Neopixel from Website via Webinterface

I decided to use a webinterface on the Xiao ESP32-C3 for that I began by letting chatgpt generate a rough code for me to understand how it works.

I used following prompt:

"Generate a code for the Xiao ESP32C3 that I could compile into the ArduinoIDE which setup a small webinterface with a button and a slider, which I later can reach by connecting to the Wifi network with a pc or smartphone."

Which results in following output:

"Here’s a complete Arduino sketch that sets up a simple web interface with a button and a slider for the Seeed Studio XIAO ESP32C3, using the built-in WiFi and WebServer libraries.
When you connect a PC or smartphone to the same WiFi network, you can access the web interface using the IP address of the ESP32C3. ✅ Requirements:
* Install board: Seeed XIAO ESP32C3
* Libraries: Built-in (WiFi.h, WebServer.h)

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

// Replace with your network credentials
const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";

WebServer server(80);

int sliderValue = 0;
bool buttonPressed = false;

void handleRoot() {
  String html = R"rawliteral(
 <!DOCTYPE html>
    <html>
    <head>
      <title>ESP32 Web Interface</title>
      <style>
        body { font-family: Arial; text-align: center; padding-top: 50px; }
        input[type="range"] { width: 300px; }
        button { padding: 10px 20px; font-size: 16px; }
      </style>
    </head>
    <body>
      <h1>ESP32C3 Control Panel</h1>
      <p>Slider Value: <span id="sliderVal">0</span></p>
      <input type="range" min="0" max="100" value="0" id="slider" onchange="sendSlider(this.value)">
      <br><br>
      <button onclick="sendButton()">Press Button</button>
      <p id="buttonStatus"></p>

      <script>
        function sendSlider(val) {
          fetch("/slider?value=" + val);
          document.getElementById("sliderVal").innerText = val;
        }

        function sendButton() {
          fetch("/button").then(response => response.text()).then(data => {
            document.getElementById("buttonStatus").innerText = data;
          });
        }
      </script>
    </body>
    </html>
  )rawliteral";

  server.send(200, "text/html", html);
}

void handleSlider() {
  if (server.hasArg("value")) {
    sliderValue = server.arg("value").toInt();
    Serial.println("Slider set to: " + String(sliderValue));
    server.send(200, "text/plain", "Slider value set");
  } else {
    server.send(400, "text/plain", "Missing value");
  }
}

void handleButton() {
  buttonPressed = true;
  Serial.println("Button was pressed!");
  server.send(200, "text/plain", "Button was pressed!");
}

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("Connecting to WiFi...");

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.print("Connected! IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/slider", handleSlider);
  server.on("/button", handleButton);
  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  server.handleClient();

  // Optional: Use sliderValue and buttonPressed in your logic
  if (buttonPressed) {
    // Do something when button is pressed
    buttonPressed = false;
  }
}

📱 Accessing the Interface: * Upload this sketch via Arduino IDE. * Open Serial Monitor at 115200 baud. * Find the printed IP address (e.g., 192.168.1.42). * Open a browser and enter that IP address."

To get a rough of it and to look of its works I setup a hotspot with my smartphone and enter the network parameter here:

const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";

Which works and looks like that. On the left side is the interface and on the right side the ArduinoIDE:

webinterface

The next step was to connect something useful to the button and the slider for that I decided to copy the functionally from the rotary encoder. So when pressing the button the Neopixel turn off and the slider controlling the brightness from the Neopixel.

The last step was to add three more sliders controlling the RGB channels from the Neopixel.

What I Learned This Week?

If I quote code with html parts my website get centered.

error

A temporary fix was to exclude the code from the quoteblock and put it in a codeblock. Putting the codeblock in the quoteblock didn't fix the problem.

What I want to improve next week

Design Files

To create this page, I used ChatGPT to check my syntax and grammar.

Source code hosted at gitlab.fabcloud.org