Configuration And Coding The Web Page

A project log for Magic Mirror

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

bill-andersonBill Anderson 09/01/2017 at 20:100 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!