diff --git a/sim/visuals/board.ts b/sim/visuals/board.ts index b3f92cc4..7d6b2ed4 100644 --- a/sim/visuals/board.ts +++ b/sim/visuals/board.ts @@ -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; } } diff --git a/sim/visuals/controls/colorGrid.ts b/sim/visuals/controls/colorGrid.ts index ea5823a9..df89cfc8 100644 --- a/sim/visuals/controls/colorGrid.ts +++ b/sim/visuals/controls/colorGrid.ts @@ -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']; diff --git a/sim/visuals/controls/motorReporter.ts b/sim/visuals/controls/motorReporter.ts new file mode 100644 index 00000000..b6c2fc3b --- /dev/null +++ b/sim/visuals/controls/motorReporter.ts @@ -0,0 +1,51 @@ + + +namespace pxsim.visuals { + + export class MotorReporterControl extends ControlView { + 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}`); + } + } +} \ No newline at end of file