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

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

Scheduled Pinned Locked Moved Troubleshooting
carouselmmm-carouselnavigationslidepage
27 Posts 9 Posters 11.4k Views 9 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.
  • S Offline
    shbatm Module Developer @lamachine
    last edited by Feb 3, 2019, 11:39 PM

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

    L 1 Reply Last reply Feb 4, 2019, 9:40 PM Reply Quote 0
    • L Offline
      lamachine @shbatm
      last edited by Feb 4, 2019, 9:40 PM

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

      S 1 Reply Last reply Feb 7, 2019, 3:11 AM Reply Quote 0
      • S Offline
        shbatm Module Developer @lamachine
        last edited by Feb 7, 2019, 3:11 AM

        Check your capitalization in the MMM-Carousel config. It should be carouselId, not carouselID.

        1 Reply Last reply Reply Quote 0
        • R Offline
          robiv8
          last edited by Feb 9, 2019, 9:56 PM

          This is my config for test.

          {
                      module: 'MMM-Carousel',
                      position: 'bottom_bar', // Required only for navigation controls
                      config: {
                          transitionInterval: 0,
                          showPageIndicators: true,
                          showPageControls: false,
                          ignoreModules: ['MMM-Podcast2', 'alert', 'MMM-Buttons', 'MMM-Remote-Control', 'MMM-Remote-Control-Repository'],
                          mode: 'slides',
                          slides: {
                              main: [{name:'clock', carouselId: "1"}],
                              "2": ['MMM-DarkSkyForecast', 'newsfeed'],
                              "3": ['MMM-DWD-WarnWeather'],
                              "4": ['MMM-DarkSkyForecast', 'newsfeed'],
                              "5": ['MMM-DWD-WarnWeather'],
                              "6": ['MMM-DarkSkyForecast', 'newsfeed']
                          }
                      }
                  },
          

          and this the two modules

          {
          module: "clock",
          name: "AnalogClock",
          position: "middle_center",
          config: {
          carouselId: "1",
          showDate: false,
          displayType: 'analog',
          analogSize: '540px',
          analogFace: 'face-001',
          secondsColor: '#FF0000',
          analogPlacement: 'top'
          }
          },
          {
          module: "clock",
          name: "AnalogClock2",
          position: "middle_center",
          config: {
          carouselId: "2",
          showDate: false,
          displayType: 'analog',
          analogSize: '570px',
          analogFace: 'face-001',
          secondsColor: '#FF0000',
          analogPlacement: 'top'
          }
          },
          

          but the clock is only visible on page 6?
          And the main page is completely missing!
          I am confused :thinking_face:

          But then I tried the following:
          instead of
          main: [{name:‘clock’, carouselId: “1”}],
          I put this
          “1”: [{name:‘clock’, carouselId: “1”}],

          And what should I say! It works. :smiling_face_with_open_mouth:

          S 1 Reply Last reply Feb 10, 2019, 1:01 PM Reply Quote 0
          • S Offline
            shbatm Module Developer @robiv8
            last edited by Feb 10, 2019, 1:01 PM

            @robiv8 Strange. I wonder if it’s something with the word main. You could also try "Main".

            Here’s one of my carousel configs for another reference:

                            slides: {
                                Home: [{ name: 'clock', classes: 'zoom200', position: "middle_center", carouselId: 1 }],
                                Info: [{ name: 'clock', classes: 'zoom200', position: "top_center", carouselId: 1 },
                                    { name: 'calendar', position: 'top_left' }, 'MMM-Todoist',
                                    'MMM-DarkSkyForecast',
                                    'newsfeed',
                                ],
                                Status: [{ name: 'clock', classes: '', position: "top_left", carouselId: 2 },
                                    'MMM-JSONStatusChecker', "internet-monitor"
                                ],
                                ISY: [{ name: 'clock', classes: '', position: "top_left", carouselId: 2 }, 'MMM-ISY'],
                                Cameras: ["MMM-RTSPStream"],
                                Octopi: [{ name: 'clock', classes: '', position: "top_left", carouselId: 2 }, 'octomirror-module'],
                            }
            
            1 Reply Last reply Reply Quote 0
            • M Offline
              mcneilp
              last edited by Jan 23, 2020, 5:45 PM

              Does anyone know if it is possible with this module to have the first slide show for a longer period of time…then rotate through the other slides. This way you mainly see the primary one, and secondary ones periodically rotate through.

              1 Reply Last reply Reply Quote 0
              • N Offline
                NicB72
                last edited by Sep 18, 2020, 12:55 AM

                So I am having a problem with the carouselID item as well

                In slides config I have this

                                    slides: [
                                            ["clock"],
                                            [{name:"weather", carouselId:"1"}],
                                            [{name:"weather", carouselId:"2"}],
                                            ["newsfeed"],
                                            ["calendar"]
                                    ]
                

                Then below I have the 2 modules.
                I have the other modules as well!

                Everything displays except these 2 weather slides where I get nothing,.

                            {
                                    module: "weather",
                                    position: "middle_center",
                                    config: {
                                            carouselId: "1",
                                            type: "current",
                                            weatherProvider: "openweathermap",
                                            units: "imperial",
                                            roundTemp: true,
                                            onlyTemp: false,
                                            location: "Concord",
                                            locationID: "4933743",
                                            apiKey: "cc448befd6aea28cbb05457253a9622b"
                                            }
                            },
                            {
                                    module: "weather",
                                    position: "middle_center",
                                    config: {
                                            carouselId: "2",
                                            type: "forecast",
                                            weatherProvider: "openweathermap",
                                            units: "imperial",
                                            location: "Concord",
                                            locationID: "4933743",
                                            apiKey: "cc448befd6aea28cbb05457253a9622b", 
                                          }
                

                },

                S 1 Reply Last reply Sep 18, 2020, 1:02 AM Reply Quote 0
                • S Away
                  sdetweil @NicB72
                  last edited by Sep 18, 2020, 1:02 AM

                  @NicB72 the ID “1” is the name of the slide, not attribute carouselId

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  N 1 Reply Last reply Sep 18, 2020, 11:57 PM Reply Quote 0
                  • N Offline
                    NicB72 @sdetweil
                    last edited by Sep 18, 2020, 11:57 PM

                    @sdetweil I don;'t understand. I am using the carouselID as described in the advanced config section of MMM-Carousel.

                    S 1 Reply Last reply Sep 19, 2020, 9:11 PM Reply Quote 0
                    • B Offline
                      banbutcher
                      last edited by banbutcher Sep 19, 2020, 10:19 AM Sep 19, 2020, 9:23 AM

                      hi,

                      while we are on the subject of carousel… ive just been playing with it and only having moderate success.

                      first here is my Module Code:

                      /*-------------------- MMM-Carousel Start-----------------*/
                      
                      {
                      
                                  module: 'MMM-Carousel',
                      //	    position: 'botton_bar',
                                  config: {
                                      transitionInterval: 10000,
                      		showPageIndicators: true,
                      		showPageControls: true, 
                                      ignoreModules: ['alert'],
                                      mode: 'slides',
                                      slides: [
                                          ['clock', 'calendar_monthly', 'MMM-NetworkScanner', 'currentweather', 'weatherforecast'],
                                          ['MMM-google-route2'],
                      		    ['MMM-GoogleMapsTraffic'],	
                                          ['clock', 'calendar_monthly', 'calendar', 'currentweather', 'weatherforecast', 'MMM-MyCommute', 'MMM-NetworkScanner', 
                      		    'MMM-COVID19-SPARKLINE', 'MMM-Spotify', 'MMM-GoogleFit', 'newsfeed'],
                                          ['clock', 'calendar_monthly', 'currentweather', 'weatherforecast', 'MMM-YouTube', 
                      		    'MMM-NetworkConnection', 'deluge', 'MMM-SystemStats', 'MMM-NetworkScanner'],
                                      	],
                                      keyBindings: { 
                                          enabled: true,
                                          map: {
                                              NextSlide: "ArrowRight", 
                                              PrevSlide: "ArrowLeft", 
                                              Slide0:    "Home"
                                         	 },
                                          mode: "DEFAULT" 
                                      } 
                                  }
                              },
                      
                      

                      when i used barnabycolby/MMM-Carousel it works fine rotating tru the pages every 10 secs… but when i change the rotation time to 0 so i can manually pick with arrow keys, it kind of has a fit and cant decide what page to show. and cpu usage goes high also

                      then i found shbatm/MMM-Carousel tried it and when used in the config above its loads all modules and stacks them on the first and only page. Then i tried it withhh this code:

                                      slides: [
                                          Default: ['clock', 'calendar_monthly', 'MMM-NetworkScanner', 'currentweather', 'weatherforecast'],
                                          Work: ['MMM-google-route2'],
                      		    Traffic:['MMM-GoogleMapsTraffic'],	
                                          Home: ['clock', 'calendar_monthly', 'calendar', 'currentweather', 'weatherforecast', 'MMM-MyCommute', 'MMM-NetworkScanner', 
                      		    'MMM-COVID19-SPARKLINE', 'MMM-Spotify', 'MMM-GoogleFit', 'newsfeed'],
                                          Info: ['clock', 'calendar_monthly', 'currentweather', 'weatherforecast', 'MMM-YouTube', 
                      		    'MMM-NetworkConnection', 'deluge', 'MMM-SystemStats', 'MMM-NetworkScanner'],
                                      	],
                      

                      and i get the “please create a config file” error

                      then i noticed the different type bracket after slide: changed the []'s to {}'s and again it tries to load all modules on first page. then taught to delete the Default: Work: etc and i was back with the “please create a config file” error.

                      also tried taking all the duplicate modules out and only have unique modules on each page with no luck, i think ive tried all the different ways covered in the post.

                      to say im stumped is a bit of an understatement! :/

                      hope all that made sense…hope someone can help :)

                      Thanks,

                      Richie

                      S 1 Reply Last reply Sep 19, 2020, 12:38 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 2 / 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