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

[rudibarani]

@veldrovive I got the second page layout working with MMM-Watchdog: added a position-value to each module as you suggested and changed the settings to a heartbeat of 5 sec and a restart interval, in case the feedback is not sufficient, of 31 sec. Maybe the default values where just to tight and interfered with your tricks to layout the pages.

How does MMM-Page-Selector decide about the order in which modules within the same location are stacked on top of each other? I have would like to move an instance of MMM-DWD-WarnWeather below MMM-MyWeather but changing the order in the “pages” part of the layout does not have an effect on the order on the screen.

[Veldrovive]

@rudibarani Good to know that’s a solution.
Right now, modules are stacked in the order that they appear in the config file. If a module is above another in the config, it will be above that other one on the page.
However, with a little work, that could be changed. Do you think that it would be helpful to be able to change that on a page to page basis?

[rudibarani]

@Veldrovive The order seems to be exactly the other way round - if module A is below module B in the config file, it will be above module B on the mirror.

I guess it would be quite intuitive if the second layout option would sort the modules on the screen in the way they are ordered in each page definition. This would also support the concept, that the module definition contains the configurations and the pages part contains all the layout.

Personally, I would also benefit from this option as I use CSS styles to e.g. show only the weather warning symbols on one page and only the text version on another page. Both would be in different positions, if it were possible.

[Veldrovive]

Oh, that’s odd that it is going in inverse order. I must have made a mistake somewhere. I’ll be looking into that and reversing it.

I have finals coming up soon which means I don’t have very much time to support this and a more intuitive way of ordering the elements will take a bit of time.

Can you clarify what you mean with your last statement? If I am interpreting it correctly, you are saying that you would like a way of specifying CSS for specific pages. If I’m not mistaken, this would be a pretty quick and easy change as I would just update the class list to include the current page name.

[rudibarani]

Thanks - including the current page into the class list would be helpful.

From the usability point of view, having all layout-options in the “pages” section would be clean and intuitive. Going in from the outside, one gets easily that the modules part contains all config elements and the pages part does the layout of the pages.

Having the order of the config-elements in the “modules” section play the central part in sorting everything seems a little odd. It is OK - once you know it - but also involves moving around the modules and risking bracket- and comma-errors every time you want to try a new layout.

[rudibarani]

Dear @Veldrovive,
I am trying to use an old MacMini to host a mirror, as I would like play BluRays and Amazon Prime Videos on my mirror as well. Everything works fine - except for the option to save the current page.
Frist, I thought this might be a permission issue - but even setting the MagicMirror folder and all its contents recursively to “chmod 777” did not solve it. The mirror always goes back to the standard page and not the current page. Setting “persistentPages” to true does not have any effect.
As you know how you store and restore the “current page” - do you have any idea how to get this going again?
Thanks a lot for your help!

[Veldrovive]

Hey @rudibarani,
If there are no errors being thrown, then I would make sure that you are on the development branch and not master as I am still not sure how stable some changes are so I am refraining from merging.
If that is not the problem, I would open up thenode_helper.js file and put console.log() statements in some places to make sure they are running correctly.

1. Line 30 should be self.restorePage(). I would put on right before that. If it never runs, then there is a problem with how the frontend is handling the config.
2. Line 38 should then be jsonObj = JSON.parse(obj);. I would print out the value of jsonObj right after that runs to see if the page key is in it.
3. Line 57 should then be reject(err);. I see that I accidentally didn’t include any debug information when this rejects so put a log that prints out the error directly before this.

If the problem isn’t immediately obvious, posting the output of those logs would go a long way to figuring this out.

[rudibarani]

Dear @Veldrovive,
oh - I have to run and hide somewhere. I did forget to clone the development branch when setting up the Mac Mini. Sorry for bothering you with this :unamused_face:

As always, if you do things right, they work :smiling_face_with_smiling_eyes:

You said you it would be a quick change to update the class list to contain the current page. If you have time to add this, it would help me a lot!

[Veldrovive]

Ah right. I need to get around to making those changes. I’ll start on them in the morning.

[Veldrovive]

@rudibarani,
Ok, the development branch now has support for the new class name changes. When a module is shown on a page, it will be given the class page_{Current Page} and then the class will be removed when the module is hidden.

[Johans]

@veldrovive
Hi, just made a fresh install, and applied your module and MMM-Page-indicator.

Pages are shown, but page indicator and newsfeed module are not on the screen.
When I disbable MMM-Page-Selector, then Newsfeed & MMM-Page-indicator are visisble.

As far as I understand, config is OK

	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"],
   			        autoChange: {
				     	    interval: 100,    // Change page every 100 sec
				            }
		                   }
		},		

		{
			module: "updatenotification",
			position: "top_bar",
			pages: {"Page1": "top_bar"},
		},
		{
			module: "clock",
			position: "top_left",
			pages: {"Page1": "top_left", "Page2": "top_left", "Page3": "top_left", "Page4": "top_left"},

		},
		{
			module: "compliments",
			position: "lower_third",
			pages: {"Page1": "lower_third", "Page2": "lower_third", "Page3": "lower_third", "Page4": "lower_third"},
		},
		{
		        disabled: false,
			module: "MMM-rain-forecast",
			position: "top_right",   // see mirror setting for options
			pages: {"Page1": "top_right"},
			//header: "Regen Voorspelling", 
			config: {   
		                lat: 50.908529,
		                lon: 3.965639,				
				pleaseWait: "Wachten a.u.b",
				noRainText: "Tot %s GEEN regen",
				fillColour: '#0074d9'   // This is a blue color you can also use blue, cyan etc
				}
		},	

		{
			module: "newsfeed",
			position: "bottom_bar",
			pages: "all",
			config: {
				feeds: [
					{
						title: "New York Times",
						url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
					}
				],
				showSourceTitle: true,
				showPublishDate: true
			}
		},
		{
			disabled: false,
		        module: "MMM-page-indicator",
		        position: "bottom_bar",
			pages: "all",
		        config: {
		            //pages: 4,  // No need to set this
		        }
		},	
		{
			module: 'MMM-Cursor',
			pages: "all",
		},
	]

[Veldrovive]

@Johans,
Ah, I believe the confusion comes from the fact that old discussions on this forum do not reflect the current functionality of the module. I try not to make any changes that break old config files, but one was necessary.
In order to fix this config, you need to replace any instance of pages: "all" with pages: {"all": "some_position"}
New versions don’t require you to have a position prop at all and you can just use the pages one.
For more information, refer to the README.
Hope this helps.

[Johans]

@veldrovive said in MMM-Page-Selector: A page switcher that can set positions of modules:

pages: {“all”: “some_position”}

Thanks for the info, I should have read the README first. Sorry.

[rudibarani]

@veldrovive
Thanks again for implementing the current page as “dynamic” class. If I get it right, you had to code procedures to add and remove the page class when switching pages.

Ok, the development branch now has support for the new class name changes. When a module is shown on a page, it will be given the class page_{Current Page} and then the class will be removed when the module is hidden.

Would it be possible to make these procedures accessible via notifications? I am still looking for a way to add and remove classes based on external triggers. A scheme could be like this:

Notification: "MMM_Page-Selector_Update_Class"
Payload: {"add":["Module_1_Name:ClassA_to_add", "Module_2_Name:ClassB_to_add"], "remove":["Module_3_Name:ClassC_to_remove", "Module_4_Name:ClassD_to_remove"]}

[Veldrovive]

@rudibarani
If I am understanding what you are asking for correctly, this function seems to be out of the scope that Page-Selector encompasses. I would develop a module to include this functionality, but I have been inactive in the world of Magic Mirror as of lately. As it stands, I would post this request to the module suggestions forum or ask somebody to include it in a module that has a closer association with this type of purpose. MMM-Remote-Control could be a good candidate.

[rudibarani]

@veldrovive
OK - thanks for the reply anyway!

[smarthome]

Hi all

To make MMM-page-indicator work with MMM-Page-Selector, we must add MMM-page-indicator in to pages

{
			module: "MMM-page-indicator",
			position: "bottom_bar",
			"pages": {"Home": "bottom_bar", "News": "bottom_bar","Weather": "bottom_bar","Entertaiment": "bottom_bar","Smarthome": "bottom_bar","System": "bottom_bar"},	
          	config: {
			pages: 6,
			}
		},

[smarthome]

@Johans

pages: "all",

You forgot the quotation mark before and after pages

"pages": "all",

[Brandenborg]

I love this module especially in use together with the MMM-navbar.
Is there any config using existing code that will let me make it return me to “default” page after a given period of time after changing page?

[Veldrovive]

@Brandenborg
This is not a default function of this module. However, if you can edit a small amount of code, it should be easy to implement.
Just copy these lines of code right after line 235 of MMM-Page-Selector.js. This lines should be selectPage(payload);

clearTimeout(self.default_timeout);
if(![0, this.config.defaultPage].includes(payload)){
    self.default_timeout = setTimeout(() => {
        selectPage(this.config.defaultPage);
    }, TIME)
}

Then just replace TIME with the number of milliseconds you want to remain on the page before it automatically switches back to default. You may also have to change the 0 in the if statement if your default page isn’t at the 0th position.