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:
		@@ -23,7 +23,7 @@ const enum IrRemoteButton {
 | 
			
		||||
 | 
			
		||||
const enum InfraredSensorEvent {
 | 
			
		||||
    //% block="object near"
 | 
			
		||||
    ObjectNear = 1,
 | 
			
		||||
    ObjectNear = 3,
 | 
			
		||||
    //% block="object detected"
 | 
			
		||||
    ObjectDetected = 2
 | 
			
		||||
}
 | 
			
		||||
@@ -60,11 +60,12 @@ namespace sensors {
 | 
			
		||||
                buttons.push(new RemoteInfraredBeaconButton(new brick.Button()))
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            // this defeats our static allocation system
 | 
			
		||||
            // make sure sensors are up
 | 
			
		||||
            create(infraredSensor1)
 | 
			
		||||
            create(infraredSensor2)
 | 
			
		||||
            create(infraredSensor3)
 | 
			
		||||
            create(infraredSensor4)
 | 
			
		||||
            //create(infraredSensor1)
 | 
			
		||||
            //create(infraredSensor2)
 | 
			
		||||
            //create(infraredSensor3)
 | 
			
		||||
            //create(infraredSensor4)
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        let num = -1
 | 
			
		||||
@@ -196,6 +197,7 @@ namespace sensors {
 | 
			
		||||
        //% weight=100 blockGap=8
 | 
			
		||||
        //% group="Infrared Sensor"
 | 
			
		||||
        onEvent(event: InfraredSensorEvent, handler: () => void) {
 | 
			
		||||
            this._setMode(IrSensorMode.Proximity)
 | 
			
		||||
            control.onEvent(this._id, event, handler);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
@@ -210,6 +212,7 @@ namespace sensors {
 | 
			
		||||
        //% weight=99 blockGap=8
 | 
			
		||||
        //% group="Infrared Sensor"
 | 
			
		||||
        pauseUntil(event: InfraredSensorEvent) {
 | 
			
		||||
            this._setMode(IrSensorMode.Proximity)
 | 
			
		||||
            control.waitForEvent(this._id, event);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
@@ -222,7 +225,7 @@ namespace sensors {
 | 
			
		||||
        //% blockId=infraredGetProximity
 | 
			
		||||
        //% parts="infrared"
 | 
			
		||||
        //% blockNamespace=sensors
 | 
			
		||||
        //% weight=65 blockGap=8   
 | 
			
		||||
        //% weight=98 blockGap=8   
 | 
			
		||||
        //% group="Infrared Sensor"     
 | 
			
		||||
        proximity(): number {
 | 
			
		||||
            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_TOUCH: this.inputNodes[port] = new TouchSensorNode(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];
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										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,
 | 
			
		||||
        GyroSensor = 5,
 | 
			
		||||
        ColorSensor = 6,
 | 
			
		||||
        UltrasonicSensor = 7
 | 
			
		||||
        UltrasonicSensor = 7,
 | 
			
		||||
        InfraredSensor = 8
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    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);
 | 
			
		||||
                    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: {
 | 
			
		||||
                    const state = ev3board().getInputNodes()[port] as GyroSensorNode;
 | 
			
		||||
                    view = new RotationSliderControl(this.element, this.defs, state, port);
 | 
			
		||||
@@ -271,6 +277,8 @@ namespace pxsim.visuals {
 | 
			
		||||
                    view = new ColorSensorView(port); break;
 | 
			
		||||
                case NodeType.UltrasonicSensor:
 | 
			
		||||
                    view = new UltrasonicSensorView(port); break;
 | 
			
		||||
                case NodeType.InfraredSensor:
 | 
			
		||||
                    view = new InfraredView(port); break;
 | 
			
		||||
                case NodeType.Brick:
 | 
			
		||||
                    //return new BrickView(0);
 | 
			
		||||
                    view = this.layoutView.getBrick(); break;
 | 
			
		||||
@@ -305,11 +313,11 @@ namespace pxsim.visuals {
 | 
			
		||||
 | 
			
		||||
            // Add EV3 module element
 | 
			
		||||
            const brickCloseIcon = this.getCloseIconView();
 | 
			
		||||
            brickCloseIcon.registerClick(ev => {                
 | 
			
		||||
                this.layoutView.unselectBrick();                
 | 
			
		||||
            brickCloseIcon.registerClick(ev => {
 | 
			
		||||
                this.layoutView.unselectBrick();
 | 
			
		||||
                this.resize();
 | 
			
		||||
            });
 | 
			
		||||
            const brick =new BrickView(-1);
 | 
			
		||||
            const brick = new BrickView(-1);
 | 
			
		||||
            brick.setSelected(EV3View.isPreviousBrickSelected());
 | 
			
		||||
            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);
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user