• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 8.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.
  • K Online
    KristjanESPERANTO Module Developer @Fantasmic78
    last edited by Feb 18, 2022, 9:12 PM

    @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 Feb 19, 2022, 7:50 AM

      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!

      M K 2 Replies Last reply Feb 19, 2022, 9:16 AM Reply Quote 1
      • M Offline
        mumblebaj Module Developer @Fantasmic78
        last edited by Feb 19, 2022, 9:16 AM

        @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 Feb 22, 2022, 8:23 AM Reply Quote 0
        • K Online
          KristjanESPERANTO Module Developer @Fantasmic78
          last edited by Feb 20, 2022, 9:52 AM

          @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 Feb 22, 2022, 8:56 AM Reply Quote 0
          • P Offline
            plainbroke @Fantasmic78
            last edited by plainbroke Feb 20, 2022, 9:21 PM Feb 20, 2022, 9:16 PM

            @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 Feb 22, 2022, 8:40 AM Reply Quote 0
            • F Offline
              Fantasmic78 @mumblebaj
              last edited by Feb 22, 2022, 8:23 AM

              @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 Feb 22, 2022, 8:40 AM

                @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 Dec 30, 2024, 3:18 AM Reply Quote 0
                • F Offline
                  Fantasmic78 @KristjanESPERANTO
                  last edited by Feb 22, 2022, 8:56 AM

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

                  K 1 Reply Last reply Feb 23, 2022, 9:16 PM Reply Quote 0
                  • K Online
                    KristjanESPERANTO Module Developer @Fantasmic78
                    last edited by Feb 23, 2022, 9:16 PM

                    Thanks 🙂 I’ve created a Pull Request.

                    1 Reply Last reply Reply Quote 0
                    • R Offline
                      reverendz @Fantasmic78
                      last edited by Dec 30, 2024, 3:18 AM

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

                      S 1 Reply Last reply Dec 30, 2024, 3:42 AM 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