comparison service/arduinoNode/static/output-widgets.html @ 975:f3023410d875

polymer board debug page with working output widgets Ignore-this: 3157d0c47a91afe47b30a5f182629d93 darcs-hash:20150414063012-312f9-69ac15a9c7bab2b3b5ca00142fe4435ded7d6d0f
author drewp <drewp@bigasterisk.com>
date Mon, 13 Apr 2015 23:30:12 -0700
parents
children 4d2df276baae
comparison
equal deleted inserted replaced
974:f707210c13bd 975:f3023410d875
1 <link rel="import" href="/lib/polymer/0.5.2/core-ajax/core-ajax.html">
2
3 <polymer-element name="output-widget" attributes="subj pred">
4 <template>
5 <core-ajax id="output" url="../output" method="POST"></core-ajax>
6 {{subj}} set {{pred}} to
7 </template>
8 <script>
9 function ntriple(s, p, o) {
10 // incomplete
11 o = o.replace('\n', '\\n');
12 return '<'+s+'> <'+p+'> "'+o+'".';
13 }
14 Polymer({
15 valueChanged: function() {
16 this.$.output.body = ntriple(this.subj, this.pred, this.value);
17 this.$.output.go();
18 }
19 });
20 </script>
21 </polymer-element>
22
23 <polymer-element name="output-slider" extends="output-widget"
24 attributes="min max step"
25 noscript>
26 <template>
27 <shadow></shadow>
28 <input type="range"
29 min="{{min}}" max="{{max}}" step="{{step}}"
30 value="{{value}}"> {{value}}
31 </template>
32 </polymer-element>
33
34 <polymer-element name="output-fixed-text" extends="output-widget"
35 attributes="rows cols"
36 noscript>
37 <template>
38 <textarea rows="{{rows}}" cols="{{cols}}" value="{{value}}"></textarea>
39 </template>
40 </polymer-element>
41
42 <polymer-element name="output-switch" extends="output-widget">
43 <template>
44 <shadow></shadow>
45 <input type="checkbox" checked="{{check}}"> {{value}}
46 </template>
47 <script>
48 Polymer({
49 check: false,
50 checkChanged: function() {
51 this.value = this.check ? "high" : "low";
52 }
53 });
54 </script>
55 </polymer-element>
56
57 <polymer-element name="output-widget-any" attributes="desc">
58 <template></template>
59 <script>
60 Polymer({
61 domReady: function() {
62 var elem = document.createElement(this.desc.element);
63 this.shadowRoot.appendChild(elem);
64 for (var k of Object.keys(this.desc)) {
65 elem.setAttribute(k, this.desc[k]);
66 }
67 }
68 });
69 </script>
70 </polymer-element>