Mercurial > code > home > repos > homeauto

comparison service/arduinoNode/static/output-widgets.html @ 218:f8ffb9d8d982

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
multi-boards on one service, new devices, devices return their current Ignore-this: e214852bca67519e79f9ddb3644576e1 values in the graph, jsonld support, multiple temp sensors on OW bus
author drewp@bigasterisk.com
date Sun, 03 Jan 2016 02:29:14 -0800
parents 960b3b4cdd29
children 4ebb5cc30002
comparison
equal deleted inserted replaced
217:163cfa384372 218:f8ffb9d8d982
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>
8 <iron-ajax id="output" url="../output" method="PUT"></iron-ajax> 9 <iron-ajax id="output" url="../output" method="PUT"></iron-ajax>
9 Set <a href$="{{subj}}">{{compactUri(subj)}}</a>'s 10 Set <a href$="{{subj}}">{{compactUri(subj)}}</a>'s
10 <span>{{compactUri(pred)}}</span> to 11 <span>{{compactUri(pred)}}</span> to
11 </template> 12 </template>
12 <script> 13 <script>
14 is: 'output-sender', 15 is: 'output-sender',
15 behaviors: [BigastUri], 16 behaviors: [BigastUri],
16 properties: { 17 properties: {
17 subj: { notify: true }, 18 subj: { notify: true },
18 pred: { notify: true }, 19 pred: { notify: true },
19 value: { observer: 'valueChanged' } 20 value: { notify: true, observer: 'valueChanged' }
21 },
22 ready: function() {
23 this.waitOnChangeMs = 100;
24 this.smallestRequestPeriodMs = 200;
25 this.synced = false;
26
27 this.newRequestNeedsSending = false;
28 this.lastSendMs = 0;
29 this.$.output.addEventListener('response', this.onResponse.bind(this));
30
31 this.loadInitialValue();
32 },
33 loadInitialValue: function() {
34 this.$.graphGet.addEventListener('response', function(ev) {
35 ev.target.removeEventListener(ev.type, arguments.callee);
36
37 ev.detail.response.forEach(function(row) {
38 var subj = row['@id'];
39 if (subj == this.subj) {
40 Object.keys(row).forEach(function(pred) {
41 if (pred == this.pred) {
42 row[pred].forEach(function(obj) {
43 this.value = obj['@value'];
44 this.synced = true;
45 }.bind(this));
46 }
47 }.bind(this));
48 }
49 }.bind(this));
50
51 }.bind(this));
52 this.$.graphGet.generateRequest();
53 },
54 onResponse: function() {
55 if (!this.newRequestNeedsSending) {
56 return;
57 }
58 if (this.$.output.activeRequests.length > 0) {
59 return; // 'response' event will call us back
60 }
61
62 var now = Date.now(), dt = now - this.lastSendMs;
63 if (dt < this.smallestRequestPeriodMs) {
64 setTimeout(this.onResponse.bind(this),
65 this.smallestRequestPeriodMs - dt);
66 return;
67 }
68 this.newRequestNeedsSending = false;
69 this.lastSendMs = now;
70 this.$.output.generateRequest();
20 }, 71 },
21 valueChanged: function () { 72 valueChanged: function () {
22 if (!this.subj || !this.pred) { 73 if (!this.subj || !this.pred) {
23 return; 74 return;
24 } 75 }
25 //this.$.output.headers = {'content-type': ...} 76 //this.$.output.headers = {'content-type': ...}
26 this.$.output.params = {s: this.subj, p: this.pred}; 77 this.$.output.params = {s: this.subj, p: this.pred};
27 this.$.output.body = this.value; 78 this.$.output.body = this.value;
28 this.$.output.generateRequest(); 79 this.newRequestNeedsSending = true;
80 setTimeout(this.onResponse.bind(this), this.waitOnChangeMs);
29 } 81 }
30 }); 82 });
31 </script> 83 </script>
32 </dom-module> 84 </dom-module>
33 85
34 <dom-module id="output-rgb"> 86 <dom-module id="output-rgb">
35 <template> 87 <template>
36 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender> 88 <div style="display: flex">
37 <color-picker id="pick" width="200" height="100" color="{{value}}"></color-picker> 89 <div>
38 color pick <span>{{value}}</span> 90 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
39 <button on-click="black">Black</button> 91 <div>color pick <span>{{value}}</span>
92 <button on-click="black">Black</button>
40 <button on-click="white">White</button> 93 <button on-click="white">White</button>
94 </div>
95 </div>
96 <div>
97 <color-picker id="pick" width="200" height="100" color="{{value}}"></color-picker>
98 </div>
99 </div>
41 </template> 100 </template>
42 <script> 101 <script>
43 Polymer({ 102 Polymer({
44 is: 'output-rgb', 103 is: 'output-rgb',
45 properties: { 104 properties: {