Practical Project 1: Magic Mirror Software

It’s finally time to return to the first practical project “Magic Mirror.”  We need to start addressing the software to make it run and do things that would be cool, useful or at the very least give us a way to start being creative with it from the software side.

When we last talked about the “Magic Mirror,” we had our 410c sitting pretty in a custom framed case with a 2 way mirror completing the enclosure with Linux happily running on our network.  So many happy memories getting to this point, continuing is a must!  So in this article, let’s start by talking about trying to get something onscreen.  We want to take up the whole screen.  The easiest way to do that is to launch a browser and use it to browse to a custom server running whatever we want to display on screen.  To do that, we can simply setup what’s called a LAMP (Linux Apache Mysql PHP) stack on our 410c sitting in the mirror.  Then, you’d want to set the servers to launch automatically when the mirror starts up; and finally get the browser up and running all automatically.

So that easy solution works fine and is exactly what every “magic mirror” style project I can find online does.  But I want something a bit more.  I’d like to use as few resources as possible, while offering the ability to run future additions such as bluetooth or wifi connectivity detection (I should be able to have it recognize me by the phone in my pocket or watch on my wrist).  I’d also like it to give me a chance to prove to you I meant it when I said we’d be using C++ for most of our programming.  So forget the server, forget a monolithic web browser.  We don’t need any of that extravagant nonsense.  Let’s use OpenGL and our C++ wit to give us what we want.

So step one is to grab my source code from my public github:

git clone https://github.com/gpx1000/gpxblog-magicMirror

Now you’ll notice that it has a MakeFile in it.  This is a GNU style MakeFile that describes the project and how to compile/link each C++ file.  It also defines that the compile phase should only compile any files that have changed in the directory that Make targets.  So cd into that directory and type in make.  Your MagicMirror project will now have a binary program sitting in the bin folder.  Copy it to your magic mirror and let’s get things setup to auto run:

1.) Copy the folder from init/magicMirror to your /etc/init.d directory

2.) Place the MagicMirror binary in your /usr/bin path

3.) restart the MagicMirror.

Congrats, you should now have a full screen application running that displays some random quotes in the full screen.  Wonderful right?  Okay well now it’s time to actually do some things with it.

Note that those quotes are generated by /usr/bin/fortune.  If you want to add your own quotes, do so in the C++ found in the quotes directory.  Just edit wordList and follow those deployment steps above to get new quotes.

Let’s say you want to display the weather, a calendar with your schedule in it and a graphically interesting thing to look at:  So let’s solve each problem in steps.  First we need networking, and the easiest thing to do is to grab curl, this is a simple library that does nothing more than to allow you to provide the library with a URL to go and download and it’ll return the rest.  So to get the weather we’re going to use NOAA as it provides a RESTful interface.  That is, it’s an API that receives commands via a URL and only provides text as a reply.  Check out the Weather folder from the git repository and you’ll find the code to do exactly this.

To use my weather code, you need to update it for your location in the MakeFile.  Also tell Make to build it by editing the MakeFile.  Open up the MakeFile in your favorite text editor and change the #### to your current location and set Weather to ON.  Repeat the 3 steps to hopefully see weather in your MagicMirror.

Before we go further, let’s look at the code.  Notice that the code has two parts.  One part sets up the display along with loading some pre-existing icons for the weather types.  However, that code doesn’t run until it receives instruction from the RESTful service responses.  It also runs with a main project’s state machine telling it what to display and when to send network messages.  When Curl receives the messages it triggers the update in the display and off it goes happily showing the weather for the day along with the text for the weather.

Next is our Calendar.  Here’s where you’ll find me placing code that uses date formatting code from strings and pulls the information just as before; this time from Google.  We could utilize iCal format to support everything from exchange calendar formats to Apple Calendar, but that’s a future addition I might get to someday.  For now, just using Google.  Notice that in the Calendar folder, I’ve created an OpenGL aware Calendar and filled in dates.  Then after I pull details from the Google Calendar, I fill in those dates as they exist in that calendar.  Things are really coming together.  Setup your Makefile to use Calendar and your id to be what you’re sharing your Google Calendar ID as then repeat those three steps above to see your calendar sitting happily.

Finally something graphically interesting to look at.  Well here we have a few options.  Pretty much anything in the 64k demo scene would be wonderful to add here.  However, I opted for something really easy.  I did a spiral that redraws without clearing the screen that gives a nice halo effect.  You’ll find that it is a copy of the demo found in http://nehe.gamedev.net.  That is a site I highly encourage you to peruse to find other nifty things to display and learn graphics if you have that desire.

To enable the graphics demo, just enable it in the makefile and deploy it with those three magic steps.

Next time we come back to this project, we’re gonna start to update the hardware.  I have a camera attached to my Magic Mirror as well as a microphone.  I use both for input, swiping and recognizing users.  So next time, you’ll see OpenCV make its way into this project along with image and voice recognition.  At which point, your “Magic Mirror” will blow any of those web page based Magic Mirrors out of the water as a reward for using C++.