light9 Changeset - 2dde8da33662

Changeset - 2dde8da33662

Parent rev.

Child rev.

[Not reviewed]

default

0 4 0

Drew Perttula - 8 years ago 2017-06-02 07:32:58
drewp@bigasterisk.com

start making choice widgets on live
Ignore-this: ad54a94a02be707e2e497a03f19b7096

4 files changed with 105 insertions and 53 deletions:

light9/collector/device.py

light9/web/live/index.html

light9/web/live/live.coffee

light9/web/style.css

0 comments (0 inline, 0 general)

light9/collector/device.py

➞

Show inline comments

@@ @@ -94,12 +94,19 @@ def toOutputAttrs(deviceType, deviceAttr @@
     def fine16Attr(attr, scale=1.0):
         x = floatAttr(attr) * scale
         hi = _8bit(x)
         lo = _8bit((x * 255) % 1.0)
         return hi, lo
     def choiceAttr(attr):
         # todo
         if deviceAttrSettings.get(attr) == L9['g1']:
             return 3
         if deviceAttrSettings.get(attr) == L9['g2']:
             return 10
     if deviceType == L9['ChauvetColorStrip']:
         r, g, b = rgbAttr(L9['color'])
         return {
             L9['mode']: 215,
             L9['red']: r,
@@ @@ -112,13 +119,13 @@ def toOutputAttrs(deviceType, deviceAttr @@
         out = {
             L9['rotationSpeed']: 0, # seems to have no effect
             L9['dimmer']: 255,
             L9['colorChange']: 0,
             L9['colorSpeed']: 0,
             L9['goboShake']: _8bit(floatAttr(L9['goboShake'])),
-            L9['goboChoose']: _8bit(floatAttr(L9['mini15GoboChoice'])),
+            L9['goboChoose']: choiceAttr(L9['mini15GoboChoice']),
+        }
         out[L9['red']], out[L9['green']], out[L9['blue']] = rgbAttr(L9['color'])
         out[L9['xRotation']], out[L9['xFine']] = fine16Attr(L9['rx'], 1/540)
         out[L9['yRotation']], out[L9['yFine']] = fine16Attr(L9['ry'], 1/240)
         # didn't find docs on this, but from tests it looks like 64 fine steps takes you to the next coarse step

light9/web/live/index.html

➞

Show inline comments

@@ @@ -12,12 +12,13 @@ @@
     <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">
   </head>
   <body>
     <dom-module id="light9-live-control">
       <template>
@@ @@ -38,29 +39,35 @@ @@
                  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 is="dom-if" if="{{deviceAttr.useChoice}}">
           <select size="10">
             <template is="dom-repeat" items="{{deviceAttr.choices}}">
               <option>item {{item}}</option>
             </template>
           </select>
         </template>
       </template>
     </dom-module>
     <dom-module id="light9-live-controls">
     <dom-module id="light9-live-device-control">
       <template>
         <style>
          .device {
              border: 2px solid gray;
              border: 2px solid gray;
              margin: 9px;
              padding: 5px;
              background: #171717;
              break-inside: avoid-column;
+         }
          .deviceAttr {
              border-top: 1px solid #ffffff26;
              margin-top: 6px;
              padding-top: 4px;
              display: flex;
@@ @@ -78,16 +85,40 @@ @@
+         }
          #mainLabel {
              font-size: 120%;
              color: #9ab8fd;
              text-decoration: initial;
+         }
         </style>
         <div class="device">
           <h2>
             <resource-display id="mainLabel" graph="{{graph}}" uri="{{uri}}"></resource-display>
             (device class <resource-display graph="{{graph}}" uri="{{deviceClass}}"></resource-display>)
           </h2>
           <template is="dom-repeat" items="{{deviceAttrs}}" as="dattr">
             <div class="deviceAttr">
               <span>attr <resource-display 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>
          #preview {
              width: 100%;
+         }
          #deviceControls {
              column-width: 400px;
+         }
          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>
@@ @@ -95,26 +126,18 @@ @@
           <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>
         <template is="dom-repeat" items="{{devices}}" as="device">
           <div class="device">
             <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">
                 <span>attr <a href="{{dattr.uri}}">{{dattr.uri}}</a></span>
                 <light9-live-control
                     device="{{device.uri}}"
                     device-attr="{{dattr}}"></light9-live-control>
               </div>
             </template>
           </div>
         </template>
         <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>

light9/web/live/live.coffee

➞

Show inline comments

@@ @@ -16,25 +16,75 @@ Polymer @@
   ready: ->
   onPickedColor: (ev) -> @value = ev.target.value
   onSlider: -> @value = @immediateSlider
   goWhite: -> @value = "#ffffff"
   goBlack: -> @value = "#000000"
   onChoice: (ev) ->
     console.log('ch', ev)
   onChange: (value) ->
     @lastSent = [[@device, @deviceAttr.uri, value]]
     @resend()
   resend: ->
     window.gather(@lastSent)
   clear: ->
     if @deviceAttr.useColor
       @value = '#000000'
     else
       @value = @immediateSlider = 0
 Polymer
   is: "light9-live-device-control"
   properties:
     graph: { type: Object, notify: true }
     uri: { type: String, notify: true }
     label: { type: String, notify: true }
     deviceClass: { type: String, notify: true }
     deviceAttrs: { type: Array, notify: true }
   observers: [
     'onGraph(graph)'
+    ]
   onGraph: ->
     @graph.runHandler(@update.bind(@), "#{@uri} update")
   update: ->
     U = (x) => @graph.Uri(x)
     @zlabel = (try
         @graph.stringValue(@uri, U('rdfs:label'))
       catch
         words = @uri.split('/')
         words[words.length-1]
+        )
     @deviceClass = @graph.uriValue(@uri, U('rdf:type'))
     @deviceAttrs = []
     for da in _.unique(_.sortBy(@graph.objects(@deviceClass, U(':deviceAttr'))))
       dataType = @graph.uriValue(da, U(':dataType'))
       daRow = {
         uri: da
         dataType: dataType
         showColorPicker: dataType == U(':color')
+        }
       if dataType == 'http://light9.bigasterisk.com/color'
         daRow.useColor = true
       else if dataType == U(':choice')
         daRow.useChoice = true
         daRow.choices = @graph.objects(da, U(':choice'))
       else
         daRow.useSlider = true
         daRow.max = 1
         if dataType == U(':angle')
           # varies
           daRow.max = 1
       @push('deviceAttrs', daRow)
 Polymer
   is: "light9-live-controls"
   properties:
     graph: { type: Object, notify: true }
     client: { type: Object, notify: true }
     devices: { type: Array, notify: true }
@@ @@ -115,37 +165,7 @@ Polymer @@
   update: ->
     U = (x) => @graph.Uri(x)
     @set('devices', [])
     for dc in _.sortBy(@graph.subjects(U('rdf:type'), U(':DeviceClass')))
       for dev in _.sortBy(@graph.subjects(U('rdf:type'), dc))
         row = {uri: dev, label: (try
             @graph.stringValue(dev, U('rdfs:label'))
           catch
             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'))
           daRow = {
             uri: da
             dataType: dataType
             showColorPicker: dataType == U(':color')
+            }
           if dataType == 'http://light9.bigasterisk.com/color'
             daRow.useColor = true
           else if dataType == U(':choice')
             daRow.useChoice = true
             daRow.choices = @graph.objects(da, U(':choice'))
           else
             daRow.useSlider = true
             daRow.max = 1
             if dataType == U(':angle')
               # varies
               daRow.max = 1
           row.deviceAttrs.push(daRow)
         @push('devices', row)
@@ \ No newline at end of file @@
         @push('devices', {uri: dev})

light9/web/style.css

➞

Show inline comments

@@ @@ -157,12 +157,14 @@ a.resource { @@
     margin: 2px;
     background: rgb(66, 66, 66);
     display: block;
+}
 .resource a {
     color: rgb(150, 150, 255);
     padding: 1px;
     display: inline-block;
+}
 .sub {
     display: inline-block;
     vertical-align: top;
+}
 .sub.local {

0 comments (0 inline, 0 general)