Mercurial > code > home > repos > homeauto

comparison service/arduinoNode/static/index.html @ 1038:ffe6a00c6cef

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 darcs-hash:b4350a6308480857b2846a8518190b956981eef4
author drewp <drewp@bigasterisk.com>
date Sat, 30 Jan 2016 06:40:00 -0800
parents bf03f5185e8f
children d4a602576170
comparison
equal deleted inserted replaced
1037:8d1a8a96e895 1038:ffe6a00c6cef
1 <!doctype html> 1 <!doctype html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <title>arduinoNode - </title> 4 <title>ha - </title>
5 <meta name=viewport content="width=device-width, initial-scale=1"> 5 <meta name=viewport content="width=device-width, initial-scale=1">
6 <meta charset="utf-8" /> 6 <meta charset="utf-8" />
7 <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents.min.js"></script> 7 <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents.min.js"></script>
8 <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html"> 8 <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">
9 <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-ajax/iron-ajax.html">
10 <link rel="import" href="/lib/polymer/1.0.9/iron-flex-layout/iron-flex-layout.html"> 10 <link rel="import" href="/lib/polymer/1.0.9/iron-flex-layout/iron-flex-layout.html">
11 <link rel="import" href="/lib/polymer/1.0.9/paper-button/paper-button.html"> 11 <link rel="import" href="/lib/polymer/1.0.9/paper-button/paper-button.html">
12 <link rel="import" href="/room/ari/static/rdf-observe.html"> 12 <link rel="import" href="/rdf/rdf-oneshot.html">
13 <link rel="import" href="/room/ari/static/rdf-oneshot.html"> 13 <link rel="import" href="/rdf/rdf-uri.html">
14 <link rel="import" href="/room/ari/static/rdf-uri.html">
15 <link rel="import" href="static/output-widgets.html">
16 <link rel="import" href="/rdf/streamed-graph.html"> 14 <link rel="import" href="/rdf/streamed-graph.html">
17 <link rel="import" href="/rdf/graph-view.html"> 15 <link rel="import" href="/rdf/graph-view.html">
16 <link rel="import" href="static/output-widgets.html">
18 <style> 17 <style>
19 body { 18 body {
20 font-family: monospace; 19 font-family: monospace;
21 display: flex; 20 display: flex;
22 flex-direction: column; 21 flex-direction: column;
49 }); 48 });
50 }); 49 });
51 </script> 50 </script>
52 </dom-module> 51 </dom-module>
53 52
54 <!-- subj/pred are compact uris -->
55 <dom-module id="watched-subgraph"> 53 <dom-module id="watched-subgraph">
56 <style> 54 <style>
57 .read { font-weight: bold; } 55 .read { font-weight: bold; }
58 </style> 56 </style>
59 <template> 57 <template>
60 <rdf-observe graph="{{graph}}" subject="{{subj}}" predicate="{{pred}}" out="{{out}}">
61 </rdf-observe>
62
63 <div><span>{{compactUri(subj)}}</span>, <span>{{compactUri(pred)}}</span>, 58 <div><span>{{compactUri(subj)}}</span>, <span>{{compactUri(pred)}}</span>,
64 <span class="read">{{formatted(out)}}</span> 59 <span class="read">{{formatted(out)}}</span>
65 </div> 60 </div>
66 61
67 </template> 62 </template>
68 <script> 63 <script>
69 HTMLImports.whenReady(function () { 64 HTMLImports.whenReady(function () {
70 Polymer({ 65 Polymer({
71 is: 'watched-subgraph', 66 is: 'watched-subgraph',
72 properties: { 67 properties: {
73 graph: { notify: true }, 68 streamedGraph: { notify: true, observer: 'onGraphChange' }, // streamed-graph output
74 out: { notify: true }, 69 out: { notify: true },
75 pred: { notify: true }, 70 pred: { notify: true }, // uri
76 subj: { notify: true } 71 subj: { notify: true } // uri
77 }, 72 },
78 behaviors: [BigastUri], 73 behaviors: [BigastUri],
79 formatted: function (out) { 74 onGraphChange: function(streamedGraph) {
80 var obj = out[this.compactUri(this.pred)]; 75 if (!streamedGraph.graph) {
81 if (typeof obj == 'string') { 76 return;
77 }
78 var env = streamedGraph.graph.store.rdf;
79 streamedGraph.graph.quadStore.quads({subject: env.createNamedNode(this.subj),
80 predicate: env.createNamedNode(this.pred)},
81 function(quad) {
82 this.out = quad.object.valueOf();
83 }.bind(this));
84 },
85 formatted: function (obj) {
86 if (typeof(obj) == 'string') {
82 return this.compactUri(obj); 87 return this.compactUri(obj);
83 } else { 88 } else {
84 return obj['@value']; 89 return obj;
85 } 90 }
86 } 91 }
87 }); 92 });
88 }); 93 });
89 </script> 94 </script>
109 background: rgb(244, 244, 244); 114 background: rgb(244, 244, 244);
110 } 115 }
111 .device { 116 .device {
112 background: #fff; 117 background: #fff;
113 } 118 }
119 .devs {
120 -webkit-column-width: 440px;
121 }
122 .devs .device {
123 -webkit-column-break-inside: avoid;
124 }
114 </style> 125 </style>
115 <template> 126 <template>
127 <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph>
116 <iron-ajax url="boards" auto="true" handle-as="json" 128 <iron-ajax url="boards" auto="true" handle-as="json"
117 last-response="{{ret}}"></iron-ajax> 129 last-response="{{ret}}"></iron-ajax>
118 <template is="dom-repeat" items="{{ret.boards}}" as="board"> 130 <template is="dom-repeat" items="{{ret.boards}}" as="board">
119 <div class="board"> 131 <div class="board">
120 <h1>Board <linked-uri href$="{{board.uri}}"></linked-uri></h1> 132 <h1>Board <linked-uri href$="{{board.uri}}"></linked-uri></h1>
121 <h2>Devices</h2> 133 <h2>Devices</h2>
122 <ul> 134 <ul class="devs">
123 <template is="dom-repeat" items="{{board.devices}}" as="dev"> 135 <template is="dom-repeat" items="{{board.devices}}" as="dev">
124 <div class="device"> 136 <div class="device">
125 <h1> 137 <h1>
126 <span>{{dev.className}}</span> 138 <span>{{dev.className}}</span>
127 <linked-uri href$="{{dev.uri}}"></linked-uri> 139 <linked-uri href$="{{dev.uri}}"></linked-uri>
128 </h1> 140 </h1>
129 <template is="dom-if" if="{{dev.watchPrefixes.length}}"> 141 <template is="dom-if" if="{{dev.watchPrefixes.length}}">
130 <div>watching:</div> 142 <div>watching:</div>
131 <ul> 143 <ul>
132 <template is="dom-repeat" items="{{dev.watchPrefixes}}" as="prefix"> 144 <template is="dom-repeat" items="{{dev.watchPrefixes}}" as="prefix">
133 <watched-subgraph graph="{{board.graph}}" subj="{{prefix.0}}" pred="{{prefix.1}}"></watched-subgraph> 145 <watched-subgraph streamed-graph="{{graph}}" subj="{{prefix.0}}" pred="{{prefix.1}}"></watched-subgraph>
134 </template> 146 </template>
135 </ul> 147 </ul>
136 </template> 148 </template>
137 149
138 <template is="dom-if" if="{{dev.outputWidgets.length}}"> 150 <template is="dom-if" if="{{dev.outputWidgets.length}}">
139 <div>send output:</div> 151 <div>send output:</div>
140 <ul> 152 <ul>
141 <template is="dom-repeat" items="{{dev.outputWidgets}}" as="out"> 153 <template is="dom-repeat" items="{{dev.outputWidgets}}" as="out">
142 <div> 154 <div>
143 <output-widget-any desc="{{out}}"></output-widget-any> 155 <output-widget-any streamed-graph="{{graph}}" desc="{{out}}"></output-widget-any>
144 </div> 156 </div>
145 </template> 157 </template>
146 </ul> 158 </ul>
147 </template> 159 </template>
148 </div> 160 </div>
149 </template> 161 </template>
150 </ul> 162 </ul>
151 </div> 163 </div>
152 </template> 164 </template>
153 <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph>
154 <graph-view graph="{{graph}}"></graph-view> 165 <graph-view graph="{{graph}}"></graph-view>
155 </template> 166 </template>
156 <script> 167 <script>
157 HTMLImports.whenReady(function () { 168 HTMLImports.whenReady(function () {
158 Polymer({ 169 Polymer({