• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

MMM-Carousel switching slides using MMM-Buttons

Scheduled Pinned Locked Moved Solved Troubleshooting
7 Posts 4 Posters 3.6k Views 5 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.
  • A Offline
    AxLed Module Developer
    last edited by Jun 3, 2018, 4:33 PM

    Hi,

    you have to add/modify some code in MMM-Carousel.js

    The relevant part start at line 50 (notification received)

    notificationReceived: function (notification, payload, sender) {
                var position, positions = ['top_bar', 'bottom_bar', 'top_left', 'bottom_left', 'top_center', 'bottom_center', 'top_right', 'bottom_right', 'upper_third', 'middle_center', 'lower_third'];
                if (notification === 'MODULE_DOM_CREATED') {
                    // Initially, all modules are hidden except the first and any ignored modules
                    // We start by getting a list of all of the modules in the transition cycle
                    if ((this.config.mode === 'global') || (this.config.mode === 'slides')) {
                        this.setUpTransitionTimers(null);
                    } else {
                        for (position = 0; position < positions.length; position += 1) {
                            if (this.config[positions[position]].enabled === true) {
                                this.setUpTransitionTimers(positions[position]);
                            }
                        }
                    }
                }
    
                // Handle KEYPRESS events from the MMM-KeyBindings Module
                if (notification === "KEYPRESS_MODE_CHANGED") {
                    this.currentKeyPressMode = payload;
                }
                // if (notification === "KEYPRESS") {
                //     console.log(payload);
                // }
                if (notification === "KEYPRESS" && (this.currentKeyPressMode === this.config.keyBindingsMode) && 
                        payload.KeyName in this.reverseKeyMap && payload.Sender === this.instance) {
                    if (payload.KeyName === this.config.keyBindings.NextSlide) {
                        this.manualTransition(undefined, 1);
                        this.restartTimer();
                    }
                    else if (payload.KeyName === this.config.keyBindings.PrevSlide) {
                        this.manualTransition(undefined, -1);
                        this.restartTimer();
                    }
                    else if (this.reverseKeyMap[payload.KeyName].startsWith("Slide")) {
                        var goToSlide = this.reverseKeyMap[payload.KeyName].match(/Slide([0-9]+)/i);
                        console.log((typeof goToSlide[1]) + " " + goToSlide[1]);
                        if (typeof parseInt(goToSlide[1]) === "number") { 
                            this.manualTransition(parseInt(goToSlide[1]));
                            this.restartTimer();                        
                        }
                    }
                }
    },
    

    You can add your “own” Page_increment / Page_decrement parts here.

    AxLED

    1 Reply Last reply Reply Quote 0
    • O Offline
      onkelbobby
      last edited by Jun 4, 2018, 9:29 PM

      Hi AxLED,
      thanks for your response.

      I tried to trigger the NextSlide function (line 75) and the PrevSlide function (line 79) by adding the following code:

      notificationReceived: function (notification, payload, sender) {
                  var position, positions = ['top_bar', 'bottom_bar', 'top_left', 'bottom_left', 'top_center', 'bottom_center', 'top_right', 'bottom_right', 'upper_third', 'middle_center', 'lower_third'];
                  if (notification === 'MODULE_DOM_CREATED') {
                      // Initially, all modules are hidden except the first and any ignored modules
                      // We start by getting a list of all of the modules in the transition cycle
                      if ((this.config.mode === 'global') || (this.config.mode === 'slides')) {
                          this.setUpTransitionTimers(null);
                      } else {
                          for (position = 0; position < positions.length; position += 1) {
                              if (this.config[positions[position]].enabled === true) {
                                  this.setUpTransitionTimers(positions[position]);
                              }
                          }
                      }
                  },
                  //-----BOBBY CODE
                  switch (notification) {
                      case 'SLIDE_INCREMENT':
                        Log.log(`${this.name} recieved a notification to increment slides!`);
                        this.manualTransition(undefined, 1);
                        this.restartTimer();
                        break;
                      case 'SLIDE_DECREMENT':
                        Log.log(`${this.name} recieved a notification to decrement slide!`);
                        this.manualTransition(undefined, -1);
                        this.restartTimer();
                        break;
                      default:
                  //-----BOBBY CODE END
      
                  // Handle KEYPRESS events from the MMM-KeyBindings Module
                  if (notification === "KEYPRESS_MODE_CHANGED") {
                      this.currentKeyPressMode = payload;
                  }
                  // if (notification === "KEYPRESS") {
                  //     console.log(payload);
                  // }
                  if (notification === "KEYPRESS" && (this.currentKeyPressMode === this.config.keyBindingsMode) && 
                          payload.KeyName in this.reverseKeyMap && payload.Sender === this.instance) {
                      if (payload.KeyName === this.config.keyBindings.NextSlide) {
                          this.manualTransition(undefined, 1);
                          this.restartTimer();
                      }
                      else if (payload.KeyName === this.config.keyBindings.PrevSlide) {
                          this.manualTransition(undefined, -1);
                          this.restartTimer();
                      }
                      else if (this.reverseKeyMap[payload.KeyName].startsWith("Slide")) {
                          var goToSlide = this.reverseKeyMap[payload.KeyName].match(/Slide([0-9]+)/i);
                          console.log((typeof goToSlide[1]) + " " + goToSlide[1]);
                          if (typeof parseInt(goToSlide[1]) === "number") { 
                              this.manualTransition(parseInt(goToSlide[1]));
                              this.restartTimer();                        
                          }
                      }
                  }
              },
      

      but unfortunately it is not working. Do you have any idea why?

      1 Reply Last reply Reply Quote 0
      • O Offline
        onkelbobby
        last edited by onkelbobby Jun 7, 2018, 10:59 AM Jun 7, 2018, 10:58 AM

        finally I got it!!!

        in the config.js section of MMM-Buttons Module I generated two new “broadcast notifications” that are sent once the according button is pressed:

        buttons: [
        {	pin: 05,
                name: "Slide increment",
                shortPress: {
                     notification: "SLIDE_INCREMENT",
        	},
        },
        {	pin: 06,
                name: "Slide decrement",
                shortPress: {
                     notification: "SLIDE_DECREMENT",
        	},
        },
        ]
        

        and in MMM-Carousel.js I added the following code lines in line 65:

        // Handle notifications sent from MMM-Buttons Module
               if (notification === "SLIDE_INCREMENT") {
                   this.manualTransition(undefined, 1);
                   this.restartTimer();
               }
               if (notification === "SLIDE_DECREMENT") {
                   this.manualTransition(undefined, -1);
                   this.restartTimer();
               }
        

        Of course the transitionInterval for automatic slide change needs to be set to ‘0’
        Now it’s possible to switch between various pages by a simple button press.

        Hope this helps!

        Best,
        onkelbobby

        M 1 Reply Last reply Nov 19, 2018, 3:30 AM Reply Quote 0
        • M Offline
          mirror.master @onkelbobby
          last edited by Nov 19, 2018, 3:30 AM

          @onkelbobby dunno if you are still around the thread. But I have been trying what you succeeded in. And I can’t get it to work. Do I need to edit the lines in be 70s or just the ones In the 50s for carousel. But the slides won’t move on click

          1 Reply Last reply Reply Quote 0
          • S Offline
            shbatm Module Developer
            last edited by shbatm Dec 19, 2018, 9:14 AM Dec 19, 2018, 8:46 AM

            Which version of MMM-Carousel are you using? If you use this one: MMM-Carousel w/ Slide Navigation you can navigate left and right or jump to a particular slide by sending a notification from another module.

            Just pushed an update to make this even easier. See the details at the bottom of the README

            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