Need Help Changing Background Image Based on Time

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