From 85345969d32220d1456fb4e693218344e36f2783 Mon Sep 17 00:00:00 2001 From: Caitlin Hennessy Date: Wed, 20 Dec 2017 14:58:41 -0800 Subject: [PATCH 1/4] Initial work --- pxtarget.json | 2 +- sim/visuals/controls/colorWheel.ts | 69 +++++++++++++++++++++++------- 2 files changed, 55 insertions(+), 16 deletions(-) diff --git a/pxtarget.json b/pxtarget.json index ac5ef3f1..d995fd64 100644 --- a/pxtarget.json +++ b/pxtarget.json @@ -115,7 +115,7 @@ "path": "/reference" } ], - "showHomeScreen": true, + "showHomeScreen": false, "homeScreenHero": "./static/hero.png", "invertedMenu": false, "invertedMonaco": false, diff --git a/sim/visuals/controls/colorWheel.ts b/sim/visuals/controls/colorWheel.ts index 099314de..4cc7ebd0 100644 --- a/sim/visuals/controls/colorWheel.ts +++ b/sim/visuals/controls/colorWheel.ts @@ -4,30 +4,69 @@ namespace pxsim.visuals { export class ColorWheelControl extends ControlView { private group: SVGGElement; + private colorGradient: SVGLinearGradientElement; + private defs: SVGDefsElement; - private static COLOR_DARK = 1; - private static COLOR_LIGHT = 99; - - getInnerView() { + getInnerView(parent: SVGSVGElement) { + this.defs = svg.child(this.element, "defs", {}); this.group = svg.elt("g") as SVGGElement; this.group.setAttribute("transform", `translate(12, ${this.getHeight() / 2 - 15}) scale(2.5)`) + let gc = "gradient-color"; + this.colorGradient = svg.linearGradient(this.defs, gc, true); + svg.setGradientValue(this.colorGradient, "50%"); + svg.setGradientColors(this.colorGradient, "black", "white"); + const circle = pxsim.svg.child(this.group, "g"); - const lightHalf = pxsim.svg.child(circle, "path", { 'class': 'sim-color-wheel-half', 'd': 'M19,28.76a11.71,11.71,0,1,1,4.58-.92A11.74,11.74,0,0,1,19,28.76Z', 'transform': 'translate(-6.5 -4.5)', 'style': `fill: #fff;stroke: #000;stroke-miterlimit: 10` }); - pxsim.svg.child(circle, "path", { 'd': 'M19,28.52a11.42,11.42,0,0,0,4.48-.9,11.75,11.75,0,0,0,3.67-2.47,11.55,11.55,0,0,0,2.46-3.67,11.48,11.48,0,0,0,0-9,11.41,11.41,0,0,0-6.13-6.13,11.48,11.48,0,0,0-9,0,11.41,11.41,0,0,0-6.13,6.13,11.48,11.48,0,0,0,0,9,11.55,11.55,0,0,0,2.46,3.67,11.75,11.75,0,0,0,3.67,2.47,11.42,11.42,0,0,0,4.48.9M19,29A12,12,0,1,1,31,17,12,12,0,0,1,19,29Z', 'transform': 'translate(-6.5 -4.5)', 'style': `fill: #fff;stroke: #000;stroke-miterlimit: 10` }); - lightHalf.addEventListener(pointerEvents.down, ev => { - this.setColor(ColorWheelControl.COLOR_LIGHT); - }) - const darkHalf = pxsim.svg.child(this.group, "path", { 'class': 'sim-color-wheel-half', 'd': 'M19,5c.16,8.54,0,14.73,0,24A12,12,0,0,1,19,5Z', 'transform': 'translate(-6.5 -4.5)' }); - darkHalf.addEventListener(pointerEvents.down, ev => { - this.setColor(ColorWheelControl.COLOR_DARK); - }) + const circle2 = pxsim.svg.child(circle, "circle", + {cursor: '-webkit-grab', + fill: `url(#${gc})`, + r: 17, + cx: 13, + cy: 20, + stroke: 'black' + }); + + let pt = parent.createSVGPoint(); + let captured = false; + touchEvents(circle, + ev => { + if (captured && (ev as MouseEvent).clientX) { + ev.preventDefault(); + this.setColor(pt, parent, ev as MouseEvent); + } + }, + ev => { + captured = true; + if ((ev as MouseEvent).clientX) { + this.setColor(pt, parent, ev as MouseEvent); + } + }, + ev => { + captured = false; + }, + ev => { + captured = false; + } + ) return this.group; } - private setColor(color: number) { + updateState() { + if (!this.visible) { + return; + } + const node = this.state; + const percentage = node.getValue(); + svg.setGradientValue(this.colorGradient, percentage + "%"); + } + + private setColor(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) { + let width = 87.5; + let cur = svg.cursorPoint(pt, parent, ev); + let t = Math.max(0, Math.min(1, (width + this.left / this.scaleFactor - cur.x / this.scaleFactor) / width)); const state = this.state; - state.setColor(color); + state.setColor((1-t)*100); } } From 3c5dae8c7bc507ad7199bf735126c621b516eecb Mon Sep 17 00:00:00 2001 From: Caitlin Hennessy Date: Wed, 20 Dec 2017 15:11:44 -0800 Subject: [PATCH 2/4] Small changes --- sim/visuals/controls/colorWheel.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sim/visuals/controls/colorWheel.ts b/sim/visuals/controls/colorWheel.ts index 4cc7ebd0..733c0f5f 100644 --- a/sim/visuals/controls/colorWheel.ts +++ b/sim/visuals/controls/colorWheel.ts @@ -18,7 +18,7 @@ namespace pxsim.visuals { svg.setGradientColors(this.colorGradient, "black", "white"); const circle = pxsim.svg.child(this.group, "g"); - const circle2 = pxsim.svg.child(circle, "circle", + const innerCircle = pxsim.svg.child(circle, "circle", {cursor: '-webkit-grab', fill: `url(#${gc})`, r: 17, @@ -62,7 +62,7 @@ namespace pxsim.visuals { } private setColor(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) { - let width = 87.5; + const width = CONTROL_WIDTH; let cur = svg.cursorPoint(pt, parent, ev); let t = Math.max(0, Math.min(1, (width + this.left / this.scaleFactor - cur.x / this.scaleFactor) / width)); const state = this.state; From 38a9f153f73ce9bcf4c80044befdc73219bd3fd7 Mon Sep 17 00:00:00 2001 From: Caitlin Hennessy Date: Wed, 20 Dec 2017 15:15:12 -0800 Subject: [PATCH 3/4] pxtarget --- pxtarget.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pxtarget.json b/pxtarget.json index d995fd64..ac5ef3f1 100644 --- a/pxtarget.json +++ b/pxtarget.json @@ -115,7 +115,7 @@ "path": "/reference" } ], - "showHomeScreen": false, + "showHomeScreen": true, "homeScreenHero": "./static/hero.png", "invertedMenu": false, "invertedMonaco": false, From 703bd019310658a0749014fe80e5fe31a58295fd Mon Sep 17 00:00:00 2001 From: Caitlin Hennessy Date: Wed, 20 Dec 2017 16:25:26 -0800 Subject: [PATCH 4/4] Increase stroke width --- sim/visuals/controls/colorWheel.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/sim/visuals/controls/colorWheel.ts b/sim/visuals/controls/colorWheel.ts index 733c0f5f..80ff4ccf 100644 --- a/sim/visuals/controls/colorWheel.ts +++ b/sim/visuals/controls/colorWheel.ts @@ -24,7 +24,8 @@ namespace pxsim.visuals { r: 17, cx: 13, cy: 20, - stroke: 'black' + stroke: 'black', + 'stroke-width': 2 }); let pt = parent.createSVGPoint();