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.

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

    Scheduled Pinned Locked Moved Development
    2 Posts 1 Posters 391 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.
    • X Offline
      xTITUS MAXIMUSx
      last edited by xTITUS MAXIMUSx

      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?

      X 1 Reply Last reply Reply Quote 0
      • X Offline
        xTITUS MAXIMUSx @xTITUS MAXIMUSx
        last edited by

        @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.

        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