@Wilco89 I know this thread is old, but maybe you can help. Do you know how to change the background picture based on time of day? I have seen modules that update by a random interval, but looking for specific time.

I’m making a MM for a friend. I’m going to have a background image on it, but I want it to change to the scary girl from The Ring late at night. Should be a nice surprise for him…

Thanks.

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

I’m aware that it’s >= and <= 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: <=.

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.

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 <= this.config.night_stop  ||
           ((currentTime >= this.config.night_start || currentTime <= 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…

@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;       
        }
    }

});

So, based on your recommendation, I think I’ll implement a simple module that switches between style sheets; each with a different background image. Thoughts?

Something like this:

Module.register("background", {
    getStyles: function() {
    var currentTime = new Date().getHours();
    
    if (currentTime > 5 && currentTime < 23 ){
      return ["normalBackground.css"];       
      }
    else {
      return ["scaryBackground.css"];       
      }
    }
});

Then the different css sheets would be:

\\normalBackground.css
body {
    background-image: url("normal.png");
    background-color: #cccccc;
}

\\scaryBackground.css
body {
    background-image: url("scary.png");
    background-color: #cccccc;
}

I’m not sure if this will do full screen, or just a specific location for the module. I suppose I’ll have to look into the MM defaults to see where a module is displayed if it isn’t specified.

As the title suggests, is there a way to change the background image based on the current time of day in the css file? I’d assume there’s a way to work something into a module, but it’s likely more complicated, especially if I want it to be full screen. Perhaps I need to add a function into one of the .js files to pull from a different css file?

I’ve found this code for adding a backgrund image from another post by @Wilco89 Thanks btw.

body {
    background-image: url("paper.gif");
    background-color: #cccccc;
}

I’m making a magic mirror for a friend. It will have a standard background image that displays most of the time, but I want to change it to a picture of the evil girl from the ring during late night hours. Should be afun little surprise eventually.

Thanks.

@Wilco89 I know this thread is old, but maybe you can help. Do you know how to change the background picture based on time of day? I have seen modules that update by a random interval, but looking for specific time.

I’m making a MM for a friend. I’m going to have a background image on it, but I want it to change to the scary girl from The Ring late at night. Should be a nice surprise for him…

Thanks.