Mercurial > code > home > repos > light9

<!doctype html>
<html>
  <head>
    <title>device control</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/paper-listbox/paper-listbox.html">
    <link rel="import" href="/lib/paper-item/paper-item.html">
    <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
    <link rel="import" href="../light9-collector-client.html">

    <script src="/lib/d3/build/d3.min.js"></script>
    <script src="/lib/N3.js-pull61/browser/n3-browser.js"></script>
    <script src="/lib/async/dist/async.js"></script>
    <script src="/lib/underscore/underscore-min.js"></script>
    <link rel="import" href="../rdfdb-synced-graph.html">
    <link rel="import" href="/resource-display.html">
    <link rel="import" href="/light9-color-picker.html">
  </head>
  <body>

    <dom-module id="light9-listbox">
      <template>
        <style>
         paper-listbox {
             --paper-listbox-background-color: none;
             --paper-listbox-color: white;
             --paper-listbox: {
                 /* measure biggest item? use flex for columns? */
                 column-width: 9em;
             }
         }
         paper-item {
             --paper-item-min-height: 0;
             --paper-item: {
                 display: block;
                 border: 1px outset #0f440f;
                 margin: 0 1px 5px 0;
                 background: #0b1d0b;
             }
         }
        </style>
        <paper-listbox id="list"
                       selected="{{value}}"
                       attr-for-selected="uri"
                       on-focus-changed="selectOnFocus"
        >
          <paper-item on-focus="selectOnFocus">None</paper-item>
          <template is="dom-repeat" items="{{choices}}">
            <paper-item on-focus="selectOnFocus" uri="{{item.uri}}">{{item.label}}</paper-item>
          </template>
        </paper-listbox>

      </template>
      <script>
       HTMLImports.whenReady(function () {
           Polymer({
               is: "light9-listbox",
               properties: {
                   choices: { type: Array },
                   value: { type: String, notify: true },
               },
               observers: ['onValue(value)'],
               selectOnFocus: function(ev) {
                   if (ev.target.uri === undefined) {
                       // *don't* clear for this, or we can't cycle through all choices (including none) with up/down keys
                       //this.clear();
                       //return;
                   }
                   this.value = ev.target.uri;

               },
               onValue: function(value) {
                   if (value === null) {
                       this.clear();
                   }
               },
               clear: function() {
                   this.async(function() {
                       this.querySelectorAll('paper-item').forEach(
                           function(item) { item.blur(); });
                       this.value = undefined;
                   }.bind(this));

               },

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

    <dom-module id="light9-live-control">
      <template>
        <style>
         #colorControls {
             display: flex;
             align-items: center;
         }
         #colorControls > * {
             margin: 0 3px;
         }
         #colorControls paper-slider {

         }
         paper-slider { width: 100%; height: 25px; }
        </style>

        <style is="custom-style">
         paper-slider {
             --paper-slider-knob-color: var(--paper-red-500);
             --paper-slider-active-color: var(--paper-red-500);

             --paper-slider-font-color: white;
             --paper-slider-input: {
                 width: 75px;

                 background: black;
             }
         }

        </style>

        <template is="dom-if" if="{{deviceAttr.useSlider}}">
          <paper-slider min="0"
                        max="{{deviceAttr.max}}"
                        step=".001"
                        editable
                        content-type="application/json"
                        value="{{sliderWriteValue}}"
                        immediate-value="{{immediateSlider}}"></paper-slider>
        </template>
        <template is="dom-if" if="{{deviceAttr.useColor}}">
        <div id="colorControls">
          <button on-click="goBlack">0.0</button>
          <light9-color-picker color="{{value}}"></light9-color-picker>

        </div>
        </template>
        <template is="dom-if" if="{{deviceAttr.useChoice}}">
          <light9-listbox choices="{{deviceAttr.choices}}" value="{{value}}">
          </light9-listbox>
        </template>

      </template>

    </dom-module>

    <dom-module id="light9-live-device-control">
      <template>
        <style>
         .device {
             border: 2px solid #151e2d;
             margin: 4px;
             padding: 1px;
             background: #171717;  /* deviceClass gradient added later */
             break-inside: avoid-column;

         }
         .deviceAttr {
             border-top: 1px solid #272727;
             padding-bottom: 2px;
             display: flex;
         }
         .deviceAttr > span {

         }
         .deviceAttr > light9-live-control {
             flex-grow: 1;
         }
         h2 {
             font-size: 110%;
             padding: 4px;
         }
         .device, h2 {
         border-top-right-radius: 15px;
}

         #mainLabel {
             font-size: 120%;
             color: #9ab8fd;
             text-decoration: initial;
         }
        </style>
        <div class="device">
          <h2 style$="[[bgStyle]]">
            <resource-display id="mainLabel" graph="{{graph}}" uri="{{uri}}"></resource-display>
            a <resource-display minor graph="{{graph}}" uri="{{deviceClass}}"></resource-display>
          </h2>
          <template is="dom-repeat" items="{{deviceAttrs}}" as="dattr">
            <div class="deviceAttr">
              <span>attr <resource-display minor graph="{{graph}}" uri="{{dattr.uri}}"></resource-display></span>
              <light9-live-control device="{{uri}}" device-attr="{{dattr}}"></light9-live-control>
            </div>
          </template>
        </div>
      </template>
    </dom-module>

    <dom-module id="light9-live-controls">
      <template>
        <style>
         :host {
display: flex;
    flex-direction: column;
             }
         #preview {
             width: 100%;
         }
         #deviceControls {
             column-width: 400px;
             overflow-y: auto;
         }
         light9-live-device-control > div {
             break-inside: avoid-column;
         }
        </style>
        <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>

        <light9-collector-client self="{{client}}"></light9-collector-client>
        <h1>device control <button on-click="resendAll">resend all</button> <button on-click="clearAll">clear all</button></h1>

        <div id="save">
          <div>
            effect name: <input type="input" value="{{newEffectName::change}}">
            <button on-click="saveNewEffect">save new effect</button>
          </div>
          <textarea id="preview" value="{{effectPreview}}"></textarea>
        </div>

        <div id="deviceControls">
          <template is="dom-repeat" items="{{devices}}" as="device">
            <light9-live-device-control graph="{{graph}}" uri="{{device.uri}}"></light9-live-device-control>
          </template>
        </div>

      </template>
    </dom-module>

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

    <script src="live.js"></script>
  </body>
</html>
author	drewp@bigasterisk.com
date	Sat, 10 Jun 2017 02:07:39 +0000
parents	2362fcf5e220
children	7d2871f49806