Glanceable Displays: What Do I Want To Display?

Preface¶

This is the final article in a series about Glanceable Displays and my efforts to create one for my household. For other articles in the series, click on the title of the article under the heading “Glanceable Displays” on the right side of the webpage.

Introduction¶

In the previous article Glanceable Displays: Setting Up Our Display, I added the finishing touches to allow a Raspberry Pi to display a single web page on my Glanceable Display. It took a bit of time to get there, but the work that I put in over the previous articles made sure that the foundation for the Glanceable Display is solid, a necessity for a device that I want to be as “hands-off” as it can be.

This article takes a look at the options and work I did to put a series of web pages on that display. I have tried to document the various processes that I went through with my family’s display to help any readers come up with a good way to help them come up with their own requirements for their Glanceable Display.

What Are My Options?¶

As of the writing of this article, there are 3 major options available:

roll your own
use Dakboard
use Magic Mirror

To walk through each of these issues, I have shared my “Pros and Cons” lists, as well as some general discussion on those lists.

Option 1: Roll Your Own¶

Pros	Cons
write it yourself	write it yourself

Writing down a list of pros and cons for this option, I came up with the same thing on both sides: write it yourself. On the pros side, you have the freedom to do what you want, however you want to do it. On the cons side, you have the responsibility to learn and create what you want, as well as maintaining it, debugging it, and hosting it. While this is the option with the greatest ability to be creative, it is also the option with the greatest costs.

Taking a hard look at this option, while I am capable of doing that work, it would be slightly outside of my normal comfort zone. Any changes would likely be code changes, and not configuration changes. The web pages would have to be hosted somewhere, either on a local machine or in the cloud, and the monetary and time costs associated with that. Taking all of this into account, the maintenance cost seemed to be the primary cost, and it just seemed to continue to get higher with this option. For the most part, this was immediately discarded by me, and that decision was backed up by my family. It seems that I get grumpy if I have to do too much maintenance on our systems at home, and they would prefer to avoid that, is possible. Go figure!

Option 2: Use Dakboard¶

Pros	Cons
professional solution	locked in to their pricing scheme
they do the dev and testing	locked in to their feature set
multiple screens available	not in control of new features
loops of screens available
simple WYSIWYG editors

This option uses the frequently sited DAKboard site to host and maintain the webpages to display. As their pricing indicates, if you want to do something custom, you are at least looking at their Essential package. However, for that monthly fee, you do get a number of neat features that just work. The first feature is the WYSIWYG editor, with which you create custom screens. You get seamless integration with different types of calendars and both provided and custom data sources.

Comparing this option to the previous option was like comparing night to dark. Yes, there is a monetary cost to consider. But for that cost, any screens I created would be hosted on their server. The maintenance cost for me is the configuration of the screens, with no development or debugging cost. And that maintenance cost would be limited to look-and-feel issues with the displays, not debugging why something is not working. Taking an honest look at the cost-to-benefit ratio for this option, the primary cost was the monthly fee and there were multiple features that just worked on the benefit side, making this a promising option.

Option 3: Use Magic Mirror¶

Pros	Cons
lots of third party plugins	oriented to sharing a single screen
can customized output	you handle the installation of plugins
	you handle the configuration

This option uses an open source solution that is often cited, Magic Mirror. As this solution is open source, you will be putting your own time into this project to download and configure things. That configuration is mostly done with a file editor and the testing of changes, re-iterating with reboots of the system. If there is something that you need this to do, if worse comes to worse, you can write the plugin and get it into Magic Mirror’s ecosystem.

From my viewpoint, this option landed somewhere between the Dakboard option and the Roll Your Own option. While there is a lot of existing choices and a framework to host it, there is still a bunch of experimentation and maintenance that is needed to get this working. The big issue here is that MagicMirror is intended to be a single screen display that shows a collection of information, not a series of screens with different information.

What Did I Decide?¶

To satisfy my family’s requirements, Dakboard’s solution was the best fit for what I wanted to do. As this is a family project, an implicit requirement is that if we decided that we want to change something, I need to be able to affect that change pretty quickly. Between Dakboard’s features and their custom screen editor, I had confidence that I would be able to make these changes quickly.

The decision came down to an easy calculation of cost versus benefit. For Dakboard’s monthly pricing, the ease of which our glanceable display would display information and require almost no maintenance is still worth it. While spending time on side projects is fun for me, this project’s main goal is to use a glanceable display to make an appliance that we all use. In my mind, spending hours laboring over the maintenance of the appliance defeats the purpose of calling it an appliance.

Starting to Use Dakboard¶

Using my family’s requirements as a guideline, starting to use Dakboard was a pretty easy journey. As I knew we needed around 2-3 pages in rotation, the default templates were not satisfactory and I registered for a premium account. At the time of this article, that premium account was 5.95 USD per month and included 3 screens that can be added to a single loop. Depending on what my family’s future plans are, we might revisit the pricing, but for now that works for us.

Logging in to my Dakboard account, I had a screen called My Predefined Screen ready to go in my account. Taking a quick look at it, from my point of view, it was too cluttered and busy for our family. Based on prior discussions, we distinctly wanted 2 screens: one for a calendar and one for the weather. Everything after that was extra. Selecting the Add a Custom Screen or Template button under Custom Screens, I was left at a screen asking me to put things together for the screen. Where to start?

Thinking through a theme¶

Before I came back to write about this point in the article, I tried a number of times to create screens that took care of our requirements for calendars and weather… but they didn’t seem right. It just didn’t seem to me like the pages where cohesive and their purpose clear. It wasn’t until I took a couple of days away from the project that I realized my problem: the pages didn’t have a common theme.

Now being aware that I needed to find a theme, I went to Dakboard’s Templates display for inspiration. After a bit of thinking, I figured that the folks at Dakboard wanted to put their best foot forward, so they probably had someone with artistic experience help them with their templates. As such, using them as meta-templates or inspiration for our screens seemed like a straight forward thing to do.

Similar to my approach for deciding on the software to use to generate the pages, I went through each of the template screens, writing down good and bad things about each one. Right off the mark, I was able to eliminate some screens as too busy for my taste, which helped out. In the end, the list of things I wanted for the display boiled down to the following items:

a horizontal layout instead of a vertical layout
the left quarter of each screen will be very simple text on background of a rotating set of images
good examples of this are the Simple Agenda and Big Calendar templates
the current date and time will appear at the top of that quarter
only current weather warnings will appears the bottom of that quarter
the remaining three quarters of each screen will have a singular focus
the calendar screen will have a calendar that takes up the entire screen, due to it’s importance to our family
- the Big Calendar screen is a good example, but must support a different color for each family member
the weather screen will have specific items related to the weather, including a storm map if possible
- the Beach screen’s left side is a good example
the final screen will have other things we want to display and test out

Keeping with my desire to keep my family on board with the project, I talked to them about this after dinner one night, and with the exception of some small squabbles (about which family member got represented with which color on the calendar) everything was good to proceed.

Doing the work - The Left Quarter Panels¶

To make the transitions between screens seamless, it was important to me to ensure that the size of the left image panel and the date and time panels we consistent through all three screens. While it might have appeared to be a very pedantic behavior on my part, I wanted to reduce any barriers to adoption by my family. From doing some reading on user interfaces for my job, choppy or inconsistent interfaces can often turn off users. Based on that experience, the extra time used to get it “just right” was a worthwhile investment for me.

To carry the theming further, I wanted the images displayed in this left image panel to have a common theme. Looking through stock images from Unsplash, I went through and started downloading 15-20 images that were 634 pixels by 951 pixels, a common size available on the site. Looking at the download directory, I noticed that those pictures appeared to have 3 common groups: pictures of night skies, pictures of nature, and pictures of various paths. I then created three new folders to hold each group of pictures, moved the relevant pictures into their own directory, and pointed the image panels of each screen to a specific directory.

Before moving on to the next part of the screens, I added these screens to a loop and looked over and over again at various parts of the display, making sure that the display was reflecting what I wanted the look and feel to be. After a number of nitpicky hours of fiddling with panel size and location, I brought my family in and took some creative criticism on the screens. I took their feedback and applied it to the screens, repeating the vetting process with myself and then the other members of my family until it was just right. Once I had everyone onboard, I moved to the content of the other screens.

Doing the work - The Calendar Screen¶

Dragging the Calendar panel to the screen was the easiest part of this screen. While the biggest decision was to decide whether or not to use the Monthly calendar type or the Big Monthly calendar type, it was the small details that really needed tweaking.

The first part was to add each of our personal calendars to the panel. The people at Dakboard facilitated this by having a button called Show iCal help that displays easy to follow instructions. I had no problems adding each of our personal calendars to the screen, and assigning unique colors to each of those calendars. The fine tuning and nitpicking came over the next 2 weeks as me and my family took a look at the display and tried various options to get it dialed in to what we needed.

The reason that this screen is so important to my family is that we all use our phones to record when we have things to do and where we need to be to do them. Having a separate whiteboard that we had to update with those schedules wasn’t working for us, so having something that was able to use the same calendar source as our phones was pivotal to it’s acceptance.

Doing the work - The Weather Screen¶

In approaching this screen’s design, it was important for me to think of how my family intended to use this screen. In asking my family, there were three main use cases:

What will the weather be like today? (for dressing)
What will the weather be like in a few days? (for planning)
Are there any weather alerts for the area? (for implementing plan-B to avoid the bad weather)

For the first two, it has been hard to figure out which two weather sources are more accurate, Darksky Weather or OpenWeatherMap, so instead I just show both. In the future, I am going to have to change that, but for now my family is still deciding. To increase our information though, we have a precipitation radar map courtesy of The Weather Channel. To embed it in the panel, I added an image panel, went to the weather map I wanted to add, right clicked on the image and then selected Copy Image Address and placed that in the configuration for the image panel. It took a couple of tries to get it looking the way I wanted, but was pretty easy.

Adding the weather alerts was even easier for me as Dakboard already had a separate panel for that. It was as simple as adding the panel, setting the location, and saving the panel. One note for all of these weather panels was that they worked better when I used the closest major city instead of the small town that I live in. Results were weird when I didn’t do this, and if I figured it out correctly, were showing the weather for New York City!

Doing the work - The Left-over Screen¶

Yes, the left-overs. Where to put the fun stuff that really didn’t fit in anywhere else?

For fun, I used the News/Rss Panel to add feeds for Brainy Quotes and Word of the Day. The panels were easy to configure and get them to display in a way that was easy to read.

My wife’s family loves Christmas, so I added a X Days Until Christmas display using the Countdown panel, setting the date to December 25, 2019 and to show only the days.

The really fun panel was to show the number of astronauts currently in space as counted by NASA. Searching online, I found NASA’s open api which includes the number of astronauts in space complete with instructions on how to interpret the data. Adding it into a new Fetch panel, I set the panel to extract the number of people in space from the number field and use the user-astronaut icon from font-awesome to display beside the number.

I am sure there will be more fun things to add, but confident that this was a good start, it was time to wrap it up.

Wrapping The Screens in a Loop¶

To facilitate the showing of multiple screens in succession, Dakboard provides a wrapper called a loop. A loop can change the current screen at a various intervals from every 15 seconds to every hour. To add a loop, I went to the main screen for my account, clicked on the loops button and followed the simple instructions provided on the popup that appeared. For my family, I chose a change frequency of 15 seconds and added all 3 of the screens I created into the loop. To view the loop, I clicked on the View Loop button that was visible once I clicked on the ellipses (…) at the bottom of the panel in the loops display.

Once things looked right on my computer, it was time to add them to the glanceable display. When I pressed the View Loop button, the browser changed to an URL that begins with https://dakboard.com/loop/uuid/. This URL is the actual URL you need to use to view the loop from any browser without having to go through the configuration screen. SSHing into our glanceable display, I went back to my notes in the article on Setting Up Our Display - Starting Chromium In Kiosk Mode and replaced the placeholder URL of https://bingwallpaper.anerg.com/ with the URL that I found from the View Loop window.

Double checking my work, I used my SSH session to enter sudo reboot and reboot the glanceable display. After a couple of minutes of boot up time, the glanceable display finished it’s startup and began showing the web page from Dakboard, rotating through the screens!

How Did It Work?¶

I started the first draft of this article in late July, just after I got the glanceable display working for my family. As of October, when I am adding this section to the article, we are using the display on a daily basis, mostly in the way it was intended. We continue to tweak little bits on the “Left-over” screen, but the other screens are dialed in the way we want them to be.

One of the things that I believe is crucial to it’s success is the placement in our kitchen. We have a nice corner where we have it plugged in, out of the way of various devices, tucked under the cupboards where we store our dinnerware and our glasses. This ensures that when we go to get some food or drink, we almost instinctivly glance down at the display as we are getting something out of one of those cupboards. For me, this eliminates the “but I didn’t look at the display” factor for each of us, as we each know that getting something from those cupboards means we saw the display, if even for a second.

It also may have seemed like a small thing to include my family in the process, but I firmly believe that engaging with them at various points and incorporating their feedback into the project had a large bearing in their acceptance of the display. It was important to all of us to be able to talk to the others and say “hey, can we add X to the display” and talk through whether there was a benefit to all of us from including that idea on the display. By including each family member in the creation process and design process, they continue to have an investment in what is being displayed, and ensuring it is current and relevant.

And yes, we have all had to ask or remind each other to add various meetings on to our own calendars so they show up on the main calendar. By their very act of doing that, I know they are using the calendar. By the number of times my wife has mentioned that there is snow at the nearby Snoqualmie Pass, I know the weather screen is getting used, especially the weather alerts section. The harder one to figure out is the “Left-Overs” screen, but I am sure that I have had my son try hard to seamlessly work the word of the day into casual conversations, sometimes with hilarious results. But it’s the thought that counts!

What Was Accomplished¶

This article detailed the work that was needed to take my family’s glanceable display from an appliance that was just sitting around to one that we use every day. I shared with readers a number of different notes I made for this project at various points, along with my rationale for those notes. Finally, I walked through the various setup that I performed on the various screens to get them on the display.

If you have followed this process through all 5 articles, thanks for your support, and I hope you take the time to look at some of the other articles on this site!

So what do you think? Did I miss something? Is any part unclear? Leave your comments below.

Comments