light9 Changeset - 6adeda46b71c

Changeset - 6adeda46b71c

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

drewp@bigasterisk.com - 9 years ago 2016-06-11 02:54:54
drewp@bigasterisk.com

/live page layout and features. it should be renamed to 'device control'
Ignore-this: a7fdcf485e22c76480ed99b7c5e3aae2

2 files changed with 44 insertions and 32 deletions:

light9/web/live/index.html

light9/web/live/live.coffee

0 comments (0 inline, 0 general)

light9/web/live/index.html

➞

Show inline comments

 <!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>

light9/web/live/live.coffee

➞

Show inline comments

@@ @@ -12,8 +12,13 @@ Polymer @@
   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 @@ Polymer @@
+    ]
   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 @@ Polymer @@
         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 @@ Polymer @@
             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)

0 comments (0 inline, 0 general)