Keep your family updated using MagicMirror

In this article, you will find a list of hardware for this project, where to go to download it, and how to customize it to fit your needs and/or your family’s needs.

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.

As COVID-19 made its way to the United States and marked an early end to the school year, it meant I had more time on my hands to do personal projects. This time has been filled by a project called the MagicMirror. The MagicMirror, unlike its name suggests, doesn’t use magic to do anything. I used this tool to produce an interface that allows its user to see a linked calendar, time, weather, slack messages, etc… through a Raspberry Pi and some patience. To make the MagicMirror interface, I first needed a working Raspberry Pi. I tested the program on a Raspberry Pi 3, which I then plugged into a tv, but settled on a Raspberry Pi 4. I then looked for the files needed for the project. After looking around GitHub and other resources, I found an upload of those files by MichMich, which I then proceeded to download onto the Raspberry Pi. Once the download was finished, I opened the default Unix shell in the Raspberry Pi and started working. On my way to success, I encountered many problems that seemed impossible to fix as I don’t know much about programming, and I decided to ask for help. I asked my dad for help, as he knows how to work around a Raspberry Pi. So with his help, we fixed problems like node.js that didn’t want to update or the whole program not running, but we eventually got it to run. After a while, I was asked to change the properties of the interface, such as some aesthetic components or to add more news channels to a ‘news section’ I created in the MagicMirror, which shows the most recent headlines and news from main channels such as CNN. All of these changes are done in the CSS and config files in the MagicMirror folder.

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
				appid: "<get your own id>"
			}
		},
		{
			module: "weatherforecast",
			position: "top_right",
			header: "Weather Forecast",
			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
				appid: "<get your own id>"
			}
		},

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",
						url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
					},
					{
						title: "CNN",
						url: "http://rss.cnn.com/rss/cnn_topstories.rss"
					},
					{
						title: "ESPN",
						url: "http://www.espn.com/espn/rss/news"
					}
				],
				showSourceTitle: true,
				showPublishDate: true,
				broadcastNewsFeeds: true,
				broadcastNewsUpdates: 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",
			header: "Family Calendar",
			position: "center",
			config: {
				showLocation: true,
				maxTitleLength: 50,
				wrapEvents: true,
				maximumEntries: 17,
				calendars: [
					{
						symbol: "calendar-check",
						url: "<your webcal url>"					
					},
					{
						symbol: "rocket",
						url: "<your webcal url>"
					}
				]
			}

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:

• https://magicmirror.builders/
• https://github.com/MichMich/MagicMirror
• https://howchoo.com/g/ntcymzbimjv/how-to-install-magic-mirror-on-your-raspberry-pi