@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)
Read the statement by Michael Teeuw here.
Latest posts made by patrad
-
RE: Change opacity of BackgroundSlideShow based on mmm-pages?
-
RE: Change opacity of BackgroundSlideShow based on mmm-pages?
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%" ] } },
-
Change opacity of BackgroundSlideShow based on mmm-pages?
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 } }, ] };
-
RE: Modify the Gap/Margins
@aaronaxvig Thank you! All other search results that had changing the CSS body really messed up other module internal alignment. This resizes correctly and doesn’t mess with other module alignment