Help with Module DOM

[drstang]

Hi - trying my own spinoff of the weather modules to pull in my home weather station information. I’m still learning JS, but have been getting the hang of it…

I’m able to parse my preliminary values (as I’ve been able to show by logging it) and have been able to send them to my updateDom section (again by logging), but I haven’t been able to get my “feelsLike” and “dailyRainIn” to update at all. No matter where I try putting it in the appendChild code for these values, it won’t update to the MM. My temperature, wind speed and wind direction do properly log.

I’ve racked my brain trying to figure this out and changing the combinations, but can’t solve it. Any help would be greatly appreciated! Thanks!

Module.register("MMM-AWtest",{
    
	// Default module config.
	defaults: {
        applicationKey: "",     
		apiKey: "",
		units: config.units,
		updateInterval: 10 * 60 * 1000, // every 10 minutes
		animationSpeed: 1000,
		timeFormat: config.timeFormat,
		lang: config.language,
		tableClass: "large",


		initialLoadDelay: 0, // 0 seconds delay
		retryDelay: 2500,
                
		apiBase: "https://rt.ambientweather.net/v1/devices"
	},    
	start: function () {
		this.windSpeed = null;
		this.windDirection = null;
		//this.sunriseSunsetTime = null;
		//this.sunriseSunsetIcon = null;
		this.temperature = null;
		//this.weatherType = null;
		this.feelsLike = null;
		this.dailyRainIn = null;

		this.loaded = false;
		this.scheduleUpdate(this.config.initialLoadDelay);

		this.updateTimer = null;
	},
	getDom: function() {
		var wrapper = document.createElement("div");
		wrapper.className = this.config.tableClass;						 

		var medium = document.createElement("div");
		medium.className = "normal medium";

		var windSpeed = document.createElement("span");
		windSpeed.innerHTML = " " + this.windSpeed + "<span class=\"xsmall\">" + "mph" + "</span>";
		medium.appendChild(windSpeed);

		var windDirection = document.createElement("span");
		windDirection.innerHTML = " " + this.windDirection;
		medium.appendChild(windDirection);
		
		wrapper.appendChild(medium);

		var large = document.createElement("div");
		large.className = "large light";
		
		var temperature = document.createElement("span");
		temperature.className = "bright";
		temperature.innerHTML = " " + this.temperature + "°";
		large.appendChild(temperature);

		wrapper.appendChild(large);

		var small = document.createElement("div");
		small.className = "dimmed small";
		
		Log.info('pre-dom:' + this.feelsLike)
		var feelsLike = document.createElement('span');
		//feelsLike.className = 'dimmed';
		feelsLike.innnerHTML = "FEELS LIKE: " + this.feelsLike + "°";
        small.appendChild(feelsLike);
        
        Log.info('pre-dom:' + this.dailyRainIn)
		var dailyRainIn = document.createElement('span');
		//dailyRainIn.className = 'dimmed';
		dailyRainIn.innnerHTML = " Daily Rain: " + this.dailyRainIn + "<span class=\"xsmall\">" + "in" + "</span>";
        small.appendChild(dailyRainIn);

		wrapper.appendChild(small);
		return wrapper;
	},
	updateWeather: function() {
		var url = this.config.apiBase + this.getParams();
		var self = this;
		var retry = true;

		var weatherRequest = new XMLHttpRequest();
		weatherRequest.open("GET", url, true);
		weatherRequest.onreadystatechange = function() {
			if (this.readyState === 4) {
				if (this.status === 200) {
					self.processWeather(JSON.parse(this.response));
				} else if (this.status === 401) {
					self.config.appid = "";
					self.updateDom(self.config.animationSpeed);

					Log.error(self.name + ": Incorrect APPID.");
					retry = false;
				} else if (this.status === 429){
				    self.updateDom(self.config.animationSpeed);
				    
				    Log.error(self.name + ": Too many requests.");
				    retry = false;
				} else {
					Log.error(self.name + ": Could not load weather.");
				}

				if (retry) {
					self.scheduleUpdate((self.loaded) ? -1 : self.config.retryDelay);
				}
			}
		};
		weatherRequest.send();
	},

	getParams: function() {
		var params = "?";
		params += "applicationKey=" + this.config.applicationKey;
		params += "&apiKey=" + this.config.apiKey;
                
		return params;
	},

	processWeather: function(data) {
	  
		this.temperature = this.roundValue(data[0].lastData.tempf);
		this.windSpeed = this.roundValue(data[0].lastData.windspeedmph);
		this.windDirection = this.deg2Cardinal(data[0].lastData.winddir);
		this.feelsLike = this.roundValue(data[0].lastData.feelsLike);
		this.dailyRainIn = data[0].lastData.dailyrainin;

		if(this.temperature!=='undefined'){Log.info(this.name + "Temperature is loaded:" + this.temperature)}
    
		if(this.windSpeed!=='undefined'){Log.info(this.name + "Windspeed is loaded:" + this.windSpeed)}
		
		if(this.windDirection!=='undefined'){Log.info(this.name + 'Wind Direction is loaded:' + this.windDirection)}
		
		if(this.feelsLike!=='undefined'){Log.info(this.name + "Feels Like is Loaded:" + this.feelsLike)}
		
		if (this.dailyRainIn!=='undefined'){Log.info(this.name + "Daily Rain is Loaded:" + this.dailyRainIn)};


		this.loaded = true;
		this.updateDom(this.config.animationSpeed);
	},
	scheduleUpdate: function(delay) {
		var nextLoad = this.config.updateInterval;
		if (typeof delay !== "undefined" && delay >= 0) {
			nextLoad = delay;
		}

		var self = this;
		setTimeout(function() {
			self.updateWeather();
		}, nextLoad);
	},
	deg2Cardinal: function(deg) {
		if (deg>11.25 && deg<33.75){
				return "NNE";
		}else if (deg>33.75 && deg<56.25){
				return "ENE";
		}else if (deg>56.25 && deg<78.75){
				return "E";
		}else if (deg>78.75 && deg<101.25){
				return "ESE";
		}else if (deg>101.25 && deg<123.75){
				return "ESE";
		}else if (deg>123.75 && deg<146.25){
				return "SE";
		}else if (deg>146.25 && deg<168.75){
				return "SSE";
		}else if (deg>168.75 && deg<191.25){
				return "S";
		}else if (deg>191.25 && deg<213.75){
				return "SSW";
		}else if (deg>213.75 && deg<236.25){
				return "SW";
		}else if (deg>236.25 && deg<258.75){
				return "WSW";
		}else if (deg>258.75 && deg<281.25){
				return "W";
		}else if (deg>281.25 && deg<303.75){
				return "WNW";
		}else if (deg>303.75 && deg<326.25){
				return "NW";
		}else if (deg>326.25 && deg<348.75){
				return "NNW";
		}else{
				 return "N";
		}
},


	roundValue: function(temperature) {
		return parseFloat(temperature).toFixed(1);
}

})

[sdetweil]

@drstang I will look at it later

BUT, in the short term

draw this on a piece of paper

and then label each with the div/span/…

then add the variable names

so you can see the relationship.

if you can do this with a text editor and html tags then it might make even MORE sense

<div>   <!-- wrapper --> 
     <div>....... </div> 

etc

I have a little helper function which does all the little things u need all in one stmt

// create document element worker
	createEl : function (type, id, className, parent, value) {
		var el= document.createElement(type)
		if(id)
			el.id = id
		if(className)
			el.className = className
		if(parent)
			parent.appendChild(el)
		if(value) {
			var e = document.createTextNode(value)
			el.appendChild(e)
		}

		return el
	},

used like this

	getDom: function() {
		var wrapper = this.createEl("div",null,null,null,null);
		if(this.suspended==false){

			if(Object.keys(this.active_birthdays).length > 0) {

				let counter = 0

				// create your table here
				var table = this.createEl("table", "birthday-table","TABLE", wrapper, null);

				// create table header here, array of column names

				var table_header = this.createTableHeader(table, null, [" "," "])

				// create looped row section
				var tBody = this.createEl('tbody', "birthday-tbody", "TBODY", table, null);

				var first_time_for_birthday = {}

				for(var birthday of Object.keys(this.active_birthdays)) {

					if(this.config.maxEntries===0 || counter<this.config.maxEntries){

						first_time_for_birthday[birthday]=true

						for(var person of this.active_birthdays[birthday]) {
							if(this.config.maxEntries===0 || counter<this.config.maxEntries){
								// create looped row section
								var bodyTR = this.createEl('tr', null, "TR-BODY",tBody, null);

								let now = moment()
								let entrie = moment(birthday,this.day_month_mask)

								let ageInfo=this.config.ageFormat.length? this.config.ageFormat.replace('n',person.age):person.age
								let bdInfo=this.config.dateFormat.length? person.birthday_moment.format(this.config.dateFormat):man_getting_massage_light_skin_tone: 

see my birthdaylist module
https://github.com/sdetweil/birthdaylist

see the getDom() function

and just to clear things… updateDom() tells MM there IS new content available
which causes a call to getDom() to GET the content

[drstang]

@sdetweil

Thanks! I’ll give that a try!

[mumblebaj]

@drstang any chance you can share a sample of the data?

[drstang]

@mumblebaj

The data I get back is just numerals, with the exception of wind direction, which I convert to cardinal values :

(temp) 48.6
(wind speed) 2.2
(wind direction) NNE
(feels like) 48.6
(daily rain) 0

Although with @sdetweil help, and using conditionals, I’m able to see my data on the MM now!