c_meyer/pxt-ev3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add motor reporter control

Browse Source
This commit is contained in:
Sam El-Husseini 2017-12-27 17:06:23 -08:00
parent f01370e4fd
commit 0da175a8cd
3 changed files with 54 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
sim/visuals/board.ts
View File

@ -212,9 +212,9 @@ 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;
const state = ev3board().getMotors()[port];
view = new MotorReporterControl(this.element, this.defs, state, port);
break;
}
}

2
sim/visuals/controls/colorGrid.ts
View File

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

51
sim/visuals/controls/motorReporter.ts Normal file
View File

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