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 8.8k 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.
    • 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 Do not disturb
          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 Do not disturb
            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 Do not disturb
                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 Do not disturb
                    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
                      • S Do not disturb
                        sdetweil @tburk32
                        last edited by

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

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

                          S 1 Reply Last reply Reply Quote 0
                          • S Do not disturb
                            sdetweil @tburk32
                            last edited by sdetweil

                            @tburk32 so touch is under ext3

                            put touch on top then ext3 wont work

                            Sam

                            How to add modules

                            learning how to use browser developers window for css changes

                            1 Reply Last reply Reply Quote 0
                            • 6 Offline
                              68jeeper
                              last edited by

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

                              S T 2 Replies Last reply Reply Quote 0
                              • S Do not disturb
                                sdetweil @68jeeper
                                last edited by

                                @68jeeper what is not working?

                                Sam

                                How to add modules

                                learning how to use browser developers window for css changes

                                6 1 Reply Last reply Reply Quote 0
                                • 6 Offline
                                  68jeeper @sdetweil
                                  last edited by

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

                                  S 1 Reply Last reply Reply Quote 0
                                  • S Do not disturb
                                    sdetweil @68jeeper
                                    last edited by

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

                                    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 @68jeeper
                                      last edited by

                                      @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");
                                                  },
                                              },
                                          }
                                      },
                                      
                                      1 Reply Last reply Reply Quote 1

                                      Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                      Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                      With your input, this post could be even better 💗

                                      Register Login
                                      • 1
                                      • 2
                                      • 1 / 2
                                      • 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