HPR/hpr_website
8
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Move under www to ease rsync

Browse Source
This commit is contained in:
Ken Fallon
2025-10-29 10:51:15 +01:00
parent 2bb22c7583
commit 30ad62e938
890 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
www/eps/hpr3039/hpr3039_config.js Executable file
View File

@@ -0,0 +1,215 @@
/* Magic Mirror Config Sample
*
* By Michael Teeuw http://michaelteeuw.nl
* MIT Licensed.
*
* For more information how you can configurate this file
* See https://github.com/MichMich/MagicMirror#configuration
*
* This is a modified version of my live file with API keys and similar removed. To be used in the
* HPR show "Making a Raspberry Pi status display"
*
*/
var config = {
address: "0.0.0.0", // Address to listen on, can be:
// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
// - another specific IPv4/6 to listen on a specific interface
// - "", "0.0.0.0", "::" to listen on any interface
// Default, when address config is left out, is "localhost"
port: 8080,
// Modified for MMM-Remote-Control
ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1", "192.168.0.0/24", "::ffff:192.168.0.0/24"],
// Set [] to allow all IP addresses or add a specific IPv4 of 192.168.1.5
// : ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"], or
// IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format
// : ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
language: "en",
timeFormat: 24,
units: "metric",
modules: [
// Update Notification
{
module: "updatenotification",
position: "top_bar"
},
// Clock
{
module: "clock",
position: "top_left",
showWeek: true,
timezone: 'Europe/London'
},
// Calendar
{
module: "calendar",
header: "Calendar",
position: "top_left",
config: {
colored: true,
maxTitleLength: 30,
fade: false,
calendars: [{
// Secret address. Go to "Settings" in the calendar, click on the particular
// calendar that's wanted, and scroll down to "Integrate Calendar"
name: "Google Calendar",
url: "https://calendar.google.com/calendar/ical/dave.morriss%40gmail.com/private-##########/basic.ics",
symbol: "calendar-check",
color: "#825BFF" // violet-ish
},
{
// Calendar uses repeated 'RDATE' entries, which this iCal parser
// doesn't seem to recognise. Only the next event is visible, and
// the calendar has to be refreshed *after* the event has passed.
name: "HPR Community News recordings",
url: "http://hackerpublicradio.org/HPR_Community_News_schedule.ics",
symbol: "calendar-check",
color: "#C465A7" // purple
},
{
name: "Bank Holidays England and Wales",
url: "https://www.gov.uk/bank-holidays/england-and-wales.ics",
symbol: "calendar",
color: "#0040FF" // medium blue
},
{
name: "Bank Holidays Scotland",
url: "https://www.gov.uk/bank-holidays/scotland.ics",
symbol: "calendar",
color: "#C05A58" // brownish
},
{
name: "Bank Holidays NI",
url: "https://www.gov.uk/bank-holidays/northern-ireland.ics",
symbol: "calendar",
color: "#006600" // darker green
}
]
}
},
// Current Weather
{
module: "currentweather",
position: "top_right",
config: {
location: "City of Edinburgh",
locationID: "3333229",
appid: "############################",
useLocationAsHeader: true
}
},
// Weather Forecast
{
module: "weatherforecast",
position: "top_right",
header: "Weather Forecast",
config: {
location: "City of Edinburgh",
locationID: "3333229",
appid: "############################",
useLocationAsHeader: true,
fade: false,
colored: true,
}
},
// News Feed
{
module: "newsfeed",
position: "bottom_bar",
config: {
feeds: [{
title: "Guardian World",
url: "https://www.theguardian.com/world/rss",
},
{
title: "BBC World",
url: "http://feeds.bbci.co.uk/news/world/rss.xml",
},
{
title: "BBC UK",
url: "http://feeds.bbci.co.uk/news/uk/rss.xml",
},
],
showSourceTitle: true,
showPublishDate: true,
broadcastNewsFeeds: true,
broadcastNewsUpdates: true
}
},
// MMM-MQTT
{
module: 'MMM-MQTT',
position: 'top_left',
header: 'MQTT',
config: {
logging: false,
useWildcards: false,
mqttServers: [{
address: 'localhost', // Server address or IP address
port: '1883', // Port number if other than default
subscriptions: [{
// HPR pending comments
topic: 'mm2/comments',
label: 'Comments:',
sortOrder: 10,
maxAgeSeconds: 60
},
{
// HPR pending shows
topic: 'mm2/shows',
label: 'Shows :',
sortOrder: 20,
maxAgeSeconds: 60
},
{
topic: 'mm2/info',
label: 'Info :',
sortOrder: 30,
maxAgeSeconds: 60
},
{
topic: 'mm2/urgent',
label: 'Urgent :',
sortOrder: 40,
maxAgeSeconds: 120
},
]
}],
}
},
// MMM-LothianBuses
{
module: 'MMM-LothianBuses',
header: 'Buses',
position: 'top_right',
config: {
apiKey: '############################################',
busStopIds: [
'36237526',
]
}
},
// MMM-Remote-Control
{
module: 'MMM-Remote-Control',
config: {
customCommand: {}, // Optional, See "Using Custom Commands" below
customMenu: "custom_menu.json", // Optional, See "Custom Menu Items" below
showModuleApiMenu: true, // Optional, Enable the Module Controls menu
}
},
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {
module.exports = config;
}
/*
vim: set syntax=javascript ts=8 sw=4 ai et tw=100 fo=tcrqn21:
*/

94
www/eps/hpr3039/hpr3039_custom.css Executable file
View File

@@ -0,0 +1,94 @@
/* Some ideas based on a YT tutorial https://www.youtube.com/watch?v=OXpJylI3rG */
body {
color: #000;
/* Seascape with rocks */
background-image: url("115514-1440x900.jpg");
// Alternative background colour before the image was chosen
background-color: #CCFFCC;
background-position: center;
background-size: cover;
}
/*
* Change the background and forground colours throughout the modules so that each is displayed in
* a white semi-transparent panel with dark lettering.
*/
.module.alert {
color: rgba(255, 127, 0, 0.6);
}
.module.updatenotification {
color: rgba(255, 255, 255, 0.6);
}
.module.calendar {
background-color: rgba(255, 255, 255, 0.9);
color: #000;
border-radius: 8px;
padding: 8px;
}
.module.clock {
background-color: rgba(255, 255, 255, 0.9);
color: #000;
border-radius: 8px;
padding: 8px;
}
.module.currentweather {
background-color: rgba(255, 255, 255, 0.9);
color: #000;
border-radius: 8px;
padding: 8px;
}
.module.weatherforecast {
background-color: rgba(255, 255, 255, 0.9);
color: #000;
border-radius: 8px;
padding: 8px;
}
.module.MMM-MQTT {
background-color: rgba(255, 255, 255, 0.9);
color: #000;
border-radius: 8px;
padding: 8px;
}
.module.newsfeed {
background-color: rgba(255, 255, 255, 0.9);
color: #000;
border-radius: 8px;
padding: 8px;
}
.module.MMM-LothianBuses {
background-color: rgba(255, 255, 255, 0.9);
color: #000;
border-radius: 8px;
padding: 8px;
}
.dimmed {
color: #000;
}
.normal {
color: #000;
}
.bright {
color: #000;
}
.header {
color: #000;
}
/*
vim: set syntax=css ts=8 sw=4 ai et tw=100 fo=tcrqn21:
*/

164
www/eps/hpr3039/hpr3039_full_shownotes.html Executable file
View File

@@ -0,0 +1,164 @@
<!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: &quot;&lt;NAME&gt;&quot;,
config: {
position: &quot;&lt;POSITION&gt;&quot;
}
}
]</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>

BIN
www/eps/hpr3039/hpr3039_screenshot.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB