Mercurial > code > home > repos > homeauto

comparison service/arduinoNode/static/index.html @ 193:960b3b4cdd29

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
rewrite to polymer 1 Ignore-this: 9e66ae7e1227732e68393326b2483aa2
author drewp@bigasterisk.com
date Sun, 30 Aug 2015 01:19:57 -0700
parents fc5fdcc3ed4a
children 35e07a9f3287
comparison
equal deleted inserted replaced
192:6c6897a139da 193:960b3b4cdd29
1 <!doctype html> 1 <!doctype html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <title>arduinoNode</title> 4 <title>arduinoNode</title>
5 <meta charset="utf-8" /> 5 <meta charset="utf-8" />
6 <link rel="import" href="/lib/polymer/0.5.2/polymer/polymer.html"> 6 <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents.min.js"></script>
7 <link rel="import" href="/lib/polymer/0.5.2/core-ajax/core-ajax.html"> 7 <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">
8 <link rel="import" href="/lib/polymer/1.0.9/iron-ajax/iron-ajax.html">
9 <link rel="import" href="/lib/polymer/1.0.9/iron-flex-layout/iron-flex-layout.html">
8 <link rel="import" href="/room/ari/static/rdf-observe.html"> 10 <link rel="import" href="/room/ari/static/rdf-observe.html">
9 <link rel="import" href="/room/ari/static/rdf-oneshot.html"> 11 <link rel="import" href="/room/ari/static/rdf-oneshot.html">
12 <link rel="import" href="/room/ari/static/rdf-uri.html">
10 <link rel="import" href="static/output-widgets.html"> 13 <link rel="import" href="static/output-widgets.html">
11
12 <style> 14 <style>
13 body { 15 body {
14 font-family: monospace; 16 font-family: monospace;
17 display: flex;
18 flex-direction: column;
19 margin: 0;
20 height: 100vh;
15 } 21 }
16 </style> 22 </style>
17 </head> 23 </head>
18 <body layout vertical fullbleed> 24 <body>
19 <script> 25 <script>
20 window.NS = { 26 window.NS = {
21 dev: 'http://projects.bigasterisk.com/device/', 27 dev: 'http://projects.bigasterisk.com/device/',
22 room: 'http://projects.bigasterisk.com/room/', 28 room: 'http://projects.bigasterisk.com/room/',
23 rdfs: 'http://www.w3.org/2000/01/rdf-schema#', 29 rdfs: 'http://www.w3.org/2000/01/rdf-schema#',
24 sensor: 'http://bigasterisk.com/homeauto/sensor/' 30 sensor: 'http://bigasterisk.com/homeauto/sensor/'
25 }; 31 };
26 </script> 32 </script>
27 33
28 <script> 34 <dom-module id="linked-uri">
29 PolymerExpressions.prototype.tojson = function(input) {
30 return JSON.stringify(input);
31 };
32
33 // not well defined for uri prefixes that are string prefixes of each other
34 PolymerExpressions.prototype.compactUri = function(uri) {
35 if (uri === undefined) {
36 return uri;
37 }
38 for (var short of Object.keys(window.NS)) {
39 var prefix = window.NS[short];
40 if (uri.indexOf(prefix) == 0) {
41 return short + ':' + uri.substr(prefix.length);
42 }
43 }
44 return uri;
45 };
46 </script>
47
48 <polymer-element name="linked-uri" noscript attributes="href">
49 <template> 35 <template>
50 <a href="{{href}}">{{href | compactUri}}</a> 36 <a href$="{{href}}">{{compactUri(href)}}</a>
51 </template>
52 </polymer-element>
53
54 <!-- subj/pred are compact uris -->
55 <polymer-element name="watched-subgraph" attributes="graph subj pred">
56 <template>
57 <style>
58 .read { font-weight: bold; }
59 </style>
60
61 <rdf-observe
62 graph="{{graph}}"
63 subject="{{subj}}"
64 predicate="{{pred}}"
65 out="{{out}}">
66 </rdf-observe>
67
68 <div>{{subj | compactUri}}, {{pred | compactUri}},
69 <span class="read">{{formattedOut}}</span>
70 </div>
71
72 </template> 37 </template>
73 <script> 38 <script>
74 Polymer({ 39 Polymer({
75 outChanged: function() { 40 is: 'linked-uri',
76 var obj = this.out[this.pred]; 41 properties: { href: { notify: true } },
77 if (typeof(obj) == 'string') { 42 behaviors: [BigastUri]
78 this.formattedOut = PolymerExpressions.prototype.compactUri(obj); 43 });
44 </script>
45 </dom-module>
46
47 <!-- subj/pred are compact uris -->
48 <dom-module id="watched-subgraph">
49 <style>
50 .read { font-weight: bold; }
51 </style>
52 <template>
53 <rdf-observe graph="{{graph}}" subject="{{subj}}" predicate="{{pred}}" out="{{out}}">
54 </rdf-observe>
55
56 <div><span>{{compactUri(subj)}}</span>, <span>{{compactUri(pred)}}</span>,
57 <span class="read">{{formatted(out)}}</span>
58 </div>
59
60 </template>
61 <script>
62 Polymer({
63 is: 'watched-subgraph',
64 properties: {
65 graph: { notify: true },
66 out: { notify: true },
67 pred: { notify: true },
68 subj: { notify: true }
69 },
70 behaviors: [BigastUri],
71 formatted: function (out) {
72 var obj = out[this.compactUri(this.pred)];
73 if (typeof obj == 'string') {
74 return this.compactUri(obj);
79 } else { 75 } else {
80 this.formattedOut = obj['@value']; 76 return obj['@value'];
81 } 77 }
82 } 78 }
83 }); 79 });
84 </script> 80 </script>
85 81 </dom-module>
86 </polymer-element> 82
87 83 <dom-module id="arduinonode-boards">
88 <polymer-element name="arduinonode-boards" noscript> 84 <style>
85 h1 {
86 margin: 0;
87 font-size: 130%;
88 }
89 ul {
90 padding-left: 5px;
91 }
92 .board, .device {
93 border: 1px solid gray;
94 border-radius: 10px;
95 margin: 13px;
96 padding: 7px;
97 box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.14);
98 }
99 .board {
100 background: rgb(244, 244, 244);
101 }
102 .device {
103 background: #fff;
104 }
105 </style>
89 <template> 106 <template>
90 <style> 107 <iron-ajax url="boards" auto="true" handle-as="json"
91 h1 { 108 last-response="{{ret}}"></iron-ajax>
92 margin: 0; 109 <template is="dom-repeat" items="{{ret.boards}}" as="board">
93 font-size: 130%;
94 }
95 ul {
96 padding-left: 5px;
97 }
98 .board, .device {
99 border: 1px solid gray;
100 border-radius: 10px;
101 margin: 13px;
102 padding: 7px;
103 box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.14);
104 }
105 .board {
106 background: rgb(244, 244, 244);
107 }
108 .device {
109 background: #fff;
110 }
111 </style>
112 <core-ajax
113 url="boards"
114 auto="true"
115 handleAs="json"
116 response="{{ret}}"></core-ajax>
117 <template repeat="{{board in ret.boards}}">
118 <div class="board"> 110 <div class="board">
119 <h1>Board <linked-uri href="{{board.uri}}"></linked-uri></h1> 111 <h1>Board <linked-uri href$="{{board.uri}}"></linked-uri></h1>
120 <h2>Devices</h2> 112 <h2>Devices</h2>
121 <ul> 113 <ul>
122 <template repeat="{{dev in board.devices}}"> 114 <template is="dom-repeat" items="{{board.devices}}" as="dev">
123 <div class="device"> 115 <div class="device">
124 <h1> 116 <h1>
125 {{dev.className}} 117 <span>{{dev.className}}</span>
126 <linked-uri href="{{dev.uri}}"></linked-uri> 118 <linked-uri href$="{{dev.uri}}"></linked-uri>
127 </h1> 119 </h1>
128 120 <template is="dom-if" if="{{dev.watchPrefixes.length}}">
129 <template if="{{dev.watchPrefixes.length}}">
130 <div>watching:</div> 121 <div>watching:</div>
131 <ul> 122 <ul>
132 <template repeat="{{prefix in dev.watchPrefixes}}"> 123 <template is="dom-repeat" items="{{dev.watchPrefixes}}" as="prefix">
133 <watched-subgraph 124 <watched-subgraph graph="{{board.graph}}" subj="{{prefix.0}}" pred="{{prefix.1}}"></watched-subgraph>
134 graph="{{board.graph}}"
135 subj="{{prefix[0] | compactUri}}"
136 pred="{{prefix[1] | compactUri}}"></watched-subgraph>
137 </template> 125 </template>
138 </ul> 126 </ul>
139 </template> 127 </template>
140 128
141 <template if="{{dev.outputWidgets.length}}"> 129 <template is="dom-if" if="{{dev.outputWidgets.length}}">
142 <div>send output:</div> 130 <div>send output:</div>
143 <ul> 131 <ul>
144 <template repeat="{{out in dev.outputWidgets}}"> 132 <template is="dom-repeat" items="{{dev.outputWidgets}}" as="out">
145 <div> 133 <div>
146 <output-widget-any desc="{{out}}"></output-widget-any> 134 <output-widget-any desc="{{out}}"></output-widget-any>
147 </div> 135 </div>
148 </template> 136 </template>
149 </ul> 137 </ul>
152 </template> 140 </template>
153 </ul> 141 </ul>
154 </div> 142 </div>
155 </template> 143 </template>
156 </template> 144 </template>
157 </polymer-element> 145 <script>
158 <arduinonode-boards></arduinonode-boards> 146 Polymer({
159 147 is: 'arduinonode-boards',
160 <polymer-element name="data-dump" noscript> 148 behaviors: [BigastUri]
161 <template> 149 });
162 <rdf-observe 150 </script>
163 graph="http://dash:9059/graph" 151 </dom-module>
164 subject="http://bigasterisk.com/homeauto/board1/oneWire/" 152 <arduinonode-boards></arduinonode-boards>
165 predicate="room:temperatureF"
166 out="{{out}}">
167 </rdf-observe>
168 <div>sees: {{out['room:temperatureF']['@value']}}</div>
169
170
171 <rdf-observe
172 graph="http://dash:9059/graph"
173 subject="http://bigasterisk.com/homeauto/board1/oneWire/"
174 predicate="http://projects.bigasterisk.com/room/temperatureRetries"
175 out="{{out2}}">
176 </rdf-observe>
177 <div>sees2: {{out2['room:temperatureRetries']['@value']}}</div>
178
179 </template>
180 </polymer-element>
181 <!-- <data-dump></data-dump> -->
182 </body> 153 </body>
183 </html> 154 </html>