Build a Digital Signage with Magic Mirror
Digital Signage Happy Share MagicMirror
If you have a spare monitor, you can build a digital signage with MagicMirror. MagicMirror is an open source project that allows you to display information on a monitor. You can display the weather, news, calendar, and more.
Quick Start
MagicMirror is mainly built and tested with Raspberry Pi. However, for the purpose of better demonstration how to configure your own module, in this article, we will run source code with Node.js 18 to serve a web page.
!!! note You can use fnm to install Node.js 18.
# Clone the repository
git clone https://github.com/MichMich/MagicMirror.git
cd MagicMirror/
npm run install-mm:dev
cp config/config.js.sample config/config.js
# Run the server and open http://0.0.0.0:8080 in your browser
npm run server
# or run with electron app
npm run start
Configuration
MagicMirror is highly configurable. You can change the position of modules, add new modules, and more. You can find the configuration file at config/config.js. Let’s start with a basic config.js showing only the clock module.
let config = {
address: '0.0.0.0',
port: 8080,
basePath: '/',
ipWhitelist: [],
useHttps: false,
language: 'en',
locale: 'en-US',
logLevel: ['INFO', 'LOG', 'WARN', 'ERROR'], // Add "DEBUG" for even more logging
timeFormat: 24,
units: 'metric',
modules: [
{
module: 'clock',
position: 'top_left',
},
],
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== 'undefined') {
module.exports = config;
}
You shall see the changes after you refresh the page.
Notice that we have added a default module clock to the modules array. The default modules are provided by MagicMirror, you can more configuration option for clock here.
Adding more default modules
Newsfeed
We can add a newsfeed module to display the latest news from New York Times. Add the following configuration to the modules array.
You can add or change the feeds to your favorite RSS source by editing title and url.
{
module: "newsfeed",
position: "bottom_bar",
animateIn: "slideInLeft",
animateOut: "slideOutRight",
config: {
feeds: [
{
title: "New York Times",
url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml"
}
],
showSourceTitle: true,
showPublishDate: true,
broadcastNewsFeeds: true,
broadcastNewsUpdates: true
}
}
Notice that we have configured animateIn and animateOut to make the newsfeed slide in and out. There are more common module arguments you can use, you can find them here.
Weather
Now we are going to add the weather module for displaying both current and 7 days forecast weather. Change the lat and lon to your location.
{
module: "weather",
position: "top_right",
config: {
weatherProvider: "openmeteo",
type: "current",
// Open-Meteo Required Settings
apiBase: "https://api.open-meteo.com/v1",
lat: 43.65107,
lon: -79.347015
}
},
{
module: "weather",
position: "top_right",
config: {
weatherProvider: "openmeteo",
type: "forecast",
maxNumberOfDays: 7,
// Open-Meteo Required Settings
apiBase: "https://api.open-meteo.com/v1",
lat: 43.65107,
lon: -79.347015
}
}
The default configuration is using openweathermap as the weather provider, which will require an API key to retrieve data. In order to avoid the hassle of getting an API key, we are going to use openmeteo as the weather provider.
Calendar
We can also add a calendar module to display the upcoming events from any ics file.
{
module: "calendar",
header: "Ontraio Holidays",
position: "top_left",
config: {
calendars: [
{
url: "https://canada-holidays.ca/ics/ON",
symbol: "calendar"
}
]
}
}
Adding custom modules
MMM-WeatherBackground
Notice that the default background of MagicMirror is black, this is because MagicMirror is designed to be used for smart mirror, which require a black background to reflect the monitor. However, we can change the background to a weather background by installing a custom module.
MagicMirror Module – Displays a background from Unsplash based upon your weather module. This module requires a working weather module to function.
git clone https://github.com/BrianHepler/MMM-WeatherBackground.git modules/MMM-WeatherBackground
We have cloned the module to modules folder, now let’s configure the module in config.js.
{
module: "MMM-WeatherBackground",
config: {
verbose: false, // If you want to leave some log message, set this as true
source: "weather", // "weather", "MMM-NOAA3", "MMM-DarkskyForecast". If you want to use different source, manually set `notification` and `payloadConverter`
size: null, // "1920x480", whatever....
hemisphere: "n", // 'n', 's' or null/false (For backward compatibility) // will be deprecated. use monthMap instead.
monthMap: ["NewYear", "winter", "spring", "spring flower", "joy", "summer rain", "summer beach", "summer vacation", "autumn", "autumn leaves", "winter", "christmas"], // set your custom keyword for each month.
//monthMap: ['winter', 'winter', 'spring', 'spring', 'spring', 'summer', 'summer', 'summer', 'autumn', 'autumn', 'autumn', 'winter'],//
//monthMap: null, false, or []
targetDOM: ".fullscreen.below", //null or DomSelector for target. (if null, weather will be targeted.)
notification: null, // when you need another `source` from `source, modify this.
payloadConverter: null, // your custom payloadConverter callback.
defaultCollection: null, // When matched collection not found, this will be used.
externalCollections: "collections.json", // or null. // I recommend you rename this file to prevent update-conflicts.
collections: {} // This will be combined with externalCollections. (For backward compatibility)
}
}
Since we have configured weather module, the MMM-WeatherBackground will automatically use the weather data to search for a background image in Unsplash.
MMM-BackgroundYouTube
MMM-BackgroundYouTube is a simple module that allows you to use a YouTube video as your background with a videoID. This module will be conflict with MMM-WeatherBackground, so we will disable the MMM-WeatherBackground module.
# In your MagicMirror directory
git submodule add -f https://github.com/wickes1/MMM-BackgroundYouTube.git modules/MMM-BackgroundYouTube
{
module: "MMM-BackgroundYouTube",
position: "fullscreen_below",
config: {
videoID: "jfKfPfyJRdk"
}
}
After refresh the page, you shall see the YouTube video playing in the background. The video is muted and looped.
Notice that some common issues when embedding YouTube video in a web page, find more information here if your video is not playing.
Custom CSS
Since MagicMirror is designed to be used for smart mirror, the default style is not suitable for digital signage. We will customize the style for brighter text.
To customize the style of the modules in global, you can add custom CSS to css/custom.css.
:root {
--color-text: #999;
--color-text-dimmed: #666;
--color-text-bright: #fff;
--color-background: black;
--font-primary: 'Roboto Condensed';
--font-secondary: 'Roboto';
--font-size: 20px;
--font-size-small: 0.75rem;
--gap-body-top: 60px;
--gap-body-right: 60px;
--gap-body-bottom: 60px;
--gap-body-left: 60px;
--gap-modules: 30px;
}
.normal,
.dimmed,
header,
body {
color: #fff;
}
.module-content {
overflow: hidden;
}
After refresh the page, you shall see the brighter text now.
Conclusion
In this article, we have learned how to build a digital signage with MagicMirror. MagicMirror is highly configurable and extensible, you can not only display the information, but also embedding voice assistant. Check out the 3rd Party Module for building a more powerful digital signage!
Find the source code of this article on GitHub Gist.