MMM-Carousel switching slides using MMM-Buttons

onkelbobby

Hi all,
first of all I want to thank all of you for this excellent work both in generating the MM platform and especially for developing very impressive and valuable modules.

Besides the screen we also integrated two pushbuttons in our mirror and implemented them with MMM-Buttons – working perfectly fine.

The intention with our mirror is to have various slides - all of them showing a different modules and module positions. For switching between the slides we want to use the two pushbuttons. The pushbutton on the right shall be used for increasing the slide number and the button on the left side of the mirror shall decrease the slide number.

After searching MM forum I found a way to do something similar by using MMM-pages: In the MMM-pages.js is a section that handles notifications here in line 71 the notification ‘PAGE_INCREMENT’ and in line 76 the notification ‘PAGE_DECREMENT’ is interpreted and the pages are switched accordingly. Unfortunately MMM-pages does not offer the possibility to place modules on various positions.

Since we definitely want to use modules on different positions on various pages we decided to use the “slides” functionality of MMM-Carousel as described here https://forum.magicmirror.builders/topic/6640/could-use-some-assistance-setting-up-mmm-carousel-w-navigation-and-understanding-the-architecture/8.
Unfortunately we didn’t find any similar solution in MMM-Carousel and since we’re not very familiar to java coding we’re currently stuck.

Is there someone who can help us with a few lines of code to be implemented maybe in the MMM-Carousel.js? Or is this function already implemented and up to now we simply overlooked it?

Thank you for your support
onkelbobby

onkelbobby

Nobody any idea?

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