MMM-Pages - possible to change module config?

WallysWellies

@sdetweil Basically, using MMM-Pages I will have 2 pages:

Page 1 - show only MMM-Wallpaper.
Page 2 - show MMM-Wallpaper, and everything else (calendar, clock, weather, mealie, Spotify…).

MMM-Wallpaper is set to position “fullscreen_below” so I have configured it to dim the images so I can read the text of the other modules using it’s normal config:

filter: "grayscale(0.0) brightness(0.2)"

On page 1, where there will be no other modules overlayed, I would like to reset this config and have the images at normal (full) brightness.

I’m just looking for some ideas on how to achieve this with the least amount of fuss.

The idea situation would be, MMM-Wallpaper page 1 config:

filter: "grayscale(0.0) brightness(1.0)"

MMM-Wallpaper page 2 config:

filter: "grayscale(0.0) brightness(0.2)"

sdetweil

@WallysWellies ok, got it.

MagicMirror doesn’t have pages, so all one can do is hide or show modules. that is what pages, carousel, profile switcher, and others do.

so your dual instance for Wallpaper is the only way to make this work.
pages doesn’t send other (module) notifications

WallysWellies

@sdetweil Thank you for your help.

WallysWellies

I got the effect I was after which I’m going to include here for the amusement of real programmers…

I added a notification check at the end of the notificationReceived function in the MMM-Wallpaper.js file that listens for page changes from the MMM-Pages module:

else if (notification === "NEW_PAGE") {
        self.updateImageFilter(payload);
    }

And I wrote a nasty little function to deal with it:

updateImageFilter: function(pageNumber) {
    var self = this;
    var mainDiv = document.getElementsByClassName("MMM-Wallpaper")[0];
    if (mainDiv) {
        var wallpaperImage = mainDiv.getElementsByTagName("img")[0];
        if (wallpaperImage && pageNumber === 0) {
            wallpaperImage.style.filter = "grayscale(0.0) brightness(1.0)";
        }
        else if (wallpaperImage) {
            wallpaperImage.style.filter = self.config.filter;
        }
    }
  }

I’m using Alexa to switch between the pages.

I had some bugs during my initial versions which I put down to the code trying to access the div or image element before it was created, hence the dodgy checks. They might be unnecessary.

The logic is pretty simple but I’m no programmer and I’ve never used TypeScript. Pretty happy with the result though. One day I might try and animate the brightness transition…

sdetweil

@WallysWellies good work!

changing code is always an option in an open source world.

most users don’t have that skill.