--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/lib/homeauto_anynode/static/output-widgets.html	Thu Apr 25 17:34:53 2019 -0700
@@ -0,0 +1,199 @@
+<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="/rdf/rdf-uri.html">
+
+<dom-module id="output-sender">
+  <template>
+    <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({
+     is: 'output-sender',
+     behaviors: [BigastUri],
+     properties: {
+       output: { type: String, value: "output" }, // url to PUT outputs
+       streamedGraph: { notify: true, observer: 'onGraphChange' },
+       subj: { notify: true },
+       pred: { notify: true },
+       value: { notify: true, observer: 'browserChangedValue' }
+     },
+     ready: function() {
+       this.waitOnChangeMs = 100;
+       this.smallestRequestPeriodMs = 100;
+       this.synced = false;
+       
+       this.newRequestNeedsSending = false;
+       this.lastSendMs = 0;
+       this.$.output.addEventListener('response', this.onResponse.bind(this));
+
+     },
+     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.serverChangedValue(quad.object.valueOf());
+       }.bind(this));
+     },
+     onResponse: function() {
+       if (!this.newRequestNeedsSending) {
+         return;
+       }
+       if (this.$.output.activeRequests.length > 0) {
+         return; // 'response' event will call us back
+       }
+
+       var now = Date.now(), dt = now - this.lastSendMs;
+       if (dt < this.smallestRequestPeriodMs) {
+         setTimeout(this.onResponse.bind(this),
+                    this.smallestRequestPeriodMs - dt);
+         return;
+       } 
+       this.newRequestNeedsSending = false;
+       this.lastSendMs = now;
+       this.$.output.generateRequest();
+     },
+     browserChangedValue: function () {
+       if (!this.subj || !this.pred) {
+         return;
+       }
+       //this.$.output.headers = {'content-type': ...}
+       this.$.output.params = {s: this.subj, p: this.pred};
+       this.$.output.body = this.value;
+       this.newRequestNeedsSending = true;
+       setTimeout(this.onResponse.bind(this), this.waitOnChangeMs);
+     },
+     serverChangedValue: function(v) {
+       this.value = v;
+       this.synced = true;
+     }
+   });
+  </script>
+</dom-module>
+
+<dom-module id="output-rgb">
+  <template>
+    <div style="display: flex">
+      <div>
+        <output-sender streamed-graph="{{streamedGraph}}" subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
+        <div>color pick <span>{{value}}</span>
+        <button on-click="black">Black</button>
+        <button on-click="white">White</button>
+        </div>
+      </div>
+      <div>
+        <color-picker id="pick" width="200" height="100" color="{{value}}"></color-picker>
+      </div>
+    </div>
+  </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 streamed-graph="{{streamedGraph}}" output="{{output}}" 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({
+     is: 'output-slider',
+     properties: {
+       output: { notify: true },
+       streamedGraph: { notify: true }, 
+       max: { notify: true },
+       min: { notify: true },
+       step: { notify: true }
+     },
+   });
+  </script>
+</dom-module>
+
+<!--
+    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>
+    <output-sender streamed-graph="{{streamedGraph}}" subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
+    <textarea rows="{{rows}}" cols="{{cols}}" value="{{value::input}}"></textarea>
+  </template>
+  <script>
+    Polymer({
+      is: 'output-fixed-text',
+      properties: {
+        cols: { notify: true },
+        rows: { notify: true }
+      },
+    });
+  </script>
+</dom-module>
+
+<dom-module id="output-switch">
+  <template>
+    <output-sender streamed-graph="{{streamedGraph}}" subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
+    <input type="checkbox" checked="{{check::change}}"> <span>{{value}}</span>
+  </template>
+  <script>
+   Polymer({
+     is: 'output-switch',
+     properties: {
+       check: {
+         type: Boolean,
+         value: false,
+         observer: 'checkChanged'
+       },
+       value: { notify: true }
+     },
+     checkChanged: function () {
+       this.value = this.check ? 'high' : 'low';
+     },
+   });
+  </script>
+</dom-module>
+
+<dom-module id="output-widget-any">
+  <template></template>
+  <script>
+   Polymer({
+     is: 'output-widget-any',
+     properties: {
+       desc: { type: Object, notify: true },
+       streamedGraph: { type: Object, notify: true, observer: 'onGraph' },
+     },
+     ready: function () {
+       this.elem = document.createElement(this.desc.element);
+       this.appendChild(this.elem);
+       for (var k of Object.keys(this.desc)) {
+         this.elem.setAttribute(k, this.desc[k]);
+       }
+       this.elem.streamedGraph = this.streamedGraph;
+     },
+     onGraph: function(g) {
+       if (this.elem) {
+         this.elem.streamedGraph = g;
+       }
+     }
+   });
+  </script>
+</dom-module>