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: