14. Interface and Application Programming¶
Individual Assignment¶
- Write an application for the embedded board that you made that interfaces a user with an input and/or output device(s)
Web Server¶
For output week, one of my outputs was a LCD1602 screen, and for my final project, I thought it could be useful to connect this to a web server. I modified the code from Output Week and changed it to incorporate a web server. It uses I2C to communicate. I did not come across any problems when making this interface. My user interface is a web-based UI hosted on the Xiao ESP32-S3’s built-in web server. Its purpose is to enable wireless communication between the user and the LCD1602 screen used in my final project. By connecting through a browser, I can send custom messages to the screen without needing a physical connection, which makes the system more user-friendly and accessible. The UI communicates with the LCD via I2C, and the ESP32 handles incoming HTTP requests to update the screen in real time. This interface allows for quick iteration and testing, especially useful during development, presentations, or classroom use. It eliminates the need to re-upload code every time the message needs to change and introduces a flexible way to interact with the project remotely. The web UI is lightweight, loads quickly, and runs locally on the microcontroller, meaning it doesn’t rely on external servers or internet access. This integration of hardware and software enhances the interactivity of my project and showcases how embedded systems can be combined with web technologies to create responsive, user-focused applications.
This is the code I used:
#include <WiFi.h>
#include <WebServer.h>
#include <LiquidCrystal.h>
// LCD pin setup: LiquidCrystal(rs, en, d4, d5, d6, d7)
LiquidCrystal lcd(D2, D3, D6, D7, D8, D9);
// WiFi credentials
const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";
// Create a web server on port 80
WebServer server(80);
// HTML for the number buttons
String htmlPage = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<title>LCD Number Display</title>
<style>
body { font-family: sans-serif; text-align: center; padding: 40px; }
button {
font-size: 2rem; margin: 10px; padding: 20px 30px;
border-radius: 12px; background: #4CAF50; color: white;
border: none; cursor: pointer;
}
button:hover { background-color: #45a049; }
</style>
</head>
<body>
<h1>Send Number to LCD</h1>
%BUTTONS%
</body>
</html>
)rawliteral";
// Create number buttons dynamically
String createButtons() {
String buttons = "";
for (int i = 0; i <= 9; i++) {
buttons += "<a href=\"/send?num=" + String(i) + "\"><button>" + String(i) + "</button></a>\n";
}
return buttons;
}
// Serve homepage
void handleRoot() {
String fullPage = htmlPage;
fullPage.replace("%BUTTONS%", createButtons());
server.send(200, "text/html", fullPage);
}
// Handle number button press
void handleSend() {
if (server.hasArg("num")) {
String number = server.arg("num");
lcd.clear();
lcd.setCursor(0, 0);
lcd.print("Number pressed:");
lcd.setCursor(0, 1);
lcd.print(number);
Serial.println("Received number: " + number);
server.sendHeader("Location", "/", true);
server.send(302, "text/plain", "");
} else {
server.send(400, "text/plain", "No number received");
}
}
void setup() {
Serial.begin(115200);
lcd.begin(16, 2);
lcd.print("Connecting...");
// Connect to WiFi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\nConnected!");
Serial.println(WiFi.localIP());
lcd.clear();
lcd.print("IP:");
lcd.setCursor(0, 1);
lcd.print(WiFi.localIP());
// Define routes
server.on("/", handleRoot);
server.on("/send", handleSend);
server.begin();
}
void loop() {
server.handleClient();
}
I used my PCB from outputs week:
This is a video of my interface working:
Group Assignment¶
Our group assignment for this week was to compare as many tool options as possible.. I worked with Angel Fang this week. Here is a link to our group work for this week.
Reflection¶
This week was very easy for me with the help of ChatGPT. I am looking forward to improving my web server in the future for my final project. I learned a lot about various types of interfaces and expanded my programming skills.
Files¶
AI Help¶
Here are all my ChatGPT searches from Week 14: PDF