Information Center V2

In my last post I talked about automating our kitchen information centre. It's certainly working nicely, but we've discovered a pretty big problem with it: there is simply too much information displayed on the screen at once. Often it gets difficult to zero in on what you're interested in.

Useful, but quite busy

So I decided to revisit the UI. The first step was to evaluate what information was really important vs that which is not. Basically this was an exercise in "just because I can put it on the screen, it doesn't mean I should..." This led to the elimination of several information modules:

TFL (London Bus System) Arrivals

Anyone who is familiar with London's transit system knows that buses arrive so frequently that checking a schedule is not really necessary. You just go to the bus stop and wait a few minutes fir the next one to arrive.

Word of the Day

This really was just frivolous information. I wrote it, so I wanted to use it. But it doesn't really do anything to help us organize our day.

News Headlines

This was the toughest one to give up, as it was one we actually used on a daily basis. It was nice to scan the headlines while sipping on morning coffee. That said, our phones do a much better job of presenting news stories, so the decision to remove it was acceptable.

Sonos - What's Playing

This one was another that was difficult for me to part with, as it is a great example of how it's possible to integrate your connected devices. Again, though, it doesn't do much to help us organize our day.

This left the following:
  • Clock
  • Calendar
  • Weather
  • Waste Collection
  • Scoreboard
  • Transit Interruption Notices
  • Notes
Even though we had managed to eliminate four modules, there are still seven left, and as yet I'd done little to reduce the cluttered layout. As I had mentioned before, the underlying software has a very active user community, and there exists a utility module that allows you to create user profiles. The screen's display can be customized based on the currently active profile -- some modules can be displayed while others are hidden.

I configured the display to have the left side and bottom bar to always display the same information -- clock, current weather conditions, waste pickup, scoreboard and transit interruption notices -- and a large region on the right for more detailed information that would change based on the active profile. I configured three profiles:


Weather Forecast


As you can see, each of these screens is easier to read, and offers the opportunity to really use the space effectively. In particular, I now have a more useful weather forecast -- next 10 hours and next 5 days -- and I got to have a little fun with the notes display, making them look a bit like Post-It notes.

The last part of the puzzle was a means to transition from one profile to the next. I wrote a utility module that cycles between the three profiles. In addition it accepts input from the IR sensor I talked about in my last post so that we can use a remote control to cycle to a particular profile.

At this point I was happy with the overall improvement. But there was one thing that I really missed from my smart mirror that I wanted to somehow work into the information centre. The mirror had a sort of screensaver mode that displayed the time in words. That module, however, was more ornamental in that it only showed the time in 5 minute increments -- it would display "It's five minutes after 2" for any time from 2:05 to 2:09.

The Word Clock on my Smart Mirror

I wanted the information centre's version to be more precise. I also wanted a design similar to that of QLOCKTWO, where the display uses a regular grid of letters, rather than the full words I was using before. So I set about making some modifications to my Word Clock module, and this is the result:

Now my display transitions into the word clock after a defined length of time with no input from the remote control. I've modified my on and off times so that the screen is on for most of the day, only shutting off overnight while we're asleep. I also worked in a blackout period where the word clock will not be displayed during the morning hours, when time we'll want the information cycle on screen at all times.


  1. Great job!

    Could you share the changes you made in the .css file to have it looking like QLOCKTWO?

    I am having trouble to align all letters like your picture.

    1. It's more than just CSS. What's important here is that each letter is wrapped individually in a span tag. Then I put each row of letters into a flex-box div with the letter spans aligned horizontally, and then a bigger flex-box div contains all of the rows stacked vertically.

  2. Did you use a specific modules for your "notes" section?


Post a Comment

Popular Posts