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.

    Using MMM-BackgroundSlideshow with MMM-MagicMover

    Scheduled Pinned Locked Moved Troubleshooting
    6 Posts 4 Posters 692 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.
    • R Offline
      raymondjspigot
      last edited by

      Hi, I’m still configuring my mirror and trying out some of the different modules.

      I’ve had success with getting MMM-BackgroundSlideshow to show me different background images, but I can’t get it to work when I also enable MMM-MagicMover at the same time. When both modules are enabled I just get a mirror with a plain black background - my other modules (Clock, Weather etc) are still working and show up in the locations I expected, but there’s no background image underneath them.

      If I disable the MMM-MagicMover module in my config.js then the background images are displayed beneath my other modules the way I expected.

      I’ve tried changing the display location of the MMM-MagicMover module in the config.js (e.g. from position: "left", as in the install instructions on github to position: "top_bar", but it didn’t seem to help. I have my MMM-BackgroundSlideshow configured in position: "fullscreen_below"

      Is there a way to use both of these, or are they just incompatible? Thanks very much for any troubleshooting help anyway.

      (originally posted in Showcase > Utilities as a reply to the MMM-MagicMover topic by mistake)

      kayakbabeK 1 Reply Last reply Reply Quote 0
      • kayakbabeK Offline
        kayakbabe @raymondjspigot
        last edited by

        @raymondjspigot I had a thought that might apply. MagicMover adds a div to all the modules. maybe having that surreounding div added to the backgroundslideshow… is breaking the css for the BackgroundSlideshow.

        Are you wanting a background with stuff floating around on top of it?

        I’m thinking you would need to alter the javascript code in the MagicMover to exclude the BackgroundSlideshow from having the div added around it. It would break any updates for MagicMover as you would have to add-in your custom code again if you pulled an update from the source.

        S R C-sonC 3 Replies Last reply Reply Quote 0
        • S Offline
          sdetweil @kayakbabe
          last edited by sdetweil

          @kayakbabe or submit the extra code back as an enhacement with a config parm to turn it on

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 1
          • R Offline
            raymondjspigot @kayakbabe
            last edited by

            @kayakbabe Hi, thanks very much for your suggestion

            MagicMover adds a div to all the modules. maybe having that surreounding div added to the backgroundslideshow… is breaking the css for the BackgroundSlideshow.

            I’d wondered if there was a way to exclude BackgroundSlideshow from any changes that MagicMover applies but had no idea what those changes might be or how to do it though.

            Are you wanting a background with stuff floating around on top of it?

            Yes exactly - so I was trying to build something with maybe less of a mirror-look (where the modules are all displayed against a black background) and more of an info-screen, with a desktop-background effect and modules are displayed over the top, if that’s clear)

            If I use npm start dev and look at the elements view I can see the BackgroundSlideshow at the fullscreen below position. It looks a bit like

            < body> == $0
              < div class="region fullscreen below">
                < div class="container" style="display: block;">
                  < div id="module_2_MMM-BackgroundSlideshow" class="module MMM-BackgroundSlideshow MMM-BackgroundSlideshow">
                    < header class="module-header" style="display: none;">undefined</header> 
                  < div class="module-content">
            

            I don’t know any javascript, but looking at the MMM-MagicMover.js code it looks like there’s a bit that might be adding the div you mentioned?

            getDom: function () {
                var wrapper = document.createElement('div');
                return wrapper;
            

            And there’s also a bit where it looks like it’s iterating through to move each of the elements?

            document.querySelectorAll('.container').forEach((element) => {
            

            Can I just try adding a conditional statement somewhere that would exclude a container that has div id="module_2_MMM-BackgroundSlideshow"? Or maybe ignore a module that’s displayed at position fullscreen_below? (I’m only using that position for the MMM-BackgroundSlideshow module). I’m not sure how to adjust the javascript without (probably) breaking it unfortunately. Any ideas where might be best to start?

            thanks again for your help!

            1 Reply Last reply Reply Quote 0
            • C-sonC Offline
              C-son Module Developer @kayakbabe
              last edited by

              @kayakbabe said in Using MMM-BackgroundSlideshow with MMM-MagicMover:

              MagicMover adds a div to all the modules. maybe having that surreounding div added to the backgroundslideshow… is breaking the css for the BackgroundSlideshow.

              @kayakbabe MMM-MagicMover does not add any elements. All it does is to pick up all sections and move them around at a random time.

              @raymondjspigot, I’ve updated the module to move the parent elements instead (.region instead of .container), and hopefully this will make it more compatible with the MMM-BackgroundSlideshow module.

              MMM-MagicMover :: MMM-MagicSuperHero :: MMM-MagicHexClock

              1 Reply Last reply Reply Quote 0
              • R Offline
                raymondjspigot
                last edited by

                Hi @C-son thanks very much for your update! I’ve updated my installation of the module and given it another try, and it’s definitely better:

                • my mirror now shows the picture from MMM-BackgroundSlideshow ok (instead of just the black background with no picture under my other modules that I was getting before when MMM-MagicMover was enabled)

                • watching carefully I can see my displayed modules (e.g. default Clock, weather modules) getting shifted slightly in the mirror display every now and again

                • but my module at position: bottom_centernow gets displayed shifted to the right of the mirror. I have MMM-WeatherOrNot displayed at this position, configured to show a 7-day forecast as a horizontal row of icons, and the last 3 or so icons (perhaps 40% of the whole row) is shifted off the right hand side of the screen (if that helps give you an idea of how much it’s been moved across).

                I do have a module configured to display above that (at position: lower_third) and below that too (at position: bottom_bar) and they both appear displayed on the mirror normally (i.e. centred like I’d expect)

                I still have MMM-MagicMover configured at position: top_bar, just in case that makes a difference.
                Let me know if there’s any more info I can help with anyway, happy to try it out.

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • 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