Ir proximity in simulator (#299)
* support for IR proximity * fixing build issue * missing break * remove auto-start of sensor * setting mode on onEvent * flooring slider value * bump up proximity * fixing threshold blocks
This commit is contained in:
Peli de Halleux
GitHub
parent
15ee6ebe9c
commit
89a82b54dc
@ -23,7 +23,7 @@ const enum IrRemoteButton {
|
|||||||
|
|
||||||
const enum InfraredSensorEvent {
|
const enum InfraredSensorEvent {
|
||||||
//% block="object near"
|
//% block="object near"
|
||||||
ObjectNear = 1,
|
ObjectNear = 3,
|
||||||
//% block="object detected"
|
//% block="object detected"
|
||||||
ObjectDetected = 2
|
ObjectDetected = 2
|
||||||
}
|
}
|
||||||
@ -60,11 +60,12 @@ namespace sensors {
|
|||||||
buttons.push(new RemoteInfraredBeaconButton(new brick.Button()))
|
buttons.push(new RemoteInfraredBeaconButton(new brick.Button()))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// this defeats our static allocation system
|
||||||
// make sure sensors are up
|
// make sure sensors are up
|
||||||
create(infraredSensor1)
|
//create(infraredSensor1)
|
||||||
create(infraredSensor2)
|
//create(infraredSensor2)
|
||||||
create(infraredSensor3)
|
//create(infraredSensor3)
|
||||||
create(infraredSensor4)
|
//create(infraredSensor4)
|
||||||
}
|
}
|
||||||
|
|
||||||
let num = -1
|
let num = -1
|
||||||
@ -196,6 +197,7 @@ namespace sensors {
|
|||||||
//% weight=100 blockGap=8
|
//% weight=100 blockGap=8
|
||||||
//% group="Infrared Sensor"
|
//% group="Infrared Sensor"
|
||||||
onEvent(event: InfraredSensorEvent, handler: () => void) {
|
onEvent(event: InfraredSensorEvent, handler: () => void) {
|
||||||
|
this._setMode(IrSensorMode.Proximity)
|
||||||
control.onEvent(this._id, event, handler);
|
control.onEvent(this._id, event, handler);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -210,6 +212,7 @@ namespace sensors {
|
|||||||
//% weight=99 blockGap=8
|
//% weight=99 blockGap=8
|
||||||
//% group="Infrared Sensor"
|
//% group="Infrared Sensor"
|
||||||
pauseUntil(event: InfraredSensorEvent) {
|
pauseUntil(event: InfraredSensorEvent) {
|
||||||
|
this._setMode(IrSensorMode.Proximity)
|
||||||
control.waitForEvent(this._id, event);
|
control.waitForEvent(this._id, event);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -222,7 +225,7 @@ namespace sensors {
|
|||||||
//% blockId=infraredGetProximity
|
//% blockId=infraredGetProximity
|
||||||
//% parts="infrared"
|
//% parts="infrared"
|
||||||
//% blockNamespace=sensors
|
//% blockNamespace=sensors
|
||||||
//% weight=65 blockGap=8
|
//% weight=98 blockGap=8
|
||||||
//% group="Infrared Sensor"
|
//% group="Infrared Sensor"
|
||||||
proximity(): number {
|
proximity(): number {
|
||||||
this._setMode(IrSensorMode.Proximity)
|
this._setMode(IrSensorMode.Proximity)
|
||||||
|
|||||||
@ -143,6 +143,7 @@ namespace pxsim {
|
|||||||
case DAL.DEVICE_TYPE_COLOR: this.inputNodes[port] = new ColorSensorNode(port); break;
|
case DAL.DEVICE_TYPE_COLOR: this.inputNodes[port] = new ColorSensorNode(port); break;
|
||||||
case DAL.DEVICE_TYPE_TOUCH: this.inputNodes[port] = new TouchSensorNode(port); break;
|
case DAL.DEVICE_TYPE_TOUCH: this.inputNodes[port] = new TouchSensorNode(port); break;
|
||||||
case DAL.DEVICE_TYPE_ULTRASONIC: this.inputNodes[port] = new UltrasonicSensorNode(port); break;
|
case DAL.DEVICE_TYPE_ULTRASONIC: this.inputNodes[port] = new UltrasonicSensorNode(port); break;
|
||||||
|
case DAL.DEVICE_TYPE_IR: this.inputNodes[port] = new InfraredSensorNode(port); break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return this.inputNodes[port];
|
return this.inputNodes[port];
|
||||||
|
|||||||
35
sim/state/infrared.ts
Normal file
35
sim/state/infrared.ts
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
/// <reference path="./sensor.ts"/>
|
||||||
|
|
||||||
|
namespace pxsim {
|
||||||
|
export enum InfraredSensorMode {
|
||||||
|
None = -1,
|
||||||
|
Proximity = 0,
|
||||||
|
Seek = 1,
|
||||||
|
RemoteControl = 2
|
||||||
|
}
|
||||||
|
|
||||||
|
export class InfraredSensorNode extends UartSensorNode {
|
||||||
|
id = NodeType.InfraredSensor;
|
||||||
|
|
||||||
|
private proximity: number = 50; // [0..100]
|
||||||
|
|
||||||
|
constructor(port: number) {
|
||||||
|
super(port);
|
||||||
|
}
|
||||||
|
|
||||||
|
getDeviceType() {
|
||||||
|
return DAL.DEVICE_TYPE_IR;
|
||||||
|
}
|
||||||
|
|
||||||
|
setPromixity(proximity: number) {
|
||||||
|
if (this.proximity != proximity) {
|
||||||
|
this.proximity = proximity;
|
||||||
|
this.setChangedState();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getValue() {
|
||||||
|
return this.proximity;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -7,7 +7,8 @@ namespace pxsim {
|
|||||||
LargeMotor = 4,
|
LargeMotor = 4,
|
||||||
GyroSensor = 5,
|
GyroSensor = 5,
|
||||||
ColorSensor = 6,
|
ColorSensor = 6,
|
||||||
UltrasonicSensor = 7
|
UltrasonicSensor = 7,
|
||||||
|
InfraredSensor = 8
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Node {
|
export interface Node {
|
||||||
|
|||||||
79
sim/visuals/assets/infraredsvg.ts
Normal file
79
sim/visuals/assets/infraredsvg.ts
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
namespace pxsim {
|
||||||
|
export const INFRARED_SVG = `<svg id="svg5190" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 83.53 35.14">
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip-path" transform="translate(0.04 -22.43)">
|
||||||
|
<circle cx="17.53" cy="40" r="6.98" style="fill: none"/>
|
||||||
|
</clipPath>
|
||||||
|
<clipPath id="clip-path-2" transform="translate(0.04 -22.43)">
|
||||||
|
<circle cx="65.92" cy="40" r="6.98" style="fill: none"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<title>ultra sonic</title>
|
||||||
|
<g id="ultra_sonic" data-name="ultra sonic">
|
||||||
|
<rect id="US_main_black2" data-name="US main black2" x="22.57" y="1.49" width="43.38" height="31.25" style="fill: #242424"/>
|
||||||
|
<rect id="US_main_black1" data-name="US main black1" x="30.16" y="8.47" width="25.33" height="17.59"/>
|
||||||
|
<g id="US_eye1" data-name="US eye1">
|
||||||
|
<g id="US_eye1_black" data-name="US eye1 black">
|
||||||
|
<circle cx="17.57" cy="17.57" r="17.44" style="stroke: #b3b3b3;stroke-miterlimit: 10;stroke-width: 0.25px"/>
|
||||||
|
<circle cx="17.57" cy="17.57" r="17.32" style="fill: none"/>
|
||||||
|
</g>
|
||||||
|
<circle id="US_eye1_red" data-name="US eye1 red" cx="17.57" cy="17.57" r="10.77" style="fill: #ab1919"/>
|
||||||
|
<circle id="US_eye1_gold_circle" data-name="US eye1 gold circle" cx="17.57" cy="17.57" r="8.04" style="fill: #aa7707"/>
|
||||||
|
<circle id="US_eye1_wh_in_gold" data-name="US eye1 wh in gold" cx="17.57" cy="17.57" r="6.98" style="fill: #f1f1f1"/>
|
||||||
|
<g id="US_eye1_net" data-name="US eye1 net">
|
||||||
|
<g style="clip-path: url(#clip-path)">
|
||||||
|
<g id="US_eye1_net_mask" data-name="US eye1 net mask">
|
||||||
|
<g id="US_eye1_net_total" data-name="US eye1 net total">
|
||||||
|
<rect id="US_eye1_net14" data-name="US eye1 net14" x="10.84" y="33.53" width="0.61" height="22.79" transform="translate(-20.93 -10.84) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye1_net13" data-name="US eye1 net13" x="11.8" y="47.44" width="22.51" height="0.61" transform="translate(-20.75 -4.51) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye1_net12" data-name="US eye1 net12" x="13.33" y="32.09" width="0.61" height="22.79" transform="translate(-19.88 -9.79) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye1_net11" data-name="US eye1 net11" x="10.36" y="44.95" width="22.51" height="0.61" transform="translate(-19.7 -5.56) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye1_net10" data-name="US eye1 net10" x="15.83" y="30.65" width="0.61" height="22.79" transform="translate(-18.82 -8.73) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye1_net9" data-name="US eye1 net9" x="8.92" y="42.45" width="22.51" height="0.61" transform="translate(-18.64 -6.62) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye1_net8" data-name="US eye1 net8" x="18.33" y="29.21" width="0.61" height="22.79" transform="translate(-17.77 -7.68) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye1_net7" data-name="US eye1 net7" x="7.47" y="39.96" width="22.51" height="0.61" transform="translate(-17.59 -7.67) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye1_net6" data-name="US eye1 net6" x="20.82" y="27.77" width="0.61" height="22.79" transform="translate(-16.72 -6.62) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye1_net5" data-name="US eye1 net5" x="6.03" y="37.46" width="22.51" height="0.61" transform="translate(-16.53 -8.73) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye1_net4" data-name="US eye1 net4" x="23.32" y="26.32" width="0.61" height="22.79" transform="translate(-15.66 -5.57) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye1_net3" data-name="US eye1 net3" x="4.59" y="34.96" width="22.51" height="0.61" transform="translate(-15.48 -9.78) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye1_net2" data-name="US eye1 net2" x="25.81" y="24.88" width="0.61" height="22.79" transform="translate(-14.61 -4.51) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye1_net1" data-name="US eye1 net1" x="3.15" y="32.47" width="22.51" height="0.61" transform="translate(-14.42 -10.84) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="US_eye2" data-name="US eye2">
|
||||||
|
<g id="US_eye2_black" data-name="US eye2 black">
|
||||||
|
<circle cx="65.96" cy="17.57" r="17.44" style="stroke: #b3b3b3;stroke-miterlimit: 10;stroke-width: 0.25px"/>
|
||||||
|
<circle cx="65.96" cy="17.57" r="17.32" style="fill: none"/>
|
||||||
|
</g>
|
||||||
|
<circle id="US_eye2_red" data-name="US eye2 red" cx="65.96" cy="17.57" r="10.77" style="fill: #ab1919"/>
|
||||||
|
<circle id="US_eye2_gold_circle" data-name="US eye2 gold circle" cx="65.96" cy="17.57" r="8.04" style="fill: #aa7707"/>
|
||||||
|
<circle id="US_eye2_wh_in_gold" data-name="US eye2 wh in gold" cx="65.96" cy="17.57" r="6.98" style="fill: #f1f1f1"/>
|
||||||
|
<g id="US_eye2_net" data-name="US eye2 net">
|
||||||
|
<g style="clip-path: url(#clip-path-2)">
|
||||||
|
<g id="US_eye2_net_mask" data-name="US eye2 net mask">
|
||||||
|
<g id="US_eye2_net_total" data-name="US eye2 net total">
|
||||||
|
<rect id="US_eye2_net14" data-name="US eye2 net14" x="59.23" y="33.53" width="0.61" height="22.79" transform="translate(-14.45 13.35) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye2_net13" data-name="US eye2 net13" x="60.18" y="47.44" width="22.51" height="0.61" transform="translate(-14.27 19.69) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye2_net12" data-name="US eye2 net12" x="61.72" y="32.09" width="0.61" height="22.79" transform="translate(-13.4 14.41) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye2_net11" data-name="US eye2 net11" x="58.74" y="44.95" width="22.51" height="0.61" transform="translate(-13.21 18.63) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye2_net10" data-name="US eye2 net10" x="64.22" y="30.65" width="0.61" height="22.79" transform="translate(-12.34 15.46) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye2_net9" data-name="US eye2 net9" x="57.3" y="42.45" width="22.51" height="0.61" transform="translate(-12.16 17.58) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye2_net8" data-name="US eye2 net8" x="66.71" y="29.21" width="0.61" height="22.79" transform="translate(-11.29 16.52) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye2_net7" data-name="US eye2 net7" x="55.86" y="39.96" width="22.51" height="0.61" transform="translate(-11.1 16.52) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye2_net6" data-name="US eye2 net6" x="69.21" y="27.77" width="0.61" height="22.79" transform="translate(-10.23 17.57) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye2_net5" data-name="US eye2 net5" x="54.42" y="37.46" width="22.51" height="0.61" transform="translate(-10.05 15.47) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye2_net4" data-name="US eye2 net4" x="71.71" y="26.32" width="0.61" height="22.79" transform="translate(-9.18 18.63) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye2_net3" data-name="US eye2 net3" x="52.98" y="34.96" width="22.51" height="0.61" transform="translate(-8.99 14.41) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye2_net2" data-name="US eye2 net2" x="74.2" y="24.88" width="0.61" height="22.79" transform="translate(-8.12 19.68) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
<rect id="US_eye2_net1" data-name="US eye2 net1" x="51.54" y="32.47" width="22.51" height="0.61" transform="translate(-7.94 13.36) rotate(-30)" style="fill: #aa7707"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>`;
|
||||||
|
}
|
||||||
@ -230,6 +230,12 @@ namespace pxsim.visuals {
|
|||||||
view = new DistanceSliderControl(this.element, this.defs, state, port);
|
view = new DistanceSliderControl(this.element, this.defs, state, port);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
case NodeType.InfraredSensor: {
|
||||||
|
const state = ev3board().getInputNodes()[0] as InfraredSensorNode;
|
||||||
|
if (state.getMode() == InfraredSensorMode.Proximity)
|
||||||
|
view = new ProximitySliderControl(this.element, this.defs, state, port);
|
||||||
|
break;
|
||||||
|
}
|
||||||
case NodeType.GyroSensor: {
|
case NodeType.GyroSensor: {
|
||||||
const state = ev3board().getInputNodes()[port] as GyroSensorNode;
|
const state = ev3board().getInputNodes()[port] as GyroSensorNode;
|
||||||
view = new RotationSliderControl(this.element, this.defs, state, port);
|
view = new RotationSliderControl(this.element, this.defs, state, port);
|
||||||
@ -271,6 +277,8 @@ namespace pxsim.visuals {
|
|||||||
view = new ColorSensorView(port); break;
|
view = new ColorSensorView(port); break;
|
||||||
case NodeType.UltrasonicSensor:
|
case NodeType.UltrasonicSensor:
|
||||||
view = new UltrasonicSensorView(port); break;
|
view = new UltrasonicSensorView(port); break;
|
||||||
|
case NodeType.InfraredSensor:
|
||||||
|
view = new InfraredView(port); break;
|
||||||
case NodeType.Brick:
|
case NodeType.Brick:
|
||||||
//return new BrickView(0);
|
//return new BrickView(0);
|
||||||
view = this.layoutView.getBrick(); break;
|
view = this.layoutView.getBrick(); break;
|
||||||
@ -305,11 +313,11 @@ namespace pxsim.visuals {
|
|||||||
|
|
||||||
// Add EV3 module element
|
// Add EV3 module element
|
||||||
const brickCloseIcon = this.getCloseIconView();
|
const brickCloseIcon = this.getCloseIconView();
|
||||||
brickCloseIcon.registerClick(ev => {
|
brickCloseIcon.registerClick(ev => {
|
||||||
this.layoutView.unselectBrick();
|
this.layoutView.unselectBrick();
|
||||||
this.resize();
|
this.resize();
|
||||||
});
|
});
|
||||||
const brick =new BrickView(-1);
|
const brick = new BrickView(-1);
|
||||||
brick.setSelected(EV3View.isPreviousBrickSelected());
|
brick.setSelected(EV3View.isPreviousBrickSelected());
|
||||||
this.layoutView.setBrick(brick, brickCloseIcon);
|
this.layoutView.setBrick(brick, brickCloseIcon);
|
||||||
|
|
||||||
|
|||||||
138
sim/visuals/controls/proximitySlider.ts
Normal file
138
sim/visuals/controls/proximitySlider.ts
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
|
||||||
|
|
||||||
|
namespace pxsim.visuals {
|
||||||
|
|
||||||
|
export class ProximitySliderControl extends ControlView<InfraredSensorNode> {
|
||||||
|
private group: SVGGElement;
|
||||||
|
private gradient: SVGLinearGradientElement;
|
||||||
|
private slider: SVGGElement;
|
||||||
|
|
||||||
|
private reporter: SVGTextElement;
|
||||||
|
|
||||||
|
private static SLIDER_HANDLE_HEIGHT = 26;
|
||||||
|
private static SLIDER_SIDE_PADDING = 6;
|
||||||
|
|
||||||
|
getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
|
||||||
|
let gid = "gradient-slider-" + this.getId();
|
||||||
|
this.group = svg.elt("g") as SVGGElement;
|
||||||
|
this.gradient = createGradient(gid, this.getGradientDefinition());
|
||||||
|
this.gradient.setAttribute('x1', '0%');
|
||||||
|
this.gradient.setAttribute('y1', '0%');
|
||||||
|
this.gradient.setAttribute('x2', '0%');
|
||||||
|
this.gradient.setAttribute('y2', '100%');
|
||||||
|
// this.gradient.setAttribute('gradientTransform', 'matrix(50, 0, 0, -110, 21949.45, 46137.67)');
|
||||||
|
// this.gradient.setAttribute('gradientUnits', 'userSpaceOnUse');
|
||||||
|
globalDefs.appendChild(this.gradient);
|
||||||
|
|
||||||
|
this.group = svg.elt("g") as SVGGElement;
|
||||||
|
|
||||||
|
const reporterGroup = pxsim.svg.child(this.group, "g");
|
||||||
|
reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 42)`);
|
||||||
|
this.reporter = pxsim.svg.child(reporterGroup, "text", { 'text-anchor': 'middle', 'x': 0, 'y': '0', 'class': 'sim-text number large inverted' }) as SVGTextElement;
|
||||||
|
|
||||||
|
const sliderGroup = pxsim.svg.child(this.group, "g");
|
||||||
|
sliderGroup.setAttribute("transform", `translate(${this.getWidth() / 2 - this.getSliderWidth() / 2}, ${this.getReporterHeight()})`)
|
||||||
|
|
||||||
|
const rect = pxsim.svg.child(sliderGroup, "rect", { 'x': ProximitySliderControl.SLIDER_SIDE_PADDING, 'y': 2, 'width': this.getSliderWidth() - ProximitySliderControl.SLIDER_SIDE_PADDING * 2, 'height': this.getSliderHeight(), 'style': `fill: url(#${gid})` });
|
||||||
|
|
||||||
|
this.slider = pxsim.svg.child(sliderGroup, "g", { "transform": "translate(0,0)" }) as SVGGElement;
|
||||||
|
const sliderInner = pxsim.svg.child(this.slider, "g");
|
||||||
|
pxsim.svg.child(sliderInner, "rect", { 'width': this.getSliderWidth(), 'height': ProximitySliderControl.SLIDER_HANDLE_HEIGHT, 'rx': '2', 'ry': '2', 'style': 'fill: #f12a21' });
|
||||||
|
pxsim.svg.child(sliderInner, "rect", { 'x': '0.5', 'y': '0.5', 'width': this.getSliderWidth() - 1, 'height': ProximitySliderControl.SLIDER_HANDLE_HEIGHT - 1, 'rx': '1.5', 'ry': '1.5', 'style': 'fill: none;stroke: #b32e29' });
|
||||||
|
|
||||||
|
const dragSurface = svg.child(this.group, "rect", {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: this.getInnerWidth(),
|
||||||
|
height: this.getInnerHeight(),
|
||||||
|
opacity: 0,
|
||||||
|
cursor: '-webkit-grab'
|
||||||
|
})
|
||||||
|
|
||||||
|
let pt = parent.createSVGPoint();
|
||||||
|
let captured = false;
|
||||||
|
|
||||||
|
touchEvents(dragSurface, ev => {
|
||||||
|
if (captured && (ev as MouseEvent).clientY != undefined) {
|
||||||
|
ev.preventDefault();
|
||||||
|
this.updateSliderValue(pt, parent, ev as MouseEvent);
|
||||||
|
}
|
||||||
|
}, ev => {
|
||||||
|
captured = true;
|
||||||
|
if ((ev as MouseEvent).clientY != undefined) {
|
||||||
|
dragSurface.setAttribute('cursor', '-webkit-grabbing');
|
||||||
|
this.updateSliderValue(pt, parent, ev as MouseEvent);
|
||||||
|
}
|
||||||
|
}, () => {
|
||||||
|
captured = false;
|
||||||
|
dragSurface.setAttribute('cursor', '-webkit-grab');
|
||||||
|
}, () => {
|
||||||
|
captured = false;
|
||||||
|
dragSurface.setAttribute('cursor', '-webkit-grab');
|
||||||
|
})
|
||||||
|
|
||||||
|
return this.group;
|
||||||
|
}
|
||||||
|
|
||||||
|
getInnerHeight() {
|
||||||
|
return 192;
|
||||||
|
}
|
||||||
|
|
||||||
|
getInnerWidth() {
|
||||||
|
return 111;
|
||||||
|
}
|
||||||
|
|
||||||
|
private getReporterHeight() {
|
||||||
|
return 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
private getSliderHeight() {
|
||||||
|
return 110;
|
||||||
|
}
|
||||||
|
|
||||||
|
private getSliderWidth() {
|
||||||
|
return 62;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateState() {
|
||||||
|
if (!this.visible) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const node = this.state;
|
||||||
|
const percentage = node.getValue();
|
||||||
|
const y = this.getSliderHeight() * percentage / this.getMax();
|
||||||
|
this.slider.setAttribute("transform", `translate(0, ${y - ProximitySliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
|
||||||
|
// Update reporter text
|
||||||
|
this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
|
||||||
|
let cur = svg.cursorPoint(pt, parent, ev);
|
||||||
|
const height = this.getSliderHeight();
|
||||||
|
const bBox = this.content.getBoundingClientRect();
|
||||||
|
let t = Math.max(0, Math.min(1, (ProximitySliderControl.SLIDER_HANDLE_HEIGHT + height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height))
|
||||||
|
|
||||||
|
const state = this.state;
|
||||||
|
const v = Math.floor((1 - t) * (this.getMax()));
|
||||||
|
state.setPromixity(v);
|
||||||
|
}
|
||||||
|
|
||||||
|
private getMin() {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
private getMax() {
|
||||||
|
return 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
private getGradientDefinition(): LinearGradientDefinition {
|
||||||
|
return {
|
||||||
|
stops: [
|
||||||
|
{ offset: 0, color: '#626262' },
|
||||||
|
{ offset: 100, color: "#ddd" }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
10
sim/visuals/nodes/infraredview.ts
Normal file
10
sim/visuals/nodes/infraredview.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/// <reference path="./moduleView.ts" />
|
||||||
|
|
||||||
|
namespace pxsim.visuals {
|
||||||
|
export class InfraredView extends ModuleView implements LayoutElement {
|
||||||
|
|
||||||
|
constructor(port: number) {
|
||||||
|
super(INFRARED_SVG, "infrared", NodeType.InfraredSensor, port);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user