Magic Mirror

I'm building a magic mirror using a Raspberry Pi 3 model B and an HP S2031 flat screen monitor.

Similar projects worth following
The mirror should have the following features.
1. Display the following information at all times.
a. The date and time
b. The weather forecast
2. Take voice commands from the user.
3. Be able to search the internet and display or speak search results.
4. Create the image of an abstract face in the mirror when speaking.
5. Display a greeting to the user when he or she approaches the mirror.

This magic mirror project will be using the code and instructions provided on Michael Teeuw's GitHub Account. I will most likely install everything just as he has it documented, then modify things to my liking before building the frame and putting the mirror in. Watch the logs for updates on were I am. 


Style sheet for the web page

Cascading Style Sheets (CSS) - 1.15 kB - 09/01/2017 at 20:18



Java Script code for displaying a clock on the web page.

javascript - 1.34 kB - 09/01/2017 at 20:16



Web page source code.

php - 3.20 kB - 09/01/2017 at 20:15


  • 1 × Raspberry Pi 3 Model B
  • 1 × HP S2031 Flat Screen Monitor
  • 1 × 64GB Micro SD Card SanDisk Ultra SDXC

  • Configuration And Coding The Web Page

    Bill Anderson09/01/2017 at 20:10 0 comments

    OK, today we are going over all remaining steps needed to get the Raspberry Pi set up to display a simple web page that shows the date and time in the top left corner, and three news feeds right justified in the middle section. I am still working on getting the weather RSS feed to work. The problem is, I can't find an RSS / XML weather link for my area just yet. However, the code does work, so if you want to copy my code and stick your own weather feed link in there it should work just fine 4 U.

    Let's start with configuring the RPI.

    From the command line, type raspi-config to pull up the configuration GUI and make the following changes.

    1.  Under advanced options find and select "Expand Filesystem".  This will ensure you are using all available space on the SD card.

    2.  Under Boot Options, select "Desktop Autologin".  This will cause the RPI to boot into the desktop GUI as user pi automatically.

    3.  Under Localisation, select and change your language preferences and change your date and time to match your local area.

    Check check, all done!

    Next lets do a couple of things needed to start writing some code.

    1.  Navigate to /var/www/html and run the command "ls -l" to list the contents of that directory. you should see a file called index.html. Delete that file with the following command "sudo rm index.html". Now do another "ls -l to ensure it is gone.

    2.  Install PHP5 using the following command. sudo apt-get install libapache2-mod-php5 php5 php-pear php5-xcache.

    3.  Create a new file called index.php using the following command  sudo echo "<?php phpinfo(); ?>" | sudo tee index.php  (make sure you include the quotes).

    4. Test the web server with the new index.php file by opening the Chromium browser and entering "localhost" for the URL. You should get several pages of nicely formatted information about the PHP5 environment. If you don't get that something went wrong! Go back and try to delete and recreate the index.php file, then test again.  Good luck!

    Assuming everything went well, we are ready to write some HTML / PHP!

    If you have a favorite HTLM or PHP editor installed on your RPI (I don't know of one), then you could us it to code this next step. I just used nano, and it worked just fine. So, whatever you want to do man, just get er done.  The code below works except for the weather RSS feed as I said before. So you can just cut and paste it into your editor and be done. Unless you live in Denison, Iowa you would want to replace the weather RSS feed anyway so that not working is not really an issue.  You may also want to replace the news feed with something else, and that's OK, right now it is showing national news in the USA. In the long run I will probably change all of it myself, once I get my head around how to code the AI and voice recognition stuff. I just put the weather and news feed in there for two reasons. One,  that is how it was coded in a class I took (that is where the code comes from). And two, it works for now and gets the Magic Mirror project up and running in a day instead of weeks because it's simple.

    I had planned on posting the code in this log file but I discovered that when I do that all the formatting is lost. So, I have attached the actual files to this project. There are three files to download. One is the php file that contains the web page code. One is a Java Script file that displays the clock on the web page. And the last one is the style sheet.

    Good Luck!

  • Getting Started

    Bill Anderson08/16/2017 at 22:11 0 comments

    Today I installed the Raspian Jessy operating system on my Raspberry Pi and did some configuration stuff. I did run into a snag of sorts, but got everything fixed in the end. 

    When I put Noobs on the SD card I have it failed to boot.  After some research I discovered that is a known issue with SanDisk 64GB SDXC Ultra cards. Bummer. So, rather than give up, and go buy another card I tried skipping the Noobs install and just burned the Raspberian ISO image straight to the SD card. That worked out well for me and the OS booted right up no problem. 

    That done, I went on to configure the OS in the following order.

    1. Updated the installation by running the following command "sudo apt-get update && apt-get upgrade -y"

    2. Changed the pi user password. This is important for security so run the following command and change the password. "passwd pi" then follow the instructions at the prompt.

    3. Enable the SSH server. I did this trough the configuration GUI. Just look through the menu until you see SSH then click on the enable radio button.

    4. Install Apache Http server. I also did this from the GUI. Just go to Add / Delete software and search for Apache.

    5. This step is not done on the raspberry pi, it's done on the computer you plan on using to administrate your mirror. Google a program called Putty and install it. Putty is a simple SSH GUI / emulation terminal for UNIX / Linux.

    That is as far as I got today! 

View all 2 project logs

  • 1
    Step 1

    I have uploaded all 3 files with code to the files section.  Being new to this site, I started documenting the steps in the log files section because I did not understand the correct way to do things here. So, go read the logs and they will cover all the steps involved in this build.

View all instructions

Enjoy this project?



Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates