Making a Raspberry Pi status display (HPR Show 3039)

A project making use of my Pi 3A+, an old monitor and MagicMirror2

Dave Morriss


Table of Contents

Introduction

I have had a project on my To Do list for a while: to make a status display from a Raspberry Pi. My vision was to show the state of various things including some HPR stuff, and I had imagined setting up a Pi with a monitor and controlling it over SSH.

I started on the project over the Christmas period 2019. I have a Raspberry Pi 3A+, which is a sort of souped-up Pi Zero, which I bought on a whim and hadn’t found a use for (Yannick reviewed this RPi model in show 2711). I also had an old square Dell monitor from about 15 years ago which still worked (at least to begin with).

I had imagined I’d write some software of my own with a web front end which ran various tasks to monitor things.

However, in my researches I came across MagicMirror2 which I thought I might be able to use instead of writing my own thing.

MagicMirror2

The purpose of MagicMirror2 (MM2) is that it can be used to make a Smart Mirror. This is a physical mirror with a monitor mounted behind a two-way mirror panel made of glass or acrylic. While acting as a mirror the embedded monitor also shows information such as time, date and weather. There are many smart mirror building projects on YouTube, and various websites.

The MM2 software is written in JavaScript for use with Node.js and Electron. It has been designed in a modular form with a set of generally useful modules and an API which makes writing further modules by the community possible. There is an astonishing range of third-party modules available.

Requirements

The MM2 software is designed to run on a Raspberry Pi (model 2, 3 or 4) and needs the full Raspbian, not the Lite version.

Installation

This is dealt with well in the documentation. The recommended way to install the main application is using curl to download and pipe into Bash running under sudo. This did not feel right to me, so I worked my way through the script by hand to see what it was going to do. In the end the installation looked pretty safe (as far as I could tell).

It’s necessary to install Node.js through apt, clone the MM2 Github repository and to use the npm utility to install further components.

I had set up the Pi to run SSH with a shared key (as I do for all my RPi machines - see Ken Fallon’s show 2356). Controlling MM2 this way is a little awkward, so I followed advice to install pm2, a process manager for Node.js. This makes it easier to start and stop MM2.

Configuration

There are two key files which contain configuration information to manage MM2: config.js and custom.css.

config.js

The first file is MagicMirror/config/config.js which is a JavaScript data structure containing configuration details for MM2 itself and each of the modules being used. Depending on how you install MM2 this will contain the contents of a file called config.js.sample for the default modules shipped with the application.

It is amazingly easy to omit a comma or closing brace in the config.js file, and luckily there is a command that will check the file for you:

npm run config:check

custom.css

The second file is MagicMirror/css/custom.css which contains the CSS that controls the look of the interface, and can be changed to modify the representation of the modules. The name of this file is configurable, but I have left it as the default.

I have modified my copy of this file because I am not making a mirror but a display on a monitor. Each of the modules displays in a semi-transparent box over a static background image.

There are pitfalls in doing this because not all modules are as well-behaved with their use of CSS as I had expected. They sometimes assume the background is black with white lettering, rather than white with black, and this can cause some information to be rendered as white on white!

I have included my config.js and custom.css files along with this episode in case you want to look at them.

Modules

Currently I am using some of the default modules and a number of third-party ones. I will describe these briefly here. Each of the default modules is documented on the MM2 website showing the properties to be added to the modules array in config.js, and the third-party ones have documentation on their GitHub pages.

In general the module configurations look something like:

modules: [
    {
        module: "<NAME>",
        config: {
            position: "<POSITION>"
        }
    }
]

The modules array is required and holds a configuration object per module. These vary according to the needs of the module. Don’t forget the commas between the elements!

Default modules are in MagicMirror/modules/default/ and third-party ones need to be installed in MagicMirror/modules/.

Update Notification

This default module is used to display the availability of updates. I have positioned mine at the top of the screen, and have found it useful to get a reminder when updates are available.

Calendar

You can merge multiple iCal calendars into this default module, as I have done. I have also included my Google Calendar. Sadly you can’t just point it at an iCal file, which I would have liked to have done, since I have a static multi-year Astronomical calendar I’d like to display.

Clock

A default module which shows a digital or analogue clock with a date, in 12- or 24-hour format. Quite a lot of configuration options!

Current Weather

Default module which uses https://home.openweathermap.org/ for details and needs an account to get the necessary API key. Many configuration options.

News Feed

Default module which is capable of pulling news headlines from multiple sources. I have selected the Guardian and two BBC feeds. This took a while to set up, searching for the exact feeds I wanted and tuning them to my liking.

Weather Forecast

Another default module which is similar to Current Weather, uses OpenWeatherMap and needs an API key.

MMM-MQTT

Repository: https://github.com/ottopaulsen/MMM-MQTT

I use MQTT on my home network. I did an HPR show in 2016 about making a device to light RGB LEDs to signal when there were new HPR shows or comments needing attention. I use cron jobs to check for events and send MQTT messages to various brokers.

I wanted to be able to make the MM2 system into an MQTT message recipient, so first I installed the Mosquitto broker then set up the MMM-MQTT module to accept messages using the following topics: mm2/comments and mm2/shows. I also included topics mm2/info, mm2/urgent with no particular plan in mind at the time, and I haven’t yet used them!

The comment and show counts are quite useful. The LED display shows that there is work to do, but can’t indicate how many shows or comments. The MM2 display can do this however.

MMM-LothianBuses

Repository: https://github.com/tbouron/MMM-LothianBuses

This module interfaces to the API offered by the local bus company. I needed to apply for a (free) API key which took a while to arrive since the allocation process seems to be manual. I set up the module to monitor the bus stop nearest my house where the services go into Edinburgh. This seems like a useful feature. I can also see this data in an app on my phone but having a regularly updated status display seems like a good idea.

There are other similar modules available for MM2 catering for other transport systems.

MMM-Remote-Control

Repository: https://github.com/Jopyth/MMM-Remote-Control

This module allows me to view and control the MM2 installation through my phone (or any local PC). It sets up an HTTP interface which I can connect to with a browser and do things like check for updates, turn on and off (selected) modules, shut down the Pi, and so forth. I have not explored all of the possibilities yet.

I have created a desktop bookmark on my phone that takes me to the interface for this module. I have a rather old version of a Cyanogen Mod derivative (ResurrectionRemix) on my phone, and the browsers available to it are rather unpleasant, resulting in problems with access to this MM2 module.

Running system
Running system. The original monitor died but there was another little-used LG monitor available. I cheated here and grabbed a screenshot from a browser because my photos were pretty terrible!

Further Developments

  • I’m happy with MagicMirror2 to provide my status display, so I don’t think I’ll be moving away from it.

  • I’d like to tune some of the configuration and CSS settings a bit more. I suspect I still have hidden text somewhere in the display because I haven’t changed the colour of all text.

  • I’d like to learn how to write my own module. I have a static picture behind the module panels as seen in the screenshot, but I’d like to rotate between a set of pictures. There are modules that do something like this so I could adapt one of these.

  • I’d like to automate the turning off of the monitor. At the moment I use the front power switch to do this before I go to bed, but I’d like to completely remove power. To do this I’d like to set up a remote-control switch which is controlled by MQTT from the Pi that’s running MM2.

  • At the moment the Pi is simply resting on the shelf where the monitor is set up. This monitor has a VGA mounting point on the back, so I’d like to use it to hold the Pi in the case it’s in. I might need to make some 3D printed brackets for this.