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

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

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

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)

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

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!