Interface and Application Programming

Group Assignment

As a group we compared as many interface tool options as we could, like a plain web page with a backend, Processing, Python and phone app builders, looking at how easy each is to install and how directly it reaches a board we made. The results are on our group page: group assignment page. I chose a web page with a Python Flask backend because it is simple and runs in any browser.

Individual assignment

write an application that interfaces a user with an Input or output device that you made

Summary

This week, I built a simple web application to control an LED using a microcontroller. I made an html page with ON and OFF buttons, and used Python Flask to send commands to the microcontroller through a serial connection. this project showed me how a user can control hardware using a web interface

Interface design for web-controlled LED systems focuses on creating a simple webpage with ON and OFF buttons

Next, I created an HTML page for the interface, including ON and OFF buttons to control the LED through a web browser

Using Python Flask, I created a lightweight web server that enables communication between the frontend interface and the microcontroller. It responds to ON and OFF routes by sending serial instructions to the LED system

The following code implements the Flask backend for LED control

from flask import Flask, render_template, redirect
import serial
import time
import os

app = Flask(__name__)

arduino = serial.Serial(os.environ.get('LED_SERIAL_PORT', 'COM10'), 9600, timeout=1)
time.sleep(2)


@app.route('/')
def home():
    return render_template('index.html')


@app.route('/on', methods=['POST'])
def led_on():
    arduino.write(b'ON\n')
    return redirect('/')


@app.route('/off', methods=['POST'])
def led_off():
    arduino.write(b'OFF\n')
    return redirect('/')


if __name__ == '__main__':
    app.run()

I tested the LED

Before running the code, I tested the LED on the Arduino to confirm that the hardware was working correctly

Arduino ide

I wrote an Arduino program to control the LED using simple commands. Then I tested it in the Serial Monitor by typing the commands to see if the LED worked

arduino code

#define LED_PIN D1

void setup() {
  Serial.begin(9600);
  pinMode(LED_PIN, OUTPUT);
  Serial.println("Ready and waiting for commands...");
}

void loop() {
  if (Serial.available() > 0) {
    String command = Serial.readStringUntil('\n');
    command.trim();
    Serial.print("Received command: ");
    Serial.println(command);

    if (command == "ON") {
      digitalWrite(LED_PIN, HIGH);
      Serial.println("LED turned ON");
    } else if (command == "OFF") {
      digitalWrite(LED_PIN, LOW);
      Serial.println("LED turned OFF");
    } else {
      Serial.println("Unknown command");
    }
  }
}

I run the code to test the LED control system

Since Python was already installed, I installed the Flask and pyserial libraries to run the code successfully.

Connect the microcontroller to the computer via USB and verify the correct port for example COM10, then run the Flask application.

The LED worked correctly using the ON and OFF buttons

Reproducing the application

I place the HTML in templates/index.html beside app.py, because that is the path requested by render_template. I install Flask and pyserial, upload the LED firmware, close Serial Monitor and set LED_SERIAL_PORT to the board port before starting the server.

The browser posts to /on or /off. Flask sends ON\n or OFF\n at 9600 baud. The firmware reads one line, trims whitespace and switches D1. The redirect then returns the browser to the button page.

My computer runs the Flask server locally; the static Fab Academy website hosts the documentation and downloads. Clicking a downloaded HTML file directly does not start the server.

My fabricated board is documented in Week 6 and Week 8. I still need to identify its exact revision in the application test.

Files

Complete LED-control package (ZIP) · Setup instructions

app.py

index

arduino code