Week 14 - Interface and Application Programming

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)

Summary

This week, I explored interface and application programming by developing a Python-based application that communicates with an embedded board and a microcontroller to control an LED. On the frontend, I designed an HTML interface with simple ON and OFF buttons. The backend uses a Python Flask app that listens for button clicks and sends commands over a serial connection to the microcontroller, which runs an Arduino program to control the LED.
One of the key challenges I encountered was serial port access errors, where the port sometimes failed to connect. I solved this by improving the Python code with error handling and making sure no other program (like the Arduino IDE) was occupying the port.
Keep scrolling to see how I built this project step by step!

Arduino IDE

I started by writing an Arduino sketch that controls the LED based on serial commands (ON or OFF).
I first tested this directly using the Arduino IDE Serial Monitor, manually typing commands.

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");
                      }
                    }
                  }
            
          

Interface Design

Once the Arduino part was working, I moved on to designing the web interface.
I created a simple HTML page with two buttons: Turn ON and Turn OFF, styled with basic CSS.

Python Flask Backend

I used Flask to create a small web server that connects the frontend buttons to the microcontroller.
The Flask app listens for /led/on and /led/off routes, then sends the corresponding serial commands.

            
                  from flask import Flask, render_template, request, redirect, url_for
                  import serial
                  import serial.tools.list_ports
                  
                  app = Flask(__name__)
                  
                  COM_PORT = 'COM13'
                  
                  try:
                      ser = serial.Serial(COM_PORT, 9600, timeout=1)
                      print(f"Connected to {COM_PORT} successfully.")
                  except serial.SerialException as e:
                      ser = None
                      print(f"Failed to connect to {COM_PORT}: {e}")
                  
                  @app.route('/')     
                  def index():
                      return render_template('index.html')
                  
                  @app.route('/led/')
                  def led_control(action):
                      if ser is not None and ser.is_open:
                          try:
                              if action == 'on':
                                  ser.write(b'ON\n')
                                  print("Sent: ON")
                              elif action == 'off':
                                  ser.write(b'OFF\n')
                                  print("Sent: OFF")
                              else:
                                  print(f"Unknown action: {action}")
                          except Exception as e:
                              print(f"Error writing to serial: {e}")
                      else:
                          print("Serial port is not open or not connected.")
                      return redirect(url_for('index'))
                  
                  if __name__ == '__main__':
                      app.run(debug=True)
                  
            
          

How to run the code

Install the required Python libraries:
Flask and pyserial should be installed to run the code successfully.

              pip install flask pyserial
            

Connect your microcontroller via USB (check its port, e.g., COM13).
Run the Flask app:

              python app.py
            

Open your browser and go to: http://127.0.0.1:5000/

Final Result

After running the code, I got this result: Simply pressing ON or OFF buttons would turn the LED ON/OFF.

Challenges

Serial Port Access Errors

Sometimes, the Python script could not open the serial port because another program (like the Arduino IDE) was already using it.
Solution: Make sure to close the Serial Monitor or quit the Arduino IDE before running the Flask app.

Wrong COM Port

You must check that the COM port in the Python code matches your device’s actual port.
Solution: Use Device Manager (Windows) → Ports → check the listed COM number.

I am also working on the interface which connects the microcontroller to the frontend wirelessly and having more features.

Files

Front end: Index.html
Back end: app.py
Arduino Sketch: led_control.ino