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

[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;
}

[tburk32]

@sdetweil changing the cursor value doesn’t seem to make a difference. The touch functionality works for mmm-Calendarext3, to select a day, clicking on the mmm-page-indicator to change pages and mmm-Microsofttodo to complete tasks, so it doesn’t seem to be a problem aside from mmm-Touch not registering the values unless in devtools with the device toolbar open.

[sdetweil]

@tburk32 so touch is under ext3

put touch on top then ext3 wont work

[68jeeper]

@tburk32 were you able to get this going? I am attempting to do the same and it is not working for me either.

[sdetweil]

@68jeeper what is not working?

[68jeeper]

@sdetweil MMM-Touch. I have it setup exactly as shown in this thread, and I cannot get the swipe to do anything. Just like @tburk32, the touch screen works on CX3 and Page Indicator so I know my touch screen is working. Any advice?

[sdetweil]

@68jeeper well, I can’t get touch to trigger at all… only thing in bottom_bar…
(on my mac with mouse)

[tburk32]

@68jeeper yes! Sorry for the delayed response, I didn’t receive any notifications that you tagged me in this post.

My solution was to use (https://github.com/JanLoebel/mmm-touchgestures). Hammer.js seems to be the difference and why this one works. The documentation was challenging for me ti follow but I was able to get it working through trial and error. My config look like this for MMM-touchgestures

{
    module: 'mmm-touchgestures',
    config: {
        gestures: {
            "swipe": {
                enabled: true,
                threshold: 50
            }
        },
    
        actions: {
            "swiperight" : function() {
                return "PAGE_INCREMENT";
            },
            "swipeleft" : function() {
                return "PAGE_DECREMENT";
            },
            "swipeup" : function() {
                console.log("Triggered swipeup");
            },
            "swipedown" : function() {
                console.log("Triggered swipedown");
            },
        },
    }
},