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

Gyro tutorials (#930)

Browse Source 
* gyro tutorials

* tutorials

* fix gyro simulator

* images

* updated image

* fix svg errors
This commit is contained in:
Peli de Halleux
2019-09-30 22:43:50 -07:00
committed by GitHub
parent cb816c91ad
commit 80b9c715b2
12 changed files with 175 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
sim/visuals/controlView.ts
View File

@ -49,11 +49,13 @@ namespace pxsim.visuals {
}
private updateDimensions(width: number, height: number, strict?: boolean) {
width = Math.max(0, width);
height = Math.max(0, height);
if (this.content) {
const currentWidth = this.getInnerWidth();
const currentHeight = this.getInnerHeight();
const newHeight = currentHeight / currentWidth * width;
const newWidth = currentWidth / currentHeight * height;
const newHeight = Math.max(0, currentHeight / currentWidth * width);
const newWidth = Math.max(0, currentWidth / currentHeight * height);
if (strict) {
this.content.setAttribute('width', `${width}`);
this.content.setAttribute('height', `${height}`);

33
sim/visuals/controls/rotationSlider.ts
View File

@ -1,13 +1,16 @@
namespace pxsim.visuals {
const MAX_RATE = 40;
const MAX_ANGLE = 360;
export class RotationSliderControl extends ControlView<GyroSensorNode> {
private group: SVGGElement;
private slider: SVGGElement;
private text: SVGTextElement;
private static SLIDER_WIDTH = 70;
private static SLIDER_HEIGHT = 78;
//private static SLIDER_HEIGHT = 78;
getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
this.group = svg.elt("g") as SVGGElement;
@ -23,6 +26,14 @@ namespace pxsim.visuals {
pxsim.svg.child(this.slider, "circle", { 'cx': 9, 'cy': 50, 'r': 13, 'style': 'fill: #f12a21' });
pxsim.svg.child(this.slider, "circle", { 'cx': 9, 'cy': 50, 'r': 12.5, 'style': 'fill: none;stroke: #b32e29' });
this.text = pxsim.svg.child(this.group, "text", {
'x': RotationSliderControl.SLIDER_WIDTH / 2,
'y': RotationSliderControl.SLIDER_WIDTH * 1.2,
'text-anchor': 'middle', 'dominant-baseline': 'middle',
'style': 'font-size: 16px',
'class': 'sim-text inverted number'
}) as SVGTextElement;
const dragSurface = svg.child(this.group, "rect", {
x: 0,
y: 0,
@ -61,7 +72,17 @@ namespace pxsim.visuals {
return;
}
const node = this.state;
const percentage = node.getValue();
let percentage = 50;
if (node.getMode() == GyroSensorMode.Rate) {
const rate = node.getValue();
this.text.textContent = `${rate}°/s`
// cap rate at 40deg/s
percentage = 50 + Math.sign(rate) * Math.min(MAX_RATE, Math.abs(rate)) / MAX_RATE * 50;
} else { //angle
const angle = node.getValue();
this.text.textContent = `${angle}°`
percentage = 50 + Math.sign(angle) * Math.min(MAX_ANGLE, Math.abs(angle)) / MAX_ANGLE * 50;
}
const x = RotationSliderControl.SLIDER_WIDTH * percentage / 100;
const y = Math.abs((percentage - 50) / 50) * 10;
this.slider.setAttribute("transform", `translate(${x}, ${y})`);
@ -73,8 +94,14 @@ namespace pxsim.visuals {
const bBox = this.content.getBoundingClientRect();
let t = Math.max(0, Math.min(1, (width + bBox.left / this.scaleFactor - cur.x / this.scaleFactor) / width))
t = -(t - 0.5) * 2; // [-1,1]
const state = this.state;
state.setRate((1 - t) * (100));
if (state.getMode() == GyroSensorMode.Rate) {
state.setRate(MAX_RATE * t);
} else {
state.setAngle(MAX_ANGLE * t)
}
}
}