From 819d14cbd226012f687a67e9d1e7460b36ef46cc Mon Sep 17 00:00:00 2001
From: Hans Muller <hansmuller@chromium.org>
Date: Thu, 19 Feb 2015 15:08:20 -0800
Subject: [PATCH] Dart version of the Sky color chooser

I haven't removed the JS color picker code yet.

R=abarth@chromium.org

Review URL: https://codereview.chromium.org/940233002
---
 examples/color/color-chooser.sky | 96 ++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 examples/color/color-chooser.sky

diff --git a/examples/color/color-chooser.sky b/examples/color/color-chooser.sky
new file mode 100644
index 0000000000..ad66cf993f
--- /dev/null
+++ b/examples/color/color-chooser.sky
@@ -0,0 +1,96 @@
+#!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>
+  <style>
+    #chooser {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 5%;
+    }
+    #color-wheel {
+      min-width: 100%;
+      height: auto;
+    }
+    #color-sample {
+      margin: 5%;
+      padding: 10%;
+      text-align: center;
+      border-radius: 10px;
+    }
+  </style>
+  <div id="chooser">
+    <img id="color-wheel" src="color-wheel.png"/>
+    <h1 id="color-sample">Select Color</h1>
+  </div>
+  <script>
+  import 'dart:sky';
+  import 'dart:math';
+
+  class RGB {
+    final int r;
+    final int g;
+    final int b;
+    const RGB(this.r, this.g, this.b);
+    String toString() => "rgb($r, $g, $b)";
+  }
+
+  RGB hsvToRgb(double h, double s, double v) {
+    var i = (h * 6).floor();
+    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 new RGB((r * 255).floor(), (g * 255).floor(), (b * 255).floor());
+  }
+
+  RGB xyToRgb(x, y, radius) {
+    var rx = x - radius;
+    var ry = y - radius;
+    var d = radius * radius;
+    if (rx * rx + ry * ry > d)
+      return null;
+    var h = (atan2(ry, rx) + PI) / (2 * PI);
+    var s = sqrt(d) / radius;
+    return hsvToRgb(h, s, 1.0);
+  }
+
+  elt(String id) => document.getElementById(id);
+
+  void updateColor(event) {
+    var bounds = event.target.getBoundingClientRect();
+    var x = event.x - bounds.left;
+    var y = event.y - bounds.top;
+    var radius = min(bounds.width, bounds.height) / 2.0;
+    var rgb = xyToRgb(x, y, radius);
+    if (rgb != null) {
+      var ccsColor = rgb.toString();
+      elt("color-sample").style["background-color"] = ccsColor;
+    }
+  }
+
+  void selectColor(event) {
+    var ccsColor = elt("color-sample").style["background-color"];
+    print(ccsColor);
+  }
+
+  void main() {
+    elt("color-wheel").addEventListener("pointerdown", updateColor);
+    elt("color-sample").addEventListener("pointerdown", selectColor);
+    elt("color-sample").style["background-color"] = "rgb(0, 209, 255)";
+  }
+  </script>
+</sky>