A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.
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.