search

Veldrovive / MMM-Page-Selector

An easy way to set up and move between pages on a MagicMirror²
MIT License
35 stars 6 forks source link

Modules showing on top of each other. #35

Closed elblogbruno closed 3 years ago

elblogbruno commented 3 years ago

Hello! Hope there is a solution for this. Currently, I have the config this way, I feel of the two options is the more organized way to do it. image Even though I use the other option, I am having modules from other pages showing on top of my page 1 Thanks Bruno

Veldrovive commented 3 years ago

Sorry, I don't quite understand what the problem is.

Are you saying that MMM-GoogleTasks or MMM-CalendarExt2 is showing on page1?

elblogbruno commented 3 years ago

Yes exactly!

Veldrovive commented 3 years ago

I haven't encountered this issue. Could you post your entire config so that I can make a test enviroment?

elblogbruno commented 3 years ago

https://pastebin.com/JAm1SZw9 shure! Thanks!

Veldrovive commented 3 years ago

Ok, while I'm setting that up, can you check your terminal where you are running the magic mirror and your console output in the electron app?

elblogbruno commented 3 years ago

image

Veldrovive commented 3 years ago

Your config file works fine in my test environment. MMM-GoogleTasks is only showing on page2 and MMM-CalendarExt2 is only modifying clock on page3. You do have MMM-page-indicator listed as an exclusion, but it is not installed. That won't break anything, but it is unnecessary.

Veldrovive commented 3 years ago

What are those 13 errors?

elblogbruno commented 3 years ago

it seems one of my modules api is down image

elblogbruno commented 3 years ago

You do have MMM-page-indicator listed as an exclusion, but it is not installed. That won't break anything, but it is unnecessary.

What does it mean it is not installed?

Veldrovive commented 3 years ago

You do not have it listed in your config.js so it will not show up on the screen.

Veldrovive commented 3 years ago

Can you send a screenshot of the magic mirror on page1?

elblogbruno commented 3 years ago

image

elblogbruno commented 3 years ago

When changing pages from Leap Motion notification is when this happen. image

Picture above this one is sending notification manually

elblogbruno commented 3 years ago

https://github.com/Klettner/MM-Remote using android app i am sending manually a notification to change page and nothing strange happens, but when using Leap Motion (https://github.com/manifestinteractive/MMM-Leap-Motion) to switch pages everything starts to go wrong

Veldrovive commented 3 years ago

So on both, you are using the LEAP_MOTION_SWIPE_RIGHT or LEAP_MOTION_SWIPE_LEFT notification, but it works when you send it manually, but not when MMM-Leap-Motion sends it?

Veldrovive commented 3 years ago

Oh, did you follow the integration tutorial in the module's readme https://github.com/manifestinteractive/MMM-Leap-Motion? Because that code is outdated and no longer necessary.

elblogbruno commented 3 years ago

No I did simply add the right and left notification as a trigger, as well as PAGE_UP and PAGE_DOWN for manually.

incrementPageNotif:["LEAP_MOTION_SWIPE_RIGHT","PAGE_UP"], decrementPageNotif:["LEAP_MOTION_SWIPE_LEFT","PAGE_DOWN"],

So on both, you are using the LEAP_MOTION_SWIPE_RIGHT or LEAP_MOTION_SWIPE_LEFT notification, but it works when you send it manually, but not when MMM-Leap-Motion sends it?

So when sliding my hand, it switches to the next page, but makes the modules behave like the last picture

Veldrovive commented 3 years ago

When you manually trigger the page change, are you using PAGE_UP or LEAP_MOTION_SWIPE_RIGHT?

I don't have a leap so I can't test this case.

It seems like some other module is putting a lock on hiding modules such that MMM-Page-Selector cannot set their display status. To remove other non-default modules as an option, try using this config:

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw https://michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information on how you can configure this file
 * See https://github.com/MichMich/MagicMirror#configuration
 *
 */

var config = {
    address: "0.0.0.0",     // 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 or empty, is "localhost"
    port: 8080,
    basePath: "/",  // The URL path where MagicMirror is hosted. If you are using a Reverse proxy
                    // you must set the sub path here. basePath must end with a /
    ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1","192.168.1.1/24"],     // 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"],

    useHttps: false,        // Support HTTPS or not, default "false" will use HTTP
    httpsPrivateKey: "",    // HTTPS private key path, only require when useHttps is true
    httpsCertificate: "",   // HTTPS Certificate path, only require when useHttps is true

    language: "en",
    logLevel: ["INFO", "LOG", "WARN", "ERROR"],
    timeFormat: 24,
    units: "metric",
    // serverOnly:  true/false/"local" ,
    // local for armv6l processors, default
    //   starts serveronly and then starts chrome browser
    // false, default for all NON-armv6l devices
    // true, force serveronly mode, because you want to.. no UI on this device

    modules: [
        {
            module: "alert",
        },
        {
            module: "updatenotification",
        },
        {
            module: "clock",
        },
        {
            module: "MMM-Page-Selector",
            position: "top_bar",
            config: {
                defaultPage: "page1",
                debug: true,
                displayTitle: true,
                incrementPageNotif:["LEAP_MOTION_SWIPE_RIGHT"],
                decrementPageNotif:["LEAP_MOTION_SWIPE_LEFT"],
            }
        },
        {
            module: 'MMM-Leap-Motion',
            config: {
              watchGestureUp: false,
              watchGestureDown: false,
              watchGestureLeft: true,
              watchGestureRight: true,
              watchGestureForward: false,
              watchGestureBack: false,
              orientation: 'up'
            }
        },
        {
            module: 'MMM-Remote-Control',
            // uncomment the following line to show the URL of the remote control on the mirror
            // position: 'bottom_left',
            // you can hide this module afterwards from the remote control itself
            config: {
                apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
            }
        }
    ],
    pages: {
        page1: {
            "updatenotification": "top_bar",
            "clock": "top_left",
        },
        page2: {
            "MMM-GoogleTasks": "middle_center"
        }
        // forth: {
        //  "on-this-day": "bottom_bar",
        //  "MMM-SmartWebDisplay": "middle_center"
        // }
    },
    exclusions: {
        // "MMM-page-indicator": "bottom_bar",
        "MMM-Leap-Motion": "top_bar"
    }

};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}
elblogbruno commented 3 years ago

When you manually trigger the page change, are you using PAGE_UP or LEAP_MOTION_SWIPE_RIGHT?

I am using PAGE_UP I will try the config

Veldrovive commented 3 years ago

Also try using LEAP_MOTION_SWIPE_RIGHT to manually trigger the response. This will tell us if the problem lies with the leap module or with some other one.

elblogbruno commented 3 years ago

With your config, I can't get out of "page1", maybe because the module at "page2" is not installed

Veldrovive commented 3 years ago

Oh, whoops. Forgot to change that:

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw https://michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information on how you can configure this file
 * See https://github.com/MichMich/MagicMirror#configuration
 *
 */

var config = {
    address: "0.0.0.0",     // 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 or empty, is "localhost"
    port: 8080,
    basePath: "/",  // The URL path where MagicMirror is hosted. If you are using a Reverse proxy
                    // you must set the sub path here. basePath must end with a /
    ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1","192.168.1.1/24"],     // 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"],

    useHttps: false,        // Support HTTPS or not, default "false" will use HTTP
    httpsPrivateKey: "",    // HTTPS private key path, only require when useHttps is true
    httpsCertificate: "",   // HTTPS Certificate path, only require when useHttps is true

    language: "en",
    logLevel: ["INFO", "LOG", "WARN", "ERROR"],
    timeFormat: 24,
    units: "metric",
    // serverOnly:  true/false/"local" ,
    // local for armv6l processors, default
    //   starts serveronly and then starts chrome browser
    // false, default for all NON-armv6l devices
    // true, force serveronly mode, because you want to.. no UI on this device

    modules: [
        {
            module: "alert",
        },
        {
            module: "updatenotification",
        },
        {
            module: "clock",
        },
        {
            module: "compliments",
        },
        {
            module: "MMM-Page-Selector",
            position: "top_bar",
            config: {
                defaultPage: "page2",
                debug: true,
                displayTitle: true,
                incrementPageNotif:["LEAP_MOTION_SWIPE_RIGHT"],
                decrementPageNotif:["LEAP_MOTION_SWIPE_LEFT"],
            }
        },
        {
            module: 'MMM-Leap-Motion',
            config: {
              watchGestureUp: false,
              watchGestureDown: false,
              watchGestureLeft: true,
              watchGestureRight: true,
              watchGestureForward: false,
              watchGestureBack: false,
              orientation: 'up'
            }
        },
        {
            module: 'MMM-Remote-Control',
            // uncomment the following line to show the URL of the remote control on the mirror
            // position: 'bottom_left',
            // you can hide this module afterwards from the remote control itself
            config: {
                apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
            }
        }
    ],
    pages: {
        page1: {
            "updatenotification": "top_bar",
            "clock": "top_left",
        },
        page2: {
            "compliments": "middle_center"
        }
        // forth: {
        //  "on-this-day": "bottom_bar",
        //  "MMM-SmartWebDisplay": "middle_center"
        // }
    },
    exclusions: {
        // "MMM-page-indicator": "bottom_bar",
        "MMM-Leap-Motion": "top_bar"
    }

};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}
elblogbruno commented 3 years ago

Ok with this config, i can switch page manually, but not swiping my hand on the leap motion (it swipes, and modules fade out and fade in again but does not change page)

Veldrovive commented 3 years ago

Switching with the leap just does not work at all? Does the title at the top of the page change? Is there any console output when you try? What happens when you manually page switch with the LEAP_MOTION_SWIPE_RIGHT notification?

elblogbruno commented 3 years ago

Ok so i start with page1 and updatenotification and clock modules. I do manually page switch with LEAP_MOTION_SWIPE_RIGHT and it switches to page 2 (title also) with compliments modules.

When I switch with the leap, (title does not change) and updatenotifcationand clockmodules stay and module from page2, compliments, appears, but i continue having on the title "page1".

elblogbruno commented 3 years ago

When I switch with the leap, (title does not change) and updatenotifcationand clockmodules stay and module from page2, compliments, appears, but i continue having on the title "page1".

image

this is shown

Veldrovive commented 3 years ago

I added some more logging so that we can hopefully see why . Pull the new changes and then try repeating

elblogbruno commented 3 years ago

image

elblogbruno commented 3 years ago

and this when switching manually image

Veldrovive commented 3 years ago

Wow, yea I have no idea what is going on. This here is output from the mm software saying that compliments has been hidden

Screen Shot 2020-12-26 at 12 07 34 PM

but then just a second later we get this output from mm saying that compliments is not hidden

Screen Shot 2020-12-26 at 12 08 40 PM

Since this only occurs when the leap is used and is manually triggering the same notification works, we can safely assume that the leap module is somehow re-showing the compliments module. The problem is, I just looked through the leap module's code and nowhere in there is it doing anything that would prevent page switching. I'm kind of stumped since I don't have a leap to do thorough testing with.

As a santity check, can you clone MMM-page-indicator and MMM-Cursor and set up this config:

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw https://michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information on how you can configure this file
 * See https://github.com/MichMich/MagicMirror#configuration
 *
 */

var config = {
    address: "0.0.0.0",     // 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 or empty, is "localhost"
    port: 8080,
    basePath: "/",  // The URL path where MagicMirror is hosted. If you are using a Reverse proxy
                    // you must set the sub path here. basePath must end with a /
    ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1","192.168.1.1/24"],     // 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"],

    useHttps: false,        // Support HTTPS or not, default "false" will use HTTP
    httpsPrivateKey: "",    // HTTPS private key path, only require when useHttps is true
    httpsCertificate: "",   // HTTPS Certificate path, only require when useHttps is true

    language: "en",
    logLevel: ["INFO", "LOG", "WARN", "ERROR"],
    timeFormat: 24,
    units: "metric",
    // serverOnly:  true/false/"local" ,
    // local for armv6l processors, default
    //   starts serveronly and then starts chrome browser
    // false, default for all NON-armv6l devices
    // true, force serveronly mode, because you want to.. no UI on this device

    modules: [
        {
            module: "alert",
        },
        {
            module: "MMM-Cursor"
        },
        {
            module: "updatenotification",
        },
        {
            module: "clock",
        },
        {
            module: "compliments",
        },
        {
            module: "MMM-Page-Selector",
            position: "top_bar",
            config: {
                defaultPage: "page2",
                debug: true,
                displayTitle: true,
                incrementPageNotif:["LEAP_MOTION_SWIPE_RIGHT"],
                decrementPageNotif:["LEAP_MOTION_SWIPE_LEFT"],
            }
        },
        {
            module: 'MMM-Leap-Motion',
            config: {
              watchGestureUp: false,
              watchGestureDown: false,
              watchGestureLeft: true,
              watchGestureRight: true,
              watchGestureForward: false,
              watchGestureBack: false,
              orientation: 'up'
            }
        },
        {
            module: "MMM-page-indicator"
        },
        {
            module: 'MMM-Remote-Control',
            // uncomment the following line to show the URL of the remote control on the mirror
            // position: 'bottom_left',
            // you can hide this module afterwards from the remote control itself
            config: {
                apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
            }
        }
    ],
    pages: {
        page1: {
            "updatenotification": "top_bar",
            "clock": "top_left",
        },
        page2: {
            "compliments": "middle_center"
        }
        // forth: {
        //  "on-this-day": "bottom_bar",
        //  "MMM-SmartWebDisplay": "middle_center"
        // }
    },
    exclusions: {
        "MMM-page-indicator": "bottom_bar",
        "MMM-Leap-Motion": "top_bar"
    }

};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}

There will be two dots at the bottom of the page. Clicking on the non-filled dot will take you to that page. If you verify that this works, then we know the problem is with the leap module.

elblogbruno commented 3 years ago

It works, i can switch pages correctly and nothing strange happens

Veldrovive commented 3 years ago

The last thing that I can think of that might be happening is that the page object is getting overwritten somehow. I pushed yet another time with some more logging to see if that is the problem.

elblogbruno commented 3 years ago

I have discovered debuging Leap Module image it send notification twice. Maybe as there are only two pages it goes from page1 to page2, and then again from page2 to page1 and here it bugs maybe? i will try your commit

elblogbruno commented 3 years ago

image

Veldrovive commented 3 years ago

Ah, great catch! You are completely correct. Re-showing occurs 500ms after the hiding to let the animation play. If a new page switch is run in that time, it will show both pages on the screen.

I will patch the module so that this is not an issue.

elblogbruno commented 3 years ago

Oh glad I find it! Thanks for all!

Veldrovive commented 3 years ago

Ok, I pushed a new version that fixes this bug.

There is a new prop in the config: pageSwitchTimeout. The default value for this is 50ms so if the notifications are coming within 50ms, you don't have to change anything. If two notifications are sent within pageSwitchTimeout milliseconds, the second will not actually cause a page change.

Your new MMM-Page-Selector config might look like this if you need to increase the pageSwitchTimeout:

{
    module: "MMM-Page-Selector",
    position: "top_bar",
    config: {
        defaultPage: "page1",
        pageSwitchTimeout: 100,
        debug: true,
        displayTitle: true,
        incrementPageNotif:["LEAP_MOTION_SWIPE_RIGHT"],
        decrementPageNotif:["LEAP_MOTION_SWIPE_LEFT"],
    }
}

Just close this if it is fixed.

elblogbruno commented 3 years ago

It got fixed ! Awesome! now looking at leap code i had an awesome idea to implement, let's see how it goes! Thanks for all