Change opacity of BackgroundSlideShow based on mmm-pages?

[patrad]

Hello. I have 3 pages setup with MMM-Pages. I have MMM-BackgroundSlideShow running and they work good together. One of my pages has a lot of content and I would like to turn the opacity or brightness down of the BackgroundSlideShow if a particular page is showing.

I am using classes with MMM-Pages (Photos, Info, Weather). Since BackgroundSlideshow appears on every page, it is a member of all three classes.

html.ujpqiown.idc0_350 body div.region.fullscreen.below div.container div#module_10_MMM-BackgroundSlideshow.module.MMM-BackgroundSlideshow.Photos.Info.Weather

So I don’t think I can change that div just based on the current Class of the page. Any ideas?

Module config if it helps.

	modules: [
		{
			module: 'MMM-page-indicator',
			position: 'bottom_bar',
			config: {
				pages: 3,
			}
		},
		
		{
			module: "MMM-pages",
			config: {
				rotationTime: 0, // rotate every 20 seconds
				modules: [
					["Photos"],           // class name for page 1
					["Info"],           // class name for page 2
					["Weather"],           // class name for page 3
				],
				//fixed: ["fixed_page"], //things that should show up all the time
				
			}
		},
		
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			classes: "Photos Info",
			position: "top_left",
			config: {
				displaySeconds: false,
				dateFormat: 'dddd, MMM D'
			}
		},
		{
			module: "calendar",
			classes: "Info",
			header: "Events",
			position: "bottom_right",
			config: {
				fade: false,
				flipDateHeaderTitle: true, //this didnt seem to do much
				calendars: [
					{
						fetchInterval: 1 * 24 * 60 * 60 * 1000,
						symbol: "calendar",
						url: ""
					}
				]
			}
		},

		{
			module: "weather",
			classes: "Info Weather",
			position: "top_left",
			config: {
				weatherProvider: "openmeteo",
				type: "current",
				lat: 0,
				lon:0
			}
		},
		{
			module: "weather",
			classes: "Info Weather",
			position: "top_right",
			header: "Weather Forecast",
			config: {
				fade: false,
				weatherProvider: "openmeteo",
				type: "forecast",
				lat: 0,
				lon:0
			}
		},

		{
			module: 'MMM-Remote-Control',

			config: {
				customCommand: {
					nextPage: {  // This is the name of your custom action (you'll use this in the URL)
						notification: 'PAGE_INCREMENT', // The notification mmm-pages listens for
						payload: {} // The payload to send with the notification (check mmm-pages docs)

					  }

				},  // Optional, See "Using Custom Commands" below
				showModuleApiMenu: true, // Optional, Enable the Module Controls menu
				secureEndpoints: false, // Optional, See API/README.md

			}
		},
		{
			module: 'MMM-BackgroundSlideshow',
			classes: "Photos Info Weather",
			position: 'fullscreen_below',
			config: {
				imagePaths: ['modules/MMM-BackgroundSlideshow/myImages/'],
				transitionImages: true,
				slideshowSpeed: 40000,
				backgroundSize: 'contain',
				resizeImages: true,
				maxwidth: 1280,
				maxheight: 720,
				imageInfo: ['date'],
				imageInfoLocation: 'bottomLeft',
				recursiveSubDirectories: true,
				randomizeImageOrder: true,
				transitions: ['opacity'],
				backgroundAnimationEnabled: true,
				animations: 'ease-in',
				showImageInfo: true
			}
		},
	]
};

[sdetweil]

@patrad no, you would have to write a small
module that handles that on resume() and suspend()
and put it in the same page group

[patrad]

@sdetweil

I found a way to do it with two instances of BackgroundSlideShow with different classes. Although the actual class assignment is a little odd. Not sure I’m grasping how the order of the modules in the config file influence what shows up. I thought the module without gradient should only have the first page class “Photos” and the second should have the other two pages classes “Info” and Weather". That didn’t work and I had to add all 3 classes to the first instance. It’s working great though!

{
			module: 'MMM-BackgroundSlideshow',
			classes: "Photos Info Weather",
			position: 'fullscreen_below',
			config: {
				imagePaths: ['modules/MMM-BackgroundSlideshow/myImages/'],
				transitionImages: true,
				slideshowSpeed: 40000,
				backgroundSize: 'contain',
				resizeImages: true,
				maxwidth: 1280,
				maxheight: 720,
				imageInfo: ['date'],
				imageInfoLocation: 'bottomLeft',
				recursiveSubDirectories: true,
				randomizeImageOrder: true,
				transitions: ['opacity'],
				backgroundAnimationEnabled: true,
				animations: 'ease-in',
				showImageInfo: true,
			}
		},
		{
			module: 'MMM-BackgroundSlideshow',
			classes: "Info Weather",
			position: 'fullscreen_below',
			config: {
				imagePaths: ['modules/MMM-BackgroundSlideshow/myImages/'],
				transitionImages: true,
				slideshowSpeed: 40000,
				backgroundSize: 'contain',
				resizeImages: true,
				maxwidth: 1280,
				maxheight: 720,
				imageInfo: ['date'],
				imageInfoLocation: 'bottomLeft',
				recursiveSubDirectories: true,
				randomizeImageOrder: true,
				transitions: ['opacity'],
				backgroundAnimationEnabled: true,
				animations: 'ease-in',
				showImageInfo: true,
				gradientDirection: 'both',
				gradient:[
				"rgba(0, 0, 0, 1) 0%",
				"rgba(0, 0, 0, 0.75) 40%"
				]
			}
		},

[sdetweil]

@patrad classes, if it matches it shows, if it doesn’t then does not show

hm, does that module support
multiple instances ?

[patrad]

@sdetweil I didn’t see a specific call out in the documentation for that module but seems to be working fine. One the first page the background photo is at full opacity and on the other two pages the same image is dimmed (via the gradient)