Changeset - 2362fcf5e220
[Not reviewed]
default
0 2 0
Drew Perttula - 8 years ago 2017-06-07 05:48:04
drewp@bigasterisk.com
paper-slider didn't clear when i wrote to immediate-value
Ignore-this: d91f72fe55ebe2cc9b3b4050a598c1ff
2 files changed with 4 insertions and 0 deletions:
0 comments (0 inline, 0 general)
light9/web/live/index.html
Show inline comments
 
<!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>
 
         #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>
 

	
 
        <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>
light9/web/live/live.coffee
Show inline comments
 
log = console.log
 

	
 
Polymer
 
  is: 'light9-live-control'
 
  properties:
 
    device: { type: String }
 
    deviceAttr: { type: Object }
 
    max: { type: Number, value: 1 }
 
    value: { type: Object, notify: true }
 
    
 
    immediateSlider: { notify: true, observer: 'onSlider' }
 
    sliderWriteValue: { type: Number }
 
    pickedChoice: { observer: 'onChange' }
 
  observers: [
 
    'onChange(value)'
 
    ]
 
  ready: ->
 
    
 
  onSlider: -> @value = @immediateSlider
 
  goBlack: -> @value = "#000000"
 
  onChange: (value) ->
 
    @lastSent = [[@device, @deviceAttr.uri, value]]
 
    @resend()
 
  resend: ->
 
    window.gather(@lastSent)
 
  clear: ->
 
    @pickedChoice = null
 
    @sliderWriteValue = 0
 
    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 }
 
    deviceClass: { type: String, notify: true }
 
    deviceAttrs: { type: Array, notify: true }
 
    bgStyle: { type: String, computed: '_bgStyle(deviceClass)' }
 
  observers: [
 
    'onGraph(graph)'
 
    ]
 
  _bgStyle: (deviceClass) ->
 
    hash = 0
 
    for i in [(deviceClass.length-10)...deviceClass.length]
 
        hash += deviceClass.charCodeAt(i)
 
    hue = (hash * 8) % 360
 
    accent = "hsl(#{hue}, 49%, 22%)"
 
    "background: linear-gradient(to right, rgba(31,31,31,0) 50%, #{accent} 100%);"
 
  onGraph: ->
 
    @graph.runHandler(@update.bind(@), "#{@uri} update")
 
  update: ->
 
    U = (x) => @graph.Uri(x)
 
    
 
    @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
 
        choiceUris = _.sortBy(@graph.objects(da, U(':choice')))
 
        daRow.choices = ({uri: x, label: @graph.labelOrTail(x)} for x in choiceUris)
 
        daRow.choiceSize = Math.min(choiceUris.length + 1, 10)
 
      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 }
 
    currentSettings: { type: Object, notify: true } # dev+attr: [dev, attr, value]
 
    effectPreview: { type: String, notify: true }
 
    newEffectName: { type: String, notify: true }
 
  observers: [
 
    'onGraph(graph)'
 
    ]
 
  ready: ->
 
    @currentSettings = {}
 
    @effectPreview = JSON.stringify({})
 
    window.gather = (sent) =>
 
      [dev, devAttr, value] = sent[0]
 
      key = dev + " " + devAttr
 
      # this is a bug for zoom=0, since collector will default it to
 
      # stick at the last setting if we don't explicitly send the
 
      # 0. rx/ry similar though not the exact same deal because of
 
      # their remap.
 
      if value == 0 or value == '#000000' or value == null or value == undefined
 
        delete @currentSettings[key]
 
      else
 
        @currentSettings[key] = [dev, devAttr, value]
 
      @effectPreview = JSON.stringify(v for k,v of @currentSettings)
 

	
 
      @debounce('send', @sendAll.bind(@), 2)
 

	
 
  currentSettingsList: -> (v for k,v of @currentSettings)
 
      
 
  sendAll: ->
 
    @client.send(@currentSettingsList())
 
      
 
  saveNewEffect: ->
 
    uriName = @newEffectName.replace(/[^a-zA-Z0-9_]/g, '')
 
    return if not uriName.length
 

	
 
    U = (x) => @graph.Uri(x)
 

	
 
    effectUri = U(":effect") + "/#{uriName}"
 
    ctx = U("http://light9.bigasterisk.com/show/dance2017/effect/#{uriName}")
 
    quad = (s, p, o) => {subject: s, predicate: p, object: o, graph: ctx}
 

	
 
    addQuads = [
 
      quad(effectUri, U('rdf:type'), U(':Effect'))
 
      quad(effectUri, U('rdfs:label'), @graph.Literal(@newEffectName))
 
      quad(effectUri, U(':publishAttr'), U(':strength'))
 
      ]
 
    settings = @graph.nextNumberedResources(effectUri + '_set', @currentSettingsList().length)
 
    for row in @currentSettingsList()
 
      if row[2] == 0 or row[2] == '#000000'
 
        continue
 
      setting = settings.shift()
 
      addQuads.push(quad(effectUri, U(':setting'), setting))
 
      addQuads.push(quad(setting, U(':device'), row[0]))
 
      addQuads.push(quad(setting, U(':deviceAttr'), row[1]))
 
      scaledAttributeTypes = [U(':color'), U(':brightness'), U(':uv')]
 
      value = if typeof(row[2]) == 'number'
 
          @graph.LiteralRoundedFloat(row[2])
 
        else
 
          @graph.Literal(row[2])
 
      settingType = if row[1] in scaledAttributeTypes then U(':scaledValue') else U(':value')
 
      addQuads.push(quad(setting, settingType, value))
 
      
 
    patch = {addQuads: addQuads, delQuads: []}
 
    log('save', patch)
 
    @graph.applyAndSendPatch(patch)
 
    @newEffectName = ''
 

	
 
  onGraph: ->
 
    @graph.runHandler(@update.bind(@))
 
  resendAll: ->
 
    for llc in @getElementsByTagName("light9-live-control")
 
      llc.resend()
 
  clearAll: ->
 
    for llc in @getElementsByTagName("light9-live-control")
 
      llc.clear()
 
    
 
  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))
 
        @push('devices', {uri: dev})
0 comments (0 inline, 0 general)