Update simulator as per latest lego UI design for sensors. Fix full screen layout issues. (#554)
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@ -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}`);
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user