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

Optimize simulator for light mode. (#379)

Browse Source 
* Optimize simulator for light mode.

* Add user-select none.
This commit is contained in:
Sam El-Husseini
2018-03-28 13:36:52 -07:00
committed by GitHub
parent b4b3a24ed2
commit 0dc2548d0b
25 changed files with 108 additions and 631 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
sim/visuals/nodes/brickView.ts
View File

@ -13,6 +13,9 @@ namespace pxsim.visuals {
private currentCanvasX = 178;
private currentCanvasY = 128;
private static LIGHT_BLACK_COLOR = '#6a6a6a';
private static LIGHT_RED_COLOR = '#6a6a6a';
constructor(port: number) {
super(EV3_SVG, "board", NodeType.Brick, port);
}
@ -26,9 +29,16 @@ namespace pxsim.visuals {
this.light = this.content.getElementById(this.normalizeId(BrickView.EV3_LIGHT_ID)) as SVGElement;
}
private setStyleFill(svgId: string, fillUrl: string) {
protected optimizeForLightMode() {
(this.content.getElementById(this.normalizeId('ev3_body_2')) as SVGElement).style.fill = '#f1f1f1';
(this.content.getElementById(this.normalizeId('ev3_screen_grey')) as SVGElement).style.fill = '#a8aaa8';
(this.content.getElementById(this.normalizeId('ev3_grey_buttom')) as SVGElement).style.fill = '#a8aaa8';
(this.content.getElementById(this.normalizeId('btn_part_2')) as SVGElement).style.fill = '#393939';
}
private setStyleFill(svgId: string, fillUrl: string, lightFill?: string) {
const el = (this.content.getElementById(svgId) as SVGRectElement);
if (el) el.style.fill = `url("#${fillUrl}")`;
if (el) el.style.fill = inLightMode() ? lightFill || BrickView.LIGHT_BLACK_COLOR : `url("#${fillUrl}")`;
}
public hasClick() {
@ -64,15 +74,15 @@ namespace pxsim.visuals {
//svg.fill(this.light, "#FFF");
break;
case 1: // LED_GREEN
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-green`));
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-green`), 'green');
//svg.fill(this.light, "#00ff00");
break;
case 2: // LED_RED
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-red`));
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-red`), 'red');
//svg.fill(this.light, "#ff0000");
break;
case 3: // LED_ORANGE
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-orange`));
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-orange`), 'orange');
//svg.fill(this.light, "#FFA500");
break;
case 4: // LED_GREEN_FLASH
@ -120,14 +130,13 @@ namespace pxsim.visuals {
private flash: boolean;
private flashLightAnimationStep(id: string) {
if (this.flash) {
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`));
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`), id);
} else {
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`));
}
this.flash = !this.flash;
}
private pulseLightAnimation(id: string) {
const pattern = this.lastLightPattern;
let fps = 8;
@ -153,21 +162,24 @@ namespace pxsim.visuals {
private pulse: number = 0;
private pulseLightAnimationStep(id: string) {
switch (this.pulse) {
case 0: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
case 1: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
case 2: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
case 3: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
case 4: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
case 5: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`)); break;
case 6: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`)); break;
case 5: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`), id); break;
case 6: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`), id); break;
case 7: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
case 8: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`)); break;
case 8: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`), id); break;
}
this.pulse++;
if (this.pulse == 9) this.pulse = 0;
}
public kill() {
cancelAnimationFrame(this.lastLightAnimationId);
}
public attachEvents() {
let bpState = ev3board().getBrickNode().buttonState;
let stateButtons = bpState.buttons;

4
sim/visuals/nodes/colorSensorView.ts
View File

@ -9,6 +9,10 @@ namespace pxsim.visuals {
super(COLOR_SENSOR_SVG, "color", NodeType.ColorSensor, port);
}
protected optimizeForLightMode() {
(this.content.getElementById(this.normalizeId('color_bigbox-2_path')) as SVGElement).style.fill = '#a8aaa8';
}
public getPaddingRatio() {
return 1 / 4;
}

5
sim/visuals/nodes/gyroSensorView.ts
View File

@ -7,6 +7,11 @@ namespace pxsim.visuals {
super(GYRO_SVG, "gyro", NodeType.GyroSensor, port);
}
protected optimizeForLightMode() {
(this.content.getElementById(this.normalizeId('gyro_white_1')) as SVGElement).style.fill = '#7B7B7B';
(this.content.getElementById(this.normalizeId('gyro_white_small_path')) as SVGElement).style.fill = '#7B7B7B';
}
public getPaddingRatio() {
return 0.3;
}

4
sim/visuals/nodes/infraredview.ts
View File

@ -6,5 +6,9 @@ namespace pxsim.visuals {
constructor(port: number) {
super(INFRARED_SVG, "infrared", NodeType.InfraredSensor, port);
}
protected optimizeForLightMode() {
(this.content.getElementById(this.normalizeId('path9245')) as SVGElement).style.fill = '#f2f2f2';
}
}
}

4
sim/visuals/nodes/mediumMotorView.ts
View File

@ -8,6 +8,10 @@ namespace pxsim.visuals {
super(MEDIUM_MOTOR_SVG, "medium-motor", NodeType.MediumMotor, port, "medmotor_Hole");
}
protected optimizeForLightMode() {
(this.content.getElementById(this.normalizeId('medmotor_box_wgradient')) as SVGElement).style.fill = '#a8aaa8';
}
public getPaddingRatio() {
return 1 / 5;
}

5
sim/visuals/nodes/moduleView.ts
View File

@ -55,6 +55,7 @@ namespace pxsim.visuals {
protected buildDom(): SVGElement {
this.content = svg.parseString(this.xml);
this.buildDomCore();
if (pxsim.inLightMode()) this.optimizeForLightMode();
this.attachEvents();
if (this.hasClick())
this.content.style.cursor = "pointer";
@ -65,6 +66,10 @@ namespace pxsim.visuals {
}
protected optimizeForLightMode() {
}
public getInnerHeight() {
if (!this.content) {
return 0;

15
sim/visuals/nodes/touchSensorView.ts
View File

@ -12,10 +12,17 @@ namespace pxsim.visuals {
private xLinkGradients: string[];
private static LIGHT_TOUCH_BLACK_COLOR = '#000';
private static LIGHT_TOUCH_RED_COLOR = '#d42715';
constructor(port: number) {
super(TOUCH_SENSOR_SVG, "touch", NodeType.TouchSensor, port);
}
protected optimizeForLightMode() {
(this.content.getElementById(this.normalizeId('touch_box_2-2')) as SVGElement).style.fill = '#a8aaa8';
}
public getPaddingRatio() {
return 1 / 4;
}
@ -29,9 +36,9 @@ namespace pxsim.visuals {
if (el) el.setAttribute(attribute, value);
}
private setStyleFill(svgId: string, fillUrl: string) {
private setStyleFill(svgId: string, fillUrl: string, lightFill: string) {
const el = (this.content.getElementById(svgId) as SVGRectElement);
if (el) el.style.fill = `url("#${fillUrl}")`;
if (el) el.style.fill = inLightMode() ? lightFill : `url("#${fillUrl}")`;
}
public attachEvents() {
@ -55,11 +62,11 @@ namespace pxsim.visuals {
private setPressed(pressed: boolean) {
if (pressed) {
for (let i = 0; i < 4; i ++) {
this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_PRESSED[i])}`);
this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_PRESSED[i])}`, TouchSensorView.LIGHT_TOUCH_BLACK_COLOR);
}
} else {
for (let i = 0; i < 4; i ++) {
this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_UNPRESSED[i])}`);
this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_UNPRESSED[i])}`, TouchSensorView.LIGHT_TOUCH_RED_COLOR);
}
}
}