Can't figure out how to get this to work?

[fiveseven808]

So, I copied

{
        module: "MMM-Page-Selector",
        position: "top_bar",
        config: {
            page: "pageName",
            displayTitle: true,
        }
    },

into my config.js, but whenever I add pages:"all", to my modules, magicmirror doesn't seem to want to start up... Not sure what I'm doing wrong, or how to get names and pages into this thing in the first place?

[Veldrovive]

Sorry it took me so long to get back to you. Where are you putting the pages: "all"? Can you put your entire config.js into a pastebin and link to it? Do the pages work correctly if you do not use the all option? Are you getting any errors in your console?

[justjim1220]

my question is where and how do I configure the page index to give each page a different name or title?

[Veldrovive]

I'm not sure I know exactly what you mean. If the question is How do I assign a given page to a certain index? then the answer is that I didn't really think about that because the module originally worked differently. To do it in a more hacky way, pages that are declared first (so higher up in the config file) should be pushed into the page object first, but that is no guarantee that they will maintain their position. If this is the question you are asking, I can add a new section in the page selector config to add the functionality.

If your question about more general usage, here is a more concise version of the readme. To tell a module to appear on a certain page, add
pages: {"PAGE_NAME": "POSITION"} under the standard position prop in the module's config. Then, to switch pages, I would use MMM-page-indicator, MMM-Voice-Commands or any other module that can be configured to send notifications.

[justjim1220]

ok, this is from your ReadMe file...

    //Example of the config for a module to be shown on pages: "main" and "fun"
    {
        module: "MMM-any-other",
        position: "bottom_center", //Or any other position, this doesnt matter unless "pages" is set to "all"
        pages: {"main": "position", "fun": "another_position"},
        config: {}
    },

What I'm asking is how do you name the pages as "main" & "fun", etc. ???

[justjim1220]

there isn't anything in your ReadMe regarding naming the pages

[justjim1220]

you have this for the cinfiguration of the module...

{
        module: "MMM-Page-Selector",
        position: "top_bar",
        config: {
            page: "pageName",
            displayTitle: true,
        }
    },

which allows me to name 1 page. Which is fine. But then how do I get it to change pages if I can't name them? when I try to make an array within that code it throws an error with the config.js file I've tried a few ways, and not getting anywhere.

like this...

 {
            module: "MMM-Page-Selector",
            position: "bottom_bar",
            pages: "all",
            config: {
                page: {"1": "Page 1", "2": "Page 2", "3": "Page 3", "4": "Page 4"},
                displayTitle: true,
            }
        },

and this...

 {
            module: "MMM-Page-Selector",
            position: "bottom_bar",
            pages: "all",
            config: {
                page: {"1": "Main Page", "2": "Football", "3": "Email & Shit", "4": "Misc"},
                displayTitle: true,
            }
        },

and this...

 {
            module: "MMM-Page-Selector",
            position: "bottom_bar",
            pages: "all",
            config: {
                page: {"0": "One", "1": "Two", "2": "Three", "3": "Page Four"},
                displayTitle: true,
            }
        },

and this...

{
            module: "MMM-Page-Selector",
            position: "bottom_bar",
            pages: "all",
            config: {
                page: {"1": "One", "2": "Two", "3": "Three", "4": "Page Four"},
                displayTitle: true,
            }
        },

[Veldrovive]

Ah, I see. Yes, that is my mistake and I will update the readme to be more clear. First, the page config option is not for defining your page names. It is actually for defining what page is displayed when the mirror starts up. Second, page names are not contained within the MMM-Page-Selector config, but rather in the modules you want to have on your pages. For demonstration, I named my pages main and fun in the readme. As an example of an actual configuration, you might have the following:

modules: [
    {
        module: "MMM-Page-Selector",
        position: "top_center",
        config: {
            page: "main"
            displayTitle: true
        }
    },
    {
        module: "MMM-Weather-Now",
        position: "bottom_center",
        pages: {main: "top_right", weather: "bottom_left"}
    },
    {
        module: "MMM-page-indicator",
        position: "bottom_center",
        pages: "all"
    }
]

The configuration for MMM-Page-Selector will:

• position: Make the title of the page appear at the top_center position.
• page: Display the page with the name of "main" on startup.
• displayTitle: Display the page name at the defined position since it is true.

The configuration for MMM-Weather-Now will:

• position: This doesn't matter, it just has to be set so Magic Mirror will render the module.
• pages: Each key defines a page and each value defines the position on that page. This means that MMM-Weather-Now will be rendered at the top right when on the "main" page and on the bottom left when on the "weather" page.

The configuration for MMM-page-indicator will:

• position: Since this will be on all pages, setting the position to be "bottom_center" means that it will always be displayed there.
• pages: Means that reguardless of the page, MMM-page-indicator will be shown.

If this write up was helpful, please tell me so I can put it on the readme and avoid further confusing people.

[Veldrovive]

And to be clear, pages are never explicitly defined. They are simply created by assigning a module to appear on that page.

[Veldrovive]

I changed the README to make the usage more clear. I'm going to close this issue as I believe that it has been resolved, but if there is further confusion on general usage then feel free to re-open.

[cowboysdude]

Going by this example:
modules: [ { module: "MMM-Page-Selector", position: "top_center", config: { page: "main" displayTitle: true } }, { module: "MMM-Weather-Now", position: "bottom_center", pages: {main: "top_right", weather: "bottom_left"} }, { module: "MMM-page-indicator", position: "bottom_center", pages: "all" } ] All that happens is that you are saying on page 'main' go to 'top_right'......on page weather go to 'bottom_left'......

When I start the mirror I set main as the start page and I have page-indicator running too. No matter what page I start on 'main' or 'weather' the weather shows 'top_right' and I cannot access the other page at all.

Cannot figure out how to make this work........

[Veldrovive]

There are a couple of things that are going to be causing problems with new versions. I'm trying not to make any changes that break old configs, but in a couple of cases, it's pretty much unavoidable due to internal ways the module works.

First, in the dev branch that will be merged in a couple days, the page config key has been completely replaced by defaultPage to reduce confusion about what that prop does.

Second, to assign a module to be on all pages, you no longer just specify pages: "all", instead, use the same format as normal pages except have the page name be "all": pages: {"all": "bottom_center"}.

Third, it is no longer necessary to specify a position for every module but page-selector. It doesn't do any harm to have them, but you don't have to.

Here is the config with all those changes (For the most updated version of page-selector):

modules: [ 
    { 
        module: "MMM-Page-Selector", 
        position: "top_center",
        config: { 
            defaultPage: "main", 
            displayTitle: true
        }
    },
    { 
        module: "MMM-Weather-Now", 
        pages: {
            main: "top_right", 
            weather: "bottom_left" 
        },
    },
    { 
        module: "MMM-page-indicator", 
        pages: {"all" : "bottom_center"}
    } 
]

[cowboysdude]

I appreciate the input. I'll try the dev branch. What I see was happening is I'm mixing the master branch with dev branch config.......that'll cause a problem. So I'll go try the dev branch and see if that works for me :) By the way this is a REALLY great module!!

OK so I tried the dev branch with your suggestions and I still cannot get this to work. No matter what page I choose I cannot see or rotate to the other one. Right now I am trying to just set up 2 pages to get the gist of this but no luck. It's not working. Here's a copy of my config perhaps you can find something wrong....I sure can't.

    {
        disabled: f, 
        module: "MMM-Page-Selector",
        position: "top_bar",
        config: {
            defaultPage: "main",
            displayTitle: true,
        }
    }, 
    {
        disabled: f,
        module: 'MMM-page-indicator',
        pages: {all : "bottom_bar"},
        config: {
            pages: 2
        }
    },
    {
        disabled: f,
        module: "MMM-ESPN",
        //position: "top_bar",
        pages: {main: "top_bar", fun: "bottom_bar"},            
    },
    {
        disabled: f,
        module: 'MMM-Glock',
        pages: { all : "top_center"},
        //position: 'top_center',
        config: {
            //color: "black",
            color: "#FEB712",  //time color
            size: "1.0em",  //font size for 
            sec: true,  //show seconds with time
            wcolor: "#9CFED7",  //weather color
            dcolor: "#F6A242",  //date color
            useWet: false,  //show weather true or false, default is false
            city: "elmira",   //city for weather 
        }
    },
    {
        disabled: f,
        module: "MMM-Astrology", 
        position: "left_top",
        pages: {fun: "top_left"},
        config: {
            starSign: "pisces",
            hScope: "daily",
            scolor: "orange" 
        },
    }

[Veldrovive]

Can you tell me exactly what is happening? When you say that you cannot see or rotate to the other page, do you mean that when you navigate to the next page, the DOM does not change? Or do you mean that you are unable to navigate to the next page in the first place?

When I use your config everything seems to work fine. I use MMM-Cursor in order to show the cursor so I can click on the Page-Indicator buttons to change pages in my tests. Otherwise, I use voice commands.

[cowboysdude]

Yes I am unable to navigate to the next page in the first place

On Wed, Nov 21, 2018 at 11:14 PM Aidan Dempster notifications@github.com wrote:

Can you tell me exactly what is happening? When you say that you cannot see or rotate to the other page, do you mean that when you navigate to the next page, the DOM does not change? Or do you mean that you are unable to navigate to the next page in the first place?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Veldrovive/MMM-Page-Selector/issues/1#issuecomment-440907778, or mute the thread https://github.com/notifications/unsubscribe-auth/AKgOEGsd4lKk8JK6bJqoXWk9p3I1qSTbks5uxiS3gaJpZM4VSBbe .

[Veldrovive]

Ok, Page-Selector does not handle navigation in-house. I always suggest using MMM-page-indicator since when you click on one of the circles at the bottom it will navigate to that page. To keep the cursor visible so you can actual click on them I suggest MMM-Cursor. The other main option is to use one of the many voice command modules. I, of course, use my own (MMM-Voice-Commands), but its functionality is very limited to exactly what I need. Any of the other ones should be able to integrate pretty well too.

[justjim1220]

@cowboysdude Here is how mine turns out: First my config.js:

modules: [
        {
            module: "MMM-Page-Selector",
            position: "top_right",
            config: {
                defaultPage: "Main",
                displayTitle: true
            }
        },

        {
            module: "MMM-page-indicator",
            pages: { "all": "top_left"},
            config: {
                pages: 3,
                activeBright: true,
                inactiveHollow: true
            }
        },

        {
            module: "MMM-Cursor",
            config: {
                timeout: 1000
            }
        },

        {
            disabled: false,
            module: "MMM-BMW-DS",
            position: "top_bar",
            pages: { "Main": "Middle_center", "Two": "bottom_bar", "Three": "top_bar" },
            config: {
                apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX",
                tempUnits: "F",
                lat: "40.26189",
                lng: "-94.03534",
                css: "1",
                ownTitle: "Current Weather Conditions for Bethany, MO:", // Default = Current Conditions
                playSounds: "yes", // yes = weather sounds, no = no weather sounds
                useHeader: false, // true if you want a header
                header: "Your Header", // Any text you want. useHeader must be true
                maxWidth: "100%",
                animationSpeed: 3000,
                initialLoadDelay: 1500,
                retryDelay: 2000,
                updateInterval: 15 * 60 * 1000,
            }
        },

        {
            disabled: false,
            module: "MMM-DigClock",
            position: "top_right",
            pages: { "Main": "top_right", "Two": "top_center", "Three": "middle_center" },
            config: {
                showDate: false,
                showWeek: false,
            }
        },

        {
            disabled: false,
            module: "MMM-PC-Stats",
            position: "top_left",
            pages: { "Main": "top_left", "Two": "bottom_center"},
            config: {
                videoCard: "NVIDIA GeForce GTX 960M",
                useHeader: true,
                header: "My PC Stats...",
                animationSpeed: 0,
                updateInterval: 3 * 1000
            }
        },

        {
            disabled: false,
            module: "MMM-NewsFeedTicker",
            position: "bottom_bar",
            pages: { "Main": "top_bar", "Two": "Middle_center", "Three": "bottom_bar" },
            config: {
                feeds: [
                    {
                        title: "NFL News",
                        url: "https://www.rotowire.com/rss/news.htm?sport=nfl",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        defaultLogo: ""
                    },
                    {
                        title: "ESPN NFL News",
                        url: "http://www.espn.com/espn/rss/nfl/news",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        defaultLogo: ""
                    },
                    {
                        title: "Kansas City Fox Sports News",
                        url: "https://api.foxsports.com/v1/rss?partnerKey=zBaFxRyGKCfxBagJG9b8pqLyndmvo7UU&tag=kansas-city",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        defaultLogo: ""
                    },
                    {
                        title: "CBC Canada NFL News",
                        url: "https://www.cbc.ca/cmlink/rss-sports-nfl",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        defaultLogo: ""
                    },
                    {
                        title: "USA Today NFL News",
                        url: "http://rssfeeds.usatoday.com/UsatodaycomNfl-TopStories",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        defaultLogo: ""
                    },
                    {
                        title: "Fox Sports NFL News",
                        url: "https://api.foxsports.com/v1/rss?partnerKey=zBaFxRyGKCfxBagJG9b8pqLyndmvo7UU&tag=nfl",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        defaultLogo: ""
                    },
                    {
                        title: "CBS Sports NFL Headlines",
                        url: "https://www.cbssports.com/rss/headlines/nfl/",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        defaultLogo: ""
                    },
                    {
                        title: "Wall St. Journal",
                        url: "http://www.wsj.com/xml/rss/3_7455.xml",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        defaultLogo: ""
                    },
                    {
                        title: "Washington Post",
                        alt: "Washington Post",
                        url: "http://feeds.washingtonpost.com/rss/rss_comic-riffs",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        defaultLogo: ""
                    },
                    {
                        title: "New York Times",
                        url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        defaultLogo: ""
                    },
                    {
                        title: "BBC World News",
                        url: "http://feeds.bbci.co.uk/news/world/rss.xml#",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        defaultLogo: ""
                    },
                    {
                        title: "NBC Sports-Network",
                        url: "https://profootballtalk.nbcsports.com/feed/atom/",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        customLogo: "modules/MMM-NewsFeedTicker/pics/NBCSports"
                    },
                    {
                        title: "Sports Illustrated",
                        url: "https://www.si.com/rss/si_nfl.rss",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        customLogo: "modules/MMM-NewsFeedTicker/pics/SI2.png"
                    },
                    {
                        title: "KC Chiefs News",
                        url: "https://www.kansascity.com/sports/nfl/kansas-city-chiefs/",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        customLogo: "modules/MMM-NewsFeedTicker/pics/KCChiefsNews"
                    },
                    {
                        title: "Bethany Republican Clipper",
                        url: "https://www.bethanyclipper.com/category/breaking/",
                        encoding: "UTF-8", //ISO-8859-1
                        className: "myClass",
                        customLogo: "modules/MMM-NewsFeedTicker/pics/BethanyRepublicanClipper"
                    }
                ]
            }
        }
    ]

Now, "Main" page:

page "Two":

page "Three":

As you can see, nothing comes out right... But, for what I am wanting to do, I didn't really need to have duplicates of the same module on different pages, unless it was on all the pages.

So, for me, it was easier to use MMM-pages instead

[cowboysdude]

I will try MMM-Cursor tomorrow........ I use MMM-voice [I helped him when he was developing it] I did try MMM-Voice-Commands but I couldn't get it to work. I am not running on a pi I am running a 32" touch screen on a real mini itx computer ;)

On Wed, Nov 21, 2018 at 11:52 PM Aidan Dempster notifications@github.com wrote:

Ok, Page-Selector does not handle navigation in-house. I always suggest using MMM-page-indicator since when you click on one of the circles at the bottom it will navigate to that page. To keep the cursor visible so you can actual click on them I suggest MMM-Cursor https://github.com/MarinescuEvghenii/MMM-Cursor. The other main option is to use one of the many voice command modules. I, of course, use my own (MMM-Voice-Commands https://github.com/Veldrovive/MMM-Voice-Commands#usage-with-external-modules), but its functionality is very limited to exactly what I need. Any of the other ones should be able to integrate pretty well too.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Veldrovive/MMM-Page-Selector/issues/1#issuecomment-440912343, or mute the thread https://github.com/notifications/unsubscribe-auth/AKgOELKP4BT0V53E__ICrD9soq-lhr4yks5uxi2hgaJpZM4VSBbe .

[justjim1220]

at the moment, I haven't been able to get the Voice commands to work with Windows, which is what I use. I found something that I think will help me get it to work, I just need to dive into it and try, Haven't been doing much with MM as of late, been down with health, and busy.

So, that is why I use MMM-Cursor so I can navigate through the pages using the MMM-page-indicator.

At the moment, I am using my test, or dev machine, so my main MM isn't on here, so what you are seeing in the pics are what is on my test MM at the moment.

But wanted to show you how I was able to get it to work (somewhat) but by what I was meaning that I couldn't get it to work right as stated in the forums chat.

[cowboysdude]

You won't be able to get voice commands to work with windows......it's windows. You need unbuntu or some other type of Linux variant. As for this module it's not working for me...... I tried both the dev and master and it just isn't working. I'm pretty knowledgeable about js and I'm capable of following directions but this doesn't work. When I try to use it with MMM-voice it throws errors and voice won't load...... It's like any other module. If you're the writer it's easy for you but it's not always easy for the non writer to figure out what's going on.

[Veldrovive]

I understand. The weird thing is that you seem to have the usage mostly correct, it's just not working. When you say that "it" throws errors, are you talking about MMM-voice or page-selector? From what I can gather, it seems that Page-Selector seems to be working properly, but you are unable to get a module working that will switch the pages. To actually verify if this is the case, can you put this code:

autoChange: {
    interval: 5
}

in the page selector config such that it will look something like this:

{
    module: "MMM-Page-Selector",
    position: "top_center",
    config: {
        defaultPage: "main",
        displayTitle: true,
        autoChange: {
            interval: 5
        }
    }
}

This will increment the page every 5 seconds without any user input. If that doesn't work or throws any errors, could you attach you full config file such that I can copy it directly into my test instance and see if it is something about the differences in enviroment we are working with?

[cowboysdude]

OK just so I don't leave anyone hanging...... I put this in my custom.css file and it solved the issue for 👍

.fullscreen.above {
    z-index: -1
}

NOW I can click on the indicator and it works ;)