Mercurial > code > home > repos > light9

changeset 1422:6adeda46b71c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
/live page layout and features. it should be renamed to 'device control' Ignore-this: a7fdcf485e22c76480ed99b7c5e3aae2
author drewp@bigasterisk.com
date Sat, 11 Jun 2016 02:54:54 +0000
parents 5c4a88bf24b4
children 6cc84beb84a4
files light9/web/live/index.html light9/web/live/live.coffee
diffstat 2 files changed, 44 insertions(+), 32 deletions(-) [+]
line wrap: on
line diff
--- a/light9/web/live/index.html	Sat Jun 11 02:49:32 2016 +0000
+++ b/light9/web/live/index.html	Sat Jun 11 02:54:54 2016 +0000
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
   <head>
-    <title></title>
+    <title>device control</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="/style.css">
     <script src="/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
@@ -22,13 +22,13 @@
     <dom-module id="light9-live-control">
       <template>
         <style>
-         paper-slider { width: 100%; }
+         paper-slider { width: 100%; margin: -19px 0; }
         </style>
 
         <template is="dom-if" if="{{deviceAttr.useSlider}}">
           <paper-slider min="0"
                         max="{{deviceAttr.max}}"
-                        step=".01"
+                        step=".001"
                         editable
                         content-type="application/json"
                         immediate-value="{{immediateSlider}}"></paper-slider>
@@ -38,7 +38,13 @@
                  id="col"
                  on-input="onPickedColor"
                  value="{{pickedColor}}">
+          <button on-click="goWhite">white</button>
+          <button on-click="goBlack">black</button>
         </template>
+        <template is="dom-if" if="{{deviceAttr.useChoices}}">
+          choices go here
+        </template>
+
       </template>
      
     </dom-module>
@@ -57,26 +63,36 @@
              border-top: 1px solid #ffffff26;
              margin-top: 6px;
              padding-top: 4px;
+             display: flex;
+         }
+         .deviceAttr > span {
+
+         }
+         .deviceAttr > light9-live-control {
+             flex-grow: 1;
          }
          h2 {
-             font-size: 122%;
+             font-size: 110%;
              padding: 4px;
              background: #1f1f1f;
          }
+         #mainLabel {
+             font-size: 120%; 
+             color: #9ab8fd;
+             text-decoration: initial;
+         }
         </style>
         <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
 
         <light9-collector-client self="{{client}}"></light9-collector-client>
-        <h1>live</h1>
+        <h1>device control <button on-click="resendAll">resend all</button></h1>
 
         <template is="dom-repeat" items="{{devices}}" as="device">
           <div class="device">
-            <h2><a href="{{device.uri}}">{{device.label}}</a></h2>
-            device is
-            <a href="{{device.deviceClass}}">{{device.deviceClass}}</a>
+            <h2><a id="mainLabel" href="{{device.uri}}">{{device.label}}</a> (device class <a href="{{device.deviceClass}}">{{device.deviceClass}}</a>)</h2>
             <template is="dom-repeat" items="{{device.deviceAttrs}}" as="dattr">
               <div class="deviceAttr">
-                attr <a href="{{dattr.uri}}">{{dattr.uri}}</a>
+                <span>attr <a href="{{dattr.uri}}">{{dattr.uri}}</a></span>
                 <light9-live-control
                     client="{{client}}"
                     device="{{device.uri}}"
@@ -86,23 +102,6 @@
           </div>
         </template>
         
-        <ul>
-        
-          <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>
-          
-          </li>
-        </ul>
       </template>
     </dom-module>
     
--- a/light9/web/live/live.coffee	Sat Jun 11 02:49:32 2016 +0000
+++ b/light9/web/live/live.coffee	Sat Jun 11 02:54:54 2016 +0000
@@ -12,8 +12,13 @@
   ready: ->
   onPickedColor: (ev) ->
     @onChange ev.target.value
+  goWhite: -> @onChange("#ffffff")
+  goBlack: -> @onChange("#000000")
   onChange: (lev) ->
-    @client.send([[@device, @deviceAttr.uri, lev]])
+    @lastSent = [[@device, @deviceAttr.uri, lev]]
+    @resend()
+  resend: ->
+    @client.send(@lastSent)
   
 Polymer
   is: "light9-live-controls"
@@ -25,6 +30,9 @@
     ]
   onGraph: ->
     @graph.runHandler(@update.bind(@))
+  resendAll: ->
+    for llc in @getElementsByTagName("light9-live-control")
+      llc.resend()
   update: ->
     U = (x) -> @graph.Uri(x)
 
@@ -36,7 +44,9 @@
         row = {uri: dev, label: (try
             @graph.stringValue(dev, U('rdfs:label'))
           catch
-            dev), deviceClass: dc}
+            words = dev.split('/')
+            words[words.length-1]
+            ), deviceClass: dc}
         row.deviceAttrs = []
         for da in _.sortBy(@graph.objects(dc, U(':deviceAttr')))
           dataType = @graph.uriValue(da, U(':dataType'))
@@ -45,16 +55,19 @@
             dataType: dataType
             showColorPicker: dataType == U(':color')
             }
-          if da == 'http://light9.bigasterisk.com/color'
+          if dataType == 'http://light9.bigasterisk.com/color'
             daRow.useColor = true
-            daRow.useSlider = false
+
+          else if dataType == U(':choice')
+            daRow.useChoice = true
+            daRow.choices = @graph.objects(da, U(':choice'))
           else
-            daRow.useColor = false
+
             daRow.useSlider = true
             daRow.max = 1
             if dataType == U(':angle')
               # varies
-              daRow.max = 360
+              daRow.max = 1
           
           row.deviceAttrs.push(daRow)