Mercurial > code > home > repos > homeauto

<!doctype html>
<html>
  <head>
    <title>pilight</title>
    <meta charset="utf-8" />
    <script src="//bigasterisk.com/lib/jquery-2.0.3.js"></script>
    <script src="//bigasterisk.com/lib/platform/0.2.3/platform.js"></script>
    <script src="//bigasterisk.com/lib/polymer/0.2.3/polymer.js"></script>
    <link rel="import" href="static/big-picker.html">
    <style>
      body {
       background: #5c5c5c;
       color: #E2E2E2;
     }
    </style>
  </head>
  <body>

    <polymer-element name="led-output" attributes="url color">
      <!--
      First fetches the first led color and writes it on the color
      attribute, then whenever color changes, calls PUT <url> with color
      string as the body, but also avoids sending many repeated calls
      to url while the first one is still in progress -->
      <template>
        {{status}}
      </template>
      <script>Polymer('led-output', {
          created: function() {
              this.pending = {}; // url: data
              this.inflight = false;
              this.enableWrites = false;

              var retryFetch = function (triesLeft) {
                  if (triesLeft < 1) {
                      return;
                  }
                  $.ajax({
                      type: "GET",
                      url: "led",
                      dataType: "json",
                      success: function(result) {
                          if (!result.length) {
                              setTimeout(function() {
                                  retryFetch(triesLeft - 1);
                              }.bind(this), 100);
                              return;
                          }
                          this.color = result[0];
                          this.enableWrites = true;
                      }.bind(this)
                  });
              }.bind(this);
              retryFetch(5);
          },
          colorChanged: function() {
              if (!this.enableWrites) {
                  return;
              }
              this.pending["led"] = this.color;
              this.sendMore();
          },
          sendMore: function() {
              if (this.inflight) {
                  return;
              }
              var urls = Object.keys(this.pending);
              if (!urls.length) {
                  return;
              }
              var url = urls.pop();
              var data = this.pending[url];
              delete this.pending[url];

              this.status = "Sending...";
              this.inflight = true;
              $.ajax({
                  type: "PUT",
                  url: url,
                  data: data,
                  success: function() {
                      this.status = "";
                  }.bind(this),
                  error: function() {
                      this.status = "Send failed";
                  }.bind(this),
                  complete: function() {
                      this.inflight = false;
                      this.sendMore();
                  }.bind(this)
              });
        }
      });
      </script>

    </polymer-element>

    <polymer-element name="pilight-page" noscript>
      <template>
        LED color:
        <big-picker hex="{{c1}}"></big-picker>
        <led-output which="led" color="{{c1}}"></led-output>
      </template>
    </polymer-element>

    <pilight-page></pilight-page>

    <div>
      DHT: <span id="dht"></span>
      <div id="temperature" style="background: #034c4d"></div>
      <div id="humidity" style="background: #663d66"></div>
    </div>

    <script>
    $(function() {
        function update() {
            $.getJSON("dht", function(result) {
                result['tempF'] = 1.8 * result['temperature'] + 32;
                result['time'] = new Date().toLocaleString();
                $("#dht").text(JSON.stringify(result));
                $("#temperature")
                    .text(result['tempF'] + " deg F")
                    .css('width', result['temperature'] * 10);
                $("#humidity")
                    .text(result['humidity'] + " humidity")
                    .css('width', result['humidity'] * 10);
            });
        }

        function loop() {
            update();
            setTimeout(function() {
                requestAnimationFrame(loop);
            }, 2000);
        }
        $.getJSON("dht", loop);
    });
    </script>
  </body>
</html>
author	drewp <drewp@bigasterisk.com>
date	Wed, 16 Jul 2014 22:58:58 -0700
parents	8d6e92564fe8
children