MMM-Carousel - how to configure a module multiple times on the SAME page?

Fantasmic78

Hi all!

I’m using MMM-Carousel (the one from shbatm !)to manage several pages for my MagicMirror project, as I want to show quite some modules. And I need to have several instances of the same module on one page, e.g. the calendar (I’m using it to show several different Google calendars).
This works without MMM-Carousel, but I can’t get it working with MMM-Carousel.

The same problem exists with the default “weather” module: as current weather and weather forecast are just 2 different configurations of the same module, I’m not able to show the current weather AND the forecast on the same page.

Details:

having the same module distributed across the pages in Carousel works, e.g. calendar 1 on the first page, calendar 2 on the second page
but having calendar 1 AND calendar 2 on the SAME page in Carousel doesn’t work (it shows the first instance of the calendar only, although I have configured the carouselId correctly in all places)

Can someone give me a hint how to solve that?

KristjanESPERANTO

@fantasmic78 This should be possible with most modules. For example, I do this with MMM-JsonTable. The essential thing is that you use the same carouselId for both module instances.
Try it that way and let me/us know if you can’t get it to work.

sdetweil

@fantasmic78 I would use MMM-Pages
it does all that carousel does, but is easier

pages selects modules by class name.

so you can add a class name to all modules on a ‘page’

so, all modules on page1 have
classes:“page1”,

line after
module:“…”

and the pages config is easier too

      modules: [
                [ "page1" ],
                [ "page2" ]
       ]

KristjanESPERANTO

@fantasmic78 This should be possible with most modules. For example, I do this with MMM-JsonTable. The essential thing is that you use the same carouselId for both module instances.
Try it that way and let me/us know if you can’t get it to work.

Fantasmic78

Thanks @sdetweil and @KristjanESPERANTO - I solved the problem now successfully using your hints :thumbs_up_light_skin_tone:

Using MMM-Pages indeed looked a bit easier to configure - however, it showed one disadvantage: there were no navigation buttons (to select a page manually or to move left/right, like in MMM-Carousel) - I’d like to have these, because I’m planning to use a touchscreen monitor.

So I went back to MMM-Carousel - and the essential hint was indeed to use the SAME carouselId for ALL same module instances on the SAME page. Actually this is a small flaw in the documentation (the examples there are based on the situation that you have only one instance of a module on a page, and when having another instance on another page, then you need to have a different carouselId).

So thanks again!

mumblebaj

@fantasmic78 MMM-page-indicator works with MMM-pages and gives you the ability to select pages manually if you like. You would see the below on the page depending on how many pages you have and it is clickable.

KristjanESPERANTO

@fantasmic78 I am glad that I could help.

It would be good to improve the documentation for such cases. Do you have a concrete suggestion how?

plainbroke

@fantasmic78
This is what 2 instances of calendar look like in my carousel setup.

is that what you are trying to do?

Fantasmic78

@mumblebaj
Yes, thanks - I’m aware of the MMM-page-indicator, but I prefer the navigation buttons from MMM-Carousel (big left/right icons, in addition to the clickable indicators for the number of pages).

Fantasmic78

@plainbroke yes exactly - and I managed to do it like this in the meanwhile.

As mentioned in one of the posts above - the key learning was to use the same carouselId for all modules (which I use multiple times) which should be on the same page.

So my configuration for MMM-Carousel looks like this now:

{
            module: 'MMM-Carousel',
            position: 'bottom_bar', // Required only for navigation controls
            config: {
                transitionInterval: 15000,
                showPageIndicators: true,
                showPageControls: true,
                ignoreModules: ['clock', 'alert', 'updatenotification'],
                mode: 'slides',
                slides: {
                    "1": [
                            {name:'calendar', carouselId: "Calendar1"}, // Calendar of Chris
                            {name:'calendar', carouselId: "Calendar1"}, // Calendar of Karin
                            'MMM-WeeklySchedule'
                         ],
                    "2": [
                            {name:'calendar', carouselId: "Calendar2"}, // Calendar for trash
                            {name:'calendar', carouselId: "Calendar2"}, // Calendar for Austrian holidays
                            {name:'calendar', carouselId: "Calendar2"}, // Calendard for birthdays
                            'newsfeed'
                         ],
                    "3": [
                            {name:'weather', carouselId: "Weather1"}, // current weather at home
                            {name:'weather', carouselId: "Weather1"}, // weather forecast at home
                            {name:'weather', carouselId: "Weather1"}, // weather in some other location
                            'MMM-network-signal',
                            'MMM-NetworkConnection'
                         ],
                    "4": [
                            'MMM-GooglePhotos'
                         ]
                }
            }
		},

It shows two calendars on the first page, and 3 other calendars on the second page. Further, it shows 3 weather modules on the third page.

Fantasmic78

@kristjanesperanto I think the best place for such documentation would be in section “Example - Advanced Slides Carousel” in the README.md. You could use my example configuration (see my other post above)

KristjanESPERANTO

Thanks 🙂 I’ve created a Pull Request.

reverendz

@Fantasmic78

Found this because this is just what I’m trying to do.

I’m trying to use the EXT3 calendar showing monthly views.

However, when I try the config, one of two things happens:

If I list a position for the additional months, they all show up on the same page.
If I don’t list a position, the other months don’t show up.

I can’t seem to get it so that one month shows up with a forward/backward option in Carousel when using MMM-CalendarExt3.

If anyone has an example config and can step me through how to set this up with Carousel it’d be greatly appreciated.

I liked Carousel because I only want to move the calendar forward, but I’m open to other options. The big thing is: I’m using a touch screen so really want on-screen navigation/click.

sdetweil

@reverendz use mmm-pages, carousel is hard code to use module names.

in pages you can define page names , mom, dad , son , daughtrr, weather, shopping, whatever

and on each module using the classes:property to specify which page(s) this instance is on

i have a setup w 3 CalendarExt3 instances
this month, next and next after that

sdetweil

@reverendz use MMM-PageIndicator for manual navigation
see this post i made showing all the configuration

https://forum.magicmirror.builders/post/118877

reverendz

@sdetweil

Thank you for the response!

So I am a bit lost. I tried pages and after figuring out the “fixed” vs. “pages” bit, I can’t seem to change the page-indicators to buttons.

The only thing I found was this:

.MMM-page-indicator div.module-content div i:nth-child(2)::before {
    content: "\f055";  // <-- icon code goes here
    font-family: FontAwesome;
}

As a newbie, “code goes here” leaves me grasping. Does your link have another solution or is there somewhere I can complete the content?

Other than that, I saw someone basically created a custom button module to do the same.

sdetweil

@reverendz sorry you didn’t get the link to the link

see here
https://forum.magicmirror.builders/post/118877

reverendz

@sdetweil

Thank you. I got the link and I still don’t get it.

I am lost. The icons that show up look like standard MMM-page-indicator buttons.

I added this based on the image, but it probably doesn’t apply since I’m not using the posters icons.

/* MMM-page-indicator config to turn indicator into buttons */
.MMM-page-indicator div module-content div i:nth-child(1):: before { 
font-size: 20px; content: "\f073"; font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(2):: before { 
font-size: 20p; content: "\f2c9"; font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(3):: before { 
font-size: 20px; content: "\f1b9"; font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(4):: before { 
font-size: 20px; content: "|f70c"; font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(5):: before { 
font-size: 20px; content: "\f19d"; font-family: FontAwesome;
}
.MMM-page-indicator div.module-content div i:nth-child(6)::before { 
font-size: 20px; content: " flea";
font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(7):: before { 
font-size:20px; content: "\f03d"; font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(8)::before { 
font-size: 20px; content: "\e5ac" font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(9):: before { 
font-size: 20px; content: "\f5ee"; font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child (10): :before { 
font-size: 20px; content: " f013"; font-family: FontAwesome;
}

I just have 3 pages I want to cycle through that coincide with the EXT3 calendar this month, next month and the one after.

What am I missing?

sdetweil

@reverendz so those are the fonticon numbers for different icons

all that stuff went in custom.css right?

reverendz

@sdetweil Yep!

They don’t show up anywhere. Which means I likely missed something major.

I see the regular dots.

sdetweil

@reverendz see the second link in my signature below on how to use the dev window