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-BackgroundSlideshow gradient and horizontalGradient not working

    Scheduled Pinned Locked Moved Solved Troubleshooting
    backgrounderrorgradientslideshow
    3 Posts 1 Posters 1.0k Views 1 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.
    • M Offline
      MajorC Project Sponsor
      last edited by MajorC

      Hi all and @darick_c ,

      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.

      2020-12-16-140854_2560x1440_scrot.png

      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 
      			}
      		},
      
      1 Reply Last reply Reply Quote 0
      • M Offline
        MajorC Project Sponsor
        last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • M Offline
          MajorC Project Sponsor
          last edited by

          Hello World,

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

          Thanks

          1 Reply Last reply Reply Quote 0
          • M Offline
            MajorC Project Sponsor
            last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • 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