Read the statement by Michael Teeuw here.
Change background image based on time of day
-
@I_Am_Anthony
getDom()
is only executed when you call theupdateDom()
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 callupdateDom()
.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 thebody
element directly. No need to use getDom for this. -
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 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. -
@I_Am_Anthony
night_background
andday_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 ` -
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.
-
I know this is an old topic but did you get this module finished? if do you have a git hub?
-
-
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? :)
-
You can actually schedule all CSS entries in the module, including the background.
-
@Piranha1605 Cool! how would one do that? Still a noob.