MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

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

    Scheduled Pinned Locked Moved Solved Troubleshooting
    29 Posts 6 Posters 9.1k Views 6 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F Offline
      Fantasmic78
      last edited by

      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?

      S KristjanESPERANTOK plainbrokeP 3 Replies Last reply Reply Quote 0
      • KristjanESPERANTOK Offline
        KristjanESPERANTO Module Developer @Fantasmic78
        last edited by

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

        1 Reply Last reply Reply Quote 0
        • S Away
          sdetweil @Fantasmic78
          last edited by 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" ]
                 ]
          

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • KristjanESPERANTOK Offline
            KristjanESPERANTO Module Developer @Fantasmic78
            last edited by

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

            1 Reply Last reply Reply Quote 0
            • F Offline
              Fantasmic78
              last edited by

              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!

              mumblebajM KristjanESPERANTOK 2 Replies Last reply Reply Quote 1
              • mumblebajM Offline
                mumblebaj Module Developer @Fantasmic78
                last edited by

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

                f50c5739-8cac-4784-89b5-d86bfcf0d2a2-image.png

                Check out my modules at: https://github.com/mumblebaj?tab=repositories

                F 1 Reply Last reply Reply Quote 0
                • KristjanESPERANTOK Offline
                  KristjanESPERANTO Module Developer @Fantasmic78
                  last edited by

                  @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?

                  F 1 Reply Last reply Reply Quote 0
                  • plainbrokeP Offline
                    plainbroke @Fantasmic78
                    last edited by plainbroke

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

                    is that what you are trying to do?

                    Slow learner. But trying anyways.

                    F 1 Reply Last reply Reply Quote 0
                    • F Offline
                      Fantasmic78 @mumblebaj
                      last edited by

                      @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).

                      1 Reply Last reply Reply Quote 1
                      • F Offline
                        Fantasmic78 @plainbroke
                        last edited by

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

                        R 1 Reply Last reply Reply Quote 0
                        • F Offline
                          Fantasmic78 @KristjanESPERANTO
                          last edited by

                          @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)

                          KristjanESPERANTOK 1 Reply Last reply Reply Quote 0
                          • 1
                          • 2
                          • 3
                          • 1 / 3
                          • First post
                            Last post
                          Enjoying MagicMirror? Please consider a donation!
                          MagicMirror created by Michael Teeuw.
                          Forum managed by Sam, technical setup by Karsten.
                          This forum is using NodeBB as its core | Contributors
                          Contact | Privacy Policy