comparison service/arduinoNode/static/output-widgets.html @ 187:fc5fdcc3ed4a

board control ui: output-rgb, fix ajax protocol, display output uris Ignore-this: f3d3e6739851232d2177eacdd833c16
author drewp@bigasterisk.com
date Wed, 08 Jul 2015 01:22:37 -0700
parents 0daa8cbbd8f6
children 960b3b4cdd29
comparison
equal deleted inserted replaced
186:57e6d328d45b 187:fc5fdcc3ed4a
1 <link rel="import" href="/lib/polymer/0.5.2/core-ajax/core-ajax.html"> 1 <link rel="import" href="/lib/polymer/0.5.2/core-ajax/core-ajax.html">
2 2
3 <polymer-element name="output-widget" attributes="subj pred"> 3 <polymer-element name="output-widget" attributes="subj pred">
4 <template> 4 <template>
5 <core-ajax id="output" url="../output" method="POST"></core-ajax> 5 <core-ajax id="output" url="../output" method="PUT"></core-ajax>
6 Set this device's {{pred | compactUri}} to 6 Set <a href="{{subj}}">{{subj | compactUri}}</a>'s {{pred | compactUri}} to
7 </template> 7 </template>
8 <script> 8 <script>
9 function ntriple(s, p, o) {
10 // incomplete
11 o = o.replace('\n', '\\n');
12 return '<'+s+'> <'+p+'> "'+o+'".';
13 }
14 Polymer({ 9 Polymer({
15 valueChanged: function() { 10 valueChanged: function() {
16 this.$.output.body = ntriple(this.subj, this.pred, this.value); 11 //this.$.output.headers = {'content-type': ...}
12 // broken in polymer 0.5 this.$.output.params = {s: this.subj, p: this.pred};
13 this.$.output.url = "output?s="+encodeURIComponent(this.subj)+"&p="+encodeURIComponent(this.pred);
14 this.$.output.body = this.value;
17 this.$.output.go(); 15 this.$.output.go();
18 } 16 }
19 }); 17 });
18 </script>
19 </polymer-element>
20
21 <polymer-element name="output-rgb" extends="output-widget">
22 <template>
23 <color-picker id="pick" width="200" height="100" color="{{value}}"></color-picker>
24 color pick {{value}}
25 </template>
26 <script>
27 Polymer({
28 domReady: function() {
29 this.$.pick.addEventListener('colorselected', function(ev) {
30 this.value = ev.detail.hex;
31 }.bind(this));
32 }
33 });
20 </script> 34 </script>
21 </polymer-element> 35 </polymer-element>
22 36
23 <polymer-element name="output-slider" extends="output-widget" 37 <polymer-element name="output-slider" extends="output-widget"
24 attributes="min max step" 38 attributes="min max step"