1 files changed, 118 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/hydrogen-join/demo/index.html b/tensorflow/tensorboard/components/hydrogen-join/demo/index.html
new file mode 100644
index 0000000000..238cff294d
--- /dev/null
+++ b/tensorflow/tensorboard/components/hydrogen-join/demo/index.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>tf-graph Demo</title>
+    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+    <link rel="import" href="../hydrogen-join.html">
+    <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
+    <link rel="import" href="../../../bower_components/paper-slider/paper-slider.html">
+  </head>
+
+  <style>
+    body {
+      font-family: "RobotoDraft","Roboto",sans-serif;
+      font-size: 14;
+    }
+  </style>
+
+  <body unresolved>
+    <dom-module id="button-press-counter">
+      <style>
+        paper-button {
+          background-color: #4DB6AC;
+          color: white;
+        }
+      </style>
+      <template>
+        <paper-button raised on-click="increment"><span>[[count]]<span></paper-button>
+      </template>
+      <script>
+        Polymer({
+          is: "button-press-counter",
+          properties: {count: {notify: true, value: 0}},
+          increment: function() {this.count++;}
+        });
+      </script>
+    </dom-module>
+
+    <dom-module id="args-demo">
+      <template>
+        <h1>args-demo</h1>
+        <button-press-counter count="{{in1}}"></button-press-counter>
+        <button-press-counter count="{{in2}}"></button-press-counter>
+        <button-press-counter count="{{in3}}"></button-press-counter>
+        <hydrogen-join
+          in1="[[in1]]"
+          in2="[[in2]]"
+          in3="[[in3]]"
+          out="{{out}}"
+          id="argsjoin"
+        ></hydrogen-join>
+        <p>Output from the hydrogen-join: <span>[[out]]</span></p>
+      </template>
+      <script>
+        Polymer({
+          is: "args-demo",
+          properties: {
+            in1: Number,
+            in2: Number,
+            in3: Number,
+            out: Array,
+          },
+        });
+      </script>
+    </dom-module>
+
+    <dom-module id="repeat-demo">
+      <style>
+        .button {
+          padding: 3px;
+          margin-bottom: 4px;
+          display: inline-block;
+        }
+      </style>
+      <template>
+        <h1>repeat-demo</h1>
+        <hydrogen-join id="repeatjoin" in-join-property="count" out="{{out}}">
+          <template is="dom-repeat" items="[[counters]]">
+            <button-press-counter class="button" count="[[item]]"></button-press-counter>
+          </template>
+        </hydrogen-join>
+        <br>
+        <p> Move this slider to add/remove buttons. It stays synced! What magic! </p>
+        <paper-slider min="0" max="20" value="{{nCounters}}"></paper-slider>
+        <p>Output from the hydrogen-join: <span>[[out]]</span></p>
+      </template>
+      <script>
+        Polymer({
+          is: "repeat-demo",
+          properties: {
+            nCounters: {type: Number, value: 10},
+            counters: {type: Array, computed: "_makeCounters(nCounters)"},
+          },
+          _makeCounters: function(nCounters) {
+            var c = [];
+            for (var i=0; i<nCounters; i++) {
+              c.push(i);
+            }
+            return c;
+          }
+        });
+      </script>
+    </dom-module>
+
+    <args-demo id="argsdemo"></args-demo>
+    <repeat-demo id="repeatdemo"></repeat-demo>
+  </body>
+</html>