MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

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

    Scheduled Pinned Locked Moved System
    94 Posts 14 Posters 94.8k Views 15 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • V Offline
      Veldrovive Module Developer
      last edited by

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

      1 Reply Last reply Reply Quote 0
      • J Offline
        Johans
        last edited by

        @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.

        1 Reply Last reply Reply Quote 0
        • V Offline
          Veldrovive Module Developer
          last edited by

          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.

          J 1 Reply Last reply Reply Quote 0
          • J Offline
            Johans @Veldrovive
            last edited by

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

            1 Reply Last reply Reply Quote 0
            • B Offline
              Banandze
              last edited by

              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…

              2_1541775272883_yEWh3L69-34.jpg 1_1541775272882_Jwv8wrCwI6c.jpg 0_1541775272882_dO_MUnExwk8.jpg

              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",
              		},
              	]
              
              };
              
              
              
              1 Reply Last reply Reply Quote 0
              • V Offline
                Veldrovive Module Developer
                last edited by

                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?

                1 Reply Last reply Reply Quote 0
                • rudibaraniR Offline
                  rudibarani Project Sponsor
                  last edited by 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?

                  1 Reply Last reply Reply Quote 0
                  • V Offline
                    Veldrovive Module Developer
                    last edited by

                    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.

                    rudibaraniR 1 Reply Last reply Reply Quote 0
                    • rudibaraniR Offline
                      rudibarani Project Sponsor @Veldrovive
                      last edited by

                      @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"
                      
                      1 Reply Last reply Reply Quote 0
                      • V Offline
                        Veldrovive Module Developer
                        last edited by

                        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.

                        1 Reply Last reply Reply Quote 0
                        • B Offline
                          Banandze
                          last edited by 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.

                          1 Reply Last reply Reply Quote 0
                          • V Offline
                            Veldrovive Module Developer
                            last edited by

                            @Banandze,
                            I’m going to address the issue with the switching only working four times before shutting down. First, are you using pm2 to manage you mirror? If that is the case, try just starting it from a terminal instance so it does not automatically restart if it crashes.
                            When I said “Is there any output to the console”, what I meant is, in the terminal window where you started magic mirror, is there any text that prints out when the issues start? Also, in your electron instance, in the top menu, when you click on view then toggle developer tools, it will bring up a window with a console in it. If there is anything in red there I would like to see it.
                            What I am assuming is happening is that magic mirror itself is running out of resources and causing the issues.

                            I am not quite certain what you mean by:
                            “I put first one upper in config file and wrote “top_left” for both modules but they are shown in wrong way”
                            Are you saying that you want one module to appear above another, but it is instead appearing below? If that is the case then I will need to see your config again to know exactly what you mean and attempt to fix the problem.

                            1 Reply Last reply Reply Quote 0
                            • B Offline
                              Banandze
                              last edited by

                              @Veldrovive I will try it on the weekend. Yes, you ynderstand me with the problem of appearing. There is my config

                              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",
                              		},
                              	]
                              
                              };
                              
                              
                              1 Reply Last reply Reply Quote 0
                              • V Offline
                                Veldrovive Module Developer
                                last edited by

                                @Banandze,
                                I’ll take a look at it. It is very possible that I made a mistake while refactoring and module precedence has been swapped.

                                1 Reply Last reply Reply Quote 0
                                • V Offline
                                  Veldrovive Module Developer
                                  last edited by

                                  Changes that edit the way users must set up their config.js file have been made to this module. The position prop is no longer necessary to have inside the module config and the way to exclusions are handled has changed. For more information, look at the updated readme in the development branch of the GitHub page.
                                  These changes will be merged into the master branch in a couple of days which will cause errors if your config is not updated.

                                  1 Reply Last reply Reply Quote 1
                                  • rudibaraniR Offline
                                    rudibarani Project Sponsor
                                    last edited by rudibarani

                                    Dear @Veldrovive,

                                    would it be possible to add an option to make the current page persistent until the next page change?

                                    I have to use cases where this would help:

                                    • if the Pi restarts, the Mirror always shows the standard page - no matter what page was active before the restart.
                                    • if you open the Mirror on a browser (e.g. mobile phone), you always see the standard page until the next page change happens.

                                    In both cases, if would be great to see the currently “active” page. Maybe there is a way to store and restore the current page?

                                    Thanks a lot for your active development of the module!

                                    1 Reply Last reply Reply Quote 0
                                    • V Offline
                                      Veldrovive Module Developer
                                      last edited by

                                      Persistent properties such as those could be achieved through a temp file so definitely something that could be implemented.
                                      My reading week is over so I don’t have as much time to do development now, but I’ll get it done in some free time.

                                      rudibaraniR 1 Reply Last reply Reply Quote 0
                                      • rudibaraniR Offline
                                        rudibarani Project Sponsor @Veldrovive
                                        last edited by

                                        @veldrovive That would be great - thanks a lot!!!
                                        You could implement it as an option for the config part - maybe there are people out there that like to have a fallback to the standard page.

                                        1 Reply Last reply Reply Quote 0
                                        • V Offline
                                          Veldrovive Module Developer
                                          last edited by

                                          Yea. I’m trying my best not to change base functionality so any sort of bells and whistles like this will have to be manually activated.

                                          1 Reply Last reply Reply Quote 0
                                          • rudibaraniR Offline
                                            rudibarani Project Sponsor
                                            last edited by

                                            @Veldrovive If I got your new pages-implementation right, we define a name for a module which is later used to organize the page layout. Is that correct? Would it be possible to give multiple names to the same module (not have on module configured and shown multiple times via different names)?

                                            It would be helpful for modules with rate-limited APIs, if different parts of one module should be shown at different locations on the same page. I would like to achieve this via a custom css which addresses your name-tag.

                                            If this where possible, I would like to take this one step further in the future and implement a distance based layout which keeps the information most important to me readable throughout the room, when I prepare for my way to work. Changing the layout via css could be dynamic and would not involve a whole page refresh as it occurs when switching between pages.

                                            1 Reply Last reply Reply Quote 0

                                            Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                            Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                            With your input, this post could be even better 💗

                                            Register Login
                                            • 1
                                            • 2
                                            • 3
                                            • 4
                                            • 5
                                            • 2 / 5
                                            • First post
                                              Last post
                                            Enjoying MagicMirror? Please consider a donation!
                                            MagicMirror created by Michael Teeuw.
                                            Forum managed by Sam, technical setup by Karsten.
                                            This forum is using NodeBB as its core | Contributors
                                            Contact | Privacy Policy