Help... I need help installing 3rd party modules to Magic Mirror 2

joeytuck

Hi everyone,

I’m painfully new to any form of programming and could really use an assist on the proper way to install 3rd party modules on MagicMirror. I keep running into config.js issues on load up whenever I try to install a non factory module into the config.js file. I am trying to go by the instructions on github for mmm-traffic and to be honest I don’t even understand where or how to execute the files or where to do the npm install? Like I said, hardcore beginner. Any help would be greatly appreciated. This is a birthday present that I’m building and I’m already late with it.

Anhalter42

Welcome joeytuck,

did you get it to run without additional 3rd party modules?
if yes, share your config.js so we can have a look at it

broberg

@joeytuck

Okey first of, when in your terminal typ cd MagicMirror/modules/ this will get you directly to your modules folder.

after that you should type git clone https://github.com/SamLewis0602/MMM-Traffic.git
This command will create a new folder called MMM-Traffic and copy all files for the module.
When that is done you typ
cd MMM-Traffic to enter the MMM-Traffic folder.

When you have done that and are in the folder you type npm install, this will install all dependencies, i e stuff that is needed for the traffic module to work.

Then open your config.js file and find the last ]

Before that ] you add

{
	module: 'MMM-Traffic',
	position: 'top_left',
	classes: 'dimmed medium', //optional, default is 'bright medium', only applies to commute info not route_name
	config: {
		api_key: 'your_apikey_here',
		mode: 'driving',
		origin: '4 Pennsylvania Plaza, New York, NY 10001',
		destination: '1 MetLife Stadium Dr, East Rutherford, NJ 07073',
		arrival_time: '0800', //optional, but needs to be in 24 hour time if used.
		route_name: 'Home to Work',
		changeColor: true,
		showGreen: false,
		limitYellow: 5, //Greater than 5% of journey time due to traffic
		limitRed: 20, //Greater than 20% of journey time due to traffic
		traffic_model: 'pessimistic',
		interval: 120000, //2 minutes
		showWeekend: false,
		allTime: false
	}
},

Now you need to change the api key above where it says api_key: 'your_apikey_here',

replace your_apikey_here with the needed api key and make sure not to remove the ' around the api key.

joeytuck

Thank you for the replies. I did get Magic Mirror working for the initial setup prior to the 3rd party addition. I was missing the cd MMM-Traffic npm install portion. I did the npm install through Tools Open Folder in Terminal the first time. Not sure if that accomplishes the same goal? Itś still giving me the config.js error. Here is what I have for a config file with my personal info and API key copied and pasted directly from Google redacted.

		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
		}
	},

{
		module:´MMM-Traffic´,
		position: ´bottom_right´
		classes: ´dimmed medium´,
		config:  {
			api_key: ´

´,
mode: ´driving´,
origin: ´´,
destination: ´´,
arrival_time: ´´,
route_name: ´Home to Work´,
changeColor: true,
showgreen: false,
limitYellow: 5,
limitRed: 20,
traffic_model: ´pessimistic´,
interval: 120000,
showWeekend: true
allTime: true
}
},
]

};

joeytuck

		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
		}
	},

{
		module:´MMM-Traffic´,
		position: ´bottom_right´
		classes: ´dimmed medium´,
		config:  {
			api_key: ´´,
			mode: ´driving´,
			origin: ´´,
			destination: ´´,
			arrival_time: ´´,
			route_name: ´Home to Work´,
			changeColor: true,
			showgreen: false,
			limitYellow: 5,
			limitRed: 20,
			traffic_model: ´pessimistic´,
			interval: 120000, 
			showWeekend: true
			allTime: true

}
},
]

};

broberg

@joeytuck

you are missing a , after showWeekend: true,

joeytuck

Good catch. I added the comma, saved the config file and tried pi@raspberrypi: ~/MagicMirror $ npm start To no avail. Do I need to do anything to the MMM-Traffic config.js file defaults?

broberg

@joeytuck there is also another comma missing after the position line

joeytuck

Added that comma as well and itś still failing. Hereś what Iḿ getting.

pi@raspberrypi:~/MagicMirror $ npm start

magicmirror@2.1.1 start /home/pi/MagicMirror
sh run-start.sh

Starting MagicMirror: v2.1.1
Loading config …
WARNING! Could not validate config file. Please correct syntax errors. Starting with default configuration.
Loading module helpers …
Initializing new module helper …
Module helper loaded: updatenotification
No helper found for module: helloworld.
All module helpers loaded.
Starting server on port 8080 …
Starting server op port 8080 …
Server started …
Connecting socket for: updatenotification
Sockets connected & modules started …
Launching application.

joeytuck

This has been kicking my butt for the last day and a half. Learning a lot during the beating though. Do I need to add ’ ’ around numeric values as well?

joeytuck

Also, do I need to do anything to the MMM-Traffic.js file defaults like adding the api_key or changing values to match my selections on the config.js file? It seems like it’s really easy when I read the readme files and I’m looking forward to that being the case. Any help in taking a step in the right direction would be much appreciated.

joeytuck

Fixed the config errors. Turns out that if you put Drive, instead of Dr, it won’t recognize it. Unfortunately, now Magic Mirror is starting normally but I don’t see the MMM-Traffic module being displayed. I’ve tried multiple screen positions and nothing.

Anhalter42

@joeytuck said in Help... I need help installing 3rd party modules to Magic Mirror 2:

Do I need to add ’ ’ around numeric values as well?

Usually you don’t. It distinguishes between (for example) the NUMBER 5 and the TEXT containing “5”. To be sure, you should look at the default values and just do it in the same way. For example, arrival_time seems to require " " even though the given example “1445” also could have been a plain number (I guess the reason is the leading 0 at for example “0800” which gets ignored when inputting as number)

Also, you got some strange quotation marks ´ ´. Until now I thought, only " " and ’ ’ were valid.

Anhalter42

@joeytuck said in Help... I need help installing 3rd party modules to Magic Mirror 2:

Also, do I need to do anything to the MMM-Traffic.js file defaults like adding the api_key or changing values to match my selections on the config.js file?

No. To include the MMM-Traffic module you just have to include it in your config.js (providing all the required settings).

@joeytuck said

Turns out that if you put Drive, instead of Dr, it won’t recognize it.

Where do you put Drive or Dr? In the readMe, possible values for “mode” are described to be ‘driving’, ‘walking’, ‘bicycling’, ‘transit’.

I suggest to delete or comment (adding // before the line) all not-required settings of MMM-Traffic at first to minimize possible sources for errors.

joeytuck

I’ve noticed that my quotation marks are a different font and wondered if that would be an issue? If I copy the quotation marks on the config file and use those in place of the ones that I key on my keyboard it works. I got the program to run but it’s not reflecting the addition of the module even though in the script it says that it’s installing and helpers are installing. As far as the Dr, vs. Drive that was in the addresses that I input. When doing for example Cherry Drive it gave me a config error. But Cherry Dr did not.

joeytuck

I removed all the forward // text not required for the code and MMM-Traffic still won’t populate on my mirror. Is there any code that limits it to only the factory module placement?

Anhalter42

I suspect the quotation marks not only to be in a different font but to be different signs. This is indeed an issue since javascript defines strings by double (") and single quotes (') only (for reference see: https://www.w3schools.com/jsref/jsref_obj_string.asp).

So, just to be sure: After removing unnecessary properties you have a config.js that looks something like this minimal example

var config = {
  port: 8080,
  
  modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		[...]
		{
			module: 'MMM-Traffic',
			position: 'top_left',
			config: {
				api_key: 'your_apikey_here',
				origin: '4 Pennsylvania Plaza, New York, NY 10001',
				destination: '1 MetLife Stadium Dr, East Rutherford, NJ 07073'
			}
		},
  ]

};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}

with some content from the default config.js at the “[…]” places, your API-key instead of " ‘your_apikey_here’ " and possibly some lines commented out by prepending “//”, correct?

The fact that the MM2 starts without error message about config.js indicates, that the issue is within the properties you set, i.e. the origin/destination or the API key.
Some suggestions:

Did you try to run it with default properties of the MMM-Traffic module (the ones I copied above)? Of course you have to input your own API key.
Did you check whether your API key is valid?
2.a Is your API key configured correctly? As far as I know you have to login into google account and there assign the key to a project and get the access restrictions right.
2.b In case you didn’t copy the key: have you checked for typos?

If you use default config.js parameters and example parameters from MMM-Traffic module it should run. From there, you can incrementally add your changes and figure out, which property leads to the issue.

joeytuck

},

{
module: ‘MMM-Traffic’,
position: ‘bottom_right’,
classes: ‘bright small’,
config: {
api_key: ‘api key redacted’,
mode: ‘driving’,
origin: ‘origin redacted’,
destination: ‘destination address redacted’,
arrival_time: ‘’,
route_name: ‘Home to Work’,
changeColor: true,
showGreen: false,
limitYellow: 5,
limitRed: 20,
traffic_model: ‘pessimistic’,
interval: 120000,
showWeekend: true,
allTime: false
}
},
{
module: “newsfeed”,
position: “bottom_bar”,
config: {
feeds: [

I copied my API key from Google directly but Iĺl register for another one and give that a shot.

joeytuck

@joeytuck Tried a new API key and still no luck. Moved the module to a different portion of the config file just to see if there was somehow a limit on the amount of allowed modules that I haven’t been able to find. Still nothing.

joeytuck

@joeytuck Okay, so I deleted the MMM-Traffic folder and files that I had and did a new git clone and npm install for a fresh start. It works!! I’m sure I’m at fault for doing something stupid within the MMM-Traffic config file like changing a comma or something. Really happy about this one and I am very thankful for everyones help! I’ve learned quite a bit more about this than I thought I would need to. Onto wunderground!