Need help MMM-touch MMM-pages MMM-page indicator

[crown]

Hello lovely people~

So making a magic mirror with 32 inch IR Frame for touch screen.
Outside the magic mirror browser, the touch screen responds very well.

Successfully created MMM-pages and MMM-page-indicator also.

Just have no idea how to get the IR frame to be able to click into the page-indicator and change pages.

Tried to use MMM-touch and wrote some config as follows.
Still, no luck. Are you able to help me with this?
[15:07] Hayune Lee

{ module: "MMM-Touch", 
position: "top_right", 
config:{
gestureCommands: {     
        "MMM-pages": {
                 "SWIPE_RIGHT": (commander) => { commander.sendNotification("PAGE_INCREMENT")}
                  ,"SWIPE_LEFT": (commander) => { commander.sendNotification("PAGE_DECREMENT")}     
} }}},

Edward Shen, the creator of MMM-pages and MMM-page-indicator has said it is so easy to send notifications but not for me hhaah.

[sdetweil]

@crown edited for clarity. when pasting in config, use the code block

select the pasted text and push </> button above the editor

[sdetweil]

@crown what else is top_right? that is where u have to do the swipe

[crown]

@sdetweil Hello~

Thanks for such a swift reply!!

I did not even know top-right is the place I need to swipe.
I wanted to click into the page-indicator dots

[MMRIZE]

@crown
You can swipe anywhere not only top-right.
Just avoid refreshing DOM or another mouse/pointer event assigned. I recommend using an empty area to avoid misleading gestures.

[CurlyQ12391]

@crown,
Did you end up getting anywhere with this? I have MMM-Touch and MMM-page-indicator but it seems to only work intermittently or upon first restarting MM. After that it just ignore any taps or swipes.

I’ve tried calling “MMM-pages”, “MMM-page-indicator”, and also just “default” without luck.

Just trying to figure out where I may have gone wrong.

{ 
module: "MMM-Touch", 
position: "bottom_bar", 
config:{
gestureCommands: {     
        "MMM-pages": {
                "TAP": (commander) => { commander.sendNotification("PAGE_CHANGE")}
                 "SWIPE_RIGHT": (commander) => { commander.sendNotification("PAGE_INCREMENT")}
                  ,"SWIPE_LEFT": (commander) => { commander.sendNotification("PAGE_DECREMENT")}     
                                           } 
                          }
            }
},

[wishmaster270]

@crown
Hi,

i use MMM-Touch with my 10 inch touch screen and it is working very well.
BUT i do not use MMM-pages but MMM-ProfileSwitcher with MMM-ProfileControl instead. MMM-ProfileControl provided me more flexability with modules like MMM-CalenderExt2. Nearly all of my modules do provide profile support and display/hide stuff depending of the current profile.

In my case i do have 9 horizontal profiles (which are basically pages) and one vertical profile. I configured MMM-ProfileSwitcher to start at “pageC” (my center page) and can switch 4 pages to the left or right from this point.
The profiles can be selected either by pressing the “bubble” of the profile in MMM-ProfileControl or i can swipe left/right to change to the next one. I configured MMM-Touch to send “USER_PRESENCE” notifications for all other gestures to prevent my screensave module of shutting off the screen.
The following configuration shows my setup. I left the configuration of clock as you can see how modules can be configured to be visible at specific profiles.

{
    module: "clock",
    position: "top_center",
    classes: "pageC pageL1"
},
{
    module: "MMM-ProfileControl",
    position: "bottom_center",
    config: {
        profiles: [["pageL4"], ["pageL3"], ["pageL2"], ["pageL1"], ["pageC"], ["pageR1"], ["pageR2_1", "pageR2_2"], ["pageR3"], ["pageR4"]],
        zeroVerticalIndexOnHorziontalChange: true,
        showSeparator: false,
        showVerticalIndicator: false,
        sendPresenceNotificationOnAction: true
    },
    classes: "pageL4 pageL3 pageL2 pageL1 pageC pageR1 pageR2_1 pageR2_2 pageR3 pageR4"
},
{
    module: "MMM-ProfileSwitcher",
    config: {
        defaultClass: "pageC",
        ignoreModules: [
            "MMM-Touch"
        ],
        leaveMessages: false,
        enterMessages: false
    }
},
{
    module: "MMM-Touch",
    position: "bottom_center",
    config: {
        debug: true,
        useDisplay: false,
        defaultMode: "default",
        gestureCommands: {
            default: {
                TAP_1: (commander) => {
                    commander.sendNotification("USER_PRESENCE", true);
                },
                PRESS_1: (commander) => {
                    commander.sendNotification("USER_PRESENCE", true);
                },
                SWIPE_UP_1: (commander) => {
                    commander.sendNotification("USER_PRESENCE", true);
                },
                SWIPE_DOWN_1: (commander) => {
                    commander.sendNotification("USER_PRESENCE", true);
                },
                SWIPE_LEFT_1: (commander) => {
                    commander.sendNotification("PROFILE_INCREMENT_HORIZONTAL", null);
                },
                SWIPE_RIGHT_1: (commander) => {
                    commander.sendNotification("PROFILE_DECREMENT_HORIZONTAL", null);
                }
            }
        }
    }
},

Be aware that CSS z-index is a very powerful weapon if you use touch cause overlapping modules may overlap things you want to press. Sometimes playing around with different z-index settings is necessary to find the right order for the modules.

I ended up configuring a z-index of -1 for all module that is hidden (cause it is not visible in the current profile) in my custom.css:

.module.MMM-Bring.hidden,
.module.MMM-TouchButton.hidden,
.module.MMM-SynologySurveillance.hidden,
.module.MMM-EmbedURL.hidden
 {
  z-index: -1;
}

and add a “normal” z-index to it if it is visible:

.module.MMM-Bring:not(.hidden),
.module.MMM-TouchButton:not(.hidden),
.module.MMM-SynologySurveillance:not(.hidden),
.module.MMM-EmbedURL:not(.hidden) {
  z-index: 500;
}

I also added a very high z-index for the components of MMM-ProfileControl to make sure to be able to control my profiles in all situations:

.MMM-ProfileControl {
  z-index: 2000;
}

.MMM-ProfileControl .indicator {
  z-index: 2005;
}

[CurlyQ12391]

@wishmaster270, Hello your last response was super helpful and I adopted many of the items you mentioned (e.g., z-index) - so thank you!!

I realize this is from quite a while ago, but I am hoping for a bit more advice for this if possible. I have MMM-pages, MMM-page-indicator, and MMM-Touch; with your suggestions I am able to click the page-indicator buttons and switch through the pages I have set up. However, I still cannot get the “Swipe” to work. I can see that the swipe left/right gestures are being recognized using the developer console but they aren’t triggering MMM-pages or MMM-page-indicator to move.
*I CAN see this successfully happen when pressing/tapping the indicator buttons, so I have an idea of what it should do.

		{
			module: "MMM-Touch",
			position: "fullscreen_above",
			    config: {
					useDisplay: false,
					defaultMode: "default",
					gestureCommands: {
						"MMM-page-indicator":{
							"TAP_1": (commander) => {commander.sendNotification("PAGE_CHANGED")},
						},
						"MMM-pages":{
							"MOVE_LEFT_1": (commander) => {commander.sendNotification("PAGE_DECREMENT")},
							"MOVE_RIGHT_1": (commander) => {commander.sendNotification("PAGE_INCREMENT")},
						},
				}, 
			}
		},

I noticed your code has either “true” or “null” at the end of the statement and I’ve seen other examples of this with numerical values. Any suggestions on how to best incorporate that into what I currently have set up?

Thank you!

[MMRIZE]

@CurlyQ12391
Use “SWIPE_LEFT_1” instead of “MOVE_LEFT_1”. These 2 gestures are different.

[MMRIZE]

@CurlyQ12391
And… I’m not familiar with MMM-Pages, so cannot show the example,
But with MMM-Scenes, it would be like this;

{
	module: "MMM-Touch",
	position: "bottom_left",
	classes: "home page1 page2",	
	config: {
		gestureCommands: {
			"default": {
				"SWIPE_RIGHT_1" : (commander) => {
					commander.sendNotification("SCENES_PREV", {
						options: {
							admitAnimation: "pageRight",
							expelAnimation: "pageRight",
						}
					})
				},
				"SWIPE_LEFT_1" : (commander) => {
					commander.sendNotification("SCENES_NEXT", {
						options: {
							admitAnimation: "pageLeft",
							expelAnimation: "pageLeft",
						}
					})
				},
				"PRESS_1" : (commander) => {
					commander.sendNotification("SCENES_ACT", {
						index: 0,
						options: {
							admitAnimation: "fadeIn",
							expelAnimation: "fadeOut",
						}
					})
				}
			},
		},
	}
},
{
	module: "MMM-Scenes",
	position: "bottom_right",
	classes: "home page1 page2",
	config: {
		scenario: ["home", "page1", "page2"],
		autoLoop: "no",
	}
},

Here the demo link to youtube