Add large and medium motor speed labels (#480)

* Add large and medium motor speed labels

* Support dual motor labels.
This commit is contained in:
Sam El-Husseini
2018-04-10 11:50:58 -07:00
committed by GitHub
parent 8398c8efdb
commit 379a6a26be
6 changed files with 43 additions and 4 deletions

View File

@ -24,7 +24,9 @@ namespace pxsim.visuals {
} else if (this.syncedLabelG) {
this.syncedLabelG.parentNode.removeChild(this.syncedLabelG);
}
this.setMotorLabel(motorState.getSpeed(), true);
}
this.setMotorLabel(motorState.getSpeed());
}
private showSyncedLabel(motorNode: MotorNode, syncedMotor: MotorNode) {
@ -55,5 +57,11 @@ namespace pxsim.visuals {
getWiringRatio() {
return 0.37;
}
protected positionMotorLabel() {
const hasSyncedLabel = this.syncedMotor;
this.motorLabelGroup.setAttribute('transform', `translate(${hasSyncedLabel ? '15 35' : '25 15'})`);
this.motorLabel.style.fontSize = '13px';
}
}
}

View File

@ -26,5 +26,10 @@ namespace pxsim.visuals {
const transform = `translate(2 1.84) rotate(${angle} ${width / 2} ${height / 2})`;
holeEl.setAttribute("transform", transform);
}
protected positionMotorLabel() {
this.motorLabelGroup.setAttribute('transform', 'translate(25 13)');
this.motorLabel.style.fontSize = '11px';
}
}
}

View File

@ -3,6 +3,10 @@
namespace pxsim.visuals {
export abstract class MotorView extends ModuleView implements LayoutElement {
protected motorLabelGroup: SVGGElement;
protected motorLabel: SVGTextElement;
private currentLabel: string;
constructor(xml: string, prefix: string, id: NodeType, port: NodeType,
protected rotating_hole_id: string) {
super(xml, prefix, id, port);
@ -15,7 +19,8 @@ namespace pxsim.visuals {
const speed = motorState.getSpeed();
if (!speed) return;
this.setMotorAngle(motorState.getAngle());
this.setMotorAngle(motorState.getAngle() % 360);
this.setMotorLabel(speed);
}
private setMotorAngle(angle: number) {
@ -29,5 +34,23 @@ namespace pxsim.visuals {
getWiringRatio() {
return 0.37;
}
setMotorLabel(speed: number, force?: boolean) {
if (!force && this.currentLabel === `${speed}`) return;
this.currentLabel = `${speed}`;
if (!this.motorLabel) {
this.motorLabelGroup = pxsim.svg.child(this.content, "g") as SVGGElement;
this.motorLabel = pxsim.svg.child(this.motorLabelGroup, "text", { 'text-anchor': 'middle', 'x': '0', 'y': '0', 'class': 'sim-text number inverted' }) as SVGTextElement;
}
// If Motor speed is not 0
if (this.currentLabel) {
this.motorLabel.textContent = `${this.currentLabel}%`;
this.positionMotorLabel();
} else {
this.motorLabel.textContent = ``;
}
}
protected abstract positionMotorLabel(): void;
}
}