The MagicMirror is essentially the brain of a smart mirror, telling it what to display (like calendars or even slack messages) and how to format it using the customization the user implemented in its files.

## Hardware

Let’s first look at the hardware I used:

• Raspberry Pi 4, including the power cable, etc…
• TV
• HDMI cable

## Software

Lets see what the MagicMirror looks like on the inside!

Once you flashed the latest version of the Raspbian OS, you will need to do two things. To run the MagicMirrror, you will need to update your Raspberry Pi using the command sudo apt-get upgrade –yes and download the interface by using the command bash -c “\$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)”. When all of that is done, you will be able to go into the MagicMirror repertory by using the command cd ~/MagicMirror and run it from there using the command npm start.

Path to CSS: /home/pi/MagicMirror/css

Path to config.js: /home/pi/MagicMirror/config

html {
cursor: none;
overflow: hidden;
background: #9932CC;
}

::-webkit-scrollbar {
display: none;
}

body {
margin: 60px;
position: absolute;
height: calc(100% - 120px);
width: calc(100% - 120px);
background: #9932CC;
color: #aaa;
font-family: "Roboto Condensed", sans-serif;
font-weight: 400;
font-size: 2em;
line-height: 1.5em;
-webkit-font-smoothing: antialiased;
}


This is where you will have to go if you want to change your mirror’s background color to another color or even a picture. There are two backgrounds you will have to redefine: one is located in the HTML section of the CSS file and the other is in the body section of the CSS file. To change the color, you will need to look up what color you would like and get its hexadecimal representation. Once you have found those, you will need to change the default hexadecimal values that came with the mirror and save your changes.

.xsmall {
font-size: 40px;
line-height: 85px;
}

.small {
font-size: 40px;
line-height: 85px;
}

.medium {
font-size: 60px;
line-height: 85px;
}

.large {
font-size: 130px;
line-height: 85px;
}

.xlarge {
font-size: 150px;
line-height: 85px;
letter-spacing: -3px;
}


These are the sizes of the fonts used by the mirror. They are also easily changeable and depend on one’s liking. The font-size is going to change the size of the letters the mirror uses and the line-height determines how spread out each line is from each other.

	{
module: "currentweather",
position: "top_right",
config: {
location: "Chapel Hill",
locationID: "4460162",  //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
}
},
{
module: "weatherforecast",
position: "top_right",
config: {
location: "Chapel Hill",
locationID: "4460162",  //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
}
},



To change what location’s weather your mirror will display, you will need to go to bulk.openweathermap.org and look up your city. Once you’ve done that, get the API key for your location and change the default location your mirror currently displays to the one you want to have. Current Weather will display the weather at the current time and weather forecast will display weather for the entire week. Optional: you can create a slack module which displays messages from a given server, you just need the slack token for it and implement it in the config.js file.

{
module: "newsfeed",
position: "bottom_bar",
config: {
feeds: [
{
title: "New York Times",
},
{
title: "CNN",
},
{
title: "ESPN",
}
],
showSourceTitle: true,
showPublishDate: true,
}
},


These are also optional, as the MagicMirror comes with the New York Times as a default source, but can be changed by getting the API key from news sources you want your mirror to display (CNN or ESPN for example). If you want to have the date at which the headline was published or which news source it came from, you will have to copy what is at the bottom of the picture if it doesn’t come as default with the mirror files.

		{
module: "calendar",
position: "center",
config: {
showLocation: true,
maxTitleLength: 50,
wrapEvents: true,
maximumEntries: 17,
calendars: [
{
symbol: "calendar-check",
},
{
symbol: "rocket",
}
]
}


This is the last thing I modified to better fit our family. The mirror comes with a default calendar of US holidays, which is not very useful, so I added our family’s calendar so that everyone that passes by can check what they have to do. You can modify your calendars by changing the icon it will display (we have two, a check and a rocket), decide if you want it to show the location of the event, have a character cap for each event, and have a set number of events your calendar will display.

## Was it a good project?

I was not very familiar with programming and still managed to finish the project. I believe this is a good project to do when you want someone to learn the basics of programming and of its applications, as well as computer architecture, as you also have to work with the shell to manipulate files.

More help:

## 4 thoughts on “Keep your family updated using MagicMirror”

1. Francois Perrin says:

Hi Nath, can I put my own calendar tasks on this system? is there a way to keep some tasks “private”?

1. Nathaniel Perrin says:

Hi! Yes, you can put your own calendar, but you will have to make it public. Once you make your calendar public, you should be able to find a link that redirects you to your calendar, which is what you will need to use if you want the mirror to display your calendar. As far as I know, no tasks can be made private so that only one person can see it.

2. Francois Perrin says:

Clear! thank you.
By asking the question on privacy, I just wanted to test the technical limitations of ur system!

1. Nathaniel Perrin says: