Week 13
Interface and Application Programming
Interface
Assignment: write an application that interfaces a user with an input &/or output device that you made
This week, I plan to build upon the simple Flask app I set up last week for networking. This will create a UI where a user can enter text on a webpage, which will then be displayed on the OLED connected to a xiao esp32-c3.
server.py:
from flask import Flask, request, jsonify, render_template
app = Flask(__name__)
current_message = "Hello, OLED!"
@app.route('/')
def home():
return render_template('index.html')
@app.route('/set_message', methods=['POST'])
def set_message():
global current_message
# get message from form
message = request.form.get('message')
if message:
current_message = message
return jsonify({"status": "Message updated!", "message": current_message})
@app.route('/get_message', methods=['GET'])
def get_message():
# return current message
return jsonify({"message": current_message})
if __name__ == '__main__':
app.run(host='0.0.0.0', port=8080)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OLED Text Input</title>
</head>
<body>
<h1>Send Text to the OLED</h1>
<form action="/set_message" method="post">
<label for="message">Message:</label>
<input type="text" id="message" name="message" required>
<button type="submit">Send</button>
</form>
</body>
</html>
Then, I updated the code on the xiao esp32-c3 to display the message on the OLED:
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <WiFi.h>
#include <HTTPClient.h>
const char* ssid = "XXX"; // "Your_SSID";
const char* password = "XXX"; // Your_PASSWORD;
const char* serverURL = "XXX";
// OLED
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
void setup() {
Serial.begin(115200);
// init OLED
if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println("OLED initialization failed!");
while (true);
}
display.clearDisplay();
display.setTextSize(2);
display.setTextColor(SSD1306_WHITE);
display.setCursor(0, 0);
display.print("Connecting...");
display.display();
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to Wi-Fi...");
}
Serial.println("Connected to Wi-Fi");
display.clearDisplay();
display.setCursor(0, 0);
display.print("Wi-Fi");
display.setCursor(0, 30);
display.print("Connected");
display.display();
delay(2000);
}
void loop() {
if (WiFi.status() == WL_CONNECTED) {
HTTPClient http;
// GET request to Flask server
http.begin(serverURL);
int httpResponseCode = http.GET();
if (httpResponseCode == 200) {
String payload = http.getString();
Serial.println("Response:");
Serial.println(payload);
// extract the message from response
int start = payload.indexOf(":\"") + 2;
int end = payload.indexOf("\"}");
String message = payload.substring(start, end);
// display on oled
display.clearDisplay();
display.setCursor(0, 0);
display.setTextSize(1);
display.print("Message:");
display.setCursor(0, 20);
display.setTextSize(2);
display.print(message);
display.display();
} else {
Serial.println("Error on HTTP request");
displayErrorMessage("HTTP Error");
}
http.end();
} else {
Serial.println("Wi-Fi disconnected");
displayErrorMessage("Wi-Fi Lost");
}
delay(3000);
}
void displayErrorMessage(const char* errorMsg) {
display.clearDisplay();
display.setCursor(0, 0);
display.setTextSize(1);
display.print("Error:");
display.setCursor(0, 20);
display.setTextSize(2);
display.print(errorMsg);
display.display();
delay(2000);
}
This gave me a working application that interfaces a user with the output device, sending their message to be displayed on the OLED: