Trying to write my own Module...

[strawberry 3.141]

@nbrenn

Assuming xml is the xml file you get as response from the server

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

for(var i = 0; i < channels.length; i++){
  for(var n = 0; n < channels[i].children.length; n++){
    if(channels[i].children[n].tagName === "name" || channels[i].children[n].tagName === "watts"){
      console.log(channels[i].children[n].textContent);
    }
  }
}

will ouput

"Main Power Main Panel"
"-9"
"West Solar 1"
"-165"
"West Solar 2"
"-143"
"Both Bathroom Outlets"
"0"
"1st Floor Lights"
"0"

[ooom416354]

I am kind of in the same boat. I actually have an old JS file which would return data in JSON format using the MTA API for the MM1. This allowed me to see if my train was delayed or not before leaving the house. I am trying to figure out an easy way to port to over to the new mirror but I am not at all a JavaScript programmer. If anyone would like to have a look at the current code for the MM1 and maybe try to port it over it might help some folks who live in the NYC area. Or if anyone knows if there is a current module which takes JSON results and displays them on the screen I can try to mock that up to integrate this. Thanks!

[nbrenn]

@strawberry-3.141 Thanks for the snippet! I have a better idea of how to extract the data from the XML with your example.

If I want to simply output what you have provided in your post, would I need to simply put your snippet into my getDom() function and add the .name to my .css file (similar to how I have the .watts)?

So I know that’s probably incorrect, but I just tried it and an error returned:
Cannot read property getElementsByClassName of null. I think that I am having trouble understanding how to create the div object for which to add in the data.

[cowboysdude]

@nbrenn post what you’ve rewritten so they can better understand where your error may be and what I do [whcn I added humidity to the stock weather app] was to look at other modules and pick it apart to see how they were using div and such for styling to better get an understanding how it fit together. These guys are awesome, they like to help!

Actually posting what you have now would help me too! :) I’m trying to create something myself.

[strawberry 3.141]

@nbrenn I’m assuming that you saved your server response into this.xml

getDom: function(){
  var wrapper = document.createElement("div");

  if(this.xml){
    var channels = this.xml.getElementsByTagName("channel");
    for(var i = 0; i < channels.length; i++){
      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("div");
          element.classList.add(channels[i].children[n].tagName);
          element.innerHTML = channels[i].children[n].textContent;
          wrapper.appendChild(element);
        }
      }
    }
  } else {
    wrapper.innerHTML = "NO DATA";
  }
  return wrapper;
}

this would create two div container for every channel one for the name and the other for watts. each of them would have the css class .name or .watts

[nbrenn]

Thanks for the great support.

I currently have no errors with what you’ve helped provide me with. However, it displays the else condition, and NO DATA.

Right now, my MMM-EMonitor.js looks like the following:

Module.register ("MMM-EMonitor", {
    
    //default module config.
    defaults: {
        // Insert defaults here
        interval: 900000 // Every 15 mins
    },
    
    getStyles: function() {
        return ["MMM-EMonitor.css"];
    },
    
    // Define the start sequence
    start: function() {
        Log.log("Starting module: " + this.name);
        
        //this.securitykey = REDACTED;
        this.url = 'https://api.emonitor.us/location/getCurrentData?security_key=REDACTED';
        this.getCurrentData(this);
    },
    
   getCurrentData: function(that) {
       that.sendSocketNotification('GET-CURRENT-DATA', that.url);
       setTimeout(that.getCurrentData, that.config.interval, that);
    },
    

   getDom: function(){
 	 var wrapper = document.createElement("div");

  	if(this.xml){
   	 var channels = this.xml.getElementsByTagName("channel");
   	 for(var i = 0; i < channels.length; i++){
    	   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("div");
          	element.classList.add(channels[i].children[n].tagName);
          	element.innerHTML = channels[i].children[n].textContent;
          	wrapper.appendChild(element);
        	}
      	}
    	}
  	} else {
    		wrapper.innerHTML = "NO DATA";
  	}
  	return wrapper;
}
});

and my css looks like the following:

.MMM-EMonitor .centered {
    text-align: center;
}

Like I mentioned, the NO DATA is showing up. The security key is working, and returns the XML which I have in my original post.

[mochman]

You don’t have this.xml defined anywhere in your script. If you look at @strawberry-3-141’s post, it says:

I’m assuming that you saved your server response into this.xml

You need to create a function that uses the URL and saves that data in a variable called xml. Since your program never does that, this.xml isn’t defined so your if/else always goes to “NO DATA”.

Why do you have

getCurrentData: function(that) {
       that.sendSocketNotification('GET-CURRENT-DATA', that.url);
       setTimeout(that.getCurrentData, that.config.interval, that);
    },

in your program? Did you just see it in another persons code? This code snippet sends your URL to node_helper.js. Are you using that node_helper to pull the XML data from the website? If so, you’re going to need a socketNotificationReceived function to get the data and put it into the xml variable.

The modules documentation shows you some examples of that.

[nbrenn]

Ahh, that makes sense. I do not have a node_helper.js, and I had the getCurrentData function because I tried to replicate a different module. I will remove these lines of code since they serve no purpose for me at the moment.

I’ll try to take a look at examples to see how to save the data into the xml variable, so that this.xml can be used.

[mochman]

MMM-EMonitor.js

Module.register ("MMM-EMonitor", {

    //default module config.
    defaults: {
        // Insert defaults here
        interval: 900000, // Every 15 mins
        security_key: null,
        animationSpeed: 1000
    },

    getStyles: function() {
        return ["MMM-EMonitor.css"];
    },

    // Define the start sequence
    start: function() {
        Log.log("Starting module: " + this.name);
        this.loaded = false;
        this.xml = null;
        this.url = 'https://api.emonitor.us/location/getCurrentData?security_key=';
        setInterval(this.getCurrentData(), this.config_interval);
    },

   getCurrentData: function() {
        var self = this;
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                        self.xml = self.parseXML(this.responseText);
                        self.loaded = true;
                        self.updateDom(self.config.animationSpeed);
                }
        };
        xhttp.open("GET", this.url+this.config.security_key, true);
        xhttp.send();
    },


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

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

});

Your config.js should have:

{
                        module: 'MMM-EMonitor',
                        position: 'top_left',
                        config: {
                                security_key: 'XXXXXXXXXXXXXXX'  //your security key
                        }
                }

This just displays everything in a large table. You may want to modify the for loop to not display data when the wattage is 0, that should get rid of a bunch of rows.

[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!