Skip to content

16. System Integration

  • Design and document the system integration for your final project

All the components in your project

  • Raspberry Pi
  • IR Receivers and IR Transmitters
  • Monitor or display
  • Flask server or frontend code
  • Node.js or MagicMirror² modules
  • Power supply

Hardware Connections

  • IR Transmitters (LEDs) → Raspberry Pi (via Resistors or Driver Board)

    • IR LEDs are placed along one sides of the mirror frame.
    • They emit invisible infrared light across the surface.
    • Each LED is powered through:
      • Seeed Xiao Esp32C3 3.3V
      • A current-limiting resistor

  • IR Receivers → Raspberry Pi GPIO Inputs

    • IR receivers are placed on the opposite sides of the mirror frame.
    • The IR beams go across the screen in an invisible “grid.”
    • When a finger breaks a beam:
      • The receiver’s signal changes from HIGH → LOW (or vice-versa)
      • This change is read by the Seeed Xiao Esp32C3 GPIO pins.

  • Touch Frame → Raspberry Pi

    • The combination of IR transmitters + IR receivers forms an IR touch matrix.
    • Each IR pair is connected to its own GPIO so the Pi can detect which beam is broken.

  • Monitor → Raspberry Pi HDMI

    • The HDMI cable carries the MagicMirror² interface.
    • The IR frame sits in front of the monitor.

Software Connections

  • GPIO Inputs → Python Touch-Detection Script
  • A Python program monitors all the receiver GPIO pins.

  • When a beam is broken:

    • The Magic Mirror turns on.
    • This gives an approximate “touch coordinate.”

  • Touch-Detection Script → Flask Server

    • When a touch is detected:
    • The Python script sends a request to the Flask server (for example: POST /touch with X/Y coordinates)
    • Flask receives the touch event.

  • Flask Server → MagicMirror² / System Actions

Packaging

For the frame I decided to 3D print. As you can see I have slots in the sides that are prefect fit for the mirror and screen.

Last update: November 15, 2025