Mirror, Mirror, on the Wall
Who is the fairest one of all?

-The Wicked Queen, Snow White

Build a magic mirror that inspires you to be your best self every morning.

A mirror hangs quietly on your wall. You walk up to check your image, and a special message appears in the glass just for you. Once you've read the message, it slowly fades away, leaving a clear, ordinary mirror. Did that really happen?

This project uses a Sparkle Motion ESP32 board, NeoPixels LED lights, and a motion (passive infrared or PIR) sensor to make glowing messages appear inside a mirror. The magical effect is done using 2-way mirror glass (or acrylic) covering a piece of edge-lit acrylic that has been etched with quotes, icons, math equations, and anything else you want to be inspired by when you look at your reflection. When the PIR sensor is triggered by someone walking up to the mirror, a random quote (or mustache) will appear for a moment before fading away. 

This is an intermediate level project that gets pretty deep into the features of software called WLED. We'll learn to set up the PIR sensor and delve into using segments to turn on just a small portion of our LED strip at a time. We'll also learn to randomize the WLED playlist when it's triggered by the sensor, so a different quote appears each time.

Parts

Additional Materials Needed

• 2-way mirror: glass or acrylic
• 1/8" - 1/4" acrylic for laser-etching
• A mirror frame
• PVC tape
• Flat black spray paint

Tools Needed

• Laser cutter for etching acrylic
• Soldering iron & accessories
• Tiny flat-head screwdriver for the screw terminals on the Sparkle Motion and the PIR sensor
• Drill with a spade bit for the PIR sensor lens (optional)

I started with an ornate antique mirror I found in a junk shop. I opened up the back and removed the existing 1/4" piece of mirror glass. This left just enough room for two 1/8" pieces of acrylic without compromising the integrity of the frame by trying to squeeze in more layers.

2-Way Mirrors

How They Work 

A 2-way mirror, also (confusingly) called a 1-way mirror, has a semi-transparent reflective film applied that shows viewers on one side their reflection, while viewers on the other side can see through the glass. The transparent / reflective surface changes based on the level of light on each side. We can play with this effect by turning lights on and off behind the mirror to make glowing things "appear". 

Where to Get It 

2-way mirror glass or acrylic can be purchased online, or it's also possible to get 2-way film and install it yourself on a piece of glass or acrylic. This gives a pretty good result for the money, but was a bit tricky to get "right". An air bubble or speck of dirt trapped under the film will warp the image, and I found I couldn't get it nearly as clear as a real mirror in terms of reflection. It is definitely a more affordable option, but if you want perfect clarity get yourself a 2-way mirror that was made by the pros. 

I went with 1/8" thick since it's much less expensive and totally workable for this project, even for a full-length mirror. 1/8" acrylic can warp, so if your mirror is frameless, you might want to consider the thicker stuff. Remember you also need to squeeze your edge-lit acrylic in the frame too.

If you want to DIY, there are a lot of options for 1-way or 2-way mirror film online. Look for a source that's a bit wider than your project. Some come with installation tools too, so shop around.

Edge-Lit Etched Acrylic

Type

Acrylic sheets can be cast or extruded. Cast acrylic works better than extruded acrylic for carrying light. There's also a product called ChemCast, which is an acrylic sheet that's designed specifically for edge-lit signs. In my experience, at least for smaller projects, the regular cast acrylic works just as well and is less expensive. 

Thickness

1/4" thick acrylic will carry light a lot better than 1/8". I found that the 1/8" stuff was sufficient for my 22" wide mirror, especially if I lit both edges.

Layout

The etched acrylic will hide behind the 2-way mirror, inside a frame to block any stray light from "leaking" into the edges. When it's dark all around, the etched acrylic completely disappears. 

Each laser-etched message should be on its own line, with at least a couple inches of space between them. The plan is to light up only the LEDs aligned with each message so the viewer sees just one message at a time.

This was my plan, at least. In prototyping, I discovered that having a curvy frame around my mirror gave me a problem: the lights were placed on a curve, so they didn't shoot "straight" into the words. The lights would illuminate the message, but also bleed into the messages above or below. I fixed this problem by cutting the sections apart on the laser, and sealing the edges with black tape. More about this on the Laser Etched Acrylic page.

To work with the thin 1/8" acrylic sheet, I decided to use ultra-skinny NeoPixel lights. They're about 1/8" wide and 150 pixels per meter, and they fit delightfully well on the edge of my acrylic without adding thickness or extra space inside the frame.

They are WICKED hard to solder or connect end-to-end. I used two strips, one for each side of the mirror, and connected both to my Sparkle Motion using JST connectors soldered to the pre-attached wires. This worked great and saved me from some tricky soldering.

If you need a more custom setup and/or are new to soldering, try the Mini-skinny NeoPixels instead. 

Message Layout

I have 14 separate areas that illuminate on my mirror. I'm counting the math equations at the top as one -- the curves up there along the edge of the mirror made it impossible to light them separately. 

This means I had to create 14 different light segments in WLED to light each message individually. 

This is ambitious, but doable in WLED. With an ESP32, WLED will support up to 32 segments -- so limit your design accordingly.

My mirror is on the bigger side ( >22" across) so I added an LED strip on each edge. For a smaller mirror or 1/4" etched acrylic instead of 1/8", one high-density strip along one side is sufficient.

Use the screw terminals for the LED strip (or strips) and for the power and ground wires coming from the PIR sensor. Connect the +5v wires to + and the GND wires to G. 

The data IN wire from the NeoPixel strip goes to the numbered GPIO pin (19, 21, or 22) in the screw terminal.

The data wire from the PIR sensor gets soldered to GPIO 18, as shown in the diagram above. Don't use the GPIO pins in the screw terminal for this -- they are output only and won't read input data from a sensor.

This page will guide you through how to install WLED on the Sparkle Motion.

The Sparkle Motion has a USB to serial chip which may need a driver installed before you can install WLED. Head over to the How to Install Drivers for WCH USB to Serial Chips tutorial, and download and install the new driver.

Install WLED

These next steps require a Web Serial-compatible browser. As of this writing, that means Google Chrome, Microsoft Edge or Opera “desktop” browsers. Other browsers (Safari, Firefox, Explorer and anything mobile) won’t work.

Setup & Preferences

Use It

Now you can use any computer or handheld device to control your LEDs. 

Make sure your device is on the same WiFi network as your board. Navigate to your custom URL (projectname.local/ ) in a web browser. You'll see a color picker above a whole bunch of color palette choices.

Choose a color, choose an effect, and watch your lights animate and glow!

Save your favorite combinations as presets, create playlists, control the speed and intensity of the animations, and lots more. This web app is incredibly intuitive and easy to use.

Head over to the WLED wiki at https://kno.wled.ge/ to delve into all the particulars.

Troubleshooting

If your lights didn't come on, here are a few things to try:

1. Head back to WLED and check your pinout configuration under LED Preferences. Be sure the pin number is the correct GPIO for the attachment point you used.
2. Check your wiring! Be sure you connected to the IN end of the LED strip. These strips can be inconsistent so this is a pretty common problem. Use an alligator clip to try connecting the data wire on the other end (the power and ground wires should work from either end).
3. Try re-uploading the WLED software. 
4. If the lights come on but you can't control them: i.e. you type in "projectname.local" into your browser and it won't connect, make sure you're on the correct WiFi network. If you're on a different network than the one you set up the sofware on, you won't see the WLED connection.
5. If your lights came on in blue or green instead of yellow, your color order is wrong. See below to fix.
6. If only half your lights came on, be sure you've got the correct number in the "length" field under LED preferences.
7. If your lights came on in a variety of weird colors and looking like a 1950s diner interior, you may have the wrong LED strip type selected. RGBW strips and RGB strips are not the same, so be sure you've got the correct strip type or you'll get very odd behavior.
8. If your microcontroller hangs or keeps rebooting, or gets really hot, you may have the power and ground lines switched. Unplug right away and check: this is a fast way to brick your controller.

Plug in your Sparkle Motion board. A test / rainbow sequence will appear on your light strands if you've got everything wired up correctly. 

Troubleshooting

If your light strands don't come on, here are a few things to try:

1. Check to be sure your connectors aren't cross-wired due to mismatched color coding.
2. Be sure you've soldered to the IN end of the strip. Look for the tiny arrow: this is the direction of data flow. The strips don't work if you solder to the OUT end.
3. If your ultra-skinny strip is coiled up, try straightening it out. These strips are unshielded and can short easily.
4. Check your connectors' connection to the screw terminals. These connectors have skinny wires inside that can break easily, and the connector wires will snap off if they're wiggled around too much.
5. Head to the Install WLED page and work through getting the software installed. If you've installed anything else on the board, it may no longer have the test code loaded.

PIR Sensor Setup

For my design, I chose quotes from Tolkien, Rumi, Einstein and Star Wars to adorn my mirror, as well as "Beautiful Mind"-style mathematical equations. I also threw in a curly moustache, just for fun. I'll be looking at this in the morning and I love having affirmations and inspiration to start off my day.

I started by snapping a picture of the original mirror glass to get the correct shape. I used Adobe Illustrator to trace the outline and convert it to a vector file, though you can do this directly in Lightburn laser software as well.

For the text, I found a font I liked and laid everything out all centered and pretty. The first time I took it into Lightburn the font did not come through -- all the text just showed up in Arial and the Makerspace computer didn't have this font (called Luminari).

There is a setting in Illustrator that can fix this: select all the text and choose "Create Outlines" under the Type menu. This will turn your text into vector graphics so you don't need to install any more fonts.

Save/export as an .stl file.

 

Once the design was done, I realized that the laser at my makerspace was not big enough to fit my entire mirror. I ended up using the CNC router to cut the outlines and then had to cut the acrylic in half in order to get the laser etching done. Check your tools' limitations before you embark on this journey!

• Engraving: This is a physical process that removes material to create a permanent marking. In LightBurn, this is achieved with settings that are more forceful, resulting in a deep and physical mark.
• Etching: This involves using high heat to discolor or melt the micro-surface, which can create a raised effect or mark without significant material removal. The specific settings depend on the material, but generally involve a careful balance of heat and speed to achieve a specific surface change.

For the top half, I used laser settings that did etching. It was a very light pass and the acrylic still feels smooth.

For the bottom half I used settings that did engraving. The cuts are a bit deeper -- I can feel them when I run my hands over the surface. 

Light Bleed

I attached my lights to the acrylic, then had to take them off again because my light was bleeding all over the place. These are delicate lights, so try to contain yourself and read through this section -- it may save you from breaking your light strand.

Attach the Lights

For my mirror, I needed lights along one edge at the top, where the quotes don't go all the way across and where I used laser etching instead of engraving.

At the bottom with the deeper engraved quotes that span the width of the mirror I ended up using a second strip on the other side. This made the mapping a little bit tricker, but also gives me the option to have 2 colors shining at the quote so I get a beautiful gradient effect.

For this project, we want to light up specific LEDs in specific colors, instead of lighting the whole strip at once. This will allow us to show one message at a time. In WLED, this is done using Segments.

Save your Segments

Once your segments are all set up and saved in your All Segments preset, it's time to make individual presets that light up each segment in the color and animation mode you like best.

WLED Presets are a way to "save" your favorite effect-and-color modes. They also accept JSON code, so you can use them to do things like turn the lights all on or off, string together multiple presets (make a playlist), create custom modes and much more. Here's the WLED Presets Knowlege Base page -- check it out to learn more.

Select the "Apply at Boot" checkbox on the preset you'd like to appear when the project is powered up.

Keep the "Save Segment Bounds" checkbox checked but do NOT check the "Checked Segments Only" box in this case. We want to save the state of ALL the segments -- the ones that are off need to stay off, and checking this box will ignore the state of the non-checked segments so you may end up with two messages on at the same time.

Finally, we'll make a playlist that we can trigger using our motion sensor. A playlist is a listing of presets that allows us to set a duration and an order for our presets and have them auto-play.

We can also "shuffle" the playlist in order to get a (pseudo) random order. On the next page we'll set up the motion sensor to trigger this playlist.

Time to test it out! Wave your hand in front of the PIR sensor and one of your messages should appear. After a few seconds with no movement it will fade out, leaving a blank mirror until you move again.

Troubleshooting

If it's not working, or you're getting erratic results, here are a few things to try:

If you're getting no response from the PIR sensor:

1. Make sure it's wired correctly. The red wire coming from the connector should be lined up with the +5v pin and the black wire should be going to G.
2. On the Sparkle Motion, be sure the red wire is going to +, black is G, and the yellow wire is soldered to pin 18. Inserting it into the screw terminal or using one of the Stemma ports won't work.
3. Use a multimeter to be sure the sensor is working. Check the DC voltage between power and G pins (should be 5v) and between power and data pins (should be 3.3v when the sensor is triggered, 0 when it's not being triggered).
4. Try setting up the button to trigger just one preset instead of your playlist and see if that works.

If the sensor works and triggers modes, but the behavior seems inconsistent:

1. Adjust the Duration of each preset in your playlist. It needs to be longer than the sensor's trigger time.
2. Adjust the trigger time of the sensor by turning the "Time" screw. It's very sensitive so just turn it a tiny bit until you get the results you want.
3. Adjust the sensitivity of the sensor with the other screw.
4. Double check that the jumper on your sensor is in position 2 (right-most pins) rather than position 1. 

If you're getting multiple quotes lighting at once:

1. Recreate the preset: Turn off any segments you don't want on with the segment power button, then click the "overwrite with state" button on the preset and click save.
2. Be sure the "Checked Segments Only" button is unchecked as you create your presets.