Introduction: How to Make a Magic Mirror

Picture of How to Make a Magic Mirror

In this project I will show you how I made a Magic Mirror that shows the date, time, some news and a little phrase at the bottom. You will use a Raspberry Pi, a computer screen and a webpage to make it look like you have "a smart mirror".

Everything on the mirror will be in Swedish (on the pictures), but I will translate what you need. I made this with a Raspberry Pi model B, but I will recommend that you use a Raspberry pi 2 or better. The first Raspberry Pi can't really handle the new OS Jessie when the screen is rotated and keep freezing and loosing internet connection. Make sure you are paying attention to if I write just "Raspberry Pi model B" or "Raspberry Pi 2 model B"!

What you need:

  • A computer screen (that you can take apart)
  • An observation mirror or glas and a mirrorfilm
  • A Raspberry Pi with casing + micro USB power cord
  • A SD-card (8GB)
  • A network adapter (for wifi, look at this link, not necessary for Raspberry Pi 3,)
  • Wood frame (boards, screw, glue, paint, drill)
  • HDMI-to-VGA-adapter (depending on if your screen has HDMI or not)
  • A mouse and a keyboard with USB
  • A second computer (for fixing OS and stuff)

Remember to don't take the measurements for the mirror until you have opened the screen. It will be smaller once the plastic is gone!

Also, when you get the screen, make sure that the contacts are on one of the sides and not straight back. If they are straight back, you might get a problem if you want to hang it on the wall later on.

I decided to do my own guide after having a lot of problems during my project, and I figured I could help other people who might end up with the same problems.

I followed these two guides:

http://michaelteeuw.nl/tagged/magicmirror (English, original creator)

http://pcforalla.idg.se/2.1054/1.601411/sa-bygger-... (Swedish)

Step 1: Configurations of the Raspberry

Picture of Configurations of the Raspberry

Put your SD-card in the computer and write down the letter (in my case [D:\]). Download Rasbian from raspberrypi.org/downloads. When the ZIP-file is extracted you need Win32 Disk Imager. You can download it at sourceforge.net/projects/win32diskimager/. Install and start it. Klick on the folder icon and browse to the folder where you have the Raspbian files. Make sure that the destination is the SD-card (in my case D:)

As you can see in the "Win32"-image, I'm using Raspbian Jessie.

When the write is successful, you just take the SD-card and put it in your Raspberry. Connect to the computer screen, add a mouse and keyboard, and start it.

In my case, I came directly to the desktop on start. To make the right configurations you need to open the terminal and enter "sudo raspi-config". In there, you are going to do three different things. First, "expand filesystem". Second, choose "Boot Options" and then choose to boot to Desctop GUI with the "pi" user. And third, choose "Internationalisation Options" and change to you own timeszone.

------------------------------------------------------------------------------------------------------------------------------------------------------

After a suggestion by Hansaplast in the comments, here is a link for people who uses Mac.

Mac users can use ApplePi-Baker to flash SD cards for RPI. http://www.tweaking4all.com/hardware/raspberry-pi...

Step 2: Updating, Wifi, Web Server and Screen Rotation

Picture of Updating, Wifi, Web Server and Screen Rotation

Now, it's time to make sure everything is updated.

Use the terminal again and type in "sudo apt-get update && apt-get upgrade -y", and sit back and relax.

When that is finished, you should create a web server. If you are used to servers and have done this before you can just type "sudo apt-get install apache2 apache2-doc apache2-utils" and "sudo apt-get install libapache2-mod-php5 php5 php-pear php5-xcache"

If you are not used to servers I recommend Raspberrys own webpage. Follow the instructions and there should be no problem, it's a really good guide.

https://www.raspberrypi.org/documentation/remote-a...

The images in this step is exactly what you should get if you've followed the guide correctly.

------------------------------------------------------------------------------------------------------------------------------------------------------

Here could be a good time to install the wifi. It could be done whenever you want basically during the project, but it's usually good to do in the beginning so you have one less cord to worry about.

Since there is so many different wifi modules, I'm just going to tell you too google it here. Use the name of the adapter and "Raspberry Pi install", and you shouldn't have any problems.

Here is again a list for the wifi-adapters that work for the different Pis.

------------------------------------------------------------------------------------------------------------------------------------------------------

We usually want our mirror to be higher rather then wider, so therefore we will rotate the screen!

Screen rotation is really simple! Just type "cd /boot" and then "sudo nano config.txt". Now, you should be in a textfile. Scroll aaaall the way to the bottom, and then add "display_rotate=1" in a new line. This will rotate your screen 90 degrees.

If you have a Raspberry Pi model B, then you should start scrolling up and look for the line "hdmi_force_hotplug=1" and uncomment that. I don't think this is necessary for a Raspberry Pi 2.

Save and exit. The screen will be rotated when you restart the Raspberry. (you can do this now or later)(if you get a black screen when you restart, don't panik! Look at the bottom of this step!)

I my case, I used "display_rotate=3", since my screen had two USB-ports on the side it would be standing on otherwise. So if your screen has a similar thing, you can use =3 without problems! This will rotate the screen 90 degrees in the other direction.

------------------------------------------------------------------------------------------------------------------------------------------------------

If you get a black screen and nothing happens even if you have waited forever, don't panik. Unplug the Raspberry, take the SD-card and plug it in to your computer. There you should see the "config"-file in the list. Open it and uncomment the line "hdmi_force_hotplug=1". If you have a Raspberry Pi model B, I recommend you to only restart after everything is done. The first Raspberry can't handle the screen rotation very well and will freeze repeatedly.

Step 3: Web Browser and Autostart

This is where I know things are starting to get a little different depending on what version of the Raspberry Pi you have. (if you are not used to the terminal, I will add a little guide at the bottom of this step).

If you can't change in the autostart file, you need to make yourself an owner. You do that in the exact same way as you did when you installed the web server. Go back to the guide if needed.

For Raspberry Pi 2 model B: (I'm not sure about Raspberry Pi 3)

You should use Chromium as your web browser. It's installed easy with the command "sudo apt-get install chromium x11-xserver-utils unclutter" in the terminal. To create autostart you should go to the file "/etc/xdg/lxsession/LXDE-pi/autostart". Comment out the third line and put the 4 extra lines in there. Save and exit.

@lxpanel –profile LXDE-pi

@pcmanfm –desctop –profile LXDE-pi

#@xscreensaver –no-splash

@xset s off

@xset -dpms

@xset s noblank

@chromium --kiosk --incognito http://localhost (the adress to your server)

------------------------------------------------------------------------------------------------------------------------------------------------------

I recieved a comment about Raspberry Pi 3 Model B

open the below file
sudo leafpad ~/.config/lxsession/LXDE-pi/autostart

and change to @pcmanfm –desctop –profile LXDE-pi #@xscreensaver –no-splash @xset s off @xset -dpms @xset s noblank @chromium-browser --kiosk --incognito http://localhost and save. Post this on reboot it will open the browser with the localhost as desired. Ensure you know how to open a terminal Ctrl+Alt+T , incase you need it post reboot :-)

-- thinknaive

------------------------------------------------------------------------------------------------------------------------------------------------------

For Raspberry Pi model B:
You should use Midori as your web browser. It's installed easy with the command "sudo apt-get install php5 midori unclutter" in the terminal. To create autostart you should go to the file "~/.config/lxsession/LXDE-pi/autostart". Comment out the third line and put the 4 extra lines in there. Save and exit.

@lxpanel –profile LXDE-pi

@pcmanfm –desctop –profile LXDE-pi

#@xscreensaver –no-splash

@xset s off

@xset –dpms

@xset s noblank

@midori –e Fullscreen –a http://localhost/ (the adress to your server)

------------------------------------------------------------------------------------------------------------------------------------------------------

I've received a comment that might help someone, so please read if you have a problem to change/save the autostart file.

EDITING ROOT FILES - when we ran into a problem being able to change/save the 'autostart' file in Step 3, we ended up doing it with the Nano editor which runs in terminal. From terminal, we entered sudo nano /etc/xdg/lxsession/LXDE-pi/autostart This opened the file, we made the edits then exited and saved. Hope this helps others. - MsMacD

------------------------------------------------------------------------------------------------------------------------------------------------------

Remember:

–help-execute will list all available commands (at least in Midori)
F11 to get out of fullscreen

Commands for the terminal:

ls = lists the folders in that directory

ls -al = lists ALL the folders, even the hidden one.

cd name = moves you in to the folder "name". change "name" for the folder you want to enter

cd .. = will move you back upp a folder

"~/.config..." = means that it is in the root file, in my case in "pi". Use "ls -al" to see the autostart file.

Step 4: Webpage

Picture of Webpage

The webpage that you should (could!) use, is a simple webpage with a black background and white text. Since you have an observation mirror, the black areas will make sure that you get the "mirror" and the white text will shine through so you can see it. Be creative and don't hesitate to make your own webpage if you want to! It's a perfect time for learning!

You can download the files I used from my GitHub. The files are originally created by Christoffer Orre, who hosts the Swedish guide. I just translated some of it to English. You can download his original files (in Swedish) here.

In the .php file, you can change the text, news, time and date (and of course add new things!) . And in the .css file you change where on the screen you want the stuff.

The files should be put in the folder "/var/www/html/MagicMirror" (where you were and changed things when you set up the web server). The "MagicMirror" folder is not necessary. It changes the "http://localhost/" to "http://localhost/MagicMirror/", but other than that it's just for keeping track of the files.

Step 5: Building the Frame (and Making the Mirror)

Picture of Building the Frame (and Making the Mirror)

Now it's time to take apart the screen and build the frame!

In my case, a screwdriver in the side of the screen and then mild force cracked it open. You can probably find guides on YouTube for your specific screen.

Then, you take the measurements for the frame and start cutting. I used both screws and glue to make sure it was sturdy enough, the final product weighs quite a lot. Put some air holes at the top and a hole for the cord at the bottom.

I also cut the "frame" in the front in an angle, just because I like it. Then you put the front on the frame and you are almost done.

Make 4 small pieces that you later can put behind the screen, to make sure it doesn't fall backwards.

(I have no pictures of this unfortunately) Then it's time to put a mounting point at the back. You can see how Mr Teeuw did his mounting points here.

Then it's time for some paint and you are done!

------------------------------------------------------------------------------------------------------------------------------------------------------

If you chose to have a glass and mirrorfilm, this is a good time to do that. Add the film to the glass as the instructions show you. If you didn't get any instructions, you can search for "apply mirror film" on YouTube for good instructions!

Step 6: Assembly

Picture of Assembly

Now everything is done and you should just put it all together!

Take the frame and put the mirror in the front. Place the screen behind it and plug in all the things you need. Start the Raspberry and make sure everything works. If everything is OK, turn it off and put the final 4 pieces behind the screen to make it stay up.

Then you just have to plug everything in there and maybe use some cable ties to make it look a little nice. You maybe have to make som final adjustments of the webpage to make it fit the screen when the frame is there.

Put it up on your wall (or place it somewhere) and you are done! You now have your own Magic Mirror!

Comments

rgonsalves (author)2017-10-12

Hi, is there a way that i can add an ai(google or alexa) too?

elicom (author)rgonsalves2017-10-19

well, I'm not sure. But I guess if you add a microphone and the correct software it should be possible :)

thinknaive (author)2017-10-15

Thanks for Sharing. Good one.

In my case For Rasberry Pi 3 Model B , had to change Step 3 to change the following:

open the below file
sudo leafpad ~/.config/lxsession/LXDE-pi/autostart

and change to
@pcmanfm –desctop –profile LXDE-pi
#@xscreensaver –no-splash
@xset s off
@xset -dpms
@xset s noblank
@chromium-browser --kiosk --incognito http://localhost

and save. Post this on reboot it will open the browser with the localhost as desired. Ensure you know how to open a terminal Ctrl+Alt+T , incase you need it post reboot :-)

Now trying to see if I can change the php to show the latest tweet from a twitter account.

elicom (author)thinknaive2017-10-19

Thank you for sharing! I will add your comment to the instructions! :D

To show Twitter is a nice idéa! :)

StijnS11 (author)2017-01-17

Hello,
I had to make one as a school project. My problem was that the mirror effect wasn't that good. I have tried different suppliers but the two way mirrors where kind of darker than normal mirrors. Am i doing something wrong or should i just accept the reflection isn't as bright as a normal mirror.

elicom (author)StijnS112017-01-17

Hi! :D
I used mirror-film for my project and it wasn't really that good. I haven't tried a real mirror, but as you said, I think they are a little darker. Have you emailed the supplier and asked them? :)

I would love to see a picture of your finished project! :)

StijnS11 (author)elicom2017-01-17

You can find the results of my internship in the link at the bottom. You'll find my end presentation and paper. Both contain pictures.
Language: dutch, Subject smartmirror

Now I want to make one at home for myself. At my internship we tried different samples from different suppliers, because none of them where ideal. I though why not ask other People's experience. Back then my mentor provided the materials, so i don't know the suppliers. If I want to i can contact him.p

Here is the link:
https://www.dropbox.com/sh/19j43fuz3mxdn3v/AABbSaduE8mhc-pmpGpXjY-3a?dl=0

DavidT561 made it! (author)StijnS112017-04-04

do you try and 3mm acrlic mirror ? see my examples using that product on a product thats 30cm x 40cm, im happy with the results. I tested against a 6mm version and at that size no benefit in the thicker. www.MySmartMirror.co,uk has more pics

elicom (author)StijnS112017-01-18

Hmm, okey. Well, unfortunately I don't know about the mirrors. :/ But hopefully someone else will see your comment and want to answer :)

That was a really nice mirror! :D Love how you added the voice-recognition and connected it to Spotify! :D

RyanW218 (author)StijnS112017-04-01

I used a two way glass mirror that was almost identical to a normal mirror. Got mine from here: http://twowaymirrors.com/smart-mirror/. (fyi very expensive, but also very nice)

DavidT561 made it! (author)2017-04-04

I have an android based device http://MySmartMirror.co.uk , the software can be grabbed from Playstore for people own projects, or you can just buy a ready made product. If it makes peoples live more easier i may also sell a frame only version , you would then only need to add your own tablet, and have a choice on software of what to do.

Comeli26 (author)2017-02-28

Can i know how much is the cost for this project in RM@RINNGIT MALAYSIA

elicom (author)Comeli262017-03-01

Hello Comeli26.

As I got some of the parts donated, I don't honestly know how much this project costs. But my tip for you is to use the "what you need"-list and search for what it would cost for you if you bought the things in stores close to you. Good luck! :)

Comeli26 (author)elicom2017-03-10

thank you for the info☺

MsMacD (author)2017-02-11

EDITING ROOT FILES - when we ran into a problem being able to change/save the 'autostart' file in Step 3, we ended up doing it with the Nano editor which runs in terminal. From terminal, we entered

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

This opened the file, we made the edits then exited and saved. Hope this helps others.

elicom (author)MsMacD2017-02-15

Thank you MsMacD! I will add this to the instructions! :) It's awesome that we can help each other in making a great tutorial! Promise to send a pic when you are done!

JeremyM167 (author)2016-10-11

Hi!

Thank you for this great work :)

I don't get 1 thing: do you use a glas or you put the mirror film directly on the computer screen?

Thank you!

elicom (author)JeremyM1672016-10-12

Thank you!
I use glas that I put in front of the screen :)

Niellles (author)2016-09-06

Nicely done!

I was originally thinking of making this project: https://www.instructables.com/id/Raspberry-Pi-Wall.... Now I am thinking of combining the two, maybe even throw in some voice recognition with a headless browser to pull up certain notifications (e.g. news, weather, calendar, public transport departure times. etc.).

elicom (author)Niellles2016-09-07

Thank you!

I think your plan sounds like an excellent idea! Send me a link when you are done! :D I would love to see the result!

Jared1221 (author)2016-08-06

i finally got it to work, i forgot to change the apache server to php, it works now. Also what can i change the address to so that its in english or something like weather

freecyclenut (author)2016-07-30

I would love to make this and you are so kind to share these instructions. I wish I knew the first thing about any of this, I would be making it today. Wonderful job!!

elicom (author)freecyclenut2016-08-06

Thank you!! :D You should try something! There are tons of cool stuff here at instructables!

freecyclenut (author)elicom2016-08-06

I have made a few things here and there but THIS is the one want to do. I have been trying to find a way to have my mirror give me my morning information while I get ready for work and this is perfect for that. The last time I wrote a program we were making sprites and using HLIN and VLIN commands. Things have changed so much and I have been horribly remiss when it comes to keeping up with the times. Please keep sharing your wealth of knowledge. Thanks.

Jared1221 (author)2016-08-05

Great Project, i did all the coding for it but my website shows code on it, for example next to the time and date on the left side there is

...

load('http://youtube.com'); // Specify the address to the feed $feed = array(); foreach ($rss->getElementsByTagName('item') as $node) { $item = array ( 'title' => $node->getElementsByTagName('title')->item(0)->nodeValue, 'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue, 'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue, ); array_push($feed, $item); } $limit = 3; // Number of posts to be displayed for($x=0;$x<$limit;$x++) { $title = str_replace(' & ', ' & ', $feed[$x]['title']); $description = $feed[$x]['desc']; $date = date('j F', strtotime($feed[$x]['date'])); echo '

'.$title.'

'; '.$date.''; '.strip_tags($description, '

<').'

'; } ?>

<06) and ($now < 10)) echo

and below that where the time based messages are there is

<06) and ($now < 10)) echo 'Good morning!'; else if (($now >= 10) and ($now < 12)) echo 'Have a nice day!'; else if (($now >= 12) and ($now < 14)) echo 'Time for lunch!'; else if (($now >= 14) and ($now < 17)) echo 'Come and see!'; else if (($now >= 17) and ($now < 20)) echo 'Time to start to think about dinner?'; else if (($now >= 20) and ($now < 22)) echo 'Have a nice evening!'; else if (($now >= 22) and ($now < 23)) echo 'Sleep tight, see you tomorrow!'; else if (($now >= 00) and ($now < 06)) echo 'Shh, sleeping...'; ?>

can someone help me i dont know what i did wrong, my index.html file is exsactly the same as yours.

Jared1221 (author)Jared12212016-08-05

oh and i only did youtube as the address because the original one wasnt working so i was trying to test a random site.

elicom (author)Jared12212016-08-06

hmm, okey.. if you just make a copy of my index.html, does that work? Maybe some of your code that you added accidental took away a ">" or something.. :/

l3tal15 made it! (author)2016-07-15

Again, thank you for sharing this project. This is a great tutorial.

With little tweaks I managed to "substantially complete" the project, I say "substantial" because there are a lot of other things I want this mirror to do. And since I plan to have it on 24-7 it still needs to go through endurance test.

A couple of changes I did:

- Monitor I use is recycled laptop monitor, my friend had a broken old laptop he gave to me, so I salvaged some of the parts including the monitor. Reusing the monitor requires LCD controller with LVDS kit you can purchase from ebay (http://www.ebay.com/itm/like/111387495947?lpid=82&...(Cost = $0)

- Frame is a recycled picture frame, it needs to be deep to accommodate your RasPi or anything you want to put in there. You can dig up through Goodwill store if you want. (Cost = $0-4)

- The "Brain" of the Mirror - you have a few options from least expensive to most expensive:

a) A Raspberry Pi ($40) used per this Intructables.

b) An Android PC ($59) I use Android Mini PC RK3288; it's the size of a large USB thumbdrive.

Here is a shortcut (wink): For the Android PC to work you can either download an App called Wall Mirror by Nick Hall or Home Mirror by Hannah Mittelstaedt. OR! You can make your own app using Gradle or Processing! Credit: Carl Gordon Media (https://www.instructables.com/id/100-Smart-Mirror-Pi/) here he is using Processing with Raspberry Pi, there is another tutorial where Gradle is used but I can't remember where it was.

c) A Windows PC Stick ($90)Azulle Quantum Access Mini PC Stick;

Here is another shortcut (wink wink): For the Windows OS option you can run Rainmeter! Make sure the wallpaper is set to black and set the desktop to not show any icons and auto-hide the taskbar.

NOTE: I got the Android PC Stick and Windows PC Stick for other purposes, it is not currently used for my mirror, but it is an option...

elicom (author)l3tal152016-07-16

Wow!! It looks so nice!! :D I'm glad you were able to "finish" it! I would love to see a picture when you feel like you are done with it! :D

l3tal15 (author)elicom2016-07-18

Thank you! And I will.

l3tal15 (author)2016-07-06

Thank you for sharing this project. I am a novice in RasPi and all things Linux, but following your instructions I came very close to completing it. I am using the code you have on GitHub with the hope of tweaking it. I have successfully installed Apache and created a temp site thanks to Rapsberry Pi's site/instruction (https://www.raspberrypi.org/documentation/remote-a... However I am now getting the 403 error after replacing the original index.php file with the one that is in the GitHub's Magic Mirror folder. Ownership of the .css and .php files are pi, not root. the html folder also have "pi" permission.

403 Forbidden

You don't have permission to access / on this server.

Apache/2.4.10 (Raspbian) Server at _______________

Here is a run from /var/www/html directory:

root@raspberrypi:/var/www/html# ls -al

total 20

drwx------ 2 pi pi 4096 Jul 6 22:46 .

drwxr-xr-x 3 root root 4096 Jul 6 21:37 ..

-rw-r--r-- 1 pi pi 812 Jul 5 19:42 bg.gif

-rw-r--r-- 1 pi pi 3885 Jul 5 19:42 index.php

-rw-r--r-- 1 pi pi 1268 Jul 5 19:42 style.css

Please help me? Thank you.

elicom (author)l3tal152016-07-07

Hi! I'm glad you like it and have come so far! :)

I'm not sure what the problem is and unfortunately I don't have access to my own mirror right now. Have you tried making pi owner of the folder yet another step up? Otherwise maybe you could make a new file and just copy the text in to it? :/

I'm sorry I can't be more helpful.. I hope one of the ways works. Let me know!

Best regards, Ellie

ArchieCooperxd (author)2016-05-11

Quick question, How do i replace what it says on the website? it says that I need to replace the file but I dont have the permissions on the pi user to replace it. Awesome Project by the way :)

apku04 (author)ArchieCooperxd2016-06-21

sudo

elicom (author)ArchieCooperxd2016-05-16

Well, the problem that I had, was that I was not the owner of the files. Make sure that the Pi user is the owner, in the same way that you did when you were working on the web server.

And thank you! I hope my answer helps! :)

drderwood.jah (author)2016-05-10

Awesome!!!!

elicom (author)drderwood.jah2016-05-16

Thank you! :)

vtpa (author)2016-05-10

Tnks for sharing!

Lineakat (author)2016-04-26

awesome!

elicom (author)Lineakat2016-05-06

Thank you! :)

gwood9 (author)2016-04-05

If I remember correctly you can take an old mirror and carefully remove the paint from the back side with an appropriate solvent to get a one way mirror.

jason.salvatori (author)gwood92016-04-10

It tends to make it not work as a mirror. I have seen this done with a large bathroom mirror though were a small amount in an unused corner is removed to have your screen show there, while the rest is still available as a mirror. This is likely what I will be doing now that I have the programming instructions from this 'ible

elicom (author)gwood92016-04-05

oohh, I haven't heard of that, but it sounds cool :)

eaalthof (author)2016-04-05

I was curious if anyone has tried to watch a video (movie- netflix, amazon, vlc) through the mirror. I have been reluctant to mount a TV on my bedroom wall, but a mirror with speakers that also plays movies would be perfect! But how dim would the video be? Thanks!

jason.salvatori (author)eaalthof2016-04-10

http://www.hiddentelevision.com/samsungledmirrortv.htm or http://www.hiddentelevision.com/instructions.htm for the DIY version

elicom (author)eaalthof2016-04-05

I haven't watched a movie or anything like that, only programmed through the mirror. It works pretty well. It works best if the room is dark (just the way the mirror should work). So sorry, I can't really answer your question.

rajasekher.mutukuri (author)2016-04-07

cool project i never see thax for sharing

Thank you :) I'm glad you liked it :)

Mex5150 (author)2016-04-05

Cool project, but instead of the web stuff, why not just use conky?

elicom (author)Mex51502016-04-05

probably because I have no idea of what that is ;)

About This Instructable

298,849views

1,837favorites

License:

More by elicom:How to Make a Magic Mirror
Add instructable to: