• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

Change background image based on time of day

Scheduled Pinned Locked Moved Development
backgroundtimeofday
18 Posts 5 Posters 7.8k Views 5 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.
  • I Offline
    I_Am_Anthony
    last edited by I_Am_Anthony Aug 8, 2017, 3:49 PM Aug 8, 2017, 3:46 PM

    @I_Am_Anthony said in Change background image based on time of day:

    return [“normalBackground.css”];

    Can this be done in the getDom() function, or will that cause it to continually loop and eat up the processor? Apologies, I’m just getting into this and not 100% familiar with the program flow of execution. Something like this?

    Module.register("background", {
     
         
        defaults: {
    	night_start: 0,
            night_stop: 5,
            night_background: "ring.jpg",
            day_background: "Splash.png"
        },    
    
        getStyles: function() {
            return ["custom.css"];
        },
    
        getDom: function() {
    
            var currentTime = new Date().getHours();
            var body = document.querySelector('body');
    
            if (having markup issues displaying logic) ){
                body.className = night_background;       
            }
    
            else {
                body.className = day_background;       
            }
        }
    
    });
    
    J 1 Reply Last reply Aug 8, 2017, 3:53 PM Reply Quote 0
    • J Offline
      j.e.f.f Project Sponsor Module Developer @I_Am_Anthony
      last edited by Aug 8, 2017, 3:53 PM

      @I_Am_Anthony getDom() is only executed when you call the updateDom() function. So in your code, you could have a timer that fires, say, every 10 minutes, and if the time threshold has passed, you can call updateDom().

      That said, your getDom() function needs to return something, as it expects to get the HTML update for the module from this routine, to be placed in whatever location the module is configured for. Since your module doesn’t have a configured location, using the getDom routine might not be the best place to do this.

      You can set all of this up in the start() function. Set up a timer, and in the function that gets executed when the timer fires, do your time comparison and update of the CSS class on the body element directly. No need to use getDom for this.

      1 Reply Last reply Reply Quote 0
      • I Offline
        I_Am_Anthony
        last edited by I_Am_Anthony Aug 8, 2017, 7:42 PM Aug 8, 2017, 5:41 PM

        How does this look?

        Module.register("background", {
              
            defaults: {
        	night_start: 0,
                night_stop: 5,
                night_background: "night.png",
                day_background: "day.png"
            },    
        
            //Do I still need to load the custom.css?
            getStyles: function() {
                return ["custom.css"];
            },
        
            // Define start sequence.
            start: function() {
        	Log.info("Starting module: " + this.name);
        
        
        
        	// Schedule update interval.
        	var self = this;
                self.updateBackground();
        	setInterval(function() {
        		self.updateBackground();
        	}, 600000);
            },
            
            updateBackground: function() {
                var currentTime = new Date().getHours();
                var body = document.querySelector('body');
        
                if ( currentTime >= this.config.night_start && currentTime &#60= this.config.night_stop  ||
                   ((currentTime >= this.config.night_start || currentTime &#60= this.config.night_stop) && 
                    this.config.night_start > this.config.night_stop) ){
                    body.className = this.config.night_background;       
                }
        
                else {
                    body.className = this.config.day_background;       
                }
            }
        });
        

        BTW, thanks for helping to walk me through this. I’m pretty rusty on javascript. If I can get it sorted and running, I’ll package it and submit it as a module. Not terribly useful, but hey…

        J S 2 Replies Last reply Aug 8, 2017, 5:54 PM Reply Quote 0
        • J Offline
          j.e.f.f Project Sponsor Module Developer @I_Am_Anthony
          last edited by Aug 8, 2017, 5:54 PM

          @I_Am_Anthony Looks like it might work! You should call updateBackground() once before setting up the timer so that you’ll have a background at module startup, instead of having to wait for the timer to fire for the first time.

          1 Reply Last reply Reply Quote 1
          • S Offline
            strawberry 3.141 Project Sponsor Module Developer @I_Am_Anthony
            last edited by Aug 8, 2017, 6:18 PM

            @I_Am_Anthony night_background and day_background will be undefined.

            you have to address them like this.config.night_background and you have to change your comparison operators. => defines an arrow function and doesn’t mean greaer or equal then like >= would do. Less or equal would be `

            Please create a github issue if you need help, so I can keep track

            1 Reply Last reply Reply Quote 0
            • I Offline
              I_Am_Anthony
              last edited by I_Am_Anthony Aug 8, 2017, 7:42 PM Aug 8, 2017, 7:38 PM

              Good catch on the missing this.config.night_background, thanks.

              I’m aware that it’s >= and &#60= The markup really hates the less than or equal sign together (because HTML apparently), so I just flipped them for the purposes of markup. Just found that I can use the escape instead: &#60=.

              Anyway, thanks to both of you @j.e.f.f and @strawberry-3-141 for the help. I’ve updated the code above to prevent repasting. I’ll get it into the mirror soon to test. If it works then I’ll package it and submit as a module.

              1 Reply Last reply Reply Quote 0
              • X Offline
                xTITUS MAXIMUSx
                last edited by Jun 19, 2020, 9:27 PM

                I know this is an old topic but did you get this module finished? if do you have a git hub?

                1 Reply Last reply Reply Quote 0
                • P Offline
                  Piranha1605
                  last edited by Jun 19, 2020, 9:39 PM

                  ;)

                  https://forum.magicmirror.builders/topic/13014/css-switch-module

                  X 1 Reply Last reply Jun 19, 2020, 9:51 PM Reply Quote 0
                  • X Offline
                    xTITUS MAXIMUSx @Piranha1605
                    last edited by Jun 19, 2020, 9:51 PM

                    @Piranha1605

                    Not exactly what I am looking for. I tried to take @I_Am_Anthony code and tweak it to my needs but, no success. maybe you’ll review my code? :)

                    1 Reply Last reply Reply Quote 0
                    • P Offline
                      Piranha1605
                      last edited by Jun 19, 2020, 10:00 PM

                      You can actually schedule all CSS entries in the module, including the background.

                      X 1 Reply Last reply Jun 19, 2020, 11:05 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      • 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