Read the statement by Michael Teeuw here.
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.
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login