Infodisplay With Raspberry Pi and Magic Mirror Software

In this instructable I will show you how I created a wooden frame that holds a controllable information display. It is built with plenty of space for future extensions (sensors, etc). A Raspberry Pi 3 acts as brain and is connected to a side bar with several good old fashioned physical buttons to control the display (display on/off, reboot, shutdown, camera etc). Well, yes, of course it has a camera too. To quickly get started I decided to use the wonderfully easy to use magic mirror software.

My first two extension projects were adding a temperature and humidity sensor and displaying it readings as magic mirror module and a motion sensor that controls a timer after which the display is turned off and on again once motion is detected.

Step 1: Ingredients and Design

Wood for constructing frame and front panel. I used a relatively robust 10mm thick board. Common tools for wood working (cutting, sanding, screws, wood glue, black spray paint)
Raspberry Pi 3
10" display (i used this IPS model from sunfounder with a resolution of 1280×800 pixels. It requires 9V and has a HDMI port. Its cheap looking acrylic frame is certainly no eye catcher, but won't be visible. Its multi-layered design provides fixing holes in the frame for easy mounting the display to the wooden frame. Moreover on its backsite it has a convenient raspberry pi mount. Spacers, Cables, power supply are included)
Raspberry Pi Camera Module v2
HC-SR501 Infrared PIR Motion Sensor Module (<2$ on ebay)
DHT22 temperature humidity sensor (<3$ on ebay)
PCF8574 IO Expansion Board (available e.g. from amazon)
a small plastic board for the buttons (i actually used the front panel of a cable duct)
Buttons (i used buttons similar to these)
Rocker switch for supply voltage (i used on of this kind)

Find attached two design. My initial plan was to create a tabletop design with buttons on the front side. Even though I decided to go with the second design, I included this plan here in case its better fits your ideas.

The second design is more or less what i built. There are two differences:

As I'm right handed I chose to move the button bar to the right side (as seen from the front) in contrary to what is shown in the plan. Initially my design was optimized to reduce cable length, but as it turned out, it was the right choice to go for better user experience
I increased the frame size that is now large enough to add a ton of pieces to play with (arduinos, modules, sensors or even a second screen)

Step 2: Build the Frame and Front Panel

I had access to a skilled partner (making things in a team is even more fun) and workshop with plenty of tools available.

First I trimmed the front panel to the required size and cut out the window. The sunfounder display comes with a detachable frame that I used as stencil. For the cutout I used a oscillating multi tool for the initial cuts and then a common jigsaw. The edge grinding and finishing was done with a dremel hand tool.
The frame pieces were cut with a table chain saw and a 45° angle to create the mitre joints. Using wood glue they were then combined and fixed with nails

Step 3: Preparing the Frame for the Cables Installations

Using a driller, the osciallating multi tool and a dremel rotary tool several holes at the bottom and top were created to allow for air circulation.
A small cutout was added for the supply voltage cable
For convenient wall mounting small metal bars were screwed to top-side cutouts
A little tricky was the camera cutout that was created layer by layer with a chisel and drilled hole for the camera lens
Finally I used a spray paint to cover the outside visible parts

Step 4: Mount the Display

The display was simply fixed with the four screws already included with the display frame.

Step 5: Build the Button Side Bar (for a Nice Old-school Feeling)

One option would have been to drill several holes directly into the side of the frame and mount the buttons there. However I decided otherwise. I built a simple removable button bar from a plastic board in order to stay flexible in case i want to add/remove or change anything with the buttons layout, add a LED, etc later on. Having no better alternative available at that day, I improvised and cut it out of a square-cut cable duct. The outlets were then drillend and cut out and buttons simply pushed through.

Next I soldered a daisy-chain on one pin of the buttons and wired it to GND of the rasperry pi with a removable pin header.

The other pins of the buttons were wired to the eight GPIO pins of a PCF8574 IO Expansion Board. This wonderful piece of electronics talks through the I2C bus to the Raspberry Pi. In fact it is possible to have 8 of these boards, for a total of 64 GPIOs requiring only the two SDA and SCL pins of the Raspberry.

I used a solid rocket switch to turn on/off the main power supply. In order to wire it up, the main power cable was cut and a connection to GND soldered through the switch.

Finally the button war was attached to the cutout part of the frame with two screws.

Step 6: Add the Camera

I used a Raspberry Pi Camera Module v2 that hosts a Sony IMX219 8-megapixel sensor. Don't know yet what I will be doing with it later on, but i felt that i may come handy later on.

The little flat cutout and lens hole created earlier on enclose the raw modul quite well. To hold it in place I used a small metal bar with some foam and duct tape that was screwed to the inside of the frame.

The camera is connected with the included DSI cable. Remember to later on also activate the camera module in Raspbian. If you're use a Raspi camera for the first time, follow the instructions on: https://www.raspberrypi.org/learning/getting-started-with-picamera/worksheet/

Step 7: Assemble Everything Together

Not much to say here, except good luck ;-)

Step 8: Install and Configure Magic Mirror Software

Despite from a few reflections on the display my project certainly is no mirror. Nevertheless I really love the MagicMirror project and what it does. I was briefly looking into other info display solutions but and even thought about building my own from scratch, but after installing the MagicMirror software and seeing how many useful modules were already available and ready to use within minutes, i decided otherwise - at least for the moment.

There are plenty of good instructions online on various pages, several of which are also on instructables.com. For this reason I will list here only the modules i'm currently using: Time, Weather Forecast, Google Calender, Realtime Underground/Bus Timetable of Vienna, Netatmo Weather Station, and a small self-created module for reading a DHT22 temperature and humidity sensor.

I configured MagicMirror to run at system start (from rc.local) with pm2 as process manager.

Step 9: [Optional] Add a PIR Motion Sensor to Turn On/off the Display

The HC-SR501 Infrared PIR Motion Sensor Module is a cheap but reliable and highly sensible piece of electronics to detect motion. There a two trim potentiometers for controlling sensitivity and time delay and some modules allow to switch between repeat and single trigger via a jumper. Wiring is described in step 7 and requires, next to VCC and GND, only a single connection that is normally low and raises to high in case motion is detected.

Even though there are magic mirror modules available to achieve something similar, I wanted a little more control and something that works independent of the magic mirror software. So I created a small C program piscreenctrl that watches for state changes of the PIR sensor, turns the display on if motion is detected and switches if automatically off after a certain period of time has elapsed without any movements.

Step 10: [Optional] Add a Local DHT22 Temperature and Humidity Sensor

In order to get familiar with writing MagicMirror modules, I chose to integrate a DHT22 temperature and humidity sensor connected to the Raspberrys GPIOs. You can find the MMM-dht22 module at GitHub https://github.com/nebulx29/MMM-dht22. You'll find instructions there.

The MMM-dht22 module is only a frontend for another small program that reads the DHT22 sensor and outputs its values to the commandline. It is located at https://github.com/nebulx29/dht22. The necessary wiring is relatively simply as in addition to VCC and GND only a one wire data connection is required. Wiring diagram is shown in step 7.

Step 11: [Optional] Integrate With Netamo Weather Station

Adding weather data from a netamo weather station is pretty easy. There is a ready to use magic mirror modul by CFenner that only needs to be configured with your credentials.

Instructions and download available at: https://github.com/CFenner/MagicMirror-Netatmo-Module

Step 12: [Optional] Adding a WebUI

Despite being listed here as one of the last steps, programming a simple webUI was actually one of the first things i did, long before even thinking on the design on of the frame and deciding which controls i would want.

You can find the webUI code on Github, but be warned it is pretty raw, and currently without instructions or documentation. It consists of a few PHP pages that run on an apache2 web server and it provides a few basic controls essential to my use case, such as display certain log files, reboot/shutdown, display on/off and start/stop magic mirror software.

I also installed Monitorix and phpSysinfo and linked it form the site.

Step 13: Future Plans

Here are some ideas for future enhancements

integrate with Sonos (there's a module available, so should be easy)
integrate with Philips Hue
add a second pi with a touch display below running openHAB or FHEM

Stay tuned and read you soon!

Looking forward to your comments and ideas...

Introduction: Infodisplay With Raspberry Pi and Magic Mirror Software