Generalizing motorView for both medium and large motor views. Initial work towards synced motor views. Adding sync label for controller motor.
This commit is contained in:
		@@ -3,24 +3,6 @@
 | 
			
		||||
/// <reference path="../built/common-sim.d.ts"/>
 | 
			
		||||
 | 
			
		||||
namespace pxsim {
 | 
			
		||||
    export enum CPlayPinName {
 | 
			
		||||
        A0,
 | 
			
		||||
        A1,
 | 
			
		||||
        A2,
 | 
			
		||||
        A3,
 | 
			
		||||
        A4,
 | 
			
		||||
        A5,
 | 
			
		||||
        A6,
 | 
			
		||||
        A7,
 | 
			
		||||
        A8,
 | 
			
		||||
        A9,
 | 
			
		||||
        D4,
 | 
			
		||||
        D5,
 | 
			
		||||
        D6,
 | 
			
		||||
        D7,
 | 
			
		||||
        D8,
 | 
			
		||||
        D13
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    export class EV3Board extends CoreBoard {
 | 
			
		||||
        view: SVGSVGElement;
 | 
			
		||||
 
 | 
			
		||||
@@ -88,7 +88,7 @@ namespace pxsim {
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        updateState(elapsed: number) {
 | 
			
		||||
            console.log(`motor: ${elapsed}ms - ${this.speed}% - ${this.angle}> - ${this.tacho}|`)
 | 
			
		||||
            //console.log(`motor: ${elapsed}ms - ${this.speed}% - ${this.angle}> - ${this.tacho}|`)
 | 
			
		||||
            const interval = Math.min(20, elapsed);
 | 
			
		||||
            let t = 0;
 | 
			
		||||
            while (t < elapsed) {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,26 +1,47 @@
 | 
			
		||||
/// <reference path="./moduleView.ts" />
 | 
			
		||||
/// <reference path="./motorView.ts" />
 | 
			
		||||
 | 
			
		||||
namespace pxsim.visuals {
 | 
			
		||||
    export class LargeMotorView extends ModuleView implements LayoutElement {
 | 
			
		||||
 | 
			
		||||
        private static ROTATING_ECLIPSE_ID = "hole";
 | 
			
		||||
    export class LargeMotorView extends MotorView implements LayoutElement {
 | 
			
		||||
 | 
			
		||||
        constructor(port: number) {
 | 
			
		||||
            super(LARGE_MOTOR_SVG, "large-motor", NodeType.LargeMotor, port);
 | 
			
		||||
            super(LARGE_MOTOR_SVG, "large-motor", NodeType.LargeMotor, port, "hole");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        private syncedMotor: MotorNode;
 | 
			
		||||
        private syncedLabelG: SVGGElement;
 | 
			
		||||
 | 
			
		||||
        updateState() {
 | 
			
		||||
            super.updateState();
 | 
			
		||||
            const motorState = ev3board().getMotors()[this.port];
 | 
			
		||||
            if (!motorState) return;
 | 
			
		||||
            const speed = motorState.getSpeed();
 | 
			
		||||
 | 
			
		||||
            if (!speed) return;
 | 
			
		||||
            this.setMotorAngle(motorState.getAngle());
 | 
			
		||||
            const syncedMotor = motorState.getSynchedMotor();
 | 
			
		||||
            if ((syncedMotor != undefined || this.syncedMotor != undefined) && syncedMotor != this.syncedMotor) {
 | 
			
		||||
                this.syncedMotor = syncedMotor;
 | 
			
		||||
                this.showSyncedLabel(motorState, syncedMotor);
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        private setMotorAngle(angle: number) {
 | 
			
		||||
            const holeEl = this.content.getElementById(this.normalizeId(LargeMotorView.ROTATING_ECLIPSE_ID))
 | 
			
		||||
        private showSyncedLabel(motorNode: MotorNode, syncedMotor: MotorNode) {
 | 
			
		||||
            const a = String.fromCharCode('A'.charCodeAt(0) + motorNode.port);
 | 
			
		||||
            const b = String.fromCharCode('A'.charCodeAt(0) + syncedMotor.port);
 | 
			
		||||
 | 
			
		||||
            this.syncedLabelG = pxsim.svg.child(this.element, 'g', {'transform': 'scale(0.5)'}) as SVGGElement;
 | 
			
		||||
            pxsim.svg.child(this.syncedLabelG, 'rect', {'rx': 15, 'ry': 15, 'x': 0, 'y': 0, 'width': 84, 'height': 34, 'fill': '#A8A9A8'});
 | 
			
		||||
            pxsim.svg.child(this.syncedLabelG, 'circle', {'cx': 17, 'cy': 17, 'r': 15, 'fill': 'white'});
 | 
			
		||||
            const leftLabel = pxsim.svg.child(this.syncedLabelG, 'text', {'transform': 'translate(11, 22)', 'style': 'isolation: isolate;font-size: 16px;fill: #A8A9A8;font-family: ArialMT, Arial'});
 | 
			
		||||
            leftLabel.textContent = a;
 | 
			
		||||
 | 
			
		||||
            pxsim.svg.child(this.syncedLabelG, 'rect', {'rx': 0, 'ry': 0, 'x': 37, 'y': 12, 'width': 10, 'height': 3, 'fill': '#ffffff'});
 | 
			
		||||
            pxsim.svg.child(this.syncedLabelG, 'rect', {'rx': 0, 'ry': 0, 'x': 37, 'y': 18, 'width': 10, 'height': 3, 'fill': '#ffffff'});
 | 
			
		||||
            
 | 
			
		||||
            pxsim.svg.child(this.syncedLabelG, 'circle', {'cx': 67, 'cy': 17, 'r': 15, 'fill': 'white'});
 | 
			
		||||
            const rightLabel = pxsim.svg.child(this.syncedLabelG, 'text', {'transform': 'translate(61, 22)', 'style': 'isolation: isolate;font-size: 16px;fill: #A8A9A8;font-family: ArialMT, Arial'});
 | 
			
		||||
            rightLabel.textContent = b;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        protected renderMotorAngle(holeEl: Element, angle: number) {
 | 
			
		||||
            const width = 125.92;
 | 
			
		||||
            const height = 37.9;
 | 
			
		||||
            const transform = `rotate(${angle} ${width / 2} ${height / 2})`;
 | 
			
		||||
 
 | 
			
		||||
@@ -2,35 +2,17 @@
 | 
			
		||||
 | 
			
		||||
namespace pxsim.visuals {
 | 
			
		||||
 | 
			
		||||
    export const MOTOR_ROTATION_FPS = 32;
 | 
			
		||||
 | 
			
		||||
    export class MediumMotorView extends ModuleView implements LayoutElement {
 | 
			
		||||
 | 
			
		||||
        private static ROTATING_ECLIPSE_ID = "medmotor_Hole";
 | 
			
		||||
 | 
			
		||||
        private hasPreviousAngle: boolean;
 | 
			
		||||
        private previousAngle: number;
 | 
			
		||||
    export class MediumMotorView extends MotorView implements LayoutElement {
 | 
			
		||||
 | 
			
		||||
        constructor(port: number) {
 | 
			
		||||
            super(MEDIUM_MOTOR_SVG, "medium-motor", NodeType.MediumMotor, port);
 | 
			
		||||
            super(MEDIUM_MOTOR_SVG, "medium-motor", NodeType.MediumMotor, port, "medmotor_Hole");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        public getPaddingRatio() {
 | 
			
		||||
            return 1 / 5;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        updateState() {
 | 
			
		||||
            super.updateState();
 | 
			
		||||
            const motorState = ev3board().getMotors()[this.port];
 | 
			
		||||
            if (!motorState) return;
 | 
			
		||||
            const speed = motorState.getSpeed();
 | 
			
		||||
 | 
			
		||||
            if (!speed) return;
 | 
			
		||||
            this.setMotorAngle(motorState.getAngle());
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        private setMotorAngle(angle: number) {
 | 
			
		||||
            const holeEl = this.content.getElementById(this.normalizeId(MediumMotorView.ROTATING_ECLIPSE_ID))
 | 
			
		||||
        protected renderMotorAngle(holeEl: Element, angle: number) {
 | 
			
		||||
            const width = 44.45;
 | 
			
		||||
            const height = 44.45;
 | 
			
		||||
            const transform = `translate(2 1.84) rotate(${angle} ${width / 2} ${height / 2})`;
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										33
									
								
								sim/visuals/nodes/motorView.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										33
									
								
								sim/visuals/nodes/motorView.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,33 @@
 | 
			
		||||
/// <reference path="./moduleView.ts" />
 | 
			
		||||
 | 
			
		||||
namespace pxsim.visuals {
 | 
			
		||||
    export abstract class MotorView extends ModuleView implements LayoutElement {
 | 
			
		||||
 | 
			
		||||
        constructor(xml: string, prefix: string, id: NodeType, port: NodeType,
 | 
			
		||||
            protected rotating_hole_id: string) {
 | 
			
		||||
            super(xml, prefix, id, port);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        updateState() {
 | 
			
		||||
            super.updateState();
 | 
			
		||||
            const motorState = ev3board().getMotors()[this.port];
 | 
			
		||||
            if (!motorState) return;
 | 
			
		||||
            const speed = motorState.getSpeed();
 | 
			
		||||
 | 
			
		||||
            if (!speed) return;
 | 
			
		||||
            this.setMotorAngle(motorState.getAngle());
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        private setMotorAngle(angle: number) {
 | 
			
		||||
            const holeEl = this.content.getElementById(this.normalizeId(this.rotating_hole_id))
 | 
			
		||||
            this.renderMotorAngle(holeEl, angle);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        protected abstract renderMotorAngle(holeEl: Element, angle: number): void;
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
        getWiringRatio() {
 | 
			
		||||
            return 0.37;
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user