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

[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 :)

[tburk32]

@CurlyQ12391 @MMRIZE, I followed this thread to enable the swipe left and right to change pages but I’ve run into an issue that this only works when I have the dev console open, either using npm start dev or npm run start followed by ctrl+shift+i. Do you have any ideas why it would only work when the dev console is open?

[sdetweil]

@tburk32 no. the code doesn’t know

[sdetweil]

@tburk32 also, before 2.30

you could do

npm start dev

on 2.30, because of the different ui engine choices

npm run start:dev

[tburk32]

@sdetweil I agree, but it isn’t the way it’s acting. When I have it in the dev console, a grey circle also appears on the screen as a cursor and I’m wondering if that is part of the difference.

[sdetweil]

@tburk32 maybe the dev console gives you access under the z-index for touch

[tburk32]

@sdetweil I removed all of the other modules in my config.js file and experienced the same results. To go one step further with the z-index exploration, I added this to the custom.css.

.MMM-Touch (position: absolute; z-index -1) 

Additionally, while having the dev console open, clicks with a mouse also register on MMM-Touch, so I it doesn’t seem like it’s unique to the display/touch function.

I really appreciate your responses so far.

[sdetweil]

@tburk32 you have an error there

css has

name : value ;

your z-index is missing both : and ;

and -1 means background, down/further away , in the 3d stack
so that puts other content on top of it, so touch wont work

[tburk32]

@sdetweil thanks for pointing out the -1 index, I saw it as a resolution on another topic and figured I’d try. No values in the z-index seem to make a difference.

While in devtools, I selected “restore defaults and reload” and the MMM-Touch inputs were no longer recognized, which aligns with the expectation that “the code doesn’t know”. This helped me realize that the Device toolbar (ctrl+shift+M) has to be displayed for the inputs to be recognized again, either with a touch or a click.

[sdetweil]

@tburk32 did you enable touch events in custom.css
cause they are disabled by default in main.css
main.css

html {
  cursor: none;

}

custom.css

html {
  cursor: default;
}