Merge pull request #179 from Microsoft/syncedmotorui
Synced motors label (in simulator)
This commit is contained in:
commit
148657908c
@ -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 || 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})`;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user