MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Need help with refactoring charting for a fork of a module.

    Scheduled Pinned Locked Moved Development
    16 Posts 2 Posters 2.8k Views 2 Watching
    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.
    • S Offline
      sdetweil @jwilson5607
      last edited by sdetweil

      @jwilson5607 i forked the repo…

      so THIS will drive you NUTS…
      I don’t have a good api key yet

      the api doesn’t return an error if there is an error… it returns 200 (good)
      and THEN u have to check the results for the actual status…
      sloppy

      MMM-Beestat: request response error=null statusCode=200
      [05.05.2022 08:05.20.470] [LOG]   {
        "statusCode": 200,
      
         // my comment   see status is 200 (good)
        // but body.success=false, and body.data .error_message="API key is invalid.",
      
      // BUT it 'is' JSON, so the parse is successful...  just not any data u are expecting
        "body": "{\"success\":false,\"data\":{\"error_message\":\"API key is invalid.\",\"error_code\":1003}}",
      
      
        "headers": {
          "date": "Thu, 05 May 2022 13:05:20 GMT",
          "server": "Apache/2.4.29 (Ubuntu)",
          "vary": "Accept-Encoding",
          "content-length": "82",
          "connection": "close",
          "content-type": "application/json; charset=UTF-8"
        },
        "request": {
          "uri": {
            "protocol": "https:",
            "slashes": true,
            "auth": null,
            "host": "api.beestat.io",
            "port": 443,
            "hostname": "api.beestat.io",
            "hash": null,
            "search": "?api_key=12345667&resource=runtime_thermostat_summary&method=read_id&arguments=%7B%22attributes%22:%7B%22thermostat_id%22:0,%22date%22:%7B%22value%22:%22-3%20month%22,%22operator%22:%22%3E%22%7D%7D%7D",
            "query": "api_key=12345667&resource=runtime_thermostat_summary&method=read_id&arguments=%7B%22attributes%22:%7B%22thermostat_id%22:0,%22date%22:%7B%22value%22:%22-3%20month%22,%22operator%22:%22%3E%22%7D%7D%7D",
            "pathname": "/",
            "path": "/?api_key=12345667&resource=runtime_thermostat_summary&method=read_id&arguments=%7B%22attributes%22:%7B%22thermostat_id%22:0,%22date%22:%7B%22value%22:%22-3%20month%22,%22operator%22:%22%3E%22%7D%7D%7D",
            "href": "https://api.beestat.io/?api_key=12345667&resource=runtime_thermostat_summary&method=read_id&arguments=%7B%22attributes%22:%7B%22thermostat_id%22:0,%22date%22:%7B%22value%22:%22-3%20month%22,%22operator%22:%22%3E%22%7D%7D%7D"
          },
          "method": "GET",
          "headers": {}
        }
      }
      

      I changed your request like this in node_helper to get this info on the console

      request({ url: url, method: 'GET' }, function (error, response, body) {
              console.log(self.name+": request response error="+JSON.parse(error)+" statusCode="+response.statusCode)
                if (!error && response.statusCode == 200) {
                  console.log(JSON.stringify(response,null,2) );
                  var result = JSON.parse(body);
                    self.sendSocketNotification(notification, result);
                } else {
                    console.log("MMM-Beestat : Could not load data. error="+JSON.stringify(error));
                }
            });
      

      and then i looked in the dev console just to see
      Screenshot at 2022-05-05 08-12-44.pngi

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @jwilson5607
        last edited by sdetweil

        @jwilson5607 i changed the node_helper like this … I sent a pull request

        accept it and this will be added to your instance, then on pi, git pull to get that update locally
        restart magic mirror

          getData: function (notification, url) {
              var self = this;
              console.log('requesting:' + url);
              request({ url: url, method: 'GET' }, function (error, response, body) {
                console.log(self.name+": request response="+JSON.parse(error)+" statusCode="+response.statusCode)
                  if (!error && response.statusCode == 200) {
                    var result = JSON.parse(body);
                    console.log(JSON.stringify(result,null,2) );
                    if(result.success==='true'){
                      self.sendSocketNotification(notification, result.data);
                    } else {
                      console.log(self.name +" api request failed =>"+ result.data.error_message)
                    }
                  } else {
                      console.log("MMM-Beestat : Could not load data. error="+JSON.stringify(error));
                  }
              });
          },
        

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        J 1 Reply Last reply Reply Quote 0
        • J Offline
          jwilson5607 @sdetweil
          last edited by

          @sdetweil I see the data flowing into the logs now (I think it would be ok to comment out the console.log portion of this later on when I start parsing longer stretches of time). Thank you so much for looking at this! However, its now changing the title of the chart to Ecobee Runtime, and just sticking on loading… in the chart area. Screenshot 2022-05-06 210416.png

          I don’t see any reference in the mmm-beestat.js file that should put this there for the title. I have chart_title defined in the code and called via this snippet here on 118:

          title: { display: true, text: this.config.chart_title, padding: 5 }
          

          It also never displays the data. I use PowerShell for my day to day scripting work (IAM Systems Engineer) and Javascript is a whole new beast to me (one I am having difficulty adjusting to working with), but I know order of operations can be important. My guess is that it is not in this case, but unsure.

          I THINK its related to the getdata function and specifically how its treating the socketNotificationReceived potion of this.

           getData: function () {
                  var url = this.config.url + this.config.api_key + '&resource=ecobee_runtime_thermostat&method=get_aggregate_runtime&arguments={"ecobee_thermostat_id":'+this.config.ecobee_thermostat_id+',"time_period":"'+this.config.time_period+'","time_count":'+this.config.time_count+',"group_by":"'+this.config.group_by+'"}';
          
                  this.sendSocketNotification('beestat_runtime', url);
              },
          
              socketNotificationReceived: function(notification, payload) {
                  if (notification === "beestat_runtime") {
                      this.hist = payload;
                      this.loaded_history = true;
                  }
          

          Is this good or should it be different here? I see the original code is referencing in the node_helper file:

          self.sendSocketNotification(notification, result)
          

          And you updated it to result.data… In the received section it references payload. Would changing this to result be whats needed here?

          Let me reiterate again how much I appreciate your patience and assistance.

          S 3 Replies Last reply Reply Quote 0
          • S Offline
            sdetweil @jwilson5607
            last edited by sdetweil

            @jwilson5607 1st… you never showed your config.js ( without the apikey) , so I don’t see your title string

            console.log()… I usually add a if(this.config.debug) in front so you can turn them on when u need it via config.js
            add a debug:false, to the beestat.js to set it to false by default.

            as for title… did u use the debugger in the dev console… you could stop right there to see if the values are what you think they should be

            ‘payload’ is just a idea name…

            its the data in the notification, ie the payload

            doesn’t matter what its called on either side… use whatever term works in your head

            payload is just generic

            in got this notification, id = 1st parm, and the data/payload of the notification is in the 2nd parm…

            you have loading cause the code does this is getdom()

                    if (!this.loaded_history) {   // if data not received yet
                        outerWrapper.innerHTML = this.translate("LOADING");
                        outerWrapper.className = "dimmed light small";
                        return outerWrapper;
                    }
            

            but here is where this.loaded_history is set to true

            socketNotificationReceived: function(notification, payload) {
                    if (notification === "beestat_runtime") {
                        this.hist = payload;  // yay!!  we got some data from helper, save it
                        this.loaded_history = true; // indicate we  got data so getDom() will work
                    }
            

            that just says hey, if I get socketnotification events, call here
            and if the id string is “beestat_runtime” then
            save the data (payload) in the variable this.hist

            on the send of result.data, you only expected the DATA on the beetstat.js,. so that is what I had sent…

            using the debugger will REALLY make this a LOT easier… cause u will see the data as u process it…

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @jwilson5607
              last edited by

              @jwilson5607 I don’t have my apikey yet… so only get error

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @jwilson5607
                last edited by sdetweil

                @jwilson5607 also, hist is set to be an array []

                but the data comes back as objects

                "data": {  //  is an object
                               "29249277": {
                                    "runtime_thermostat_summary_id": 29249277,
                                    "user_id": 18261,
                                    "thermostat_id": XXXXXX,
                                    "date": "2022-03-07",
                                    "count": 124,
                                    "sum_compressor_cool_1": 0,
                                    "sum_compressor_cool_2": 0,
                                    "sum_compressor_heat_1": 0,
                                    "sum_compressor_heat_2": 0,
                                    "sum_auxiliary_heat_1": 3600,
                                    "sum_auxiliary_heat_2": 1335,
                                    "sum_fan": 8070,
                                    "sum_humidifier": 15,
                                    "sum_dehumidifier": 0,
                                    "sum_ventilator": 0,
                                    "sum_economizer": 0,
                                    "sum_degree_days": 0,
                                    "avg_outdoor_temperature": 33.5,
                                    "avg_outdoor_humidity": 83,
                                    "min_outdoor_temperature": 31.4,
                                    "max_outdoor_temperature": 36.3,
                                    "avg_indoor_temperature": 68.4,
                                    "avg_indoor_humidity": 38,
                                    "deleted": false
                                },
                                "29249278": {
                                    "runtime_thermostat_summary_id": 29249278,
                                    "user_id": 18261,
                                    "thermostat_id": XXXXXX,
                                    "date": "2022-03-08",
                                    "count": 287,
                                    "sum_compressor_cool_1": 0,
                                    "sum_compressor_cool_2": 0,
                                    "sum_compressor_heat_1": 0,
                                    "sum_compressor_heat_2": 0,
                                    "sum_auxiliary_heat_1": 11250,
                                    "sum_auxiliary_heat_2": 0,
                                    "sum_fan": 18150,
                                    "sum_humidifier": 5010,
                                    "sum_dehumidifier": 0,
                                    "sum_ventilator": 0,
                                    "sum_economizer": 0,
                                    "sum_degree_days": 0,
                                    "avg_outdoor_temperature": 32,
                                    "avg_outdoor_humidity": 75,
                                    "min_outdoor_temperature": 27.1,
                                    "max_outdoor_temperature": 36.5,
                                    "avg_indoor_temperature": 68.2,
                                    "avg_indoor_humidity": 36,
                                    "deleted": false
                                },
                }
                

                you can’t process that with a simple for loop… as u don’t have an array, buy you could MAKE an array with the

                function Object.keys(objectname)

                is will return a list (array) of all the high level object names in the input object, in your case
                [ “29249277”, “29249278”]

                and you could use it like this

                 Object.keys(this.hist).forEach(thermostat_id =>{
                             let thermostatinfo=this.hist[thermostat_id]
                                 xxx=     thermostatinfo.sum_auxiliary_heat_1 / 3600
                 })
                

                sent a pull request with this approach

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @sdetweil
                  last edited by

                  @jwilson5607 finally got my beestat apikey

                  one change

                  in node_helper, I tested the response for the literal ‘true’, not boolean true
                  change to

                               if(result.success==true){
                  

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  J 1 Reply Last reply Reply Quote 0
                  • J Offline
                    jwilson5607 @sdetweil
                    last edited by

                    @sdetweil Sorry for the delay - life got busier than normal for a while. I am extremely thankful for your help as this was beyond my current set of abilities. I’ve updated my code and verified that its working for me as expected. Thank you again, you’re amazing!

                    S 1 Reply Last reply Reply Quote 1
                    • S Offline
                      sdetweil @jwilson5607
                      last edited by

                      @jwilson5607 glad u got it working…

                      if I hadn’t done my own chartjs module, I would have had no clue,

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 2 / 2
                      • First post
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy