Family Information Center

I've recently moved overseas and the first thing we realized is that we have far less space to put things than we did in Toronto... which is surely astounding since our house in Toronto was not that large. The consequence is that I don't have any free wall space to hang my smart mirror in a useful location.

As we've come to depend daily on the tidbits of information the mirror provided – weather forecast, commute time, transit schedule, etc. – I was at a loss for how we might replicate this in our new home.

Luckily some family members that had also been living here needed to move back home, and they graciously donated a TV to our cause.  Since we decided to situate the TV in our kitchen, which happens to be where we spend the lion's share of our time, I got to thinking that maybe I could use it as an information centre.  Essentially my smart mirror without the mirror!  I had an old Raspberry Pi 2B sitting around that I had previously used for a home automation project... I figured it would be perfect for this job!

I'm using the same software that powers the mirror – an open source project called MagicMirror. The folks that created MagicMirror have made it pretty easy. Once you have a fresh install of Raspbian up and running, a single command gets MagicMirror installed. If you've followed my blog then you are already familiar with what MagicMirror can do.  If not, here's a quick video refresher:

However, this is only half the battle.  There were still a few other hurdles to get over. The information widgets that I used on my mirror are all geared towards my life in Toronto.  Many of them, like the weather module, can easily be reconfigured for the new location. But others, such as the Toronto transit schedule, and the waste collection calendar, were written specifically for Toronto's schedule. I needed to essentially rewrite these for London.

The second problem is that the TV is a 720p TV, not 1080p.  To be exact, it has a native resolution of 1366 x 768.  This is significantly less screen real estate to work with than I had before.  I had to find a way to cram all of the important information on to the screen while still keeping all details crisp and easy to read.  Luckily, I didn't need to leave a portion of the screen empty – with the mirror, I still needed to use it as a regular mirror, and as such a large section down the middle was blank.  For this project I have the entire screen available to use!

The information widgets I needed "London-ised" were the waste collection schedule and the transit schedule.  With the waste collection schedule, there was no easy way to pull this information in – my borough simply doesn't make such information available in some kind of public feed. So for this one I needed to create a calendar manually.

Looks the same as before, but with my pickup schedule in London!

For the transit widget, this proved a little easier. The best part about the MagicMirror software is its community involvement. Someone had already written a module to  pull in vehicle arrival times for a given bus stop.  But, being the nit-picky kind of guy that I am, I wasn't 100% happy with it.

Here is what the module looks like as written:

Not bad – it gets the job done – but it didn't really match the aesthetic of the rest of my composition, and it didn't feel "London Transit" enough for me.  Thankfully CSS is a wonderful tool. With a little elbow grease, I was able to use the same typeface and text colour as you would see on the actual route marker on buses in London. The modification also allowed me to have this module's text-size and line-height match the rest of my composition.

Here's the result:

Admittedly not a massive change, but small details matter to me :)

There was still one more thing that was missing from this project. Anyone who has lived in London for any length of time knows that the transit system is amongst the best in the world. It's also quite old and complex... service interruptions can and do happen all the time. It would be nice to be aware of any such interruptions before I leave the house each day.

London Transport has an open API that anyone can use. It includes all sorts of information such as vehicle arrival times, train schedules, and especially useful for this instance, real-time status across the entire system. So I got to work writing a module that periodically polls the API for service disruptions and, if any exist, throws them up on the display.

Now when I stack it with the bus schedule module, they look like they work together:

Now I have everything I need in a useful spot in my home once again! This is a great start, but there's still a bit more I'd like to do.  Right now I need to turn the TV on manually and set the input for the Raspberry Pi.  Since the information centre is most useful in the morning, it would be fantastic if I could have the Raspberry Pi power on the TV through HDMI CEC instructions each morning before we get up, and then back off again some time after we leave.  I did this previously on the mirror, but the added complexity here is that I also have an Apple TV on another input, and I use a Harmony remote to control the whole thing. I don't want the Harmony to get out of sync with the state of the display, so I'll need to figure out how to remember the previous state before the TV came on in the morning, so it can be reapplied before the automatic shutdown happens.

Using a Harmony Hub here would be perfect...

Here it is all up and running in my kitchen. Current weather conditions and forecast, notes from GMail, upcoming schedule, waste collection, scoreboard, transit schedule and alerts, news headlines, word of the day, and a visual display of what's currently playing on the Sonos – all on a 32" TV!!

 - Jeff


  1. im curious do you have a module for your time and weather together like that?

    1. No it's two modules. The weather module is actually positioned in the middle column, then shifted left-ward using CSS


Post a Comment

Popular Posts