Mercurial > code > home > repos > light9

<!doctype html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/style.css">
    <script src="/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="/lib/polymer/polymer.html">
    <link rel="import" href="/lib/paper-slider/paper-slider.html">
    <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
  </head>
  <body>

    <dom-module id="light9-collector-client">
      <template>
        <iron-ajax url="/collector/attrs" method="PUT" id="put"></iron-ajax>
        <span>{{status}}</span>
      </template>
      <script>
       HTMLImports.whenReady(function () {
           Polymer({
               is: "light9-collector-client",
               properties: {
                   status: {type: String, value: 'init'},
                   clientSession: {value: ""+Date.now()},
                   this: {type: Object, notify: true}
               },
               ready: function() {
                   var self = this;
                   self.this = self;
                   self.$.put.addEventListener(
                       'error', function() { self.status = 'err'; });
                   self.$.put.addEventListener(
                       'request', function() { self.status = 'send'; });
                   self.$.put.addEventListener(
                       'response', function() { self.status = 'ok'; });
                   // collector gives up on clients after 10sec
                   setInterval(self.ping.bind(self), 9000);
                   self.status = 'ready';
               },
               ping: function() {
                   this.send([]);
               },
               send: function(settings) {
                   this.$.put.body = JSON.stringify({
                       "settings": settings,
                       "client": window.location.href,
                       "clientSession": this.clientSession});
                   this.$.put.generateRequest();
               }
           });
       });
      </script>
    </dom-module>

    <dom-module id="light9-live-control">
      <template>
        <style>
         paper-slider { width: 100%; }
        </style>

        <template is="dom-if" if="{{useSlider}}">
          <paper-slider min="0"
                        max="{{max}}"
                        step=".01"
                        editable
                        content-type="application/json"
                        immediate-value="{{immediateSlider}}"></paper-slider>
        </template>
        <template is="dom-if" if="{{useColor}}">
          <input type="color"
                 id="col"
                 on-input="onPickedColor"
                 value="{{pickedColor}}">
        </template>
      </template>
      <script>
       HTMLImports.whenReady(function () {
           Polymer({
               is: "light9-live-control",
               properties: {
                   client: {type: Object},
                   device: {type: String},
                   attr: {type: String},
                   max: {type: Number, value: 1},
                   immediateSlider: {notify: true, observer: "onChange"},
                   useSlider: {type: Boolean, computed: '_useSlider(attr)'},
                   useColor: {type: Boolean, computed: '_useColor(attr)'},
                   pickedColor: {observer: 'onPickedColor'},
               },
               ready: function() {
               },
               onPickedColor: function(ev) {
                   this.onChange(ev.target.value);
               },
               onChange: function(lev) {
                   this.client.send([[this.device, this.attr, lev]]);
               },
               _useSlider: function(attr) {
                   return attr != 'http://light9.bigasterisk.com/color';
               },
               _useColor: function(attr) {
                   return attr == 'http://light9.bigasterisk.com/color';
               },
           });
       });
      </script>
    </dom-module>

    <dom-module id="light9-live-controls">
      <template>
        <style>
        </style>
        <light9-collector-client this="{{client}}"></light9-collector-client>
        <h1>live</h1>

        <ul>
          <li>
            <h2>colorstrip</h2>
            <light9-live-control
                client="{{client}}"
                device="http://light9.bigasterisk.com/device/colorStrip"
                attr="http://light9.bigasterisk.com/color"
            ></light9-live-control>
          </li>
          <li>
            <h2>moving</h2>
            rx <light9-live-control
                   client="{{client}}"
                   device="http://light9.bigasterisk.com/device/moving1"
                   attr="http://light9.bigasterisk.com/rx" max="540"
               ></light9-live-control>
            ry <light9-live-control
                   client="{{client}}"
                   device="http://light9.bigasterisk.com/device/moving1"
                   attr="http://light9.bigasterisk.com/ry" max="240"
               ></light9-live-control>
            color <light9-live-control
                      client="{{client}}"
                      device="http://light9.bigasterisk.com/device/moving1"
                      attr="http://light9.bigasterisk.com/color"
                  ></light9-live-control>
          </li>
        </ul>
      </template>
      <script>
       HTMLImports.whenReady(function () {
           Polymer({
               is: "light9-live-controls",
               properties: {

               },
               ready: function() {

               },
           });
       });
      </script>
    </dom-module>

    <light9-live-controls></light9-live-controls>

  </body>
</html>
author	Drew Perttula <drewp@bigasterisk.com>
date	Mon, 30 May 2016 20:31:40 +0000
parents	d51014267bfd
children	ace07d2e971f