If you’re a complete novice to JavaScript, don’t worry too much about this process. Remember, the idea is to learn through trial and error and create a product that instills some pride. One way to build skills is to start editing and adding to the configuration file copy that you created in the previous section. The nice part about editing this file is that if your syntax is wrong or there’s a typo living somewhere in your document, the Magic Mirror will display a screen that alerts you to this problem. So there’s no harm in trying it out!
If you find it difficult to fix any problems or errors in the script, be mindful that there are browser-based JavaScript editors online that help you find the errors in your code. It comes down to a matter of copying and pasting, so I’d encourage you to turn to a website such as JSLint, found at http://www.jslint.com/. So, on to the configuration file as a whole:
/* 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: "localhost", // 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: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
// or add a specific IPv4 of 192.168.1.5 :
// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
language: "en",
timeFormat: 24,
units: "metric",
modules: [
{
module: "alert",
},
{
module: "updatenotification",
position: "top_bar"
},
{
module: "clock",
position: "top_left"
},
{
module: "calendar",
header: "US Holidays",
position: "top_left",
config: {
calendars: [
{
symbol: "calendar-check-o ",
url: "webcal://www.calendarlabs.com/templates/ical/US-Holidays.ics"
}
]
}
},
{
module: "compliments",
position: "lower_third"
},
{
module: "currentweather",
position: "top_right",
config: {
location: "New York",
locationID: "", //ID from http://www.openweathermap.org/help/city_list.txt
appid: "YOUR_OPENWEATHER_API_KEY"
}
},
{
module: "weatherforecast",
position: "top_right",
header: "Weather Forecast",
config: {
location: "New York",
locationID: "5128581", //ID from http://www.openweathermap.org/help/city_list.txt
appid: "YOUR_OPENWEATHER_API_KEY"
}
},
{
module: "newsfeed",
position: "bottom_bar",
config: {
feeds: [
{
title: "New York Times",
url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
}
],
showSourceTitle: true,
showPublishDate: true
}
},
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
While reprinted here, you can also access this file for editing by employing the use of the nano function in the command line. As always, make sure that you're in the configuration directory found within the Magic Mirror directory: /home/pi/MagicMirror/configuration. At this point, you want to tell the Pi that you wish to edit config.js. In order to do that, type sudo nano config.js into the command line. This will bring up the preceding file text on your screen, where you can easily move the cursor around to add and remove items.
In terms of observation, there are a few items to which I wish to call your attention. Toward the top of the script, you’ll notice that there are some initial customizable options, such as port, ipWhitelist, language, timeFormat, and units. Let’s explore each briefly:
- port: Not to be confused with a USB port, this is regarded as the endpoint of information in an operating system. You can change the port address, but 8080 is the conventional address that you’ll see used somewhat ubiquitously as your personally hosted web server. Over your local network, it’s easily accessed and can be used to view your Magic Mirror in a browser, as opposed to the application view. As a side note, running the Magic Mirror on a local host would be useful if you wanted multiple browser displays showing the same information. Some museums and venues use this setup for guests.
- ipWhitelist: If you’d like to remote into your Magic Mirror, you’ll have to add the IP address of the machine you’d like to use. With updates to the Magic Mirror happening frequently, I would suggest that you look to the active Magic Mirror community and its discussions in case there are any issues.
- language: While setting to English, you also have the options of nl, ru, and fr, Dutch, Russian, and French, respectively.
- timeFormat: You can change this from the 24-hour clock format to the 12-hour format by inputting 12 in this space.
- units: While setting to metric, you can replace this with imperial.
After going through these preferential settings, you’ll notice that the body of the script deals directly with the modules that are going to be displayed on your screen. You’ll notice a pattern with the curly brackets, as they enclose each module. There is a standardization to how each module is set up, which may be helpful if you find yourself puzzled about how to incorporate preferences and variables:
{
module: 'module name',
position: 'position',
header: 'optional header',
config: {
extra option: 'value'
}
},
