Using MMM-BackgroundSlideshow with MMM-MagicMover

raymondjspigot

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)

kayakbabe

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

sdetweil

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

raymondjspigot

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

C-son

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

raymondjspigot

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.