MMM-Page-Selector: A page switcher that can set positions of modules

[Veldrovive]

Ok, the new commit includes the changes. Just git pull and then the new method should be available.

[robiv8]

thanks for your support
I will implement it this week and report here.

[robiv8]

I just made a quick attempt with the first one of your code.
I’m slowly approaching the goal ;-).
I still have questions.
This is my code:

/* Magic Mirror Config Sample
 *
 * For more information how you can configurate this file
 * See https://github.com/MichMich/MagicMirror#configuration
 *
 */
var config = {
address: "0.0.0.0",

//port: 8080,
port: 8080,
ipWhitelist: [],

language: "de",
timeFormat: 24,
units: "metric",

modules: [
  {
  module: 'MMM-Page-Selector',
  position: 'top_center',
  config: {
  defaultPage: "main",
  displayTitle: true,
  selectPageNotif: [""],
  incrementPageNotif: [""],
  decrementPageNotif: [""]
  }
  },

  {
  module: 'MMM-DWD-WarnWeather',
  position: 'top_bar',
  pages: {main: 'top_bar'},
  header: 'Wieslauf',
  config: {
  region: 'Rudersberg',
  changeColor: true,
  displayRegionName: false,
  interval: 3 * 60 * 1000, // every 10 minutes
  loadingText: 'Warnungen werden geladen...',
  noWarningText: 'Keine Warnungen'
  }
  },

{
module: 'MMM-DWD-WarnWeather',
position: 'top_bar',
pages: {main: 'top_bar'},
header: 'Strohgäu',
config: {
region: 'Hemmingen / BW',
changeColor: true,
displayRegionName: false,
interval: 3 * 60 * 1000, // every 10 minutes
loadingText: 'Warnungen werden geladen...',
noWarningText: 'Keine Warnungen'
}
},
{
module: 'MMM-DWD-WarnWeather',
position: 'top_bar',
pages: {main: 'top_bar'},
header: 'Schönbuch',
config: {
region: 'Dettenhausen',
changeColor: true,
displayRegionName: false,
interval: 3 * 60 * 1000, // every 10 minutes
loadingText: 'Warnungen werden geladen...',
noWarningText: 'Keine Warnungen'
}
},
{
module: 'MMM-DWD-WarnWeather',
position: 'top_bar',
pages: {main: 'top_bar'},
header: 'Täles',
config: {
region: 'Neuffen',
changeColor: true,
displayRegionName: false,
interval: 3 * 60 * 1000, // every 10 minutes
loadingText: 'Warnungen werden geladen...',
noWarningText: 'Keine Warnungen'
}
},
{
module: 'MMM-DWD-WarnWeather',
position: 'top_bar',
pages: {main: 'top_bar'},
header: 'Rossberg',
config: {
region: 'Wolfegg',
changeColor: true,
displayRegionName: false,
interval: 3 * 60 * 1000, // every 10 minutes
loadingText: 'Warnungen werden geladen...',
noWarningText: 'Keine Warnungen'
}
},
{
module: "clock",
position: "middle_center",
pages: {main: 'middle_center'},
config: {
showDate: false,
displayType: 'analog',
analogSize: '540px',
analogFace: 'face-001',
secondsColor: '#FF0000',
analogPlacement: 'top',
//analogShowDate: 'bottom',
}
},
{
module: "clock",
position: "bottom_center",
pages: {main: 'bottom_center'},
},
{
module: "currentweather",
position: "top_right",
pages: {main: 'top_right'},
config: {
lang: "de",
location: "Beinstein",
locationID: "3220785",  //ID from http://www.openweathermap.org/help/city_list.txt
appid: "08541xxxxxxxxxxxxxxxxx"
}
},
{
module: "MMM-PublicTransportHafas",
position: "bottom_right",
pages: {second: 'bottom_right'},
config: {
stationID: "008007193",	// Replace with your stationID!
headerPrefix: "von",
stationName: "Miedelsbach",   // Replace with your station name!
direction: "",     // Show only departures heading to this station. (A station ID.)
ignoredLines: [],   // Which lines should be ignored? (comma-separated list of line names)
excludedTransportationTypes: ["bus"],  // Which transp not be shown (, list) values:StN tram, BuN bus, s suburban
timeInFuture: 240,
showColoredLineSymbols: true,     // Want colored line symbols?
useColorForRealtimeInfo: true,    // Want colored real time information (timeToStation, early)?
showTableHeadersAsSymbols: true,  // Table Headers as symbols or text?
maxUnreachableDepartures: 1,      // How many unreachable departures should be shown?
maxReachableDepartures: 5,        // How many reachable departures should be shown?
customLineStyles: "hafas", // Prefix for the name of the custom css file. ex: Leipzig-lines.css (case sensitive)
showOnlyLineNumbers: false        // Display only the line number instead of the complete name, i. e. "11" instead of "STR 11"
}
},
{
module: "MMM-PublicTransportHafas",
position: "bottom_right",
pages: {second: 'bottom_right'},
config: {
stationID: "008007446",	// Replace with your stationID!
headerPrefix: "von",
stationName: "Frickenhausen",   // Replace with your station name!
direction: "",     // Show only departures heading to this station. (A station ID.)
ignoredLines: [],   // Which lines should be ignored? (comma-separated list of line names)
excludedTransportationTypes: ["bus"],  // Which transp not be shown (, list) values:StN tram, BuN bus, s suburban
timeInFuture: 240,
showColoredLineSymbols: true,     // Want colored line symbols?
useColorForRealtimeInfo: true,    // Want colored real time information (timeToStation, early)?
showTableHeadersAsSymbols: true,  // Table Headers as symbols or text?
maxUnreachableDepartures: 1,      // How many unreachable departures should be shown?
maxReachableDepartures: 5,        // How many reachable departures should be shown?
customLineStyles: "hafas",             // Prefix for the name of the custom css file. ex: Leipzig-lines.css (case sensitive)
showOnlyLineNumbers: false        // Display only the line number instead of the complete name, i. e. "11" instead of "STR 11"
}
},
{
module: "MMM-PublicTransportHafas",
position: "bottom_left",
pages: {second: 'bottom_left'},
config: {
stationID: "008003409",// Replace with your stationID!
headerPrefix: "von",
stationName: "Korntal DB",   // Replace with your station name!
direction: "",     // Show only departures heading to this station. (A station ID.)
ignoredLines: [],   // Which lines should be ignored? (comma-separated list of line names)
excludedTransportationTypes: ["bus", "Fernverkehr"],  // Which transp not be shown (, list) values:StN tram, BuN bus, s suburban
timeInFuture: 240,
showColoredLineSymbols: true,     // Want colored line symbols?
useColorForRealtimeInfo: true,    // Want colored real time information (timeToStation, early)?
showTableHeadersAsSymbols: true,  // Table Headers as symbols or text?
maxUnreachableDepartures: 1,      // How many unreachable departures should be shown?
maxReachableDepartures: 5,        // How many reachable departures should be shown?
customLineStyles: "hafas",             // Prefix for the name of the custom css file. ex: Leipzig-lines.css (case sensitive)
showOnlyLineNumbers: false        // Display only the line number instead of the complete name, i. e. "11" instead of "STR 11"
}
},
{
module: "MMM-PublicTransportHafas",
position: "bottom_left",
pages: {second: 'bottom_left'},
config: {
stationID: "000557824",// Replace with your stationID!
headerPrefix: "von",
stationName: "Münchingen",   // Replace with your station name!
direction: "",     // Show only departures heading to this station. (A station ID.)
ignoredLines: [],   // Which lines should be ignored? (comma-separated list of line names)
excludedTransportationTypes: ["bus"],  // Which transp not be shown (, list) values:StN tram, BuN bus, s suburban
timeInFuture: 240,
showColoredLineSymbols: true,     // Want colored line symbols?
useColorForRealtimeInfo: true,    // Want colored real time information (timeToStation, early)?
showTableHeadersAsSymbols: true,  // Table Headers as symbols or text?
maxUnreachableDepartures: 1,      // How many unreachable departures should be shown?
maxReachableDepartures: 5,          // How many reachable departures should be shown?
customLineStyles: "hafas", // Prefix for the name of the custom css file. ex: Leipzig-lines.css (case sensitive)
showOnlyLineNumbers: false          // Display only the line number instead of the complete name, i. e. "11" instead of "STR 1
}
},
{
module: "MMM-page-indicator",
position: "bottom_center",
pages: "all"
},
{
"module": "MMM-Cursor",
}
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}

The first page looks good, but on the second page, the modules are shown above the other instead of 2 left 2 right.
main:

second:

This is how the modules (train schedule) should look like:

[Veldrovive]

I copied your config and it actually allowed me to catch a couple of bugs that I will be working to fix over the next few days. The main one that you are having trouble with stems from the fact that multiple modules with the same name are being used. I don’t know why I didn’t think about that during development, but it causes problems now. I’m going to fix that up and I’ll post again when it’s done. It’s a bit of a large change, however, so it probably won’t be done for at least 24 hours.

[robiv8]

Hey, just no hectic and stress.
Then I’m just the beta tester ;-)

What long matures will be good.
Thank you

[Veldrovive]

Ok, changes have been made and now the module is much more resilient.
The second method for setting up pages has become pretty powerful now, but that came with it becoming more complicated. I would suggest reading the readme section carefully before trying to implement it.
If you have any question, I am more than happy to clarify and edit the readme.

[robiv8]

Wow, that was fast.
Will it morning look at rest, and test.
But what I read so far looks like this for me:
First list all the modules as before.
Below that, under “pages:” and the page names, insert the module names with location.

And I have to give the modules a name (name:) which is then used in pages: for the position.

So roughly right?

Oh! One question:
How implement more then 1 module in exclusion?

exclusion: [
{
"module": "MMM-Cursor"
},
{
"MMM-page-indicator",
    position: "bottom_center"
}
]

[Veldrovive]

So the exclusions array takes a list of selectors. Those selectors could be the name of a module (Like MMM-Cursor) or they could be the prop name. Here’s some sample code:
This is the inside the module array:

{
    module: "MMM-page-indicator",
    name: "noHide",
    position: "bottom_center"
},

And then this is the exclusions:

[
    "noHide",
]

This one works because the name noHide is a selector.

You could also just use the name of the module:

[
    "MMM-Cursor",
]

because it is also just a selector.

The pages config also works off of selectors in the same way. noHide is a selector that you assign with the name prop while MMM-page-indicator is a selector that is assigned via the fact that it is the name of the module.

[Peter_Froberg]

@veldrovive Thanks, for the reply. I finnaly did find the problem. It was as always a typo from my side. I have now konverted the config to the “second” config option which I like better as I can gather all the pages config in one section.
Thanks for a greate module :)

[Veldrovive]

Ah good. I’m glad that the changes I’m making are improving the module.
Thank you for the kind words.

[Johans]

@Veldrovive Installed your module, along with the MMM-page-indicator.
Page1 shows OK, but I can’t move to Page2.
What i’m doing wrong?
Here’s my config

	modules: [
		{
			module: "alert",
			pages: "all",
		},
		{
			disabled: false,
		        module: "MMM-Page-Selector",
		        position: "top_bar",
		        config: {
			    defaultPage: "Page1",
		            displayTitle: true,
			    selectPageNotif: ["SELECT_PAGE"],
		            incrementPageNotif: ["PAGE_UP"],
		            decrementPageNotif: ["PAGE_DOWN"]
		        }
		},		
		{
			disabled: false,
		        module: 'MMM-page-indicator',
		        position: 'bottom_bar',
			pages: "all",
		        config: {
		            pages: 3,
		        }
		},			
		{

			module: "updatenotification",
			position: "top_bar",
			pages: {"Page1": "top_bar"},
		},
		{
			disabled: false,
			module: "clock",
			position: "top_left",
			pages: {"Page1": "top_left"},
		},
		{
			disabled: false,
			module: "compliments",
			position: "lower_third",
			pages: {"Page2": "lower_third"},
		},
		{	
	                disabled: false,
	                module: 'MMM-Lunartic',
	                position: 'top_center', // Best in left, center, or right regions
		        pages: {"Page3": "top_center"},
	                config: {
		                mode: "rotating", // rotating or static
		                image: "current", // animation, current, DayNight or static
		                distance: "km", // miles or km
		                useHeader: false, // true if you want a header
		                header: "Huidige Maan stand", // Any text you want
		                maxWidth: "300px",
		                animationSpeed: 0,
		                rotateInterval: 15000,
			       }
	        },
		{
		        disabled: false,			
			module: 'MMM-BackgroundSlideshow',
		        position: 'fullscreen_below',
			pages: {"Page1": "fullscreen_below"},
		        config: {
 		                imagePaths: ['modules/MMM-BackgroundSlideshow/Images/'],
		                transitionImages: true,
			        slideshowSpeed: 20000,  // 20 Seconds
			        //transitionSpeed: '2s',
		                randomizeImageOrder: true,
		                }
		},
		{
			module: 'MMM-Cursor',
			pages: "all",
		},
	]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/

I have installed MMM-Voice-Command as well, but I really don’t need voice for the moment so I didn’t add this in the config.

[Veldrovive]

One small thing before I actually get into the meat of the issue. It is not necessary to specify the number of pages for MMM-page-indicator since it is overridden by the page selector.

While I was developing the new page system, I forgot about the very important issue of capitalization. Basically what was happening is that it was trying to switch to pages that did not exist. If you pull the update, everything should work fine.

[Johans]

@veldrovive Wow, that was a quick. Works fantastic now. Great job!! Thanks.

[Banandze]

Hi @Veldrovive ! Can you help me to solve some problems with pages? The first is that it doesn’t swith sometimes. it works, but not the whole time. The second is rhat pages show modules while they don’t havw to. There are config file and examples. So the main page (главная) shows weather data but it doesn’t have to. The same situation with other pages (example - calendar “календарь”). While the weather page (with earth) doesn’t show these modules. Wrehe is the problem? Sorry for bad structure…

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: "ru",
	timeFormat: 24,
	units: "metric",

	modules: [
                {
			"module": "MMM-Page-Selector",
			"position": "top_center",
			"config": {
				"defaultPage": "главная",
				"displayTitle": true,
				"selectPageNotif": [],
				"incrementPageNotif": [],
				"decrementPageNotif": []
			}
		},
                {
                   module: 'MMM-page-indicator',
                   position: 'bottom_bar',
                   "pages": "all",
                   config: {
                   pages: 6,
                   activeBright: true,
                   inactiveHollow: true,
                   }
                },
		{
     			module: "alert",
                        "pages": "all",
		},
                {
		module: 'MMM-PIR-Sensor',
	        "pages": "all",
           	config: {
                         sensorPIN: 22,
                         powerSaving: true,
                         powerSavingDelay: 120,
                        // See 'Configuration options' for more information.
		}
          	},
                {
                module:     'MMM-3Day-Forecast',
                position:   'top_right',
                "pages": {"главная": "top_right"},
         	config: {
		api_key:    '2f91769xxxxxxxxxxxxxxx',
		lat:        54.61972,
		lon:        39.740002,
		units:      'M',
		lang:       'ru',
		interval:   900000,
          	}
                },
                {
		module: "currentweather",
		position: "top_right",
                animationSpeed: 500,                     	// This can be any of the regions.
		"pages": {"погода": "top_left"},							// Best results in left or right regions.
		config: {
			// See 'Configuration options' for more information.
			location: "Рязань",
			locationID: "500096", //Location ID from http://openweathermap.org/help/city_list.txt
			appid: "ab3164xxxxxxxxxxxx" //openweathermap.org API key.
		}
            	},
                {
                module: "MMM-EARTH",
                position: "bottom_center",
                "pages": {"погода": "middle_center"},
                config: {
                mode: "Natural",
                rotateInterval: 5000,
                MaxWidth: "50%",
                MaxHeight: "50%",
                }
                },
                {
                module: "weatherforecast",
                position: "left",       // This can be any of the regions.
                colored: true,
                pages: {погода: "left"}, 
                config: {
                        // See 'Configuration options' for more information.
                        location: "Рязань",
                        locationID: "500096", //Location ID from http://openwea$
                        appid: "ab31646bxxxxxxxxxxxxx" //openweather
                }
                },
	        {
			module: "updatenotification",
			position: "top_bar",
                        "pages": "all",
	       	},
		{
			module: "clock",
			position: "top_left",
                        "pages":{"главная": "top_left", "погода": "top_left", "почта": "top_left", "новости": "top_left", "календарь": "top_left", "фото": "top_left" },
		},
		{
			module: "calendar",
			header: "US Holidays",
			position: "top_left",
	                "pages": {"календарь": "upper-third"},	
                	config: {
				calendars: [
					{
						symbol: "calendar-check-o ",
						url: "webcal://www.calendarlabs.com/templates/ical/US-Holidays.ics"
         				}
				]
			}
		},
		{
        		module: "newsfeed",
			position: "bottom_bar",
			"pages": {"главная": "bottom_bar", "новости": "bottom_bar"},
                        config: {
				feeds: [
					{
						title: "Финансовые новости MFD",
						url: "http://mfd.ru/rss/news/handler.ashx"
					}
				],
				showSourceTitle: true,
				showPublishDate: true
			}                      
            	},
                {
			"module": "MMM-Cursor",
		},
	]

};

[Veldrovive]

Hey @Banandze,
I have added a lockstring so that modules cannot show themselves which was causing the issue where the weather module showed itself. Pull the new changes to fix that issue.
The issue with the module not showing on the weather page I cannot replicate, but it is most likely due to the position being set to left which is not a valid position in Magic Mirror. Refer to this this for a list of positions.
I am also unable to replicate the problem where the page switching does not work. When it fails to switch, is there any output to the console?

[rudibarani]

Dear @Veldrovive,

thank you very much for this fantastic module! I am trying to use MMM-Remote-Control to control the currently shown page through notifications which are sent via HTTP from my home automation (FHEM), depending on who is in the bathroom.

These two calls work fine with MMM-Page-Selector: (I had to insert a space into the URL when pasting it here as “&n” is replaced with a newline character by this website")

http://192.0.0.60:8080/remote?action=NOTIFICATION& notification=PAGE_UP

http://192.0.0.60:8080/remote?action=NOTIFICATION& notification=PAGE_DOWN

But i am struggling to use SELECT_PAGE to go directly to a desired page.

http://192.0.0.60:8080/remote?action=NOTIFICATION& notification=SELECT_PAGE&payload={"test"}

This call returns {"status":"success"}, but does not show the page “test”. Do you have an idea, what I am doing wrong?

[Veldrovive]

Hey @rudibarani,
Yea, that was completely on me. The new version should fix the issue. There was a really obvious bug that was stopping the PAGE_SELECT system from working. If it still does not work, make sure that the payload that is being sent is actually just the string name of the page and not an object.

[rudibarani]

@veldrovive Thank you very much for the quick fix! Now everything works like magic :man_mage:

I am putting a working example here for others, if they want to use MMM-Remote-Control with MMM-Page-Selector as well:

http://192.0.0.60:8080/remote?action=NOTIFICATION& notification=SELECT_PAGE&payload="test"

[Veldrovive]

As an update, it is now possible to have your pages automatically rotate on a certain interval. Refer to usage and configuration in the Readme.

[Banandze]

@Veldrovive thank you for reply! I will check the changes on the weekend. What shall I use to make weather data more structure? I want one module upper than another. I put first one upper in config file and wrote “top_left” for both modules but they are shown in wrong way. And another question about not swithing, I didn’t understand your question exactly. I turn ii on and it works four times, then it doesn’t swith and my screen becomes slightly darker, then after few munites it works again fout times.