MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-Pages - possible to change module config?

    Scheduled Pinned Locked Moved Solved Troubleshooting
    7 Posts 2 Posters 597 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • W Offline
      WallysWellies
      last edited by

      Hello all. I recently setup MMM-Pages and essentially am looking for setup where one page is a digital photo frame, and the other has all my dashboard content. For the wallpaper I use MMM-Wallpaper.

      Both pages have the background image set but in order to increase contrast for the text I dim the images with this line in the config:

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

      I would like to disable that line (or adjust it) so the background is more vibrant on the page without the dashboard text.

      My first thought would be to duplicate the module and simply switch between them when the page changes but I wonder if anyone can see a better way? I do see that the wallpaper module can accept a notification called UPDATE_WALLPAPER_CONFIG which may be of some help. Not sure how I could use that though.

      S 1 Reply Last reply Reply Quote 0
      • W Offline
        WallysWellies
        last edited by

        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…

        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @WallysWellies
          last edited by

          @WallysWellies I’m not sure I follow what you are doing/asking

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          W 1 Reply Last reply Reply Quote 0
          • W Offline
            WallysWellies @sdetweil
            last edited by

            @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)"
            
            S 1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @WallysWellies
              last edited by 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

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              W 1 Reply Last reply Reply Quote 0
              • W Offline
                WallysWellies @sdetweil
                last edited by

                @sdetweil Thank you for your help.

                1 Reply Last reply Reply Quote 0
                • W WallysWellies has marked this topic as solved on
                • W Offline
                  WallysWellies
                  last edited by

                  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…

                  S 1 Reply Last reply Reply Quote 0
                  • S Offline
                    sdetweil @WallysWellies
                    last edited by

                    @WallysWellies good work!

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

                    most users don’t have that skill.

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • W WallysWellies has marked this topic as solved on
                    • 1 / 1
                    • First post
                      Last post
                    Enjoying MagicMirror? Please consider a donation!
                    MagicMirror created by Michael Teeuw.
                    Forum managed by Sam, technical setup by Karsten.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy