From 5aef77ccc60bccb5fc17058119415c9456e2b518 Mon Sep 17 00:00:00 2001 From: Sam El-Husseini Date: Thu, 4 Jan 2018 14:03:50 -0800 Subject: [PATCH 1/2] Generalizing motorView for both medium and large motor views. Initial work towards synced motor views. Adding sync label for controller motor. --- sim/dalboard.ts | 18 ------------- sim/state/motornode.ts | 2 +- sim/visuals/nodes/largeMotorView.ts | 39 +++++++++++++++++++++------- sim/visuals/nodes/mediumMotorView.ts | 24 +++-------------- sim/visuals/nodes/motorView.ts | 33 +++++++++++++++++++++++ 5 files changed, 67 insertions(+), 49 deletions(-) create mode 100644 sim/visuals/nodes/motorView.ts diff --git a/sim/dalboard.ts b/sim/dalboard.ts index 4e613d9e..01b13dff 100644 --- a/sim/dalboard.ts +++ b/sim/dalboard.ts @@ -3,24 +3,6 @@ /// 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; diff --git a/sim/state/motornode.ts b/sim/state/motornode.ts index cb805db5..1a14e604 100644 --- a/sim/state/motornode.ts +++ b/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) { diff --git a/sim/visuals/nodes/largeMotorView.ts b/sim/visuals/nodes/largeMotorView.ts index 0e10e685..2077be45 100644 --- a/sim/visuals/nodes/largeMotorView.ts +++ b/sim/visuals/nodes/largeMotorView.ts @@ -1,26 +1,47 @@ /// +/// 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})`; diff --git a/sim/visuals/nodes/mediumMotorView.ts b/sim/visuals/nodes/mediumMotorView.ts index d980f95e..ab632ec0 100644 --- a/sim/visuals/nodes/mediumMotorView.ts +++ b/sim/visuals/nodes/mediumMotorView.ts @@ -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})`; diff --git a/sim/visuals/nodes/motorView.ts b/sim/visuals/nodes/motorView.ts new file mode 100644 index 00000000..0b819c1f --- /dev/null +++ b/sim/visuals/nodes/motorView.ts @@ -0,0 +1,33 @@ +/// + +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; + } + } +} \ No newline at end of file From f3f87331c8da695f7b78168c5952fd43b126d37b Mon Sep 17 00:00:00 2001 From: Sam El-Husseini Date: Thu, 4 Jan 2018 14:09:10 -0800 Subject: [PATCH 2/2] nit --- sim/visuals/nodes/largeMotorView.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sim/visuals/nodes/largeMotorView.ts b/sim/visuals/nodes/largeMotorView.ts index 2077be45..3f18241a 100644 --- a/sim/visuals/nodes/largeMotorView.ts +++ b/sim/visuals/nodes/largeMotorView.ts @@ -17,7 +17,7 @@ namespace pxsim.visuals { if (!motorState) return; const syncedMotor = motorState.getSynchedMotor(); - if ((syncedMotor != undefined || this.syncedMotor != undefined) && syncedMotor != this.syncedMotor) { + if ((syncedMotor || this.syncedMotor) && syncedMotor != this.syncedMotor) { this.syncedMotor = syncedMotor; this.showSyncedLabel(motorState, syncedMotor); }