Posts made by tonkxy

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.

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.

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

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

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