Could use some assistance setting up MMM-Carousel w/ Navigation and understanding the architecture

[beeficecream]

@shbatm I wasn’t expecting a drop-in from the designer/developer - thank you for taking the time to expand on the original Carousel, I’m a big fan of the module!

Also thank you for these notes! I was having trouble understanding how to utilize the carouselId values and where exactly to put them, this information cleared it up perfectly for me! This should keep things a bit more organized in my config file.

[lamachine]

@shbatm I sort of got it working, but having problems with the calendar setup. I followed the advice for config.js with adding carouselID: “#” and then the {name: ‘calendar’, carouselID: “#”, but with three pages and three calendars, all three show up on the first slide, and none on the other two.

Anything obviously missing?

{
                        module: "calendar",
                        header: "Boy's Calendar",
                        position: "top_left",
                        carouselId: "1",
                        config: {
                                calendars: [
                                        {
                                                symbol: "calendar-check-o",
                                                url: "https://calendar.google.c$
                                        }
                                ]
                        }
                },

module: 'MMM-Carousel',
                    config: {
                        transitionInterval: 10000,
                        ignoreModules: ['clock', 'alert','currentweather', 'com$
                        mode: 'slides',
                        slides: [
                            ['calendar'],
                            [   {name:'calendar', carouselID:"2"}, 'MMM-darksky$
                            [   {name:'calendar', carouselID:"3"}, 'weatherfore$
                         ]
                    }

:::

Spoiler Text

:::

[shbatm]

@lamachine the carouselId: "1" needs to be inside the calendar module’s config section (move it down a line).

Also if you just put ‘calendar’ in a slide, it will show every calendar, each one needs a carouselId.

[lamachine]

@shbatm

wow, the developer again, thanks so much for the quick reply!

I thought I was making some progress, but still not quite right…

Code changes as follows

module: 'MMM-Carousel',
                    config: {
                        transitionInterval: 10000,
                        ignoreModules: ['clock', 'alert','currentweather', 'com$
                        mode: 'slides',
                        slides: [
                            [ {name:'calendar', carouselID:"1"}],

and

                       module: "calendar",
                        header: "Boy's Calendar",
                        position: "top_left",
                        config: {
                                carouselId: "1",
                                calendars: [
                                        {
                                                symbol: "calendar-check-o",
                                                url: "https

I ran it through JSHint, so at least the formatting is acceptable.

[shbatm]

Check your capitalization in the MMM-Carousel config. It should be carouselId, not carouselID.

[robiv8]

This is my config for test.

{
            module: 'MMM-Carousel',
            position: 'bottom_bar', // Required only for navigation controls
            config: {
                transitionInterval: 0,
                showPageIndicators: true,
                showPageControls: false,
                ignoreModules: ['MMM-Podcast2', 'alert', 'MMM-Buttons', 'MMM-Remote-Control', 'MMM-Remote-Control-Repository'],
                mode: 'slides',
                slides: {
                    main: [{name:'clock', carouselId: "1"}],
                    "2": ['MMM-DarkSkyForecast', 'newsfeed'],
                    "3": ['MMM-DWD-WarnWeather'],
                    "4": ['MMM-DarkSkyForecast', 'newsfeed'],
                    "5": ['MMM-DWD-WarnWeather'],
                    "6": ['MMM-DarkSkyForecast', 'newsfeed']
                }
            }
        },

and this the two modules

{
module: "clock",
name: "AnalogClock",
position: "middle_center",
config: {
carouselId: "1",
showDate: false,
displayType: 'analog',
analogSize: '540px',
analogFace: 'face-001',
secondsColor: '#FF0000',
analogPlacement: 'top'
}
},
{
module: "clock",
name: "AnalogClock2",
position: "middle_center",
config: {
carouselId: "2",
showDate: false,
displayType: 'analog',
analogSize: '570px',
analogFace: 'face-001',
secondsColor: '#FF0000',
analogPlacement: 'top'
}
},

but the clock is only visible on page 6?
And the main page is completely missing!
I am confused :thinking_face:

But then I tried the following:
instead of
main: [{name:‘clock’, carouselId: “1”}],
I put this
“1”: [{name:‘clock’, carouselId: “1”}],

And what should I say! It works. :smiling_face_with_open_mouth:

[shbatm]

@robiv8 Strange. I wonder if it’s something with the word main. You could also try "Main".

Here’s one of my carousel configs for another reference:

                slides: {
                    Home: [{ name: 'clock', classes: 'zoom200', position: "middle_center", carouselId: 1 }],
                    Info: [{ name: 'clock', classes: 'zoom200', position: "top_center", carouselId: 1 },
                        { name: 'calendar', position: 'top_left' }, 'MMM-Todoist',
                        'MMM-DarkSkyForecast',
                        'newsfeed',
                    ],
                    Status: [{ name: 'clock', classes: '', position: "top_left", carouselId: 2 },
                        'MMM-JSONStatusChecker', "internet-monitor"
                    ],
                    ISY: [{ name: 'clock', classes: '', position: "top_left", carouselId: 2 }, 'MMM-ISY'],
                    Cameras: ["MMM-RTSPStream"],
                    Octopi: [{ name: 'clock', classes: '', position: "top_left", carouselId: 2 }, 'octomirror-module'],
                }

[mcneilp]

Does anyone know if it is possible with this module to have the first slide show for a longer period of time…then rotate through the other slides. This way you mainly see the primary one, and secondary ones periodically rotate through.

[NicB72]

So I am having a problem with the carouselID item as well

In slides config I have this

                    slides: [
                            ["clock"],
                            [{name:"weather", carouselId:"1"}],
                            [{name:"weather", carouselId:"2"}],
                            ["newsfeed"],
                            ["calendar"]
                    ]

Then below I have the 2 modules.
I have the other modules as well!

Everything displays except these 2 weather slides where I get nothing,.

            {
                    module: "weather",
                    position: "middle_center",
                    config: {
                            carouselId: "1",
                            type: "current",
                            weatherProvider: "openweathermap",
                            units: "imperial",
                            roundTemp: true,
                            onlyTemp: false,
                            location: "Concord",
                            locationID: "4933743",
                            apiKey: "cc448befd6aea28cbb05457253a9622b"
                            }
            },
            {
                    module: "weather",
                    position: "middle_center",
                    config: {
                            carouselId: "2",
                            type: "forecast",
                            weatherProvider: "openweathermap",
                            units: "imperial",
                            location: "Concord",
                            locationID: "4933743",
                            apiKey: "cc448befd6aea28cbb05457253a9622b", 
                          }

},

[sdetweil]

@NicB72 the ID “1” is the name of the slide, not attribute carouselId

[NicB72]

@sdetweil I don;'t understand. I am using the carouselID as described in the advanced config section of MMM-Carousel.

[banbutcher]

hi,

while we are on the subject of carousel… ive just been playing with it and only having moderate success.

first here is my Module Code:

/*-------------------- MMM-Carousel Start-----------------*/

{

            module: 'MMM-Carousel',
//	    position: 'botton_bar',
            config: {
                transitionInterval: 10000,
		showPageIndicators: true,
		showPageControls: true, 
                ignoreModules: ['alert'],
                mode: 'slides',
                slides: [
                    ['clock', 'calendar_monthly', 'MMM-NetworkScanner', 'currentweather', 'weatherforecast'],
                    ['MMM-google-route2'],
		    ['MMM-GoogleMapsTraffic'],	
                    ['clock', 'calendar_monthly', 'calendar', 'currentweather', 'weatherforecast', 'MMM-MyCommute', 'MMM-NetworkScanner', 
		    'MMM-COVID19-SPARKLINE', 'MMM-Spotify', 'MMM-GoogleFit', 'newsfeed'],
                    ['clock', 'calendar_monthly', 'currentweather', 'weatherforecast', 'MMM-YouTube', 
		    'MMM-NetworkConnection', 'deluge', 'MMM-SystemStats', 'MMM-NetworkScanner'],
                	],
                keyBindings: { 
                    enabled: true,
                    map: {
                        NextSlide: "ArrowRight", 
                        PrevSlide: "ArrowLeft", 
                        Slide0:    "Home"
                   	 },
                    mode: "DEFAULT" 
                } 
            }
        },

when i used barnabycolby/MMM-Carousel it works fine rotating tru the pages every 10 secs… but when i change the rotation time to 0 so i can manually pick with arrow keys, it kind of has a fit and cant decide what page to show. and cpu usage goes high also

then i found shbatm/MMM-Carousel tried it and when used in the config above its loads all modules and stacks them on the first and only page. Then i tried it withhh this code:

                slides: [
                    Default: ['clock', 'calendar_monthly', 'MMM-NetworkScanner', 'currentweather', 'weatherforecast'],
                    Work: ['MMM-google-route2'],
		    Traffic:['MMM-GoogleMapsTraffic'],	
                    Home: ['clock', 'calendar_monthly', 'calendar', 'currentweather', 'weatherforecast', 'MMM-MyCommute', 'MMM-NetworkScanner', 
		    'MMM-COVID19-SPARKLINE', 'MMM-Spotify', 'MMM-GoogleFit', 'newsfeed'],
                    Info: ['clock', 'calendar_monthly', 'currentweather', 'weatherforecast', 'MMM-YouTube', 
		    'MMM-NetworkConnection', 'deluge', 'MMM-SystemStats', 'MMM-NetworkScanner'],
                	],

and i get the “please create a config file” error

then i noticed the different type bracket after slide: changed the []'s to {}'s and again it tries to load all modules on first page. then taught to delete the Default: Work: etc and i was back with the “please create a config file” error.

also tried taking all the duplicate modules out and only have unique modules on each page with no luck, i think ive tried all the different ways covered in the post.

to say im stumped is a bit of an understatement! :/

hope all that made sense…hope someone can help :)

Thanks,

Richie

[sdetweil]

@banbutcher the words to the left of the [ needs to be in quotes, the page name/ id

[sdetweil]

@NicB72 said in Could use some assistance setting up MMM-Carousel w/ Navigation and understanding the architecture:

@sdetweil I don;'t understand. I am using the carouselID as described in the advanced config section of MMM-Carousel.

looks like the id is supposed to be a number, by putting it in quotes it is a string.

see this post
https://forum.magicmirror.builders/topic/6640/could-use-some-assistance-setting-up-mmm-carousel-w-navigation-and-understanding-the-architecture/15?page=2

also, make sure which mmm-carousel u are using

[banbutcher]

@sdetweil

                slides: {
                    "Default":['clock', 'calendar_monthly', 'MMM-NetworkScanner', 'currentweather', 'weatherforecast'],
                    "Work":['MMM-google-route2'],
		    "Traffic":['MMM-GoogleMapsTraffic'],	
                    "Home":['clock', 'calendar_monthly', 'calendar', 'currentweather', 'weatherforecast', 'MMM-MyCommute', 'MMM-NetworkScanner', 
		    'MMM-COVID19-SPARKLINE', 'MMM-Spotify', 'MMM-GoogleFit', 'newsfeed'],
                    "Info":['clock', 'calendar_monthly', 'currentweather', 'weatherforecast', 'MMM-YouTube', 'MMM-NetworkScanner', 
		    'MMM-NetworkConnection', 'deluge', 'MMM-SystemStats'],
                	},

like this? again all modules stacked on first and only page, also tried with numbers instead of words!

[sdetweil]

@banbutcher I am not near my computer so have to wait til I can try.

which module are you using, there are at least 3 different ones

[banbutcher]

@sdetweil

ive used both barnabycolby and shbatm versions.

[banbutcher]

@sdetweil

so i figured it out… using barnabycolby im not able to have the page rotation set to 0.
MMM-GoogleAssistant works as intended along with MMM-GABackground.

My config for barnabycolbys:

{
            module: 'MMM-Carousel',
            config: {
                transitionInterval: 10000,
		showPageIndicators: true,
		showPageControls: true,
                ignoreModules: ['alert'],
                mode: 'slides',
                slides: [
                    ['clock', 'calendar_monthly', 'MMM-NetworkScanner', 'currentweather', 'weatherforecast'],
                    ['MMM-google-route'],
                    ['MMM-google-route2'],
		    ['MMM-GoogleMapsTraffic'],	
                    ['clock', 'calendar_monthly', 'calendar', 'currentweather', 'weatherforecast', 'MMM-MyCommute', 'MMM-NetworkScanner', 
		    'MMM-COVID19-SPARKLINE', 'MMM-Spotify', 'MMM-GoogleFit', 'newsfeed'],
                    ['clock', 'calendar_monthly', 'currentweather', 'weatherforecast', 'MMM-YouTube', 'MMM-NetworkScanner', 
		    'MMM-NetworkConnection', 'deluge', 'MMM-SystemStats'],
                	],
            }
        },

using shbatm i needed the position: 'bottom_bar' and now i can set the rotation time to 0 and control the slides with the arrow keys and MMM-KeyBindings, however it seems that when i use this version the MMM-GoogleAssistant does not display the correct background and therefore cannot use the new MMM-GABackground

my config for shbatm:

{
            module: 'MMM-Carousel',
	    position: 'bottom_bar',
            config: {
                transitionInterval: 0,
		showPageIndicators: true,
		showPageControls: true,
                ignoreModules: ['alert'],
                mode: 'slides',
                slides: {
                    "Default":['clock', 'calendar_monthly', 'MMM-NetworkScanner', 'currentweather', 'weatherforecast'],
                    "Work":['MMM-google-route'],
                    "Office":['MMM-google-route2'],
		    "Traffic":['MMM-GoogleMapsTraffic'],	
                    "Home":['clock', 'calendar_monthly', 'calendar', 'currentweather', 'weatherforecast', 'MMM-MyCommute', 'MMM-NetworkScanner', 
		    'MMM-COVID19-SPARKLINE', 'MMM-Spotify', 'MMM-GoogleFit', 'newsfeed'],
                    "Info":['clock', 'calendar_monthly', 'currentweather', 'weatherforecast', 'MMM-YouTube', 'MMM-NetworkScanner', 
		    'MMM-NetworkConnection', 'deluge', 'MMM-SystemStats'],
                	},
                keyBindings: { 
                    enabled: true,
                    map: {
                        NextSlide: "ArrowRight", 
                        PrevSlide: "ArrowLeft", 
                        Slide0:    "Home"
                   	 },
                    keyBindingsMode: "DEFAULT"
                }
            }
        },

hope this helps someone

@Bugsounet @shbatm any idea why GAB will work with one carousel module and not another?

[sdetweil]

@banbutcher so, there were two problems

0 cycle time
and carouselId

I had my brain screwed on crooked for carouselId.

suppose you had multiple instances of the same module name in config.js, showing different things on different slides.

when u define the slides, u use the module ‘name’, but in this case, name is not enough.

so, in the module definitions themselves u add another unique identifier, carouselId: somestring. the value can be anything.

in their config:{} section, that is where carousel module will look for ‘carouselId’

in the slide definition, when u come to that module to be displayed, instead of putting the name in quotes, you need a little structure

{ name: "module name", carouselId:"samevalue_added_to_module_config" } , 

that way the carousel module can tell which module instance should be shown