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 not displaying

    Scheduled Pinned Locked Moved Forum
    96 Posts 4 Posters 60.0k Views 4 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.
    • mumblebajM Offline
      mumblebaj Module Developer @pastormingle
      last edited by

      @pastormingle That means that something is already running with that IP. Do you only have 1 instance of MM running?

      Check out my modules at: https://github.com/mumblebaj?tab=repositories
      Check my blog-post: https://mumblebaj.xyz/
      Check my MM Container: https://hub.docker.com/repository/docker/mumblebaj/magicmirror/general

      P 1 Reply Last reply Reply Quote 0
      • P Offline
        pastormingle @mumblebaj
        last edited by

        @mumblebaj The IP conflict is due to me ssh into the pi and starting magic mirror… I am referring to the commits from sdetweil that said “please use code block around config info” So still not working… But it looks like the carousel module is working…

        mumblebajM 1 Reply Last reply Reply Quote 0
        • mumblebajM Offline
          mumblebaj Module Developer @pastormingle
          last edited by

          @pastormingle What Sam was saying was the when posting your config, you need to set it in a code block. That is done by selecting the config you posted and then pressing the </> button at the top of the window. That would wrap the config in a code block and make it look “pretty”.

          I am glad your Carousel is now working.

          Check out my modules at: https://github.com/mumblebaj?tab=repositories
          Check my blog-post: https://mumblebaj.xyz/
          Check my MM Container: https://hub.docker.com/repository/docker/mumblebaj/magicmirror/general

          P S 2 Replies Last reply Reply Quote 0
          • P Offline
            pastormingle @mumblebaj
            last edited by

            @mumblebaj sorry mumblebaj that was a typo it’s not working… Any other suggestions?

            1 Reply Last reply Reply Quote 0
            • P Offline
              pastormingle @mumblebaj
              last edited by sdetweil

              @mumblebaj

              /* Magic Mirror Config Sample
              *
              * By Michael Teeuw https://michaelteeuw.nl
              * MIT Licensed.
              *
              * For more information on how you can configure this file
              * see https://docs.magicmirror.builders/getting-started/configuration.html#general
              * and https://docs.magicmirror.builders/modules/configuration.html
              */
              let config = {
                 address: "localhost", 	// Address to listen on, can be:
                 						// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
                 						// - another specific IPv4/6 to listen on a specific interface
                 						// - "0.0.0.0", "::" to listen on any interface
                 						// Default, when address config is left out or empty, is "localhost"
                 port: 8080,
                 basePath: "/", 	// The URL path where MagicMirror is hosted. If you are using a Reverse proxy
                 				// you must set the sub path here. basePath must end with a /
                 ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], 	// Set [] to allow all IP addresses
                 														// or add a specific IPv4 of 192.168.1.5 :
                 														// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
                 														// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
                 														// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
              
                 useHttps: false, 		// Support HTTPS or not, default "false" will use HTTP
                 httpsPrivateKey: "", 	// HTTPS private key path, only require when useHttps is true
                 httpsCertificate: "", 	// HTTPS Certificate path, only require when useHttps is true
              
                 language: "en",
                 locale: "en-US",
                 logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
                 timeFormat: 24,
                 units: "metric",
                 // serverOnly:  true/false/"local" ,
                 // local for armv6l processors, default
                 //   starts serveronly and then starts chrome browser
                 // false, default for all NON-armv6l devices
                 // true, force serveronly mode, because you want to.. no UI on this device
              
                 modules: [
                 	{
                 		module: "alert",
                 	},
                 	{
                 		module: "updatenotification",
                 		position: "top_bar"
                 	},
                 	{
                 		module: "clock",
                 		position: "top_left"
                 	},
                 	{
                 		module: "calendar",
                 		header: "US Holidays",
                 		position: "top_left",
                 		config: {
                 			calendars: [
                 				{
                 					symbol: "calendar-check",
                 					url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics"					}
                 			]
                 		}
                 	},
                 	{
                 		module: "compliments",
                 		position: "top_left"
                 	},
                 	{
                 		module: "newsfeed",
                 		position: "bottom_bar",
                 		config: {
                 			feeds: [
                 				{
                 					title: "New York Times",
                 					url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml"
                 				}
                 			],
                 			showSourceTitle: true,
                 			showPublishDate: true,
                 			broadcastNewsFeeds: true,
                 			broadcastNewsUpdates: true
                 		}
                 	},
                     {
                         module: 'MMM-Carousel',
                         config: {
                             transitionInterval: 1000,
                             ignoreModules: [],
                             mode: 'global'
                         }
                     }
              	]
              };
              
              /*************** DO NOT EDIT THE LINE BELOW ***************/
              if (typeof module !== "undefined") {module.exports = config;}
              
              mumblebajM 1 Reply Last reply Reply Quote 0
              • mumblebajM Offline
                mumblebaj Module Developer @pastormingle
                last edited by

                @pastormingle As mentioned previously, are the any errors in the developers window? Do you have any errors in the terminal window? I am using the exact same config as you for Carousel and it work just fine for me

                Check out my modules at: https://github.com/mumblebaj?tab=repositories
                Check my blog-post: https://mumblebaj.xyz/
                Check my MM Container: https://hub.docker.com/repository/docker/mumblebaj/magicmirror/general

                1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @mumblebaj
                  last edited by

                  @mumblebaj said in MMM-Carousel not displaying:

                  That would wrap the config in a code block and make it look “pretty”.

                  not pretty, just more readable

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  P 1 Reply Last reply Reply Quote 0
                  • S Offline
                    sdetweil @mumblebaj
                    last edited by

                    @mumblebaj yes, generally, w package.json you would need an npm install. but in this case, the dependencies after for testing not running

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    P 1 Reply Last reply Reply Quote 0
                    • P Offline
                      pastormingle @sdetweil
                      last edited by

                      @sdetweil ```
                      Here is what is in my developer window under the console tab… I don’t see anything that stands out.

                      loader.js:164 Translations loaded for: clock
                      loader.js:184 Load script: modules/default/calendar/calendar.js
                      module.js:501 Check MagicMirror version for module ‘calendar’ - Minimum version: 2.1.0 - Current version: 2.16.0
                      module.js:503 Version is ok!
                      module.js:509 Module registered: calendar
                      loader.js:155 Bootstrapping module: calendar
                      loader.js:244 File already loaded: moment.js
                      loader.js:160 Scripts loaded for: calendar
                      loader.js:203 Load stylesheet: modules/default/calendar/calendar.css
                      loader.js:244 File already loaded: font-awesome.css
                      loader.js:162 Styles loaded for: calendar
                      loader.js:164 Translations loaded for: calendar
                      loader.js:184 Load script: modules/default/compliments/compliments.js
                      module.js:509 Module registered: compliments
                      loader.js:155 Bootstrapping module: compliments
                      loader.js:244 File already loaded: moment.js
                      loader.js:160 Scripts loaded for: compliments
                      loader.js:162 Styles loaded for: compliments
                      loader.js:164 Translations loaded for: compliments
                      loader.js:184 Load script: modules/default/newsfeed/newsfeed.js
                      module.js:509 Module registered: newsfeed
                      loader.js:155 Bootstrapping module: newsfeed
                      loader.js:244 File already loaded: moment.js
                      loader.js:160 Scripts loaded for: newsfeed
                      loader.js:203 Load stylesheet: modules/default/newsfeed/newsfeed.css
                      loader.js:162 Styles loaded for: newsfeed
                      loader.js:164 Translations loaded for: newsfeed
                      loader.js:184 Load script: modules/MMM-Carousel/MMM-Carousel.js
                      module.js:501 Check MagicMirror version for module ‘MMM-Carousel’ - Minimum version: 2.3.0 - Current version: 2.16.0
                      module.js:503 Version is ok!
                      module.js:509 Module registered: MMM-Carousel
                      loader.js:155 Bootstrapping module: MMM-Carousel
                      loader.js:160 Scripts loaded for: MMM-Carousel
                      loader.js:203 Load stylesheet: modules/MMM-Carousel/MMM-Carousel.css
                      loader.js:162 Styles loaded for: MMM-Carousel
                      loader.js:164 Translations loaded for: MMM-Carousel
                      loader.js:203 Load stylesheet: css/custom.css
                      :8080/modules/default/alert/alert.js:165 Starting module: alert
                      :8080/modules/defaul…enotification.js:21 Starting module: updatenotification
                      :8080/modules/default/clock/clock.js:46 Starting module: clock
                      :8080/modules/defaul…ndar/calendar.js:87 Starting module: calendar
                      :8080/modules/defaul…s/compliments.js:38 Starting module: compliments
                      :8080/modules/defaul…feed/newsfeed.js:63 Starting module: newsfeed
                      main.js:499 All modules started!
                      9
                      XHR finished loading: GET “”.
                      
                      ​

                      mumblebajM S 2 Replies Last reply Reply Quote 0
                      • P Offline
                        pastormingle @sdetweil
                        last edited by

                        @sdetweil I tried to manual run the MMM-Carousel.js but returned the following. 20bc915c-97a4-40af-9e49-7932576b932b-image.png MMM-c93303dc-dee4-475f-9a04-d0f51fd8b8f2-image.png

                        S 1 Reply Last reply Reply Quote 0
                        • S Offline
                          sdetweil @pastormingle
                          last edited by

                          @pastormingle don’t know why you would do that. it has to run under MagicMirror…

                          Sam

                          How to add modules

                          learning how to use browser developers window for css changes

                          1 Reply Last reply Reply Quote 0
                          • mumblebajM Offline
                            mumblebaj Module Developer @pastormingle
                            last edited by

                            @pastormingle Do you see any of the module suspended or module resumed stuff?

                            Check out my modules at: https://github.com/mumblebaj?tab=repositories
                            Check my blog-post: https://mumblebaj.xyz/
                            Check my MM Container: https://hub.docker.com/repository/docker/mumblebaj/magicmirror/general

                            1 Reply Last reply Reply Quote 0
                            • S Offline
                              sdetweil @pastormingle
                              last edited by

                              @pastormingle @mumblebaj

                              ok, I just debugged this, and there is a MM design changed that impacts this module… and maybe others…

                              if there is NO ‘position’ set, then the initial getDom() is not called. and this module DEPENDS on that
                              note that without position its getDom() is NEVER called…

                              so, set

                              position: ‘bottom_bar’

                              in the MMM-Carousel module config

                              Sam

                              How to add modules

                              learning how to use browser developers window for css changes

                              P 1 Reply Last reply Reply Quote 0
                              • P Offline
                                pastormingle @sdetweil
                                last edited by

                                @sdetweil said in MMM-Carousel not displaying:

                                position: ‘bottom_bar’

                                so that would be in the config.js file or the www-Carousel.js file?

                                S 2 Replies Last reply Reply Quote 0
                                • S Offline
                                  sdetweil @pastormingle
                                  last edited by sdetweil

                                  @pastormingle ALL config options ALWAYS go in config.js

                                  NEVER edit the module source file…

                                  the design is options in config.js override any options defined in the module
                                  any options not USED in config.js use the defaults provided by the module

                                  but position is a MM config option (outside the config:{} block for the module),
                                  NOT a module config option (inside the config:{} block for module)

                                  see
                                  https://docs.magicmirror.builders/modules/configuration.html#example

                                  Sam

                                  How to add modules

                                  learning how to use browser developers window for css changes

                                  1 Reply Last reply Reply Quote 0
                                  • S Offline
                                    sdetweil @pastormingle
                                    last edited by

                                    @pastormingle

                                    {
                                         module:   'MMM-Carousel',
                                         position: 'bottom_bar',
                                         config: { 
                                            whatever config for this module
                                        }
                                    }
                                    

                                    Sam

                                    How to add modules

                                    learning how to use browser developers window for css changes

                                    P 1 Reply Last reply Reply Quote 0
                                    • P Offline
                                      pastormingle @sdetweil
                                      last edited by

                                      @sdetweil ```

                                      So now is gets an Undefined displayed at the bottom of the display.. 
                                      },
                                              {
                                                  module: 'MMM-Carousel',
                                                   position: 'bottom_bar',
                                                  config: {
                                                      transitionInterval: 10000,
                                                      ignoreModules: [],
                                                      mode: 'global'
                                                  }
                                              }
                                      
                                      ![45d7e7ab-536a-4ba1-b849-c0ba73a9344f-image.png](/assets/uploads/files/1638977941062-45d7e7ab-536a-4ba1-b849-c0ba73a9344f-image.png)
                                      P 1 Reply Last reply Reply Quote 0
                                      • P Offline
                                        pastormingle @pastormingle
                                        last edited by

                                        @pastormingle getting the following error in the dev windows now.
                                        TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
                                        at updateModuleContent (main.js:215)
                                        at main.js:142
                                        at new Promise ()
                                        at updateDomWithContent (main.js:140)
                                        at main.js:122

                                        S 1 Reply Last reply Reply Quote 0
                                        • S Offline
                                          sdetweil @pastormingle
                                          last edited by

                                          @pastormingle this is my config

                                                  {
                                                      module: 'MMM-Carousel',
                                                      position: "bottom_bar",
                                                      config: {
                                                          transitionInterval: 10000,
                                                          ignoreModules: ['clock', 'alert'],
                                                          mode: 'slides',
                                                          slides: [
                                                              ['calendar', 'compliments', 'weather'],
                                                              ['newsfeed'],
                                                          ]
                                                      }
                                                  }
                                          

                                          but you wanted slides mode… why are u set to global?

                                          Sam

                                          How to add modules

                                          learning how to use browser developers window for css changes

                                          S 1 Reply Last reply Reply Quote 0
                                          • S Offline
                                            sdetweil @sdetweil
                                            last edited by sdetweil

                                            @pastormingle

                                            I changed ‘slides’ to ‘global’ and it worked too

                                            you are using this version

                                            https://github.com/shbatm/MMM-Carousel.git 
                                            

                                            in the MMM-Carousel folder do

                                            git remote -v

                                            Sam

                                            How to add modules

                                            learning how to use browser developers window for css changes

                                            1 Reply Last reply Reply Quote 0

                                            Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                            Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                            With your input, this post could be even better 💗

                                            Register Login
                                            • 1
                                            • 2
                                            • 3
                                            • 4
                                            • 5
                                            • 2 / 5
                                            • 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