0.0.100

* integrating test lesson from lego

* adding side card annotations

docs/SUMMARY.md

@@ -2,14 +2,30 @@
 
 ## Projects #projects
 
+* [Getting Started](/getting-started)
+    * [Try](/getting-started/try)
+    * [Use](/getting-started/use)
+
+* [Coding](/coding)
+    * [Autonomous Parking](/coding/autonomous-parking)
+    * [Object Detection](/coding/object-detection)
+    * [Line Following](/coding/line-following)
+        
+* [Design Engineering](/design-engineering)
+    * [Make It Move Without Wheels](/design-engineering/make-it-move)
+    * [Make It Smarter and Faster](/design-engineering/make-it-faster)
+    * [Make a System that Communicates](/design-engineering/make-it-communicate)
+
 * [Maker](/maker)
-    * [Sound Machine](/maker/sound-machine)
+    * [Make a Sound Machine](/maker/sound-machine)
+
+* [Examples](/examples)
+    * [Make it move](/lessons/make-it-move)
+    * [Line detection](/lessons/line-detection)
     * [Sound of Color](/maker/sound-of-color)
     * [Security Gadget](/maker/security-gadget)
     * [Intruder detector](/maker/intruder-detector)
     * [Puppet](/maker/puppet)
-
-* [Coding](/coding)
     * [Three Point Turn 1](/coding/three-point-turn-1)
     * [Three Point Turn 2](/coding/three-point-turn-2)
     * [Three Point Turn 3](/coding/three-point-turn-3)
@@ -34,10 +50,6 @@
     * [Roaming 1](/coding/roaming-1)
     * [Roaming 2](/coding/roaming-2)
 
-* [Lessons](/lessons)
-    * [Make it move](/lessons/make-it-move)
-    * [Line detection](/lessons/line-detection)
-
 ## Reference #reference
 
 * [Reference](/reference)
@@ -67,8 +79,18 @@
         * [angle](/reference/motors/motor/angle)
         * [speed](/reference/motors/motor/speed)
         * [clear counts](/reference/motors/motor/clear-counts)
-        * [stop all motors](/reference/motors/stop-all-motors)
+        * [stop all motors](/reference/motors/stop-all)
     * [Sensors](/reference/sensors)
-        * [angle](/reference/sensors/gyro/angle)
-        * [rate](/reference/sensors/gyro/rate)
-        * [reset](/reference/sensors/gyro/reset)
+        * [Touch](/reference/sensors/touch-sensor)
+            * [on event](/reference/sensors/touch-sensor/on-event)
+            * [pause until](/reference/sensors/touch-sensor/pause-until)
+            * [is pressed](/reference/sensors/touch-sensor/is-pressed)
+            * [was pressed](/reference/sensors/touch-sensor/was-pressed)
+        * [Gyro](/reference/sensors/gyro)
+            * [angle](/reference/sensors/gyro/angle)
+            * [rate](/reference/sensors/gyro/rate)
+            * [reset](/reference/sensors/gyro/reset)
+        * [Ultrasonic](/reference/sensors/ultrasonic)
+            * [on event](/reference/sensors/ultrasonic/on-event),
+            * [distance](reference/sensors/ultrasonic/distance),
+            * [pause until](reference/sensors/ultrasonic/pause-until)

docs/coding.md

@@ -1,171 +1,24 @@
 # Coding Activites
 
-12 computer science activities, with cross-curricular opportunities in design and technology, science, and math.
 
-* [Download Curriculum Materials](https://education.lego.com/en-us/downloads/mindstorms-ev3)
-
-## Three Point Turn
+## Projects
 
 ```codecard
 [
 {
-  "name": "Three Point Turn 1",
-  "description": "Activity 1",
-  "url":"/coding/three-point-turn-1",
-  "cardType": "example"
+  "name": "Autonomous Parking",
+  "description": "TBD",
+  "url":"/coding/autonomous-parking",
+  "cardType": "side"
 }, {
-  "name": "Three Point Turn 2",
-  "description": "Activity 2",
-  "url":"/coding/three-point-turn-2",
-  "cardType": "example"
+  "name": "Object Detection",
+  "description": "TBD",
+  "url":"/coding/object-detection",
+  "cardType": "side"
 }, {
-  "name": "Three Point Turn 3",
-  "description": "Activity 3",
-  "url":"/coding/three-point-turn-3",
-  "cardType": "example"
-}]
-```
-
-## Reversing the robot
-
-```codecard
-[{
-  "name": "Reversing the robot 1",
-  "description": "Activity 1",
-  "url":"/coding/reversing-the-robot-1",
-  "cardType": "example"
-}, {
-  "name": "Reversing the robot 2",
-  "description": "Activity 2",
-  "url":"/coding/reversing-the-robot-2",
-  "cardType": "example"
-}, {
-  "name": "Reversing the robot 3",
-  "description": "Activity 3",
-  "url":"/coding/reversing-the-robot-3",
-  "cardType": "example"
-}]
-```
-
-## Light the way
-
-```codecard
-[{
-  "name": "Light the way 1",
-  "description": "Activity 1",
-  "url":"/coding/light-the-way-1",
-  "cardType": "example"
-}, {
-  "name": "Light the way 2",
-  "description": "Activity 2",
-  "url":"/coding/light-the-way-2",
-  "cardType": "example"
-}, {
-  "name": "Light the way 3",
-  "description": "Activity 3",
-  "url":"/coding/light-the-way-3",
-  "cardType": "example"
-}    
-]
-```
-
-## Traffic Lights
-
-```codecard
-[{
-  "name": "Traffic Lights 1",
-  "description": "Activity 1",
-  "url":"/coding/traffic-lights-1",
-  "cardType": "example"
-}, {
-  "name": "Traffic Lights 2",
-  "description": "Activity 2",
-  "url":"/coding/traffic-lights-2",
-  "cardType": "example"
-}, {
-  "name": "Traffic Lights 3",
-  "description": "Activity 3",
-  "url":"/coding/traffic-lights-3",
-  "cardType": "example"
-}
-]
-```
-
-## Reverse Bepper
-
-```codecard
-[{
-  "name": "Reverse Beeper 1",
-  "description": "Activity 1",
-  "url":"/coding/reverse-beeper-1",
-  "cardType": "example"
-}, {
-  "name": "Reverse Beeper 2",
-  "description": "Activity 2",
-  "url":"/coding/reverse-beeper-2",
-  "cardType": "example"
-}, {
-  "name": "Reverse Beeper 3",
-  "description": "Activity 3",
-  "url":"/coding/reverse-beeper-3",
-  "cardType": "example"
-}]
-```
-
-## Ignition
-
-```codecard
-[{
-  "name": "Ignition 1",
-  "description": "Activity 1",
-  "url":"/coding/ingition-1",
-  "cardType": "example"
-}, {
-  "name": "Ignition 2",
-  "description": "Activity 2",
-  "url":"/coding/ignition-2",
-  "cardType": "example"
-}, {
-  "name": "Ignition 3",
-  "description": "Activity 3",
-  "url":"/coding/ignition-3",
-  "cardType": "example"
-}]
-```
-
-## Cruise Control
-
-```codecard
-[{
-  "name": "Cruise Control 1",
-  "description": "Activity 1",
-  "url":"/coding/cruise-control-1",
-  "cardType": "example"
-}, {
-  "name": "Cruise Control 2",
-  "description": "Activity 2",
-  "url":"/coding/cruise-control-2",
-  "cardType": "example"
-}, {
-  "name": "Cruise Control 3",
-  "description": "Activity 3",
-  "url":"/coding/cruise-control-3",
-  "cardType": "example"
-}]
-```
-
-## Roaming
-
-```codecard
-[{
-  "name": "Roaming 1",
-  "description": "Activity 1",
-  "url":"/coding/roaming-1",
-  "cardType": "example"
-}, {
-  "name": "Roaming 2",
-  "description": "Activity 2",
-  "url":"/coding/roaming-2",
-  "cardType": "example"
+  "name": "Line Following",
+  "description": "TBD",
+  "url":"/coding/line-following",
+  "cardType": "side"
 }]
 ```

docs/design-engineering.md

@@ -0,0 +1,29 @@
+# Design Engineering Projects
+
+## Projects
+
+```codecard
+[
+    {
+        "name": "Make It Move Without Wheels",
+        "description": "TBD",
+        "imageUrl": "/static/lessons/make-it-move.png",
+        "url": "/design-engineering/make-it-move",
+        "cardType": "side"
+    },
+    {
+        "name": "Make It Smarter and Faster",
+        "description": "TBD",
+        "imageUrl": "/static/lessons/make-it-smarter.png",
+        "url": "/design-engineering/make-it-move",
+        "cardType": "side"
+    },
+    {
+        "name": "Make a System that Communicates",
+        "description": "TBD",
+        "imageUrl": "/static/lessons/make-a-system.png",
+        "url": "/design-engineering/make-it-move",
+        "cardType": "side"
+    }
+]
+```

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

@@ -0,0 +1,90 @@
+# Make It Move Without Wheels
+
+## ~ avatar
+
+Design, build and program a robot that can move itself using no wheels for locomotion.
+
+## ~
+
+## Connect
+
+### Design Brief
+
+Design, build and program a robot that can move itself a distance of at least 30cm, using at least one motor, using NO wheels for locomotion.
+
+### Brainstorm
+
+Discuss different solutions to the design brief.
+
+Think about:
+
+How can robots move without wheels? For example, how will you:
+* Connect the motor(s) to something to make the robot walk, crawl, or wiggle?
+How will you program the robot to move? For example, which programming blocks will you use to:
+* Turn on and turn off the motor or motors?
+* Display the distance moved?
+
+### Select the Best Solution
+
+Describe the solution that you have agreed to build and program.
+
+Think about examples from your brainstorming discussion. Then explain why you chose this solution for the design brief.
+
+![The Mars rover](/static/lessons/make-it-move/hero.png)
+
+https://www.youtube.com/watch?v=ErC_s3hLGMk
+
+## Construct
+
+### Build and Program
+
+Now you are ready to start building and programming your solution!
+
+```blocks
+motors.largeBC.tank(-60, 60, 9, MoveUnit.Rotations);
+motors.stopAll();
+```
+
+As you work on your solution:
+
+* Describe one part of your design that worked especially well.
+* Describe one design change that you had to make.
+
+What will you try next?
+	
+As you test your design solution, use the table for recording your findings.
+
+[**VIEW BUILDING INSTRUCTIONS**](TODO) for a sample solution. (7.8 MB, PDF)
+
+# Contemplate
+
+## Test and Analyze
+
+How well does your solution satisfy the design brief? Record your data. Name the columns and rows, such as Trial Number, Distance Moved, and Observations.
+
+## Review and Revise
+
+Take a moment to reflect on your robot solution.
+
+Think about:
+* Is the robot using something other than wheels to move? Trace the movement from the motor axle to the mechanism(s) that drives the robot forward, backward or sideways. Wheels can be used to stabilize the robot but not to drive it.
+* Does the robot display the distance moved?
+* Is it accurate? How do you know?
+Describe two ways you could improve your robot.
+
+# Continue
+
+## Communicate
+
+Here are some ideas:
+* Create a video of your project, especially your final presentation and your robot’s performance.
+* Explain some important features of your software program.
+* Produce a building guide for your model by taking a series of photographs as you deconstruct it.
+* Include an image of your program with comments.
+* Add a team photograph!
+
+## ~ avatar
+
+Congratulations! What will you design next?
+
+## ~

docs/examples.md

@@ -2,6 +2,207 @@
 
 Here are some fun programs for your @boardname@!
 
+## Maker
+
+```codecard
+[
+{
+  "name": "Sound Of Color",
+  "description": "Play different sounds based on the color",
+  "url":"/maker/sound-of-color",
+  "cardType": "example",
+  "imageUrl": "/static/maker/sound-of-color.png"
+},
+{
+  "name": "Security Gadget",
+  "description": "Raise the alarm when your brick is lifted!",
+  "url":"/maker/security-gadget",
+  "cardType": "example",
+  "imageUrl": "/static/maker/security-gadget.png"
+},
+{
+  "name": "Intruder Detector",
+  "description": "Raise the alarm when an intruder sneaks in",
+  "url":"/maker/intruder-detector",
+  "cardType": "example",
+  "imageUrl": "/static/maker/intruder-detector.png"
+},
+{
+  "name": "Puppet",
+  "description": "Build an automated puppet",
+  "url":"/maker/puppet",
+  "cardType": "example",
+  "imageUrl": "/static/maker/puppet.png"
+}
+]
+```
+
+## Three Point Turn
+
+```codecard
+[
+{
+  "name": "Three Point Turn 1",
+  "description": "Activity 1",
+  "url":"/coding/three-point-turn-1",
+  "cardType": "example"
+}, {
+  "name": "Three Point Turn 2",
+  "description": "Activity 2",
+  "url":"/coding/three-point-turn-2",
+  "cardType": "example"
+}, {
+  "name": "Three Point Turn 3",
+  "description": "Activity 3",
+  "url":"/coding/three-point-turn-3",
+  "cardType": "example"
+}]
+```
+
+## Reversing the robot
+
+```codecard
+[{
+  "name": "Reversing the robot 1",
+  "description": "Activity 1",
+  "url":"/coding/reversing-the-robot-1",
+  "cardType": "example"
+}, {
+  "name": "Reversing the robot 2",
+  "description": "Activity 2",
+  "url":"/coding/reversing-the-robot-2",
+  "cardType": "example"
+}, {
+  "name": "Reversing the robot 3",
+  "description": "Activity 3",
+  "url":"/coding/reversing-the-robot-3",
+  "cardType": "example"
+}]
+```
+
+## Light the way
+
+```codecard
+[{
+  "name": "Light the way 1",
+  "description": "Activity 1",
+  "url":"/coding/light-the-way-1",
+  "cardType": "example"
+}, {
+  "name": "Light the way 2",
+  "description": "Activity 2",
+  "url":"/coding/light-the-way-2",
+  "cardType": "example"
+}, {
+  "name": "Light the way 3",
+  "description": "Activity 3",
+  "url":"/coding/light-the-way-3",
+  "cardType": "example"
+}    
+]
+```
+
+## Traffic Lights
+
+```codecard
+[{
+  "name": "Traffic Lights 1",
+  "description": "Activity 1",
+  "url":"/coding/traffic-lights-1",
+  "cardType": "example"
+}, {
+  "name": "Traffic Lights 2",
+  "description": "Activity 2",
+  "url":"/coding/traffic-lights-2",
+  "cardType": "example"
+}, {
+  "name": "Traffic Lights 3",
+  "description": "Activity 3",
+  "url":"/coding/traffic-lights-3",
+  "cardType": "example"
+}
+]
+```
+
+## Reverse Bepper
+
+```codecard
+[{
+  "name": "Reverse Beeper 1",
+  "description": "Activity 1",
+  "url":"/coding/reverse-beeper-1",
+  "cardType": "example"
+}, {
+  "name": "Reverse Beeper 2",
+  "description": "Activity 2",
+  "url":"/coding/reverse-beeper-2",
+  "cardType": "example"
+}, {
+  "name": "Reverse Beeper 3",
+  "description": "Activity 3",
+  "url":"/coding/reverse-beeper-3",
+  "cardType": "example"
+}]
+```
+
+## Ignition
+
+```codecard
+[{
+  "name": "Ignition 1",
+  "description": "Activity 1",
+  "url":"/coding/ingition-1",
+  "cardType": "example"
+}, {
+  "name": "Ignition 2",
+  "description": "Activity 2",
+  "url":"/coding/ignition-2",
+  "cardType": "example"
+}, {
+  "name": "Ignition 3",
+  "description": "Activity 3",
+  "url":"/coding/ignition-3",
+  "cardType": "example"
+}]
+```
+
+## Cruise Control
+
+```codecard
+[{
+  "name": "Cruise Control 1",
+  "description": "Activity 1",
+  "url":"/coding/cruise-control-1",
+  "cardType": "example"
+}, {
+  "name": "Cruise Control 2",
+  "description": "Activity 2",
+  "url":"/coding/cruise-control-2",
+  "cardType": "example"
+}, {
+  "name": "Cruise Control 3",
+  "description": "Activity 3",
+  "url":"/coding/cruise-control-3",
+  "cardType": "example"
+}]
+```
+
+## Roaming
+
+```codecard
+[{
+  "name": "Roaming 1",
+  "description": "Activity 1",
+  "url":"/coding/roaming-1",
+  "cardType": "example"
+}, {
+  "name": "Roaming 2",
+  "description": "Activity 2",
+  "url":"/coding/roaming-2",
+  "cardType": "example"
+}]
+```
+
 ## Fun stuff
 
 ```codecard

docs/examples/core-set/gyroboy-blocks.md

@@ -108,7 +108,7 @@ function checkFallen() {
 // stop all motors and wait for touch button to be
 // pressed
 function stop() {
-    motors.stopAllMotors()
+    motors.stopAll()
     state = 0
     moods.knockedOut.show();
     sensors.touch3.pauseUntil(ButtonEvent.Pressed)

docs/examples/core-set/gyroboy-labview.md

@@ -144,7 +144,7 @@ loops.forever(function () {
         let p = 5 - (t2 - t1);
         loops.pause(Math.max(1, p))
     }
-    motors.stopAllMotors()
+    motors.stopAll()
     st = 0;
     brick.setStatusLight(StatusLight.RedPulse);
     brick.showImage(images.eyesKnockedOut)

docs/examples/gyro-boy-labview.md

@@ -144,7 +144,7 @@ loops.forever(function () {
         let p = 5 - (t2 - t1);
         loops.pause(Math.max(1, p))
     }
-    motors.stopAllMotors()
+    motors.stopAll()
     st = 0;
     brick.setStatusLight(StatusLight.RedPulse);
     brick.showImage(images.eyesKnockedOut)

docs/getting-started.md

@@ -0,0 +1,22 @@
+# Getting Started
+
+## Projects
+
+```codecard
+[
+{
+    "name": "Try",
+    "imageUrl": "/static/lessons/try.png",
+    "description": "TBD",
+    "url": "/getting-started/try",
+    "cardType": "side"
+},
+{
+    "name": "use",
+    "imageUrl": "/static/lessons/use.png",
+    "description": "TBD",
+    "url": "/getting-started/use",
+    "cardType": "side"
+}
+]
+```

docs/lessons/line-detection.md

@@ -81,7 +81,7 @@ Study the program...what do you think the program will do?
 motors.largeBC.steer(0, 20)
 while (true) {
     sensors.color3.pauseForColor(ColorSensorColor.Red)
-    motors.stopAllMotors()
+    motors.stopAll()
 }
 ```
 
@@ -148,7 +148,7 @@ while (true) {
     motors.largeBC.steer(0, 20)
     while (true) {
         sensors.color3.pauseForColor(ColorSensorColor.Red)
-        motors.stopAllMotors()
+        motors.stopAll()
     }
 }
 ```
@@ -162,7 +162,7 @@ while (true) {
     motors.largeBC.steer(0, 20)
     while (true) {
         sensors.color3.pauseForColor(ColorSensorColor.Red)
-        motors.stopAllMotors()
+        motors.stopAll()
     }
     while (true) {
         
@@ -183,7 +183,7 @@ while (true) {
     motors.largeBC.steer(0, 20)
     while (true) {
         sensors.color3.pauseForColor(ColorSensorColor.Red)
-        motors.stopAllMotors()
+        motors.stopAll()
     }
     while (true) {
         sensors.color3.pauseForColor(ColorSensorColor.Red)

docs/lessons/make-it-move-tutorial.md

@@ -51,7 +51,7 @@ The ``||motors:tank large B+C||`` block will run for `9` rotations when the **ce
 
 ```blocks
 motors.largeBC.tank(-60, 60, 9, MoveUnit.Rotations)
-motors.stopAllMotors()
+motors.stopAll()
 ```
 
 ## Program 3 @fullscreen
@@ -63,7 +63,7 @@ The ``||motors:tank large B+C||`` will run for `9` rotations when the **center**
 
 ```blocks
 motors.largeBC.tank(-60, 60, 9, MoveUnit.Rotations)
-motors.stopAllMotors()
+motors.stopAll()
 brick.showString("30 cm", 1)
 ```
 

docs/maker.md

@@ -9,39 +9,12 @@ These six activities require the LEGO® MINDSTORMS® Education EV3 Core Set (455
 ```codecard
 [
 {
-  "name": "Sound Machine",
+  "name": "Make A Sound Machine",
   "description": "Create instruments with your EV3 Brick!",
   "url":"/maker/sound-machine",
   "cardType": "example",
-  "imageUrl": "/static/maker/sound-machine.png"
-},
-{
-  "name": "Sound Of Color",
-  "description": "Play different sounds based on the color",
-  "url":"/maker/sound-of-color",
-  "cardType": "example",
-  "imageUrl": "/static/maker/sound-of-color.png"
-},
-{
-  "name": "Security Gadget",
-  "description": "Raise the alarm when your brick is lifted!",
-  "url":"/maker/security-gadget",
-  "cardType": "example",
-  "imageUrl": "/static/maker/security-gadget.png"
-},
-{
-  "name": "Intruder Detector",
-  "description": "Raise the alarm when an intruder sneaks in",
-  "url":"/maker/intruder-detector",
-  "cardType": "example",
-  "imageUrl": "/static/maker/intruder-detector.png"
-},
-{
-  "name": "Puppet",
-  "description": "Build an automated puppet",
-  "url":"/maker/puppet",
-  "cardType": "example",
-  "imageUrl": "/static/maker/puppet.png"
+  "imageUrl": "/static/maker/sound-machine.png",
+  "cardType": "side"  
 }
 ]
 ```

docs/reference.md

@@ -3,7 +3,7 @@
 ```namespaces
 brick.showMood(moods.sleeping);
 sensors.color(null);
-motors.stopAllMotors();
+motors.stopAll();
 ```
 
 ## See Also

docs/reference/motors.md

@@ -12,7 +12,7 @@ motors.largeA.setInverted(true)
 motors.largeA.setRegulated(false)
 motors.largeA.stop()
 motors.largeA.reset()
-motors.stopAllMotors()
+motors.stopAll()
 ```
 ## Counters
 

docs/reference/motors/stop-all.md

@@ -3,7 +3,7 @@
 Stops all motors currently running on the brick.
 
 ```sig
-motors.stopAllMotors();
+motors.stopAll();
 ```
 
 The motors stops but any motion caused from previously running the motors continues until it runs down. If you are driving your brick and then stop the motors, it will coast for awhile before stopping. 
@@ -15,7 +15,7 @@ Tank the @boardname@ forward at half speed for 5 seconds and then stop.
 ```blocks
 motors.largeAB.tank(50, 50);
 loops.pause(5000);
-motors.stopAllMotors();
+motors.stopAll();
 ```
 
 ## See also

docs/reference/motors/synced/steer.md

@@ -76,7 +76,7 @@ for (let i = 0; i < 4; i++) {
     motors.largeBC.steer(-30, 30)
     loops.pause(5000)
 }
-motors.stopAllMotors()
+motors.stopAll()
 ```
 
 ## See also

docs/reference/motors/synced/tank.md

@@ -46,7 +46,7 @@ motors.largeAB.tank(75, 75)
 loops.pause(10000)
 motors.largeAB.tank(-55, -55)
 loops.pause(10000)
-motors.stopAllMotors()
+motors.stopAll()
 ```
 
 ### Slip steer
@@ -73,7 +73,7 @@ Run both motors in opposite directions to spin the brick around to the left.
 ```blocks
 motors.largeAB.tank(-30, 30)
 loops.pause(5000)
-motors.stopAllMotors()
+motors.stopAll()
 ```
 
 ## See also

docs/reference/sensors.md

@@ -1,9 +1,26 @@
 # Sensors
 
+## Touch
+
+```cards
+sensors.touch1.onEvent(ButtonEvent.Pressed, function () {})
+sensors.touch1.pauseUntil(ButtonEvent.Pressed)
+sensors.touch1.wasPressed()
+sensors.touch1.isPressed()
+```
+
 ## Gyro
 
 ```cards
 sensors.gyro1.angle();
 sensors.gyro1.rate();
 sensors.gyro1.reset();
-```
+```
+
+## Ultrasonic
+
+```cards
+sensors.ultrasonic4.onEvent(UltrasonicSensorEvent.ObjectDetected, function () {});
+sensors.ultrasonic1.distance();
+sensors.ultrasonic1.pauseUntil(UltrasonicSensorEvent.ObjectDetected);
+```

docs/static/backgrounds/simulator.svg

@@ -9,14 +9,14 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="101.07757"
-   height="100.57249"
-   viewBox="0 0 101.07757 100.57249"
+   width="76.47757"
+   height="75.972496"
+   viewBox="0 0 76.477571 75.972499"
    id="svg4138"
    version="1.1"
-   inkscape:version="0.91 r13725"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
    sodipodi:docname="simulator.svg"
-   inkscape:export-filename="/Users/sam/pxt-ev3/docs/static/backgrounds/simulator.png"
+   inkscape:export-filename="C:\Users\samelh\pxt-ev3\docs\static\backgrounds\simulator.png"
    inkscape:export-xdpi="50.11311"
    inkscape:export-ydpi="50.11311">
   <defs
@@ -29,20 +29,20 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:zoom="4"
-     inkscape:cx="134.33221"
-     inkscape:cy="8.1953909"
+     inkscape:cx="60.782211"
+     inkscape:cy="-4.104587"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
-     fit-margin-top="28.3"
-     fit-margin-left="28.3"
-     fit-margin-right="28.3"
-     fit-margin-bottom="28.3"
+     fit-margin-top="16"
+     fit-margin-left="16"
+     fit-margin-right="16"
+     fit-margin-bottom="16"
      units="px"
-     inkscape:window-width="2556"
-     inkscape:window-height="1395"
-     inkscape:window-x="4"
-     inkscape:window-y="1"
+     inkscape:window-width="3000"
+     inkscape:window-height="1875"
+     inkscape:window-x="-13"
+     inkscape:window-y="-13"
      inkscape:window-maximized="1" />
   <metadata
      id="metadata4143">
@@ -60,9 +60,9 @@
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-68.659229,-124.25339)">
+     transform="translate(-80.959229,-136.55339)">
     <ellipse
-       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.31372549"
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.47058824"
        id="path4699"
        cx="119.19801"
        cy="174.53964"

editor/extension.ts

@@ -73,7 +73,7 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
                                 <span class="ui blue circular label">2</span>
                                 <strong>${lf("Make sure you have the latest EV3 firmware")}</strong>
                                 <br/>
-                                <a href="" target="_blank">${lf("Click here to update to latest firmware")}</a>
+                                <a href="https://ev3manager.education.lego.com/" target="_blank">${lf("Click here to update to latest firmware")}</a>
                             </div>
                         </div>
                     </div>

libs/color-sensor/color.ts

@@ -19,22 +19,22 @@ enum LightIntensityMode {
 }
 
 const enum ColorSensorColor {
-    //% block="none" blockIdentity=sensors.color
+    //% block="none" jres=colors.none
     None,
-    //% block="black" blockIdentity=sensors.color
+    //% block="black" jres=colors.black
     Black,
-    //% block="blue" blockIdentity=sensors.color
+    //% block="blue" jres=colors.blue
     Blue,
-    //% block="green" blockIdentity=sensors.color
+    //% block="green" jres=colors.green
     Green,
-    //% block="yellow" blockIdentity=sensors.color
+    //% block="yellow" jres=colors.yellow
     Yellow,
-    //% block="red" blockIdentity=sensors.color
+    //% block="red" jres=colors.red
     Red,
-    //% block="white" blockIdentity=sensors.color
+    //% block="white" jres=colors.white
     White,
-    //% block="brown" blockIdentity=sensors.color
-    Brown,
+    //% block="brown" jres=colors.brown
+    Brown
 }
 
 enum LightCondition {
@@ -117,6 +117,11 @@ namespace sensors {
         //% sensor.fieldEditor="ports"
         //% weight=100 blockGap=12
         //% group="Color Sensor"
+        //% color.fieldEditor="gridpicker"
+        //% color.fieldOptions.columns=4 
+        //% color.fieldOptions.tooltips=true
+        //% color.fieldOptions.hideRect=true
+        //% color.fieldOptions.width=268
         onColorDetected(color: ColorSensorColor, handler: () => void) {
             this.setMode(ColorSensorMode.Color)
             const v = this._colorEventValue(<number>color);
@@ -137,6 +142,11 @@ namespace sensors {
         //% sensor.fieldEditor="ports"
         //% weight=99 blockGap=8
         //% group="Color Sensor"
+        //% color.fieldEditor="gridpicker"
+        //% color.fieldOptions.columns=4 
+        //% color.fieldOptions.tooltips=true
+        //% color.fieldOptions.hideRect=true
+        //% color.fieldOptions.width=268
         pauseForColor(color: ColorSensorColor) {
             this.setMode(ColorSensorMode.Color);
             if (this.color() != color) {

libs/color-sensor/colors.jres

@@ -0,0 +1,30 @@
+{
+  "*": {
+    "namespace": "colors",
+    "dataEncoding": "base64"
+  },
+  "black": {
+    "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALMw9IgAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAG0lEQVRYR+3BgQAAAADDoPlT3+AEVQAAAABXDRBAAAFce08FAAAAAElFTkSuQmCC"
+  },
+  "blue": {
+    "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMczaloAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAG0lEQVRYR+3BgQAAAADDoPlT3+AEVQAAAABXDRBAAAFce08FAAAAAElFTkSuQmCC"
+  },
+  "brown": {
+    "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURdm7ewAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANirJbgAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAG0lEQVRYR+3BgQAAAADDoPlT3+AEVQAAAABXDRBAAAFce08FAAAAAElFTkSuQmCC"
+  },
+  "green": {
+    "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQCZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFempu0AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAG0lEQVRYR+3BgQAAAADDoPlT3+AEVQAAAABXDRBAAAFce08FAAAAAElFTkSuQmCC"
+  },
+  "none": {
+    "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAwBQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAszD0iAAAAQB0Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AFP3ByUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAALklEQVRYR+3MQQ0AIAADMfybHjkN/EgroGePBIIIBBEIIhBEIIhAEIEggg+C7QKnC/DiLFihnAAAAABJRU5ErkJggg=="
+  },
+  "red": {
+    "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABeJmVUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAG0lEQVRYR+3BgQAAAADDoPlT3+AEVQAAAABXDRBAAAFce08FAAAAAElFTkSuQmCC"
+  },
+  "white": {
+    "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsjt+EAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAG0lEQVRYR+3BgQAAAADDoPlT3+AEVQAAAABXDRBAAAFce08FAAAAAElFTkSuQmCC"
+  },
+  "yellow": {
+    "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURf//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH8gKTMAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAG0lEQVRYR+3BgQAAAADDoPlT3+AEVQAAAABXDRBAAAFce08FAAAAAElFTkSuQmCC"
+  }
+}

libs/color-sensor/pxt.json

@@ -3,6 +3,7 @@
     "description": "Color Sensor support",
     "files": [
         "README.md",
+        "colors.jres",
         "color.ts"
     ],
     "testFiles": [

libs/core/buttons.ts

@@ -161,7 +161,7 @@ namespace brick {
         // this needs to be done in query(), which is run without the main JS execution mutex
         // otherwise, while(true){} will lock the device
         if (ret & DAL.BUTTON_ID_ESCAPE) {
-            motors.stopAllMotors(); // ensuring that all motors are off
+            motors.stopAll(); // ensuring that all motors are off
             control.reset()
         }
         return ret

libs/core/output.ts

@@ -113,8 +113,8 @@ namespace motors {
     //% blockId=motorStopAll block="stop all motors"
     //% weight=1
     //% group="Move"
-    //% help=motors/stop-all-motors
-    export function stopAllMotors() {
+    //% help=motors/stop-all
+    export function stopAll() {
         const b = mkCmd(Output.ALL, DAL.opOutputStop, 0)
         writePWM(b)
     }

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

@@ -0,0 +1,13 @@
+# Gyro sensor
+
+```cards
+sensors.gyro1.angle();
+sensors.gyro1.rate();
+sensors.gyro1.reset();
+```
+
+## See Also
+
+[angle](/reference/sensors/gyro/angle),
+[rate](/reference/sensors/gyro/rate),
+[reset](/reference/sensors/gyro/reset)

libs/tests/targetoverrides.ts

@@ -3,10 +3,10 @@ tests.onEvent(TestEvent.RunSetUp, function() {
     console.sendToScreen();
 })
 tests.onEvent(TestEvent.TestSetUp, function() {
-    motors.stopAllMotors();
+    motors.stopAll();
     motors.resetAllMotors();
 })
 tests.onEvent(TestEvent.TestTearDown, function() {
-    motors.stopAllMotors();
+    motors.stopAll();
     motors.resetAllMotors();
 })

libs/touch-sensor/docs/reference/sensors/touch-sensor/is-pressed.md

@@ -1,5 +1,18 @@
 # is Pressed
 
+Check to see if a touch sensor is currently pressed or not.
+
+```sig
+sensors.touch1.isPressed()
+```
+## Returns
+
+* a [boolean](/types/boolean) value that is `true` if the sensor is currently pressed. It's `false` if the sensor is not pressed.
+
+## Example
+
+If the touch sensor ``touch 1`` is pressed, show a `green` status light. Otherwise, set the status light to `orange`.
+
 ```blocks
 loops.forever(function () {
     if (sensors.touch1.isPressed()) {
@@ -8,4 +21,8 @@ loops.forever(function () {
         brick.setStatusLight(StatusLight.Orange)
     }
 })
-```
+```
+
+## See also
+
+[was pressed](/reference/sensors/touch-sensor/was-pressed), [on event](/reference/sensors/touch-sensor/on-event)

libs/touch-sensor/docs/reference/sensors/touch-sensor/on-event.md

@@ -1,16 +1,33 @@
-# On Event
+# on Event
+
+Run some code when a touch sensor is pressed, bumped, or released.
 
 ```sig
-sensors.touch1.onEvent(ButtonEvent.Released, function () { })
+sensors.touch1.onEvent(ButtonEvent.Bumped, function () {
+
+});
 ```
 
-# Parameters
+## Parameters
 
-## Examples
+* **ev**: the touch sensor action to run some code for. The the touch actions (events) are:
+> * ``pressed``: the sensor was pressed, or pressed and released
+> * ``bumped``: the sensor was just bumped
+> * ``released``: the sensor was just released
+* **body**: the code you want to run when something happens to the touch sensor.
 
+## Example
+
+Check for an event on touch sensor ``touch 1``. Put an expression on the screen when the senosr is released.
 
 ```blocks
 sensors.touch1.onEvent(ButtonEvent.Released, function () {
     brick.showImage(images.expressionsSick)
 })
 ```
+
+### See also
+
+[is pressed](/reference/sensors/touch-sensor/is-pressed),
+[was pressed](/reference/sensors/touch-sensor/was-pressed),
+[pause until](/reference/sensors/touch-sensor/pause-until)

libs/touch-sensor/docs/reference/sensors/touch-sensor/pause-until.md

@@ -0,0 +1,37 @@
+# pause Until
+
+Make your program wait until an event at a touch sensor happens.
+
+```sig
+sensors.touch1.pauseUntil(ButtonEvent.Bumped);
+```
+
+## Parameters
+
+* **ev**: the touch sensor action to wait for. The the touch actions (events) are:
+> * ``pressed``: the sensor was pressed, or pressed and released
+> * ``bumped``: the sensor was just bumped
+> * ``released``: the sensor was just released
+
+## Example
+
+Wait for a bump to touch sensor `touch 1` before continuing with displaying a message on the screen.
+
+```blocks
+let waitTime = 0;
+brick.showString("We're going to wait", 1);
+brick.showString("for you to bump the", 2);
+brick.showString("touch sensor on port 1", 3);
+waitTime = control.millis();
+sensors.touch1.pauseUntil(ButtonEvent.Bumped);
+brick.clearScreen();
+if (control.millis() - waitTime > 5000) {
+    brick.showString("Ok, that took awhile!", 1)
+} else {
+    brick.showString("Ah, you let go!", 1)
+}
+```
+
+## See also
+
+[on event](/reference/sensors/touch-sensor/on-event)

libs/touch-sensor/docs/reference/sensors/touch-sensor/was-pressed.md

@@ -1,5 +1,21 @@
 # was Pressed
 
+See if a touch sensor was pressed since the last time it was checked.
+
+```sig
+sensors.touch1.wasPressed()
+```
+
+If a touch sensor was pressed, then that event is remembered. Once you check if a touch sensor **was pressed**, that status is set back to `false`. If you check again before the sensor is touched another time, the **was pressed** status is `false`. Only when the sensor is touched will the **was pressed** status go to `true`.
+
+## Returns
+
+* a [boolean](/types/boolean) value that is `true` if the sensor is was pressed before. It's `false` if the sensor was not pressed.
+
+## Example
+
+If the touch sensor ``touch 1`` was pressed, show a `green` status light. Otherwise, set the status light to `orange`.
+
 ```blocks
 loops.forever(function () {
     if (sensors.touch1.wasPressed()) {
@@ -7,5 +23,10 @@ loops.forever(function () {
     } else {
         brick.setStatusLight(StatusLight.Orange)
     }
+    loops.pause(500)
 })
-```
+```
+
+## See also
+
+[is pressed](/reference/sensors/touch-sensor/is-pressed), [on event](/reference/sensors/touch-sensor/on-event)

libs/touch-sensor/touch.ts

@@ -29,7 +29,7 @@ namespace sensors {
          * @param event the kind of button gesture that needs to be detected
          * @param body code to run when the event is raised
          */
-        //% help=input/touch-sensor/on-event
+        //% help=sensors/touch-sensor/on-event
         //% blockId=touchEvent block="on %sensor|%event"
         //% parts="touch"
         //% blockNamespace=sensors
@@ -45,7 +45,7 @@ namespace sensors {
          * @param sensor the touch sensor that needs to be clicked or used
          * @param event the kind of button gesture that needs to be detected
          */
-        //% help=input/touch-sensor/pause-until
+        //% help=sensors/touch-sensor/pause-until
         //% blockId=touchWaitUntil block="pause until %sensor|%event"
         //% parts="touch"
         //% blockNamespace=sensors
@@ -60,7 +60,7 @@ namespace sensors {
          * Check if touch sensor is touched.
          * @param sensor the port to query the request
          */
-        //% help=input/touch-sensor/is-pressed
+        //% help=sensors/touch-sensor/is-pressed
         //% block="%sensor|is pressed"
         //% blockId=touchIsPressed
         //% parts="touch"
@@ -76,7 +76,7 @@ namespace sensors {
          * Check if touch sensor is touched since it was last checked.
          * @param sensor the port to query the request
          */
-        //% help=input/touch-sensor/was-pressed
+        //% help=sensors/touch-sensor/was-pressed
         //% block="%sensor|was pressed"
         //% blockId=touchWasPressed
         //% parts="touch"

libs/ultrasonic-sensor/docs/reference/sensors/ultrasonic.md

@@ -0,0 +1,13 @@
+# Ultrasonic sensor
+
+```cards
+sensors.ultrasonic4.onEvent(UltrasonicSensorEvent.ObjectDetected, function () {});
+sensors.ultrasonic1.distance();
+sensors.ultrasonic1.pauseUntil(UltrasonicSensorEvent.ObjectDetected);
+```
+
+## See Also
+
+[on event](/reference/sensors/ultrasonic/on-event),
+[distance](reference/sensors/ultrasonic/distance),
+[pause until](reference/sensors/ultrasonic/pause-until)

libs/ultrasonic-sensor/docs/reference/sensors/ultrasonic/distance.md

@@ -0,0 +1,30 @@
+# distance
+
+The distance of an object detected by the ultrasonic sensor.
+
+```sig
+sensors.ultrasonic1.distance()
+```
+
+The distance value returned is the number of centimeters to the object that the sensor is currently detecting.
+
+## Returns
+
+* a [number](/types/number) that is the distance of the object detected by the ultrasonic sensor in centimeters.
+
+
+## Example
+
+When the ultrasonic sensor on port 4 detects a far object, display its distance on the screen.
+
+```blocks
+sensors.ultrasonic4.onEvent(UltrasonicSensorEvent.ObjectFar, function () {
+    brick.showString("Object detected at:", 1)
+    brick.showNumber(sensors.ultrasonic4.distance(), 2)
+    brick.showString("centimeters", 3)
+})
+```
+
+## See also
+
+[on event](/reference/sensors/ultrasonic/on-event), [pause until](/reference/sensors/ultrasonic/pause-until)

libs/ultrasonic-sensor/docs/reference/sensors/ultrasonic/on-event.md

@@ -0,0 +1,39 @@
+# on Event
+
+Run some code when an object is detected by the ultrasonic sensor.
+
+```sig
+sensors.ultrasonic1.pauseUntil(UltrasonicSensorEvent.ObjectDetected);
+```
+
+How an object is detected depends on the distance and movement _thresholds_ set for the sensor. A threshold is a number that is some distance in centimeters or the strength of ultrasonic sound. You can set a distance to detect something that is far, near, or is sending out ultrasound (like the sensor of another robot in the area). The three thresholds you can set are:
+
+* **near**: a distance to set to detect objects coming close
+* **far**: a distance to set to detect objects farther away but not as close as the **near** threshold
+* **detected**: the strength of ultrasound to needed to detect presence of another ultrasonic sensor
+
+Both **near** and **far** have distance thresholds set in centimeters. The **detect** threshold is a value of strength the ultrasonic sound in decibels.
+
+## Parameters
+
+* **event**: the object detection action to wait for. The detection types (events) are:
+> * ``object detected``: some other object is sending out an ultrasonic sound
+> * ``object near``: the sensor detected something within the distance of the near threshold
+> * ``object far``: the sensor detected somethin within the distance of the far threshold
+* **body**: the code you want to run when something happens to the touch sensor.
+
+## Example
+
+When the ultrasonic sensor on port 4 detects a far object, display its distance on the screen.
+
+```blocks
+sensors.ultrasonic4.onEvent(UltrasonicSensorEvent.ObjectFar, function () {
+    brick.showString("Object detected at:", 1)
+    brick.showNumber(sensors.ultrasonic4.distance(), 2)
+    brick.showString("centimeters", 3)
+})
+```
+
+## See also
+
+[pause until](/reference/sensors/ultrasonic/pause-until)

libs/ultrasonic-sensor/docs/reference/sensors/ultrasonic/pause-until.md

@@ -0,0 +1,38 @@
+# pause Until
+
+Make your program wait until an some object is detected in proximity of the sensor.
+
+```sig
+sensors.ultrasonic1.pauseUntil(UltrasonicSensorEvent.ObjectDetected);
+```
+
+How an object is detected depends on the distance and movement _thresholds_ set for the sensor. A threshold is a number that is some distance in centimeters or the strength of ultrasonic sound. You can set a distance to detect something that is far, near, or is sending out ultrasound (like the sensor of another robot in the area). The three thresholds you can set are:
+
+* **near**: a distance to set to detect objects coming close
+* **far**: a distance to set to detect objects farther away but not as close as the **near** threshold
+* **detected**: the strength of ultrasound to needed to detect presence of another ultrasonic sensor
+
+Both **near** and **far** have distance thresholds set in centimeters. The **detect** threshold is a value of strength the ultrasonic sound in decibels.
+
+## Parameters
+
+* **event**: the object detection action to wait for. The detection types (events) are:
+> * ``object detected``: some other object is sending out an ultrasonic sound
+> * ``object near``: the sensor detected something within the distance of the near threshold
+> * ``object far``: the sensor detected somethin within the distance of the far threshold
+
+## Example
+
+Wait for another object sending out ultrasonic sound. Show a message on the screen when it's dectected.
+
+```blocks
+brick.showString("Waiting for another", 1);
+brick.showString("robot to appear...", 2);
+sensors.ultrasonic1.pauseUntil(UltrasonicSensorEvent.ObjectDetected);
+brick.showString("Hey, I just heard", 1)
+brick.showString("Something!", 2);
+```
+
+## See also
+
+[on event](/reference/sensors/ultrasonic/on-event)

libs/ultrasonic-sensor/ultrasonic.ts

@@ -41,7 +41,7 @@ namespace sensors {
          * Registers code to run when the given color is close
          * @param handler the code to run when detected
          */
-        //% help=input/ultrasonic/on
+        //% help=sensors/ultrasonic/on-event
         //% blockId=ultrasonicOn
         //% block="on %sensor|%event"
         //% parts="ultrasonicsensor"
@@ -56,7 +56,7 @@ namespace sensors {
         /**
          * Waits for the event to occur
          */
-        //% help=input/ultrasonic/wait
+        //% help=sensors/ultrasonic/pause-until
         //% block="pause until %sensor| %event"
         //% blockId=ultrasonicWait
         //% parts="ultrasonicsensor"
@@ -72,7 +72,7 @@ namespace sensors {
          * Gets the distance from the sonar in centimeters
          * @param sensor the ultrasonic sensor port
          */
-        //% help=input/ultrasonic/distance
+        //% help=sensors/ultrasonic/distance
         //% block="%sensor|distance"
         //% blockId=sonarGetDistance
         //% parts="ultrasonicsensor"

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "0.0.97",
+  "version": "0.0.100",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "0.0.97",
+  "version": "0.0.100",
   "description": "LEGO Mindstorms EV3 for Microsoft MakeCode",
   "private": true,
   "keywords": [
@@ -21,6 +21,7 @@
   "files": [
     "README.md",
     "pxtarget.json",
+    "targetconfig.json",
     "built/*.js",
     "built/*.json",
     "built/*.d.ts",
@@ -45,7 +46,7 @@
   },
   "dependencies": {
     "pxt-common-packages": "0.19.1",
-    "pxt-core": "3.4.1"
+    "pxt-core": "3.4.3"
   },
   "scripts": {
     "test": "node node_modules/pxt-core/built/pxt.js travis"

pxtarget.json

@@ -38,7 +38,7 @@
         "packages": true,
         "sharing": true,
         "publishing": true,
-        "importing": false,
+        "importing": true,
         "preferredPackages": [],
         "githubPackages": true
     },
@@ -127,7 +127,8 @@
         "invertedMenu": false,
         "invertedMonaco": false,
         "monacoToolbox": true,
-        "invertedToolbox": true,
+        "invertedToolbox": false,
+        "coloredToolbox": true,
         "hasAudio": true,
         "usbHelp": [],
         "extendEditor": true,
@@ -162,5 +163,5 @@
             "editor.background": "#ecf6ff"
         }
     },
-    "ignoreDocsErrors": false
+    "ignoreDocsErrors": true
 }

targetconfig.json

@@ -8,8 +8,9 @@
         ]
     },
     "galleries": {
-        "Maker Activities": "maker",
-        "Coding Activites": "coding",
-        "Lessons": "lessons"
+        "Getting Started": "getting-started",
+        "Design Engineering": "design-engineering",
+        "Coding": "coding",
+        "Maker": "maker"
     }
 }

theme/blockly.less

@@ -31,6 +31,7 @@ span.blocklyTreeIcon {
     /*box-shadow: inset 0px 0px 0px 2px #D3A805;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;*/
+    box-shadow: 3px 0 1px -2px @legoGreyLight;
 }
 
 div.blocklyTreeRow {
@@ -39,10 +40,14 @@ div.blocklyTreeRow {
     /*-webkit-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
     -moz-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
     box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);*/
+
+    border: none !important;
+    border-bottom: 1px solid #EBEBEB !important;
 }
 
 div.blocklyTreeSeparator {
-    border-bottom: solid #CEA403 2px;
+    border: none;
+    /*border-bottom: solid #CEA403 2px;*/
 }
 
 /* Remove shadow around blockly blocks */
@@ -66,9 +71,9 @@ span.blocklyTreeLabel {
 }
 .blocklySearchInputField {
     border-radius: 1rem !important;
+    border: 1px solid #ebebeb !important;
 }
 
-
 /* Square shaped corners */
 .blocklyDropDownDiv {
     border-radius: 0px !important;

theme/site/collections/menu.overrides

@@ -8,6 +8,6 @@
 }
 
 #mainmenu {
-    background: #f4f7f9;
+    background: @legoGreyLight;
     border-bottom: 5px solid #00a5c8;
 }

theme/site/globals/site.variables

@@ -27,9 +27,11 @@
 @orange: #fa7f2a;
 @green: @brightYellowishGreen;
 
-@legoGreyLight: #eaeeef;
+@legoGreyLight: #F4F1F4;
 @legoGreyDark: #f4f7f9;
 
+@grey: @legoGreyLight;
+
 /* Lego official colors */
 
 /* Solid */
@@ -126,7 +128,7 @@
 --------------------*/
 
 @simulatorBackground: #D6EDFF; /* #FFF */ /* #fcfbfa; */
-@editorToolsBackground: #fff; /* #fcfbfa; */
+@editorToolsBackground: @legoGreyLight; /* #fff;*/ /* #fcfbfa; */
 @blocklySvgColor: #f9f9f9; /*#f2f6f8;*/ /*ecf6fe;*/ 
 
 @homeScreenBackground: #EAEEEF;
@@ -149,8 +151,8 @@
    Editor
 --------------------*/
 
-@blocklyToolboxColor: #FAC80A;
-@trashIconColor: white;
+@blocklyToolboxColor: #FFF; /*#FAC80A;*/
+@trashIconColor: #FAC80A; /*white*/
 
 
 /*-------------------

theme/style.less

@@ -29,11 +29,23 @@
     &:extend(.ui.primary.button all);
 }
 
-.ui.button.editortools-btn {
-    &:extend(.ui.blue.button all);
+@buttonBackgroundColor: white;
+@buttonForegroundColor: #5E5E5E;
+
+.ui.button.editortools-btn, .simtoolbar .ui.button,
+    .ui.button.collapse-button, .ui.button.collapsed-button {
+    background-color: @buttonBackgroundColor;
+    color: @buttonForegroundColor;
+    border: none !important;
+    box-shadow: none !important;
+}
+.ui.button.editortools-btn:hover, 
+.ui.button.editortools-btn:focus {
+    color: darken(@buttonForegroundColor, 0.2) !important;
 }
 
-.projectname-input {
+.ui.input.projectname-input input {
+    box-shadow: none; border: none !important;
 }
 
 .ui.button.getting-started-btn {
@@ -93,7 +105,7 @@
 }
 
 #downloadArea {
-    background: white;
+    background: @legoGreyLight;
 }
 
 /* Mobile */
@@ -109,15 +121,18 @@
 
 /* Small Monitor */
 @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
-    #editortools, #downloadArea {
-        background: #828A95;
-    }
+
 }
 
 /* Large Monitor */
 @media only screen and (min-width: @largeMonitorBreakpoint) {
-    #editortools, #downloadArea {
-        background: #828A95;
+
+}
+
+/* >= Small Monitor (Small Monitor + Large Monitor + Wide Monitor) */
+@media only screen and (min-width: @computerBreakpoint) {
+    .fullscreensim #boardview {    
+        background: @simulatorBackground data-uri("../docs/static/backgrounds/simulator.png") 0 0 repeat !important;
     }
 }
 /* Mobile, Tablet AND thin screen */