Constructing a Sensible Lavatory Mirror was on my to-do listing for a very long time. I began with this venture 3 years in the past, however after I was nearly completed, we determined to purchase one other home. Now 3 years later I discovered the time to select the venture up once more.
For the venture, I’m going to make use of the MagicMirror2 open-source platform, a Raspberry Pi 3, and a 19-inch display from a pocket book. Initially, the plan was to make use of an LCD panel from a 24-inch monitor, however the LCD panel from a pocket book is far thinner.
On this article, I’m going to elucidate the best way to set up the sensible mirror software program and all of the used modules, and the best way to construct the mirror.
Necessities
Putting in and Configuring the Raspberry Pi
Earlier than we will configure the Sensible Mirror we first want to put in and configure the Raspberry Pi. This entails a few steps to put in the mandatory software program on the microSD card, configure the Pi with SSH, and, after all, set up the MagicMirror2 software program.
Step 1 – Set up Raspberry Pi OS
Step one is to put in Raspbian on the microSD card. To make use of the MaigcMirror we are going to want the desktop model of Raspberry Pi OS. To put in it on the microSD card we are going to use the Raspberry Pi Imager instrument.
With this instrument, we will’t solely set up Raspberry Pi OS but additionally allow SSH, configure the Wi-fi community, and set the username and password.
- Click on Select OS
- Choose Raspberry PI OS (32-bit)
- Click on on Select Storage
- Choose your microSD card, (test the drive letter!)
- Click on on the Gear icon within the decrease proper nook.
- Allow SSH with password authentication
- Set username and password
- Configure wi-fi LAN
Step 2 – Begin up and hook up with the Raspberry Pi
Plug the SDcard within the Raspberry Pi, USB-C energy cable, and join an ethernet cable for those who haven’t configured the WiFi The Raspberry Pi will now mechanically begin. It could possibly take a few minutes the primary time, optionally join a monitor if you wish to comply with the boot course of.
To seek out the IP Deal with of your Pi you need to use Superior IP Scanner or look when you’ve got an UniFi community, simply look within the shopper units listing.
We will now hook up with the Raspberry Pi over SSH. For this, you need to use any CLI, like Home windows Terminal, PowerShell, or Putty.
# Login to your Pi with SSH ssh [email protected]
Step 3 – Configure Raspberry PI
So we are actually linked to our newly put in Raspberry Pi. Earlier than we set up the MagicMirror software program, we’re first going to configure and replace the Pi. The very first thing we’re going to do is ready a hard and fast IP Deal with. This manner we will all the time simply hook up with the Pi and don’t should search for the IP Deal with.
- Open the community config file by typing the next cmd
sudo nano /and so forth/dhcpcd.<robust>conf</robust>
- Scroll a bit down and allow the next traces by eradicating the # from it:
# Instance static IP configuration: interface eth0 static ip_address=192.168.1.213/24 # < change this to IP Deal with that wish to use #static ip6_address=fd51:42f8:caae:d92e::ff/64 static routers=192.168.1.1 # < change this to your routers IP Deal with static domain_name_servers=192.168.1.1 1.1.1.1 # < change this to your routers IP Deal with and DNS
- Give your Pi a static IP Deal with within the .200 vary. Additionally, be sure you configure the router’s IP Deal with accurately.
When achieved save and shut the file by urgent ctrl + x and urgent Y to reserve it.
The subsequent step is to make it possible for the Pi is absolutely updated. Run the next command to put in the newest packages:
sudo apt-get replace && sudo apt-get improve -y && sudo apt-get autoremove && sudo apt-get autoclean
Set up and Configure MagicMirror
We are actually prepared to put in the MagicMirror software program. I’m going to do the handbook set up technique as a result of I prefer to know what’s being put in and the place. However I’ve to say that there’s additionally an set up script that you need to use. This script may also be used to mechanically replace the MagicMirror software program.
First, we’re going to set up Node.js:
# Set up Node.js curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt set up -y nodejs
The subsequent step is to clone and set up the MagicMirror software program. Operating npm set up can take as much as 10 min on a Raspberry Pi 3, with no to minimal console output. Simply give it a while!
# Clone the MagicMirror Repository git clone https://github.com/MichMich/MagicMirror # Navigate to the MagicMirror folder cd MagicMirror # Run the set up npm set up
The final step, for now, is to repeat the configuration file and begin the MagicMirror software program
# Copy the config file cp config/config.js.pattern config/config.js # Run the MagicMirror npm run begin
The MagicMirror ought to now begin with the default configuration.
Configuring Raspberry Pi OS
We now have the Pi and MagicMirror software program operating, now it’s time to configure the Pi and MagicMirror. When you have linked a monitor or different show to your Pi, you might need seen that the display orientation is inaccurate for our sensible mirror. Additionally, the display goes to sleep mode after a couple of seconds, and the MagicMirror doesn’t begin by itself.
So step one is to make some extra adjustments to our Pi:
- Rotate the display
- Disable screensaver
- Disguise mouse pointer
- Autostart MagicMirror
Rotate the display
To rotate the display we might want to change the config file /boot/config.txt. We shall be utilizing the nano to make the file adjustments:
sudo nano /and so forth/xdg/lxsession/LXDE-pi/autostart
Add the next traces to the tip of the file. Depart the file open for the following step.
@xrandr --output HDMI-1 --rotate proper # or left
Disable screensaver
The subsequent step is to make it possible for the display stays on. By default, the display will flip off after a couple of minutes. Add the next traces to the tip of the file, and save and shut the file with Ctrl + X , and press Y
# Add the traces under within the autostart file (sudo nano /and so forth/xdg/lxsession/LXDE-pi/autostart) @xset s noblank @xset s off @xset -dpms
We additionally have to edit the lightdm.conf file
sudo nano /and so forth/lightdm/lightdm.conf
Add the next traces to the tip of the file. Press Ctrl + X and kind Y to avoid wasting and shut the file.
[SeatDefaults] xserver-command=X -s 0 -dpms
Disguise the mouse pointer
As a result of we’re utilizing the total desktop model of Raspberry Pi OS, it’s attainable that the mouse pointer is displayed. To take away it we’re going to set up the bundle unclutter
sudo apt-get set up unclutter
We will add unclutter to the autostart file with the choice to take away the mouse pointer after 5 seconds when it’s not used
sudo nano /and so forth/xdg/lxsession/LXDE-pi/autostart # Add the next line to the tip of the file @unclutter -display :0 -idle 5 -root -noevents
Autostart MagicMirror
In case of an influence loss or if the MagicMirror software program crashes we wish the sensible mirror to restart mechanically. For this, we’re going to use the bundle PM2. It is a course of supervisor for Node.js functions.
# Set up PM2 sudo npm set up -g pm2 # Configure PM2 to start out on boot pm2 startup
PM2 will study your system and present you which ones command you must run to start out PM2 mechanically on boot. Merely copy and paste the urged command, in my case it was:
sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u pi --hp /house/pi
Subsequent, we’re going to create a begin script for our sensible mirror. Simply comply with the steps under to create the script:
cd ~ # navigate to your private home listing nano magicmirror.sh # Create a brand new shell file # Add the next traces within the recordsdata cd ./MagicMirror DISPLAY=:0 npm begin # Press Ctrl+X and kind Y to avoid wasting and shut the file # Make the file executable chmod +x magicmirror.sh # Begin the MagicMirror with pm2 begin magicmirror.sh pm2 save # Saves the present classes and makes certain that the software program is began after reboot
We will now additionally begin, cease and restart the MagicMirror with the next instructions:
sudo rebo pm2 cease magicmirror pm2 present magicmirror
We now have now made all the mandatory configuration adjustments to make use of the MagicMirror for our sensible mirror. Within the subsequent step, we’re going to configure the magic mirror with the modules that we wish to use.
Customizing the MagicMirror
With the Raspberry Pi configured we will begin customizing our Magic Mirror set up. There are many modules created for MagicMirror, however loads of them should not supported anymore. So I first created a plan of what I wished to show on the sensible mirror within the toilet.
When you will have a look at which modules you need to use, it’s necessary to test if they’re maintained. Every module that’s listed hyperlinks to a GitHub repository of the module. Right here you may clearly see when the final updates have been made on the module. If the final replace was greater than a yr in the past, then there’s a likelihood that the module received’t work anymore.
I’ve picked the next modules that I’m going to make use of for my Sensible Mirror:
Every module must be put in on the Raspberry Pi and configured. The configuration is finished within the config file that we copied earlier and is positioned in /house/pi/MagicMirror/config. Now we will modify the config file by way of the console, utilizing nano. However I discover it simpler to open the config file by way of the FTP shopper instrument.
Set up WinSCP and create a brand new session to your Raspberry Pi. You need to use the identical SSH credentials as you employ to hook up with Pi. Now you can browse to your config folder and open config.js.
I’ll describe under how I put in and configured every module, however you will discover the total documentation of the modules on their GitHub pages. You may also discover all of the configs and customized stylesheet that’s used right here in my GitHub repository.
Climate Module
We’re first going to put in the Climate module. To put in the module you will want to navigate to the MagicMirror/modules folder in your console.
# Open the modules folder # ~ is the house listing of the consumer Pi. cd ~/MagicMirror/modules # Clone (copy) the module git clone https://github.com/MarcLandis/MMM-OpenWeatherMapForecast.git # Open the module folder cd MMM-OpenWeatherMapForecast # Run the set up npm set up
This module will get the climate data from OpenWeatherMap.org. To do that you will want to create a free account and request an API key. Go to https://openweathermap.org and create a free account. As soon as full you may navigate to your profile to create an API Key.
Now might want to add the module to our config.js file. Open the file by way of your FPT shopper (WinSCP for instance) and change the calendar module with:
{
module: "MMM-OpenWeatherMapForecast",
header: false,
place: "top_left",
courses: "default everybody",
disabled: false,
config: {
apikey: "<api-key>",
latitude: "52.291610",
longitude: "4.578690",
updateInterval: "10",
items: "metric",
showSummary: true,
showForecastTableColumnHeaderIcons: false,
showHourlyForecast: true,
showDailyForecast: false,
forecastLayout: "tiled",
mainIconset: "6oa",
iconset: "1c",
animateMainIconOnly: true,
concise: true,
label_high: "",
label_low: "",
}
},
To view the outcomes, save the file and return to your console. Enter the next command to restart the sensible mirror and present the outcomes:
pm2 restart ~/magicmirror.sh
I’ve additionally achieved some customized styling for the modules, however we are going to get to that later.
Date – Time Module
For the clock, we will hold the built-in module. There are some configuration choices that we will change. We’re going to take away the second and use customized formatting for the date and time. Later we are going to use CSS to position the date under the time.
{
module: "clock",
place: "top_right",
config: {
displaySeconds: false,
dateFormat: "dddd, MMMM Do",
}
},
Journey Time
If you end up standing for the mirror within the morning it’s all the time good to know if you must rush resulting from visitors jams, take a detour, or simply can calm down. We shall be utilizing the Google Instructions API to calculate the 2 greatest routes to take.
First, we’re going to set up the module:
# Open the modules folder cd ~/MagicMirror/modules # Clone (copy) the module git clone https://github.com/mrdis/MMM-google-route.git
We’ll want a Google API key to get the route knowledge:
- Create an account on the Google Cloud Console
- After getting created a venture, click on on Enabled APIs and Companies
- Click on + Allow API and Companies within the prime heart
- Seek for Maps and select Maps JavaScript API
- Click on Allow and await it to complete
- Do the identical for Instructions API
- Go to Credentials within the left menu
- Click on + Create Credentials within the prime heart and select API key
- Copy your key and add it to your config file (see under)
To make use of the API additionally, you will have to hyperlink your Google Cloud Console venture to a billing account. We will use the API at no cost as much as $200 per thirty days. With regular configuration, you received’t attain that with the sensible mirror.
Return to your configuration file and add the next block to your modules listing:
{
module: 'MMM-google-route',
place: 'bottom_left',
config: {
key: '<YOUR_KEY>',
directionsRequest:{
origin: '<ROUTE START>',
vacation spot: '<ROUTE FINISH>'
},
refreshPeriod: 10,
showMap: false,
showAge: false,
width: "500px",
}
}
Google Calendar
The Magic Mirror comes with a built-in calendar, however that one is predicated on iCal or you will want additional modules to sync the calendar. The module that we’re going to use makes use of Google API to get your calendar data.
First, set up the module:
# Open the modules folder cd ~/MagicMirror/modules # Clone (copy) the module git clone https://github.com/randomBrainstormer/MMM-GoogleCalendar.git # Set up the Google API module npm set up googleapis
With the module put in, we’re going to add the configuration. Authentication could be achieved after the config file is utilized. You will want your Google calendar ID for the config. You will discover it by opening your Google Calendar, hovering over the calendar title on the left facet (for instance, hover over household), deciding on Settings, and scrolling a bit down for the id:
Add the next config, along with your calendar id to the config.js file:
{
module: 'MMM-GoogleCalendar',
header: "Upcoming appointments",
place: "bottom_right",
config: {
calendars: [
{
symbol: "calendar-day",
calendarID: "[email protected]"
},
],
maximumEntries: 5,
maximumNumberOfDays: 3,
displaySymbol: false,
fetchInterval: 3600000, // as soon as per hour
hideOngoing: true
}
},
Similar to with the journey time module, we might want to authenticate the module. As an alternative of an API key, we’re going to use the oAuth technique. For this technique, you will want to sign-in in the identical browser as the place the Magic Mirror software program is operating. To do that you may join a keyboard advert mouse or use VNC.
VNC can merely be enabled within the Raspberry Pi config:
- Sort
sudo raspi-configto open the configuration - Choose 3 Interface choices
- Select VNC
- Choose Sure and exit the config with Esc
Now you can use the instrument RealVNC to hook up with the Pi, utilizing the IP deal with and similar login as you might be utilizing for SSH. Observe the directions right here to authenticate the module.
Inventory Market
If you’re within the inventory markets, then the Just another Stock Ticker is a superb minimalistic choice. It matches good into the structure we’re creating and follows a number of inventory values. The information is retrieved from Yahoo’s finance API.
# Open the modules folder cd ~/MagicMirror/modules # Clone the repository git clone https://github.com/jalibu/MMM-Jast.git # Open the module folder and set up cd MMM-Jast npm set up --only=manufacturing
Add the next config to your config.js:
{
module: "MMM-Jast",
header: "Shares",
place: "bottom_left",
courses: 'restoftheday_scheduler',
config: {
currencyStyle: "code", // One among ["code", "symbol", "name"]
fadeSpeedInSeconds: 3.5,
lastUpdateFormat: "HH:mm",
maxChangeAge: 1 * 24 * 60 * 60 * 1000,
numberDecimalsPercentages: 1,
numberDecimalsValues: 2,
scroll: "none", // One among ["none", "vertical", "horizontal"]
showColors: false,
showCurrency: false,
showChangePercent: true,
showChangeValue: false,
showChangeValueCurrency: false,
showHiddenStocks: false,
showLastUpdate: false,
showPortfolioValue: false,
showPortfolioGrowthPercent: false,
showPortfolioGrowth: false,
updateIntervalInSeconds: 300,
useGrouping: false,
virtualHorizontalMultiplier: 2,
shares: [
{ name: "S&P 500 InfoTech", symbol: "QDVE.de"},
{ name: "Vanguard All-World", symbol: "VWCE.de"}
]
}
},
Scheduler
We’re going to use the scheduler module for 2 issues, to point out the journey time solely within the morning (and the remainder of the time the inventory market) and to solely refresh the journey time within the morning to restrict the API calls.
# Set up the Scheduler module # Open the modules folder cd ~/MagicMirror/modules # Clone the repository git clone https://github.com/ianperrin/MMM-ModuleScheduler.git # Run npm set up contained in the module folder cd MMM-ModuleScheduler npm set up --production
Subsequent, we might want to add the module to the config.js file. Simply add it under the Inventory market module.
{
module: 'MMM-ModuleScheduler',
config: {
notification_schedule: [
// Refresh the route every minute from 6 AM to 9:00 AM, monday to friday
{ notification: 'MMM-google-route/refresh', schedule: '* 6,9 * * 1-5' }
],
global_schedule: [
// SHOW MODULES WITH THE CLASS 'morning_scheduler' AT 06:00 AND HIDE AT 09:00 EVERY DAY
{from: '0 6 * * *', to: '0 9 * * *', groupClass: 'morning_scheduler'},
// SHOW MODULES WITH THE CLASS 'morning_scheduler' AT 09:00 AND HIDE AT 06:00 EVERY DAY
{from: '0 9 * * *', to: '0 6 * * *', groupClass: 'restoftheday_scheduler'}
]
}
},
Styling the Sensible Mirror
We now have all of the modules operating that we wish to use, however for those who restart the Magic Mirror you will note that the structure isn’t fairly what we wish. So we might want to do some extra styling to get the appears to be like that we wish.
The styling could be modified within the customized.css file which is positioned within the CSS folder. I’m utilizing a customized font, Lato, which I’ve positioned within the folder Fonts. We’re going to begin with some common styling after which I’ve created the styling for every module.
@import url('/fonts/latofonts.css');
:root {
--color-text: #999;
--color-text-dimmed: #666;
--color-text-bright: #fff;
--color-background: black;
--font-primary: "LatoWeb";
--font-secondary: "LatoWeb";
--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;
}
physique, html {
font-family: "LatoWeb", sans-serif;
}
.giant{
font-size: 4.25em;
font-family: 'LatoWebLight';
}
header{
border-bottom: none;
colour: #fff;
font-family: 'LatoWebLight';
font-size: 1.3em;
text-transform: none;
margin-bottom: 20px;
}
/*
Climate
*/
.MMM-OpenWeatherMapForecast{
width: 500px;
}
.MMM-OpenWeatherMapForecast .current-conditions-wrapper .present.feelslike{
font-size:2em;
line-height:60px;
}
.MMM-OpenWeatherMapForecast .abstract{
colour: #fff;
}
.MMM-OpenWeatherMapForecast .module-content{
width: 500px;
}
.MMM-OpenWeatherMapForecast .wrapper.tiled .forecast-container{
margin-left:-10px;
border:none;
width:300px;
}
.MMM-OpenWeatherMapForecast .wrapper.tiled .forecast-container .forecast-item .time, .MMM-OpenWeatherMapForecast .wrapper.tiled .forecast-container .forecast-item .day-name{
font-size:17px;
}
.MMM-OpenWeatherMapForecast .wrapper.tiled .forecast-container .forecast-item .precipitation-container, .MMM-OpenWeatherMapForecast .wrapper.tiled .forecast-container .forecast-item .wind-container{
show:none;
}
.MMM-OpenWeatherMapForecast .wrapper.tiled .forecast-container .forecast-item{
border-bottom:none;
}
/*
CLOCK
*/
#module_2_clock .digital {
show: flex;
flex-direction: column;
}
#module_2_clock div.date {
order: 2;
colour: #fff;
font-size: 1.3em;
font-family: 'LatoWebLight';
}
#module_2_clock div.time {
order: 1;
font-weight: 300;
font-size: 6em;
letter-spacing: -3px;
colour: #fff;
}
/*
Journey Time
*/
.area.backside.left, .area.backside.proper{
top: 250px;
}
.MMM-google-route header::earlier than{
show: inline-block;
font-style: regular;
font-variant: regular;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-weight: 400;
content material: "f017";
margin-right: 15px;
}
.MMM-google-route tr td:first-child{
width: 100px;
}
.MMM-google-route tr td:last-child{
width: 300px;
}
/*
Calendar
*/
.MMM-GoogleCalendar header::earlier than{
show: inline-block;
font-style: regular;
font-variant: regular;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-weight: 400;
content material: "f133";
margin-right: 15px;
}
/*
Inventory
*/
.MMM-Jast header::earlier than{
show: inline-block;
font-style: regular;
font-variant: regular;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-weight: 400;
content material: "f201";
margin-right: 15px;
}
.MMM-Jast .jast-stock{
font-size: 1rem;
line-height: 1.25;
colour: #fff;
width:400px;
}
.MMM-Jast .jast-stock span{
width:150px;
}
After you have got added the customized stylesheet you solely have to refresh the browser to see the outcomes.
Constructing the Sensible Lavatory Mirror
In our toilet, we’ve got a mirror cupboard with 3 doorways. I’m going to interchange the middle door with a customized door with a sensible mirror in it. To make the door I used waterproof plywood and minimize out the middle of the panel to suit the LCD show in. I’ve painted the plywood with matt black paint, this manner you’re going to get the most effective reflection from the mirror, and sealed the perimeters of the plywood with a wooden veneer edge banding.
For the mirror itself, you have got two choices:
The movie could be utilized to a sheet of acrylic and even to glass. The mirror movie is cheaper and when used with acrylic a lighter and safer choice. Acrylic could be bent to a sure extent and it doesn’t break.
However the benefit of two-way mirror glass is that the reflection of it’s a lot better, and likewise the visibility of the display is healthier when utilized in a well-lit atmosphere. You possibly can take a look at the video under for an excellent compression between the 2:
For those who go for the glass choice, then attempt to get the Pilkington MirroView glass. This glass is specifically designed for Sensible Mirrors.
You possibly can glue the glass onto the wooden, however just remember to use clear glue.
Wiring up the show
As talked about at first, I’ve chosen to make use of a show from a pocket book. The benefit of pocket book shows is that they’re very skinny, don’t require loads of energy, and are very mild. There’s nevertheless a draw back, you will want a customized controller for the show. The controller is used to energy the backlight of the show and join the HDMI cable to the Raspberry Pi.
You will discover these controller kits on Amazon and AliExpress. To seek out the right equipment you will want to search for the show quantity, which you will see that on the again of the show after eradicating it from the pocket book.
You may also purchase the shows (LCD display) on-line, for instance right here you will discover the 18,4″ show that I used.
We’d like a spot to mount the controller, inverter, and Raspberry Pi. I’ve used brass standoffs that I clued on the again of the LCD panel with tremendous glue. The standoffs assist you to simply mount the totally different boards and likewise to cover a few of the wires beneath them.
Mounting the Show
I’ve taped the perimeters of the show with black electrical tape. This manner they received’t be seen by way of the mirror. To maintain the show in place I’ve used small 10mm angle irons. All of the parts are nonetheless uncovered in the mean time, however I’ll most likely cowl it with a 3d printed plate.
The Sensible Mirror End result
I’ve used regular one-way mirror glass, and one of many downsides of it’s that the glass is a bit darker (a bit extra greyish as an alternative of blueish like a standard mirror). So with 3 mirrors side-by-side you clearly see a distinction. One other subject with it’s that as a result of tint of the glass, you get a much less brighter view of the show behind it.
For those who stand in entrance of the mirror, the textual content on the show is completely seen, however from an angle, you’ll barely see it. So I’m most likely going to interchange the one-way mirror with the Pilkington MirroView glass, though it’s nearly twice as costly.
The show panel self is barely seen. Within the image above you may clearly see the backlight of the panel, however in particular person, you solely discover it from an angle if the lights are off within the toilet. Whenever you stand in entrance of it, or when the lavatory lights are on, you received’t see the backlight from the LCD show, however you may nonetheless clearly see the knowledge on the display.
The mirroring operate continues to be excellent, there is no such thing as a distinction between the Sensible mirror and the conventional mirrors subsequent to it (in addition to the colour).
Wrapping Up
Sensible Mirrors should not new, they have been extremely popular round 2017. Personally, I discover the lavatory the right place for a sensible mirror. The data like upcoming appointments and journey time are actually useful within the morning.
The MagicMirror software program makes it very easy to get the software program up and operating. There are loads of modules obtainable in the mean time, however make it possible for they’re nonetheless maintained.
When you have any questions on this venture, then simply drop a remark under.
