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