Need Help Changing Background Image Based on Time

MMRIZE

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