Mercurial > code > home > repos > homeauto

comparison service/arduinoNode/static/output-widgets.html @ 233:4ebb5cc30002

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
server/browser graph sync. cut dependency on the WS version. merge some changes between arduino/pi code. Ignore-this: cf7d20d54e134e8ff33a9ee405610846
author drewp@bigasterisk.com
date Sat, 30 Jan 2016 06:40:00 -0800
parents f8ffb9d8d982
children 5bbcf7d9a5f5
comparison
equal deleted inserted replaced
232:4e91f3ec460b 233:4ebb5cc30002
3 <link rel="import" href="/lib/polymer/1.0.9/color-picker-element/dist/color-picker.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"> 4 <link rel="import" href="/room/ari/static/rdf-uri.html">
5 5
6 <dom-module id="output-sender"> 6 <dom-module id="output-sender">
7 <template> 7 <template>
8 <iron-ajax id="graphGet" url="../graph" method="GET" headers='{"Accept": "application/ld+json"}'></iron-ajax>
9 <iron-ajax id="output" url="../output" method="PUT"></iron-ajax> 8 <iron-ajax id="output" url="../output" method="PUT"></iron-ajax>
10 Set <a href$="{{subj}}">{{compactUri(subj)}}</a>'s 9 Set <a href$="{{subj}}">{{compactUri(subj)}}</a>'s
11 <span>{{compactUri(pred)}}</span> to 10 <span>{{compactUri(pred)}}</span> to
12 </template> 11 </template>
13 <script> 12 <script>
14 Polymer({ 13 Polymer({
15 is: 'output-sender', 14 is: 'output-sender',
16 behaviors: [BigastUri], 15 behaviors: [BigastUri],
17 properties: { 16 properties: {
17 streamedGraph: { notify: true, observer: 'onGraphChange' },
18 subj: { notify: true }, 18 subj: { notify: true },
19 pred: { notify: true }, 19 pred: { notify: true },
20 value: { notify: true, observer: 'valueChanged' } 20 value: { notify: true, observer: 'browserChangedValue' }
21 }, 21 },
22 ready: function() { 22 ready: function() {
23 this.waitOnChangeMs = 100; 23 this.waitOnChangeMs = 100;
24 this.smallestRequestPeriodMs = 200; 24 this.smallestRequestPeriodMs = 100;
25 this.synced = false; 25 this.synced = false;
26 26
27 this.newRequestNeedsSending = false; 27 this.newRequestNeedsSending = false;
28 this.lastSendMs = 0; 28 this.lastSendMs = 0;
29 this.$.output.addEventListener('response', this.onResponse.bind(this)); 29 this.$.output.addEventListener('response', this.onResponse.bind(this));
30 30
31 this.loadInitialValue(); 31 },
32 }, 32 onGraphChange: function(streamedGraph) {
33 loadInitialValue: function() { 33 if (!streamedGraph.graph) {
34 this.$.graphGet.addEventListener('response', function(ev) { 34 return;
35 ev.target.removeEventListener(ev.type, arguments.callee); 35 }
36 36 console.log('output-sender sees change to version', streamedGraph.version);
37 ev.detail.response.forEach(function(row) { 37 console.log('the index im about to read:', stringifyMap(streamedGraph.graph.quadStore.index));
38 var subj = row['@id']; 38 var env = streamedGraph.graph.store.rdf;
39 if (subj == this.subj) { 39 streamedGraph.graph.quadStore.quads({
40 Object.keys(row).forEach(function(pred) { 40 subject: env.createNamedNode(this.subj),
41 if (pred == this.pred) { 41 predicate: env.createNamedNode(this.pred)
42 row[pred].forEach(function(obj) { 42 }, function(quad) {
43 this.value = obj['@value']; 43 this.serverChangedValue(quad.object.valueOf());
44 this.synced = true;
45 }.bind(this));
46 }
47 }.bind(this));
48 }
49 }.bind(this));
50
51 }.bind(this)); 44 }.bind(this));
52 this.$.graphGet.generateRequest();
53 }, 45 },
54 onResponse: function() { 46 onResponse: function() {
55 if (!this.newRequestNeedsSending) { 47 if (!this.newRequestNeedsSending) {
56 return; 48 return;
57 } 49 }
65 this.smallestRequestPeriodMs - dt); 57 this.smallestRequestPeriodMs - dt);
66 return; 58 return;
67 } 59 }
68 this.newRequestNeedsSending = false; 60 this.newRequestNeedsSending = false;
69 this.lastSendMs = now; 61 this.lastSendMs = now;
62 console.log(Date.now(), 'sending', this.$.output.body);
70 this.$.output.generateRequest(); 63 this.$.output.generateRequest();
71 }, 64 },
72 valueChanged: function () { 65 browserChangedValue: function () {
73 if (!this.subj || !this.pred) { 66 if (!this.subj || !this.pred) {
74 return; 67 return;
75 } 68 }
76 //this.$.output.headers = {'content-type': ...} 69 //this.$.output.headers = {'content-type': ...}
77 this.$.output.params = {s: this.subj, p: this.pred}; 70 this.$.output.params = {s: this.subj, p: this.pred};
78 this.$.output.body = this.value; 71 this.$.output.body = this.value;
79 this.newRequestNeedsSending = true; 72 this.newRequestNeedsSending = true;
80 setTimeout(this.onResponse.bind(this), this.waitOnChangeMs); 73 setTimeout(this.onResponse.bind(this), this.waitOnChangeMs);
74 },
75 serverChangedValue: function(v) {
76 console.log('server gave', v);
77 this.value = v;
78 this.synced = true;
81 } 79 }
82 }); 80 });
83 </script> 81 </script>
84 </dom-module> 82 </dom-module>
85 83
86 <dom-module id="output-rgb"> 84 <dom-module id="output-rgb">
87 <template> 85 <template>
88 <div style="display: flex"> 86 <div style="display: flex">
89 <div> 87 <div>
90 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender> 88 <output-sender streamed-graph="{{streamedGraph}}" subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
91 <div>color pick <span>{{value}}</span> 89 <div>color pick <span>{{value}}</span>
92 <button on-click="black">Black</button> 90 <button on-click="black">Black</button>
93 <button on-click="white">White</button> 91 <button on-click="white">White</button>
94 </div> 92 </div>
95 </div> 93 </div>
115 </script> 113 </script>
116 </dom-module> 114 </dom-module>
117 115
118 <dom-module id="output-slider"> 116 <dom-module id="output-slider">
119 <template> 117 <template>
120 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender> 118 <output-sender streamed-graph="{{streamedGraph}}" subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
121 <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value::input}}"> <span>{{value}}</span> 119 <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value::input}}"> <span>{{value}}</span>
122 </template> 120 </template>
123 <script> 121 <script>
124 Polymer({ 122 Polymer({
125 is: 'output-slider', 123 is: 'output-slider',
126 properties: { 124 properties: {
127 max: { notify: true }, 125 streamedGraph: { notify: true },
128 min: { notify: true }, 126 max: { notify: true },
129 step: { notify: true } 127 min: { notify: true },
130 }, 128 step: { notify: true }
131 }); 129 },
130 });
132 </script> 131 </script>
133 </dom-module> 132 </dom-module>
134 133
135 <!-- 134 <!--
136 TODO(polyup): Inheriting from other custom elements is not yet supported. 135 TODO(polyup): Inheriting from other custom elements is not yet supported.
137 See: https://www.polymer-project.org/1.0/docs/migration.html#inheritance 136 See: https://www.polymer-project.org/1.0/docs/migration.html#inheritance
138 --> 137 -->
139 <dom-module id="output-fixed-text"> 138 <dom-module id="output-fixed-text">
140 <template> 139 <template>
141 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender> 140 <output-sender streamed-graph="{{streamedGraph}}" subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
142 <textarea rows="{{rows}}" cols="{{cols}}" value="{{value::input}}"></textarea> 141 <textarea rows="{{rows}}" cols="{{cols}}" value="{{value::input}}"></textarea>
143 </template> 142 </template>
144 <script> 143 <script>
145 Polymer({ 144 Polymer({
146 is: 'output-fixed-text', 145 is: 'output-fixed-text',
152 </script> 151 </script>
153 </dom-module> 152 </dom-module>
154 153
155 <dom-module id="output-switch"> 154 <dom-module id="output-switch">
156 <template> 155 <template>
157 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender> 156 <output-sender streamed-graph="{{streamedGraph}}" subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
158 <input type="checkbox" checked="{{check::change}}"> <span>{{value}}</span> 157 <input type="checkbox" checked="{{check::change}}"> <span>{{value}}</span>
159 </template> 158 </template>
160 <script> 159 <script>
161 Polymer({ 160 Polymer({
162 is: 'output-switch', 161 is: 'output-switch',
179 <template></template> 178 <template></template>
180 <script> 179 <script>
181 Polymer({ 180 Polymer({
182 is: 'output-widget-any', 181 is: 'output-widget-any',
183 properties: { 182 properties: {
184 desc: { type: Object, notify: true } 183 desc: { type: Object, notify: true },
184 streamedGraph: { type: Object, notify: true, observer: 'onGraph' },
185 }, 185 },
186 ready: function () { 186 ready: function () {
187 var elem = document.createElement(this.desc.element); 187 this.elem = document.createElement(this.desc.element);
188 this.appendChild(elem); 188 this.appendChild(this.elem);
189 for (var k of Object.keys(this.desc)) { 189 for (var k of Object.keys(this.desc)) {
190 elem.setAttribute(k, this.desc[k]); 190 this.elem.setAttribute(k, this.desc[k]);
191 }
192 this.elem.streamedGraph = this.streamedGraph;
193 },
194 onGraph: function(g) {
195 if (this.elem) {
196 this.elem.streamedGraph = g;
191 } 197 }
192 } 198 }
193 }); 199 });
194 </script> 200 </script>
195 </dom-module> 201 </dom-module>