Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1080)

Unified Diff: sky/examples/color/color-wheel.sky

Issue 872993006: Sky color chooser example (Closed) Base URL: https://github.com/domokit/mojo.git@master
Patch Set: Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« sky/examples/color/color-picker.sky ('K') | « sky/examples/color/color-wheel.png ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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..b5b78aac135db9a02a245c9a0d23738b9c352707
--- /dev/null
+++ b/sky/examples/color/color-wheel.sky
@@ -0,0 +1,100 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
abarth-chromium 2015/01/31 03:20:18 Please add a copyright block.
hansmuller1 2015/02/02 16:32:30 Done.
+
+<sky-element name="color-wheel"
+ attributes="color:string"
+ on-pointerdown="handlePointerDown"
+ on-pointermove="handlePointerMove"
+ on-pointerup="handlePointerUp">
abarth-chromium 2015/01/31 03:20:18 You should listen for on-pointercancel as well. Y
hansmuller1 2015/02/02 16:32:30 Done.
+<template>
+ <style>
+ color-picker {
+ margin: 20px;
+ }
abarth-chromium 2015/01/31 03:20:18 This style doesn't appear to apply to anything.
abarth-chromium 2015/01/31 03:20:18 This style doesn't appear to apply to anything.
hansmuller1 2015/02/02 16:32:30 Oops. Removed that.
+ .color-wheel-img {
abarth-chromium 2015/01/31 03:20:18 There's no need for this class. You can just use
hansmuller1 2015/02/02 16:32:30 Done.
+ min-width: 100%;
+ height: auto;
+ }
+ </style>
+ <img class="color-wheel-img" src="color-wheel.png">
+</template>
+<script>
+function toHexString(n) {
+ var s = Number(n).toString(16).toUpperCase();
+ return (s.length == 1) ? "0" + s : s;
+}
+
+class Color {
+ constructor(r, g, b) {
+ this.r = r;
+ this.g = g;
+ this.b = b;
esprehn 2015/02/01 12:28:43 Object.preventExtensions(this)
hansmuller1 2015/02/02 16:32:30 I got rid of this class, since it ended up with th
+ }
+ toString() {
+ return "#" + toHexString(this.r) + toHexString(this.g) + toHexString(this.b);
+ }
+}
+
+function HSVtoRGB(h, s, v) {
esprehn 2015/02/01 12:28:43 hsvToRgb() Treat acronyms like words.
hansmuller1 2015/02/02 16:32:30 Done.
+ 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;
esprehn 2015/02/01 12:28:43 All these single letter vars are pretty hard to re
hansmuller1 2015/02/02 16:32:30 I removed the re-declaration of r,g,b (and oops).
+ }
+ var r = Math.floor(r * 255);
+ var g = Math.floor(g * 255);
+ var b = Math.floor(b * 255);
+ return new Color(r, g, b);
+}
+
+class ColorWheel {
esprehn 2015/02/01 12:28:43 This should just be a function, it has no state.
hansmuller1 2015/02/02 16:32:30 Done.
+ 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);
+ }
+}
+
+module.exports = class extends SkyElement {
+ created() {
+ super.created();
+ this.pointerIsDown = false;
+ this.colorWheel = new ColorWheel;
+ this.color = "#xFF00FF";
+ }
+ updateColor(event) {
+ var bounds = event.target.getBoundingClientRect();
+ var x = event.x - bounds.left;
+ var y = event.y - bounds.top;
+ var r = Math.min(bounds.width, bounds.height) / 2.0;
+ var rgb = this.colorWheel.xyToRGB(x, y, r);
+ if (rgb)
+ this.color = rgb.toString();
+ }
+ handlePointerDown(event) {
+ this.pointerIsDown = true;
+ this.updateColor(event);
+ }
+ handlePointerMove(event) {
+ if (this.pointerIsDown)
abarth-chromium 2015/01/31 03:20:18 You'll never get a pointermove event unless the po
hansmuller1 2015/02/02 16:32:30 Done.
+ this.updateColor(event);
+ }
+ handlePointerUp(event) {
+ this.pointerIsDown = false;
+ }
+}.register();
+</script>
+</sky-element>
« sky/examples/color/color-picker.sky ('K') | « sky/examples/color/color-wheel.png ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698