slow down device poller

* refactor bootsequence

* inf can be null

* align elements

.gitignore

@@ -17,6 +17,7 @@ clients/**/bin/**
 clients/**/obj/**
 clients/electron/projects
 libs/**/_locales/**
+package-lock.json
 
 videos/**
 

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - "8.9.0"
+script:
+  - "node node_modules/pxt-core/built/pxt.js travis"
+sudo: false
+cache:
+  directories:
+    - node_modules

README.md

@@ -1,13 +1,8 @@
-# LEGO® MINDSTORMS® Education EV3 for Microsoft MakeCode
-
-[![Build Status](https://ci2.dot.net/buildStatus/icon?job=Private/pxt_project_rainbow/master/pxt-ev3_Push)](https://ci2.dot.net/job/Private/job/pxt_project_rainbow/job/master/job/pxt-ev3_Push/)
+# LEGO® MINDSTORMS® Education EV3 for Microsoft MakeCode [![Build Status](https://travis-ci.org/microsoft/pxt-ev3.svg?branch=master)](https://travis-ci.org/microsoft/pxt-ev3)
 
 This repo contains the editor target hosted at https://makecode.mindstorms.com
 
-LEGO Auth: https://src.education.lego.com/groups/ev3-makecode (use Google Authenticator)
-LEGO Chat: https://chat.internal.education.lego.com/make-code/channels/town-square
-
-## Local Dev setup
+## Local setup
 
 These instructions assume familiarity with dev tools and languages.
 
@@ -15,10 +10,6 @@ These instructions assume familiarity with dev tools and languages.
 * install Docker; make sure `docker` command is in your `PATH`
 * (optional) install [Visual Studio Code](https://code.visualstudio.com/)
 
-In a common folder,
-
-* clone https://github.com/Microsoft/pxt to ``pxt`` folder
-* clone https://github.com/Microsoft/pxt-common-packages to ``pxt-common-packages`` folder
 * clone https://github.com/Microsoft/pxt-ev3 to ``pxt-ev3`` folder
 * go to ``pxt`` and run
 
@@ -26,6 +17,18 @@ In a common folder,
 npm install
 ```
 
+* to run the local server,
+```
+pxt serve --cloud
+```
+
+## Local Dev setup
+
+In the common folder,
+
+* clone https://github.com/Microsoft/pxt to ``pxt`` folder
+* clone https://github.com/Microsoft/pxt-common-packages to ``pxt-common-packages`` folder
+
 * go to ``pxt-common-packages`` and run
 
 ```
@@ -57,12 +60,12 @@ cd libs/core
 pxt deploy
 ```
 
-### Jenkins build
-https://ci2.dot.net/job/Private/job/pxt_project_rainbow/job/master/
-
 ## License
 MIT
 
+## Trademarks
+MICROSOFT, the Microsoft Logo, and MAKECODE are registered trademarks of Microsoft Corporation. They can only be used for the purposes described in and in accordance with Microsoft’s Trademark and Brand guidelines published at https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general.aspx. If the use is not covered in Microsoft’s published guidelines or you are not sure, please consult your legal counsel or the MakeCode team (makecode@microsoft.com). 
+
 ## Code of Conduct
 
 This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

cmds/cmds.ts

@@ -1,14 +0,0 @@
-/// <reference path="../node_modules/pxt-core/built/pxtlib.d.ts" />
-
-import * as fs from 'fs';
-
-const deploy = require("./editor/deploy")
-
-export function deployCoreAsync(resp: pxtc.CompileResult) {
-    return deploy.deployCoreAsync(resp, process.env["PXT_SERIAL"] ? false : true)
-        .then(() => {
-            fs.writeFileSync("built/full-" + pxtc.BINARY_UF2, resp.outfiles[pxtc.BINARY_UF2], {
-                encoding: "base64"
-            })
-        })
-}

cmds/tsconfig.json

@@ -1,14 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "es5",
-        "noImplicitAny": true,
-        "noImplicitReturns": true,
-        "declaration": true,
-        "outDir": "../built",
-        "module": "commonjs",
-        "rootDir": ".",
-        "newLine": "LF",
-        "sourceMap": false,
-        "types": ["node"]
-    }
-}

docs/SUMMARY.md

@@ -4,6 +4,8 @@
 
 * [Troubleshoot](/troubleshoot)
 * [EV3 Manager](https://ev3manager.education.lego.com/)
+* [Bluetooth](/bluetooth)
+* [Forum](https://forum.makecode.com)
 * [LEGO Support](https://www.lego.com/service/)
 * [FIRST LEGO League](/fll)
 
@@ -19,11 +21,14 @@
     * [What Animal Am I?](/tutorials/what-animal-am-i)
     * [Music Brick](/tutorials/music-brick)
     * [Run Motors](/tutorials/run-motors)
+    * [Tank ZigZag](/tutorials/tank-zigzag)
     * [Touch to Run](/tutorials/touch-to-run)
     * [Touch Sensor Values](/tutorials/touch-sensor-values)
     * [What Color?](/tutorials/what-color)
     * [Line Following](/tutorials/line-following)
     * [Red Light, Green Light](/tutorials/redlight-greenlight)
+    * [Reflected Light Measure](/tutorials/reflected-light-measure)
+    * [Reflected Light Calibration](/tutorials/reflected-light-calibration)
     * [Object Near?](/tutorials/object-near)
     * [Security Alert](/tutorials/security-alert)
 

docs/about.md

@@ -28,7 +28,7 @@ program to a **.uf2** file, which you then copy to the **@drivename@** drive. Th
 
 ### ~ hint
 
-Not seeing the **@drivename@** drive? Make sure to upgrade your firmware at https://ev3manager.education.lego.com/. Try these [troubleshooting](/troubleshoot) tips if you still have trouble getting the drive to appear.
+**Experimental support** for Bluetooth download is now available. Please read the [Bluetooth](/bluetooth) page for more information.
 
 ### ~
 

docs/bluetooth.md

@@ -0,0 +1,62 @@
+# Bluetooth
+
+This page describes the procedure to download MakeCode program to the EV3 brick 
+over Bluetooth.
+
+## ~ hint
+
+### WARNING: EXPERIMENTAL FEATURES AHEAD! 
+
+Support for Bluetooth download relies on [Web Serial](https://wicg.github.io/serial/),
+an experimental browser feature. Web Serial is a work [in progress](https://www.chromestatus.com/feature/6577673212002304); 
+it may change or be removed in future versions without notice.
+
+By enabling these experimental browser features, you could lose browser data or compromise your device security 
+or privacy.
+
+## ~
+
+https://youtu.be/VIq8-6Egtqs
+
+## Supported browsers
+
+* Chrome desktop, version 77 and higher, Windows 10 or Mac OS.
+* [Edge Insider desktop](https://www.microsoftedgeinsider.com), version 77 and higher, Windows 10 or Mac OS.
+
+To make sure your browser is up to date, go to the '...' menu, click "Help" then "About".
+
+Next you need to enable the experimental features (this may change in the future)
+
+* go to **chrome://flags/#enable-experimental-web-platform-features** and **enable** 
+**Experimental Web Platform features**
+
+![A screenshot of the flags page in chrome](/static/bluetooth/experimental.png)
+
+## Machine Setup
+
+* pair your EV3 brick with your computer over Bluetooth. This is the usual pairing procedure.
+
+## Download over Bluetooth
+
+* 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.
+* **make sure the EV3 brick is not running a program**
+* click on **Download** again to download over bluetooth.
+
+## Choosing the correct serial port
+
+Unfortunately, the browser dialog does not make it easy to select which serial port is the brick.
+
+* 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
+
+* We do not detect properly that the program is running on the brick. Make sure to stop the program before starting the download procedure.
+* The list of programs on the brick screen is not updated when uploading via bluetooth.
+
+## Feedback
+
+Please send us your feedback through https://forum.makecode.com.

docs/coding/line-detection.md

@@ -190,12 +190,10 @@ if (true) {
 
 ```blocks
 forever(function () {
-    while (true) {
-        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Black)
+    while (sensors.color3.color() == ColorSensorColor.Black) {
         motors.largeBC.steer(-30, 50)
     }
-    while (true) {
-        sensors.color3.pauseUntilColorDetected(ColorSensorColor.White)
+    while (sensors.color3.color() == ColorSensorColor.White) {
         motors.largeBC.steer(30, 50)
     }
 })
@@ -209,11 +207,9 @@ Else the Color Sensor detects the color white, start motors ``B`` and ``C`` (dri
 
 ```blocks
 forever(function () {
-    if (true) {
-        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Black)
+    if (sensors.color3.color() == ColorSensorColor.Black) {
         motors.largeBC.steer(-30, 50)
     } else {
-        sensors.color3.pauseUntilColorDetected(ColorSensorColor.White)
         motors.largeBC.steer(30, 50)
     }
 })

docs/design-engineering/make-it-smarter.md

@@ -101,9 +101,9 @@ The blocks inside the ``||loops:forever||`` loop have these actions:
 1. Turn on the ``green`` EV3 Brick Status Light.
 2. Wait for Ultrasonic Sensor to detect an object.
 3. Turn on Motors ``A`` and ``D`` in opposite directions.
-4. Wait for one quarter of a second (``1500`` milli seconds).
+4. Wait for one and a half seconds (``1500`` milli seconds).
 5. Reverse the direction of Motors ``A`` and ``D``.
-6. Wait for one quarter of a second.
+6. Wait for one and a half seconds.
 7. Stop all motors.
 8. Make an insect chirping sound.
 9. Loop continuously so that the insect wanders around when the Ultrasonic Sensor is detects something.

docs/examples.md

@@ -212,6 +212,12 @@ Here are some fun programs for your @boardname@!
   "description": "Keep your brick entertained and happy",
   "url":"/examples/happy-unhappy",
   "cardType": "example"
+}, {
+{
+  "name": "Turtle",
+  "description": "Encode moves and run them on a driving base",
+  "url":"/examples/turtle",
+  "cardType": "example"
 }, {
   "name": "Distance Measurer",
   "description": "Use a motor to measure angle and distance",

docs/extensions.md

@@ -0,0 +1,18 @@
+# Extensions
+
+## #gallery
+
+## Using Extensions
+
+In the web editor, click on ``Settings`` then ``Extensions`` to search and add extensions to the project.
+The Blocks and JavaScript definitions will be automatically loaded in the editor.
+
+## Custom extensions
+
+The [Build Your Own Extension](https://makecode.com/extensions/getting-started) manual is for advanced users who want to publish their own extension. 
+
+## ~ hint
+
+**Extensions** were previously called **Packages** in MakeCode.
+
+## ~

docs/fll.md

@@ -2,32 +2,50 @@
 
 ![FIRST LEGO League logo](/static/fll/fll-logo.png)
 
-For teams participating in the Open Software Platform Pilot utilizing MakeCode, we’ve compiled a list of resources and information that we hope will be helpful for you.
+**For teams participating in City Shaper challenge**, you can use MakeCode for your challenge (see [City Shaper Challenge, page 7 bottom](https://firstinspiresst01.blob.core.windows.net/fll/2020/city-shaper-game-guide-pdf.pdf)!
+
+We’ve compiled a list of resources and information that we hope will be helpful for you.
+
+* **Got a question? Post it on the forums** at https://forum.makecode.com/
 
 ## FAQ
 
+### I found a bug what do I do?
+
+If you found a bug, please try if it hasn't been fixed yet! Go to https://makecode.mindstorms.com/beta and try if the bug is corrected. Otherwise, please tell us at https://forum.makecode.com/.
+
 ### How do I use MakeCode with my EV3?
 
 * You will need to install the latest EV3 firmware on your brick. Instructions on how to do that are located here: https://makecode.mindstorms.com/troubleshoot.
 * You will need a computer with a USB port to connect to the EV3 in order to download your programs.
 * You will need internet access and a browser on your computer to get to https://makecode.mindstorms.com.
+* You can [install the app](/offline-app) to use the editor offline.
+
+### I know LabView, how is MakeCode different?
+
+We have compiled a guide for EV3 LabView users at https://makecode.mindstorms.com/labview.
 
 ### What’s the best way to get started with MakeCode?
 
-Watch some of the videos at https://makecode.mindstorms.com (at the bottom of the page).
-Try some of the provided tutorials:
+Go to https://makecode.mindstorms.com. The home screen is filled with videos, tutorials and examples that might be relevant for your missions.
 
-* [Wake Up!](@homeurl@#tutorial:tutorials/wake-up) – show your EV3 brick waking up
-* [Animation](@homeurl@#tutorial:tutorials/make-an-animation) – create a custom animation to show
-* [Music Brick](@homeurl@#tutorial:tutorials/music-brick) – transform your EV3 into a musical instrument
-* [Run Motors](@homeurl@#tutorial:tutorials/run-motors) – control the motors of your robot
-* [Red Light, Green Light](@homeurl@#tutorial:tutorials/redlight-greenlight) – play red light, green light with the color sensor
-* [Line Following](@homeurl@#tutorial:tutorials/line-following) – have your robot follow a line
+On the home page, scroll down to the **FLL / City Shaper** section for specific lessons related to Mission 2.
 
 ### Can I load both LEGO MINDSTORMS EV3 Software and MakeCode programs onto my EV3?
 
 Yes.
 
+### Can I run the program again on the brick?
+
+![EV3 Brick with Try in BrkProg_Save Folder in File Manager](/static/getting-started/try-in-file-manager.png)
+
+Use the Brick Buttons and navigate to the File Manager tab.  Open the **BrkProg_SAVE** folder, 
+select your program and click the center button to run it again.
+
+### Does it work without internet?
+
+No, the editor is cached in your browser cache. However, you can also download the [offline app](/offline-app) in case you need to install it on a computer.
+
 ### How do I figure out what a block does?
 
 You can right-click on any block and select “Help” in the context menu to open the documentation page describing what that block does.
@@ -81,20 +99,25 @@ You can share your projects by clicking on the **share** button in the top left
 
 Sharing programs is also shown in the [Tips and Tricks](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=5c594c2373367f7870196f519f3bfc7a&source=embed&photo%5fid=35719472) video.
 
+### Can I use Bluetooth to transfer my program?
+
+The official answer is currently no. That being said, we have **Experimental support** for Bluetooth download. Please read the [Bluetooth](/bluetooth) page for more information.
+
+https://youtu.be/VIq8-6Egtqs
+
+## Are there YouTube videos on MakeCode for EV3?
+
+The MakeCode has a [FLL / City Shaper YouTube Channel](https://www.youtube.com/watch?v=IqL0Pyeu5Ng&list=PLMMBk9hE-SeqkOObethhlZtBTEK6FYx3n) with useful videos.
+
+https://youtu.be/-AirqwC9DL4
+
 ### Why can't I delete my program (*.uf2) files from the Brick?
 
-There's a bug in the firmware which prevents you from deleting the programs (``*.uf2`` files) from your EV3 Brick. There isn't a firmware update to fix this yet. As a workaround, you can temporarily downgrade your firmware version, delete the files, and then upgrade back to the version that works with MakeCode.
+There's a bug in the firmware which prevents you from deleting the programs (``*.uf2`` files) from your EV3 Brick. There isn't a firmware update to fix this yet.
 
-Follow these steps to downgrade your firmware version, delete the files, and uprgade back again:
-
-1. Go into **EV3 LabVIEW** - if it's not installed get it [here](https://education.lego.com/en-us/downloads/mindstorms-ev3/software)
-2. Plug in your EV3 Brick and start a new project
-3. Go to the **Tools** menu in the upper right corner, select **Firmware Update**
-4. In the **Firmware Update** dialog box, click on the **Show Details** button
-5. From the **Available Firmware Files** list, select **EV3 Firmware V1.09E**
-6. Click the **Update Firmware** button and wait for the update to complete
-
-Now the firmware version on the EV3 Brick will be **V1.09E**. Also, in the process, the downgrade deleted all of the saved programs from the EV3 Brick. To continue to use MakeCode, the firmware version must be at **V1.10E** or above. So, the Brick firmware needs to be upgraded again. If you don't know or do remember how to do this, see the **Upgrade your @drivename@** section in the [troubleshooting](/troubleshoot) page.
+We have prepared a special program that lets you delete UF2 files from the brick.
+Download [these PDF instructions](/file-manager.pdf) and drop the PDF on the brick drive.
+This will present you with an menu for deleting files.
 
 For other common questions, try the FAQ page https://makecode.mindstorms.com/faq.
 
@@ -104,9 +127,3 @@ For other common questions, try the FAQ page https://makecode.mindstorms.com/faq
 
 >* Description: Unable to delete program files from the EV3 brick after downloading them
 >* Status: LEGO Education team is working on a fix, no estimated date yet
-
-## Community connection
-
-For questions, issues, feedback and community for the Open Software Platform Pilot:
-
-We are using a messaging service called **Slack**. Slack can be accessed via an app you download to your computer or mobile device, and via a web interface. For more information about Slack, click [here](https://slack.com/). Anyone in the pilot can participate by signing up with Slack first, and then clicking this [FIRST LEGO League Robot SW](https://fllrobotsw.slack.com/join/shared_invite/enQtNDgxOTQ5MDc2OTkyLTg2ZTRkYzQ4OGMyZTg1OTZmMDFhMWNlOTQ1OWRlNDdmNzNmMjlhMmZiM2M3OWUxYjU1ODEwY2FmODJkNjZkOTA) link to join the Slack workspace.

docs/getting-started.md

@@ -25,6 +25,12 @@
     "description": "Build a robot and drive into the world of robotics!",
     "url": "/getting-started/use",
     "cardType": "side"
+},
+{
+    "name": "First LEGO League",
+    "imageUrl": "/static/fll/fll-big.png",
+    "description": "Information about using MakeCode in FLL competitions",
+    "url": "/fll"
 }
 ]
 ```

docs/getting-started/try.md

@@ -54,6 +54,12 @@ Verify that the program you just created shows eyes on the Brick Display, and th
 
 **Well done!**
 
+## Run it Again
+
+![EV3 Brick with Try in BrkProg_Save Folder in File Manager](/static/getting-started/try-in-file-manager.png)
+
+Use the Brick Buttons and navigate to the File Manager tab.  Open the **BrkProg_SAVE** folder, select **Try** and click the center button to run it again.
+
 ## Connect a Large Motor
 
 Now you will learn to control the Large Motor.

docs/index-ref.json

@@ -1,3 +1,3 @@
 {
-    "appref": "v1.0.8"
+    "appref": "v1.2.22"
 }

docs/labview.md

@@ -61,6 +61,12 @@ motors.largeBC.steer(0, 50, 1, MoveUnit.Rotations);
 motors.largeBC.stop();
 ```
 
+### ~ hint
+
+The **turn ratio range is -200, 200** unlike LabView who used -100,100.
+
+### ~
+
 ## Tank
 
 The **tank** blocks control the speed of two motors. These are commonly used for a differential drive robot. The blocks can also specify the duration, angle, or number of rotations.

docs/offline-app.html

@@ -388,12 +388,12 @@
         }
         function downloadWin64() {
             // TODO: Keep this link up-to-date with the desired release version
-            window.open("https://makecode.com/api/release/ev3/v1.0.8/win64");
+            window.open("https://makecode.com/api/release/ev3/v1.2.22/win64");
             tickEvent("offlineapp.download", { "target": "ev3", "platform": "win64" });
         }
         function downloadMac64() {
             // TODO: Keep this link up-to-date with the desired release version
-            window.open("https://makecode.com/api/release/ev3/v1.0.8/mac64");
+            window.open("https://makecode.com/api/release/ev3/v1.2.22/mac64");
             tickEvent("offlineapp.download", { "target": "ev3", "platform": "mac64" });
         }
     </script>

docs/offline.md

@@ -0,0 +1,5 @@
+# @extends
+
+## Offline app #target-app
+
+The MakeCode editor is available as app which you can install on a computer with Windows or Mac OS. Once installed, the **[MakeCode Offline App](/offline-app)** lets you create, run, and download your projects to the @boardname@. It works the same as the Web application does in your browser but it's a stand-alone application that will work when a connection to the internet is restricted or not available.

docs/packages-ref.json

@@ -0,0 +1,3 @@
+{
+    "redirect": "/extensions"
+}

docs/packages/approval-ref.json

@@ -0,0 +1,3 @@
+{
+    "redirect": "https://makecode.com/extensions/approval"
+}

docs/packages/build-your-own-ref.json

@@ -0,0 +1,3 @@
+{
+    "redirect": "https://makecode.com/extensions/getting-started"
+}

docs/packages/versioning-ref.json

@@ -0,0 +1,3 @@
+{
+    "redirect": "https://makecode.com/extensions/versioning"
+}

docs/projects.md

@@ -1,9 +1,88 @@
 # Projects
 
-Here are some cool projects that you can build with your @boardname@!
+```codecard
+[
+    {
+        "name": "Getting Started",
+        "url": "/getting-started",
+        "imageUrl": "/static/lessons/firmware.png"
+    },
+    {
+        "name": "Brick Tutorials",
+        "url": "/tutorials/brick",
+        "imageUrl": "/static/tutorials/wake-up.png"
+    },
+    {
+        "name": "Motor Tutorials",
+        "url": "/tutorials/motors",
+        "imageUrl": "/static/tutorials/run-motors.png"
+    },
+    {
+        "name": "Touch Sensor Tutorials",
+        "url": "/tutorials/touch-sensor",
+        "imageUrl": "/static/tutorials/touch-to-run.png"
+    },
+    {
+        "name": "Color Sensor Tutorials",
+        "url": "/tutorials/color-sensor",
+        "imageUrl": "/static/tutorials/what-color.png"
+    },
+    {
+        "name": "Ultrasonic Sensor Tutorials",
+        "url": "/tutorials/ultrasonic-sensor",
+        "imageUrl": "/static/tutorials/object-near.png"
+    },
+    {
+        "name": "Gyro Tutorials",
+        "url": "/tutorials/gyro",
+        "imageUrl": "/static/tutorials/calibrate-gyro.png"
+    },
+    {
+        "name": "Infrared Sensor Tutorials",
+        "url": "/tutorials/infrared-sensor",
+        "imageUrl": "/static/tutorials/security-alert.png"
+    },
+    {
+        "name": "FLL / City Shaper",
+        "url": "/tutorials/city-shaper",
+        "imageUrl": "/static/tutorials/city-shaper/robot1.jpg"
+    },
+    {
+        "name": "Design Engineering",
+        "url": "/design-engineering",
+        "imageUrl": "/static/lessons/make-it-move-without-wheels.png"
+    },
+    {
+        "name": "Coding",
+        "url": "/coding",
+        "imageUrl": "/static/lessons/autonomous-parking.png"
+    },
+    {
+        "name": "Maker",
+        "url": "/maker",
+        "imageUrl": "/static/lessons/make-a-sound-machine.png"
+    },
+    {
+        "name": "Tutorial Videos",
+        "url": "/videos",
+        "imageUrl": "https://legoeducation.videomarketingplatform.co/27288170/35719444/5d009e5f93fbf479c2e5ed2bf87a7990/thumbnail.png"
+    }
+]
+```
 
-## Basic
+## See Also
 
-Basic projects to build with your EV3 Brick.
+[Getting Started](/getting-started),
+[Brick Tutorials](/tutorials/brick),
+[Motor Tutorials](/tutorials/motors),
+[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),
+[Coding](/coding),
+[Maker](/maker),
+[Tutorial Videos](/videos)
 
-Coming soon.

docs/projects/SUMMARY.md

@@ -0,0 +1,69 @@
+# Projects
+
+* [Getting Started](/getting-started)
+  * [Prepare](https://makecode.mindstorms.com/troubleshoot)
+  * [Try](/getting-started/try)
+  * [Use](/getting-started/use)
+  * [First LEGO League](/fll)
+* [Brick Tutorials](/tutorials/brick)
+  * [Wake Up!](/tutorials/wake-up)
+  * [Make an Animation](/tutorials/make-an-animation)
+  * [What Animal Am I?](/tutorials/what-animal-am-i)
+  * [Music Brick](/tutorials/music-brick)
+  * [Pause On Start](/tutorials/pause-on-start)
+* [Motor Tutorials](/tutorials/motors)
+  * [Run Motors](/tutorials/run-motors)
+  * [Spin Turn](/tutorials/spin-turn)
+  * [Pivot Turn](/tutorials/pivot-turn)
+  * [Smooth Turn](/tutorials/smooth-turn)
+  * [Tank ZigZag](/tutorials/tank-zigzag)
+  * [Coast Or Brake](/tutorials/coast-or-brake)
+  * [Turtle](/tutorials/turtle)
+* [Touch Sensor Tutorials](/tutorials/touch-sensor)
+  * [Touch to Run](/tutorials/touch-to-run)
+  * [Sensor Values](/tutorials/touch-sensor-values)
+  * [Stop At Object](/tutorials/stop-at-object)
+* [Color Sensor Tutorials](/tutorials/color-sensor)
+  * [What Color?](/tutorials/what-color)
+  * [Line Following](/tutorials/line-following)
+  * [Red Light, Green Light](/tutorials/redlight-greenlight)
+  * [Move To Color](/tutorials/move-to-color)
+  * [Reflected Light Measure](/tutorials/reflected-light-measure)
+  * [Reflected Light Calibration](/tutorials/reflected-light-calibration)
+* [Ultrasonic Sensor Tutorials](/tutorials/ultrasonic-sensor)
+  * [Object Near](/tutorials/object-near)
+  * [Wall Follower](/tutorials/wall-follower)
+* [Gyro Tutorials](/tutorials/gyro)
+  * [Calibrate](/tutorials/calibrate-gyro)
+  * [Turn](/tutorials/turn-with-gyro)
+  * [Move Straight](/tutorials/move-straight-with-gyro)
+  * [Drifter](/tutorials/drifter)
+* [Infrared Sensor Tutorials](/tutorials/infrared-sensor)
+  * [Security Alert](/tutorials/security-alert)
+* [FLL / City Shaper](/tutorials/city-shaper)
+  * [Crane Mission / Robot 1](/tutorials/city-shaper/robot-1)
+  * [Crane Mission / Robot 2](/tutorials/city-shaper/robot-2)
+  * [Crane Mission / Video 1](https://youtu.be/IqL0Pyeu5Ng)
+  * [Bluetooth download (beta)](https://youtu.be/VIq8-6Egtqs)
+  * [Turn with Gyro](https://youtu.be/I7ncuXAfBwk)
+  * [Moving with Gyro](https://youtu.be/ufiOPvW37xc)
+  * [Line following with 1 color sensor](https://youtu.be/_LeduyKQVjg)
+  * [Proportional line following with 1 color sensor](https://youtu.be/-AirqwC9DL4)
+  * [Proportional line following with 2 color sensors](https://youtu.be/QWOflBuu9Oo)
+* [Design Engineering](/design-engineering)
+  * [Make It Move Without Wheels](/design-engineering/make-it-move)
+  * [Make It Smarter and Faster](/design-engineering/make-it-smarter)
+  * [Make a System that Communicates](/design-engineering/make-it-communicate)
+* [Coding](/coding)
+  * [Autonomous Parking](/coding/autonomous-parking)
+  * [Object Detection](/coding/object-detection)
+  * [Line Detection](/coding/line-detection)
+* [Maker](/maker)
+  * [Make A Sound Machine](/maker/sound-machine)
+  * [Make A Security Gadget](/maker/security-gadget)
+* [Tutorial Videos](/videos)
+  * [undefined](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=5d009e5f93fbf479c2e5ed2bf87a7990&source=embed&photo%5fid=35719444)
+  * [undefined](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=2008a566f1fb034d58d5ebe19ba8621f&source=embed&photo%5fid=35719467)
+  * [undefined](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=629730c938e452f0fd7653fbc4708166&source=embed&photo%5fid=35719470)
+  * [undefined](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=3513a83b87fe536b2dc512237465fd1b&source=embed&photo%5fid=35719471)
+  * [undefined](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=5c594c2373367f7870196f519f3bfc7a&source=embed&photo%5fid=35719472)

docs/reference/brick/battery-property.md

@@ -0,0 +1,47 @@
+# battery Property
+
+Return the information about the battery
+
+```sig
+brick.batteryInfo(BatteryProperty.Level)
+```
+
+## Parameters
+
+* property: the kind of information
+
+## Returns
+
+* a [number](/types/number) which represents the value of the property requested.
+
+## Example
+
+Show the battery level percentage on the screen. Also, show a green light if the battery level is above 15%. If the battery level is below 15% but above 5%, show a orange light. But, if the battery level is below 5%, show a pulsing red light.
+
+```blocks
+let battery = 0;
+forever(function() {
+    brick.showString("Battery level:", 1)
+    brick.showNumber(battery, 2)
+    battery = brick.batteryInfo(BatteryProperty.Level);
+    if (battery > 15)
+    {
+        brick.setStatusLight(StatusLight.Green);
+    } else if (battery > 5) {
+        brick.setStatusLight(StatusLight.Orange);
+    } else {
+        brick.setStatusLight(StatusLight.RedPulse)
+    }
+    pause(30000)
+})
+```
+
+Or see all the values
+
+```blocks
+forever(function () {
+    brick.showValue("bat V", brick.batteryInfo(BatteryProperty.Voltage), 1)
+    brick.showValue("bat %", brick.batteryInfo(BatteryProperty.Level), 2)
+    brick.showValue("bat I", brick.batteryInfo(BatteryProperty.Current), 3)
+})
+```

docs/reference/brick/exit-program.md

@@ -0,0 +1,18 @@
+# exit Program
+
+Stops the program and returns to the brick menu
+
+```sig
+brick.exitProgram();
+```
+
+## Example
+
+Do a sequence of motor commands and stop the program.
+
+```blocks
+motors.largeA.run(50)
+pause(500)
+motors.stopAll()
+brick.exitProgram();
+```

docs/reference/brick/show-ports.md

@@ -10,12 +10,12 @@ You can find out what's connected to the ports on the brick and show its status.
 
 ## Example
 
-Show the status of the ports on the brick when the ``enter`` button is pressed.
+Show the status of the ports on the brick. Resets all motors when ENTER is pressed.
 
 ```blocks
-brick.showString("Press ENTER for port status", 1)
+brick.showPorts()
 brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
-    brick.showPorts()
+    motors.resetAll()
 })
 ```
 

docs/reference/motors/motor/ramp.md

@@ -0,0 +1,59 @@
+# Ramp
+
+Schedules an acceleration, constant and deceleration phase at a given speed.
+
+```sig
+motors.largeA.ramp(50, 100, 500, 100)
+```
+
+The speed setting is a percentage of the motor's full speed. Full speed is the speed that the motor runs when the brick supplies maximum output voltage to the port.
+
+
+## Parameters
+
+* **speed**: a [number](/types/number) that is the percentage of full speed. A negative value runs the motor in the reverse direction.
+* **acceleration**: the [number](/types/number) of movement units to rotate for while accelerating.
+* **value**: the [number](/types/number) of movement units to rotate for.
+* **deceleration**: the [number](/types/number) of movement units to rotate for while decelerating.
+* **unit**: the movement unit of rotation. This can be `milliseconds`, `seconds`, `degrees`, or `rotations`. If the number for **value** is `0`, this parameter isn't used.
+
+## Example
+
+This is an interactive program that lets you change the values of 
+the acceleration and deceleration and see the effects.
+
+```blocks
+let steady = 0
+let dec = 0
+let acc = 0
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    acc += -100
+})
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    motors.largeB.ramp(50, steady, MoveUnit.MilliSeconds, acc, dec)
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    acc += 100
+})
+brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
+    dec += 100
+})
+brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
+    dec += -100
+})
+acc = 500
+steady = 1000
+acc = 500
+forever(function () {
+    brick.showValue("acc", acc, 1)
+    brick.showValue("steady", steady, 2)
+    brick.showValue("dec", dec, 3)
+    brick.showString("acc: left/right", 5)
+    brick.showString("dec: up/down", 6)
+    brick.showString("run large B: enter", 7)
+})
+```
+
+## See also
+
+[tank](/reference/motors/synced/tank), [steer](/reference/motors/synced/steer), [stop](/reference/motors/motor/stop)

docs/reference/motors/motor/run.md

@@ -6,9 +6,9 @@ Set the rotation speed of the motor as a percentage of maximum speed.
 motors.largeA.run(50)
 ```
 
-The speed setting is a pecentage of the motor's full speed. Full speed is the speed that the motor runs when the brick supplies maximum output voltage to the port.
+The speed setting is a percentage of the motor's full speed. Full speed is the speed that the motor runs when the brick supplies maximum output voltage to the port.
 
-If you use just the **speed** number, the motor runs continously and won't stop unless you tell it to. You can also give a value for a certain amount of distance you want the motor to rotate for. The **value** can be an amount of time, a turn angle in degrees, or a number of full rotations.
+If you use just the **speed** number, the motor runs continuously and won't stop unless you tell it to. You can also give a value for a certain amount of distance you want the motor to rotate for. The **value** can be an amount of time, a turn angle in degrees, or a number of full rotations.
 
 If you decide to use a **value** of rotation distance, you need to choose a type of movement **unit**.
 
@@ -30,8 +30,8 @@ Here is how you use each different movement unit to run the motor for a fixed ro
 // Run motor for 700 Milliseconds. 
 motors.largeA.run(25, 700, MoveUnit.MilliSeconds);
 
-// Run motor for 700 Milliseconds again but no units specified. 
-motors.largeA.run(25, 700);
+// Run motors B and C for 700 Milliseconds again but no units specified. 
+motors.largeBC.run(25, 700);
 
 // Run the motor for 45 seconds
 motors.largeA.run(50, 45, MoveUnit.Seconds);
@@ -61,6 +61,14 @@ motors.largeB.run(-25)
 
 ## ~
 
+## Multiple motors
+
+When using **run** with multiple motors, there is no guarantee that their speed will stay in sync. Use [tank](/reference/motors/tank) or [steer](/reference/motors/steer) for synchronized motor operations.
+
+```blocks
+motors.largeBC.run(50)
+```
+
 ## Examples
 
 ### Drive the motor for 20 seconds

docs/reference/motors/motor/set-brake-settle-time.md

@@ -0,0 +1,30 @@
+# set Brake Settle Time
+
+Set the time to wait after a motor stopped to allow it settle
+when brake is enabled. Default is 10ms.
+
+```sig
+motors.largeA.setBrakeSettleTime(200)
+```
+
+When a the motor is stopped and brake is applied, it can still wiggle for a little while. You can use the settle time to automatically way after stopping and let the robot settle.
+
+## Parameters
+
+* **time**: a [number](/types/number) value which represents the number of milliseconds to wait after braking.
+
+## Example
+
+Set the brake mode and the settle time to 500ms. Run the motor connected to port **A** for 2 seconds at a speed of `30` and stop after 2s.
+
+```blocks
+motors.largeA.setBrake(true)
+motors.largeA.setBrakeSettleTime(500)
+motors.largeA.run(30)
+pause(2000)
+motors.largeA.stop()
+```
+
+## See also
+
+[stop](/reference/motors/motor/stop)

docs/reference/motors/motor/set-brake.md

@@ -1,28 +1,28 @@
 # set Brake
 
-Set the brake on the motor so it won't turn when it has no power.
+Set the brake on the motor so it will brake when it finishes a brake command.
 
 ```sig
 motors.largeA.setBrake(false)
 ```
 
-When a the motor is stopped, it can still rotate if an external force is applied to it. This can happen, for example, if your're tanking your brick on a inclined surface and stop the motors. Gravity will push down on the brick and might cause it to start rolling again. You can prevent this movement by setting the brake.
+When a the motor is stopped, it can still rotate if an external force is applied to it. This can happen, for example, if you're tanking your brick on a inclined surface and stop the motors. Gravity will push down on the brick and might cause it to start rolling again. You can prevent this movement by setting the brake.
 
 Also, you can use the brake to do simple skid steering for your brick.
 
-## Paramters
+## Parameters
 
 * **brake**: a [boolean](/types/boolean) value which is either `true` to set the brake on or `false` to set the brake off.
 
 ## Example
 
-Run the motor connected to port **A** for 2 seconds at a speed of `30`. Stop and set the brake.
+Run the motor connected to port **A** for 2 seconds at a speed of `30` and stop after 2s.
 
 ```blocks
+motors.largeA.setBrake(true)
 motors.largeA.run(30)
 pause(2000)
 motors.largeA.stop()
-motors.largeA.setBrake(true)
 ```
 
 ## See also

docs/reference/motors/motor/set-run-phase.md

@@ -0,0 +1,26 @@
+# Set Run Phase
+
+Allows to specify an acceleration or deceleration phases for run commands.
+
+```sig
+motors.largeD.setRunPhase(MovePhase.Acceleration, 1, MoveUnit.Seconds)
+```
+
+Once the run phase is specified on a motor (or pair of motors),
+it will be automatically applied to [run](/reference/motors/run) commands.
+
+## Time vs Rotation
+
+The phases specified for time units (seconds, milliseconds) only apply to run with time
+moves. Similarly, the phases specified for rotation units (# rotation, degrees) only
+apply to run with rotation units.
+
+## Examples
+
+```blocks
+motors.largeB.setRunPhase(MovePhase.Acceleration, 0.5, MoveUnit.Seconds)
+motors.largeB.setRunPhase(MovePhase.Deceleration, 0.2, MoveUnit.Seconds)
+forever(function () {
+    motors.largeB.run(50, 1, MoveUnit.Seconds)
+})
+```

docs/reference/motors/reset-all.md

@@ -0,0 +1,25 @@
+# reset All Motors
+
+Reset all motors currently running on the brick.
+
+```sig
+motors.resetAll();
+```
+
+The motors counters are resetted. 
+
+## Example
+
+Tank the EV3 Brick forward at half speed for 5 seconds and then stop.
+
+```blocks
+motors.largeAB.tank(50, 50);
+pause(5000);
+motors.stopAll();
+motors.resetAll();
+```
+
+## See also
+
+[stop all](/reference/motors/motor/stop-all), 
+[reset](/reference/motors/motor/reset)

docs/reference/motors/stop-all.md

@@ -22,4 +22,5 @@ motors.stopAll();
 
 [stop](/reference/motors/motor/stop), 
 [reset](/reference/motors/motor/reset),
+[reset-all](/reference/motors/motor/reset-all),
 [set brake](/reference/motors/motor/set-brake)

docs/reference/motors/synced/steer.md

@@ -22,7 +22,7 @@ If you decide to use a **value** of rotation distance, you need to choose a type
 
 ## Parameters
 
-* **turnRatio**: a [number](/types/number) that is the percentage of speed of the drive motor. The follower motor runs at this speed. A negative number steers to the left and a positive number steers to the right. This is a number between `-100` and `100`.
+* **turnRatio**: a [number](/types/number) that is the percentage of speed of the drive motor. The follower motor runs at this speed. A negative number steers to the left and a positive number steers to the right. This is a number between `-200` and `200`.
 * **speed**: a [number](/types/number) that is the percentage of full speed. A negative value runs the motors in the reverse direction. This is the speed that the drive motor runs at.
 * **value**: the [number](/types/number) of movement units to rotate for. A value of `0` means run the motor continuously.
 * **unit**: the movement unit of rotation. This can be `milliseconds`, `seconds`, `degrees`, or `rotations`. If the number for **value** is `0`, this parameter isn't used.
@@ -39,6 +39,13 @@ motors.largeBC.steer(-15, -75)
 
 ## ~
 
+## ~ hint
+
+Only one set of synchronized motors will run at the same time. Once you launch tank/steer, it will cancel any existing synchronized speed command.
+
+## ~
+
+
 ## Examples
 
 ### Make a slight right
@@ -79,6 +86,51 @@ for (let i = 0; i < 4; i++) {
 motors.stopAll()
 ```
 
+### Steer tester
+
+This program lets you change the values of speed and turn ratio with the buttons.
+
+```typescript
+let speed = 0;
+let turnRatio = 0;
+
+brick.showString(`steer tester`, 1)
+brick.showString(`connect motors BC`, 7)
+brick.showString(`up/down for speed`, 8)
+brick.showString(`left/right for turn ratio`, 9)
+
+forever(function () {
+    brick.showString(`motor B speed ${motors.largeB.speed()}%`, 4)
+    brick.showString(`motor C speed ${motors.largeC.speed()}%`, 5)
+    pause(100)
+})
+
+function updateSteer() {
+    motors.largeBC.steer(turnRatio, speed);
+    brick.showString(`speed ${speed}%`, 2)
+    brick.showString(`turnRatio ${turnRatio}`, 3)
+}
+
+brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
+    speed += 10
+    updateSteer()
+})
+brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
+    speed -= 10
+    updateSteer()
+})
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    turnRatio -= 10
+    updateSteer()
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    turnRatio += 10
+    updateSteer()
+})
+
+updateSteer()
+```
+
 ## See also
 
 [tank](/reference/motors/synced/tank), [run](/reference/motors/motor/run)

docs/reference/motors/synced/tank.md

@@ -35,6 +35,12 @@ motors.largeBC.tank(-75, -75)
 
 ## ~
 
+## ~ hint
+
+Only one set of synchronized motors will run at the same time. Once you launch tank/steer, it will cancel any existing synchronized speed command.
+
+## ~
+
 ## Examples
 
 ### Tank forward and backward
@@ -76,6 +82,51 @@ pause(5000)
 motors.stopAll()
 ```
 
+### Tank tester
+
+This program lets you change the tank values using the brick buttons.
+
+```typescript
+let tankB = 0;
+let tankC = 0;
+
+brick.showString(`tank tester`, 1)
+brick.showString(`connect motors BC`, 7)
+brick.showString(`up/down for tank B`, 8)
+brick.showString(`left/right for tank C`, 9)
+
+forever(function () {
+    brick.showString(`motor B speed ${motors.largeB.speed()}%`, 4)
+    brick.showString(`motor C speed ${motors.largeC.speed()}%`, 5)
+    pause(100)
+})
+
+function updateTank() {
+    brick.showString(`tank A: ${tankB}%`, 2)
+    brick.showString(`tank B: ${tankC}%`, 3)
+    motors.largeBC.tank(tankB, tankC);
+}
+
+brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
+    tankB += 10
+    updateTank();
+})
+brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
+    tankB -= 10
+    updateTank();
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    tankC += 10
+    updateTank();
+})
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    tankC -= 10
+    updateTank();
+})
+
+updateTank();
+```
+
 ## See also
 
 [steer](/reference/motors/synced/steer), [run](/reference/motors/motor/run)

docs/tutorials.md

@@ -2,113 +2,51 @@
 
 Step by step guides to coding your @boardname@.
 
-## Brick
+## Tutorials
 
 ```codecard
 [{
-  "name": "Wake Up!",
-  "description": "Show different moods on the screen. Is it tired, sleepy, or awake?",
-  "cardType": "tutorial",
-  "url":"/tutorials/wake-up",
+  "name": "Brick",
+  "description": "Learn how to use the screen and the buttons",
+  "url":"/tutorials/brick",
   "imageUrl":"/static/tutorials/wake-up.png"
 }, {
-  "name": "Make an Animation",
-  "description": "Create a custom animation on your EV3 Brick Display.",
-  "cardType": "tutorial",
-  "url":"/tutorials/make-an-animation",
-  "imageUrl":"/static/tutorials/make-an-animation.png"
-}, {
-  "name": "What Animal Am I?",
-  "description": "Create different animal effects and have someone guess what the animal is.",
-  "cardType": "tutorial",
-  "url":"/tutorials/what-animal-am-i",
-  "imageUrl":"/static/tutorials/what-animal-am-i.png"
-}, {
-  "name": "Music Brick",
-  "description": "Transform the brick into a musical instrument!",
-  "cardType": "tutorial",
-  "url":"/tutorials/music-brick",
-  "imageUrl":"/static/tutorials/music-brick.png"
-}]
-```
-
-## Motors
-
-```codecard
-[{
-  "name": "Run Motors",
-  "description": "Use the EV3 Brick buttons to start and stop the Large Motor and Medium Motor.",
-  "cardType": "tutorial",
-  "url":"/tutorials/run-motors",
+  "name": "Motors",
+  "description": "User motors to move the brick.",
+  "url":"/tutorials/motors",
   "imageUrl":"/static/tutorials/run-motors.png"
-}]
-```
-
-## Touch Sensor
-
-```codecard
-[{
-  "name": "Touch to Run",
-  "description": "Press the Touch Sensor and run a motor.",
-  "cardType": "tutorial",
-  "url":"/tutorials/touch-to-run",
+}, {
+  "name": "Touch Sensor",
+  "description": "Use touch sensors in your robot.",
+  "url":"/tutorials/touch-sensor",
   "imageUrl":"/static/tutorials/touch-to-run.png"
 }, {
-  "name": "Touch Sensor Values",
-  "description": "Check the value of a Touch Sensor and stop a motor if pressed.",
-  "cardType": "tutorial",
-  "url":"/tutorials/touch-sensor-values",
-  "imageUrl":"/static/tutorials/touch-sensor-values.png"
-}]
-```
-
-## Color Sensor
-
-```codecard
-[{
-  "name": "What Color?",
-  "description": "Use the Color Sensor to detect different colors.",
-  "cardType": "tutorial",
-  "url":"/tutorials/what-color",
+  "name": "Color Sensor",
+  "description": "Use the color sensor to follow line or detect colors",
+  "url":"/tutorials/color-sensor",
   "imageUrl":"/static/tutorials/what-color.png"
 }, {
-  "name": "Line Following",
-  "description": "Use the Color Sensor to make a robot follow a line.",
-  "cardType": "tutorial",
-  "url":"/tutorials/line-following",
-  "imageUrl":"/static/tutorials/line-following.png"
+  "name": "Gyro",
+  "description": "Drive straight or turn more precisely with the gyro",
+  "url":"/tutorials/gyro",
+  "imageUrl":"/static/tutorials/calibrate-gyro.png"
 }, {
-  "name": "Red Light, Green Light",
-  "description": "Play Red Light, Green Light using the Color Sensor and the robot.",
-  "cardType": "tutorial",
-  "url":"/tutorials/redlight-greenlight",
-  "imageUrl":"/static/tutorials/redlight-greenlight.png"
-}]
-```
-
-## Infrared Sensor
-
-```codecard
-[{
-  "name": "Security Alert",
-  "description": "Build an security alert using the Infrared Sensor.",
-  "cardType": "tutorial",
-  "url":"/tutorials/security-alert",
+  "name": "Ultrasonic Sensor",
+  "description": "Use the ultrasonic sensor to detect obstacles",
+  "url":"/tutorials/ultrasonic-sensor",
+  "imageUrl":"/static/tutorials/object-near.png"
+}, {
+  "name": "Infrared Sensor",
+  "description": "Use the infrared sensor to detect objects",
+  "url":"/tutorials/infrared-sensor",
   "imageUrl":"/static/tutorials/security-alert.png"
 }]
 ```
 
 ## See Also
 
-[Wake Up!](/tutorials/wake-up),
-[Make An Animation](/tutorials/make-an-animation),
-[What Animal Am I?](/tutorials/what-animal-am-i),
-[Music Brick](/tutorials/music-brick),
-[Run Motors](/tutorials/run-motors),
-[Touch to Run](/tutorials/touch-to-run),
-[Touch Sensor Values](/tutorials/touch-sensor-values),
-[What Color?](/tutorials/what-color),
-[Line Following](/tutorials/line-following),
-[Red Light, Green Light](/tutorials/redlight-greenlight),
-[Object Near?](/tutorials/object-near),
-[Security Alert](/tutorials/security-alert)
+[Brick tutorials](/tutorials/brick),
+[Motors tutorials](/tutorials/motors),
+[Touch sensor tutorials](/tutorials/touch-sensor),
+[Color sensor tutorials](/tutorials/color-sensor),
+[Infrared sensor tutorials](/tutorials/infrared-sensor)

docs/tutorials/brick.md

@@ -0,0 +1,44 @@
+# Brick Tutorials
+
+## Tutorials
+
+```codecard
+[{
+  "name": "Wake Up!",
+  "description": "Show different moods on the screen. Is it tired, sleepy, or awake?",
+  "cardType": "tutorial",
+  "url":"/tutorials/wake-up",
+  "imageUrl":"/static/tutorials/wake-up.png"
+}, {
+  "name": "Make an Animation",
+  "description": "Create a custom animation on your EV3 Brick Display.",
+  "cardType": "tutorial",
+  "url":"/tutorials/make-an-animation",
+  "imageUrl":"/static/tutorials/make-an-animation.png"
+}, {
+  "name": "What Animal Am I?",
+  "description": "Create different animal effects and have someone guess what the animal is.",
+  "cardType": "tutorial",
+  "url":"/tutorials/what-animal-am-i",
+  "imageUrl":"/static/tutorials/what-animal-am-i.png"
+}, {
+  "name": "Music Brick",
+  "description": "Transform the brick into a musical instrument!",
+  "cardType": "tutorial",
+  "url":"/tutorials/music-brick",
+  "imageUrl":"/static/tutorials/music-brick.png"
+}, {
+  "name": "Pause On Start",
+  "description": "Don't start running immediately!",
+  "cardType": "tutorial",
+  "url":"/tutorials/pause-on-start",
+  "imageUrl":"/static/tutorials/pause-on-start.png"
+}]
+```
+
+## See Also
+
+[Wake Up!](/tutorials/wake-up),
+[Make An Animation](/tutorials/make-an-animation),
+[What Animal Am I?](/tutorials/what-animal-am-i),
+[Music Brick](/tutorials/music-brick),

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

@@ -0,0 +1,54 @@
+# City Shaper
+
+## Tutorials
+
+```codecard
+[
+{
+    "name": "Crane Mission / Robot 1",
+    "description": "Learn the basics and build your first robot driving base.",
+    "cardType": "tutorial",
+    "url":"/tutorials/city-shaper/robot-1",
+    "imageUrl": "/static/tutorials/city-shaper/robot1.jpg"
+}, {
+    "name": "Crane Mission / Robot 2",
+    "description": "Program your robot to move in different ways.",
+    "cardType": "tutorial",
+    "url":"/tutorials/city-shaper/robot-2",
+    "imageUrl": "/static/tutorials/city-shaper/robot2.jpg"
+}, {
+    "name": "Crane Mission / Video 1",
+    "description": "A video of the Robot 1 tutorial",
+    "youTubeId": "IqL0Pyeu5Ng"
+}, {
+    "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"
+}, {
+    "name": "Proportional line following with 1 color sensor",
+    "description": "Proportional line following using the color sensor.",
+    "youTubeId": "-AirqwC9DL4"
+}, {
+    "name": "Proportional line following with 2 color sensors",
+    "description": "Proportional line following using two color sensor.",
+    "youTubeId": "QWOflBuu9Oo"
+}]
+```
+
+## See Also
+
+[Robot 1](/tutorials/city-shaper/robot-1),
+[Robot 2](/tutorials/city-shaper/robot-2)
+

docs/tutorials/city-shaper/crane-mission.md

@@ -0,0 +1,27 @@
+# Crane Mission Lessons
+
+The [Crane Mission Lessons](https://firstinspiresst01.blob.core.windows.net/fll/2020/fll-ev3-overview.pdf) adapted for MakeCode.
+
+## Lessons
+
+```codecard
+[
+{
+    "name": "Crane Mission / Robot 1",
+    "description": "Learn the basics and build your first robot driving base.",
+    "cardType": "tutorial",
+    "url":"/tutorials/city-shaper/robot-1"
+}, {
+    "name": "Crane Mission / Robot 2",
+    "description": "Program your robot to move in different ways.",
+    "cardType": "tutorial",
+    "url":"/tutorials/city-shaper/robot-2"
+}
+]
+```
+
+## See Also
+
+[Robot 1](/tutorials/city-shaper/robot-1),
+[Robot 2](/tutorials/city-shaper/robot-2)
+

docs/tutorials/city-shaper/mission-2.md

@@ -0,0 +1,20 @@
+# Mission 2 Lesson
+
+Use the program below to tell your robot how to solve the Crane Mission (Mission 2).
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    motors.largeBC.steer(0, 25, 2.25, MoveUnit.Rotations)
+    control.timer1.reset()
+    while (control.timer1.seconds() < 1.5) {
+        motors.largeBC.steer(sensors.color1.light(LightIntensityMode.Reflected) - 40, 50)
+    }
+    motors.largeBC.stop()
+    motors.largeBC.steer(0, 15, 0.25, MoveUnit.Rotations)
+    motors.mediumA.run(25, 60, MoveUnit.Degrees)
+    pause(2000)
+    motors.mediumA.run(-25, 1, MoveUnit.Seconds)
+    motors.largeBC.steer(0, -100, 4, MoveUnit.Rotations)
+})
+motors.largeBC.setBrake(true)
+```

docs/tutorials/city-shaper/robot-1.md

@@ -0,0 +1,53 @@
+# Robot 1 Lesson
+
+## Step 1 - Build Your Driving Base Robot @unplugged
+
+Build the medium motor robot driving base:
+
+* [Driving base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
+* [Medium motor driving base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-medium-motor-driving-base-e66e2fc0d917485ef1aa023e8358e7a7.pdf)
+
+If clicking on the image above doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+## Step 2 - Show an image @fullscreen
+
+At first, it's nice to know that your program is running. Plug in a ``||brick:show mood||`` from the **BRICK** toolbox drawer
+into the ``||loops:on start||`` block. Change the image to something else if you want!
+
+```blocks
+brick.showMood(moods.sleeping)
+```
+
+## Step 3 - Try your code @fullscreen
+
+Look at the simulator and check that your image is showing on the screen. When you are ready, press the **DOWNLOAD** button
+and follow the instructions to transfer your code on the brick.
+
+## Step 4 - Pause on Start @fullscreen
+
+As you may have noticed, the code starts running immediately once you download it to the brick. To prevent the robot
+from rolling away, add a ``||brick:pause until enter pressed||`` button to wait for the user to press enter.
+
+```blocks
+brick.showMood(moods.sleeping)
+brick.buttonEnter.pauseUntil(ButtonEvent.Pressed)
+```
+
+## Step 5 - Steer motors @fullscreen
+
+Drag a ``||motors:steer motors||`` block from the **MOTORS** toolbox drawer and snap it in under ``||brick:show mood||``.
+Click on the **(+)** symbol and make sure to tell your motors to turn **1** rotation.
+
+```blocks
+brick.showMood(moods.sleeping)
+brick.buttonEnter.pauseUntil(ButtonEvent.Pressed)
+brick.showMood(moods.neutral)
+motors.largeBC.steer(0, 50, 1, MoveUnit.Rotations)
+```
+
+## Step 6 - Try your code @fullscreen
+
+Whenever you make a code change, the simulator will restart so you can see what your latest change will do.
+When you are ready, click **DOWNLOAD** and follow the instructions to transfer the code into your brick.
+
+**Remember**: Take the driving base apart at the end of the session so that another group can build their robot too.

docs/tutorials/city-shaper/robot-2.md

@@ -0,0 +1,100 @@
+# Robot 2 Lesson
+
+## Step 1 - Build Your Driving Base Robot @unplugged
+
+Build the robot driving base:
+
+[![EV3 Driving Base](/static/lessons/common/ev3-driving-base.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
+
+If clicking on the image above doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+## Step 2 - Show an image and move @fullscreen
+
+Add blocks to the ``||loops:on start||`` block to show an image and move the motors **B+C** for ``1`` rotation.
+
+```blocks
+brick.showMood(moods.neutral)
+motors.largeBC.steer(0, 50, 1, MoveUnit.Rotations)
+```
+
+## Step 3 - Brick button @fullscreen
+
+Let's change the code so that your robot moves when the **UP** button is pressed.
+Add an ``||brick:on button up||`` block and move ``||motors:steer motors||`` inside of it.
+After downloading your code, press **UP** to move the robot.
+
+```blocks
+brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
+    brick.showMood(moods.awake)
+    motors.largeBC.steer(0, 50, 1, MoveUnit.Rotations)
+})
+brick.showMood(moods.neutral)
+```
+
+## Step 4 - Braking @fullscreen
+
+When the motors are done turning, the robot keeps on moving for a short distance. 
+Turn on the **brakes** so that your robot stops immediately.
+Drag a ``||motors:set brake||`` block into the ``||loops:on start||`` and set it to **ON** for the the **BC** motors.
+
+```blocks
+brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
+    brick.showMood(moods.awake)
+    motors.largeBC.steer(0, 50, 1, MoveUnit.Rotations)
+})
+brick.showMood(moods.neutral)
+motors.largeBC.setBrake(true)
+```
+
+## Step 5 - Left and Right turn @fullscreen
+
+Let's make the robot turn to the left when the **LEFT** button is pressed on the brick.
+Find an ``||brick:on button||`` block and put a ``||motors:steer motors||`` in it. Make the turn ratio drive the motor to left.
+Get another ``||brick:on button||`` and set it to run when the **RIGHT** is pressed.
+Put a ``||motors:steer motors||`` in for that button and set the turn ratio to drive to the right.
+
+```blocks
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    brick.showMood(moods.middleLeft)
+    motors.largeBC.steer(-50, 50, 1, MoveUnit.Rotations)
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    brick.showMood(moods.middleRight)
+    motors.largeBC.steer(50, 50, 1, MoveUnit.Rotations)
+})
+```
+
+## Step 6 - Backwards @fullscreen
+
+Let's make the robot go backwards when the **DOWN** button is pressed on the brick.
+Add a ``||motors:steer motors||`` to an ``||brick:on button||`` block and change the speed to be negative. This will make the motor go backwards.
+
+```blocks
+brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
+    brick.showMood(moods.knockedOut)
+    motors.largeBC.steer(0, -50, 1, MoveUnit.Rotations)
+})
+```
+
+## Step 7 - Add an Ultrasonic sensor @fullscreen
+
+Add an Ultrasonic sensor to your driving base.
+
+[![EV3 Driving Base with Ultrasonic Sensor](/static/lessons/common/ev3-ultrasonic-sensor-driving-base.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-ultrasonic-sensor-driving-base-61ffdfa461aee2470b8ddbeab16e2070.pdf)
+
+If clicking on the image above doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+## Step 8 - Stopping distance @fullscreen
+
+Create a program that moves the Driving Base and makes it stop 6 cm from the Cuboid.
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    brick.showMood(moods.dizzy)
+    motors.largeBC.steer(0, 50)
+    pauseUntil(() => sensors.ultrasonic4.distance() < 6)
+    motors.largeBC.stop()
+})
+```
+
+Try sending your robot towards a wall!

docs/tutorials/coast-or-brake.md

@@ -0,0 +1,16 @@
+# Coast or Brake
+
+This code example will set the brake when button **A** is pressed or let the motor coast (turn freely when not running) when button **B** is pressed. The motor is turned by one rotation to cause motion.
+
+```blocks
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    // tell motor to brake once the run command is done
+    motors.largeB.setBrake(true)
+    motors.largeB.run(100, 1, MoveUnit.Rotations)
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    // tell motor to coast once the run command is done
+    motors.largeB.setBrake(false)
+    motors.largeB.run(100, 1, MoveUnit.Rotations)
+})
+```

docs/tutorials/color-sensor.md

@@ -0,0 +1,49 @@
+# Color Sensor
+
+## Tutorials
+
+```codecard
+[{
+  "name": "What Color?",
+  "description": "Use the Color Sensor to detect different colors.",
+  "cardType": "tutorial",
+  "url":"/tutorials/what-color",
+  "imageUrl":"/static/tutorials/what-color.png"
+}, {
+  "name": "Line Following",
+  "description": "Use the Color Sensor to make a robot follow a line.",
+  "cardType": "tutorial",
+  "url":"/tutorials/line-following",
+  "imageUrl":"/static/tutorials/line-following.png"
+}, {
+  "name": "Red Light, Green Light",
+  "description": "Play Red Light, Green Light using the Color Sensor and the robot.",
+  "cardType": "tutorial",
+  "url":"/tutorials/redlight-greenlight",
+  "imageUrl":"/static/tutorials/redlight-greenlight.png"
+}, {
+  "name": "Move To Color",
+  "description": "Move straight until a color is detected.",
+  "cardType": "tutorial",
+  "url":"/tutorials/move-to-color",
+  "imageUrl":"/static/tutorials/move-to-color.png"
+}, {
+  "name": "Reflected Light Measure",
+  "description": "Teach the sensor what light or dark is.",
+  "cardType": "example",
+  "url":"/tutorials/reflected-light-measure",
+  "imageUrl":"/static/tutorials/reflected-light-measure.png"
+}, {
+  "name": "Reflected Light Calibration",
+  "description": "Use the auto-calibration feature to setup the dark and bright values.",
+  "cardType": "example",
+  "url":"/tutorials/reflected-light-calibration",
+  "imageUrl":"/static/tutorials/reflected-light-calibration.png"
+}]
+```
+
+## See Also
+
+[What Color?](/tutorials/what-color),
+[Line Following](/tutorials/line-following),
+[Red Light, Green Light](/tutorials/redlight-greenlight),

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/infrared-sensor.md

@@ -0,0 +1,17 @@
+# Infrared sensor
+
+## Tutorials
+
+```codecard
+[{
+  "name": "Security Alert",
+  "description": "Build an security alert using the Infrared Sensor.",
+  "cardType": "tutorial",
+  "url":"/tutorials/security-alert",
+  "imageUrl":"/static/tutorials/security-alert.png"
+}]
+```
+
+## See Also
+
+[Security Alert](/tutorials/security-alert)

docs/tutorials/motors.md

@@ -0,0 +1,58 @@
+# Motors
+
+## Tutorials
+
+```codecard
+[{
+  "name": "Run Motors",
+  "description": "Use the EV3 Brick buttons to start and stop the Large Motor and Medium Motor.",
+  "cardType": "tutorial",
+  "url":"/tutorials/run-motors",
+  "imageUrl":"/static/tutorials/run-motors.png"
+}, {
+  "name": "Spin Turn",
+  "description": "Turn the driving base around its center.",
+  "cardType": "example",
+  "url":"/tutorials/spin-turn",
+  "imageUrl":"/static/tutorials/spin-turn.png"
+}, {
+  "name": "Pivot Turn",
+  "description": "Turn the driving base around a wheel.",
+  "cardType": "example",
+  "url":"/tutorials/pivot-turn",
+  "imageUrl":"/static/tutorials/pivot-turn.png"
+}, {
+  "name": "Smooth Turn",
+  "description": "Turn the driving base in a smooth, steering motion.",
+  "cardType": "example",
+  "url":"/tutorials/smooth-turn",
+  "imageUrl":"/static/tutorials/smooth-turn.png"
+}, {
+  "name": "Tank ZigZag",
+  "description": "Use the tank block to keep motors in sync.",
+  "cardType": "example",
+  "url":"/tutorials/tank-zigzag",
+  "imageUrl":"/static/tutorials/tank-zigzag.png"
+}, {
+  "name": "Coast Or Brake",
+  "description": "Tell motors to coast or brake once the run command is done.",
+  "cardType": "example",
+  "url":"/tutorials/coast-or-brake",
+  "imageUrl":"/static/tutorials/coast-or-brake.png"
+}, {
+  "name": "Turtle",
+  "description": "Encode moves and run them on a driving base",
+  "url":"/tutorials/turtle",
+  "cardType": "example"
+}]
+```
+
+## See Also
+
+[Run Motors](/tutorials/run-motors),
+[Spin Turn](/tutorials/spin-turn),
+[Pivot Turn](/tutorials/pivot-turn),
+[Smooth Turn](/tutorials/smooth-turn),
+[Tank ZigZag](/tutorials/tank-zigzag),
+[Coast Or Brake](/tutorials/coast-or-brake),
+[Turtle](/tutorials/turtle)

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/move-to-color.md

@@ -0,0 +1,65 @@
+# Move To Color
+
+## Introduction @fullscreen
+
+This tutorial shows how to move the EV3 driving base until the color sensor detects a color.
+
+Here are the building instructions for the robot:
+
+* [EV3 driving base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
+* [Color sensor down](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-color-sensor-down-driving-base-d30ed30610c3d6647d56e17bc64cf6e2.pdf)
+
+
+## Step 1 Run code on button pressed
+
+Drag ``||brick:on button pressed||`` block so that your code starts when the enter button is pressed (and not at the start). We are also using the ``||brick:show string||``
+message easily diagnose if the program does not work.
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    brick.showString("started", 1)
+})
+```
+
+## Step 2 Turn on the motors
+
+Drag a ``||motors:steer motors B+C||`` block under the button pressed event. This will turn on both motors.
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    brick.showString("started", 1)
+    motors.largeBC.steer(0, 50)
+})
+```
+
+## Step 3 Pause until color
+
+Drag a ``||sensors:pause until color detected||`` block after the steer and select the color you want to detect. This block will stop the program until the color is detected.
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    brick.showString("started", 1)
+    motors.largeBC.steer(0, 50)
+    brick.showString("looking for red", 1)
+    sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
+})
+```
+
+### Step 4 Stop the motors!
+
+Once the color is detected, the program will continue to run blocks. Drag a ``||motors:stop B+C motor||`` so that both motors stop.
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    brick.showString("started", 1)
+    motors.largeBC.steer(0, 50)
+    brick.showString("looking for red", 1)
+    sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
+    brick.showString("stop", 1)
+    motors.largeBC.stop()
+})
+```
+
+## Step 5
+
+Download your program to your brick and try it out!

docs/tutorials/pause-on-start.md

@@ -0,0 +1,33 @@
+# Pause On Start
+
+## Introduction @unplugged
+
+Sometimes you don't want your program to run right away... you can use a button to wait before moving the motors.
+
+## Step 1
+
+Let's start by showing an image on the screen so the user knows that the robot is ready and waiting.
+
+```blocks
+brick.showImage(images.informationStop1)
+```
+
+## Step 2
+
+Drag the ``||brick:pause until enter pressed||`` button to wait for the user to press the Enter button.
+
+```blocks
+brick.showImage(images.informationStop1)
+brick.buttonEnter.pauseUntil(ButtonEvent.Pressed)
+```
+
+## Step 3
+
+Add all the motor and sensor code you want after those blocks!
+
+```blocks
+brick.showImage(images.informationStop1)
+brick.buttonEnter.pauseUntil(ButtonEvent.Pressed)
+brick.showImage(images.expressionsBigSmile)
+motors.largeBC.tank(50, 50, 1, MoveUnit.Seconds)
+```

docs/tutorials/pause-until-pressed.md

@@ -0,0 +1,9 @@
+# Pause Until Pressed
+
+This is a code example to detect contact or collision with another object. It uses a touch sensor to detect hitting a wall or other obstacle. The motors are run and then stopped when the sensor is pressed.
+
+```blocks
+motors.largeBC.tank(50, 50)
+sensors.touch1.pauseUntil(ButtonEvent.Pressed)
+motors.largeBC.stop()
+```

docs/tutorials/pivot-turn.md

@@ -0,0 +1,12 @@
+# Pivot Turn
+
+A **pivot turn** happens when a [EV3 Driving Base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf) turns around the wheel on the inside of the turn by spinning just the single wheel at the outside of the turn.
+
+You can make a turn happen with either a ``||motors:tank||`` or a ``||motors:steer||`` block.
+
+```blocks
+forever(function() {
+    motors.largeBC.tank(50, 0, 2, MoveUnit.Rotations)
+    motors.largeBC.tank(0, 50, 2, MoveUnit.Rotations)
+})
+```

docs/tutorials/reflected-light-calibration.md

@@ -0,0 +1,24 @@
+# Reflected light calibration
+
+The ``||sensors:calibrateLight||`` blocks allows you to calibrate the reflected light of the color sensor in one block. At the time you run the block, move the sensor over a dark surface and a bright surface; then stop moving it.
+
+```blocks
+sensors.color3.onLightDetected(LightIntensityMode.Reflected, Light.Dark, function () {
+    brick.showString("dark", 2)
+})
+sensors.color3.onLightDetected(LightIntensityMode.Reflected, Light.Bright, function () {
+    brick.showString("bright", 2)
+})
+console.sendToScreen()
+console.log("move color sensor")
+console.log("over DARK and BRIGHT color")
+console.log("and stop moving when done")
+console.log("press ENTER when ready")
+brick.buttonEnter.pauseUntil(ButtonEvent.Pressed)
+sensors.color3.calibrateLight(LightIntensityMode.Reflected)
+brick.showValue("dark", sensors.color3.threshold(Light.Dark), 4)
+brick.showValue("bright", sensors.color3.threshold(Light.Bright), 5)
+forever(function () {
+    brick.showValue("reflected light", sensors.color3.light(LightIntensityMode.Reflected), 1)
+})
+```

docs/tutorials/reflected-light-measure.md

@@ -0,0 +1,29 @@
+# Reflected light measure
+
+This example uses a color sensor to measure the reflected light from a dark and light surface
+and sets the light/dark thresholds.
+
+```blocks
+sensors.color3.onLightDetected(LightIntensityMode.Reflected, Light.Dark, function () {
+    brick.showString("dark", 2)
+})
+sensors.color3.onLightDetected(LightIntensityMode.Reflected, Light.Bright, function () {
+    brick.showString("bright", 2)
+})
+console.sendToScreen()
+console.log("move color sensor")
+console.log("over DARK color")
+console.log("press ENTER when ready")
+brick.buttonEnter.pauseUntil(ButtonEvent.Pressed)
+sensors.color3.setThreshold(Light.Dark, sensors.color3.light(LightIntensityMode.Reflected) + 5)
+console.logValue("dark", sensors.color3.threshold(Light.Dark))
+console.log("move color sensor")
+console.log("over BRIGHT color")
+console.log("press ENTER when ready")
+brick.buttonEnter.pauseUntil(ButtonEvent.Pressed)
+sensors.color3.setThreshold(Light.Bright, sensors.color3.light(LightIntensityMode.Reflected) - 5)
+console.logValue("bright", sensors.color3.threshold(Light.Bright))
+forever(function () {
+    brick.showValue("reflected light", sensors.color3.light(LightIntensityMode.Reflected), 1)
+})
+```

docs/tutorials/smooth-turn.md

@@ -0,0 +1,12 @@
+# Smooth Turn
+
+A **smooth turn** happens when a [EV3 Driving Base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf) makes a turn by spinning both both wheels but with each running at a different speed.
+
+You can make a turn happen with either a ``||motors:tank||`` or a ``||motors:steer||`` block.
+
+```blocks
+forever(function() {
+    motors.largeBC.tank(50, 20, 2, MoveUnit.Rotations)
+    motors.largeBC.tank(20, 50, 2, MoveUnit.Rotations)
+})
+```

docs/tutorials/spin-turn.md

@@ -0,0 +1,12 @@
+# Spin Turn
+
+A **spin turn** happens when a [EV3 Driving Base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf) turns, or rotates, on a single spot by spinning both wheels, but with each turning in opposite directions.
+
+You can make a turn happen with either a ``||motors:tank||`` or a ``||motors:steer||`` block.
+
+```blocks
+forever(function() {
+    motors.largeBC.tank(50, -50, 2, MoveUnit.Rotations)
+    motors.largeBC.tank(-50, 50, 2, MoveUnit.Rotations)
+})
+```

docs/tutorials/stop-at-object.md

@@ -0,0 +1,9 @@
+# Stop At Object
+
+This is a code example to detect contact or collision with another object. It uses a touch sensor to detect hitting a wall or other obstacle. The motors are run and then stopped when the sensor is pressed.
+
+```blocks
+motors.largeBC.tank(50, 50)
+sensors.touch1.pauseUntil(ButtonEvent.Pressed)
+motors.largeBC.stop()
+```

docs/tutorials/tank-zigzag.md

@@ -0,0 +1,17 @@
+# Tank ZigZag
+
+This example shows how to use the [tank](/reference/motors/tank) block to keep the speed of 2 large motors synchronized. The [EV3 Driving Base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
+) will move in a zig zag pattern.
+
+```blocks
+/**
+ * Use the tank block to keep large motors synched. 
+ Use this code with a EV3 driving base.
+ */
+forever(function () {
+    brick.showImage(images.eyesMiddleRight)
+    motors.largeBC.tank(50, 10, 2, MoveUnit.Rotations)
+    brick.showImage(images.eyesMiddleLeft)
+    motors.largeBC.tank(10, 50, 2, MoveUnit.Rotations)
+})
+```

docs/tutorials/touch-sensor.md

@@ -0,0 +1,31 @@
+# Touch Sensor
+
+## Tutorials
+
+```codecard
+[{
+  "name": "Touch to Run",
+  "description": "Press the Touch Sensor and run a motor.",
+  "cardType": "tutorial",
+  "url":"/tutorials/touch-to-run",
+  "imageUrl":"/static/tutorials/touch-to-run.png"
+}, {
+  "name": "Sensor Values",
+  "description": "Check the value of a Touch Sensor and stop a motor if pressed.",
+  "cardType": "tutorial",
+  "url":"/tutorials/touch-sensor-values",
+  "imageUrl":"/static/tutorials/touch-sensor-values.png"
+}, {
+  "name": "Stop At Object",
+  "description": "Waits for the sensor to be pressed before continuing the program",
+  "cardType": "tutorial",
+  "url":"/tutorials/stop-at-object",
+  "imageUrl":"/static/tutorials/pause-until-pressed.png"
+}]
+```
+
+## See Also
+
+[Touch to Run](/tutorials/touch-to-run),
+[Touch Sensor Values](/tutorials/touch-sensor-values),
+[Stop At Object](/tutorials/stop-at-object)

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()
+```

docs/tutorials/turtle.md

@@ -0,0 +1,52 @@
+# Turtle
+
+A fun interactive program where the user enters a sequence of moves using the buttons and the robot executes it.
+
+
+```blocks
+/**
+* Run this program with a driving base.
+**/
+let indent = ""
+let command = ""
+let c = ""
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    command = command + "L"
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    command = command + "R"
+})
+brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
+    command = command + "F"
+})
+brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
+    command = command + "B"
+})
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    indent = ""
+    for (let index = 0; index <= command.length; index++) {
+        c = command[index]
+        brick.showString("" + indent + c, 4)
+        indent = "" + indent + " "
+        if (c == "L") {
+            motors.largeBC.steer(-100, 50, 378, MoveUnit.Degrees)
+        } else if (c == "R") {
+            motors.largeBC.steer(100, 50, 378, MoveUnit.Degrees)
+        } else if (c == "F") {
+            motors.largeBC.steer(0, 50, 1, MoveUnit.Rotations)
+        } else if (c == "B") {
+            motors.largeBC.steer(0, -50, 1, MoveUnit.Rotations)
+        }
+    }
+    command = ""
+    brick.showString("", 2)
+})
+motors.largeBC.setBrake(true)
+forever(function () {
+    brick.showString("TURTLE", 1)
+    brick.showString(command, 3)
+    brick.showString("up/down: forward/backward", 8)
+    brick.showString("left/right: turn", 9)
+    brick.showString("enter: play commands", 10)
+})
+```

docs/tutorials/ultrasonic-sensor.md

@@ -0,0 +1,24 @@
+# Infrared sensor
+
+## Tutorials
+
+```codecard
+[{
+  "name": "Object Near",
+  "description": "Detect if objects are near.",
+  "cardType": "tutorial",
+  "url":"/tutorials/object-near",
+  "imageUrl":"/static/tutorials/object-near.png"
+}, {
+  "name": "Wall Follower",
+  "description": "Follow a wall at a distance using the ultrasonic sensor and a proportional controller.",
+  "cardType": "tutorial",
+  "url":"/tutorials/wall-follower",
+  "imageUrl":"/static/tutorials/wall-follower.png"
+}]
+```
+
+## See Also
+
+[Object Near?](/tutorials/object-near),
+[Wall Follower](/tutorials/wall-follower)

docs/tutorials/wall-follower.md

@@ -0,0 +1,191 @@
+# Wall Follower
+
+## Introduction @unplugged
+
+This tutorial shows you how to use the ultrasonic sensor to 
+move a [EV3 Driving Base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
+along a wall.
+
+Your ultrasonic sensor should be placed horizontally, near the driving wheel, facing the wall.
+
+## Step 1 Measure distance
+
+Declare a new variable ``distance`` and store the distance from 
+the ultrasonic sensor on port 4.
+
+```blocks
+let distance = 0
+forever(function () {
+    distance = sensors.ultrasonic4.distance()
+})
+```
+
+## Step 2 Show distance
+
+Use a ``||brick:show value||`` block to display the distance value on the screen.
+This is **very** helpful when you are debugging your code on the robot.
+
+Once your code is ready, download it to your robot and check that the measured distance looks ok.
+
+```blocks
+let distance = 0
+forever(function () {
+    distance = sensors.ultrasonic4.distance()
+    brick.showValue("distance", distance, 1)
+})
+```
+
+## Step 3 Goal
+
+Declare a new variable ``goal`` and assign it to ``10`` in ``on start``. 
+The value should be the distance in centimeters between your robot and the wall.
+
+```blocks
+let goal = 0
+goal = 10
+```
+
+## Step 4 Compute Error
+
+Declare a new variable ``error`` and assign a difference between ``distance`` and ``goal``.
+We will use this value to determine how much the robot needs to correct its trajectory.
+
+```blocks
+let distance = 0
+let goal = 0
+let error = 0
+goal = 10
+forever(function () {
+    distance = sensors.ultrasonic4.distance()
+    brick.showValue("distance", distance, 1)
+    error = distance - goal
+    brick.showValue("error", error, 2)
+})
+```
+
+## Step 5 Show Error
+
+Just like ``distance``, use ``||brick:show value||`` to display the value of the error (line 2).
+This will allow you to debug your code while it is running on the robot.
+
+Download your program to the robot and check that the error goes to ``0`` when
+the robot is around 10cm from the wall.
+
+```blocks
+let distance = 0
+let goal = 0
+let error = 0
+goal = 10
+forever(function () {
+    distance = sensors.ultrasonic4.distance()
+    brick.showValue("distance", distance, 1)
+    error = distance - goal
+    brick.showValue("error", error, 2)
+})
+```
+
+## Step 6 Kp
+
+Declare a new variable ``kp`` and assign it to ``1``.
+This number determines how to convert the error into a ``turn ratio`` for the steer block.
+For starter, set it to 1 and we will go through the steps to tune its value later on.
+As usual, also use ``||brick:show value||`` to display the value of ``kp`` on the screen (line 3).
+
+```blocks
+let distance = 0
+let goal = 0
+let error = 0
+let kp = 0
+goal = 10
+kp = 1
+forever(function () {
+    distance = sensors.ultrasonic4.distance()
+    brick.showValue("distance", distance, 1)
+    error = distance - goal
+    brick.showValue("error", error, 2)
+    brick.showValue("kp", kp, 3)
+})
+```
+
+## Step 7 Turn ratio
+
+Declare a new variable ``turnratio`` and store the product of ``error`` and ``kp`` in it.
+Also use ``||brick:show value||`` to display its value on screen.
+
+Download the program on the robot and try moving the robot around the wall. You should see
+the value of ``turnratio`` change similarly to ``error``.
+
+```blocks
+let distance = 0
+let goal = 0
+let error = 0
+let kp = 0
+let turnratio = 0
+goal = 10
+kp = 1
+forever(function () {
+    distance = sensors.ultrasonic4.distance()
+    brick.showValue("distance", distance, 1)
+    error = distance - goal
+    brick.showValue("error", error, 2)
+    brick.showValue("kp", kp, 3)
+    turnratio = error * kp
+    brick.showValue("turn", turnratio, 4)
+})
+```
+
+## Step 8 Steering
+
+Add a ``||motors:steer motors||`` block for ``large B+C`` at 35% and place the ``turnratio``
+variable for the turn value.
+
+Download the code to your robot and try it out. Does it follow the wall?... 
+Not really, this is because we need to tune the ``kp`` variable.
+
+```blocks
+let distance = 0
+let goal = 0
+let error = 0
+let kp = 0
+let turnratio = 0
+goal = 10
+kp = 1
+forever(function () {
+    distance = sensors.ultrasonic4.distance()
+    brick.showValue("distance", distance, 1)
+    error = distance - goal
+    brick.showValue("error", error, 2)
+    brick.showValue("kp", kp, 3)
+    turnratio = error * kp
+    brick.showValue("turn", turnratio, 4)
+    motors.largeBC.steer(turnratio, 35)
+})
+```
+
+## Step 9 Tuning kp
+
+As mentioned in a previous step, we need to find the right value for kp so that the robot
+follows the wall properly. This tuning can be tedious so we are going to the brick buttons
+to speed up the process.
+
+Add ``||brick:on button||`` blocks to handle the left and right button pressed. When left is pressed, change ``kp`` by ``-1``. When right is pressed, change ``kp`` by 1.
+
+Download your code to the robot and change the values of ``kp`` until the robot follows the wall. (Tip try something around -5 / -10).
+
+```blocks
+let kp = 0
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    kp += -1
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    kp += 1
+})
+```
+
+## Step 10 @unplugged
+
+Well done! Your robot is using the ultrasonic distance
+to correct is trajectory using a proportional controller!
+
+The robot will be more precise if it goes slow... Try using a variable
+and the brick up and down events to control the speed as well.

editor/deploy.ts

@@ -2,72 +2,231 @@
 /// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
 
 import UF2 = pxtc.UF2;
+import { Ev3Wrapper } from "./wrap";
+import { bluetoothTryAgainAsync } from "./dialogs";
 
-export let ev3: pxt.editor.Ev3Wrapper
+export let ev3: Ev3Wrapper;
 
 export function debug() {
-    return initAsync()
+    return initHidAsync()
         .then(w => w.downloadFileAsync("/tmp/dmesg.txt", v => console.log(pxt.Util.uint8ArrayToString(v))))
 }
 
-function hf2Async() {
-    return pxt.HF2.mkPacketIOAsync()
-        .then(h => {
-            let w = new pxt.editor.Ev3Wrapper(h)
-            ev3 = w
-            return w.reconnectAsync(true)
-                .then(() => w)
-        })
+// Web Serial API https://wicg.github.io/serial/
+// chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=884928
+// Under experimental features in Chrome Desktop 77+
+enum ParityType {
+    "none",
+    "even",
+    "odd",
+    "mark",
+    "space"
+}
+declare interface SerialOptions {
+    baudrate?: number;
+    databits?: number;
+    stopbits?: number;
+    parity?: ParityType;
+    buffersize?: number;
+    rtscts?: boolean;
+    xon?: boolean;
+    xoff?: boolean;
+    xany?: boolean;
+}
+type SerialPortInfo = pxt.Map<string>;
+type SerialPortRequestOptions = any;
+declare class SerialPort {
+    open(options?: SerialOptions): Promise<void>;
+    close(): void;
+    readonly readable: any;
+    readonly writable: any;
+    //getInfo(): SerialPortInfo;
+}
+declare interface Serial extends EventTarget {
+    onconnect: any;
+    ondisconnect: any;
+    getPorts(): Promise<SerialPort[]>
+    requestPort(options: SerialPortRequestOptions): Promise<SerialPort>;
 }
 
-let noHID = false
+class WebSerialPackageIO implements pxt.HF2.PacketIO {
+    onData: (v: Uint8Array) => void;
+    onError: (e: Error) => void;
+    onEvent: (v: Uint8Array) => void;
+    onSerial: (v: Uint8Array, isErr: boolean) => void;
+    sendSerialAsync: (buf: Uint8Array, useStdErr: boolean) => Promise<void>;
+    private _reader: any;
+    private _writer: any;
 
-let initPromise: Promise<pxt.editor.Ev3Wrapper>
-export function initAsync() {
-    if (initPromise)
-        return initPromise
+    constructor(private port: SerialPort, private options: SerialOptions) {
+    }
 
-    let canHID = false
+    async readSerialAsync() {
+        this._reader = this.port.readable.getReader();
+        let buffer: Uint8Array;
+        const reader = this._reader;
+        while (reader === this._reader) { // will change if we recycle the connection
+            const { done, value } = await this._reader.read()
+            if (!buffer) buffer = value;
+            else { // concat
+                let tmp = new Uint8Array(buffer.length + value.byteLength)
+                tmp.set(buffer, 0)
+                tmp.set(value, buffer.length)
+                buffer = tmp;
+            }
+            if (buffer && buffer.length >= 6) {
+                this.onData(new Uint8Array(buffer));
+                buffer = undefined;
+            }
+        }
+    }
+
+    static isSupported(): boolean {
+        return !!(<any>navigator).serial;
+    }
+
+    static async mkPacketIOAsync(): Promise<pxt.HF2.PacketIO> {
+        const serial = (<any>navigator).serial;
+        if (serial) {
+            try {
+                const requestOptions: SerialPortRequestOptions = {};
+                const port = await serial.requestPort(requestOptions);
+                const options: SerialOptions = {
+                    baudrate: 460800,
+                    buffersize: 4096
+                };
+                return new WebSerialPackageIO(port, options);
+            } catch (e) {
+                console.log(`connection error`, e)
+            }
+        }
+        throw new Error("could not open serial port");
+    }
+
+    error(msg: string): any {
+        console.error(msg);
+        throw new Error(lf("error on brick ({0})", msg))
+    }
+
+    private openAsync() {
+        console.log(`serial: opening port`)
+        if (!!this._reader) return Promise.resolve();
+        this._reader = undefined;
+        this._writer = undefined;
+        return this.port.open(this.options)
+            .then(() => {
+                this.readSerialAsync();
+                return Promise.resolve();
+            });
+    }
+
+    private closeAsync() {
+        console.log(`serial: closing port`);
+        this.port.close();
+        this._reader = undefined;
+        this._writer = undefined;
+        return Promise.delay(500);
+    }
+
+    reconnectAsync(): Promise<void> {
+        return this.openAsync();
+    }
+
+    disconnectAsync(): Promise<void> {
+        return this.closeAsync();
+    }
+
+    sendPacketAsync(pkt: Uint8Array): Promise<void> {
+        if (!this._writer)
+            this._writer = this.port.writable.getWriter();
+        return this._writer.write(pkt);
+    }
+}
+
+function hf2Async() {
+    const pktIOAsync: Promise<pxt.HF2.PacketIO> = useWebSerial
+        ? WebSerialPackageIO.mkPacketIOAsync() : pxt.HF2.mkPacketIOAsync()
+    return pktIOAsync.then(h => {
+        let w = new Ev3Wrapper(h)
+        ev3 = w
+        return w.reconnectAsync(true)
+            .then(() => w)
+    })
+}
+
+let useHID = false;
+let useWebSerial = false;
+export function initAsync(): Promise<void> {
     if (pxt.U.isNodeJS) {
         // doesn't seem to work ATM
-        canHID = false
+        useHID = false
     } else {
-        const forceHexDownload = /forceHexDownload/i.test(window.location.href);
-        if (pxt.Cloud.isLocalHost() && pxt.Cloud.localToken && !forceHexDownload)
-            canHID = true
+        const nodehid = /nodehid/i.test(window.location.href);
+        if (pxt.BrowserUtils.isLocalHost() && pxt.Cloud.localToken && nodehid)
+            useHID = true;
     }
 
-    if (noHID)
-        canHID = false
+    if (WebSerialPackageIO.isSupported())
+        pxt.tickEvent("webserial.supported");
 
-    if (canHID) {
-        initPromise = hf2Async()
+    return Promise.resolve();
+}
+
+export function canUseWebSerial() {
+    return WebSerialPackageIO.isSupported();
+}
+
+export function enableWebSerialAsync() {
+    initPromise = undefined;
+    useWebSerial = WebSerialPackageIO.isSupported();
+    useHID = useWebSerial;
+    if (useWebSerial)
+        return initHidAsync().then(() => { });
+    else return Promise.resolve();
+}
+
+function cleanupAsync() {
+    if (ev3) {
+        console.log('cleanup previous port')
+        return ev3.disconnectAsync()
+            .catch(e => { })
+            .finally(() => { ev3 = undefined; });
+    }
+    return Promise.resolve();
+}
+
+let initPromise: Promise<Ev3Wrapper>
+function initHidAsync() { // needs to run within a click handler
+    if (initPromise)
+        return initPromise
+    if (useHID) {
+        initPromise = cleanupAsync()
+            .then(() => hf2Async())
             .catch(err => {
+                console.error(err);
                 initPromise = null
-                noHID = true
-                return Promise.reject(err)
+                useHID = false;
+                useWebSerial = false;
+                return Promise.reject(err);
             })
     } else {
-        noHID = true
+        useHID = false
+        useWebSerial = false;
         initPromise = Promise.reject(new Error("no HID"))
     }
-
-    return initPromise
+    return initPromise;
 }
 
 // this comes from aux/pxt.lms
+const fspath = "../prjs/BrkProg_SAVE/"
 const rbfTemplate = `
 4c45474f580000006d000100000000001c000000000000000e000000821b038405018130813e8053
 74617274696e672e2e2e0084006080XX00448581644886488405018130813e80427965210084000a
 `
 export function deployCoreAsync(resp: pxtc.CompileResult) {
-    let w: pxt.editor.Ev3Wrapper
-
     let filename = resp.downloadFileBaseName || "pxt"
     filename = filename.replace(/^lego-/, "")
 
-    let fspath = "../prjs/BrkProg_SAVE/"
-
     let elfPath = fspath + filename + ".elf"
     let rbfPath = fspath + filename + ".rbf"
 
@@ -107,27 +266,41 @@ export function deployCoreAsync(resp: pxtc.CompileResult) {
         return Promise.resolve();
     }
 
-    if (noHID) return saveUF2Async()
+    if (!useHID) return saveUF2Async()
 
-    return initAsync()
+    pxt.tickEvent("webserial.flash");
+    let w: Ev3Wrapper;
+    return initHidAsync()
         .then(w_ => {
             w = w_
             if (w.isStreaming)
                 pxt.U.userError("please stop the program first")
-            return w.stopAsync()
+            return w.reconnectAsync(false)
+                .catch(e => {
+                    // user easily forgets to stop robot
+                    bluetoothTryAgainAsync().then(() => w.disconnectAsync())
+                        .then(() => Promise.delay(1000))
+                        .then(() => w.reconnectAsync());
+
+                    // nothing we can do
+                    return Promise.reject(e);
+                })
         })
+        .then(() => w.stopAsync())
         .then(() => w.rmAsync(elfPath))
         .then(() => w.flashAsync(elfPath, UF2.readBytes(origElfUF2, 0, origElfUF2.length * 256)))
         .then(() => w.flashAsync(rbfPath, rbfBIN))
         .then(() => w.runAsync(rbfPath))
+        .then(() => Promise.delay(500))
         .then(() => {
+            pxt.tickEvent("webserial.success");
             return w.disconnectAsync()
             //return Promise.delay(1000).then(() => w.dmesgAsync())
         }).catch(e => {
-            // if we failed to initalize, retry
-            if (noHID)
-                return saveUF2Async()
-            else
-                return Promise.reject(e)
+            pxt.tickEvent("webserial.fail");
+            useHID = false;
+            useWebSerial = false;
+            // if we failed to initalize, tell the user to retry
+            return Promise.reject(e)
         })
 }

editor/dialogs.tsx

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { canUseWebSerial, enableWebSerialAsync } from "./deploy";
+import { projectView } from "./extension";
+
+let confirmAsync: (options: any) => Promise<number>;
+
+export function bluetoothTryAgainAsync(): Promise<void> {
+    return confirmAsync({
+        header: lf("Bluetooth download failed..."),
+        jsx: <ul>
+            <li>{lf("Make sure to stop your program or exit portview on the EV3.")}</li>
+            <li>{lf("Check your battery level.")}</li>
+            <li>{lf("Close EV3 LabView or other MakeCode editor tabs.")}</li>
+        </ul>,
+        hasCloseIcon: false,
+        hideCancel: true,
+        hideAgree: false,
+        agreeLbl: lf("Try again")
+    }).then(r => {});
+}
+
+function enableWebSerialAndCompileAsync() {
+    return enableWebSerialAsync()
+        .then(() => Promise.delay(500))
+        .then(() => projectView.compile());
+}
+
+let bluetoothDialogShown = false;
+function explainWebSerialPairingAsync(): Promise<void> {
+    if (!confirmAsync || bluetoothDialogShown) return Promise.resolve();
+
+    bluetoothDialogShown = true;
+    return confirmAsync({
+        header: lf("Bluetooth pairing"),
+        hasCloseIcon: false,
+        hideCancel: true,
+        buttons: [{
+            label: lf("Help"),
+            icon: "question circle",
+            className: "lightgrey",
+            url: "/bluetooth"
+        }],
+        jsx: <p>
+            {lf("You will be prompted to select a serial port.")}
+            {pxt.BrowserUtils.isWindows()
+                ? lf("Look for 'Standard Serial over Bluetooth link'.")
+                : lf("Loop for 'cu.EV3-SerialPort'.")}
+            {lf("If you have paired multiple EV3, you might have to try out multiple ports until you find the correct one.")}
+        </p>
+    }).then(() => { })
+}
+
+export function showUploadDialogAsync(fn: string, url: string, _confirmAsync: (options: any) => Promise<number>): Promise<void> {
+    confirmAsync = _confirmAsync;
+    // https://msdn.microsoft.com/en-us/library/cc848897.aspx
+    // "For security reasons, data URIs are restricted to downloaded resources. 
+    // Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements"
+    const downloadAgain = !pxt.BrowserUtils.isIE() && !pxt.BrowserUtils.isEdge();
+    const docUrl = pxt.appTarget.appTheme.usbDocs;
+
+    const jsx =
+        <div className="ui grid stackable">
+            <div className="column five wide" style={{ backgroundColor: "#E2E2E2" }}>
+                <div className="ui header">{lf("First time here?")}</div>
+                <strong style={{ fontSize: "small" }}>{lf("You must have version 1.10E or above of the firmware")}</strong>
+                <div style={{ justifyContent: "center", display: "flex", padding: "1rem" }}>
+                    <img className="ui image" src="/static/download/firmware.png" style={{ height: "100px" }} />
+                </div>
+                <a href="/troubleshoot" target="_blank">{lf("Check your firmware version here and update if needed")}</a>
+            </div>
+            <div className="column eleven wide">
+                <div className="ui grid">
+                    <div className="row">
+                        <div className="column">
+                            <div className="ui two column grid padded">
+                                <div className="column">
+                                    <div className="ui">
+                                        <div className="image">
+                                            <img className="ui medium rounded image" src="/static/download/connect.svg" style={{ height: "109px", width: "261px", marginBottom: "1rem" }} />
+                                        </div>
+                                        <div className="content">
+                                            <div className="description">
+                                                <span className="ui yellow circular label">1</span>
+                                                <strong>{lf("Connect the EV3 to your computer with a USB cable")}</strong>
+                                                <br />
+                                                <span style={{ fontSize: "small" }}>{lf("Use the miniUSB port on the top of the EV3 Brick")}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="column">
+                                    <div className="ui">
+                                        <div className="image">
+                                            <img className="ui medium rounded image" src="/static/download/transfer.svg" style={{ height: "109px", width: "261px", marginBottom: "1rem" }} />
+                                        </div>
+                                        <div className="content">
+                                            <div className="description">
+                                                <span className="ui yellow circular label">2</span>
+                                                <strong>{lf("Move the .uf2 file to the EV3 Brick")}</strong>
+                                                <br />
+                                                <span style={{ fontSize: "small" }}>{lf("Locate the downloaded .uf2 file and drag it to the EV3 USB drive")}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>;
+
+    return confirmAsync({
+        header: lf("Download to your EV3"),
+        jsx,
+        hasCloseIcon: true,
+        hideCancel: true,
+        hideAgree: false,
+        agreeLbl: lf("I got it"),
+        className: 'downloaddialog',
+        buttons: [canUseWebSerial() ? {
+            label: lf("Bluetooth"),
+            icon: "bluetooth",
+            className: "bluetooth focused",
+            onclick: () => {
+                pxt.tickEvent("bluetooth.enable");
+                explainWebSerialPairingAsync()
+                    .then(() => enableWebSerialAndCompileAsync())
+                    .done();
+            }
+        } : undefined, downloadAgain ? {
+            label: fn,
+            icon: "download",
+            className: "lightgrey focused",
+            url,
+            fileName: fn
+        } : undefined, docUrl ? {
+            label: lf("Help"),
+            icon: "help",
+            className: "lightgrey",
+            url: docUrl
+        } : undefined]
+        //timeout: 20000
+    }).then(() => { });
+}

editor/extension.ts

@@ -1,113 +1,26 @@
+/// <reference path="../node_modules/pxt-core/localtypings/pxtarget.d.ts" />
+/// <reference path="../node_modules/pxt-core/built/pxtblocks.d.ts" />
+/// <reference path="../node_modules/pxt-core/built/pxtcompiler.d.ts" />
+/// <reference path="../node_modules/pxt-core/built/pxtlib.d.ts" />
 /// <reference path="../node_modules/pxt-core/built/pxteditor.d.ts"/>
 /// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
 
 import { deployCoreAsync, initAsync } from "./deploy";
+import { showUploadDialogAsync } from "./dialogs";
+
+export let projectView: pxt.editor.IProjectView;
 
 pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): Promise<pxt.editor.ExtensionResult> {
     pxt.debug('loading pxt-ev3 target extensions...')
+    projectView = opts.projectView;
+
     const res: pxt.editor.ExtensionResult = {
-        deployCoreAsync,
-        showUploadInstructionsAsync: (fn: string, url: string, confirmAsync: (options: any) => Promise<number>) => {
-            let resolve: (thenableOrResult?: void | PromiseLike<void>) => void;
-            let reject: (error: any) => void;
-            const deferred = new Promise<void>((res, rej) => {
-                resolve = res;
-                reject = rej;
-            });
-            const boardName = pxt.appTarget.appTheme.boardName || "???";
-            const boardDriveName = pxt.appTarget.appTheme.driveDisplayName || pxt.appTarget.compile.driveName || "???";
-
-            // https://msdn.microsoft.com/en-us/library/cc848897.aspx
-            // "For security reasons, data URIs are restricted to downloaded resources. 
-            // Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements"
-            const downloadAgain = !pxt.BrowserUtils.isIE() && !pxt.BrowserUtils.isEdge();
-            const docUrl = pxt.appTarget.appTheme.usbDocs;
-            const saveAs = pxt.BrowserUtils.hasSaveAs();
-
-            const htmlBody = `
-            <div class="ui grid stackable">
-                <div class="column five wide" style="background-color: #E2E2E2;">
-                    <div class="ui header">${lf("First time here?")}</div>
-                    <strong style="font-size:small">${lf("You must have version 1.10E or above of the firmware")}</strong>
-                    <div style="justify-content: center;display: flex;padding: 1rem;">
-                        <img class="ui image" src="/static/download/firmware.png" style="height:100px;" />
-                    </div>
-                    <a href="/troubleshoot" target="_blank">${lf("Check your firmware version here and update if needed")}</a>
-                </div>
-                <div class="column eleven wide">
-                    <div class="ui grid">
-                        <div class="row">
-                            <div class="column">
-                                <div class="ui two column grid padded">
-                                    <div class="column">
-                                        <div class="ui">
-                                            <div class="image">
-                                                <img class="ui medium rounded image" src="/static/download/connect.svg" style="height:109px;width:261px;margin-bottom:1rem;" />
-                                            </div>
-                                            <div class="content">
-                                                <div class="description">
-                                                    <span class="ui yellow circular label">1</span>
-                                                    <strong>${lf("Connect the EV3 to your computer with a USB cable")}</strong>
-                                                    <br />
-                                                    <span style="font-size:small">${lf("Use the miniUSB port on the top of the EV3 Brick")}</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="column">
-                                        <div class="ui">
-                                            <div class="image">
-                                                <img class="ui medium rounded image" src="/static/download/transfer.svg" style="height:109px;width:261px;margin-bottom:1rem;" />
-                                            </div>
-                                            <div class="content">
-                                                <div class="description">
-                                                    <span class="ui yellow circular label">2</span>
-                                                    <strong>${lf("Move the .uf2 file to the EV3 Brick")}</strong>
-                                                    <br />
-                                                    <span style="font-size:small">${lf("Locate the downloaded .uf2 file and drag it to the EV3 USB drive")}</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>`;
-
-            return confirmAsync({
-                header: lf("Download to your EV3"),
-                htmlBody,
-                hasCloseIcon: true,
-                hideCancel: true,
-                hideAgree: false,
-                agreeLbl: lf("I got it"),
-                className: 'downloaddialog',
-                buttons: [downloadAgain ? {
-                    label: fn,
-                    icon: "download",
-                    className: "lightgrey focused",
-                    url,
-                    fileName: fn
-                } : undefined, docUrl ? {
-                    label: lf("Help"),
-                    icon: "help",
-                    className: "lightgrey",
-                    url: docUrl
-                } : undefined]
-                //timeout: 20000
-            }).then(() => { });
-        }
+        deployAsync: deployCoreAsync,
+        showUploadInstructionsAsync: showUploadDialogAsync
     };
+
     initAsync().catch(e => {
         // probably no HID - we'll try this again upon deployment
     })
     return Promise.resolve<pxt.editor.ExtensionResult>(res);
 }
-
-// When require()d from node, bind the global pxt namespace
-// namespace pxt {
-//     export const dummyExport = 1;
-// }
-// eval("if (typeof process === 'object' && process + '' === '[object process]') pxt = global.pxt")

editor/tsconfig.json

@@ -1,14 +1,17 @@
 {
     "compilerOptions": {
         "target": "es5",
-        "noImplicitAny": false,
+        "noImplicitAny": true,
         "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "declaration": true,
         "module": "commonjs",
+        "moduleResolution": "node",
+        "isolatedModules": false,
         "outDir": "../built/editor",
         "rootDir": ".",
         "newLine": "LF",
         "sourceMap": false,
-        "allowSyntheticDefaultImports": true,
-        "declaration": true
+        "jsx": "react"
     }
 }

editor/wrap.ts

@@ -1,285 +1,286 @@
-namespace pxt.editor {
-    import HF2 = pxt.HF2
-    import U = pxt.U
+/**
+ * See https://www.lego.com/cdn/cs/set/assets/blt6879b00ae6951482/LEGO_MINDSTORMS_EV3_Communication_Developer_Kit.pdf
+ * https://github.com/mindboards/ev3sources/blob/master/lms2012/lms2012/source/bytecodes.h#L146
+ */
+import HF2 = pxt.HF2
+import U = pxt.U
 
-    function log(msg: string) {
-        pxt.log("EWRAP: " + msg)
+function log(msg: string) {
+    pxt.log("serial: " + msg)
+}
+
+export interface DirEntry {
+    name: string;
+    md5?: string;
+    size?: number;
+}
+
+const runTemplate = "C00882010084XX0060640301606400"
+const usbMagic = 0x3d3f
+const DIRECT_COMMAND_NO_REPLY = 0x80
+
+export class Ev3Wrapper {
+    msgs = new U.PromiseBuffer<Uint8Array>()
+    private cmdSeq = U.randomUint32() & 0xffff;
+    private lock = new U.PromiseQueue();
+    isStreaming = false;
+    dataDump = /talkdbg=1/.test(window.location.href);
+
+    constructor(public io: pxt.HF2.PacketIO) {
+        io.onData = buf => {
+            buf = buf.slice(0, HF2.read16(buf, 0) + 2)
+            if (HF2.read16(buf, 4) == usbMagic) {
+                let code = HF2.read16(buf, 6)
+                let payload = buf.slice(8)
+                if (code == 1) {
+                    let str = U.uint8ArrayToString(payload)
+                    if (U.isNodeJS)
+                        pxt.debug("SERIAL: " + str.replace(/\n+$/, ""))
+                    else
+                        window.postMessage({
+                            type: 'serial',
+                            id: 'n/a', // TODO?
+                            data: str
+                        }, "*")
+                } else
+                    pxt.debug("Magic: " + code + ": " + U.toHex(payload))
+                return
+            }
+            if (this.dataDump)
+                log("RECV: " + U.toHex(buf))
+            this.msgs.push(buf)
+        }
     }
 
-    export interface DirEntry {
-        name: string;
-        md5?: string;
-        size?: number;
+    private allocCore(addSize: number, replyType: number) {
+        let len = 5 + addSize
+        let buf = new Uint8Array(len)
+        HF2.write16(buf, 0, len - 2)  // pktLen
+        HF2.write16(buf, 2, this.cmdSeq++) // msgCount
+        buf[4] = replyType
+        return buf
     }
 
-    const runTemplate = "C00882010084XX0060640301606400"
-    const usbMagic = 0x3d3f
+    private allocSystem(addSize: number, cmd: number, replyType = 1) {
+        let buf = this.allocCore(addSize + 1, replyType)
+        buf[5] = cmd
+        return buf
+    }
 
-    export class Ev3Wrapper {
-        msgs = new U.PromiseBuffer<Uint8Array>()
-        private cmdSeq = U.randomUint32() & 0xffff;
-        private lock = new U.PromiseQueue();
-        isStreaming = false;
-        dataDump = false;
+    private allocCustom(code: number, addSize = 0) {
+        let buf = this.allocCore(1 + 2 + addSize, 0)
+        HF2.write16(buf, 4, usbMagic)
+        HF2.write16(buf, 6, code)
+        return buf
+    }
 
-        constructor(public io: pxt.HF2.PacketIO) {
-            io.onData = buf => {
-                buf = buf.slice(0, HF2.read16(buf, 0) + 2)
-                if (HF2.read16(buf, 4) == usbMagic) {
-                    let code = HF2.read16(buf, 6)
-                    let payload = buf.slice(8)
-                    if (code == 1) {
-                        let str = U.uint8ArrayToString(payload)
-                        if (Util.isNodeJS)
-                            console.log("SERIAL: " + str.replace(/\n+$/, ""))
-                        else
-                            window.postMessage({
-                                type: 'serial',
-                                id: 'n/a', // TODO?
-                                data: str
-                            }, "*")
-                    } else
-                        console.log("Magic: " + code + ": " + U.toHex(payload))
-                    return
-                }
-                if (this.dataDump)
-                    log("RECV: " + U.toHex(buf))
-                this.msgs.push(buf)
-            }
-        }
-
-        private allocCore(addSize: number, replyType: number) {
-            let len = 5 + addSize
-            let buf = new Uint8Array(len)
-            HF2.write16(buf, 0, len - 2)  // pktLen
-            HF2.write16(buf, 2, this.cmdSeq++) // msgCount
-            buf[4] = replyType
-            return buf
-        }
-
-        private allocSystem(addSize: number, cmd: number, replyType = 1) {
-            let buf = this.allocCore(addSize + 1, replyType)
-            buf[5] = cmd
-            return buf
-        }
-
-        private allocCustom(code: number, addSize = 0) {
-            let buf = this.allocCore(1 + 2 + addSize, 0)
-            HF2.write16(buf, 4, usbMagic)
-            HF2.write16(buf, 6, code)
-            return buf
-        }
-
-        stopAsync() {
-            return this.isVmAsync()
-                .then(vm => {
-                    if (vm) return Promise.resolve();
-                    log(`stopping PXT app`)
-                    let buf = this.allocCustom(2)
-                    return this.justSendAsync(buf)
-                        .then(() => Promise.delay(500))
-                })
-        }
-
-        dmesgAsync() {
-            log(`asking for DMESG buffer over serial`)
-            let buf = this.allocCustom(3)
-            return this.justSendAsync(buf)
-        }
-
-        runAsync(path: string) {
-            let codeHex = runTemplate.replace("XX", U.toHex(U.stringToUint8Array(path)))
-            let code = U.fromHex(codeHex)
-            let pkt = this.allocCore(2 + code.length, 0)
-            HF2.write16(pkt, 5, 0x0800)
-            U.memcpy(pkt, 7, code)
-            log(`run ${path}`)
-            return this.justSendAsync(pkt)
-        }
-
-        justSendAsync(buf: Uint8Array) {
-            return this.lock.enqueue("talk", () => {
-                this.msgs.drain()
-                if (this.dataDump)
-                    log("SEND: " + U.toHex(buf))
-                return this.io.sendPacketAsync(buf)
-            })
-        }
-
-        talkAsync(buf: Uint8Array, altResponse = 0) {
-            return this.lock.enqueue("talk", () => {
-                this.msgs.drain()
-                if (this.dataDump)
-                    log("TALK: " + U.toHex(buf))
-                return this.io.sendPacketAsync(buf)
-                    .then(() => this.msgs.shiftAsync(1000))
-                    .then(resp => {
-                        if (resp[2] != buf[2] || resp[3] != buf[3])
-                            U.userError("msg count de-sync")
-                        if (buf[4] == 1) {
-                            if (altResponse != -1 && resp[5] != buf[5])
-                                U.userError("cmd de-sync")
-                            if (altResponse != -1 && resp[6] != 0 && resp[6] != altResponse)
-                                U.userError("cmd error: " + resp[6])
-                        }
-                        return resp
-                    })
-            })
-        }
-
-        flashAsync(path: string, file: Uint8Array) {
-            log(`write ${file.length} bytes to ${path}`)
-
-            let handle = -1
-
-            let loopAsync = (pos: number): Promise<void> => {
-                if (pos >= file.length) return Promise.resolve()
-                let size = file.length - pos
-                if (size > 1000) size = 1000
-                let upl = this.allocSystem(1 + size, 0x93, 0x1)
-                upl[6] = handle
-                U.memcpy(upl, 6 + 1, file, pos, size)
-                return this.talkAsync(upl, 8) // 8=EOF
-                    .then(() => loopAsync(pos + size))
-            }
-
-            let begin = this.allocSystem(4 + path.length + 1, 0x92)
-            HF2.write32(begin, 6, file.length) // fileSize
-            U.memcpy(begin, 10, U.stringToUint8Array(path))
-            return this.lock.enqueue("file", () =>
-                this.talkAsync(begin)
-                    .then(resp => {
-                        handle = resp[7]
-                        return loopAsync(0)
-                    }))
-        }
-
-        lsAsync(path: string): Promise<DirEntry[]> {
-            let lsReq = this.allocSystem(2 + path.length + 1, 0x99)
-            HF2.write16(lsReq, 6, 1024) // maxRead
-            U.memcpy(lsReq, 8, U.stringToUint8Array(path))
-
-            return this.talkAsync(lsReq, 8)
-                .then(resp =>
-                    U.uint8ArrayToString(resp.slice(12)).split(/\n/).map(s => {
-                        if (!s) return null as DirEntry
-                        let m = /^([A-F0-9]+) ([A-F0-9]+) ([^\/]*)$/.exec(s)
-                        if (m)
-                            return {
-                                md5: m[1],
-                                size: parseInt(m[2], 16),
-                                name: m[3]
-                            }
-                        else
-                            return {
-                                name: s.replace(/\/$/, "")
-                            }
-                    }).filter(v => !!v))
-        }
-
-        rmAsync(path: string): Promise<void> {
-            log(`rm ${path}`)
-            let rmReq = this.allocSystem(path.length + 1, 0x9c)
-            U.memcpy(rmReq, 6, U.stringToUint8Array(path))
-
-            return this.talkAsync(rmReq, 5)
-                .then(resp => { })
-        }
-
-        isVmAsync(): Promise<boolean> {
-            let path = "/no/such/dir"
-            let mkdirReq = this.allocSystem(path.length + 1, 0x9b)
-            U.memcpy(mkdirReq, 6, U.stringToUint8Array(path))
-            return this.talkAsync(mkdirReq, -1)
-                .then(resp => {
-                    let isVM = resp[6] == 0x05
-                    log(`${isVM ? "PXT app" : "VM"} running`)
-                    return isVM
-                })
-        }
-
-        private streamFileOnceAsync(path: string, cb: (d: Uint8Array) => void) {
-            let fileSize = 0
-            let filePtr = 0
-            let handle = -1
-            let resp = (buf: Uint8Array): Promise<void> => {
-                if (buf[6] == 2) {
-                    // handle not ready - file is missing
-                    this.isStreaming = false
-                    return Promise.resolve()
-                }
-
-                if (buf[6] != 0 && buf[6] != 8)
-                    U.userError("bad response when streaming file: " + buf[6] + " " + U.toHex(buf))
-
-                this.isStreaming = true
-                fileSize = HF2.read32(buf, 7)
-                if (handle == -1) {
-                    handle = buf[11]
-                    log(`stream on, handle=${handle}`)
-                }
-                let data = buf.slice(12)
-                filePtr += data.length
-                if (data.length > 0)
-                    cb(data)
-
-                if (buf[6] == 8) {
-                    // end of file
-                    this.isStreaming = false
-                    return this.rmAsync(path)
-                }
-
-                let contFileReq = this.allocSystem(1 + 2, 0x97)
-                HF2.write16(contFileReq, 7, 1000) // maxRead
-                contFileReq[6] = handle
-                return Promise.delay(data.length > 0 ? 0 : 500)
-                    .then(() => this.talkAsync(contFileReq, -1))
-                    .then(resp)
-            }
-
-            let getFileReq = this.allocSystem(2 + path.length + 1, 0x96)
-            HF2.write16(getFileReq, 6, 1000) // maxRead
-            U.memcpy(getFileReq, 8, U.stringToUint8Array(path))
-            return this.talkAsync(getFileReq, -1).then(resp)
-        }
-
-        streamFileAsync(path: string, cb: (d: Uint8Array) => void) {
-            let loop = (): Promise<void> =>
-                this.lock.enqueue("file", () =>
-                    this.streamFileOnceAsync(path, cb))
+    stopAsync() {
+        return this.isVmAsync()
+            .then(vm => {
+                if (vm) return Promise.resolve();
+                log(`stopping PXT app`)
+                let buf = this.allocCustom(2)
+                return this.justSendAsync(buf)
                     .then(() => Promise.delay(500))
-                    .then(loop)
-            return loop()
+            })
+    }
+
+    dmesgAsync() {
+        log(`asking for DMESG buffer over serial`)
+        let buf = this.allocCustom(3)
+        return this.justSendAsync(buf)
+    }
+
+    runAsync(path: string) {
+        let codeHex = runTemplate.replace("XX", U.toHex(U.stringToUint8Array(path)))
+        let code = U.fromHex(codeHex)
+        let pkt = this.allocCore(2 + code.length, DIRECT_COMMAND_NO_REPLY)
+        HF2.write16(pkt, 5, 0x0800)
+        U.memcpy(pkt, 7, code)
+        log(`run ${path}`)
+        return this.justSendAsync(pkt)
+    }
+
+    justSendAsync(buf: Uint8Array) {
+        return this.lock.enqueue("talk", () => {
+            this.msgs.drain()
+            if (this.dataDump)
+                log("SEND: " + U.toHex(buf))
+            return this.io.sendPacketAsync(buf)
+        })
+    }
+
+    talkAsync(buf: Uint8Array, altResponse = 0) {
+        return this.lock.enqueue("talk", () => {
+            this.msgs.drain()
+            if (this.dataDump)
+                log("TALK: " + U.toHex(buf))
+            return this.io.sendPacketAsync(buf)
+                .then(() => this.msgs.shiftAsync(1000))
+                .then(resp => {
+                    if (resp[2] != buf[2] || resp[3] != buf[3])
+                        U.userError("msg count de-sync")
+                    if (buf[4] == 1) {
+                        if (altResponse != -1 && resp[5] != buf[5])
+                            U.userError("cmd de-sync")
+                        if (altResponse != -1 && resp[6] != 0 && resp[6] != altResponse)
+                            U.userError("cmd error: " + resp[6])
+                    }
+                    return resp
+                })
+        })
+    }
+
+    flashAsync(path: string, file: Uint8Array) {
+        log(`write ${file.length} bytes to ${path}`)
+
+        let handle = -1
+
+        let loopAsync = (pos: number): Promise<void> => {
+            if (pos >= file.length) return Promise.resolve()
+            let size = file.length - pos
+            if (size > 1000) size = 1000
+            let upl = this.allocSystem(1 + size, 0x93, 0x1)
+            upl[6] = handle
+            U.memcpy(upl, 6 + 1, file, pos, size)
+            return this.talkAsync(upl, 8) // 8=EOF
+                .then(() => loopAsync(pos + size))
         }
 
+        let begin = this.allocSystem(4 + path.length + 1, 0x92)
+        HF2.write32(begin, 6, file.length) // fileSize
+        U.memcpy(begin, 10, U.stringToUint8Array(path))
+        return this.lock.enqueue("file", () =>
+            this.talkAsync(begin)
+                .then(resp => {
+                    handle = resp[7]
+                    return loopAsync(0)
+                }))
+    }
 
-        downloadFileAsync(path: string, cb: (d: Uint8Array) => void) {
-            return this.lock.enqueue("file", () =>
-                    this.streamFileOnceAsync(path, cb))
-        }
-        
+    lsAsync(path: string): Promise<DirEntry[]> {
+        let lsReq = this.allocSystem(2 + path.length + 1, 0x99)
+        HF2.write16(lsReq, 6, 1024) // maxRead
+        U.memcpy(lsReq, 8, U.stringToUint8Array(path))
 
-        private initAsync() {
-            return Promise.resolve()
+        return this.talkAsync(lsReq, 8)
+            .then(resp =>
+                U.uint8ArrayToString(resp.slice(12)).split(/\n/).map(s => {
+                    if (!s) return null as DirEntry
+                    let m = /^([A-F0-9]+) ([A-F0-9]+) ([^\/]*)$/.exec(s)
+                    if (m)
+                        return {
+                            md5: m[1],
+                            size: parseInt(m[2], 16),
+                            name: m[3]
+                        }
+                    else
+                        return {
+                            name: s.replace(/\/$/, "")
+                        }
+                }).filter(v => !!v))
+    }
+
+    rmAsync(path: string): Promise<void> {
+        log(`rm ${path}`)
+        let rmReq = this.allocSystem(path.length + 1, 0x9c)
+        U.memcpy(rmReq, 6, U.stringToUint8Array(path))
+
+        return this.talkAsync(rmReq, 5)
+            .then(resp => { })
+    }
+
+    isVmAsync(): Promise<boolean> {
+        let path = "/no/such/dir"
+        let mkdirReq = this.allocSystem(path.length + 1, 0x9b)
+        U.memcpy(mkdirReq, 6, U.stringToUint8Array(path))
+        return this.talkAsync(mkdirReq, -1)
+            .then(resp => {
+                let isVM = resp[6] == 0x05
+                log(`${isVM ? "PXT app" : "VM"} running`)
+                return isVM
+            })
+    }
+
+    private streamFileOnceAsync(path: string, cb: (d: Uint8Array) => void) {
+        let fileSize = 0
+        let filePtr = 0
+        let handle = -1
+        let resp = (buf: Uint8Array): Promise<void> => {
+            if (buf[6] == 2) {
+                // handle not ready - file is missing
+                this.isStreaming = false
+                return Promise.resolve()
+            }
+
+            if (buf[6] != 0 && buf[6] != 8)
+                U.userError("bad response when streaming file: " + buf[6] + " " + U.toHex(buf))
+
+            this.isStreaming = true
+            fileSize = HF2.read32(buf, 7)
+            if (handle == -1) {
+                handle = buf[11]
+                log(`stream on, handle=${handle}`)
+            }
+            let data = buf.slice(12)
+            filePtr += data.length
+            if (data.length > 0)
+                cb(data)
+
+            if (buf[6] == 8) {
+                // end of file
+                this.isStreaming = false
+                return this.rmAsync(path)
+            }
+
+            let contFileReq = this.allocSystem(1 + 2, 0x97)
+            HF2.write16(contFileReq, 7, 1000) // maxRead
+            contFileReq[6] = handle
+            return Promise.delay(data.length > 0 ? 0 : 500)
+                .then(() => this.talkAsync(contFileReq, -1))
+                .then(resp)
         }
 
-        private resetState() {
+        let getFileReq = this.allocSystem(2 + path.length + 1, 0x96)
+        HF2.write16(getFileReq, 6, 1000) // maxRead
+        U.memcpy(getFileReq, 8, U.stringToUint8Array(path))
+        return this.talkAsync(getFileReq, -1).then(resp)
+    }
 
-        }
-
-        reconnectAsync(first = false): Promise<void> {
-            this.resetState()
-            if (first) return this.initAsync()
-            log(`reconnect`);
-            return this.io.reconnectAsync()
-                .then(() => this.initAsync())
-        }
-
-        disconnectAsync() {
-            log(`disconnect`);
-            return this.io.disconnectAsync()
-        }
+    streamFileAsync(path: string, cb: (d: Uint8Array) => void) {
+        let loop = (): Promise<void> =>
+            this.lock.enqueue("file", () =>
+                this.streamFileOnceAsync(path, cb))
+                .then(() => Promise.delay(500))
+                .then(loop)
+        return loop()
     }
 
 
-}
+    downloadFileAsync(path: string, cb: (d: Uint8Array) => void) {
+        return this.lock.enqueue("file", () =>
+            this.streamFileOnceAsync(path, cb))
+    }
+
+
+    private initAsync() {
+        return Promise.resolve()
+    }
+
+    private resetState() {
+
+    }
+
+    reconnectAsync(first = false): Promise<void> {
+        this.resetState()
+        if (first) return this.initAsync()
+        log(`reconnect`);
+        return this.io.reconnectAsync()
+            .then(() => this.initAsync())
+    }
+
+    disconnectAsync() {
+        log(`disconnect`);
+        return this.io.disconnectAsync()
+    }
+}

ev3.code-workspace

@@ -0,0 +1,13 @@
+{
+	"folders": [
+		{
+			"path": "."
+		},
+		{
+			"path": "../pxt-common-packages"
+		},
+		{
+			"path": "../pxt"
+		}
+	]
+}

fieldeditors/extension.ts

@@ -3,9 +3,7 @@
 
 import { FieldPorts } from "./field_ports";
 import { FieldMotors } from "./field_motors";
-import { FieldSpeed } from "./field_speed";
 import { FieldBrickButtons } from "./field_brickbuttons";
-import { FieldTurnRatio } from "./field_turnratio";
 import { FieldColorEnum } from "./field_color";
 import { FieldMusic } from "./field_music";
 
@@ -19,15 +17,9 @@ pxt.editor.initFieldExtensionsAsync = function (opts: pxt.editor.FieldExtensionO
         }, {
             selector: "motors",
             editor: FieldMotors
-        }, {
-            selector: "speed",
-            editor: FieldSpeed
         }, {
             selector: "brickbuttons",
             editor: FieldBrickButtons
-        }, {
-            selector: "turnratio",
-            editor: FieldTurnRatio
         }, {
             selector: "colorenum",
             editor: FieldColorEnum

fieldeditors/field_brickbuttons.ts

@@ -121,17 +121,17 @@ export class FieldBrickButtons extends Blockly.FieldDropdown implements Blockly.
         Blockly.DropDownDiv.setColour('#ffffff', '#dddddd');
 
         // Calculate positioning based on the field position.
-        var scale = this.sourceBlock_.workspace.scale;
-        var bBox = { width: this.size_.width, height: this.size_.height };
+        let scale = (<Blockly.WorkspaceSvg>this.sourceBlock_.workspace).scale;
+        let bBox = { width: this.size_.width, height: this.size_.height };
         bBox.width *= scale;
         bBox.height *= scale;
-        var position = this.fieldGroup_.getBoundingClientRect();
-        var primaryX = position.left + bBox.width / 2;
-        var primaryY = position.top + bBox.height;
-        var secondaryX = primaryX;
-        var secondaryY = position.top;
+        let position = this.fieldGroup_.getBoundingClientRect();
+        let primaryX = position.left + bBox.width / 2;
+        let primaryY = position.top + bBox.height;
+        let secondaryX = primaryX;
+        let secondaryY = position.top;
         // Set bounds to workspace; show the drop-down.
-        (Blockly.DropDownDiv as any).setBoundsElement(this.sourceBlock_.workspace.getParentSvg().parentNode);
+        (Blockly.DropDownDiv as any).setBoundsElement((<Blockly.WorkspaceSvg>this.sourceBlock_.workspace).getParentSvg().parentNode);
         (Blockly.DropDownDiv as any).show(this, primaryX, primaryY, secondaryX, secondaryY,
             this.onHide_.bind(this));
     }
@@ -152,9 +152,10 @@ export class FieldBrickButtons extends Blockly.FieldDropdown implements Blockly.
      * Callback for when the drop-down is hidden.
      */
     private onHide_ = function () {
-        Blockly.DropDownDiv.content_.removeAttribute('role');
-        Blockly.DropDownDiv.content_.removeAttribute('aria-haspopup');
-        Blockly.DropDownDiv.content_.removeAttribute('aria-activedescendant');
-        Blockly.DropDownDiv.getContentDiv().style.width = '';
+        const content = Blockly.DropDownDiv.getContentDiv();
+        content.removeAttribute('role');
+        content.removeAttribute('aria-haspopup');
+        content.removeAttribute('aria-activedescendant');
+        (content as HTMLElement).style.width = '';
     };
 }

fieldeditors/field_color.ts

@@ -44,7 +44,7 @@ export class FieldColorEnum extends pxtblockly.FieldColorNumber implements Block
      * @return {string} Current colour in '#rrggbb' format.
      */
     getValue(opt_asHex?: boolean) {
-        var colour = this.mapColour(this.colour_);
+        const colour = this.mapColour(this.value_);
         if (!opt_asHex && colour.indexOf('#') > -1) {
             return `0x${colour.replace(/^#/, '')}`;
         }
@@ -56,13 +56,13 @@ export class FieldColorEnum extends pxtblockly.FieldColorNumber implements Block
      * @param {string} colour The new colour in '#rrggbb' format.
      */
     setValue(colorStr: string) {
-        var colour = this.mapEnum(colorStr);
+        let colour = this.mapEnum(colorStr);
         if (this.sourceBlock_ && Blockly.Events.isEnabled() &&
-            this.colour_ != colour) {
+            this.value_ != colour) {
             Blockly.Events.fire(new (Blockly as any).Events.BlockChange(
-                this.sourceBlock_, 'field', this.name, this.colour_, colour));
+                this.sourceBlock_, 'field', this.name, this.value_, colour));
         }
-        this.colour_ = colour;
+        this.value_ = colour;
         if (this.sourceBlock_) {
             this.sourceBlock_.setColour(colour, colour, colour);
         }

fieldeditors/field_motors.ts

@@ -46,31 +46,31 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
         (this as any).arrowX_ = 0;
         /** @type {Number} */
         this.arrowY_ = 11;
-        this.arrow_ = Blockly.utils.createSvgElement('image', {
+        this.arrow_ = Blockly.utils.dom.createSvgElement('image', {
             'height': (this as any).arrowSize_ + 'px',
             'width': (this as any).arrowSize_ + 'px'
-        });
+        }, null);
         this.arrow_.setAttributeNS('http://www.w3.org/1999/xlink',
             'xlink:href', (Blockly.FieldDropdown as any).DROPDOWN_SVG_DATAURI);
 
-        this.arrow2_ = Blockly.utils.createSvgElement('image', {
+        this.arrow2_ = <SVGImageElement>Blockly.utils.dom.createSvgElement('image', {
             'height': (this as any).arrowSize_ + 'px',
             'width': (this as any).arrowSize_ + 'px'
-        });
+        }, null);
         this.arrow2_.setAttributeNS('http://www.w3.org/1999/xlink',
             'xlink:href', (Blockly.FieldDropdown as any).DROPDOWN_SVG_DATAURI);
         (this as any).className_ += ' blocklyDropdownText';
 
         // Build the DOM.
-        this.fieldGroup_ = Blockly.utils.createSvgElement('g', {}, null);
+        this.fieldGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null);
         if (!this.visible_) {
             (this.fieldGroup_ as any).style.display = 'none';
         }
         // Adjust X to be flipped for RTL. Position is relative to horizontal start of source block.
-        var size = this.getSize();
-        var fieldX = (this.sourceBlock_.RTL) ? -size.width / 2 : size.width / 2;
+        let size = this.getSize();
+        let fieldX = (this.sourceBlock_.RTL) ? -size.width / 2 : size.width / 2;
         /** @type {!Element} */
-        this.textElement_ = Blockly.utils.createSvgElement('text',
+        this.textElement_ = Blockly.utils.dom.createSvgElement('text',
             {
                 'class': (this as any).className_,
                 'x': fieldX,
@@ -79,7 +79,7 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
             },
             this.fieldGroup_);
         fieldX += 10; // size of first group.
-        this.textElement2_ = Blockly.utils.createSvgElement('text',
+        this.textElement2_ = <SVGTextElement>Blockly.utils.dom.createSvgElement('text',
             {
                 'class': (this as any).className_,
                 'x': fieldX,
@@ -89,17 +89,17 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
             this.fieldGroup_);
 
         this.updateEditable();
-        this.sourceBlock_.getSvgRoot().appendChild(this.fieldGroup_);
+        (this.sourceBlock_ as Blockly.BlockSvg).getSvgRoot().appendChild(this.fieldGroup_);
         // Force a render.
         this.render_();
-        this.size_.width = 0;
+        this.isDirty_ = true;
         (this as any).mouseDownWrapper_ =
             Blockly.bindEventWithChecks_((this as any).getClickTarget_(), 'mousedown', this,
                 (this as any).onMouseDown_);
 
         // Add second dropdown 
         if (this.shouldShowRect_()) {
-            this.box_ = Blockly.utils.createSvgElement('rect', {
+            this.box_ = <SVGRectElement>Blockly.utils.dom.createSvgElement('rect', {
                 'rx': (Blockly.BlockSvg as any).CORNER_RADIUS,
                 'ry': (Blockly.BlockSvg as any).CORNER_RADIUS,
                 'x': 0,
@@ -112,7 +112,7 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
                 'fill-opacity': 1
             }, null);
             this.fieldGroup_.insertBefore(this.box_, this.textElement_);
-            this.box2_ = Blockly.utils.createSvgElement('rect', {
+            this.box2_ = <SVGRectElement>Blockly.utils.dom.createSvgElement('rect', {
                 'rx': (Blockly.BlockSvg as any).CORNER_RADIUS,
                 'ry': (Blockly.BlockSvg as any).CORNER_RADIUS,
                 'x': 0,
@@ -128,7 +128,7 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
         }
 
         // Force a reset of the text to add the arrow.
-        var text = this.text_;
+        let text = this.text_;
         this.text_ = null;
         this.setText(text);
     }
@@ -149,9 +149,9 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
     getFirstValueI11n(value: string) {
         const firstValue = this.getFirstValue(value);
         const motorOptions = {
-            'medium motor': lf('medium motor'),
-            'large motor': lf('large motor'),
-            'large motors': lf('large motors')
+            'medium motor': lf("medium motor"),
+            'large motor': lf("large motor"),
+            'large motors': lf("large motors")
         }
         return motorOptions[firstValue];
     }
@@ -179,7 +179,7 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
             // Not rendered yet.
             return;
         }
-        var text = this.text_;
+        let text = this.text_;
         if (text.length > this.maxDisplayLength) {
             // Truncate displayed string and add an ellipsis ('...').
             text = text.substring(0, this.maxDisplayLength - 2) + '\u2026';
@@ -200,11 +200,11 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
             // Prevent the field from disappearing if empty.
             text = Blockly.Field.NBSP;
         }
-        var textNode = document.createTextNode(text);
+        let textNode = document.createTextNode(text);
         this.textElement2_.appendChild(textNode);
 
         // Cached width is obsolete.  Clear it.
-        this.size_.width = 0;
+        this.isDirty_ = true;
     };
 
     patchDualMotorText(text: string) {
@@ -233,8 +233,8 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
         if (this.textElement2_) {
             this.textElement2_.parentNode.appendChild(this.arrow2_);
         }
-        if (this.sourceBlock_ && this.sourceBlock_.rendered) {
-            this.sourceBlock_.render();
+        if (this.sourceBlock_ && (<Blockly.BlockSvg>this.sourceBlock_).rendered) {
+            (<Blockly.BlockSvg>this.sourceBlock_).render();
             this.sourceBlock_.bumpNeighbours_();
         }
     }
@@ -244,7 +244,7 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
             return 0;
         }
 
-        var addedWidth = 0;
+        let addedWidth = 0;
         if (this.sourceBlock_.RTL) {
             (this as any).arrow2X_ = (this as any).arrowSize_ - (Blockly.BlockSvg as any).DROPDOWN_ARROW_PADDING;
             addedWidth = (this as any).arrowSize_ + (Blockly.BlockSvg as any).DROPDOWN_ARROW_PADDING;
@@ -263,10 +263,10 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
         return addedWidth;
     };
 
-    updateWidth() {
+    updateSize_() {
         // Calculate width of field
-        var width = Blockly.Field.getCachedWidth(this.textElement_);
-        var width2 = Blockly.Field.getCachedWidth(this.textElement2_);
+        let width = Blockly.Field.getCachedWidth(this.textElement_);
+        let width2 = Blockly.Field.getCachedWidth(this.textElement2_);
 
         // Add padding to left and right of text.
         if (this.EDITABLE) {
@@ -311,15 +311,15 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
 
             // First dropdown
             // Use one of the following options, medium motor, large motor or large motors (translated)
-            const textNode1 = document.createTextNode(this.getFirstValueI11n(this.value_));
+            const textNode1 = document.createTextNode(this.getFirstValueI11n(<string>this.value_));
             this.textElement_.appendChild(textNode1);
 
             // Second dropdown, no need to translate. Only port numbers
             if (this.textElement2_) {
-                const textNode2 = document.createTextNode(this.getSecondValue(this.value_));
+                const textNode2 = document.createTextNode(this.getSecondValue(<string>this.value_));
                 this.textElement2_.appendChild(textNode2);
             }
-            this.updateWidth();
+            this.updateSize_();
 
             // Update text centering, based on newly calculated width.
             let centerTextX = ((this as any).width1 - this.arrowWidth_) / 2;
@@ -347,8 +347,8 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
             }
 
             // Apply new text element x position.
-            var width = Blockly.Field.getCachedWidth(this.textElement_);
-            var newX = centerTextX - width / 2;
+            let width = Blockly.Field.getCachedWidth(this.textElement_);
+            let newX = centerTextX - width / 2;
             this.textElement_.setAttribute('x', `${newX}`);
 
             // Update text centering, based on newly calculated width.
@@ -377,8 +377,8 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
             }
 
             // Apply new text element x position.
-            var width2 = Blockly.Field.getCachedWidth(this.textElement2_);
-            var newX2 = centerTextX2 - width2 / 2;
+            let width2 = Blockly.Field.getCachedWidth(this.textElement2_);
+            let newX2 = centerTextX2 - width2 / 2;
             this.textElement2_.setAttribute('x', `${newX2 + (this as any).width1 + Blockly.BlockSvg.BOX_FIELD_PADDING}`);
         }
 
@@ -401,7 +401,7 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
         if (Blockly.DropDownDiv.hideIfOwner(this)) {
             return;
         }
-        this.isFirst_ = e.clientX - this.getScaledBBox_().left < ((this as any).width1 * this.sourceBlock_.workspace.scale);
+        this.isFirst_ = e.clientX - this.getScaledBBox_().left < ((this as any).width1 * (<Blockly.WorkspaceSvg>this.sourceBlock_.workspace).scale);
         // If there is an existing drop-down someone else owns, hide it immediately and clear it.
         Blockly.DropDownDiv.hideWithoutAnimation();
         Blockly.DropDownDiv.clearContent();
@@ -411,14 +411,14 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
         // Accessibility properties
         contentDiv.setAttribute('role', 'menu');
         contentDiv.setAttribute('aria-haspopup', 'true');
-        let options = this.getOptions();
+        const foptions = this.getOptions(); // [img info, text]
 
         let opts = {};
         let conts = {};
         let vals = {};
         // Go through all option values and split them into groups
-        for (let opt = 0; opt < options.length; opt++) {
-            const value = options[opt][1];
+        for (let opt = 0; opt < foptions.length; opt++) {
+            const value = foptions[opt][1];
             const motorValue = value.substring(value.indexOf('.') + 1);
             const typeValue = motorValue.indexOf('large') == 0 ? 'large' : 'medium';
             const portValue = motorValue.indexOf('large') == 0 ? motorValue.substring(5) : motorValue.substring(6);
@@ -429,13 +429,14 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
             if (!opts[key]) opts[key] = [];
             opts[key].push(portValue);
 
-            conts[text] = options[opt][0];
+            conts[text] = foptions[opt][0];
             vals[text] = value;
         }
 
-        const currentFirst = this.getFirstValue(this.value_);
-        const currentSecond = this.getSecondValue(this.value_);
+        const currentFirst = this.getFirstValue(<string>this.value_);
+        //const currentSecond = this.getSecondValue(<string>this.value_);
 
+        let options: string[];
         if (!this.isFirst_) {
             options = opts[currentFirst];
         } else {
@@ -526,7 +527,7 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
         Blockly.DropDownDiv.setColour(this.backgroundColour_, this.borderColour_);
 
         // Calculate positioning based on the field position.
-        let scale = this.sourceBlock_.workspace.scale;
+        let scale = (<Blockly.WorkspaceSvg>this.sourceBlock_.workspace).scale;
         let width = this.isFirst_ ? (this as any).width1 : (this as any).width2;
         let bBox = { width: this.size_.width, height: this.size_.height };
         width *= scale;
@@ -538,7 +539,7 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
         let secondaryX = primaryX;
         let secondaryY = position.top;
         // Set bounds to workspace; show the drop-down.
-        (Blockly.DropDownDiv as any).setBoundsElement(this.sourceBlock_.workspace.getParentSvg().parentNode);
+        (Blockly.DropDownDiv as any).setBoundsElement((<Blockly.WorkspaceSvg>this.sourceBlock_.workspace).getParentSvg().parentNode);
         (Blockly.DropDownDiv as any).show(this, primaryX, primaryY, secondaryX, secondaryY,
             this.onHide_.bind(this));
 
@@ -561,10 +562,11 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
      * Callback for when the drop-down is hidden.
      */
     protected onHide_() {
-        Blockly.DropDownDiv.content_.removeAttribute('role');
-        Blockly.DropDownDiv.content_.removeAttribute('aria-haspopup');
-        Blockly.DropDownDiv.content_.removeAttribute('aria-activedescendant');
-        Blockly.DropDownDiv.getContentDiv().style.width = '';
+        const content = Blockly.DropDownDiv.getContentDiv();
+        content.removeAttribute('role');
+        content.removeAttribute('aria-haspopup');
+        content.removeAttribute('aria-activedescendant');
+        (content as HTMLElement).style.width = '';
         if (this.isFirst_ && this.box_) {
             this.box_.setAttribute('fill', this.sourceBlock_.getColour());
         } else if (!this.isFirst_ && this.box2_) {

fieldeditors/field_music.ts

@@ -26,7 +26,7 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
         this.width_ = parseInt(options.width) || 380;
 
         this.setText = Blockly.FieldDropdown.prototype.setText;
-        this.updateWidth = (Blockly.Field as any).prototype.updateWidth;
+        this.updateSize_ = (Blockly.Field as any).prototype.updateSize_;
         this.updateTextNode_ = Blockly.Field.prototype.updateTextNode_;
 
         if (!pxt.BrowserUtils.isIE() && !soundCache) {
@@ -78,14 +78,14 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
         contentDiv.style.width = (this as any).width_ + 'px';
         contentDiv.style.cssFloat = 'left';
 
-        dropdownDiv.style.maxHeight = `410px`;
+        (dropdownDiv as HTMLElement).style.maxHeight = `410px`;
         dropdownDiv.appendChild(categoriesDiv);
         dropdownDiv.appendChild(contentDiv);
 
         Blockly.DropDownDiv.setColour(this.sourceBlock_.getColour(), this.sourceBlock_.getColourTertiary());
 
         // Calculate positioning based on the field position.
-        let scale = this.sourceBlock_.workspace.scale;
+        let scale = (<Blockly.WorkspaceSvg>this.sourceBlock_.workspace).scale;
         let bBox = { width: this.size_.width, height: this.size_.height };
         bBox.width *= scale;
         bBox.height *= scale;
@@ -95,7 +95,7 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
         let secondaryX = primaryX;
         let secondaryY = position.top;
         // Set bounds to workspace; show the drop-down.
-        (Blockly.DropDownDiv as any).setBoundsElement(this.sourceBlock_.workspace.getParentSvg().parentNode);
+        (Blockly.DropDownDiv as any).setBoundsElement((<Blockly.WorkspaceSvg>this.sourceBlock_.workspace).getParentSvg().parentNode);
         (Blockly.DropDownDiv as any).show(this, primaryX, primaryY, secondaryX, secondaryY,
             this.onHide_.bind(this));
 
@@ -236,7 +236,7 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
 
     protected onHide_() {
         super.onHide_();
-        Blockly.DropDownDiv.getContentDiv().style.maxHeight = '';
+        (Blockly.DropDownDiv.getContentDiv() as HTMLElement).style.maxHeight = '';
         this.stopSounds();
     }
 

fieldeditors/field_ports.ts

@@ -17,7 +17,7 @@ export class FieldPorts extends pxtblockly.FieldImages implements Blockly.FieldC
         this.width_ = parseInt(options.width) || 300;
 
         this.setText = Blockly.FieldDropdown.prototype.setText;
-        this.updateWidth = (Blockly.Field as any).prototype.updateWidth;
+        this.updateSize_ = (Blockly.Field as any).prototype.updateSize_;
         this.updateTextNode_ = Blockly.Field.prototype.updateTextNode_;
     }