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

[beeficecream]

My objective is really simple - setup the carousel in slide mode so I can have multiple “pages” of different data rotating on an interval. I’ve spent the past couple days painstakingly reading through all of the documentation available for the MM project itself as well the both version of the MMM-Carousel module (orig. and w/ Navigation), but continue running into the same problem after each attempt at config.js changes - “Could not validate config file. Please correct syntax errors. Starting with default configuration.”

I’m not here looking for handouts, rather a hand in understanding how this module is supposed to work as I’m not fluent in Javascript and can’t quite understand where the code goes after the first couple of lines. If possible, I’d like to find the answer to some, if not all, of these questions…

• What does a config.js file look like with a basic slide carousel setup? This has been my biggest annoyance with this project. It’s a seemingly advanced module that sounds like it needs more in-depth setup, but offers no indication if that’s true or how to do so if it is. An example of a fully functional config.js with the slides carousel configured would probably be the best response I could receive here; I mostly say this because I’m not quite sure how to configure which modules go where and to which slide they belong.
• When setting this module up do I need to keep a module section in the config.js for each module I’d like rotated on a slide? Do I need to place the slideId value in each module’s config block or do I keep these settings contained within the carousel module block?
• Is there somewhere I can find more in-depth error output than the ~/.pm2/logs directory? When I save the config.js file and check my screen to verify changes all I see is a generic error stating that I need to check my config.js, which I do, but find that it’s perfectly formatting.

Any guidance here would be stellar. I’ve bashed my head against the wall for a few days trying to figure this one out and just can’t.

[ninjabreadman]

Hey @beeficecream (which btw, sounds awful).

First, have you looked at the README.md for MMM-Carousel? It has a slides carousel example. That should be added to the config.modules array with all other module configs (i.e. that cannot be all that appears in your config, or nothing will appear … you’ll need to configure your other modules separately).

Second, keep all of the settings for MMM-Carousel within its module config object. There is nothing, afaik, that you need to put in other module configs. [Edit: wrong, see @shbatm’s post below!]

Third, whenever having trouble with your config.js, I recommend you copy/paste it into JSHint. It will point out the errors you have. If it won’t load after changes, chances are there are syntax problems, albeit there can sometimes be other issues.

Sorry if I missed the point of your questions. Feel free to post your complete config.js (minus any API keys and passwords). Let us know how you fare.

[beeficecream]

@ninjabreadman Thanks for the response! This is a great start as I didn’t know that something like JSHint existed it may have already solved my problem. After running my config through that site it showed that I was missing a : in my ignoreModules parameter - WOW. Added that colon and restarted mm - everything is working now.

Again thanks for this. I think my biggest problems here were my lack of experience with Javascript (thus having no idea how to validate the file) and my lack of energy when working on this project considering I only have time at night when I’m worn out from working all day.

[beeficecream]

@ninjabreadman I guess I have a follow up question as well - is there a way to use the same module twice and include it in the carousel’s slide configurations?

I use the calendar module to bring in multiple calendars (personal appointments, upcoming bills, and work events), which works fine with a basic setup, but I’m thinking it may cause issues in the carousel considering all three of those modules use the exact same module name in the config. So say I want my personal/bills calendar on slide 1, but my work events on slide 2… how would I go about configuring that?

[ninjabreadman]

@beeficecream Glad to hear it’s fixed.

I think you have one of two options. I think you’re right that the default calendar module won’t support multiple instances.

You could try to make another, second module of the calendar module, renaming certain variables or notifications to avoid collisions.

Alternatively, you could use calendar for personal and another module (e.g. @Sean’s excellent MMM-CalendarExt) to display your work schedule. It even supports multiple views, but don’t know that you could display them in different carousel slides.

[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