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

[beeficecream]

@ninjabreadman Exactly the information I was after, thank you. I think I’m going to revisit this at a later date when I have a better understanding of how to work with and possibly build modules so I can get that functionality built out. I really like the simplicity of the basic calendar module so using the extension is pretty much out.

[beeficecream]

@ninjabreadman Figured I’d drop an update in here for not only my edification, but on the off chance someone else stumbles in here facing a similar issue.

I was successfully able to replicate the calendar module and include it in the carousel by copying the entire module directory and renaming it to my preference (in my case, calendarBills so I can see upcoming bills). I then hopped into the directory and renamed the calendar.js file to calendarBills.js and edited it to change the name the module registers with. Just to be thorough, I backed out to the modules/default directory and edited the defaultmodules.js file as well. Finally, I backed out to the config directory and updated my config.js to include the new calendarBills module in both the main config block as well as the Carousel’s slides configurations. Once again, to be thorough, I rebooted the Pi and let it boot up. Once it came back up I was able to see both calendar modules on page 1 and the carousel successfully slides between each slide without any errors.

Thanks again for the help NinjaBreadMan!

calendarBills.js:

Original:
    Module.register("calendar", {

Changed:
    Module.register("calendarBills", {

Also, credit the the post below for pointing me in the right direction for module renaming.
https://forum.magicmirror.builders/topic/2655/change-modules-name/7

[shbatm]

@beeficecream - Welcome to the project and I’m glad you got it working. I just wanted to leave this here for anyone who needs it in the future:

To use multiple instances of the same module with Carousel w/ Navigation:
This example allows for 2 different style clocks on different slides:

In the OTHER module’s config, add a CarouselId variable:

{
        module: "clock",
        position: "middle_center",
        config: {
            carouselId: "1",
            displayType: "both"
        }
    }, {
        module: "clock",
        position: "top_left",
        config: {
            carouselId: "2",
        }
    },

In the MMM-Carousel config slides section, instead of just "clock", use {name:"clock", carouselId:"1"}

    ...
    mode: 'slides',
    slides: [
        [   {name:'clock', carouselId: "1"} ],
        [   {name:'clock', carouselId: "2"}, 'calendar', 'MMM-WunderGround', 'newsfeed' ] ]
    ...

You can also use the same object format to move a module around for different slides or change the sizes. See https://github.com/shbatm/MMM-Carousel#example---advanced-slides-carousel for details.

[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.