Mercurial > code > home > repos > homeauto
diff lib/homeauto_anynode/static/index.html @ 535:bb43ad96da8c
start homeauto_anynode for files shared between arduino and pi
Ignore-this: 607e3e6e8d43f339caf6758f14619576
| author | drewp@bigasterisk.com |
|---|---|
| date | Thu, 25 Apr 2019 17:34:53 -0700 |
| parents | service/arduinoNode/static/index.html@d4a602576170 |
| children | 62b52bb862f7 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/lib/homeauto_anynode/static/index.html Thu Apr 25 17:34:53 2019 -0700 @@ -0,0 +1,201 @@ +<!doctype html> +<html> + <head> + <title>ha - </title> + <meta name=viewport content="width=device-width, initial-scale=1"> + <meta charset="utf-8" /> + <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents.min.js"></script> + <script src="/lib/require/require-2.3.3.js"></script> + <script> + requirejs.config({ + paths: { + "streamed-graph": "/rdf/streamed-graph", + "quadstore": "/rdf/quadstore", + "async-module": "/lib/async/80f1793/async", + "async": "/lib/async/80f1793/async", + "jsonld-module": "/lib/jsonld.js/0.4.11/js/jsonld", + "jsonld": "/lib/jsonld.js/0.4.11/js/jsonld", + "rdfstore": "/lib/rdf_store/0.9.7/dist/rdfstore", + "moment": "/lib/moment.min", + "underscore": "/lib/underscore-1.5.2.min", + } + }); + </script> + + <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html"> + <link rel="import" href="/lib/polymer/1.0.9/iron-ajax/iron-ajax.html"> + <link rel="import" href="/lib/polymer/1.0.9/iron-flex-layout/iron-flex-layout.html"> + <link rel="import" href="/lib/polymer/1.0.9/paper-button/paper-button.html"> + <link rel="import" href="/rdf/rdf-oneshot.html"> + <link rel="import" href="/rdf/rdf-uri.html"> + <link rel="import" href="/rdf/graph-view.html"> + <link rel="import" href="/rdf/streamed-graph.html"> + <link rel="import" href="static/output-widgets.html"> + <style> + body { + font-family: monospace; + display: flex; + flex-direction: column; + margin: 0; + height: 100vh; + } + </style> + </head> + <body> + <script> + window.NS = { + dev: 'http://projects.bigasterisk.com/device/', + room: 'http://projects.bigasterisk.com/room/', + rdfs: 'http://www.w3.org/2000/01/rdf-schema#', + sensor: 'http://bigasterisk.com/homeauto/sensor/', + b0: 'http://bigasterisk.com/homeauto/board0/', + }; + </script> + + <dom-module id="linked-uri"> + <template> + <a href$="{{href}}">{{compactUri(href)}}</a> + </template> + <script> + HTMLImports.whenReady(function () { + Polymer({ + is: 'linked-uri', + properties: { href: { notify: true } }, + behaviors: [BigastUri] + }); + }); + </script> + </dom-module> + + <dom-module id="watched-subgraph"> + <style> + .read { font-weight: bold; } + </style> + <template> + <div><span>{{compactUri(subj)}}</span>, <span>{{compactUri(pred)}}</span>, + <span class="read">{{formatted(out)}}</span> + </div> + + </template> + <script> + HTMLImports.whenReady(function () { + Polymer({ + is: 'watched-subgraph', + properties: { + streamedGraph: { notify: true, observer: 'onGraphChange' }, // streamed-graph output + out: { notify: true }, + pred: { notify: true }, // uri + subj: { notify: true } // uri + }, + behaviors: [BigastUri], + onGraphChange: function(streamedGraph) { + if (!streamedGraph.graph) { + return; + } + var env = streamedGraph.graph.store.rdf; + streamedGraph.graph.quadStore.quads({subject: env.createNamedNode(this.subj), + predicate: env.createNamedNode(this.pred)}, + function(quad) { + this.out = quad.object.valueOf(); + }.bind(this)); + }, + formatted: function (obj) { + if (typeof(obj) == 'string') { + return this.compactUri(obj); + } else { + return obj; + } + } + }); + }); + </script> + </dom-module> + + <dom-module id="arduinonode-boards"> + <style> + h1 { + margin: 0; + font-size: 130%; + } + ul { + padding-left: 5px; + } + .board, .device { + border: 1px solid gray; + border-radius: 10px; + margin: 13px; + padding: 7px; + box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.14); + } + .board { + background: rgb(244, 244, 244); + } + .device { + background: #fff; + } + .devs { + -webkit-column-width: 440px; + } + .devs .device { + -webkit-column-break-inside: avoid; + } + </style> + <template> + <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph> + <iron-ajax url="boards" auto="true" handle-as="json" + last-response="{{ret}}"></iron-ajax> + <template is="dom-repeat" items="{{ret.boards}}" as="board"> + <div class="board"> + <h1>Board <linked-uri href$="{{board.uri}}"></linked-uri></h1> + <h2>Devices</h2> + <ul class="devs"> + <template is="dom-repeat" items="{{board.devices}}" as="dev"> + <div class="device"> + <h1> + <span>{{dev.className}}</span> + <linked-uri href$="{{dev.uri}}"></linked-uri> + </h1> + <template is="dom-if" if="{{dev.watchPrefixes.length}}"> + <div>watching:</div> + <ul> + <template is="dom-repeat" items="{{dev.watchPrefixes}}" as="prefix"> + <watched-subgraph streamed-graph="{{graph}}" subj="{{prefix.0}}" pred="{{prefix.1}}"></watched-subgraph> + </template> + </ul> + </template> + + <template is="dom-if" if="{{dev.outputWidgets.length}}"> + <div>send output:</div> + <ul> + <template is="dom-repeat" items="{{dev.outputWidgets}}" as="out"> + <div> + <output-widget-any streamed-graph="{{graph}}" desc="{{out}}"></output-widget-any> + </div> + </template> + </ul> + </template> + </div> + </template> + </ul> + </div> + </template> + <graph-view graph="{{graph}}"></graph-view> + </template> + <script> + HTMLImports.whenReady(function () { + Polymer({ + is: 'arduinonode-boards', + properties: { + ret: { type: Object, notify: true, observer: 'onBoards' } + }, + onBoards: function() { + document.title = document.title + ' ' + this.ret.host; + }, + behaviors: [BigastUri] + }); + }); + </script> + </dom-module> + <arduinonode-boards></arduinonode-boards> + </body> +</html>