Mercurial > code > home > repos > light9
changeset 1594:2dde8da33662
start making choice widgets on live
Ignore-this: ad54a94a02be707e2e497a03f19b7096
| author | Drew Perttula <drewp@bigasterisk.com> |
|---|---|
| date | Fri, 02 Jun 2017 07:32:58 +0000 |
| parents | 6059de6659c3 |
| children | 013cbd7a0f08 |
| files | light9/collector/device.py light9/web/live/index.html light9/web/live/live.coffee light9/web/style.css |
| diffstat | 4 files changed, 105 insertions(+), 53 deletions(-) [+] |
line wrap: on
line diff
--- a/light9/collector/device.py Thu Jun 01 09:03:09 2017 +0000 +++ b/light9/collector/device.py Fri Jun 02 07:32:58 2017 +0000 @@ -97,6 +97,13 @@ 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']) @@ -115,7 +122,7 @@ 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)
--- a/light9/web/live/index.html Thu Jun 01 09:03:09 2017 +0000 +++ b/light9/web/live/index.html Fri Jun 02 07:32:58 2017 +0000 @@ -15,6 +15,7 @@ <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> @@ -41,15 +42,19 @@ <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 { @@ -58,6 +63,8 @@ margin: 9px; padding: 5px; background: #171717; + break-inside: avoid-column; + } .deviceAttr { border-top: 1px solid #ffffff26; @@ -81,10 +88,34 @@ 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> @@ -98,20 +129,12 @@ </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>
--- a/light9/web/live/live.coffee Thu Jun 01 09:03:09 2017 +0000 +++ b/light9/web/live/live.coffee Fri Jun 02 07:32:58 2017 +0000 @@ -19,6 +19,8 @@ onSlider: -> @value = @immediateSlider goWhite: -> @value = "#ffffff" goBlack: -> @value = "#000000" + onChoice: (ev) -> + console.log('ch', ev) onChange: (value) -> @lastSent = [[@device, @deviceAttr.uri, value]] @@ -30,8 +32,56 @@ @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: @@ -118,34 +168,4 @@ @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})