Skip to content

15. Interface and Application Programming


Weekly Assignment:

Group assignment:

  • Compare as many tool options as possible.
  • Document your work on the group work page and reflect on your individual page what you learned.

Individual assignment:

  • Write an application for the embedded board that you made. that interfaces a user with an input and/or output device(s)

Overview

I used HTML (inside the handleRoot() function) to serve the webpage. I created buttons with hyperlinks (/set?color=red and /set?color=blue) that trigger server actions.

What it should do is show a webserver where there are two buttons "red" and "blue." When I click on one of the two buttons, the correspondingly colored LED lights up. When the touch sensor is not touched, the selected LED is lit up. When the touch sensor is touched, neither LED will be lit up. When a user clicks a button, the page sends a request to the ESP32-C3, which changes which LED lights up.

Communication with the board

The communication flow is:

User clicks a button → Browser sends a request → ESP32 processes it → LEDs respond based on logic + sensor input

The ESP32-C3 connects to my Wi-Fi network using the provided SSID and password. Once connected, it starts a web server that listens for incoming HTTP requests.

When I open the ESP32-C3’s IP address in a browser, it serves the UI. When a user clicks "Red" or "Blue", the browser sends a request to the server on the ESP32-C3 (/set?color=red or /set?color=blue).

The server receives the request and uses server.arg("color") to update the selectedColor variable. In the loop() function, the board checks whether the touch sensor is being touched. If not touched, it turns on the corresponding LED (red or blue) based on the selected color. If touched, it turns off both LEDs.


Breadboard

I connected the red LED to GPIO 5 the blue LED to GPIO 6 and the touch sensor output pin to GPIO 4. This was on an ESP32C3 microcontroller. This is the wiring I used for the breadboard.

This was the code I received from ChatGPT:

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

#define TOUCH_PIN 4         // TTP223 OUT pin
#define RED_LED_PIN 5
#define BLUE_LED_PIN 6

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

WebServer server(80);
String selectedColor = "red"; // Default color

void handleRoot() {
  String html = "<html><body><h2>LED Color Selector</h2>";
  html += "<p>Selected Color: <strong>" + selectedColor + "</strong></p>";
  html += "<button onclick=\"location.href='/set?color=red'\">Red</button> ";
  html += "<button onclick=\"location.href='/set?color=blue'\">Blue</button>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

void handleSetColor() {
  if (server.hasArg("color")) {
    selectedColor = server.arg("color");
  }
  server.sendHeader("Location", "/");
  server.send(303);
}

void setup() {
  Serial.begin(115200);
  pinMode(TOUCH_PIN, INPUT);           // Read digital signal from TTP223
  pinMode(RED_LED_PIN, OUTPUT);
  pinMode(BLUE_LED_PIN, OUTPUT);

  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi");

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

  Serial.println("\nConnected! IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/set", handleSetColor);
  server.begin();
}

void loop() {
  server.handleClient();

  bool isTouched = digitalRead(TOUCH_PIN) == LOW;  // TTP223 outputs LOW when touched

  if (isTouched) {
    if (selectedColor == "red") {
      digitalWrite(RED_LED_PIN, HIGH);
      digitalWrite(BLUE_LED_PIN, LOW);
    } else if (selectedColor == "blue") {
      digitalWrite(RED_LED_PIN, LOW);
      digitalWrite(BLUE_LED_PIN, HIGH);
    }
  } else {
    digitalWrite(RED_LED_PIN, LOW);
    digitalWrite(BLUE_LED_PIN, LOW);
  }

  delay(100);
}

in the "______" part of the code, one should type in the SSID and Password associated with their own network.

I struggled for a long time to get the web server to work. Most of the tries were frustrating because it would indicate that the code compiled and uploaded, but when I went to serial monitor, I would just get a lot of dots that show it's trying to make a connection, but failing. Like this:

Connecting to WiFi..........................

What I was supposed to see is something like this:

Connecting to WiFi....
Connected! IP address:
192.168.1.123

where the IP address, when entered into a browser, shows a webpage with my two buttons.

I would get suggestions to double check my SSID and Password for case-sensitivity, but I knew I had it right. At some point, I asked Angel to help me troubleshoot, and she figured out the issue pretty much immediately. I needed an antenna for WiFi connection. Once I got the antenna attached, it was smooth sailing and my breadboard worked.

Here is a video of my Breadboard working. As you can see, "red" or "blue" toggles between LED colors and the touch sensor controls whether the LEDs are powered or not.

This is a better view of the buttons on the webpage.


PCB

I then began designing the board in KiCAD.

I milled out the PCB and soldered the components on.

When I powered the microcontroller, it worked immediately.


Group Assignment

This week's group assignment was to compare as many tool options as possible. You can find our documentation for this here.


Individual Contribution

Tool: a software environment, library, framework, or platform that helps developers build, connect, and control interactions between hardware, software, and users. In terms of interface and application programming, it could send data over networks.


Basic Comparison Table

Tool Type Language Use Platform
Arduino IDE Embedded programming C/C++ Controlling sensors, motors Microcontrollers
Processing Visual programming Java-like Interactive graphics and data visualization Desktop
p5.js Creative coding JavaScript Visualizations and sound Browser
Flask Web framework Python Simple web apps Desktop/server

Tool Summaries

Arduino IDE

A development environment for programming microcontrollers, especially Arduino boards.

Pros Cons
easy access to libraries limited debugging featuers
real-time hardware control lower-level coding required

Processing

Processing is designed for those who want to create visual or interactive programs without needing deep programming knowledge. It’s great for prototyping and experimenting with visual output.

Pros Cons
easy syntax not very polished results
real-time graphics not ideal hardware control

p5.js

p5.js is the JavaScript version of Processing, meant for the web. It allows users to create interactive graphics, animations, and sound-based applications that run in a browser.

Pros Cons
Web-native and accessible without installs limited performance for complex tasks
supports multimedia browser restrictions

Flask

Flask is a Python web framework ideal for small applications, APIs, and dashboards. It’s especially good for integrating hardware projects (like on a Raspberry Pi) with a local web interface.

Pros Cons
lightweight and flexible not suited for large-scale apps without more tools

Overview

This week was a learning experience for me. I’ve only done interfacing once before, so working through this week’s assignment was still a challenge. One of the biggest issues I ran into was getting the ESP32-C3 to connect to Wi-Fi. Even though the code compiled and uploaded fine, the device couldn’t connect. I spent a long time troubleshooting, checking my SSID and password over and over, and scanning forums. But what I realized I needed was an antenna. I have also gained confidence in debugging both hardware and software issues.

Even though my code was ChatGPT generated, I had ChatGPT break down the code for me, so I ended up learning what certain parts meant and did such as the server.arg("color") to update the selectedColor variable and the handleRoot() function with HTML to serve the webpage.


Files

Design:

Print:



Last update: May 31, 2025