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

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

CurlyQ12391

@MMRIZE, thank you for catching those gesture name errors and giving my another example. I FINALLY GOT IT :)

		{
			module: "MMM-Touch",
			position: "bottom_bar",
			    disabled: false,
			    config: {
				debug: false,
				useDisplay: false,
				autoMode: false,
				defaultMode: "default",
					gestureCommands: {
					  "default":{
							"TAP_1": (commander) => {commander.sendNotification("USER_PRESENCE", true);},
							"SWIPE_LEFT_1": (commander) => {commander.sendNotification("PAGE_DECREMENT", null);},
							"SWIPE_RIGHT_1": (commander) => {commander.sendNotification("PAGE_INCREMENT", null);},
						},
				}, 
			}
		},

I tried to change things systematically to determine what truly made it start working was the addition of payload after “USER_PRESENCE” and oddly enough adding semicolons at the end of each gesture command.

Hopefully this thread can help someone else down the line :)