Merge pull request #179 from Microsoft/syncedmotorui

Synced motors label (in simulator)
This commit is contained in:
Sam El-Husseini 2018-01-04 14:38:29 -08:00 committed by GitHub
commit 148657908c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 67 additions and 49 deletions

View File

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

View File

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

View File

@ -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 || this.syncedMotor) && 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})`;

View File

@ -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})`;

View 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;
}
}
}