driving base sim

* updated pauseuntil

* updated youtube link

* updated docs

docs/bluetooth.md

@@ -38,10 +38,7 @@ Next you need to enable the experimental features (this may change in the future
 
 ## Download over Bluetooth
 
-* go to the **beta** editor https://makecode.mindstorms.com/beta
-
-This feature is not yet released so make sure to use the beta editor.
-
+* go to https://makecode.mindstorms.com/
 * click on **Download** to start a file download as usual
 * on the download dialog, you should see a **Bluetooth** button. Click on the
 **Bluetooth** button to enable the mode.
@@ -51,8 +48,9 @@ This feature is not yet released so make sure to use the beta editor.
 ## Choosing the correct serial port
 
 Unfortunately, the browser dialog does not make it easy to select which serial port is the brick.
-On Windows, it typically reads "Standard Serial over Bluetooth" and you may 
-have multiple of those if you've paired different bricks.
+
+* On Windows, choose ``Standard Serial over Bluetooth``. There might be multiple of those but only one works. Try your luck! Once you know the COM port number, remember it for the next time around.
+* On Mac OS, choose ``cu.BRICKNAME-SerialPort``
 
 ## Known issues
 

docs/index-ref.json

@@ -1,3 +1,3 @@
 {
-    "appref": "v1.2.15"
+    "appref": "v1.2.18"
 }

docs/tutorials.md

@@ -25,6 +25,11 @@ Step by step guides to coding your @boardname@.
   "description": "Use the color sensor to follow line or detect colors",
   "url":"/tutorials/color-sensor",
   "imageUrl":"/static/tutorials/what-color.png"
+}, {
+  "name": "Gyro",
+  "description": "Drive straight or turn more precisely with the gyro",
+  "url":"/tutorials/gyro",
+  "imageUrl":"/static/tutorials/calibrate-gyro.png"
 }, {
   "name": "Ultrasonic Sensor",
   "description": "Use the ultrasonic sensor to detect obstacles",

docs/tutorials/calibrate-gyro.md

@@ -0,0 +1,37 @@
+# Calibrate Gyro
+
+## Introduction @fullscreen
+
+The gyroscope is a very useful sensor in the EV3 system. It detects the rotation rate
+which can be very useful to correct the trajectory of the robot and do precise turns.
+
+However, the sensor can be imprecise and subject to drifting. It is recommend to
+calibrate your sensor at least once after starting your brick. You don't have to 
+recalibrate on every run.
+
+* [EV3 Driving Base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
+* [EV3 Driving Base with Gyro](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-gyro-sensor-driving-base-a521f8ebe355c281c006418395309e15.pdf)
+
+
+## Step 1 Show ports
+
+Add the ``||brick:show ports||`` to see the status of the gyroscope.
+
+```blocks
+brick.showPorts()
+```
+
+
+## Step 2 Calibration
+
+Add a ``||sensors:calibrate gyro||`` block to calibrate the gyro. The block
+detects if the sensor is present and does a full reset of the sensor if necessary.
+
+```blocks
+brick.showPorts()
+sensors.gyro2.calibrate()
+```
+
+## Step 3 Download and run @fullscreen
+
+Download this program to your brick and press the ENTER button.

docs/tutorials/city-shaper.md

@@ -24,6 +24,18 @@
     "name": "Bluetooth download (beta)",
     "description": "EXPERIMENTAL! Learn how to download code via Bluetooth.",
     "youTubeId": "VIq8-6Egtqs"
+}, {
+    "name": "Turn with Gyro",
+    "description": "Use the gyro for precise turns.",
+    "youTubeId": "I7ncuXAfBwk"
+}, {
+    "name": "Moving with Gyro",
+    "description": "Use the gyro for correct the robot trajectory.",
+    "youTubeId": "ufiOPvW37xc"
+}, {
+    "name": "Line following with 1 color sensor",
+    "description": "Simple line following using the color sensor.",
+    "youTubeId": "_LeduyKQVjg"
 }]
 ```
 

docs/tutorials/drifter.md

@@ -0,0 +1,34 @@
+# Drifter
+
+Use this program to try out the gyro sensor and the effect of drifting.
+
+```typescript
+// this loop shows the rate, angle and drift of the robot
+forever(() => {
+    brick.showValue("rate", sensors.gyro2.rate(), 1)
+    brick.showValue("angle", sensors.gyro2.angle(), 2)
+    brick.showValue("drift", sensors.gyro2.drift(), 3)
+})
+// this loop shows wheter the sensor is calibrating
+forever(() => {
+    brick.showString(sensors.gyro2.isCalibrating() ? "calibrating..." : "", 4)
+})
+// instructions on how to use the buttons
+brick.showString("ENTER: calibrate", 7)
+brick.showString("       (reset+drift)", 8)
+brick.showString("LEFT: reset", 9)
+brick.showString("RIGHT: compute drift", 10)
+
+// enter -> calibrate
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    sensors.gyro2.calibrate()
+})
+// right -> compute drift
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    sensors.gyro2.computeDrift()
+})
+// left -> reset
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    sensors.gyro2.reset()
+})
+```

docs/tutorials/gyro.md

@@ -0,0 +1,31 @@
+# Gyro tutorials
+
+## Tutorials
+
+```codecard
+[{
+  "name": "Calibrate",
+  "description": "Make sure you gyro sensor is ready to use",
+  "cardType": "tutorial",
+  "url":"/tutorials/calibrate-gyro",
+  "imageUrl":"/static/tutorials/calibrate-gyro.png"
+}, {
+  "name": "Turn",
+  "description": "Use the gyro to turn precisely",
+  "cardType": "tutorial",
+  "url":"/tutorials/turn-with-gyro",
+  "imageUrl":"/static/tutorials/turn-with-gyro.png"
+}, {
+  "name": "Move Straight",
+  "description": "Use the gyro to correct the trajectory of the robot",
+  "cardType": "tutorial",
+  "url":"/tutorials/move-straight-with-gyro",
+  "imageUrl":"/static/tutorials/move-straight-with-gyro.png"
+}, {
+  "name": "Drifter",
+  "description": "Explore how the gyro is drifting",
+  "cardType": "example",
+  "url":"/tutorials/drifter",
+  "imageUrl":"/static/tutorials/drifter.png"
+}]
+```

docs/tutorials/move-straight-with-gyro.md

@@ -0,0 +1,61 @@
+# Move Straight With Gyro
+
+## Introduction @fullscreen
+
+Rotating using a wheel is not precise. The wheel can slip or the motors
+can be slightly different. 
+With the help of the gyro you can detect and correct deviations in your trajectory.
+
+* [EV3 Driving Base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
+* [EV3 Driving Base with Gyro](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-gyro-sensor-driving-base-a521f8ebe355c281c006418395309e15.pdf)
+
+
+## Step 1 Calibration
+
+Add a ``||sensors:calibrate gyro||`` block in a ``||brick:on button enter pressed||`` block so that you can manually start a calibration process. Run the calibration
+at least once after connecting the gyro.
+
+```blocks
+brick.showPorts()
+sensors.gyro2.calibrate()
+```
+
+## Step 2 Compute the error
+
+Make a new **error** variable and drag the ``||sensors:gyro rate||``
+and multiply it by -1. Since the rate shows the rotation rate, we will
+counter it by negating it.
+
+```blocks
+let error = 0
+brick.showPorts()
+sensors.gyro2.calibrate()
+while (true) {
+    error = sensors.gyro2.rate() * -1
+}
+```
+
+## Step 3 Steer with feedback
+
+Drag a ``||motors:steer motors||`` block under the variable and pass
+the **error** variable into the turn ratio section.
+
+If the robot is turning right, the gyro will report a positive rotation rate
+and the turn ratio will be negative which will the turn the robot left!
+
+```blocks
+let error = 0
+brick.showPorts()
+sensors.gyro2.calibrate()
+while (true) {
+    error = sensors.gyro2.rate() * -1
+    motors.largeBC.steer(error, 50)
+}
+```
+
+## Step 4 Run it!
+
+Download to your brick and test out if the robot is going straight.
+
+This kind of technique is called a proportional controller; 
+it corrects the inputs (motor speed) with a feedback proportional to the output (rotation rate).

docs/tutorials/turn-with-gyro.md

@@ -0,0 +1,43 @@
+# Turn With Gyro
+
+## Introduction @fullscreen
+
+Use the gyro to measure how much the robot is turning, regardless if your wheels are slipping.
+
+## Step 1 Calibrate
+
+Add the ``||sensors:calibrate gyro||`` block to make sure your gyro is ready to use.
+
+```blocks
+sensors.gyro2.calibrate()
+```
+
+## Step 2 Turn
+
+Use motor blocks to make the robot turn. Don't go too fast!
+
+```blocks
+sensors.gyro2.calibrate()
+motors.largeBC.steer(200, 20)
+```
+
+## Step 3 Pause for turn
+
+Use the ``||sensors:pause until rotated||`` block to wait until the desired amount of rotation has occured.
+
+```blocks
+sensors.gyro2.calibrate()
+motors.largeBC.steer(200, 20)
+sensors.gyro2.pauseUntilRotated(90)
+```
+
+## Step 4 Stop
+
+Stop the motors!
+
+```blocks
+sensors.gyro2.calibrate()
+motors.largeBC.steer(200, 20)
+sensors.gyro2.pauseUntilRotated(90)
+motors.stopAll()
+```

libs/color-sensor/color.ts

@@ -73,13 +73,7 @@ namespace sensors {
         }
 
         setMode(m: ColorSensorMode) {
-            if (m == ColorSensorMode.AmbientLightIntensity) {
-                this.thresholdDetector.setLowThreshold(5);
-                this.thresholdDetector.setHighThreshold(20);
-            } else {
-                this.thresholdDetector.setLowThreshold(20);
-                this.thresholdDetector.setHighThreshold(80);
-            }
+            // don't change threshold after initialization
             this._setMode(m)
         }
 

libs/core/input.ts

@@ -87,7 +87,7 @@ namespace sensors.internal {
             this.devType = DAL.DEVICE_TYPE_NONE
             this.iicid = ''
             this.sensors = []
-            this.poller = new Poller(50, () => this.query(), (prev, curr) => this.update(prev, curr));
+            this.poller = new Poller(25, () => this.query(), (prev, curr) => this.update(prev, curr));
         }
 
         poke() {
@@ -121,7 +121,7 @@ namespace sensors.internal {
 
         powerMM = control.mmap("/dev/lms_power", 2, 0)
 
-        devPoller = new Poller(500, () => { return hashDevices(); },
+        devPoller = new Poller(250, () => { return hashDevices(); },
             (prev, curr) => {
                 detectDevices();
             });
@@ -814,10 +814,10 @@ namespace sensors {
 
     export class ThresholdDetector {
         public id: number;
-        public min: number;
-        public max: number;
-        public lowThreshold: number;
-        public highThreshold: number;
+        private min: number;
+        private max: number;
+        private lowThreshold: number;
+        private highThreshold: number;
         public level: number;
         public state: ThresholdState;
 

libs/core/integrator.ts

@@ -0,0 +1,26 @@
+namespace control {
+    export class EulerIntegrator {
+        public value: number;
+        private t: number;
+        private v: number;
+
+        constructor() {
+            this.reset();
+        }
+
+        public integrate(derivative: number): void {
+            let now = control.millis();
+            let dt = (now -this.t) / 1000.0;
+            this.value += dt * (this.v + derivative) / 2;
+
+            this.t = now;
+            this.v = derivative;
+        }
+
+        public reset() {
+            this.value = 0;
+            this.v = 0;
+            this.t = control.millis();
+        }
+    }
+}

libs/core/output.ts

@@ -264,8 +264,9 @@ namespace motors {
             // allow 500ms for robot to settle
             if (this._brake && this._brakeSettleTime > 0)
                 pause(this._brakeSettleTime);
-            else
-                pause(1); // give a tiny breather
+            else {
+                pause(1);
+            }
         }
 
         protected pauseOnRun(stepsOrTime: number) {
@@ -275,7 +276,6 @@ namespace motors {
                 // allow robot to settle
                 this.settle();
             } else {
-                // give a breather to the event system in tight loops
                 pause(1);
             }
         }

libs/core/pxt.json

@@ -25,7 +25,8 @@
         "dal.d.ts",
         "icons.jres",
         "ns.ts",
-        "platform.h"
+        "platform.h",
+        "integrator.ts"
     ],
     "testFiles": [
         "test.ts"

libs/gyro-sensor/docs/reference/sensors/gyro/calibrate.md

@@ -1,6 +1,6 @@
 # calibrate
 
-Reset the zero reference for the gyro to current position of the brick.
+Detects if the gyro is drifting and performs a full reset if needed.
 
 ```sig
 sensors.gyro2.calibrate()

libs/gyro-sensor/docs/reference/sensors/gyro/pause-until-rotated.md

@@ -0,0 +1,21 @@
+# Pause Until Rotated
+
+Pauses the program until the gyro sensors detect that the desired amount of rotation
+has been acheived.
+
+```
+sensors.gyro2.pauseUntilRotated(90)
+```
+
+## Example
+
+This program performs a square turn left, then right.
+
+```blocks
+sensors.gyro2.calibrate()
+motors.largeBC.steer(200, 10)
+sensors.gyro2.pauseUntilRotated(90)
+motors.largeBC.steer(-200, 10)
+sensors.gyro2.pauseUntilRotated(-90)
+motors.largeBC.stop()
+```

libs/gyro-sensor/gyro.ts

@@ -7,12 +7,15 @@ const enum GyroSensorMode {
 namespace sensors {
     //% fixedInstances
     export class GyroSensor extends internal.UartSensor {
-        private calibrating: boolean;
+        private _calibrating: boolean;
         private _drift: number;
+        private _angle: control.EulerIntegrator;
         constructor(port: number) {
             super(port)
-            this.calibrating = false;
+            this._calibrating = false;
             this._drift = 0;
+            this._angle = new control.EulerIntegrator();
+            this._setMode(GyroSensorMode.Rate);
             this.setMode(GyroSensorMode.Rate);
         }
 
@@ -21,13 +24,17 @@ namespace sensors {
         }
 
         _query(): number {
-            return this.getNumber(NumberFormat.Int16LE, 0);
+            const v = this.getNumber(NumberFormat.Int16LE, 0);
+            this._angle.integrate(v - this._drift);
+            return v;
         }
 
         setMode(m: GyroSensorMode) {
-            if (m == GyroSensorMode.Rate && this.mode != m)
-                this._drift = 0;
-            this._setMode(m)
+            // decrecated
+        }
+
+        isCalibrating(): boolean {
+            return this._calibrating;
         }
 
         /**
@@ -40,15 +47,14 @@ namespace sensors {
         //% parts="gyroscope"
         //% blockNamespace=sensors
         //% this.fieldEditor="ports"
-        //% weight=64
+        //% weight=64 blockGap=8
         //% group="Gyro Sensor"
         angle(): number {
             this.poke();
-            if (this.calibrating)
-                pauseUntil(() => !this.calibrating, 2000);
+            if (this._calibrating)
+                pauseUntil(() => !this._calibrating, 2000);
 
-            this.setMode(GyroSensorMode.Angle);
-            return this._query();
+            return Math.round(this._angle.value);
         }
 
         /**
@@ -65,15 +71,13 @@ namespace sensors {
         //% group="Gyro Sensor"
         rate(): number {
             this.poke();
-            if (this.calibrating)
-                pauseUntil(() => !this.calibrating, 2000);
-
-            this.setMode(GyroSensorMode.Rate);
+            if (this._calibrating)
+                pauseUntil(() => !this._calibrating, 2000);
             return this._query() - this._drift;
         }
 
         /**
-         * Forces a calibration of the with light progress indicators. 
+         * Detects if calibration is necessary and performs a full reset, drift computation.
          * Must be called when the sensor is completely still.
          */
         //% help=sensors/gyro/calibrate
@@ -85,16 +89,30 @@ namespace sensors {
         //% weight=51 blockGap=8
         //% group="Gyro Sensor"
         calibrate(): void {
-            if (this.calibrating) return; // already in calibration mode
+            if (this._calibrating) return; // already in calibration mode
 
             const statusLight = brick.statusLight(); // save current status light
             brick.setStatusLight(StatusLight.Orange);
 
-            this.calibrating = true;
+            this._calibrating = true;
             // may be triggered by a button click,
             // give time for robot to settle
             pause(700);
 
+            // compute drift
+            this.computeDriftNoCalibration();
+            if (Math.abs(this.drift()) < 0.1) {
+                // no drift, skipping calibration
+                brick.setStatusLight(StatusLight.Green); // success
+                pause(1000);
+                brick.setStatusLight(statusLight); // resture previous light
+
+                // and we're done
+                this._angle.reset();
+                this._calibrating = false;
+                return;
+            }
+
             // calibrating
             brick.setStatusLight(StatusLight.OrangePulse);
 
@@ -103,22 +121,22 @@ namespace sensors {
             // wait till sensor is live
             pauseUntil(() => this.isActive(), 7000);
             // mode toggling
-            this.setMode(GyroSensorMode.Rate);
-            this.setMode(GyroSensorMode.Angle);
+            this._setMode(GyroSensorMode.Rate);
+            this._setMode(GyroSensorMode.Angle);
+            this._setMode(GyroSensorMode.Rate);
 
             // check sensor is ready
             if (!this.isActive()) {
                 brick.setStatusLight(StatusLight.RedFlash); // didn't work
                 pause(2000);
                 brick.setStatusLight(statusLight); // restore previous light
-                this.calibrating = false;
+                this._angle.reset();
+                this._calibrating = false;
                 return;
             }
 
             // switch to rate mode
             this.computeDriftNoCalibration();
-            // switch back to the desired mode
-            this.setMode(this.mode);
 
             // and done
             brick.setStatusLight(StatusLight.Green); // success
@@ -126,7 +144,8 @@ namespace sensors {
             brick.setStatusLight(statusLight); // resture previous light
 
             // and we're done
-            this.calibrating = false;
+            this._angle.reset();
+            this._calibrating = false;
         }
 
         /**
@@ -141,13 +160,37 @@ namespace sensors {
         //% weight=50 blockGap=8
         //% group="Gyro Sensor"
         reset(): void {
-            if (this.calibrating) return; // already in calibration mode
+            if (this._calibrating) return; // already in calibration mode
+
+            this._calibrating = true;
+            const statusLight = brick.statusLight(); // save current status light
+            brick.setStatusLight(StatusLight.Orange);
 
-            this.calibrating = true;
             // send a reset command
             super.reset();
+            this._drift = 0;
+            this._angle.reset();
+            pauseUntil(() => this.isActive(), 7000);
+
+            // check sensor is ready
+            if (!this.isActive()) {
+                brick.setStatusLight(StatusLight.RedFlash); // didn't work
+                pause(2000);
+                brick.setStatusLight(statusLight); // restore previous light
+                this._angle.reset();
+                this._calibrating = false;
+                return;
+            }
+
+            this._setMode(GyroSensorMode.Rate);
+
             // and done
-            this.calibrating = false;
+            brick.setStatusLight(StatusLight.Green); // success
+            pause(1000);
+            brick.setStatusLight(statusLight); // resture previous light
+            // and done
+            this._angle.reset();
+            this._calibrating = false;
         }
 
         /**
@@ -177,39 +220,54 @@ namespace sensors {
         //% weight=10 blockGap=8
         //% group="Gyro Sensor"
         computeDrift() {
-            if (this.calibrating)
-                pauseUntil(() => !this.calibrating, 2000);
+            if (this._calibrating)
+                pauseUntil(() => !this._calibrating, 2000);
             pause(1000); // let the robot settle
             this.computeDriftNoCalibration();
         }
 
+        /**
+         * Pauses the program until the gyro detected
+         * that the angle changed by the desired amount of degrees.
+         * @param degrees the degrees to turn
+         */
+        //% help=sensors/gyro/pause-until-rotated
+        //% block="pause until **gyro** %this|rotated %degrees=rotationPicker|degrees"
+        //% blockId=gyroPauseUntilRotated
+        //% parts="gyroscope"
+        //% blockNamespace=sensors
+        //% this.fieldEditor="ports"
+        //% degrees.defl=90
+        //% weight=63
+        //% group="Gyro Sensor"
+        pauseUntilRotated(degrees: number, timeOut?: number): void {
+            let a = this.angle();
+            const end = a + degrees;
+            const direction = (end - a) > 0 ? 1 : -1;
+            pauseUntil(() => (end - this.angle()) * direction <= 0, timeOut);
+        }
+
         private computeDriftNoCalibration() {
             // clear drift
-            this.setMode(GyroSensorMode.Rate);
             this._drift = 0;
-            const n = 100;
+            const n = 10;
             let d = 0;
             for (let i = 0; i < n; ++i) {
                 d += this._query();
-                pause(4);
+                pause(20);
             }
-            this._drift = Math.round(d / n);
+            this._drift = d / n;
+            this._angle.reset();
         }
 
         _info(): string {
-            if (this.calibrating)
+            if (this._calibrating)
                 return "cal...";
 
-            switch (this.mode) {
-                case GyroSensorMode.Angle:
-                    return `${this._query()}>`;
-                case GyroSensorMode.Rate:
-                    let r = `${this._query()}r`;
-                    if (this._drift != 0)
-                        r += `-${this._drift | 0}`;
-                    return r;
-            }
-            return "";
+            let r = `${this._query()}r`;
+            if (this._drift != 0)
+                r += `-${this._drift | 0}`;
+            return r;
         }
     }
 
@@ -224,4 +282,17 @@ namespace sensors {
 
     //% fixedInstance whenUsed block="4" jres=icons.port4
     export const gyro4: GyroSensor = new GyroSensor(4)
+
+    /**
+      * Get the rotation angle field editor
+      * @param degrees angle in degrees, eg: 90
+      */
+    //% blockId=rotationPicker block="%degrees"
+    //% blockHidden=true shim=TD_ID
+    //% colorSecondary="#FFFFFF"
+    //% degrees.fieldEditor="numberdropdown" degrees.fieldOptions.decompileLiterals=true
+    //% degrees.fieldOptions.data='[["30", 30], ["45", 45], ["60", 60], ["90", 90], ["180", 180], ["-30", -30], ["-45", -45], ["-60", -60], ["-90", -90], ["-180", -180]]'
+    export function __rotationPicker(degrees: number): number {
+        return degrees;
+    }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "1.2.16",
+  "version": "1.2.21",
   "description": "LEGO MINDSTORMS EV3 for Microsoft MakeCode",
   "private": false,
   "keywords": [

sim/state/gyro.ts

@@ -1,5 +1,5 @@
 namespace pxsim {
-    const enum GyroSensorMode {
+    export const enum GyroSensorMode {
         None = -1,
         Angle = 0,
         Rate = 1,
@@ -8,7 +8,6 @@ namespace pxsim {
     export class GyroSensorNode extends UartSensorNode {
         id = NodeType.GyroSensor;
 
-        private angle: number = 0;
         private rate: number = 0;
 
         constructor(port: number) {
@@ -19,23 +18,20 @@ namespace pxsim {
             return DAL.DEVICE_TYPE_GYRO;
         }
 
-        setAngle(angle: number) {
-            if (this.angle != angle) {
-                this.angle = angle;
-                this.setChangedState();
-            }
-        }
-
         setRate(rate: number) {
+            rate = rate | 0;
             if (this.rate != rate) {
                 this.rate = rate;
                 this.setChangedState();
             }
         }
 
+        getRate() {
+            return this.rate;
+        }
+
         getValue() {
-            return this.mode == GyroSensorMode.Angle ? this.angle :
-                this.mode == GyroSensorMode.Rate ? this.rate : 0;
+            return this.getRate();
         }
     }
 }

sim/visuals/controlView.ts

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

sim/visuals/controls/rotationSlider.ts

@@ -1,13 +1,15 @@
 
 
 namespace pxsim.visuals {
+    const MAX_RATE = 40;
 
     export class RotationSliderControl extends ControlView<GyroSensorNode> {
         private group: SVGGElement;
         private slider: SVGGElement;
+        private rateText: 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 +25,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.rateText = pxsim.svg.child(this.group, "text", {
+                'x': this.getInnerWidth() / 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 +71,10 @@ namespace pxsim.visuals {
                 return;
             }
             const node = this.state;
-            const percentage = node.getValue();
+            const rate = node.getRate();
+            this.rateText.textContent = `${rate}°/s`
+            // cap rate at 40deg/s
+            const percentage = 50 + Math.sign(rate) * Math.min(MAX_RATE, Math.abs(rate)) / MAX_RATE * 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 +86,10 @@ 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));
+            state.setRate(MAX_RATE * t);
         }
     }
 

sim/visuals/robotgametable.ts

@@ -0,0 +1,55 @@
+namespace pxsim {
+    export class RobotGameTable {
+        readonly ctx: CanvasRenderingContext2D;
+        readonly data: ImageData;
+
+        cx: number; // cm
+        cy: number; // cm
+        angle: number; // radians
+        cwidth: number; // cm
+
+        constructor(public canvas: HTMLCanvasElement, public scale: number) {
+            this.ctx = this.canvas.getContext("2d");
+            this.data = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+            this.cx = this.width / 2;
+            this.cy = 0;
+        }
+
+        /**
+         * Gets the width in cm
+         */
+        get width() { 
+            return this.canvas.width * this.scale;
+        }
+
+        /**
+         * gets the height in cm
+         */
+        get height() {
+            return this.canvas.height * this.scale;
+        }
+
+        color(): number {
+            // compute color sensor position from center;
+            // todo
+            const px = Math.max(0, Math.min(this.data.width, (this.cx ) / this.scale));
+            const py = Math.max(0, Math.min(this.data.height, (this.cy ) / this.scale));
+            // get color
+            const i = px * this.data.width + py;
+            let c = 
+                (this.data.data[i] << 16) | (this.data.data[i + 1] << 8) | (this.data.data[i + 2]);
+            // map color to known color
+            return c;
+        }
+
+        intensity(): number {
+            const c = this.color();
+            return ((c >> 16 & 0xff) + (c >> 8 & 0xff) + (c & 0xff)) / 3;
+        }
+
+        ultrasonicDistance() {
+            // obstacles?
+            
+        }
+    }
+}

targetconfig.json

@@ -18,6 +18,7 @@
         "Touch Sensor Tutorials": "tutorials/touch-sensor",
         "Color Sensor Tutorials": "tutorials/color-sensor",
         "Ultrasonic Sensor Tutorials": "tutorials/ultrasonic-sensor",
+        "Gyro Tutorials": "tutorials/gyro",
         "Infrared Sensor Tutorials": "tutorials/infrared-sensor",
         "FLL / City Shaper": "tutorials/city-shaper",
         "Design Engineering": "design-engineering",