Trying to write my own Module...

nbrenn

How would I go about formatting my table? I would like to have each column have it’s own title, like “Load” and “kWh”. Is it also possible to put them into a tabulated table?

My getDOM currently looks like the following:

getDom: function(){
        var wrapper = document.createElement("div");
        if(!this.loaded) {
                wrapper.innerHTML = "Loading...";
                return wrapper;
        }
        if(this.xml !== null){
	 var table = document.createElement("table");
         table.classList.add("xsmall", "table");
         var channels = this.xml.getElementsByTagName("channel");
         for(var i = 0; i < channels.length; i++){
	   var row = document.createElement("tr");
           for(var n = 0; n < channels[i].children.length; n++){
		name = channels[i].getAttribute('name');
		if(channels[i].children[n].tagName === "kWh"){
                var element = document.createElement("td");
		element.classList.add(channels[i].children[n].tagName);
		if (channels[i].children[n].textContent != 0){
			element.innerHTML = name + channels[i].children[n].textContent;
			row.appendChild(element);
			table.appendChild(row);
			}
		}
		
		
           
	   
           }
         }
         wrapper.appendChild(table);
        } else {
                console.log("Returned no Data");
                wrapper.innerHTML = "NO DATA";
        }
        return wrapper;
   },

   parseXML: function(xmlStr){
        return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
   }

mochman

You should just need to put

var row = document.createElement("tr");
var header = document.createElement("th");
var header2 = document.createElement("th");
header.innerHTML = "Load";
row.appendChild(header);
header2.innerHTML = "KWh";
row.appendChild(header2);
table.appendChild(row);

before

var channels = this.xml.getElementsByTagName("channel");

You can add a title by modifying your config.js file to add a header.
The documentation for that is here.

nbrenn

@mochman Thanks a lot! I’ll take a look at the documentation and try your suggestion.

Have a good weekend!

nbrenn

@mochman I have another question. As shown below in the attached image, I am appending the name to the kWh values. How do I put the name into the Load column and the numbers into their kWh column?

In this case, the “name” is in the same object as the channel, so that’s why I extracted it the way I do in my code… I have the name as a variable, but I can’t seem to put it into it’s own column.

0_1484344461715_loadkhw2 (1).jpg

Code:

   getDom: function(){
        var wrapper = document.createElement("div");
        if(!this.loaded) {
                wrapper.innerHTML = "Loading...";
                return wrapper;
        }
        if(this.xml !== null){
	 var table = document.createElement("table");   
	 var row = document.createElement("tr");   
	 var header = document.createElement("th");
	 var header2 = document.createElement("th");
	 header.innerHTML = "Load";
	 row.appendChild(header);
	 header2.innerHTML = "kWh";
	 row.appendChild(header2);
	 table.appendChild(row);

	 table.classList.add("xsmall", "table");
         var channels = this.xml.getElementsByTagName("channel");	 

         for(var i = 0; i < channels.length; i++){	   	
		var row = document.createElement("tr");
           for(var n = 0; n < channels[i].children.length; n++){
		name = channels[i].getAttribute('name');
		if(channels[i].children[n].tagName === "kWh"){
                	var element = document.createElement("td");
			element.classList.add(channels[i].children[n].tagName);
		if (channels[i].children[n].textContent != 0){
			element.innerHTML = name + " " + channels[i].children[n].textContent;

			row.appendChild(element);
			table.appendChild(row);
			}
		}          	   
           }
         }
         wrapper.appendChild(table);
        } else {
                console.log("Returned no Data");
                wrapper.innerHTML = "NO DATA";
        }
        return wrapper;
   },

nbrenn

I am trying to begin the next iteration of my module.

I have the real-time energy usage, and monthly power usage being displayed in a list in the top left and right corners of my mirror.

I am hoping to do something similar to the following:

Take a value from my Monthly Usage, and then display it in the center of my mirror with a sentence like, “Your monthly power usage is: XXX Watts”.

Since this monthly energy usage module is in the top right of my mirror, how would I extract a value or variable from that module and then display it into the center of the mirror.

So basically, I have a long list of power usages being displayed on my mirror, but I would like to display a sentence or two about that data on another part of my mirror - extracting a value from the module and displaying it in the center of the mirror. Can this be done using the same .js code in the module, and just modifying the .css?

strawberry 3.141

@nbrenn the easiest solution without messing with the css around is to create a second module, which is litening on the broadcasts you will send with the data in it from your module you already have