A simple Sky color chooser example. The color-picker is

two components: color-wheel, and color-picker which adds
a div that displays the selected color. Data binding is
used to connect the color-wheel's "color" property to the
sample div's background-color.

BUG=
R=abarth@chromium.org

Review URL: https://codereview.chromium.org/872993006

examples/color/color-picker-demo.sky

@@ -0,0 +1,10 @@
+#!mojo mojo:sky_viewer
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<sky>
+<import src="color-picker.sky" />
+<color-picker />
+</sky>

examples/color/color-picker.sky

@@ -0,0 +1,32 @@
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<sky>
+<import src="/sky/framework/sky-box.sky"/>
+<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
+<import src="color-wheel.sky" />
+<sky-element name="color-picker">
+<template>
+  <style>
+  #color-sample {
+     height: 100px;
+     margin-top: 10px;
+     background-color: {{ inputColor }};
+  }
+  </style>
+  <sky-box title='Choose a Color'>
+    <color-wheel color="{{ inputColor }}"/>
+    <div id="color-sample"></div>
+  </sky-box>
+</template>
+<script>
+module.exports = class extends SkyElement {
+  created() {
+    this.inputColor = "#FFFFFF";
+  }
+}.register();
+</script>
+</sky-element>
+</sky>

examples/color/color-wheel.sky

@@ -0,0 +1,86 @@
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="color-wheel"
+    attributes="color:string"
+    on-pointerdown="handlePointerDown"
+    on-pointermove="handlePointerMove">
+<template>
+  <style>
+    img {
+      min-width: 100%;
+      height: auto;
+    }
+  </style>
+  <img class="color-wheel-img" src="color-wheel.png">
+</template>
+<script>
+function hsvToRgb(h, s, v) {
+  var i = Math.floor(h * 6);
+  var f = h * 6 - i;
+  var p = v * (1 - s);
+  var q = v * (1 - f * s);
+  var t = v * (1 - (1 - f) * s);
+  var r, g, b;
+  switch (i % 6) {
+    case 0: r = v, g = t, b = p; break;
+    case 1: r = q, g = v, b = p; break;
+    case 2: r = p, g = v, b = t; break;
+    case 3: r = p, g = q, b = v; break;
+    case 4: r = t, g = p, b = v; break;
+    case 5: r = v, g = p, b = q; break;
+  }
+  return {
+      r: Math.floor(r * 255), 
+      g: Math.floor(g * 255), 
+      b: Math.floor(b * 255)
+  };
+}
+
+function xyToRgb(x, y, radius) {
+  var rx = x - radius;
+  var ry = y - radius;
+  var d = radius * radius;
+  if (rx * rx + ry * ry > d)
+    return undefined;
+  var h = (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI);
+  var s = Math.sqrt(d) / radius;
+  return hsvToRgb(h, s, 1);
+}
+
+function toHexString(n) {
+  var s = Number(n).toString(16).toUpperCase();
+  return (s.length == 1) ? "0" + s : s;
+}
+
+function rgbToString(rgb) {
+  return "#" + toHexString(rgb.r) + toHexString(rgb.g) + toHexString(rgb.b);
+}
+
+module.exports = class extends SkyElement {
+  created() {
+    super.created();
+    this.color = "#xFF00FF";
+  }
+  updateColor(event) {
+    var bounds = event.target.getBoundingClientRect();
+    var x = event.x - bounds.left;
+    var y = event.y - bounds.top;
+    var radius = Math.min(bounds.width, bounds.height) / 2.0;
+    var rgb = xyToRgb(x, y, radius);
+    if (rgb)
+      this.color = rgbToString(rgb);
+  }
+  handlePointerDown(event) {
+    this.updateColor(event);
+  }
+  handlePointerMove(event) {
+    this.updateColor(event);
+  }
+}.register();
+</script>
+</sky-element>