c_meyer/pxt-ev3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial work

Browse Source
This commit is contained in:
Caitlin Hennessy
2017-12-20 14:58:41 -08:00
parent ac1e5d2846
commit 85345969d3
2 changed files with 55 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pxtarget.json
View File

@@ -115,7 +115,7 @@
"path": "/reference"
}
],
"showHomeScreen": true,
"showHomeScreen": false,
"homeScreenHero": "./static/hero.png",
"invertedMenu": false,
"invertedMonaco": false,

69
sim/visuals/controls/colorWheel.ts
View File

@@ -4,30 +4,69 @@ namespace pxsim.visuals {
export class ColorWheelControl extends ControlView<ColorSensorNode> {
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 = <SVGDefsElement>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);
}
}