Mercurial > code > home > repos > homeauto
annotate service/arduinoNode/static/output-widgets.html @ 998:ecb12305d5ca
rewrite to polymer 1
Ignore-this: 9e66ae7e1227732e68393326b2483aa2
darcs-hash:20150830081957-312f9-be4fac6d250655133b68c0fdd6e447b5195ef631
| author | drewp <drewp@bigasterisk.com> |
|---|---|
| date | Sun, 30 Aug 2015 01:19:57 -0700 |
| parents | ed1f54d81fc9 |
| children | f8ffb9d8d982 |
| rev | line source |
|---|---|
| 998 | 1 <link rel="import" href="/lib/polymer/1.0.9/iron-ajax/iron-ajax.html"> |
| 2 <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html"> | |
| 3 <link rel="import" href="/lib/polymer/1.0.9/color-picker-element/dist/color-picker.html"> | |
| 4 <link rel="import" href="/room/ari/static/rdf-uri.html"> | |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
5 |
| 998 | 6 <dom-module id="output-sender"> |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
7 <template> |
| 998 | 8 <iron-ajax id="output" url="../output" method="PUT"></iron-ajax> |
| 9 Set <a href$="{{subj}}">{{compactUri(subj)}}</a>'s | |
| 10 <span>{{compactUri(pred)}}</span> to | |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
11 </template> |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
12 <script> |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
13 Polymer({ |
| 998 | 14 is: 'output-sender', |
| 15 behaviors: [BigastUri], | |
| 16 properties: { | |
| 17 subj: { notify: true }, | |
| 18 pred: { notify: true }, | |
| 19 value: { observer: 'valueChanged' } | |
| 20 }, | |
| 21 valueChanged: function () { | |
| 22 if (!this.subj || !this.pred) { | |
| 23 return; | |
| 24 } | |
|
992
ed1f54d81fc9
board control ui: output-rgb, fix ajax protocol, display output uris
drewp <drewp@bigasterisk.com>
parents:
978
diff
changeset
|
25 //this.$.output.headers = {'content-type': ...} |
| 998 | 26 this.$.output.params = {s: this.subj, p: this.pred}; |
|
992
ed1f54d81fc9
board control ui: output-rgb, fix ajax protocol, display output uris
drewp <drewp@bigasterisk.com>
parents:
978
diff
changeset
|
27 this.$.output.body = this.value; |
| 998 | 28 this.$.output.generateRequest(); |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
29 } |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
30 }); |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
31 </script> |
| 998 | 32 </dom-module> |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
33 |
| 998 | 34 <dom-module id="output-rgb"> |
|
992
ed1f54d81fc9
board control ui: output-rgb, fix ajax protocol, display output uris
drewp <drewp@bigasterisk.com>
parents:
978
diff
changeset
|
35 <template> |
| 998 | 36 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender> |
|
992
ed1f54d81fc9
board control ui: output-rgb, fix ajax protocol, display output uris
drewp <drewp@bigasterisk.com>
parents:
978
diff
changeset
|
37 <color-picker id="pick" width="200" height="100" color="{{value}}"></color-picker> |
| 998 | 38 color pick <span>{{value}}</span> |
| 39 <button on-click="black">Black</button> | |
| 40 <button on-click="white">White</button> | |
| 41 </template> | |
| 42 <script> | |
| 43 Polymer({ | |
| 44 is: 'output-rgb', | |
| 45 properties: { | |
| 46 value: { notify: true }, | |
| 47 }, | |
| 48 ready: function () { | |
| 49 this.$.pick.addEventListener('colorselected', function (ev) { | |
| 50 this.value = ev.detail.hex; | |
| 51 }.bind(this)); | |
| 52 }, | |
| 53 black: function() {this.value = "#000000";}, | |
| 54 white: function() {this.value = "#ffffff";} | |
| 55 }); | |
| 56 </script> | |
| 57 </dom-module> | |
| 58 | |
| 59 <dom-module id="output-slider"> | |
| 60 <template> | |
| 61 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender> | |
| 62 <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value::input}}"> <span>{{value}}</span> | |
|
992
ed1f54d81fc9
board control ui: output-rgb, fix ajax protocol, display output uris
drewp <drewp@bigasterisk.com>
parents:
978
diff
changeset
|
63 </template> |
|
ed1f54d81fc9
board control ui: output-rgb, fix ajax protocol, display output uris
drewp <drewp@bigasterisk.com>
parents:
978
diff
changeset
|
64 <script> |
|
ed1f54d81fc9
board control ui: output-rgb, fix ajax protocol, display output uris
drewp <drewp@bigasterisk.com>
parents:
978
diff
changeset
|
65 Polymer({ |
| 998 | 66 is: 'output-slider', |
| 67 properties: { | |
| 68 max: { notify: true }, | |
| 69 min: { notify: true }, | |
| 70 step: { notify: true } | |
| 71 }, | |
|
992
ed1f54d81fc9
board control ui: output-rgb, fix ajax protocol, display output uris
drewp <drewp@bigasterisk.com>
parents:
978
diff
changeset
|
72 }); |
|
ed1f54d81fc9
board control ui: output-rgb, fix ajax protocol, display output uris
drewp <drewp@bigasterisk.com>
parents:
978
diff
changeset
|
73 </script> |
| 998 | 74 </dom-module> |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
75 |
| 998 | 76 <!-- |
| 77 TODO(polyup): Inheriting from other custom elements is not yet supported. | |
| 78 See: https://www.polymer-project.org/1.0/docs/migration.html#inheritance | |
| 79 --> | |
| 80 <dom-module id="output-fixed-text"> | |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
81 <template> |
| 998 | 82 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender> |
| 83 <textarea rows="{{rows}}" cols="{{cols}}" value="{{value::input}}"></textarea> | |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
84 </template> |
| 998 | 85 <script> |
| 86 Polymer({ | |
| 87 is: 'output-fixed-text', | |
| 88 properties: { | |
| 89 cols: { notify: true }, | |
| 90 rows: { notify: true } | |
| 91 }, | |
| 92 }); | |
| 93 </script> | |
| 94 </dom-module> | |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
95 |
| 998 | 96 <dom-module id="output-switch"> |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
97 <template> |
| 998 | 98 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender> |
| 99 <input type="checkbox" checked="{{check::change}}"> <span>{{value}}</span> | |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
100 </template> |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
101 <script> |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
102 Polymer({ |
| 998 | 103 is: 'output-switch', |
| 104 properties: { | |
| 105 check: { | |
| 106 type: Boolean, | |
| 107 value: false, | |
| 108 observer: 'checkChanged' | |
| 109 }, | |
| 110 value: { notify: true } | |
| 111 }, | |
| 112 checkChanged: function () { | |
| 113 this.value = this.check ? 'high' : 'low'; | |
| 114 }, | |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
115 }); |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
116 </script> |
| 998 | 117 </dom-module> |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
118 |
| 998 | 119 <dom-module id="output-widget-any"> |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
120 <template></template> |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
121 <script> |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
122 Polymer({ |
| 998 | 123 is: 'output-widget-any', |
| 124 properties: { | |
| 125 desc: { type: Object, notify: true } | |
| 126 }, | |
| 127 ready: function () { | |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
128 var elem = document.createElement(this.desc.element); |
| 998 | 129 this.appendChild(elem); |
|
975
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
130 for (var k of Object.keys(this.desc)) { |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
131 elem.setAttribute(k, this.desc[k]); |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
132 } |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
133 } |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
134 }); |
|
f3023410d875
polymer board debug page with working output widgets
drewp <drewp@bigasterisk.com>
parents:
diff
changeset
|
135 </script> |
| 998 | 136 </dom-module> |