Finished “Smart Mirror”? Here are 6 things to install immediately

Hello friends. This is the second in a series of tutorials on making your own Magic Mirror. This time we learn about the 8 basic modules in Magic Mirror. Modules are the components that make up the interface of MagicMirror, so learning about the module is extremely necessary.

You can watch videos on Youtube with the keyword “8 basic Magic Mirror modules” ./

What is a module?

Magic Mirror displays information out by components, each on-screen component is called modules. As shown below, each section is circled as a module. We have calendar module, news display module, greeting module …

Where to configure the module?

As the previous post I mentioned. We have the main configuration for Magic Mirror in the config.js file located in the MagicMirror / config folder . All module configurations are located in the modules section inside the config.js file as you can see in the figure.

What are basic modules?

MagicMirror has 8 basic modules as you see below.

Clock Calendar Current Weather Weather Forecast News Feed Compliments Hello World Alert

You can see these 8 modules at GitHub of MagicMirror . On this link you will reach the website as shown below.

1 / Module Clock:

Go into the specific Clock module, you see the author has instructed us how to configure the module.

“module”: declare the name, this section we declare according to the instructions of each module

“position”: you declare position to determine the position where the module will be placed. We have other values: top_bar , top_left , top_center , top_right , upper_third , middle_center , lower_third , bottom_left , bottom_center , bottom_right , bottom_bar , fullscreen_above , and fullscreen_below

“config”: we declare the configuration for the module here.

Let’s say we want to convert an existing digital (digital) clock into a round analog clock. We need to add a displayType: “analog” in the config section of the Clock module (you see the config.js section below).

{
module: “clock”,
position: “top_left”
config: {
displayType: “analog”
}
},

Additional instructions can be found in the Magic Mirror github as you can see on the right of the image below.

And the result is we have a classic analog watch face.

2 / Calendar Module

You see below the clock is the calendar. However, by default, we have the US calendar. If you want to change to Vietnamese calendar, please change this link to the available link:

https://www.calendarlabs.com/ical-calendar/ics/77/Vietnam_Holidays.ics

As a result, we have Independence Day (September 2). How to change it into Vietnamese, I will talk later.

3 / Module Current Weather and Weather Forecast:

These two modules use Openweather data together. You follow the following way so we configure to the right where we live. You go to this link to download a zip file:

http://bulk.openweathermap.org/sample/city.list.json.gz

Download and extract the zip file, you will get a file city.list.json as shown below. This file contains information about locations around the world. You press Ctrl – F and type to find the city you live in. I searched for “Thanh pho Ho Chi Minh” . And I found the corresponding ID is 1566083 . You copy this ID again.

Back in the config.js file, paste the above ID into the locationID.

Next we will get appID.

You go to the following link.

https://openweathermap.org/api

Then register 1 account. Log in. You choose API Key. Then copy the KEY again.

Then you paste in the config.js file as shown below:

Save and run the Magic Mirror, we will see the result in the upper right corner.

4 / Module News Feed:

This module will help you get news to show at the bottom of the screen (of course, you can change positions). By default, MagicMirror gets news from NewYork and BBC. I will show you how to get Vietnamese news. You enter Google to type “news rss”. Then you select the news web that you often see. For example, I choose Youth. I copy the URL as follows:

https://tuoitre.vn/rss/tin-moi-nhat.rss

I copy this line to the config of the News feed module

{
module: “newsfeed”,
position: “bottom_bar”,

config: {

feeds: [

{

title: “New York Times”,

url: “https://tuoitre.vn/rss/tin-moi-nhat.rss”

}

],

showSourceTitle: true,

showPublishDate: true,

broadcastNewsFeeds: true,

broadcastNewsUpdates: true

}

},

Rerun MagicMirror, you will see Vietnamese news appear.

5 / Module Compliments:

This module presents greetings, also looks cute. If you want to change these sentences to your liking, then you need to change the configuration content in the module compliments. Change “Hey there sexy”, “Hello, beauty”, “You look sexy” …. to the content you want.

And here is the result, the screen displays Hello, MINH =)

6 / Module Hello World and Alert:

The Hello World module is a basic module, only the task of displaying one line of text, so there is nothing more to discuss.

The Alert module will be mentioned in the following posts because this is a slightly difficult module.

Hopefully through this article you will be familiar with 8 basic modules of MagicMirror. The following article I will talk about many better issues. You can watch the videos on Youtube with the keyword “8 basic Magic Mirror modules”. Wish you happy with this tutorial.