view service/arduinoNode/static/index.html @ 173:0daa8cbbd8f6

handle compact/full uris better, but still not always right Ignore-this: 10d98f16a659f899528eb86411473b18
author drewp@bigasterisk.com
date Fri, 17 Apr 2015 02:00:15 -0700
parents 4d2df276baae
children fc5fdcc3ed4a
line wrap: on
line source

<!doctype html>
<html>
  <head>
    <title>arduinoNode</title>
    <meta charset="utf-8" />
    <link rel="import" href="/lib/polymer/0.5.2/polymer/polymer.html">
    <link rel="import" href="/lib/polymer/0.5.2/core-ajax/core-ajax.html">
    <link rel="import" href="/room/ari/static/rdf-observe.html">
    <link rel="import" href="/room/ari/static/rdf-oneshot.html">
    <link rel="import" href="static/output-widgets.html">
    
    <style>
     body {
       font-family: monospace;
     }
    </style>
  </head>
  <body layout vertical fullbleed>
    <script>
     window.NS = {
       dev: 'http://projects.bigasterisk.com/device/',
       room: 'http://projects.bigasterisk.com/room/',
       rdfs: 'http://www.w3.org/2000/01/rdf-schema#',
     };
    </script>

    <script>
     PolymerExpressions.prototype.tojson = function(input) {
       return JSON.stringify(input);
     };

     // not well defined for uri prefixes that are string prefixes of each other
     PolymerExpressions.prototype.compactUri = function(uri) {
       if (uri === undefined) {
         return uri;
       }
       for (var short of Object.keys(window.NS)) {
         var prefix = window.NS[short];
         if (uri.indexOf(prefix) == 0) {
           return short + ':' + uri.substr(prefix.length);
         }
       }
       return uri;
     };
    </script>
    
    <polymer-element name="linked-uri" noscript attributes="href">
      <template>
        <a href="{{href}}">{{href}}</a>
      </template>
    </polymer-element>

    <!-- subj/pred are compact uris -->
    <polymer-element name="watched-subgraph" noscript attributes="subj pred">
      <template>
        <style>
         .read { font-weight: bold; }
        </style>
          
        <rdf-observe
          graph="http://dash:9059/graph" xtodo="get host here"
          subject="{{subj}}"
          predicate="{{pred}}"
          out="{{out}}">
        </rdf-observe>
        
        <div>{{subj}}, {{pred}},
          <span class="read">{{out[pred]['@value']}}</span>
        </div>
        
      </template>
    </polymer-element>
    
    <polymer-element name="arduinonode-boards" noscript>
      <template>
        <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;
         }
        </style>
        <core-ajax
          url="boards"
          auto="true"
          handleAs="json"
          response="{{ret}}"></core-ajax>
        <template repeat="{{board in ret.boards}}">
          <div class="board">
            <h1>Board <linked-uri href="{{board.uri}}"></linked-uri></h1>
            <h2>Devices</h2>
            <ul>
              <template repeat="{{dev in board.devices}}">
                <div class="device">
                  <h1>
                    {{dev.className}}
                    <linked-uri href="{{dev.uri}}"></linked-uri>
                  </h1>

                  <template if="{{dev.watchPrefixes.length}}">
                    <div>watching:</div>
                    <ul>
                      <template repeat="{{prefix in dev.watchPrefixes}}">
                        <watched-subgraph
                          subj="{{prefix[0] | compactUri}}"
                          pred="{{prefix[1] | compactUri}}"></watched-subgraph>
                      </template>
                    </ul>
                  </template>

                  <template if="{{dev.outputWidgets.length}}">
                    <div>send output:</div>
                    <ul>
                      <template repeat="{{out in dev.outputWidgets}}">
                        <div>
                          <output-widget-any desc="{{out}}"></output-widget-any>
                        </div>
                      </template>
                    </ul>
                  </template>
                </div>
              </template>
            </ul>
          </div>
        </template>
      </template>
    </polymer-element>
    <arduinonode-boards></arduinonode-boards>
    
    <polymer-element name="data-dump" noscript>
      <template>
        <rdf-observe
          graph="http://dash:9059/graph"
          subject="http://bigasterisk.com/homeauto/board1/oneWire/"
          predicate="room:temperatureF"
          out="{{out}}">
        </rdf-observe>
        <div>sees: {{out['room:temperatureF']['@value']}}</div>


        <rdf-observe
          graph="http://dash:9059/graph"
          subject="http://bigasterisk.com/homeauto/board1/oneWire/"
          predicate="http://projects.bigasterisk.com/room/temperatureRetries"
          out="{{out2}}">
        </rdf-observe>
        <div>sees2: {{out2['room:temperatureRetries']['@value']}}</div>
        
      </template>
    </polymer-element>
    <!-- <data-dump></data-dump> -->
  </body>
</html>