Final Project¶

Files¶

Bill of Materials (Subject to Change)¶

Items #	Descriptions	Vendor	Quantity	Cost	Link
1	IR LEDS and IR RECEIVERS	Amazon	2	8.88	Link
2	Raspberry Pi 3 B+	Amazon	1	44.8	Link
3	2-Way Mirror 12X12	Amazon	1	29.99	Link
4	Upgraded Version 7’’ Raspberry Pi Screen	Amazon	1	37.99	Link

Gantt Chart¶

Tutorials¶

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

System Integration¶

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

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

System Integration¶

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

Final Project Idea¶

My final project is a touch screen magic mirror. In my drawing the image on the left is an IR Frame. I had a test idea that I created in Electrical Engineering class. The idea is to use IR recievers and IR leds. The leds send a signal to the other side full of recievers. The four sides togeth create a matrix grid that with calculate where ur finger is and when you press down on the screen, it turns it touch screen. I’m still deciding if i want to use a CIA sensor, the sensor inside a printer, or the recievers. In class I used the recievers and it worked but I don’t know how accurate tat will be.

Then for the screen part, just likeany magic mirror, I will us a PC screen behind a double sided mirror. My goal for this project is to make it touch screen and to be able to listen to music and watch movies. If I have extra time, I would like to be able to connect my phone with bluetooth as well. Since I want to beable to have sound, I will be using speakers.

Finally, I’m going to create a frame to cover up the IR Frame that will be CNC out of wood and then painted to look more pretty and to cover the wires that may be hanging out.

Why CIS Sensor?¶

A CIS sensor, is in most scanner. In those devices, it’s basically a black and white camera which reads only one line of pixels. To scan a color document, a RGB LED blink in the three colors and the CIS reads all of them for every line of the document. Then it can calculate the exact colors depending of the Red Green and Blue reaction.

Using a CIS sensor gives you access to 2700 light sensors on a 20cm line. Most people who take sensors and actuators from an old printer/scanners only take the RGB LED and the light conductor from this part.

For my project, I will be using one CIS sensor with 24 IR LEDs. The object is detected on a surface by a Teensy board. This board turns the IR LED ON, reads the CIS and calculates the exact position of an object. Then it sends the coordinates as a mouse, a keyboard, a Python program or just as Serial on a Raspberry Pi.

Electrical Engineering Capstone Project¶

The link to all the documenting can be found here.

The first step to this was to find a tutorial that would help me. Unfortunetly, the CIS sensor wasn’t coming in time before the sure date, there for I had to improvise. I found IR reviever LEDs and compiled enought reasearch to come to a conclusion that they will act the same. Below is a video of me getting the IR LED and Reciever to work together.

The next step was to create the item that I was going to be comtrolling. I didn’t have a screen yet, there fore I improvided again and did more reasearch. This led me in the direction to use matric and where ever the finger is, that LED turns on. Below is a video of me testing the matrix once I finished soldering.

Then I put the two together and got something that ended up like this video. As you can see, when ever I hacve my LED across the sensors, the LED turns off which is a good sign. I didn’t get ot finish this project but it definitely helped me set up for my fab project.

2D and 3D Modeling¶

For the final project designing, I designed an outline in Fusion360. The wood outside is a wooded frame thats going to be going around the sensors, LED and wires behind those. The inside is the mirror. That is going to be a two way mirror thats going to reflect the screen. The container at the bottom it where I am playing to put my board that I create.

Setting Up Magic Mirror¶

Beofre I could continue with anything else in this project, I needed to set up the magic mirror. This is because I plan on using the doppler radar to turn on the mirror. But I cant have it do that before setting up the mirror. To set up the Magic Mirro the first thing was to set up the rasberry pi.

Setting Up Rasberry Pi¶

For this project I will be using a Rasberry Pi 4 Model B. To set it up I followed this tutorial.

The first step was to download the Rasberry Pi Imager. I used that link to download it and downloaded the newest version of it. It took me through a few different steps and I clicked Ok in everyone.

Then I needed to plug the SD card into my computer and flash it using the imager. To do this I chose my divice first which is the Rasberry Pi 4. Then the next step is the Operating System. There is a recommended one based on the device you chouse. I recommend using that if you aren’t sure but mine was the Rasberry Pi OS(64-BIT). Finally the last section was the storage. I was using a SD card therefore, thats the option that I chose.

Once I finished setting up those I clicked next, and and it brought me to the following page. This is where you set up the wifi for your rasberry pi and the username and password to use it. The user name will be used in the terminal. The SSID is the name of the wifi you are using and the pasword it the password of the wifi. It is also important to set up the time zone and the keyboard layout.

After that I clicked save and then it moved on to the writing. This took a very long to do.

Once the writing was done, then I could remove the SD card from the reader, and then added it into my rasberry pi.

Downloading Magic Mirror¶

The downloading of the Magic Mirror was very simple yet it was alot of sets. I found the download and steps at this website.

Downloading Node¶

The hardest part was for me to download the Node. To fix this I looked up another way with help from chatGPT.

sudo apt update && sudo apt upgrade -y

This is my first command in order to download. Unfortunetly I wasn’t able to get screenshots of any of this happening because you can’t take screenshots on Rasberry Pi 4.

sudo apt install -y nodejs npm

After the first command was entered in and it was compleated, then I entered in this one

node -v
npm -v

The final command is the following one. Both of those should be entered at the same time just like it is above.

Checking for Git¶

git

The rest of the steps were the same as what the website says. This is the command to check for the Git. If it is there than is should show the version. If it’s not there, then the website says to install it but I didn’t need to do that.

Clone the Repository¶

git clone https://github.com/MagicMirrorOrg/MagicMirror

This is the command to clone a git.

Repository¶

cd MagicMirror

This command navigates the terminal to the ~/MagicMirror directory. Under thisis where the Node is.

Install Application¶

npm run install-mm

This command will take a very long time, often with little or no terminal response. It’s important to not interrupt the process or there is a risk of a Rasberry Pi jam.

Copy of Config File¶

cp config/config.js.sample config/config.js

Start the Application¶

npm run start

This is the command to start the application that you just created. If you are using a Server Only person than the command will be the following below.

npm run server

After all of those steps were finished. My Magic Mirror screen flashed and it looked like the photo below. The turning on was a very long process and I had to re do things many times so when the Magic Mirror came on the screen I was very excited.

This is a picture I took as I was working and what it will look like.

This is a picture of the Magic Mirror working. THe next thing I want to do with it is fix the code to not say “Hi Sexy!” but instead “Hello Elle”. I think that is more appropiate for my project.

Adding Spotify to Magic Mirror¶

The next step I wanted was spotify on my Magic Mirror. I wante this so I could learn how to edit and add modules and also to add buttons to touch for touch screen. To do this I did the following commands.

Adding to Magic Mirror Modules¶

To enter the modules of the magic mirror I entered in this commend:

cd ~/MagicMirror/modules

Once I was in the modules I did the following command which would clone te git. I tried to clone many different types of gits but many of them required a username and password and I dont have that therefore I went with the basic spotify.

git clone https://github.com/raywo/MMM-NowPlayingOnSpotify.git

After cloning the git, I needed to install the despensories therefore I switched to the git I just downloaded using this:

cd MMM-NowPlayingOnSpotify

Then afte that I began to install:

npm install

As it was installing I began with the next steps.

Create Spotify Developer¶

The next step was to create app so then the reasberry pi has the login in to my spotify accound. I went to this link. Once I was in this link I went to the top right and loged in with my spotify account.

Once you logged in, you needed to go to the dashboard under you account. Once you click on dash board there will be a button for making a app.

After you click on that, then it will look like the image above.

http://127.0.0.1:8888/callback

This is the redirect URI that I used.

Fill out the other information as you want. At the end there is a question that is “Which API/SDKs are you planning to use?”. For that question you dont need to click anything but I did Web API.

Afte that you would be given a Client ID and Client Secret. Keep these open because you will need them later. The next step was to run the module’s “authorization app”:

cd authorization

node app

Then open http://127.0.0.1:8888 in a browser, log in to Spotify via your app, allow access — you’ll receive codes (access token + refresh token) to use. Once you receiver those, the next step was to edit your MagicMirror config:

sudo nano ~/MagicMirror/config/config.js

Add inside the modules: [ … ] you past what the website gave you. It may look something like this:

{
  module: "MMM-NowPlayingOnSpotify",
  position: "bottom_center",
  config: {
    clientID: "YOUR_CLIENT_ID_HERE",
    clientSecret: "YOUR_CLIENT_SECRET_HERE",
    accessToken: "YOUR_ACCESS_TOKEN_HERE",
    refreshToken: "YOUR_REFRESH_TOKEN_HERE",
    showCoverArt: true,
    updatesEvery: 1
  }
}

Then to can to save config (Ctrl+O → Enter), exit (Ctrl+X).

Running Magic Mirror With Spotify¶

cd ~/MagicMirror

npm start

Once you run those it should look like this:

Adding IR Receivers and IR Transmitters¶

The next step to my project was make the touch part come together. To do this I used my week 11 nad my week 15 documenting to help with this. I took what I learned in week 11 with a flask and through a web page and did the same thing but with my IR receivers and IR transmitters.

Code for Seeed Xiao Esp32C3¶

#include <WiFi.h>
#include <HTTPClient.h>

// WiFi Configuration
const char* WIFI_SSID = "YOUR_WIFI_SSID";         
const char* WIFI_PASSWORD = "YOUR_WIFI_PASSWORD"; 

// Raspberry Pi Server Configuration
const char* RASPBERRY_PI_IP = "192.168.1.100";  // Replace with your Pi IP
const int SERVER_PORT = 5000;                    

// IR Receiver Pin
const int IR_PIN = D0;  

// Debounce
unsigned long lastTriggerTime = 0;
const unsigned long DEBOUNCE_TIME = 500; // milliseconds

void setup() {
  Serial.begin(115200);
  delay(1000);

  pinMode(IR_PIN, INPUT); 

  // Connect to WiFi
  Serial.println("Connecting to WiFi...");
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi Connected!");
  Serial.print("IP: ");
  Serial.println(WiFi.localIP());

  // Test server
  testServerConnection();
}

void testServerConnection() {
  HTTPClient http;
  String url = "http://" + String(RASPBERRY_PI_IP) + ":" + String(SERVER_PORT) + "/test";
  http.begin(url);
  int httpCode = http.GET();
  if (httpCode > 0) Serial.println("Server connected!");
  else Serial.println("Connection failed.");
  http.end();
}

void triggerMirror() {
  HTTPClient http;
  String url = "http://" + String(RASPBERRY_PI_IP) + ":" + String(SERVER_PORT) + "/trigger";
  Serial.println("IR beam broken! Sending trigger...");
  http.begin(url);
  int httpCode = http.GET();
  if (httpCode > 0) Serial.println("Trigger sent!");
  else Serial.println("Failed to send trigger.");
  http.end();
}

void loop() {
  if (WiFi.status() != WL_CONNECTED) {
    WiFi.reconnect();
    delay(1000);
    return;
  }

  int irState = digitalRead(IR_PIN);
  unsigned long currentTime = millis();

  // Beam broken = LOW
  if (irState == LOW && (currentTime - lastTriggerTime > DEBOUNCE_TIME)) {
    triggerMirror();
    lastTriggerTime = currentTime;
  }

  delay(50);
}

I generated this in chat based on the code from my week 15.

Creating Flask¶

More information on the flack can be found on my week 11 but I followed the same steps.

Installing¶

sudo apt update

sudo apt install python3-pip

pip3 install flask

All of those I entered into terminal in order to install flask

Create flask folder¶

mkdir ~/magic_mirror_flask

cd ~/magic_mirror_flask

Creating App file¶

nano app.py

Then inside the app file paste this:

from flask import Flask
import os
import subprocess
import time

app = Flask(__name__)

mirror_running = False
last_trigger_time = 0
TRIGGER_COOLDOWN = 5  # seconds

@app.route('/test')
def test():
    return "Connection successful!"

@app.route('/trigger')
def trigger():
    global mirror_running, last_trigger_time
    current_time = time.time()

    # Prevent multiple triggers in cooldown period
    if current_time - last_trigger_time < TRIGGER_COOLDOWN:
        return "Please wait before triggering again."

    # Turn on the display
    os.system('vcgencmd display_power 1')

    # Start Magic Mirror if not running
    if not mirror_running:
        subprocess.Popen(
            "cd /home/pi/MagicMirror && npm run start",
            shell=True
        )
        mirror_running = True

    last_trigger_time = current_time
    return "Triggered Magic Mirror!"

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Run the Flask file¶

cd ~/magic_mirror_flask

python3 app.py

Now while the flask file is running it waits for the trigger to start the maggic mirror.

Video of Working¶

Making Frame¶

The final step in my project was making my frame. To do this I used Fusion360.

The first thing that I did was create ascetch of the base. The shorter side I made the width of my screen then the diagonals I wanted to be 1in and on a 45 degree angle. The last side I didn’t care what the length was because it just connected.

Then I used the extrude tool to make the shape 1 inches in depth. Which I then later had to add .2 in so I would actually make it 1.2 in.

Once I did that I used the shell tool to make the inside hollow. I did this for the wires that would be running through my frame. This way they would have a spot to go.

Then I made a scetch of the slot for the screen. I made the width .1in thicker than my screen width and I made it the length of my screen. The two extra part on the side are to make the angle cut. I did the math to figure out i needed .10 in on each side of extra length so a total of .2 in.

Then I did the same thing but for the mirror slot.

Finally I extruded the slots and that made one side. Then for the others I copied the same steps just either mirrored or js bigger.

This is what is looked like printed out.

And this is what it looked like on my magic mirror.

Last update: November 15, 2025