Trying to write my own Module...

[nbrenn]

This is awesome.

A few clarifying questions:

• Is the purpose of the xhttp.open("GET"... line to make the API call to the website? Is this when the connection is made to the XML page?

• So, you’re going through each "channel" and creating a row in the table for each channel? And then for each channel’s name and wattage, a data object is created?

• If I didn’t have any .css file, would the data still show up?

Thanks for the clarifications, and again, thanks for the great support. This community is top-notch!

[strawberry 3.141]

@nbrenn

1. yes the xmlhttprequest is also better known as ajax request
2. for each channel a row will be created and for name and watts a column will be created with their specific values
3. the data will still be displayed, but without any custom styling

[nbrenn]

I’m trying to display just the names where the watts that are != 0. I want both the values greater than 0 and the values less than 0 (in order to include the negative values from the solar generation).

I attempted to modify the getDom. It is displaying every names in the .XML and shows the watts value only if it is != 0. But how do I also remove the names that are 0? The output currently looks like the following:

Power Panel        66
Outlets            20
Heat Pump
Oven   
East Solar Panel  -70
West Solar Panel  -50

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++){
                if(channels[i].children[n].tagName === "name" || channels[i].children[n].tagName === "watts"){
                var element = document.createElement("td");
                element.classList.add(channels[i].children[n].tagName);
                if (channels[i].children[n].textContent != 0){
			element.innerHTML = 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;
   },

[mochman]

Looks like you need to modify your other if/then statement. The one you’ve modified checks both the name and watts to see if they are !=0. Since the name always !=0, it’s displayed.

[nbrenn]

It looks like the values are not updating. (The wattage values didn’t change at all overnight).

Should the line:

setInterval(this.getCurrentData(), this.config_interval);

be changed to:

setInterval(this.getCurrentData(), this.interval);

Are we calling the interval variable in the config incorrectly?

Thanks!

[strawberry 3.141]

@nbrenn this.config.interval

[nbrenn]

For posterity, I modified the if statement as follows, to remove the row items that have a 0 for wattage:

if (channels[i].children[n].textContent != 0) {
     element.innterHTML = channels[i].children[n].textContent;
     row.appendChild(element);
     table.appendChild(row);
}
else {
     table.removeChild(row);
}

[mochman]

Glad it all worked out for you!

[nbrenn]

I’m working on getting historical data (my API has a function getHistoricalData). The XML looks like the following:

<Time Time="2016-11-03 00:00:00">
<channel channel="194882" name="Main Power Main Panel">
<kWh>0.319</kWh>
</channel>
<channel channel="194885" name="Outlet 1">
<kWh>0.000</kWh>
</channel>
<channel channel="194886" name="Solar Panel 1">
<kWh>-5.737</kWh>
</channel>
<channel channel="194887" name="Solar Panel 2">
<kWh>-4.877</kWh>
</channel>

The difference between this XML output, and the XML output from my getCurrentData call, is that name is not it’s own element. With the old function, <name> was in brackets. Now, it is name = ....

Would be getDom be the same as it was for getCurrentData, or is it different since it’s name= and not it’s own <name> ... </name>

[mochman]

You’re going to have to modify the code to get that info. Take a look here for info on how it’s done.