How to add modules. For absolute beginners.

[sdetweil]

@Dask you should use a terminal window, and cd ~/MagicMirror/modules/??? where ??? is the module name

and then type
``
npm install

ONLY of there is a file called package.json present in the module folder
(npm install reads that file)

and hit enter
node and npm are installed system wide so there should be no problem

[BKeyport]

@Dask I’ll walk you through this one, same for most non-scripted modules:

assuming MagicMirror is installed with defaults:

1. go to your modules directory: cd ~/MagicMirror/modules/
2. Clone the module to get it on your machine: git clone https://github.com/mykle1/MMM-PilotWX.git
3. go to the module’s directory: cd MMM-PilotWX
4. install the dependencies npm install
5. configure, and restart magic mirror.

Cheers.

[Mykle1]

@Dask said in How to add modules. For absolute beginners.:

First of all I would like to say thank you for the step by step tutorial. It helped me a lot and I can now install some MM modules.

You’re welcome, mate.

[Mykle1]

@Dask

I haven’t touched MMM-PilotWX in some time so I loaded it up. All is well.

This would be your default config entry. Once you have it up an running you can make your changes.

{
	disabled: false,
	module: "MMM-PilotWX",
	position: "top_left",         // for mode: "Static",  bottom_bar for mode: "Rotating",
	config: {
		ICAO: "KJFK,EGLL,UUDD,EDDT,RJAA,ZBAA,LFPG,LIRF", // list of INTL ICAO's
		colorCode: "Alternative", // Standard or Alternative
		mode: "Static",           // Static (List) or Rotating (one by one)
		mostRecentPerStation: true,	//limits observations to 1 per station
		sym: "@",                 // @ or / (Separator for Wind speed and direction)
		tempUnits: "C",		   // C or F (F converted from C)
		measure: "SM",            // SM or KM (KM converted from SM data)
		time: "Local",            // Zulu or Local (observation time)
		maxWidth: "100%",         // 100% for mode: Rotating, approx 300px for mode: Static
		useAltHeader: true,	  // Use alternative header
		useHeader: false,
		header: "",
	}
},

[Dask]

Thank you all for the help. I am slowly getting it. Honest.

[Dask]

Mykle! I have the PilotMX instlled and working on the bottom bar with my chosen 2 airports but it takes up the full width of the screen. Can I make it narrower. I changed the maxWidth to 300px but it is still all the way across.

[BKeyport]

@Dask bottom bar is designed to do exactly that. you’d be better to use bottom_left, bottom_right, or bottom_center (or is it middle, I don’t recall, I keep my config organized by the regions, so I get reminded when I redesign)

[TheSij]

@Mykle1 - thanks for this guide. I promise I’ve studied it through and read the additional helpful comments that other contributors have made. However, I’ve having trouble adding the MMM-PrayerTime module to config.js. When I add the module and MM restarts, it shows blank and an error telling me to create a config file. Grateful for pointers on where I’m going wrong (please see code below. I’ve hidden any personal information). Thanks.

To note that without the entry to the MMM-PrayerTime module added to config.js Magic Mirror runs fine with the other modules.

modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"		
		},
		{
			module: "MMM-PrayerTime",
			position: "top_left",	// This can be any of the regions. Best result is in the top_left/top_right.
			config: {
				apiVersion: "1.0", // please, leave unchanged. reserved for future use.
				lat: xx.xxxxxxx, // latitude of your position (city)
				lon: -x.xxxxxxx, // longitude of your position (city)
				timezone: Europe/London, // please refer to http://php.net/manual/en/timezones.php
				timeFormat: 24,
				method: 5,
				playAdzan: ["fajr", "dhuhr", "asr", "maghrib", "isha"],
				notDisplayed: ["midnight", "sunset"],
				useUpdateInterval: true,
				updateInterval: 86400 * 1000, // How often do you want to fetch new praying time? (milliseconds)
				animationSpeed: 2.5 * 1000, // Speed of the update animation. (milliseconds)
				language: config.language,
				showAdzanAlert: true,
				showTomorrow: true,
				vertical: true, // set false for horizontal view
				alertTimer: 15000
			}
		},
		{
			module: "calendar",
			header: "UK Holidays",
			position: "top_left",
			config: {
				calendars: [
					{
						symbol: "calendar-check",
						url: "webcal://www.calendarlabs.com/ical-calendar/ics/75/UK_Holidays.ics"					}
				]
			}
		},
		{
			module: "currentweather",
			position: "top_right",
			config: {
				location: "London",
				locationID: "2643743", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				appid: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
			}
		},
		{
			module: "weatherforecast",
			position: "top_right",
			header: "Weather Forecast",
			config: {
				location: "London",
				locationID: "2643743", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				appid: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
			}
		},
		{
			module: "newsfeed",
			position: "bottom_bar",
			config: {
				feeds: [
					{
						title: "New York Times",
						url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml"
					},
					{
						title: "BBC World News",
						url: "http://feeds.bbci.co.uk/news/world/rss.xml"
					},
					{
						title: "Reddit",
						url: "https://www.reddit.com/r/worldnews/.rss"
					},
					{
						title: "Buzzfeed",
						url: "https://www.buzzfeed.com/world.xml"
					},
					{
						title: "Al Jazeera",
						url: "http://www.aljazeera.com/xml/rss/all.xml"
					}

				],
				showSourceTitle: true,
				showPublishDate: true,
				broadcastNewsFeeds: true,
				broadcastNewsUpdates: true
			}
		},
	]
};

[sdetweil]

@TheSij ok, general rules for config values

thing to the right of :

if numeric or true/false
no quotes

otherwise quoted, single or double doesn’t matter as long as both ends are the same

exception here, if the string is config.something (yours has config.language)
then not quoted, as this means use the value of that item from this config

so, your timezone is text, but has no quotes.
I assume u xx the lat/long so we won’t know where u are

[TheSij]

@sdetweil. Thanks, Sam. That’s helpful to explain the general rules.

I’ve made a slight amendment - I figured that the timezone parameters was not correctly entered (see below - this time just showing the modules before and after). To answer your last point, I did remove the lat/lon values to hide my exact location (this time I’ve put in made-up numbers). With the slight amendment to the code, it’s still not working - do you think it’s the ‘timezone’ value that is causing the problem? I’ve not made any changes to the other modules.

{
			module: "weatherforecast",
			position: "top_right",
			header: "Weather Forecast",
			config: {
				location: "London",
				locationID: "2643743", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				appid: "1ab234c567defgh89012ij34k56l78mn"
			}
		},
		{
			module: 'MMM-PrayerTime',
			position: 'top_left',	// This can be any of the regions. Best result is in the top_left/top_right.
			config: {
				apiVersion: '1.0', // please, leave unchanged. reserved for future use.
				lat: 12.3456789, // latitude of your position (city)
				lon: -0.1234567, // longitude of your position (city)
				timezone: date_default_timezone_set('Europe/London'), // please refer to http://php.net/manual/en/timezones.php
				timeFormat: 24,
				method: 5,
				playAdzan: ['fajr', 'dhuhr', 'asr', 'maghrib', 'isha'],
				notDisplayed: ['midnight', 'sunset'],
				useUpdateInterval: true,
				updateInterval: 86400 * 1000, // How often do you want to fetch new praying time? (milliseconds)
				animationSpeed: 2.5 * 1000, // Speed of the update animation. (milliseconds)
				language: config.language,
				showAdzanAlert: true,
				showTomorrow: true,
				vertical: true, // set false for horizontal view
				alertTimer: 15000
			}
		},
		{
			module: "newsfeed",
			position: "bottom_bar",
			config: {
				feeds: [
					{
						title: "New York Times",
						url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml"
					},
					{
						title: "BBC World News",
						url: "http://feeds.bbci.co.uk/news/world/rss.xml"
					},
					{
						title: "Reddit",
						url: "https://www.reddit.com/r/worldnews/.rss"
					},
					{
						title: "Buzzfeed",
						url: "https://www.buzzfeed.com/world.xml"
					},
					{
						title: "Al Jazeera",
						url: "http://www.aljazeera.com/xml/rss/all.xml"
					}

[sdetweil]

@TheSij yes, still timezone., that syntax says call a function named date_default_timezone_set

but I don’t know where that would be.

just comment out that one line. add // at the start of the line

[TheSij]

@sdetweil - thanks! Unfortunately, still no luck on adding // at the start of the line, or after ‘timezone:’. According to the module creator, the timezone is a required field. I went to the php website that the module creator refers to, but it just doesn’t make sense to me - the coding information on that website is vast and much too advanced for me. I may have to abandon my desire to add this particular module. :-(

[Mykle1]

@TheSij said in How to add modules. For absolute beginners.:

I may have to abandon my desire to add this particular module.

Don’t give up! I just installed this to test it for you. I can see why it was confusing for you but it does work. Here is my config entry. Use it as a template for yours, replacing your info for mine. The following screenshot shows it working.

{
		module: 'MMM-PrayerTime',
		position: 'top_center',	// This can be any of the regions. Best result is in the top_left/top_right.
		config: {
			apiVersion: '1.0', // please, leave unchanged. reserved for future use.
			lat: myLat, // latitude of your position (city)
			lon: myLong, // longitude of your position (city)
			timezone: 'Europe/London', // please refer to http://php.net/manual/en/timezones.php
//			timeFormat: 24,
			method: 5,
			playAdzan: ['fajr', 'dhuhr', 'asr', 'maghrib', 'isha'],
			notDisplayed: ['midnight', 'sunset'],
			useUpdateInterval: true,
			updateInterval: 86400 * 1000, // How often do you want to fetch new praying time? (milliseconds)
			animationSpeed: 2.5 * 1000, // Speed of the update animation. (milliseconds)
	//		language: config.language,
			showAdzanAlert: true,
			showTomorrow: true,
			vertical: true, // set false for horizontal view
			alertTimer: 15000
		}
	},

[sdetweil]

@Mykle1 thx!

so the original problem was the timezone wasn’t quoted.

[Mykle1]

@sdetweil said in How to add modules. For absolute beginners.:

so the original problem was the timezone wasn’t quoted.

That and language: config.language, was causing an error. I simply commented it out and the module uses the config language by default. :-)

Edit: Oh, and timeFormat: 24, in the module’s config entry, as well. Again, I commented it out as it was redundant.

[sdetweil]

@Mykle1 yep, didn’t see that right… because the javascript source code processor is in the process of reading the config object definition

var config= {

the config object is not yet defined. so config.language cannot exist (yet)

but the timeFormat can be present AND redundant and not cause a startup error

[TheSij]

@Mykle1 thanks to you and @sdetweil for helping me with this. It’s much appreciated. Deep down I’m reluctant to give up, because I don’t like quitting. I’ve literally just copied your config entry, and simply adding my own lat/lon figures. But now the MagicMirror shows up as a blank black screen and the window is named ‘Electron’, rather than ‘MagicMirror2’.

I’m checking, double-checking and triple-checking and I can’t see where the discrepancy is compared to your entry. Could having too many modules be an issue? Can I also check - both of you have commented that the ‘timezone’ is causing an error, but your config entry doesn’t show that it’s commented out…?

[sdetweil]

@TheSij how do you start MM? npm start, or pm2 start ?

if npm start, look at the messages shown in the terminal window after the npm start, or better yet, redirect the messages to a file, so you can look at them later
npm start >somefile 2>&1
(same as on windows)

if pm2, then pm2 logs --lines=100 should display the messages…

black screen,m typically means some library required by a module is not loaded, usually because of a missed install step for the module…
the area u read on github, is the same as the file README.md after the git clone, so you can look at the instructions

git clone
cd modulename
npm install

[TheSij]

@sdetweil - this is the log when I started MM just now…

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/local/bin/npm', 'start' ]
2 info using npm@6.14.7
3 info using node@v10.19.0
4 verbose stack Error: missing script: start
4 verbose stack     at run (/usr/local/lib/node_modules/npm/lib/run-script.js:155:19)
4 verbose stack     at /usr/local/lib/node_modules/npm/lib/run-script.js:63:5
4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:116:5
4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:436:5
4 verbose stack     at checkBinReferences_ (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:391:45)
4 verbose stack     at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:434:3)
4 verbose stack     at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:161:5)
4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:382:12
4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:123:16
4 verbose stack     at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
5 verbose cwd /home/pi/MagicMirror/modules/MMM-soccer
6 verbose Linux 4.19.118-v7l+
7 verbose argv "/usr/bin/node" "/usr/local/bin/npm" "start"
8 verbose node v10.19.0
9 verbose npm  v6.14.7
10 error missing script: start
11 verbose exit [ 1, true ]

[sdetweil]

@TheSij said in How to add modules. For absolute beginners.:

tack Error: missing script: start
5 verbose cwd /home/pi/MagicMirror/modules/MMM-soccer

what did you type?

the command is

cd ~/MagicMirror
npm start

to run MM, you must start from the MagicMirror folder… not a module folder, not the users home folder…

if you use pm2, it will issue the right commands from the right place