MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Need Help Changing Background Image Based on Time

    Scheduled Pinned Locked Moved Solved Troubleshooting
    16 Posts 4 Posters 1.8k Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      tonkxy
      last edited by

      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;
    },
});
      M 1 Reply Last reply Reply Quote 0
      • M
        MMRIZE @tonkxy
        last edited by 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)
},
        T 1 Reply Last reply Reply Quote 1
        • T
          tonkxy @MMRIZE
          last edited by

          @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;
},
});
          M 1 Reply Last reply Reply Quote 0
          • M
            MMRIZE @tonkxy
            last edited by 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.

            T 1 Reply Last reply Reply Quote 1
            • T
              tonkxy @MMRIZE
              last edited by

              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;
},
});
              S M 2 Replies Last reply Reply Quote 0
              • S
                sdetweil @tonkxy
                last edited by

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

                Sam

                How to add modules

                learning how to use css

                1 Reply Last reply Reply Quote 1
                • M
                  MMRIZE @tonkxy
                  last edited by

                  @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}`
}
                  S 1 Reply Last reply Reply Quote 1
                  • S
                    sdetweil @MMRIZE
                    last edited by

                    @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

                    Sam

                    How to add modules

                    learning how to use css

                    M 1 Reply Last reply Reply Quote 1
                    • T
                      tonkxy
                      last edited by 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.

                      S E 2 Replies Last reply Reply Quote 0
                      • S
                        sdetweil @tonkxy
                        last edited by sdetweil

                        @tonkxy really no design type stuff

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

                        Sam

                        How to add modules

                        learning how to use css

                        1 Reply Last reply Reply Quote 1
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy