MMM-BackgroundSlideshow gradient and horizontalGradient not working

MajorC

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.

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 
			}
		},

MajorC

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.

MajorC

Hello World,

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

Thanks

MajorC

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.