MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

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

    Scheduled Pinned Locked Moved Development
    27 Posts 7 Posters 6.1k Views 9 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M Offline
      MMRIZE @CurlyQ12391
      last edited by 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

      C 1 Reply Last reply Reply Quote 0
      • C Offline
        CurlyQ12391 @MMRIZE
        last edited by

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

        T 1 Reply Last reply Reply Quote 1
        • T Offline
          tburk32 @CurlyQ12391
          last edited by

          @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?

          S 2 Replies Last reply Reply Quote 0
          • S Offline
            sdetweil @tburk32
            last edited by

            @tburk32 no. the code doesn’t know

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            T 1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @tburk32
              last edited by

              @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
              

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • T Offline
                tburk32 @sdetweil
                last edited by

                @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.

                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @tburk32
                  last edited by

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

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  T 1 Reply Last reply Reply Quote 0
                  • T Offline
                    tburk32 @sdetweil
                    last edited by

                    @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.

                    S 1 Reply Last reply Reply Quote 0
                    • S Offline
                      sdetweil @tburk32
                      last edited by 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

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      T 1 Reply Last reply Reply Quote 0
                      • T Offline
                        tburk32 @sdetweil
                        last edited by

                        @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.

                        S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 2 / 3
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy