Change background image based on time of day

[I_Am_Anthony]

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.

[j.e.f.f]

@I_Am_Anthony You won’t be able to do this in CSS alone. CSS isn’t a programming language so you can’t put logic into it to, say, change a style based on time of day.

However, if you’re willing to get your hands dirty, this would be a fairly trivial module to write. This would be a great starter project for anyone who wants to build their own first module. I believe there is currently a module that puts animated snow on your mirror as a background graphic. I’d take a look at that to get started.

[I_Am_Anthony]

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.

[j.e.f.f]

@I_Am_Anthony since you’re targeting the body element in your CSS, it won’t matter where you specify the location of the module to be. However, by default, if you don’t specify a location for the module, it’s not shown at all. I don’t know how that will affect your module.

I’d also suggest that you extract the style sheets and the times during which they are displayed into the configuration. That way you module is reusable by others who might want to use this in a similar way.

[strawberry 3.141]

This should not work, as the getStyles function of the module gets just executed once when the mirror boots. I would suggest to create some classes like morning, afternoon, evening, … and in the module you load the css file with those classes, then create an interval which checks the current time of the day. based on that you query for the body like var body = document.querySelector('body'); and set the specific class body.className = 'morning';

[I_Am_Anthony]

@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.e.f.f]

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

[I_Am_Anthony]

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.e.f.f]

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

[strawberry 3.141]

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