I had first seen smart mirrors online several years ago and have been meaning to create one ever since, my requirements were to be able to see the time, weather, calendar and news. The great thing about it is the unlimited possibility for customization if your a novice or an experienced veteran.
The process of creating a smart mirror is fairly well documented with many examples available online, however all of these were high budget and therefore out of reach for many hobbyists. That’s why I started working on my plans for a budget smart mirror which still maintained the key functionality and aesthetics of the premium designs.
Check out my GitHub profile Uskompuf to see all the other projects I have been working on!
Parts List:
- Frame - Kmart poster frame $15 (You can use any frame larger than your monitor)
- Glass - Included in frame $0 (I used the included plastic protector with reflective film however for a more premium finish you can get a custom double sided mirror made to size with VLT of around 15-20%)
- Reflective Film - Generic window film $10 (Any film with 15-20% VLT should work)
- Monitor - 1080p 21”+ $10-150 (I purchased a preowned monitor off gumtree but news ones can be had for ~$120)
- Backing Board - 9mm MDF panel $15 (I found that any panel larger than frame works well to mount monitor to frame)
- Pine - Primed Pine $10 (I used this to deepen my frame to accommodate electronics and reinforcement)
- Computer - Raspberry Pi 3/4 $59 (I used a Pi 3b+ however with the release of Pi 4 this is now the best choice)
- Adapters - Video, Power, Case, Micro SD $50
On the low end I completed this project for ~$100 as I had many parts already, I recommend you set a budget early on as costs can escalate quickly :)
Construction:
I did not plan the construction and this resulted in a dead monitor and lots of wasted wood, so learn from my mistakes and measure twice cut once! Below is how I would construct it, if I did it again.
Step 1
The first step is to choose your frame and monitor, try to ensure your monitor is bright enough to be seen under the mirror in a bright room. Once you have decided on these you can then create your reflective surface.
Step 2
To create the reflective surface I applied a roll of mirror film to the frames included plastic protector using the provided tools, this results in a silver tilt and some surface bubbles but still very acceptable.To avoid this you can get a custom made double sided mirror but beware these can cost hundreds.
Ben from Ben Eagan YouTube has a great video on the subject which can be viewed here.
Step 3
Once I had the frame, monitor and reflective surface I had to mount the monitor, I traced the monitor onto a piece of MDF mounted to the front, I then used pine to clamp the backside of the monitor to the frame. Finally I finished up the sides with more pine and MDF, be aware this can result in a very heavy and thick end product.
Step 4
Once the frame was constructed and the monitor was mounted, I had to secure and wire the electrical components, I attached the raspberry Pi to the monitor and mounted it on the back, I ran the power for the pi and monitor to a powerboard which powers the mirror.
Coding:
This is a great beginner project as the software is dead simple to setup and configure.
Download and flash the latest of Raspbian desktop to a micro SD and setup wifi/ssh/samba you can see guides here for those, then to install the magic mirror software run this one command in the terminal:
bash -c "$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)"
This will give you an initial starting point from which you can configure to your heart's desire, I have outlined some of the changes I made below. Here is my final version.
Auto Start:
To ensure the monitor starts up on power I followed this guide on MagicMirror’s github page but I will briefly explain it here.
#Install PM2 sudo npm install -g pm2 #Start PM2 on boot pm2 startup #Create Startup Script cd ~ nano mm.sh cd ~/MagicMirror DISPLAY=:0 npm start chmod +x mm.sh #Start and save script pm2 start mm.sh pm2 save
Configuring Modules:
Magic Mirror comes with several default modules which can be configured by changing config/config.js you can access the file locally, via SSH or Samba. To enable 3rd party modules you need to add them to config/config.js to view all available options see here.
Personally I used the following configurations:
Calendar:
I changed the default US Holidays to AU Holidays by changing the header and url.
Weather:
I disabled the built in module instead opting for MMM-DarkSkyForecast which allowed for greater customisation.
I had to sign up for a free API at: https://darksky.net/dev
Then I installed the module with:
Navigate into your MagicMirror modules folder and execute
git clone https://github.com/jclarke0000/MMM-DarkSkyForecast.git
Enter the new MMM-DarkSkyForecast directory and execute\
npm install
I configured the module with my lat/lon and choose my preferred iconset from the table below.
My complete code can be seen below (attachments downloadable at botton of Project)
Schedule:
I used MMM-ModuleScheduler to set up a cycle for my mirror.
The module uses cron expression for the time this website will help you get the correct code. I have my mirror set up to run during 7:00-21:00 weekdays and 9:00-22:00 weekends using the code below.
Code:
/* 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
*
*/
var config = {
address: "ip", // 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,
ipWhitelist: [],
language: "en",
timeFormat: 12,
units: "metric",
modules: [
{
module: "alert",
},
{
module: "MMM-Remote-Control",
},
{
module: "updatenotification",
position: "top_bar"
},
{
module: "MMM-ModuleScheduler",
config: {
notification_schedule: [
// TURN THE MONITOR/SCREEN ON AT 07:00 EVERY weekday
{notification: 'REMOTE_ACTION', schedule: '0 7 * * 1-5', payload: {action: "MONITORON"}},
// TURN THE MONITOR/SCREEN OFF AT 09:00 EVERY weekday
{notification: 'REMOTE_ACTION', schedule: '0 21 * * 0-4', payload: {action: "MONITOROFF"}},
// TURN THE MONITOR/SCREEN ON AT 09:00 EVERY weekend
{notification: 'REMOTE_ACTION', schedule: '0 9 * * 0,6', payload: {action: "MONITORON"}},
// TURN THE MONITOR/SCREEN OFF AT 10:00 EVERY DAY
{notification: 'REMOTE_ACTION', schedule: '0 21 * * 5-6', payload: {action: "MONITOROFF"}}
]
}
},
{
module: "clock",
position: "top_left",
config: {
timezone: "Australia/Sydney"
}
},
{
module: "calendar",
header: "AU Holidays",
position: "top_left",
config: {
calendars: [
{
symbol: "calendar-check",
url: "webcal://www.calendarlabs.com/ical-calendar/ics/35/Australia_Holidays.ics"
}
]
}
},
{
module: "MMM-DarkSkyForecast",
header: "Weather",
position: "top_right",
config: {
showExtraCurrentConditions: "false",
maxDailiesToShow: "7",
apikey: "key",
latitude: "lat",
longitude: "lon",
iconset: "3c",
showWind: false,
forecastLayout: "table",
colored: false
}
},
{
module: "newsfeed",
position: "bottom_bar",
config: {
feeds: [
{
title: "BBC World News",
url: "http://feeds.bbci.co.uk/news/world/rss.xml"
}
],
showSourceTitle: true,
showPublishDate: true,
broadcastNewsFeeds: true,
broadcastNewsUpdates: true
}
},
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}
config.js
Displaying config.js.
Summary:
I have only briefly covered some of the many features of Magic Mirror here so make sure to read the wiki for greater detail. You can add voice control, touch support, integrations and much more!
