MagicMirror² v2.24.0 is available! For more information about this release, check out this topic.
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.