Mercurial > code > home > repos > homeauto

changeset 998:ecb12305d5ca

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
rewrite to polymer 1 Ignore-this: 9e66ae7e1227732e68393326b2483aa2 darcs-hash:20150830081957-312f9-be4fac6d250655133b68c0fdd6e447b5195ef631
author drewp <drewp@bigasterisk.com>
date Sun, 30 Aug 2015 01:19:57 -0700
parents b24885725f59
children 797fe390bcf0
files service/arduinoNode/static/index.html service/arduinoNode/static/output-widgets.html
diffstat 2 files changed, 190 insertions(+), 167 deletions(-) [+]
line wrap: on
line diff
--- a/service/arduinoNode/static/index.html	Sun Aug 30 01:19:29 2015 -0700
+++ b/service/arduinoNode/static/index.html	Sun Aug 30 01:19:57 2015 -0700
@@ -3,19 +3,25 @@
   <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">
+    <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents.min.js"></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="/room/ari/static/rdf-observe.html">
     <link rel="import" href="/room/ari/static/rdf-oneshot.html">
+    <link rel="import" href="/room/ari/static/rdf-uri.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 layout vertical fullbleed>
+  <body>
     <script>
      window.NS = {
        dev: 'http://projects.bigasterisk.com/device/',
@@ -25,123 +31,105 @@
      };
     </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">
+    <dom-module id="linked-uri">
       <template>
-        <a href="{{href}}">{{href | compactUri}}</a>
-      </template>
-    </polymer-element>
-
-    <!-- subj/pred are compact uris -->
-    <polymer-element name="watched-subgraph" attributes="graph subj pred">
-      <template>
-        <style>
-         .read { font-weight: bold; }
-        </style>
-          
-        <rdf-observe
-          graph="{{graph}}"
-          subject="{{subj}}"
-          predicate="{{pred}}"
-          out="{{out}}">
-        </rdf-observe>
-        
-        <div>{{subj | compactUri}}, {{pred | compactUri}},
-          <span class="read">{{formattedOut}}</span>
-        </div>
-        
+        <a href$="{{href}}">{{compactUri(href)}}</a>
       </template>
       <script>
        Polymer({
-         outChanged: function() {
-           var obj = this.out[this.pred];
-           if (typeof(obj) == 'string') {
-             this.formattedOut = PolymerExpressions.prototype.compactUri(obj);
+         is: 'linked-uri',
+         properties: { href: { notify: true } },
+         behaviors: [BigastUri]
+       });
+      </script>
+    </dom-module>
+
+    <!-- subj/pred are compact uris -->
+    <dom-module id="watched-subgraph">
+      <style>
+       .read { font-weight: bold; }
+      </style>
+      <template>
+        <rdf-observe graph="{{graph}}" subject="{{subj}}" predicate="{{pred}}" out="{{out}}">
+        </rdf-observe>
+
+        <div><span>{{compactUri(subj)}}</span>, <span>{{compactUri(pred)}}</span>,
+          <span class="read">{{formatted(out)}}</span>
+        </div>
+
+      </template>
+      <script>
+       Polymer({
+         is: 'watched-subgraph',
+         properties: {
+           graph: { notify: true },
+           out: { notify: true },
+           pred: { notify: true },
+           subj: { notify: true }
+         },
+         behaviors: [BigastUri],
+         formatted: function (out) {
+           var obj = out[this.compactUri(this.pred)];
+           if (typeof obj == 'string') {
+             return this.compactUri(obj);
            } else {
-             this.formattedOut = obj['@value'];
+             return obj['@value'];
            }
          }
        });
       </script>
-        
-    </polymer-element>
-    
-    <polymer-element name="arduinonode-boards" noscript>
+    </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;
+       }
+      </style>
       <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}}">
+        <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>
+            <h1>Board <linked-uri href$="{{board.uri}}"></linked-uri></h1>
             <h2>Devices</h2>
             <ul>
-              <template repeat="{{dev in board.devices}}">
+              <template is="dom-repeat" items="{{board.devices}}" as="dev">
                 <div class="device">
                   <h1>
-                    {{dev.className}}
-                    <linked-uri href="{{dev.uri}}"></linked-uri>
+                    <span>{{dev.className}}</span>
+                    <linked-uri href$="{{dev.uri}}"></linked-uri>
                   </h1>
-
-                  <template if="{{dev.watchPrefixes.length}}">
+                  <template is="dom-if" if="{{dev.watchPrefixes.length}}">
                     <div>watching:</div>
                     <ul>
-                      <template repeat="{{prefix in dev.watchPrefixes}}">
-                        <watched-subgraph
-                          graph="{{board.graph}}"
-                          subj="{{prefix[0] | compactUri}}"
-                          pred="{{prefix[1] | compactUri}}"></watched-subgraph>
+                      <template is="dom-repeat" items="{{dev.watchPrefixes}}" as="prefix">
+                        <watched-subgraph graph="{{board.graph}}" subj="{{prefix.0}}" pred="{{prefix.1}}"></watched-subgraph>
                       </template>
                     </ul>
                   </template>
 
-                  <template if="{{dev.outputWidgets.length}}">
+                  <template is="dom-if" if="{{dev.outputWidgets.length}}">
                     <div>send output:</div>
                     <ul>
-                      <template repeat="{{out in dev.outputWidgets}}">
+                      <template is="dom-repeat" items="{{dev.outputWidgets}}" as="out">
                         <div>
                           <output-widget-any desc="{{out}}"></output-widget-any>
                         </div>
@@ -154,30 +142,13 @@
           </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> -->
+      <script>
+       Polymer({
+         is: 'arduinonode-boards',
+         behaviors: [BigastUri]
+       });
+      </script>
+    </dom-module>
+    <arduinonode-boards></arduinonode-boards>    
   </body>
 </html>
--- a/service/arduinoNode/static/output-widgets.html	Sun Aug 30 01:19:29 2015 -0700
+++ b/service/arduinoNode/static/output-widgets.html	Sun Aug 30 01:19:57 2015 -0700
@@ -1,84 +1,136 @@
-<link rel="import" href="/lib/polymer/0.5.2/core-ajax/core-ajax.html">
+<link rel="import" href="/lib/polymer/1.0.9/iron-ajax/iron-ajax.html">
+<link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">
+<link rel="import" href="/lib/polymer/1.0.9/color-picker-element/dist/color-picker.html">
+<link rel="import" href="/room/ari/static/rdf-uri.html">
 
-<polymer-element name="output-widget" attributes="subj pred">
+<dom-module id="output-sender">
   <template>
-    <core-ajax id="output" url="../output" method="PUT"></core-ajax>
-    Set <a href="{{subj}}">{{subj | compactUri}}</a>'s {{pred | compactUri}} to
+    <iron-ajax id="output" url="../output" method="PUT"></iron-ajax>
+    Set <a href$="{{subj}}">{{compactUri(subj)}}</a>'s
+    <span>{{compactUri(pred)}}</span> to
   </template>
   <script>
    Polymer({
-     valueChanged: function() {
+     is: 'output-sender',
+     behaviors: [BigastUri],
+     properties: {
+       subj: { notify: true },
+       pred: { notify: true },
+       value: { observer: 'valueChanged' }
+     },
+     valueChanged: function () {
+       if (!this.subj || !this.pred) {
+         return;
+       }
        //this.$.output.headers = {'content-type': ...}
-	// broken in polymer 0.5 this.$.output.params = {s: this.subj, p: this.pred};
-       this.$.output.url = "output?s="+encodeURIComponent(this.subj)+"&p="+encodeURIComponent(this.pred);
+       this.$.output.params = {s: this.subj, p: this.pred};
        this.$.output.body = this.value;
-       this.$.output.go();
+       this.$.output.generateRequest();
      }
    });
   </script>
-</polymer-element>
+</dom-module>
 
-<polymer-element name="output-rgb" extends="output-widget">
+<dom-module id="output-rgb">
   <template>
+    <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
     <color-picker id="pick" width="200" height="100" color="{{value}}"></color-picker>
-    color pick {{value}}
+    color pick <span>{{value}}</span>
+    <button on-click="black">Black</button>
+        <button on-click="white">White</button>
+  </template>
+  <script>
+   Polymer({
+     is: 'output-rgb',
+     properties: {
+       value: { notify: true },
+     },
+     ready: function () {
+       this.$.pick.addEventListener('colorselected', function (ev) {
+         this.value = ev.detail.hex;
+       }.bind(this));
+     },
+     black: function() {this.value = "#000000";},
+     white: function() {this.value = "#ffffff";}
+   });
+  </script>
+</dom-module>
+
+<dom-module id="output-slider">
+  <template>
+    <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
+    <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value::input}}"> <span>{{value}}</span>
   </template>
   <script>
     Polymer({
-      domReady: function() {
-        this.$.pick.addEventListener('colorselected', function(ev) {
-          this.value = ev.detail.hex;
-        }.bind(this));
-      }
+      is: 'output-slider',
+      properties: {
+        max: { notify: true },
+        min: { notify: true },
+        step: { notify: true }
+      },
     });
   </script>
-</polymer-element>
-
-<polymer-element name="output-slider" extends="output-widget"
-                 attributes="min max step"
-                 noscript>
-  <template>
-    <shadow></shadow>
-    <input type="range"
-           min="{{min}}" max="{{max}}" step="{{step}}"
-           value="{{value}}"> {{value}}
-  </template>
-</polymer-element>
+</dom-module>
 
-<polymer-element name="output-fixed-text" extends="output-widget"
-                 attributes="rows cols"
-                 noscript>
+<!--
+    TODO(polyup): Inheriting from other custom elements is not yet supported.
+    See: https://www.polymer-project.org/1.0/docs/migration.html#inheritance
+ -->
+<dom-module id="output-fixed-text">
   <template>
-    <textarea rows="{{rows}}" cols="{{cols}}" value="{{value}}"></textarea>
+    <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
+    <textarea rows="{{rows}}" cols="{{cols}}" value="{{value::input}}"></textarea>
   </template>
-</polymer-element>
+  <script>
+    Polymer({
+      is: 'output-fixed-text',
+      properties: {
+        cols: { notify: true },
+        rows: { notify: true }
+      },
+    });
+  </script>
+</dom-module>
 
-<polymer-element name="output-switch" extends="output-widget">
+<dom-module id="output-switch">
   <template>
-    <shadow></shadow>
-    <input type="checkbox" checked="{{check}}"> {{value}}
+    <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
+    <input type="checkbox" checked="{{check::change}}"> <span>{{value}}</span>
   </template>
   <script>
    Polymer({
-     check: false,
-     checkChanged: function() {
-       this.value = this.check ? "high" : "low";
-     }
+     is: 'output-switch',
+     properties: {
+       check: {
+         type: Boolean,
+         value: false,
+         observer: 'checkChanged'
+       },
+       value: { notify: true }
+     },
+     checkChanged: function () {
+       this.value = this.check ? 'high' : 'low';
+     },
    });
   </script>
-</polymer-element>
+</dom-module>
 
-<polymer-element name="output-widget-any" attributes="desc">
+<dom-module id="output-widget-any">
   <template></template>
   <script>
    Polymer({
-     domReady: function() {
+     is: 'output-widget-any',
+     properties: {
+       desc: { type: Object, notify: true }
+     },
+     ready: function () {
        var elem = document.createElement(this.desc.element);
-       this.shadowRoot.appendChild(elem);
+       this.appendChild(elem);
        for (var k of Object.keys(this.desc)) {
          elem.setAttribute(k, this.desc[k]);
        }
      }
    });
   </script>
-</polymer-element>
+</dom-module>