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

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