MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.20.0 is available! For more information about this release, check out this topic.

    Trying to write my own Module...

    Development
    5
    31
    14183
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • nbrenn
      nbrenn last edited by nbrenn

      Hi all,

      I am trying to write my own module from scratch and I am a bit of a crossroads of confusion. I have attached my .js code and my .css code is below. I am stuck trying to tie it all together. I have the output from a generic API call to the website I am getting data from, and I have a basic .js and .css file. However, with my lack of javascript experience, I am having trouble getting to the next level.

      The first basic thing I am trying to do is to display the current Watts that is output from the API call (the output of the call is shown below). I have the basic format of the .js file, and a basic format for my .css file. I was wondering if anyone can take a look at my .js file and let me know what else is needed in order to get something basic working (like just displaying the wattage).

      My .css file only contains the following:

      .watts {
      	font-size: 75%;
      	line-height: 65px;
      	display: inline-block;
      }
      

      The non-JSON format when I go to the following website (https://api.emonitor.us/location/getCurrentData?security_key=xxxxx) is as follows:

      <GetCurrentData>
      <Location Location="2744">
      <name>Home</name>
      <address>REDACTED</address>
      <city>REDACTED</city>
      <state>REDACTED</state>
      <country>USA</country>
      <zip>REDACTED</zip>
      <timezone>REDACTED</timezone>
      <data>
      <channelData>
      <channel channel="194882">
      <channelNumber>1 + 2</channelNumber>
      <eMonitorSerial>14881</eMonitorSerial>
      <name>Main Power Main Panel</name>
      <circuitType>Mains</circuitType>
      <phase/>
      <CTSize>150</CTSize>
      <BreakerSize>200</BreakerSize>
      <timestamp>2016-12-22 15:54:00</timestamp>
      <watts>-9</watts>
      </channel>
      <channel channel="194886">
      <channelNumber>5</channelNumber>
      <eMonitorSerial>14881</eMonitorSerial>
      <name>West Solar 1</name>
      <circuitType>Solar Panels</circuitType>
      <phase/>
      <CTSize>20</CTSize>
      <BreakerSize>20</BreakerSize>
      <timestamp>2016-12-22 15:54:00</timestamp>
      <watts>-165</watts>
      </channel>
      <channel channel="194887">
      <channelNumber>6</channelNumber>
      <eMonitorSerial>14881</eMonitorSerial>
      <name>West Solar 2</name>
      <circuitType>Solar Panels</circuitType>
      <phase/>
      <CTSize>20</CTSize>
      <BreakerSize>20</BreakerSize>
      <timestamp>2016-12-22 15:54:00</timestamp>
      <watts>-143</watts>
      </channel>
      <channel channel="194888">
      <channelNumber>7</channelNumber>
      <eMonitorSerial>14881</eMonitorSerial>
      <name>Both Bathroom Outlets</name>
      <circuitType>Outlets/Lighting</circuitType>
      <phase/>
      <CTSize>20</CTSize>
      <BreakerSize>20</BreakerSize>
      <timestamp>2016-12-22 15:54:00</timestamp>
      <watts>0</watts>
      </channel>
      <channel channel="194889">
      <channelNumber>8</channelNumber>
      <eMonitorSerial>14881</eMonitorSerial>
      <name>1st Floor Lights</name>
      <circuitType>Lighting</circuitType>
      <phase/>
      <CTSize>20</CTSize>
      <BreakerSize>15</BreakerSize>
      <timestamp>2016-12-22 15:54:00</timestamp>
      <watts>0</watts>
      </channel>
      </channelData>
      </data>
      </Location>
      <totalRecords>107</totalRecords>
      </GetCurrentData>
      

      Thanks for looking!

      The .js file I have written so far is below:

      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.info("Starting module: " + this.name);
              
              this.securitykey = REDACTED;
              this.url = 'https://api.emonitor.us/location/getCurrentData?security_key=' + this.SecurityKey
              this.getCurrentData(this);
          },
          
         getCurrentData: function(that) {
             that.sendSocketNotification('GET-CURRENT-DATA', that.url);
             setTimeout(that.getCurrentData, that.config.interval, that);
          },
          
          getDom: function() {
              var wrapper = null;
              
              if (this.loaded) { 
                  wrapper = document.createElement('div');
                      wrapper.className = 'data table';
      
      1 Reply Last reply Reply Quote 0
      • mochman
        mochman Module Developer last edited by

        Can you paste your MMM-Emonitor.js using markdown? It looks like you’re missing a bunch of code.

        So the API sends you XML data and you want to pull out the wattage? Just the first one or all of them?

        nbrenn 1 Reply Last reply Reply Quote 0
        • nbrenn
          nbrenn @mochman last edited by nbrenn

          @mochman
          Thanks for the link to the markdown page! My OP is edited accordingly. I do understand that I’m missing necessary code in order to make it function. I’m just not really sure what.

          I would like to print the <name> and <watts> if possible. The XML returned has a lot more data, but for the sake of this post, I cut it down to just include the first three items. I would like to print all three.

          1 Reply Last reply Reply Quote 0
          • mochman
            mochman Module Developer last edited by mochman

            Your code seems to abruptly end in the middle of the getDom() function, but from what I see, it looks like you are sending the URL to a node_helper.js that I assume will get the data you want.

            My recommendation would be to look at this page and see how to parse the XML to take out what you want. You then can use this data to create a simple table to display each <name> and <watts> in the getDom() function. I don’t think you’ll need a node_helper.js to do this though. You can probably just do it in the main .js file. Unless you’re running into a Access-Control-Allow-Origin error. Then you can get around it by using node_helper.js

            Another way people have done this has been described here.

            nbrenn 1 Reply Last reply Reply Quote 0
            • nbrenn
              nbrenn @mochman last edited by nbrenn

              @mochman
              Thanks for the response and the examples. Are some of the XML methods in the tutorial you linked to, often used in Mirror modules?

              I wasn’t planning on using a node_helper.js and my code does abruptly end in the middle of the getDOM(). I got stuck when trying to find out how to extract specifics from the XML, like <name> and <watts>.

              Do you know of any other good module examples that would have similar XML structure, where specific objects were extracted from?

              strawberry 3.141 1 Reply Last reply Reply Quote 0
              • strawberry 3.141
                strawberry 3.141 Project Sponsor Module Developer @nbrenn last edited by

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

                Please create a github issue if you need help, so I can keep track

                nbrenn 1 Reply Last reply Reply Quote 0
                • ooom416354
                  ooom416354 last edited by

                  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!

                  1 Reply Last reply Reply Quote 0
                  • nbrenn
                    nbrenn @strawberry 3.141 last edited by 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 strawberry 3.141 2 Replies Last reply Reply Quote 0
                    • cowboysdude
                      cowboysdude Module Developer @nbrenn last edited by 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.

                      1 Reply Last reply Reply Quote 0
                      • strawberry 3.141
                        strawberry 3.141 Project Sponsor Module Developer @nbrenn last edited by 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

                        Please create a github issue if you need help, so I can keep track

                        1 Reply Last reply Reply Quote 1
                        • 1
                        • 2
                        • 3
                        • 4
                        • 1 / 4
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy