Update simulator as per latest lego UI design for sensors. Fix full screen layout issues. (#554)

This commit is contained in:
Sam El-Husseini
2018-05-02 13:58:59 -07:00
committed by GitHub
parent 4825172423
commit 84990d66a9
14 changed files with 376 additions and 207 deletions

View File

@ -5,6 +5,8 @@ namespace pxsim.visuals {
private control: ColorGridControl;
private static sensor_hole_id = 'color_sensor_white_big';
constructor(port: number) {
super(COLOR_SENSOR_SVG, "color", NodeType.ColorSensor, port);
}
@ -19,7 +21,22 @@ namespace pxsim.visuals {
public updateState() {
super.updateState();
// TODO: show different color modes
const colorState = ev3board().getInputNodes()[this.port];
if (!colorState) return;
const mode = colorState.getMode();
switch (mode) {
case ColorSensorMode.Colors: this.updateSensorLightVisual('#0062DD'); return; // blue
case ColorSensorMode.Reflected: this.updateSensorLightVisual('#F86262'); return; // red
case ColorSensorMode.Ambient: this.updateSensorLightVisual('#67C3E2'); return; // light blue
}
this.updateSensorLightVisual('#ffffff');
}
private updateSensorLightVisual(color: string) {
const sensorHole = this.content.getElementById(this.normalizeId(ColorSensorView.sensor_hole_id)) as SVGCircleElement;
sensorHole.style.fill = color;
}
}
}

View File

@ -107,7 +107,7 @@ namespace pxsim.visuals {
public attachEvents() {
}
public resize(width: number, height: number) {
public resize(width: number, height: number, strict?: boolean) {
super.resize(width, height);
this.updateDimensions(width, height);
}
@ -120,6 +120,7 @@ namespace pxsim.visuals {
const newWidth = currentWidth / currentHeight * height;
this.content.setAttribute('width', `${width}`);
this.content.setAttribute('height', `${newHeight}`);
this.height = newHeight;
}
}
@ -138,16 +139,22 @@ namespace pxsim.visuals {
protected updateOpacity() {
if (this.rendered) {
const opacity = this.selected ? 0.2 : 1;
const opacity = this.selected && this.fadeWhenSelected() ? 0.2 : 1;
if (this.hasClick() && this.opacity != opacity) {
this.opacity = opacity;
this.setOpacity(this.opacity);
}
if (this.hasClick()) {
if (this.selected) this.content.style.cursor = "";
else this.content.style.cursor = "pointer";
}
}
}
protected fadeWhenSelected() {
return true;
}
protected setOpacity(opacity: number) {
this.element.setAttribute("opacity", `${opacity}`);
}

View File

@ -6,14 +6,16 @@ namespace pxsim.visuals {
constructor(xml: string, prefix: string, id: NodeType, port: NodeType) {
super(xml, prefix, id, port);
// Shown by default
this.selected = true;
}
public getSelected() {
return true;
}
public hasClose() {
protected fadeWhenSelected() {
return false;
}
public hasBackground() {
return true;
}
}
}