Interface &
Application
Programming

To master this week's assignment, I had to understand how the Physical World (my custom board) talks to the Digital World (my computer application). This communication happens through three essential layers that must work in perfect harmony.

After experiencing limitations with my previous board's lack of networking capabilities in Week 11, I upgraded to the XIAO ESP32-C3 for Week 15. This microcontroller's integrated internet support provides the reliable connectivity my final project requires.

To connect my hardware with the digital interface, I structured the communication into three layers, ensuring a stable link between the XIAO ESP32C3 and my computer.

Technical Specs

For this week's assignment, I used the board made during Week 8: Electronics Production, which has serial communication pins enabled and an LED as output.

The board is configured to monitor the serial buffer for incoming data: an 'H' signal activates the GPIO pin, while an 'L' signal deactivates it.

// Week 15: Interface and Application Programming
// Board: XIAO ESP32-C3
// Component: LED on Pin D7

const int ledPin = D7;

void setup() {
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
}

void loop() {
  if (Serial.available() > 0) {
    char incomingByte = Serial.read();

    if (incomingByte == 'H') {
      digitalWrite(ledPin, HIGH);   // Turn LED ON
      Serial.println("LED turned ON");
    } 
    else if (incomingByte == 'L') {
      digitalWrite(ledPin, LOW);    // Turn LED OFF
      Serial.println("LED turned OFF");
    }
  }
}

This code uses the Tkinter library for the graphical interface and PySerial to establish a robust communication link with the XIAO ESP32-C3 microcontroller.

import tkinter as tk
from tkinter import ttk, messagebox
import serial
import serial.tools.list_ports


# --- Window Configuration ---
root = tk.Tk()
root.title("Micaela's Interface - ESP32 Control")
root.geometry("400x300")
root.configure(bg='#f0f0f0')

arduino = None

# --- Control Functions ---
def connect_board():
    global arduino
    port = port_selector.get()
    try:
        arduino = serial.Serial(port, 9600, timeout=1)
        status_label.config(text=f"Status: Connected to {port}", foreground="green")
        messagebox.showinfo("Success", f"Connected to {port} successfully!")
    except Exception as e:
        status_label.config(text="Status: Connection Failed", foreground="red")
        messagebox.showerror("Error", f"Could not connect: {e}")

def send_signal(state):
    if arduino and arduino.is_open:
        arduino.write(state.encode())
        print(f"Signal sent: {state}")
    else:
        messagebox.showwarning("Warning", "Please connect to a port first!")

# --- UI Elements ---
style = ttk.Style()
style.configure("TButton", padding=6, font=('Helvetica', 10))

title_label = tk.Label(root, text="XIAO ESP32-C3 LED Control",
                       font=('Helvetica', 14, 'bold'), bg='#f0f0f0')
title_label.pack(pady=15)

# Port Selector
frame_port = tk.Frame(root, bg='#f0f0f0')
frame_port.pack(pady=10)

tk.Label(frame_port, text="Select Port:", bg='#f0f0f0').grid(row=0, column=0, padx=5)
available_ports = [p.device for p in serial.tools.list_ports.comports()]
port_selector = ttk.Combobox(frame_port, values=available_ports, width=15)
port_selector.grid(row=0, column=1, padx=5)
if available_ports: port_selector.current(0)

btn_connect = ttk.Button(frame_port, text="Connect", command=connect_board)
btn_connect.grid(row=0, column=2, padx=5)

# Action Buttons
btn_frame = tk.Frame(root, bg='#f0f0f0')
btn_frame.pack(pady=20)

btn_on = tk.Button(btn_frame, text="TURN ON", bg="#4CAF50", fg="white",
                   font=('Helvetica', 10, 'bold'), width=12, height=2,
                   command=lambda: send_signal('H'))
btn_on.grid(row=0, column=0, padx=10)

btn_off = tk.Button(btn_frame, text="TURN OFF", bg="#F44336", fg="white",
                    font=('Helvetica', 10, 'bold'), width=12, height=2,
                    command=lambda: send_signal('L'))
btn_off.grid(row=0, column=1, padx=10)

# Status Label
status_label = ttk.Label(root, text="Status: Disconnected",
                         font=('Helvetica', 9, 'italic'))
status_label.pack(side="bottom", pady=10)

root.mainloop()

I implemented a port detection system using serial.tools.list_ports, allowing users to select the active COM port through a ttk.Combobox dropdown that auto-populates all available ports on launch.

The interface sends encoded bytes ('H' for ON, 'L' for OFF) via a 9600 baud serial connection to toggle the board's digital pins. The board echoes back a confirmation message visible in the Spyder console.

To ensure a robust, business-ready design, I added exception handling with visual pop-up alerts and clear color-coded buttons providing immediate visual feedback on connection status.