Need Help Changing Background Image Based on Time

[tonkxy]

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;
    },
});

[MMRIZE]

@tonkxy

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)
},

[tonkxy]

@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;
},
});

[MMRIZE]

@tonkxy
You’ve missed this.updateDom(). It needs to be called when you want to redraw your module’s output.
Whenever you call “updateDom()”, your “getDom()” will be executed.

[tonkxy]

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;
},
});

[sdetweil]

@tonkxy u need to update the url before u call updatedDom()

[MMRIZE]

@tonkxy

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}`
}

[sdetweil]

@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

[tonkxy]

@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.

[sdetweil]

@tonkxy really no design type stuff

you can look at my sample module which does all this…
https://github.com/sdetweil/SampleModule

[MMRIZE]

@sdetweil
First url was set in start(), so I put that next of update in recursive.

[easty]

@tonkxy

Time based background is a great idea. Are you planning on releasing this as a module?

[sdetweil]

@mmrize ok. my experience and training on maintaining software teaches me never to do this. you have two places where state is set.

[MMRIZE]

@sdetweil you are right. It was just an example. :)

[tonkxy]

@easty i am! Im going to integrate it with weather conditions. It’ll have a gif background that resembles the time of day / condition. Ill be adding in overlays for hrly breakdowns, 5 day etc.

[MMRIZE]

@tonkxy
Just for reference, there is a similar module already. You’d better get a hint from it.
https://github.com/BrianHepler/MMM-WeatherBackground
It derive the background image from unsplash collections by weather and season condition(and ideally, everything if it can be translated and notified from any modules.)