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

:::