Read the statement by Michael Teeuw here.
Need Help Changing Background Image Based on Time
-
Hello, I am trying to set the mirror to change the background image based on the time of day. I am unsure how to check time , remake the random number and then change the background image. I am able to see when it updates on a short interval (the photo flashes) but stays the same and doesnt regrab a random number/folder based on time. Any help is appreciated!
defaults: { bgName: "", // .jpg, .gif, .png, Full screen animated gifs too! videoName: " ", // your local picture files go in "images" folder of MMM-EasyBack youTubeID: "", // YouTube ID from the YouTube url height: "600px", // your display's resolution in pixels. Enter in config.js width: "1024px", // your display's resolution in pixels. Enter in config.js animationSpeed: "0", updateInterval: 60 * 60 * 1000, }, start: function() { self = this; this.url =''; rand = Math.floor(Math.random() * 2)+1; //randomn number to pick gif rand = 1; var day = new Date(); var hour = day.getHours(); var minutes = day.getMinutes(); if(hour <= 16){ folder="Afternoon"; } else if(hour >= 16 ){ folder = "Late"; } setInterval(function() { self.updateDom(self.config.animationSpeed || 0); }, this.config.updateInterval); if (this.config.bgName != "") { this.url = "modules/MMM-MainScreen/images/" + folder +"/" + rand +".gif"; } else if (this.config.vidoeName != "") { this.url = "modules/MMM-MainScreen/videos/" + this.config.video; } }, getStyles: function() { return ["MMM-MainScreen.css"] }, // Override dom generator. getDom: function() { if (this.config.youTubeID != '') { var iframe = document.createElement("IFRAME"); iframe.classList.add("iframe"); iframe.style = "border: 0 none transparent "; iframe.width = this.config.width; iframe.height = this.config.height; type="text/javascript"; iframe.src="https://www.youtube.com/embed/" + this.config.youTubeID + "?autoplay=1&loop=1&playlist=" + this.config.youTubeID; return iframe; } else var wrapper = document.createElement("div"); var image = document.createElement("img"); if (this.config.bgName != '') { image.src = this.url; image.className = "photo"; console.log("MMM-MainScreen: Now showing image background") wrapper.appendChild(image); }else { console.log("MMM-MainScreen error: Please enter either image OR video in config.js NOT BOTH"); } return wrapper; }, });
-
start: function () { // init your module. // Not recommended doing your real job here. Because this method is evaluated only one time on startup before all the stuff be prepared (e.g, DOM creating) this.timer = null }, notificationReceived: function (notification, payload, sender) { if (notification === 'DOM_OBJECTS_CREATED') { // This might be the best position where your real job starts. this.myJob() } }, myJob: function () { clearTimeout(this.timer) let rand = Math.floor( ... ) // random number to pick let hour = (new Date()).getHours() // select hour to pick the folder // ... Your logic for picking image by hour and rand this.timer = setTimeout(() => { // ... Your logic for displaying image picked. this.myJob() // recursive execution per updateInterval. // It would be a better habbit to use setTimeout instead of setInterval }, this.config.updateInterval) },
-
@mmrize Thank you so much for the guidance!
I am still really new to messing around in this area so I may not fully grasp your solution. I have been using the EasyBack as a guide to adjusting to what I want. I am unable to now get any kind of a background to show up.defaults: { bgName: "", // .jpg, .gif, .png, Full screen animated gifs too! videoName: " ", // your local picture files go in "images" folder of MMM-EasyBack youTubeID: "", // YouTube ID from the YouTube url height: "600px", // your display's resolution in pixels. Enter in config.js width: "1024px", // your display's resolution in pixels. Enter in config.js animationSpeed: "0", updateInterval: 60 * 60 * 1000, }, start: function() { this.timer = null; }, notificationReceived: function(notification, payload, sender){ if (notification === 'DOM_OBJECTS_CREATED'){ self = this; this.url =''; this.myJob(); } }, myJob: function(){ clearTimeout(this.timer); let rand = Math.floor(Math.random()*2)+1; let hour = (new Date()).getHours(); if(hour <= 16){ folder="Afternoon"; } else if(hour >= 16 ){ folder = "Late"; } if (this.config.bgName != "") { this.url = "modules/MMM-EasyBack/images/" + folder +"/" + rand +".gif"; } else if (this.config.vidoeName != "") { this.url = "modules/MMM-EasyBack/videos/" + this.config.video; } this.timer = setTimeout(myJob, 1000) { this.myJob(); }, this.config.updateInterval); }, getStyles: function() { return ["MMM-EasyBack.css"] }, // Override dom generator. getDom: function() { if (this.config.youTubeID != '') { var iframe = document.createElement("IFRAME"); iframe.classList.add("iframe"); iframe.style = "border: 0 none transparent "; iframe.width = this.config.width; iframe.height = this.config.height; type="text/javascript"; iframe.src="https://www.youtube.com/embed/" + this.config.youTubeID + "?autoplay=1&loop=1&playlist=" + this.config.youTubeID; return iframe; } else var wrapper = document.createElement("div"); var image = document.createElement("img"); if (this.config.bgName != '') { image.src = this.url; image.className = "photo"; console.log("MMM-EasyBack: Now showing image background") wrapper.appendChild(image); }else { console.log("MMM-EasyBack error: Please enter either image OR video in config.js NOT BOTH"); } return wrapper; }, });
-
@tonkxy
You’ve missedthis.updateDom()
. It needs to be called when you want to redraw your module’s output.
Whenever you call “updateDom()”, your “getDom()” will be executed. -
Good catch! I accidentally removed that. So, I have added it back in and tried a few spots before reaching out again. I am still not getting a background to populate… I am not sure if maybe a variable is missing or what else I could be lacking in this. Thank you for your help!
defaults: { bgName: "", // .jpg, .gif, .png, Full screen animated gifs too! videoName: " ", // your local picture files go in "images" folder of MMM-EasyBack youTubeID: "", // YouTube ID from the YouTube url height: "600px", // your display's resolution in pixels. Enter in config.js width: "1024px", // your display's resolution in pixels. Enter in config.js animationSpeed: "0", updateInterval: 60 * 60 , }, start: function() { self = this; this.timer = null; }, notificationReceived: function(notification, payload, sender){ if (notification === 'DOM_OBJECTS_CREATED'){ this.myJob(); } },self.updateDom(); myJob: function(){ clearTimeout = (this.timer); let rand = Math.floor(Math.random()*2)+1; let hour = (new Date()).getHours(); if(hour <= 16){ folder="Afternoon"; } else if(hour >= 16 ){ folder = "Late"; } this.timer = setTimeout(() => { this.updateDom(); if (this.config.bgName != "") { this.url = "modules/MMM-MainScreen/images/" + folder +"/" + rand +".gif"; } else if (this.config.vidoeName != "") { this.url = "modules/MMM-MainScreen/videos/" + this.config.video; } this.myJob(); },this.config.updateInterval); }, getStyles: function() { return ["MMM-EasyBack.css"] }, // Override dom generator. getDom: function() { if (this.config.youTubeID != '') { var iframe = document.createElement("IFRAME"); iframe.classList.add("iframe"); iframe.style = "border: 0 none transparent "; iframe.width = this.config.width; iframe.height = this.config.height; type="text/javascript"; iframe.src="https://www.youtube.com/embed/" + this.config.youTubeID + "?autoplay=1&loop=1&playlist=" + this.config.youTubeID; return iframe; } else var wrapper = document.createElement("div"); var image = document.createElement("img"); if (this.config.bgName != '') { image.src = this.url; image.className = "photo"; console.log("MMM-EasyBack: Now showing image background") wrapper.appendChild(image); }else { console.log("MMM-EasyBack error: Please enter either image OR video in config.js NOT BOTH"); } return wrapper; }, });
-
@tonkxy u need to update the url before u call updatedDom()
-
start: function () { this.timer = null this.targetURL = null this.setImageURL() }, getDom: function () { console.log(">", this.targetURL) var dom = document.createElement('div') dom.style.backgroundImage = `url(${this.targetURL})` dom.style.height = '100vh' // I recommend to control this through CSS, but in this example, I just hardcode it. dom.style.width = '100vw' dom.style.backgroundSize = 'cover' return dom }, notificationReceived: function (notification, payload, sender) { if (notification === 'DOM_OBJECTS_CREATED') { this.job() } }, job: function () { clearTimeout(this.timer) this.updateDom() this.setImageURL() this.timer = setTimeout(() => { this.job() }, this.config.updateInterval) }, setImageURL: function () { // do your logic for picking image. Here I pick the random unsplash image instead for example. let rand = Math.floor(Math.random() * 100000) this.targetURL = `https://source.unsplash.com/random?seed=${rand}` }
-
@mmrize said in Need Help Changing Background Image Based on Time:
job: function () {
clearTimeout(this.timer)
this.updateDom()
this.setImageURL()still backwards.
update url,
then call updatedDom,
which calls getDom
which uses the url -
@MMRIZE @sdetweil
Thank you both so much! That did work by the way! It worked once I moved the dom AND I was missing Module: (name), which is just dumb on my part. I appreciate the help and for solving my issue with this!!!Question, do you guys have a favorite beginners place for Magic Mirror? I feel I am missing some fundamentals and would love to take a recommendation.
-
@tonkxy really no design type stuff
you can look at my sample module which does all this…
https://github.com/sdetweil/SampleModule