Index: sky/examples/color/color-chooser.sky |
diff --git a/sky/examples/color/color-chooser.sky b/sky/examples/color/color-chooser.sky |
new file mode 100644 |
index 0000000000000000000000000000000000000000..ad66cf993ff39ef96e2ac17c459c58f24832c859 |
--- /dev/null |
+++ b/sky/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> |