MMM-Carousel switching slides using MMM-Buttons

[AxLed]

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

[onkelbobby]

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?

[onkelbobby]

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

[mirror.master]

@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

[shbatm]

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