Mercurial > code > home > repos > homeauto

<!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>
author	drewp@bigasterisk.com
date	Mon, 06 Mar 2017 00:06:10 -0800
parents	4ebb5cc30002
children