@sdetweil Great advice.

I stepped through and you were right on two things. When it starts, it defaults with the else case, because it hasn’t fetched the type yet. Once it does fetch the type I was resetting it in the myJob() function causing it to be undefined again.

I appreciate the break down on this. JS is definitely giving me a run for my money on learning it.

@sdetweil when you say stop you mean in my debug to see where im losing the value?

@sdetweil funny you say that. Ive been reading and you offered the solution on someone using compliments + weather. My issue is when i step through to set image, the type is back to undefined and not carried from the notification. Im wondering if its in my order as to why its going back to undefined

@sdetweil that definitely was part of it.

I am able to successfully see the payload in notifications. Just working a way to retain it and be able to use in setImage. Thank you!

@sdetweil great callout! I did not know I could debug. I do get a type back. I did the break trick on where its in an if statement and the type is still undefined in setImage

@mmrize I took some time to try and figure this one out… sadly a lot of weather API’s are falling out, so some references use darkskies and that is out. I did write this up and so far the only issue I am having is at setImage the type variable is not being filled with a value.

When i run npm start dev and I have the log return the value of type it does say info undefined… so it seems im not pulling off currentweather correctly with openweather as my api

defaults: {
        height: "600px",   // your display's resolution in pixels. Enter in config.js
        width: "1024px",    // your display's resolution in pixels. Enter in config.js
        updateInterval: 60 * 60 * 100,
    },
//set current weather from moduel
currentWeatherType: "weather, currentweather",
//scripts
getScripts: function(){
	return ["moment.js" , "moment-timezone.js"];
},
   
	
start: function () {
	  this.timer = null
	  this.url = null
	  this.setImage()
},

getDom: function () {
	  console.log(">", this.url)
	  var dom = document.createElement('div')
	  dom.style.backgroundImage = `url(${this.url})`
	  dom.style.height = '100vh' // do in css
	  dom.style.width = '100vw'
	  dom.style.backgroundSize = 'cover'
	  return dom
},
//From data currentweather set weather type
	setCurrentWeatherType: function(type){
	this.currentWeatherType = type;
},

notificationReceived: function (notification, payload, sender) {
	  if (notification === 'DOM_OBJECTS_CREATED') {
	    this.job()
	  }
//weather dom
	if(notification === "CURRENTWEATHER_TYPE"){
		this.setCurrentWeatherType(payload.type);
	}
},


job: function () {
	  clearTimeout(this.timer)
      	  this.updateDom()
     	  this.setImage()
  	  this.timer = setTimeout(() => {
    	  this.job()
  	}, this.config.updateInterval)
},


setImage: function () {
  let rand = Math.floor(Math.random() * 4)+1; //randomn number to pick gif
	var day = new Date();
	var hour = day.getHours();
	var type = this.currentWeatherTemperature;
//if criteria for folders
//	if(hour >= 22 || hour <= 4){
//	folder = "Night";
//	}else
//	if(hour <= 10){
//	folder = "Morning";
//	}else
//	if(hour <= 17){
//	folder = "Afternoon";

	if(type = "rain"){ //testing weather to see if it passes if condition
		folder = "Afternoon";
	}else folder = "Morning";

	this.url = "modules/MMM-MainScreen/images/" + folder +"/" + rand +".gif";
	}

});

Hello!

I am wanting to take the variables from a weather module and use that to decide a background. Do I need to rebuild current weather in my module, or can i import it essentially in order to use the variables / gather temps?

Thank you for your time!

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

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