165 lines
14 KiB
HTML
165 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="generator" content="pandoc">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
|||
|
|
<meta name="author" content="Dave Morriss">
|
|||
|
|
<title>Making a Raspberry Pi status display (HPR Show 3039)</title>
|
|||
|
|
<style type="text/css">code{white-space: pre;}</style>
|
|||
|
|
<!--[if lt IE 9]>
|
|||
|
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|||
|
|
<![endif]-->
|
|||
|
|
<link rel="stylesheet" href="http://hackerpublicradio.org/css/hpr.css">
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body id="home">
|
|||
|
|
<div id="container" class="shadow">
|
|||
|
|
<header>
|
|||
|
|
<h1 class="title">Making a Raspberry Pi status display (HPR Show 3039)</h1>
|
|||
|
|
<h2 class="subtitle">A project making use of my Pi 3A+, an old monitor and MagicMirror2</h2>
|
|||
|
|
<h2 class="author">Dave Morriss</h2>
|
|||
|
|
<hr/>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<main id="maincontent">
|
|||
|
|
<article>
|
|||
|
|
<header>
|
|||
|
|
<h1>Table of Contents</h1>
|
|||
|
|
<nav id="TOC">
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#introduction">Introduction</a></li>
|
|||
|
|
<li><a href="#magicmirror2">MagicMirror<sup>2</sup></a><ul>
|
|||
|
|
<li><a href="#requirements">Requirements</a></li>
|
|||
|
|
<li><a href="#installation">Installation</a></li>
|
|||
|
|
<li><a href="#configuration">Configuration</a><ul>
|
|||
|
|
<li><a href="#config.js">config.js</a></li>
|
|||
|
|
<li><a href="#custom.css">custom.css</a></li>
|
|||
|
|
</ul></li>
|
|||
|
|
<li><a href="#modules">Modules</a><ul>
|
|||
|
|
<li><a href="#update-notification">Update Notification</a></li>
|
|||
|
|
<li><a href="#calendar">Calendar</a></li>
|
|||
|
|
<li><a href="#clock">Clock</a></li>
|
|||
|
|
<li><a href="#current-weather">Current Weather</a></li>
|
|||
|
|
<li><a href="#news-feed">News Feed</a></li>
|
|||
|
|
<li><a href="#weather-forecast">Weather Forecast</a></li>
|
|||
|
|
<li><a href="#mmm-mqtt">MMM-MQTT</a></li>
|
|||
|
|
<li><a href="#mmm-lothianbuses">MMM-LothianBuses</a></li>
|
|||
|
|
<li><a href="#mmm-remote-control">MMM-Remote-Control</a></li>
|
|||
|
|
</ul></li>
|
|||
|
|
</ul></li>
|
|||
|
|
<li><a href="#further-developments">Further Developments</a></li>
|
|||
|
|
<li><a href="#links">Links</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</nav>
|
|||
|
|
</header>
|
|||
|
|
<h2 id="introduction">Introduction</h2>
|
|||
|
|
<p>I have had a project on my <em>To Do</em> 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.</p>
|
|||
|
|
<p>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 <a href="https://hackerpublicradio.org/eps/hpr2711" title="hpr2711 :: Raspberry Pi 3A+ Review">2711</a>). I also had an old square Dell monitor from about 15 years ago which still worked (at least to begin with).</p>
|
|||
|
|
<p>I had imagined I’d write some software of my own with a web front end which ran various tasks to monitor things.</p>
|
|||
|
|
<p>However, in my researches I came across <em>MagicMirror<sup>2</sup></em> which I thought I might be able to use instead of writing my own thing.</p>
|
|||
|
|
<h2 id="magicmirror2">MagicMirror<sup>2</sup></h2>
|
|||
|
|
<p>The purpose of MagicMirror<sup>2</sup> (<em>MM2</em>) is that it can be used to make a <a href="https://smartmirrorguide.com/" title="Smart Mirror Guide"><em>Smart Mirror</em></a>. 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.</p>
|
|||
|
|
<p>The <em>MM2</em> software is written in <a href="https://en.wikipedia.org/wiki/JavaScript" title="JavaScript programming language">JavaScript</a> for use with <a href="https://en.wikipedia.org/wiki/Node.js" title="JavaScript runtime environment">Node.js</a> and <a href="https://en.wikipedia.org/wiki/Electron_%28software_framework%29" title="Software framework">Electron</a>. 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.</p>
|
|||
|
|
<h3 id="requirements">Requirements</h3>
|
|||
|
|
<p>The <em>MM2</em> software is designed to run on a Raspberry Pi (model 2, 3 or 4) and needs the full Raspbian, not the <em>Lite</em> version.</p>
|
|||
|
|
<h3 id="installation">Installation</h3>
|
|||
|
|
<p>This is dealt with well in the documentation. The recommended way to install the main application is using <code>curl</code> to download and pipe into Bash running under <code>sudo</code>. 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).</p>
|
|||
|
|
<p>It’s necessary to install <code>Node.js</code> through <code>apt</code>, clone the <em>MM2</em> Github repository and to use the <code>npm</code> utility to install further components.</p>
|
|||
|
|
<p>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 <a href="https://hackerpublicradio.org/eps/hpr2356" title="hpr2356 :: Safely enabling ssh in the default Raspbian Image">show 2356</a>). Controlling <em>MM2</em> this way is a little awkward, so I followed advice to install <code>pm2</code>, a process manager for <code>Node.js</code>. This makes it easier to start and stop <em>MM2</em>.</p>
|
|||
|
|
<h3 id="configuration">Configuration</h3>
|
|||
|
|
<p>There are two key files which contain configuration information to manage <em>MM2</em>: <code>config.js</code> and <code>custom.css</code>.</p>
|
|||
|
|
<h4 id="config.js">config.js</h4>
|
|||
|
|
<p>The first file is <code>MagicMirror/config/config.js</code> which is a JavaScript data structure containing configuration details for <em>MM2</em> itself and each of the modules being used. Depending on how you install <em>MM2</em> this will contain the contents of a file called <code>config.js.sample</code> for the default modules shipped with the application.</p>
|
|||
|
|
<p>It is amazingly easy to omit a comma or closing brace in the <code>config.js</code> file, and luckily there is a command that will check the file for you:</p>
|
|||
|
|
<pre><code>npm run config:check</code></pre>
|
|||
|
|
<h4 id="custom.css">custom.css</h4>
|
|||
|
|
<p>The second file is <code>MagicMirror/css/custom.css</code> 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.</p>
|
|||
|
|
<p>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.</p>
|
|||
|
|
<p>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!</p>
|
|||
|
|
<p>I have included my <a href="hpr3039_config.js"><code>config.js</code></a> and <a href="hpr3039_custom.css"><code>custom.css</code></a> files along with this episode in case you want to look at them.</p>
|
|||
|
|
<h3 id="modules">Modules</h3>
|
|||
|
|
<p>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 <em>MM2</em> website showing the properties to be added to the <code>modules</code> array in <code>config.js</code>, and the third-party ones have documentation on their GitHub pages.</p>
|
|||
|
|
<p>In general the module configurations look something like:</p>
|
|||
|
|
<pre><code>modules: [
|
|||
|
|
{
|
|||
|
|
module: "<NAME>",
|
|||
|
|
config: {
|
|||
|
|
position: "<POSITION>"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]</code></pre>
|
|||
|
|
<p>The <code>modules</code> 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!</p>
|
|||
|
|
<p>Default modules are in <code>MagicMirror/modules/default/</code> and third-party ones need to be installed in <code>MagicMirror/modules/</code>.</p>
|
|||
|
|
<h4 id="update-notification">Update Notification</h4>
|
|||
|
|
<p>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.</p>
|
|||
|
|
<h4 id="calendar">Calendar</h4>
|
|||
|
|
<p>You can merge multiple <em>iCal</em> 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.</p>
|
|||
|
|
<h4 id="clock">Clock</h4>
|
|||
|
|
<p>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!</p>
|
|||
|
|
<h4 id="current-weather">Current Weather</h4>
|
|||
|
|
<p>Default module which uses https://home.openweathermap.org/ for details and needs an account to get the necessary API key. Many configuration options.</p>
|
|||
|
|
<h4 id="news-feed">News Feed</h4>
|
|||
|
|
<p>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.</p>
|
|||
|
|
<h4 id="weather-forecast">Weather Forecast</h4>
|
|||
|
|
<p>Another default module which is similar to Current Weather, uses OpenWeatherMap and needs an API key.</p>
|
|||
|
|
<h4 id="mmm-mqtt">MMM-MQTT</h4>
|
|||
|
|
<p>Repository: <a href="https://github.com/ottopaulsen/MMM-MQTT" class="uri">https://github.com/ottopaulsen/MMM-MQTT</a></p>
|
|||
|
|
<p>I use MQTT on my home network. I did an <a href="https://hackerpublicradio.org/eps/hpr2173" title="hpr2173 :: Driving a Blinkt! as an IoT device">HPR show in 2016</a> 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.</p>
|
|||
|
|
<p>I wanted to be able to make the <em>MM2</em> system into an MQTT message recipient, so first I installed the <code>Mosquitto</code> broker then set up the <code>MMM-MQTT</code> module to accept messages using the following topics: <code>mm2/comments</code> and <code>mm2/shows</code>. I also included topics <code>mm2/info</code>, <code>mm2/urgent</code> with no particular plan in mind at the time, and I haven’t yet used them!</p>
|
|||
|
|
<p>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 <em>MM2</em> display can do this however.</p>
|
|||
|
|
<h4 id="mmm-lothianbuses">MMM-LothianBuses</h4>
|
|||
|
|
<p>Repository: <a href="https://github.com/tbouron/MMM-LothianBuses" class="uri">https://github.com/tbouron/MMM-LothianBuses</a></p>
|
|||
|
|
<p>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.</p>
|
|||
|
|
<p>There are other similar modules available for <em>MM2</em> catering for other transport systems.</p>
|
|||
|
|
<h4 id="mmm-remote-control">MMM-Remote-Control</h4>
|
|||
|
|
<p>Repository: <a href="https://github.com/Jopyth/MMM-Remote-Control" class="uri">https://github.com/Jopyth/MMM-Remote-Control</a></p>
|
|||
|
|
<p>This module allows me to view and control the <em>MM2</em> 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.</p>
|
|||
|
|
<p>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 (<em>ResurrectionRemix</em>) on my phone, and the browsers available to it are rather unpleasant, resulting in problems with access to this <em>MM2</em> module.</p>
|
|||
|
|
<p><img src="hpr3039_screenshot.png" alt="Running system" /><br />
|
|||
|
|
<em>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!</em></p>
|
|||
|
|
<h2 id="further-developments">Further Developments</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li><p>I’m happy with MagicMirror<sup>2</sup> to provide my status display, so I don’t think I’ll be moving away from it.</p></li>
|
|||
|
|
<li><p>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.</p></li>
|
|||
|
|
<li><p>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.</p></li>
|
|||
|
|
<li><p>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 <em>MM2</em>.</p></li>
|
|||
|
|
<li><p>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.</p></li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="links">Links</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>JavaScript programming language:
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="https://en.wikipedia.org/wiki/JavaScript">Wikipedia entry</a></li>
|
|||
|
|
</ul></li>
|
|||
|
|
<li>Node.js JavaScript runtime environment:
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="https://nodejs.org/en/">Website</a></li>
|
|||
|
|
<li><a href="https://en.wikipedia.org/wiki/Node.js">Wikipedia entry</a></li>
|
|||
|
|
</ul></li>
|
|||
|
|
<li>Electron software framework:
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="https://www.electronjs.org/">Website</a></li>
|
|||
|
|
<li><a href="https://en.wikipedia.org/wiki/Electron_%28software_framework%29">Wikipedia entry</a></li>
|
|||
|
|
</ul></li>
|
|||
|
|
<li>MagicMirror<sup>2</sup>:
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="https://github.com/MichMich/MagicMirror">GitHub page</a></li>
|
|||
|
|
<li><a href="https://magicmirror.builders/">Website</a></li>
|
|||
|
|
<li><a href="https://github.com/MichMich/MagicMirror/wiki/3rd-party-modules">List of third-party modules</a></li>
|
|||
|
|
</ul></li>
|
|||
|
|
<li>Resources:
|
|||
|
|
<ul>
|
|||
|
|
<li>Example files:
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="hpr3039_config.js">config.js</a></li>
|
|||
|
|
<li><a href="hpr3039_custom.css">custom.css</a></li>
|
|||
|
|
</ul></li>
|
|||
|
|
</ul></li>
|
|||
|
|
</ul>
|
|||
|
|
</article>
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|