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.

    How to Swipe between pages

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    8 Posts 3 Posters 120 Views 3 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.
    • T Offline
      TheSteveBennett
      last edited by

      I have MagicMirror2 installed on a Raspberry PI 4 with a Pi Touch Display2. I am trying to Swipe between pages using MMM-SmartTouch and MMM-Pages. The config looks right but I can’t figure out what I am doing wrong? Here is a copy of my config.

      let config = {
          address: "0.0.0.0",
          port: 8080,
          basePath: "/",
          ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1", "192.168.4.0/24"],
      
          useHttps: false,
          httpsPrivateKey: "",
          httpsCertificate: "",
      
          language: "en",
          locale: "en-US",
          logLevel: ["INFO", "LOG", "WARN", "ERROR"],
          timeFormat: 12,
          units: "imperial",
      
          modules: [
              {
                  module: "alert",
              },
              {
                  module: "updatenotification",
                  position: "top_bar"
              },
              {
                  module: "clock",
                  position: "top_left",
                  classes: "page-1"
              },
              {
                  module: "calendar",
                  header: "US Holidays",
                  position: "top_left",
                  classes: "page-1",
                  config: {
                      calendars: [
                          {
                              fetchInterval: 7 * 24 * 60 * 60 * 1000,
                              symbol: "calendar-check",
                              url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
                          }
                      ]
                  }
              },
              {
                  module: "compliments",
                  position: "lower_third",
                  classes: "page-1"
              },
              {
                  module: "weather",
                  position: "top_right",
                  classes: "page-2",
                  config: {
                      weatherProvider: "openmeteo",
                      type: "current",
                      lat: 40.776676,
                      lon: -73.971321
                  }
              },
              {
                  module: "weather",
                  position: "top_right",
                  header: "Weather Forecast",
                  classes: "page-2",
                  config: {
                      weatherProvider: "openmeteo",
                      type: "forecast",
                      lat: 40.776676,
                      lon: -73.971321
                  }
              },
              {
                  module: "MMM-MyWeather",
                  position: "top_right",
                  classes: "page-2",
                  config: {
                      // Your MyWeather configuration
                  }
              },
              {
                  module: "newsfeed",
                  position: "bottom_bar",
                  classes: "page-2",
                  config: {
                      feeds: [
                          {
                              title: "New York Times",
                              url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml"
                          }
                      ],
                      showSourceTitle: true,
                      showPublishDate: true,
                      broadcastNewsFeeds: true,
                      broadcastNewsUpdates: true
                  }
              },
              {
                  module: "MMM-HomeAssistantDisplay",
                  position: "middle_center",
                  classes: "page-3",
                  config: {
                      // Your Home Assistant configuration
                  }
              },
              {
                  module: "MMM-Cursor",
                  config: {
                      timeout: 3000  // Increased timeout for better touch experience
                  }
              },
              {
                  module: 'MMM-BackgroundSlideshow',
                  position: 'fullscreen_below',
                  config: {
                      imagePaths: ['modules/MMM-BackgroundSlideshow/exampleImages/'],
                      transitionImages: true,
                      randomizeImageOrder: true,
                      slideshowSpeed: 30000  // 30 seconds per background
                  }
              },
              {
                  module: "MMM-Pages",
                  config: {
                      modules: [
                          ["page-1"],  // Page 1: Clock, Calendar, Compliments
                          ["page-2"],  // Page 2: Weather and News
                          ["page-3"]   // Page 3: Home Assistant
                      ],
                      fixed: ["alert", "updatenotification", "MMM-page-indicator", "MMM-SmartTouch", "MMM-Cursor", "MMM-BackgroundSlideshow"],
                      animationTime: 1000,     // Smooth transition between pages
                      rotationTime: 0,         // No automatic rotation
                      rotationDelay: 10000,
                      touchMode: true,          // Enable touch support
                      useSwipe: true,
                      swipeSensitivity: 30
                  }
              },
              {
                  module: "MMM-page-indicator",
                  position: "bottom_bar",
                  config: {
                      pages: 3,                // Now 3 pages total
                      activeBrightness: 100,
                      inactiveBrightness: 30
                  }
              },
              {
                  module: "MMM-SmartTouch",
                  position: "fullscreen_above",
                  config: {
                      debug: true,
                      enableCursor: true,
                      cursorTimeout: 3000,     // Hide cursor after 3 seconds
                      gesture: {
                          sensitivity: 15,     // Better for Raspberry Pi Touch Display
                          minSwipeDistance: 30, // Lower threshold for easier swiping
                          maxTimeThreshold: 1000 // More time allowed to complete swipe
                      },
                      touches: [
                          {
                              gesture: "swipeleft",
                              command: "NEXT_PAGE"
                          },
                          {
                              gesture: "swiperight",
                              command: "PREVIOUS_PAGE"
                          },
                          {
                              gesture: "tap",
                              command: "SHOW_CURSOR"
                          },
                          {
                              gesture: "doubletap",
                              command: "REFRESH"  // Allows refreshing the mirror if needed
                          }
                      ]
                  }
              }
          ]
      };
      
      /*************** DO NOT EDIT THE LINE BELOW ***************/
      if (typeof module !== "undefined") { module.exports = config; }
      
      
      S 1 Reply Last reply Reply Quote 0
      • S Away
        sdetweil @TheSteveBennett
        last edited by

        @TheSteveBennett where is smarttouch from? only one i see doesn’t have any config, and doesn’t do swipe

        https://github.com/EbenKouao/MMM-SmartTouch

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        S T 2 Replies Last reply Reply Quote 0
        • S Away
          sdetweil @sdetweil
          last edited by sdetweil

          @TheSteveBennett also you should install
          MMM-ViewNotifications
          so you can see what events are being processed

          Sam

          How to add modules

          learning how to use browser developers window for css changes

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

            @sdetweil That is the one I installed. How can you tell that it doesn’t support swipe and could you recommend one that does.

            S 2 Replies Last reply Reply Quote 0
            • S Away
              sdetweil @TheSteveBennett
              last edited by

              @TheSteveBennett it has no config, i looked at the code

              i dont know where you got the config from.

              id look at the 3rd party list (linked above) and search on swipe
              there have bern a few posts recently(last monthish) on this topic

              sadly MagicMirror forum search stinks

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              R 1 Reply Last reply Reply Quote 0
              • R Offline
                rkorell @sdetweil
                last edited by

                @sdetweil said in How to Swipe between pages:

                sadly MagicMirror forum search stinks

                :-)
                what I’m using regularly and works pretty well is external search via Google with limitation to site forum.mgicmirror.builders …
                Astonishing…

                Regards,
                Ralf

                S 1 Reply Last reply Reply Quote 1
                • S Away
                  sdetweil @rkorell
                  last edited by sdetweil

                  @rkorell i tried that a long time ago , but wasnt happy

                  this time better, ill have to figure out some parms cause 2017 results before 2025 is not helpful either

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 1
                  • S Away
                    sdetweil @TheSteveBennett
                    last edited by

                    @TheSteveBennett MMM-Touch was the module i was thinking of

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • 1 / 1
                    • 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