MagicMirror² v2.12.0 is available! For more information about this release, check out this topic.

Help creating background module to change on set time of the day



  • Hi! Sooo defiantly new to all this module jazz and I am trying to build a module that sets the background based on the time of the day. What I have so far is this.

    Module.register("MMM-Background", {
    
        defaults: {
    	morning_start: 6,
            morning_stop: 11,
    	noon_start: 12,
            noon_stop: 16,
            morning_background: "morning.jpg",
            noon_background: "noon.jpg",
    	night_background: "night.jpg"
        },
    	
    	//CSS file
    	getStyles: function() {
            return ["MMM-Background.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.morning_start && currentTime =< this.config.morning_stop )  {
                body.className = this.config.morning_background;
            }
    
            else if ( currentTime >= this.config.noon_start && currentTime =< this.config.noon_stop )  {
                body.className = this.config.noon_background;
            }
    		
    		else { 
    			body.className = this.config.night_background;
    		}
        }
    });
    

    CSS file

    .morning_background {
      margin: 0; 
      height: 100%;
      width: 100%;
    }
    
    .noon_background {
      margin: 0;
      height: 100%;
      width: 100%;
    }
    
    .night_background {
      margin: 0;
      height: 100%;
      width: 100%;
    }
    

    Any guidance would be appreciated. I noticed on some other users modules they use a node-js helper? do I need that here?



  • @xTITUS-MAXIMUSx nvm… after reviewing my mistakes I actually got it working

    Module.register("MMM-CSSswitch", {
          
        defaults: {
    	morning_start: 5,
            morning_stop: 12,
    	noon_start: 12,
            noon_stop: 23,
        },    
    
        //Do I still need to load the custom.css?
        getStyles: function() {
            return ["MMM-CSSswitch.css"];
        },
    
        // Define start sequence.
        start: function() {
    	Log.info("Starting module: " + this.name);
    
    
    
    	// Schedule update interval.
    	var self = this;
            self.updatecssswitch();
    	setInterval(function() {
    	self.updatecssswitch();
    	}, 5000);
        },
        
        updatecssswitch: function() {
            var currentTime = new Date().getHours();
            var body = document.querySelector('morning');
    
            if ( currentTime >= this.config.morning_start && currentTime < this.config.morning_end ) {
                document.body.className = "morning";       
            }
    		
    	else if ( currentTime >= this.config.noon_start && currentTime < this.config.noon_stop ) {
                document.body.className = "noon";
            }
    
            else {
                 document.body.className = "night";       
            }
        }
    });
    

    CSS

    .morning {
      background-image: url("morning.png");
      margin: 0; 
      height: 100%;
      width: 100%;
    }
    
    .noon {
      background-image: url("noon.jpg");
      margin: 0; 
      height: 100%;
      width: 100%;
    }
    
    .night {
      background-image: url("night.jpg");
      margin: 0; 
      height: 100%;
      width: 100%;
    }
    

    Big thanks to @Piranha1605 and his github for a template.


Log in to reply