Mercurial > code > home > repos > light9
changeset 1612:97e4f1b5ff19
choice UI support on live editor
Ignore-this: e9bb570f128b05a498d05b4c6b6bcf86
| author | Drew Perttula <drewp@bigasterisk.com> |
|---|---|
| date | Tue, 06 Jun 2017 06:37:09 +0000 |
| parents | 826e295b6a75 |
| children | b0ea577c12a3 |
| files | light9/web/lib/bower.json light9/web/live/index.html light9/web/live/live.coffee show/dance2017/deviceClass.n3 |
| diffstat | 4 files changed, 83 insertions(+), 12 deletions(-) [+] |
line wrap: on
line diff
--- a/light9/web/lib/bower.json Mon Jun 05 09:57:18 2017 +0000 +++ b/light9/web/lib/bower.json Tue Jun 06 06:37:09 2017 +0000 @@ -21,7 +21,9 @@ "paper-button": "PolymerElements/paper-button#^1.0.12", "paper-dialog": "PolymerElements/paper-dialog#^1.0.4", "paper-radio-group": "PolymerElements/paper-radio-group#^1.2.2", - "color": "https://github.com/One-com/one-color.git#^3.0.4" + "color": "https://github.com/One-com/one-color.git#^3.0.4", + "paper-listbox": "PolymerElements/paper-listbox#1.1.3", + "paper-item": "PolymerElements/paper-item#1.2.2" }, "resolutions": { "paper-styles": "^1.1.4",
--- a/light9/web/live/index.html Mon Jun 05 09:57:18 2017 +0000 +++ b/light9/web/live/index.html Tue Jun 06 06:37:09 2017 +0000 @@ -7,6 +7,8 @@ <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"> @@ -20,6 +22,76 @@ </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> @@ -32,7 +104,7 @@ } #colorControls paper-slider { - } + } paper-slider { width: 100%; height: 25px; } </style> @@ -48,7 +120,8 @@ background: black; } } - </style> + + </style> <template is="dom-if" if="{{deviceAttr.useSlider}}"> <paper-slider min="0" @@ -66,12 +139,8 @@ </div> </template> <template is="dom-if" if="{{deviceAttr.useChoice}}"> - <select size$="{{deviceAttr.choiceSize}}" value="{{pickedChoice::change}}"> - <option value="">None</option> - <template is="dom-repeat" items="{{deviceAttr.choices}}"> - <option value="{{item.uri}}">{{item.label}}</option> - </template> - </select> + <light9-listbox choices="{{deviceAttr.choices}}" value="{{value}}"> + </light9-listbox> </template> </template>
--- a/light9/web/live/live.coffee Mon Jun 05 09:57:18 2017 +0000 +++ b/light9/web/live/live.coffee Tue Jun 06 06:37:09 2017 +0000 @@ -101,7 +101,7 @@ # 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' + if value == 0 or value == '#000000' or value == null or value == undefined delete @currentSettings[key] else @currentSettings[key] = [dev, devAttr, value]
--- a/show/dance2017/deviceClass.n3 Mon Jun 05 09:57:18 2017 +0000 +++ b/show/dance2017/deviceClass.n3 Tue Jun 06 06:37:09 2017 +0000 @@ -15,9 +15,9 @@ rdfs:comment "0=none, 1=fastest" . :goboSpeed a :DeviceAttr; rdfs:label "goboSpeed"; :dataType :scalar ; rdfs:comment "0=stopped, 1=rotate the fastest". -:quantumGoboChoice a :DeviceAttr; rdfs:label "quantumGoboChoice"; :dataType :choice; +:quantumGoboChoice a :DeviceAttr; rdfs:label "gobo"; :dataType :choice; :choice :open, :spider, :windmill, :limbo, :brush, :whirlpool, :stars . -:mini15GoboChoice a :DeviceAttr; rdfs:label "mini15GoboChoice"; :dataType :choice; +:mini15GoboChoice a :DeviceAttr; rdfs:label "gobo"; :dataType :choice; :choice :mini15Gobo1, :mini15Gobo2, :mini15Gobo3, :mini15Gobo4, :mini15Gobo5, :mini15Gobo6, :mini15Gobo7, :mini15Gobo8, :mini15Gobo9, :mini15Gobo10 . :goboShake a :DeviceAttr; rdfs:label "goboShake"; :dataType :scalar .