Merge pull request #179 from Microsoft/syncedmotorui

Synced motors label (in simulator)

sim/dalboard.ts

@@ -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;

sim/state/motornode.ts

@@ -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) {

sim/visuals/nodes/largeMotorView.ts

@@ -1,26 +1,47 @@
 /// <reference path="./moduleView.ts" />
+/// <reference path="./motorView.ts" />
 
 namespace pxsim.visuals {
-    export class LargeMotorView extends ModuleView implements LayoutElement {
+    export class LargeMotorView extends MotorView implements LayoutElement {
-
-        private static ROTATING_ECLIPSE_ID = "hole";
 
         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;
+            const syncedMotor = motorState.getSynchedMotor();
-            this.setMotorAngle(motorState.getAngle());
+            if ((syncedMotor || this.syncedMotor) && syncedMotor != this.syncedMotor) {
+                this.syncedMotor = syncedMotor;
+                this.showSyncedLabel(motorState, syncedMotor);
+            }
         }
 
-        private setMotorAngle(angle: number) {
+        private showSyncedLabel(motorNode: MotorNode, syncedMotor: MotorNode) {
-            const holeEl = this.content.getElementById(this.normalizeId(LargeMotorView.ROTATING_ECLIPSE_ID))
+            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})`;

sim/visuals/nodes/mediumMotorView.ts

@@ -2,35 +2,17 @@
 
 namespace pxsim.visuals {
 
-    export const MOTOR_ROTATION_FPS = 32;
+    export class MediumMotorView extends MotorView implements LayoutElement {
-
-    export class MediumMotorView extends ModuleView implements LayoutElement {
-
-        private static ROTATING_ECLIPSE_ID = "medmotor_Hole";
-
-        private hasPreviousAngle: boolean;
-        private previousAngle: number;
 
         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() {
+        protected renderMotorAngle(holeEl: Element, angle: number) {
-            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))
             const width = 44.45;
             const height = 44.45;
             const transform = `translate(2 1.84) rotate(${angle} ${width / 2} ${height / 2})`;

sim/visuals/nodes/motorView.ts

@@ -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;
+        }
+    }
+}