MagicMirror² v2.14.0 is available! For more information about this release, check out this topic.

MMM-BackgroundSlideshow gradient and horizontalGradient not working


  • Project Sponsor

    Hi all and @darick_c ,

    I would like to use MMM-BackgroundSlideshow to show some pictures full screen.

    In the config I use:

    gradient: [ "rgba(0, 0, 0, 0.75) 0%", "rgba(0, 0, 0, 0) 20%", "rgba(0, 0, 0, 0) 80%", "rgba(0, 0, 0, 0.75) 100%" ]
    horizontalGradient: [ "rgba(1, 0, 0, 0.75) 0%", "rgba(0, 0, 0, 0) 30%", "rgba(0, 0, 0, 0) 70%", "rgba(1, 0, 0, 0.75) 100%" ]
    

    So, there should be, top to bottom, a darker area from 0% to 20% of the screen and from 80% to 100%, right?
    And from left to right, there should be a darker area from 0% to 30% and from 70% to 100% of the screen.

    I put a 100% white picture in the background, to see where the darker area is.

    I don’t know if I understand the gradient, horizontalGradient wrong or something else is not correct.

    2020-12-16-140854_2560x1440_scrot.png

    Full config:

    {
    			module: 'MMM-BackgroundSlideshow',
    			position: 'fullscreen_below',
    			config: {
    				imagePaths: ['modules/MMM-BackgroundSlideshow/BackgroundImages'],
    				transitionImages: true,
    				transitions: ['opacity'],
    				randomizeImageOrder: true,
    				slideshowSpeed: 500000,
    				gradient: [ "rgba(0, 0, 0, 0.75) 0%", "rgba(0, 0, 0, 0) 20%", "rgba(0, 0, 0, 0) 80%", "rgba(0, 0, 0, 0.75) 100%" ], //von oben nach unten, % = wo im Bildschirm startet es
    				horizontalGradient: [ "rgba(1, 0, 0, 0.75) 0%", "rgba(0, 0, 0, 0) 30%", "rgba(0, 0, 0, 0) 70%", "rgba(1, 0, 0, 0.75) 100%" ] //von links nach rechts, % = wo im Bildschirm startet es 
    			}
    		},
    

  • Project Sponsor

    I solved it by myself. So here for the rest of the world or maybe for myself in a couple of months.

    The following config is working:

                    {
    			module: 'MMM-BackgroundSlideshow',
    			position: 'fullscreen_below',
    			config: {
    				imagePaths: ['modules/MMM-BackgroundSlideshow/BackgroundImages'],
    				transitionImages: true,
    				transitions: ['opacity'],
    				randomizeImageOrder: true,
    				slideshowSpeed: 500000,
    				gradientDirection: 'both',
    				gradient: [ "rgba(0, 0, 0, 0.00) 0%", "rgba(0, 0, 0, 0.00) 0%", "rgba(0, 0, 0, 0.00) 90%", "rgba(0, 0, 0, 0.75) 100%" ], //von oben nach unten, % = wo im Bildschirm startet es
    				horizontalGradient: [ "rgba(0, 0, 0, 0.75) 0%", "rgba(0, 0, 0, 0) 15%", "rgba(0, 0, 0, 0.00) 85%", "rgba(0, 0, 0, 0.75) 100%" ] //von links nach rechts, % = wo im Bildschirm startet es 
    			}
    		},
    

    In addition, you have to change a line in the MMM-BackgroundSlideshow.js file in the getDom function (line 316)

    OLD: this.createGradientDiv('right', this.config.gradient, wrapper);
    NEW: this.createGradientDiv('right', this.config.horizontalGradient, wrapper);
    

    I will put this on GitHub as well.


  • Project Sponsor

    Hello World,

    can someone give me a hand? I am sure I am not the only one using this module 🙂

    Thanks


  • Project Sponsor

    I solved it by myself. So here for the rest of the world or maybe for myself in a couple of months.

    The following config is working:

                    {
    			module: 'MMM-BackgroundSlideshow',
    			position: 'fullscreen_below',
    			config: {
    				imagePaths: ['modules/MMM-BackgroundSlideshow/BackgroundImages'],
    				transitionImages: true,
    				transitions: ['opacity'],
    				randomizeImageOrder: true,
    				slideshowSpeed: 500000,
    				gradientDirection: 'both',
    				gradient: [ "rgba(0, 0, 0, 0.00) 0%", "rgba(0, 0, 0, 0.00) 0%", "rgba(0, 0, 0, 0.00) 90%", "rgba(0, 0, 0, 0.75) 100%" ], //von oben nach unten, % = wo im Bildschirm startet es
    				horizontalGradient: [ "rgba(0, 0, 0, 0.75) 0%", "rgba(0, 0, 0, 0) 15%", "rgba(0, 0, 0, 0.00) 85%", "rgba(0, 0, 0, 0.75) 100%" ] //von links nach rechts, % = wo im Bildschirm startet es 
    			}
    		},
    

    In addition, you have to change a line in the MMM-BackgroundSlideshow.js file in the getDom function (line 316)

    OLD: this.createGradientDiv('right', this.config.gradient, wrapper);
    NEW: this.createGradientDiv('right', this.config.horizontalGradient, wrapper);
    

    I will put this on GitHub as well.