# HG changeset patch
# User drewp@bigasterisk.com
# Date 1436343757 25200
# Node ID fc5fdcc3ed4a9c3d8cbbd9bb7b94a7c051c8f32a
# Parent  57e6d328d45b50a2f13680be9203671c78a067a5
board control ui: output-rgb, fix ajax protocol, display output uris
Ignore-this: f3d3e6739851232d2177eacdd833c16

diff -r 57e6d328d45b -r fc5fdcc3ed4a service/arduinoNode/static/index.html
--- a/service/arduinoNode/static/index.html	Wed Jul 08 01:21:02 2015 -0700
+++ b/service/arduinoNode/static/index.html	Wed Jul 08 01:22:37 2015 -0700
@@ -21,6 +21,7 @@
        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/'
      };
     </script>
 
@@ -46,29 +47,42 @@
     
     <polymer-element name="linked-uri" noscript attributes="href">
       <template>
-        <a href="{{href}}">{{href}}</a>
+        <a href="{{href}}">{{href | compactUri}}</a>
       </template>
     </polymer-element>
 
     <!-- subj/pred are compact uris -->
-    <polymer-element name="watched-subgraph" noscript attributes="subj pred">
+    <polymer-element name="watched-subgraph" attributes="graph subj pred">
       <template>
         <style>
          .read { font-weight: bold; }
         </style>
           
         <rdf-observe
-          graph="http://dash:9059/graph" xtodo="get host here"
+          graph="{{graph}}"
           subject="{{subj}}"
           predicate="{{pred}}"
           out="{{out}}">
         </rdf-observe>
         
-        <div>{{subj}}, {{pred}},
-          <span class="read">{{out[pred]['@value']}}</span>
+        <div>{{subj | compactUri}}, {{pred | compactUri}},
+          <span class="read">{{formattedOut}}</span>
         </div>
         
       </template>
+      <script>
+       Polymer({
+         outChanged: function() {
+           var obj = this.out[this.pred];
+           if (typeof(obj) == 'string') {
+             this.formattedOut = PolymerExpressions.prototype.compactUri(obj);
+           } else {
+             this.formattedOut = obj['@value'];
+           }
+         }
+       });
+      </script>
+        
     </polymer-element>
     
     <polymer-element name="arduinonode-boards" noscript>
@@ -117,6 +131,7 @@
                     <ul>
                       <template repeat="{{prefix in dev.watchPrefixes}}">
                         <watched-subgraph
+                          graph="{{board.graph}}"
                           subj="{{prefix[0] | compactUri}}"
                           pred="{{prefix[1] | compactUri}}"></watched-subgraph>
                       </template>
diff -r 57e6d328d45b -r fc5fdcc3ed4a service/arduinoNode/static/output-widgets.html
--- a/service/arduinoNode/static/output-widgets.html	Wed Jul 08 01:21:02 2015 -0700
+++ b/service/arduinoNode/static/output-widgets.html	Wed Jul 08 01:22:37 2015 -0700
@@ -2,24 +2,38 @@
 
 <polymer-element name="output-widget" attributes="subj pred">
   <template>
-    <core-ajax id="output" url="../output" method="POST"></core-ajax>
-    Set this device's {{pred | compactUri}} to
+    <core-ajax id="output" url="../output" method="PUT"></core-ajax>
+    Set <a href="{{subj}}">{{subj | compactUri}}</a>'s {{pred | compactUri}} to
   </template>
   <script>
-   function ntriple(s, p, o) {
-     // incomplete
-     o = o.replace('\n', '\\n');
-     return '<'+s+'> <'+p+'> "'+o+'".';
-   }
    Polymer({
      valueChanged: function() {
-       this.$.output.body = ntriple(this.subj, this.pred, this.value);
+       //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.body = this.value;
        this.$.output.go();
      }
    });
   </script>
 </polymer-element>
 
+<polymer-element name="output-rgb" extends="output-widget">
+  <template>
+    <color-picker id="pick" width="200" height="100" color="{{value}}"></color-picker>
+    color pick {{value}}
+  </template>
+  <script>
+    Polymer({
+      domReady: function() {
+        this.$.pick.addEventListener('colorselected', function(ev) {
+          this.value = ev.detail.hex;
+        }.bind(this));
+      }
+    });
+  </script>
+</polymer-element>
+
 <polymer-element name="output-slider" extends="output-widget"
                  attributes="min max step"
                  noscript>