Merge pull request #140 from Microsoft/motorreporters

Add motor reporter control

sim/visuals/board.ts

@@ -212,9 +212,10 @@ namespace pxsim.visuals {
                 }
                 case NodeType.MediumMotor:
                 case NodeType.LargeMotor: {
-                    // const state = ev3board().getMotor(port)[0];
-                    // view = new MotorInputControl(this.element, this.defs, state, port);
-                    // break;
+                    // TODO: figure out if the motor is in "input" or "output" mode
+                    const state = ev3board().getMotors()[port];
+                    view = new MotorReporterControl(this.element, this.defs, state, port);
+                    break;
                 }
             }
 

sim/visuals/controls/colorGrid.ts

@@ -7,8 +7,6 @@ namespace pxsim.visuals {
 
         getInnerView() {
             this.group = svg.elt("g") as SVGGElement;
-            const innerHeight = 13;
-            const innerWidth = 11;
             this.group.setAttribute("transform", `translate(1.02, 1.5) scale(0.8)`)
 
             const colorIds = ['red', 'yellow', 'blue', 'green', undefined, 'grey'];

sim/visuals/controls/motorReporter.ts

@@ -0,0 +1,51 @@
+
+
+namespace pxsim.visuals {
+
+    export class MotorReporterControl extends ControlView<MotorNode> {
+        private group: SVGGElement;
+
+        private circleBar: SVGCircleElement;
+
+        private reporter: SVGTextElement;
+
+        getInnerView() {
+            this.group = svg.elt("g") as SVGGElement;
+
+            const outerCircle = pxsim.svg.child(this.group, "circle", { 'stroke-dasharray': '565.48', 'stroke-dashoffset': '0', 'cx': 100, 'cy': 100, 'r': '90', 'style': `fill:transparent; transition: stroke-dashoffset 1s linear;`, 'stroke': '#a8aaa8', 'stroke-width': '1rem' }) as SVGCircleElement;
+            this.circleBar = pxsim.svg.child(this.group, "circle", { 'stroke-dasharray': '565.48', 'stroke-dashoffset': '0', 'cx': 100, 'cy': 100, 'r': '90', 'style': `fill:transparent; transition: stroke-dashoffset 1s linear;`, 'stroke': '#f12a21', 'stroke-width': '1rem' }) as SVGCircleElement;
+
+            this.reporter = pxsim.svg.child(this.group, "text", { 'x': this.getWidth() / 2, 'y': this.getHeight() / 2, 'text-anchor': 'middle', 'style': 'font-size: 50px', 'class': 'sim-text inverted number' }) as SVGTextElement;
+
+            return this.group;
+        }
+
+        getInnerWidth() {
+            return 200;
+        }
+
+        getInnerHeight() {
+            return 200;
+        }
+
+        updateState() {
+            if (!this.visible) {
+                return;
+            }
+            const node = this.state;
+            const speed = node.getSpeed();
+            this.updateSpeed(speed);
+
+            // Update reporter
+            this.reporter.textContent = `${speed}`;
+        }
+
+        private updateSpeed(speed: number) {
+            let c = Math.PI * (90 * 2);
+            if (speed < 0) speed = 100 - speed;
+
+            let pct = ((100 - speed) / 100) * c;
+            this.circleBar.setAttribute('stroke-dashoffset', `${pct}`);
+        }
+    }
+}