0.1.13

* renaming pauseforcolor to pause until color detected

* pauseForLight -> pauseUntilLightConditionDetected

* on light changed -> on light condition detected

* fixing docs

* docs tweaks

docs/SUMMARY.md

@@ -18,12 +18,9 @@
 
 * [Maker](/maker)
     * [Make a Sound Machine](/maker/sound-machine)
+    * [Make a Security Gadget](/maker/security-gadget)
 
 * [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)
     * [Three Point Turn 1](/coding/three-point-turn-1)
@@ -56,6 +53,7 @@
         * [show mood](/reference/brick/show-mood)
         * [show image](/reference/brick/show-image)
         * [clear screen](/reference/brick/clear-screen)
+        * [show ports](/reference/brick/show-ports)
         * [on event](/reference/brick/button/on-event)
         * [is pressed](/reference/brick/button/is-pressed)
         * [was pressed](/reference/brick/button/was-pressed)
@@ -71,7 +69,6 @@
         * [set regulated](/reference/motors/motor/set-regulated)
         * [tank](/reference/motors/synced/tank)
         * [steer](/reference/motors/synced/steer)
-        * [tacho](/reference/motors/motor/tacho)
         * [angle](/reference/motors/motor/angle)
         * [speed](/reference/motors/motor/speed)
         * [clear counts](/reference/motors/motor/clear-counts)
@@ -102,9 +99,9 @@
             * [set remote channel](/reference/sensors/beacon/set-remote-channel)
         * [Color](/reference/sensors/color-sensor)
             * [on color detected](/reference/sensors/color-sensor/on-color-detected)
-            * [pause for color](/reference/sensors/color-sensor/pause-for-color)
-            * [on light changed](/reference/sensors/color-sensor/on-light-changed)
-            * [pause for light](/reference/sensors/color-sensor/pause-for-light)
+            * [pause until color detected](/reference/sensors/color-sensor/pause-until-color-detected)
+            * [on-light-condition-detected](/reference/sensors/color-sensor/on-light-condition-detected)
+            * [pause until light condition detected](/reference/sensors/color-sensor/pause-until-light-condition-detected)
             * [color](/reference/sensors/color-sensor/color)
             * [light](/reference/sensors/color-sensor/ambient-light)
     * [Music](/reference/music)

docs/coding.md

@@ -7,19 +7,19 @@
 [
 {
   "name": "Autonomous Parking",
-  "description": "Design cars that can park by themselves",
+  "description": "Design cars that can park themselves safely without driver intervention.",
   "url":"/coding/autonomous-parking",
   "imageUrl": "/static/lessons/autonomous-parking.png",
   "cardType": "side"
 }, {
   "name": "Object Detection",
-  "description": "Design ways to avoid accidents between vehicles and objects",
+  "description": "Design ways to avoid accidents between vehicles and objects in the road.",
   "url":"/coding/object-detection",
   "imageUrl": "/static/lessons/object-detection.jpg",
   "cardType": "side"
 }, {
   "name": "Line Detection",
-  "description": "Improve driving safety by helping drivers stay on course",
+  "description": "Design ways to improve driving safety by helping to prevent drivers from falling asleep and causing an accident.",
   "url":"/coding/line-detection",
   "imageUrl": "/static/lessons/line-detection.jpg",
   "cardType": "side"

docs/coding/ignition.md

@@ -22,7 +22,7 @@ Play some motor sounds if touch sensor `1` is pressed at the same moment when an
 
 ```blocks
 while (true) {
-    if (sensors.touch1.wasPressed() &&
+    if (sensors.touch1.isPressed() &&
         sensors.ultrasonic4.distance() < 10) {
         music.playSoundEffectUntilDone(sounds.mechanicalMotorStart)
         music.playSoundEffectUntilDone(sounds.mechanicalMotorIdle);
@@ -38,8 +38,8 @@ Play some motor sounds if touch sensor `1` is pressed when both the `enter` butt
 ```blocks
 while (true) {
     if (sensors.ultrasonic4.distance() < 10 &&
-        sensors.touch1.wasPressed() &&
-        brick.buttonEnter.wasPressed()) {
+        sensors.touch1.isPressed() &&
+        brick.buttonEnter.isPressed()) {
         music.playSoundEffectUntilDone(sounds.mechanicalMotorStart)
         music.playSoundEffectUntilDone(sounds.mechanicalMotorIdle);
     }

docs/coding/light-the-way-1.md

@@ -1,7 +1,7 @@
 # Light the way Activity 1
 
 ```blocks
-sensors.color3.onLightChanged(LightIntensityMode.Ambient, LightCondition.Dark, function () {
+sensors.color3.onLightConditionDetected(LightIntensityMode.Ambient, LightCondition.Dark, function () {
     brick.showImage(images.objectsLightOn)
     pause(5000)
     brick.clearScreen()

docs/coding/light-the-way-2.md

@@ -1,10 +1,10 @@
 # Light the way Activity 2
 
 ```blocks
-sensors.color3.onLightChanged(LightIntensityMode.Ambient, LightCondition.Bright, function () {
+sensors.color3.onLightConditionDetected(LightIntensityMode.Ambient, LightCondition.Bright, function () {
     brick.clearScreen()
 })
-sensors.color3.onLightChanged(LightIntensityMode.Ambient, LightCondition.Dark, function () {
+sensors.color3.onLightConditionDetected(LightIntensityMode.Ambient, LightCondition.Dark, function () {
     brick.showImage(images.objectsLightOn)
 })
 ```

docs/coding/light-the-way-3.md

@@ -1,10 +1,10 @@
 # Light the way Activity 3
 
 ```blocks
-sensors.color3.onLightChanged(LightIntensityMode.Ambient, LightCondition.Bright, function () {
+sensors.color3.onLightConditionDetected(LightIntensityMode.Ambient, LightCondition.Bright, function () {
     brick.clearScreen()
 })
-sensors.color3.onLightChanged(LightIntensityMode.Ambient, LightCondition.Dark, function () {
+sensors.color3.onLightConditionDetected(LightIntensityMode.Ambient, LightCondition.Dark, function () {
     brick.showImage(images.objectsLightOn)
 })
 sensors.touch1.onEvent(ButtonEvent.Pressed, function () {

docs/coding/line-detection.md

@@ -54,7 +54,7 @@ loops.forever(function () {
 	
 })
 motors.largeBC.steer(0, 50)
-sensors.color3.pauseForColor(ColorSensorColor.Red)
+sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
 motors.stopAll()
 ```
 
@@ -70,7 +70,7 @@ motors.stopAll()
 ```blocks
 loops.forever(function () {
     motors.largeBC.steer(0, 50)
-    sensors.color3.pauseForColor(ColorSensorColor.Red)
+    sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
     motors.stopAll()
 })
 ```
@@ -94,9 +94,9 @@ Now add to your program and have your robot to drive forward again when the ligh
 ```blocks
 loops.forever(function () {
     motors.largeBC.steer(0, 50)
-    sensors.color3.pauseForColor(ColorSensorColor.Red)
+    sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
     motors.stopAll()
-    sensors.color3.pauseForColor(ColorSensorColor.Green)
+    sensors.color3.pauseUntilColorDetected(ColorSensorColor.Green)
 })
 ```
 
@@ -134,10 +134,10 @@ music.playSoundEffect(sounds.systemGeneralAlert)
 ```blocks
 loops.forever(function () {
     motors.largeBC.steer(-30, 20)
-    sensors.color3.pauseForColor(ColorSensorColor.Black)
+    sensors.color3.pauseUntilColorDetected(ColorSensorColor.Black)
     music.playSoundEffect(sounds.systemGeneralAlert)
     motors.largeBC.steer(30, 20)
-    sensors.color3.pauseForColor(ColorSensorColor.White)
+    sensors.color3.pauseUntilColorDetected(ColorSensorColor.White)
 })
 ```
 
@@ -185,11 +185,11 @@ if (true) {
 ```blocks
 forever(function () {
     while (true) {
-        sensors.color3.pauseForColor(ColorSensorColor.Black)
+        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Black)
         motors.largeBC.steer(-30, 50)
     }
     while (true) {
-        sensors.color3.pauseForColor(ColorSensorColor.White)
+        sensors.color3.pauseUntilColorDetected(ColorSensorColor.White)
         motors.largeBC.steer(30, 50)
     }
 })
@@ -204,10 +204,10 @@ Else the Color Sensor detects the color white, start motors ``B`` and ``C`` (dri
 ```blocks
 forever(function () {
     if (true) {
-        sensors.color3.pauseForColor(ColorSensorColor.Black)
+        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Black)
         motors.largeBC.steer(-30, 50)
     } else {
-        sensors.color3.pauseForColor(ColorSensorColor.White)
+        sensors.color3.pauseUntilColorDetected(ColorSensorColor.White)
         motors.largeBC.steer(30, 50)
     }
 })

docs/coding/traffic-lights-1.md

@@ -3,7 +3,7 @@
 ```blocks
 brick.buttonEnter.onEvent(ButtonEvent.Bumped, function () {
     motors.largeBC.tank(20, 20)
-    sensors.color3.pauseForColor(ColorSensorColor.Red)
+    sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
     motors.largeBC.tank(0, 0)
 })
 ```

docs/design-engineering.md

@@ -6,21 +6,21 @@
 [
     {
         "name": "Make It Move Without Wheels",
-        "description": "TBD",
+        "description": "Design, build and program a robot that can move itself using no wheels for locomotion.",
         "imageUrl": "/static/lessons/make-it-move-without-wheels.png",
         "url": "/design-engineering/make-it-move",
         "cardType": "side"
     },
     {
         "name": "Make It Smarter and Faster",
-        "description": "TBD",
+        "description": "Design, build and program a robotic creature that can sense its environment and respond by moving.",
         "imageUrl": "/static/lessons/make-it-smarter-and-faster.png",
         "url": "/design-engineering/make-it-smarter",
         "cardType": "side"
     },
     {
         "name": "Make a System that Communicates",
-        "description": "A robot that tells you what it is doing.",
+        "description": "Design, build and program a robotic system that follows a path and communicates its position at least twice along the way.",
         "imageUrl": "/static/lessons/make-a-system-that-communicates.png",
         "url": "/design-engineering/make-it-communicate",
         "cardType": "side"

docs/examples/line-follower-pid.md

@@ -14,7 +14,7 @@ v = sensors.color3.light(LightIntensityMode.Reflected)
 min = v
 max = v
 setpoint = v
-while (!(brick.buttonEnter.wasPressed())) {
+while (!(brick.buttonEnter.isPressed())) {
     brick.clearScreen()
     brick.showString("Move robot on terrain", 1)
     brick.showString("Press ENTER when done", 2)

docs/examples/print-ports.md

@@ -1,40 +0,0 @@
-
-# Print Ports
-
-```typescript
-/**
- * Print the port states on the screen
- */
-//% blockId=brickPrintPorts block="print ports"
-//% help=brick/print-ports
-//% weight=1 group="Screen"
-function printPorts() {
-    const col = 44;
-    clearScreen();
-
-    function scale(x: number) {
-        if (Math.abs(x) > 1000) return Math.round(x / 100) / 10 + "k";
-        return ("" + (x >> 0));
-    }
-
-    // motors
-    const datas = motors.getAllMotorData();
-    for(let i = 0; i < datas.length; ++i) {
-        const data = datas[i];
-        if (!data.actualSpeed && !data.count) continue;
-        const x = i * col;
-        print(`${scale(data.actualSpeed)}%`, x, brick.LINE_HEIGHT)
-        print(`${scale(data.count)}>`, x, 2 * brick.LINE_HEIGHT)
-        print(`${scale(data.tachoCount)}|`, x, 3 * brick.LINE_HEIGHT)
-    }
-
-    // sensors
-    const sis = sensors.internal.getActiveSensors();
-    for(let i =0; i < sis.length; ++i) {
-        const si = sis[i];
-        const x = (si.port() - 1) * col;
-        const v = si._query();
-        print(`${scale(v)}`, x, 9 * brick.LINE_HEIGHT)
-    }
-}
-```

docs/getting-started/try.md

@@ -135,7 +135,7 @@ Keeping the Large Motor connected to **Port D**, connect the Color Sensor to **P
 
 ```blocks
 brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
-    sensors.color3.pauseForColor(ColorSensorColor.Green)
+    sensors.color3.pauseUntilColorDetected(ColorSensorColor.Green)
     motors.largeD.run(50, 1, MoveUnit.Rotations)
 })
 ```
@@ -143,7 +143,7 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 * Using the same program, replace the ``||sensors:pause until touch 1||`` block with a ``||sensors:pause color sensor 3||`` for color block.
 
 ```block
-sensors.color3.pauseForColor(ColorSensorColor.Green)
+sensors.color3.pauseUntilColorDetected(ColorSensorColor.Green)
 ```
 
 * Select the color you want to detect (e.g., green).

docs/index-ref.json

@@ -1,3 +1,3 @@
 {
-    "appref": "v0"
+    "appref": "v0.1.11"
 }

docs/lessons/line-detection.md

@@ -60,18 +60,18 @@ while (true) {
 
 ### Step 3
 
-Place a ``||sensors:pause for color||`` from ``||sensors:Sensors||`` inside the ``||loops:while||`` loop block. Change the color to red.
+Place a ``||sensors:pause until color detected||`` from ``||sensors:Sensors||`` inside the ``||loops:while||`` loop block. Change the color to red.
  
 ```blocks
 motors.largeBC.steer(0, 20)
 while (true) {
-    sensors.color3.pauseForColor(ColorSensorColor.Red)
+    sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
 }
 ```
 
 ### Step 4
 
-Place a ``||motors:stop all motors||`` block under the ``||sensors:pause for color||`` block.
+Place a ``||motors:stop all motors||`` block under the ``||sensors:pause until color detected||`` block.
 
 Study the program...what do you think the program will do?
 
@@ -80,7 +80,7 @@ Study the program...what do you think the program will do?
 ```blocks
 motors.largeBC.steer(0, 20)
 while (true) {
-    sensors.color3.pauseForColor(ColorSensorColor.Red)
+    sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
     motors.stopAll()
 }
 ```
@@ -128,26 +128,26 @@ while (true) {
 
 ### Step 5
 
-Place a ``||sensors:pause for color||`` block from ``||sensors:Sensors||`` inside the ``||loops:while||`` loop block. Change the color to red.
+Place a ``||sensors:pause until color detected||`` block from ``||sensors:Sensors||`` inside the ``||loops:while||`` loop block. Change the color to red.
 
 ```blocks
 while (true) {
     motors.largeBC.steer(0, 20)
     while (true) {
-        sensors.color3.pauseForColor(ColorSensorColor.Red)
+        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
     }
 }
 ```
 
 ### Step 6
 
-Place a ``||motors:stop all motors||`` block under the ``||sensors:pause for color||`` block.  
+Place a ``||motors:stop all motors||`` block under the ``||sensors:pause until color detected||`` block.  
 
 ```blocks
 while (true) {
     motors.largeBC.steer(0, 20)
     while (true) {
-        sensors.color3.pauseForColor(ColorSensorColor.Red)
+        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
         motors.stopAll()
     }
 }
@@ -161,7 +161,7 @@ Place a ``||loops:while||`` loop block under the second ``||loops:while||`` loop
 while (true) {
     motors.largeBC.steer(0, 20)
     while (true) {
-        sensors.color3.pauseForColor(ColorSensorColor.Red)
+        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
         motors.stopAll()
     }
     while (true) {
@@ -172,7 +172,7 @@ while (true) {
 
 ### Step 8
 
-Place a ``||sensors:pause for color||`` block inside the new ``||loops:while||`` loop block. Change the color to red.
+Place a ``||sensors:pause unril color detected||`` block inside the new ``||loops:while||`` loop block. Change the color to red.
 
 What do you think the program will do?
 
@@ -182,11 +182,11 @@ What do you think the program will do?
 while (true) {
     motors.largeBC.steer(0, 20)
     while (true) {
-        sensors.color3.pauseForColor(ColorSensorColor.Red)
+        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
         motors.stopAll()
     }
     while (true) {
-        sensors.color3.pauseForColor(ColorSensorColor.Red)
+        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
     }
 }
 ```
@@ -208,16 +208,17 @@ Think about what you have learned, then document it. Describe your pseudocode fo
 ```blocks
 motors.largeBC.steer(0, 20)
 while (true) {
-sensors.color3.pauseForColor(ColorSensorColor.Yellow)
+sensors.color3.pauseUntilColorDetected(ColorSensorColor.Yellow)
 music.playSoundEffect(sounds.systemGeneralAlert)
 }
 while (true) {
-    while (true) {      sensors.color3.pauseForLight(LightIntensityMode.Reflected, LightCondition.Bright)
+    while (true) {      
+        sensors.color3.pauseUntilLightConditionDetected(LightIntensityMode.Reflected, LightCondition.Bright)
         motors.largeB.run(10)
         motors.largeC.run(-10)
     }
     while (true) {
-        sensors.color3.pauseForLight(LightIntensityMode.Reflected, LightCondition.Bright)
+        sensors.color3.pauseUntilLightConditionDetected(LightIntensityMode.Reflected, LightCondition.Bright)
         motors.largeA.run(-10)
         motors.largeA.run(10)
     }
@@ -234,12 +235,13 @@ You will need to constantly debug your program in order to make your robot trave
 
 ```blocks
 while (true) {
-    while (true) {   sensors.color3.pauseForLight(LightIntensityMode.Reflected, LightCondition.Bright)
+    while (true) {   
+        sensors.color3.pauseUntilLightDetected(LightIntensityMode.Reflected, LightCondition.Bright)
         motors.largeB.run(10)
         motors.largeC.run(-10)
     }
     while (true) {
-        sensors.color3.pauseForLight(LightIntensityMode.Reflected, LightCondition.Bright)
+        sensors.color3.pauseUntilLightDetected(LightIntensityMode.Reflected, LightCondition.Bright)
         motors.largeB.run(-10)
         motors.largeC.run(10)
     }

docs/lessons/make-a-security-gadget.md

@@ -1,139 +0,0 @@
-
-# Make a Security Gadget
-
-Invent a Security Gadget that will protect your belongings by warning you!
-
-![Maker – Make a Security Gadget Main Image](/static/lessons/make-a-security-gadget/lego-maker-security-detect.jpg)
-
-## Connect 
-
-Over time, people have come up with many different ways to help protect their personal belongings from theft. These inventions include simple alarm systems and even traps! 
-
-![Make a Security Gadget 3 Stock Footage Images](/static/lessons/make-a-security-gadget/three-stock.jpg)
-
-Look at the photos and think about:
-
-* What do you see?
-* Can you see any new design opportunities?
-* What problems can you see?
-* How could you make use of the LEGO bricks, the EV3 Programmable Brick, motors, and sensors?
-
-### Things You’ll Need
-
-* [LEGO MINDSTORMS Education EV3 Core Set](https://education.lego.com/enus/products/legomindstormseducationev3coreset/5003400)
-
-Additional materials to add to your Security Gadget:
-
-* String
-* Arts and crafts materials such as:
->* Cardboard
->* Construction paper
->* Pipe cleaners
->* Plastic or paper cups 
->* Recycled materials
->* Rubber bands
->* Wire
-
-### Prior Knowledge
-
-This activity uses sensor inputs. You may want to try the [Use](/getting-started/use) or [Object Detection](/coding/object-detection) activity before this one. Or, you can start out with this activity and tinker with coding sensor inputs on your own.
-
-## Contemplate
-
-Follow the steps of the [Maker Design Process](/lessons/classroom-management#design-process) for this lesson:
-
-![LEGO Education Maker Design Process](/static/lessons/common/lego-maker-design-process.jpg)
-
-### Defining the Problem
-
-1. What problems did you imagine? 
-2. Pick one problem and explain it to a partner.
-
-### Brainstorm
-
-Now that you have defined a problem, start to generate ideas for solving it. 
-
-### ~hint
-
-Some things to do while brainstorming:
-
-* Use the bricks from the LEGO set to help you brainstorm or sketch your ideas on paper.
-* The goal of brainstorming is to explore as many solutions as possible. You can use the tinkering examples in the Sample Solutions section below as inspiration for getting started.
-* Share your ideas and get some feedback. It may lead to more ideas!
-
-### ~ 
-
-### Define the Design Criteria
-
-1. You should have generated a number of ideas. Now select the best one to make. 
-2. Write out two or three specific design criteria your design must meet.
-
-### Go Make
-
-It is time to start making!
-
-* Use the components from the LEGO® MINDSTORMS EV3 Core Set and additional materials to make your chosen solution. 
-* Test and analyze your design as you go and record any improvements that you make. 
-
-### Review and Revise Your Solution
-
-* Have you managed to solve the problem that you defined? 
-* Look back at your design criteria. How well does your solution work? 
-* How can you improve your design?
-
-### Communicate Your Solution
-
-Now that you have finished you can:
-
-* Make a sketch or take a photo or video of your model.
-* Label the three most important parts and explain how they work.
-* Share your work with others.
-
-## Continue
-
-### Phone Protector - Sample Solution
-
-This example program combined with the small model will sound an alarm if someone picks it up. The program activates an alarm when an object is lifted from the Touch Sensor.
-
-![Security Gadget Tinkering Example #1 – Phone Stand](/static/lessons/make-a-security-gadget/lego-maker-security-gadget.jpg)
-
-#### Programming
-
-1. Drag a ``||sensors:pause until touch||`` block and place it inside the ``||loops:forever||`` loop.
-2. Drag a ``||music:play sound effect||`` block and place it below the ``||sensors:pause until||`` block.
-3. Change the sound effect to ``mechanical horn1``.
-
-```blocks
-forever(function () {
-    sensors.touch1.pauseUntil(ButtonEvent.Pressed)
-    music.playSoundEffect(sounds.mechanicalHorn1)
-})
-```
-
-Click **Download** and follow the instructions to get your code onto your EV3 Brick. Press the ``center`` button on the EV3 Brick to run the program.
-
-### Object Detection - Sample Solution
-
-This example program combined with the small model will sound an alarm if someone (or something) crosses its path! The program activates an alarm when an object moves in front of the Ultrasonic Sensor.
-
-![Security Gadget Tinkering Example #1 – Mouse detector](/static/lessons/make-a-security-gadget/lego-maker-security-detect.jpg)
-
-#### Programming
-
-1. Drag a ``||sensors:pause until ultrasonic||`` block and place it inside the ``||loops:forever||`` loop.
-2. Drag a ``||music:play sound effect||`` block and place it below the ``||sensors:pause until||`` block.
-3. Change the sound effect to ``mechanical horn1``.
-
-```blocks
-forever(function () {
-    sensors.ultrasonic4.pauseUntil(UltrasonicSensorEvent.ObjectDetected)
-    music.playSoundEffect(sounds.mechanicalHorn1)
-})
-```
-
-Click **Download** and follow the instructions to get your code onto your EV3 Brick. Press the ``center`` button on the EV3 Brick to run the program.
-
-### Well done!
-
-Click [here](/examples) to try out some more projects!
-

docs/lessons/make-a-sound-machine.md

@@ -1,164 +0,0 @@
-# Make a Sound Machine
-
-Make a Sound Machine that can play a rhythm, music or just noise!
-
-![Maker – Make a Sound Machine Main Image](/static/lessons/make-a-sound-machine/lego-maker-sound-machine-1.jpg)
-
-## Connect 
-
-Music is made up of a combination of sounds, notes and rhythm. A rhythm is a regular movement or repeated pattern of movements that can be used in many different ways. In mechanical machines, a rhythm can help keep a machine running smoothly. It can also be used to generate different sounds in music. 
-
-![Sound Machine 3 Stock Footage Images](/static/lessons/make-a-sound-machine/three-stock.jpg)
-
-Look at the photos and think about:
-
-* What do you see?
-* Can you see any new design opportunities?
-* What problems can you see?
-* How could you make use of the LEGO bricks, the EV3 Programmable Brick, motors, and sensors?
-
-### Things You’ll Need
-
-* [LEGO MINDSTORMS Education EV3 Core Set](https://education.lego.com/enus/products/legomindstormseducationev3coreset/5003400)
-
-Additional materials to add to your Sound Machine:
-
-* Small musical instruments, such as chimes, bells, and small drums
-* Arts and crafts materials such as:
->* Cardboard
->* Construction paper
->* Pipe cleaners
->* Plastic or paper cups 
->* Recycled materials
->* Rubber bands
->* Wire
-
-### Prior Knowledge
-
-This activity uses motor rotations and sensor inputs. You may want to try the [Use](/getting-started/use) or [Object Detection](/coding/object-detection) activity before this one. Or, you can start out with this activity and tinker with coding motor and sensor inputs on your own.
-
-## Contemplate
-
-Follow the steps of the [Maker Design Process](/lessons/classroom-management#design-process) for this lesson:
-
-![LEGO Education Maker Design Process](/static/lessons/common/lego-maker-design-process.jpg)
-
-### Defining the Problem
-
-1. What problems did you imagine? 
-2. Pick one problem and explain it to a partner.
-
-### Brainstorm
-
-Now that you have defined a problem, start to generate ideas for solving it. 
-
-### ~hint
-
-Some things to do while brainstorming:
-
-* Use the bricks from the LEGO set to help you brainstorm or sketch your ideas on paper.
-* The goal of brainstorming is to explore as many solutions as possible. You can use the tinkering examples in the Sample Solutions section below as inspiration for getting started.
-* Share your ideas and get some feedback. It may lead to more ideas!
-
-### ~
-
-### Define the Design Criteria
-
-* You should have generated a number of ideas. Now select the best one to make. 
-* Write out two or three specific design criteria your design must meet.
-
-### Go Make
-
-It is time to start making!
-
-* Use the components from the LEGO® MINDSTORMS EV3 Core Set and additional materials to make your chosen solution. 
-* Test and analyze your design as you go and record any improvements that you make. 
-
-### Review and Revise Your Solution
-
-* Have you managed to solve the problem that you defined? 
-* Look back at your design criteria. How well does your solution work? 
-* How can you improve your design?
-
-### Communicate Your Solution
-
-Now that you have finished you can:
-* Make a sketch or take a photo or video of your model.
-* Label the three most important parts and explain how they work.
-* Share your work with others.
-
-## Continue
-
-### Rhythm Maker - Sample Solution
-
-This example program combined with the small model will make a beat and rhythm on any surface when the program is run.
-
-![Sound Machine Tinkering Example](/static/lessons/make-a-sound-machine/lego-maker-sound-machine.jpg)
-
-#### Programming
-
-1. Drag a run ``||motors:large motor A||`` block inside the ``||loops:forever||`` loop.
-2. Press the **(+)**.
-3. Change the rotations to `2`.
-4. Drag a ``||loops:pause||`` block and place it under the motor block.
-5. Change the duration to ``200`` ms.
-6. Drag a ``||run large motor A||`` block inside the ``||loops:forever||`` loop.
-7. Press the **(+)**.
-8. Change the power to `100`.
-9. Change the rotations to `1`.
-
-```blocks
-forever(function () {
-    motors.largeA.run(50, 2, MoveUnit.Rotations)
-    pause(200)
-    motors.largeA.run(100, 1, MoveUnit.Rotations)
-})
-```
-
-Click **Download** and follow the instructions to get your code onto your EV3 Brick. Press the ``center`` button on the EV3 Brick to run the program.
-
-### Color Sensor Sounds - Sample Solution
-
-You can also tinker with the use of sensors.
-
-![Sound Machine Color Sensor](/static/lessons/make-a-sound-machine/lego-maker-sound-machine-color-sensor.jpg)
-
-#### Programming
-
-1. Drag an ``||logic:if else||`` Logic block and place it inside the ``||loops:forever||`` loop.
-2. Drag a ``||sensors:pause color sensor||`` block and place it inside the ``||logic:if true then||`` block.
-3. Change the color to ``blue``.
-4. Drag a ``||music:play tone||`` block and place under the sensor block.
-5. Change the tone to ``Middle G`` (392 Hz).
-6. Drag a ``||sensors:pause color sensor||`` block and place it inside the ``||logic:else||`` block.
-7. Change the color to ``red``.
-8. Drag a ``||music:play tone||`` block and place under the new sensor block.
-9. Change the tone to ``High C`` (523 Hz).
-10. Press the **(+)**.
-11. Drag a ``||sensors:pause color sensor||`` block and place it inside the ``||logic:else if||`` block.
-12. Change the color to ``green``.
-13. Drag a ``||music:play tone||`` block and place under the new sensor block.
-14. Change the tone to ``High D`` (587 Hz).
-
-```blocks
-forever(function () {
-    if (true) {
-        sensors.color3.pauseForColor(ColorSensorColor.Blue)
-        music.playTone(392, music.beat(BeatFraction.Whole))
-    } else if (false) {
-        sensors.color3.pauseForColor(ColorSensorColor.Red)
-        music.playTone(523, music.beat(BeatFraction.Half))
-    } else {
-        sensors.color3.pauseForColor(ColorSensorColor.Green)
-        music.playTone(587, music.beat(BeatFraction.Half))
-    }
-})
-```
-
-Click **Download** and follow the instructions to get your code onto your EV3 Brick. Press the ``center`` button on the EV3 Brick to run the program.
-
-### Well done!
-
-Click [here](/examples) to try out some more projects!
-
-

docs/maker.md

@@ -1,8 +1,8 @@
 # Maker Activites
 
-These six activities require the LEGO® MINDSTORMS® Education EV3 Core Set (45544). Supporting materials for teachers and middle school students are provided, offering everything teachers and students need to explore their inner makers as they follow the design process to solve open-ended, themed challenges...
+These six activities require the [LEGO® MINDSTORMS® Education EV3 Core Set (45544)](https://education.lego.com/en-us/products/lego-mindstorms-education-ev3-core-set-/5003400). Supporting materials for teachers and middle school students are provided, offering everything teachers and students need to explore their inner makers as they follow the design process to solve open-ended, themed challenges...
 
-* [Download Curriculum Materials](https://education.lego.com/en-us/downloads/mindstorms-ev3)
+* [Download Curriculum Materials](https://education.lego.com/en-us/downloads/mindstorms-ev3/curriculum)
 
 ## Activites
 
@@ -10,7 +10,7 @@ These six activities require the LEGO® MINDSTORMS® Education EV3 Core Set (455
 [
 {
   "name": "Make A Sound Machine",
-  "description": "Create instruments with your EV3 Brick!",
+  "description": "Make a Sound Machine that can play a rhythm, music or just noise!",
   "url":"/maker/sound-machine",
   "cardType": "example",
   "imageUrl": "/static/lessons/make-a-sound-machine.png",
@@ -18,7 +18,7 @@ These six activities require the LEGO® MINDSTORMS® Education EV3 Core Set (455
 },
 {
   "name": "Make A Security Gadget",
-  "description": "TBD",
+  "description": "Invent a Security Gadget that will protect your belongings by warning you!",
   "url":"/maker/security-gadget",
   "cardType": "example",
   "imageUrl": "/static/lessons/make-a-security-device.png",

docs/maker/security-gadget.md

@@ -1,9 +1,139 @@
-# Security Gadget
 
-This program will activate an alarm when an object is lifted from the Touch Sensor.
+# Make a Security Gadget
+
+Invent a Security Gadget that will protect your belongings by warning you!
+
+![Maker – Make a Security Gadget Main Image](/static/lessons/make-a-security-gadget/lego-maker-security-detect.jpg)
+
+## Connect 
+
+Over time, people have come up with many different ways to help protect their personal belongings from theft. These inventions include simple alarm systems and even traps! 
+
+![Make a Security Gadget 3 Stock Footage Images](/static/lessons/make-a-security-gadget/three-stock.jpg)
+
+Look at the photos and think about:
+
+* What do you see?
+* Can you see any new design opportunities?
+* What problems can you see?
+* How could you make use of the LEGO bricks, the EV3 Programmable Brick, motors, and sensors?
+
+### Things You’ll Need
+
+* [LEGO MINDSTORMS Education EV3 Core Set](https://education.lego.com/enus/products/legomindstormseducationev3coreset/5003400)
+
+Additional materials to add to your Security Gadget:
+
+* String
+* Arts and crafts materials such as:
+>* Cardboard
+>* Construction paper
+>* Pipe cleaners
+>* Plastic or paper cups 
+>* Recycled materials
+>* Rubber bands
+>* Wire
+
+### Prior Knowledge
+
+This activity uses sensor inputs. You may want to try the [Use](/getting-started/use) or [Object Detection](/coding/object-detection) activity before this one. Or, you can start out with this activity and tinker with coding sensor inputs on your own.
+
+## Contemplate
+
+Follow the steps of the [Maker Design Process](/lessons/classroom-management#design-process) for this lesson:
+
+![LEGO Education Maker Design Process](/static/lessons/common/lego-maker-design-process.jpg)
+
+### Defining the Problem
+
+1. What problems did you imagine? 
+2. Pick one problem and explain it to a partner.
+
+### Brainstorm
+
+Now that you have defined a problem, start to generate ideas for solving it. 
+
+### ~hint
+
+Some things to do while brainstorming:
+
+* Use the bricks from the LEGO set to help you brainstorm or sketch your ideas on paper.
+* The goal of brainstorming is to explore as many solutions as possible. You can use the tinkering examples in the Sample Solutions section below as inspiration for getting started.
+* Share your ideas and get some feedback. It may lead to more ideas!
+
+### ~ 
+
+### Define the Design Criteria
+
+1. You should have generated a number of ideas. Now select the best one to make. 
+2. Write out two or three specific design criteria your design must meet.
+
+### Go Make
+
+It is time to start making!
+
+* Use the components from the LEGO® MINDSTORMS EV3 Core Set and additional materials to make your chosen solution. 
+* Test and analyze your design as you go and record any improvements that you make. 
+
+### Review and Revise Your Solution
+
+* Have you managed to solve the problem that you defined? 
+* Look back at your design criteria. How well does your solution work? 
+* How can you improve your design?
+
+### Communicate Your Solution
+
+Now that you have finished you can:
+
+* Make a sketch or take a photo or video of your model.
+* Label the three most important parts and explain how they work.
+* Share your work with others.
+
+## Continue
+
+### Phone Protector - Sample Solution
+
+This example program combined with the small model will sound an alarm if someone picks it up. The program activates an alarm when an object is lifted from the Touch Sensor.
+
+![Security Gadget Tinkering Example #1 – Phone Stand](/static/lessons/make-a-security-gadget/lego-maker-security-gadget.jpg)
+
+#### Programming
+
+1. Drag a ``||sensors:pause until touch||`` block and place it inside the ``||loops:forever||`` loop.
+2. Drag a ``||music:play sound effect||`` block and place it below the ``||sensors:pause until||`` block.
+3. Change the sound effect to ``mechanical horn1``.
 
 ```blocks
-sensors.touch1.onEvent(ButtonEvent.Released, function () {
-    music.playSoundEffectUntilDone(sounds.informationActivate);
+forever(function () {
+    sensors.touch1.pauseUntil(ButtonEvent.Pressed)
+    music.playSoundEffect(sounds.mechanicalHorn1)
 })
-```
+```
+
+Click **Download** and follow the instructions to get your code onto your EV3 Brick. Press the ``center`` button on the EV3 Brick to run the program.
+
+### Object Detection - Sample Solution
+
+This example program combined with the small model will sound an alarm if someone (or something) crosses its path! The program activates an alarm when an object moves in front of the Ultrasonic Sensor.
+
+![Security Gadget Tinkering Example #1 – Mouse detector](/static/lessons/make-a-security-gadget/lego-maker-security-detect.jpg)
+
+#### Programming
+
+1. Drag a ``||sensors:pause until ultrasonic||`` block and place it inside the ``||loops:forever||`` loop.
+2. Drag a ``||music:play sound effect||`` block and place it below the ``||sensors:pause until||`` block.
+3. Change the sound effect to ``mechanical horn1``.
+
+```blocks
+forever(function () {
+    sensors.ultrasonic4.pauseUntil(UltrasonicSensorEvent.ObjectDetected)
+    music.playSoundEffect(sounds.mechanicalHorn1)
+})
+```
+
+Click **Download** and follow the instructions to get your code onto your EV3 Brick. Press the ``center`` button on the EV3 Brick to run the program.
+
+### Well done!
+
+Click [here](/examples) to try out some more projects!
+

docs/maker/sound-machine.md

@@ -1,12 +1,164 @@
-# Sound Machine
+# Make a Sound Machine
+
+Make a Sound Machine that can play a rhythm, music or just noise!
+
+![Maker – Make a Sound Machine Main Image](/static/lessons/make-a-sound-machine/lego-maker-sound-machine-1.jpg)
+
+## Connect 
+
+Music is made up of a combination of sounds, notes and rhythm. A rhythm is a regular movement or repeated pattern of movements that can be used in many different ways. In mechanical machines, a rhythm can help keep a machine running smoothly. It can also be used to generate different sounds in music. 
+
+![Sound Machine 3 Stock Footage Images](/static/lessons/make-a-sound-machine/three-stock.jpg)
+
+Look at the photos and think about:
+
+* What do you see?
+* Can you see any new design opportunities?
+* What problems can you see?
+* How could you make use of the LEGO bricks, the EV3 Programmable Brick, motors, and sensors?
+
+### Things You’ll Need
+
+* [LEGO MINDSTORMS Education EV3 Core Set](https://education.lego.com/enus/products/legomindstormseducationev3coreset/5003400)
+
+Additional materials to add to your Sound Machine:
+
+* Small musical instruments, such as chimes, bells, and small drums
+* Arts and crafts materials such as:
+>* Cardboard
+>* Construction paper
+>* Pipe cleaners
+>* Plastic or paper cups 
+>* Recycled materials
+>* Rubber bands
+>* Wire
+
+### Prior Knowledge
+
+This activity uses motor rotations and sensor inputs. You may want to try the [Use](/getting-started/use) or [Object Detection](/coding/object-detection) activity before this one. Or, you can start out with this activity and tinker with coding motor and sensor inputs on your own.
+
+## Contemplate
+
+Follow the steps of the [Maker Design Process](/lessons/classroom-management#design-process) for this lesson:
+
+![LEGO Education Maker Design Process](/static/lessons/common/lego-maker-design-process.jpg)
+
+### Defining the Problem
+
+1. What problems did you imagine? 
+2. Pick one problem and explain it to a partner.
+
+### Brainstorm
+
+Now that you have defined a problem, start to generate ideas for solving it. 
+
+### ~hint
+
+Some things to do while brainstorming:
+
+* Use the bricks from the LEGO set to help you brainstorm or sketch your ideas on paper.
+* The goal of brainstorming is to explore as many solutions as possible. You can use the tinkering examples in the Sample Solutions section below as inspiration for getting started.
+* Share your ideas and get some feedback. It may lead to more ideas!
+
+### ~
+
+### Define the Design Criteria
+
+* You should have generated a number of ideas. Now select the best one to make. 
+* Write out two or three specific design criteria your design must meet.
+
+### Go Make
+
+It is time to start making!
+
+* Use the components from the LEGO® MINDSTORMS EV3 Core Set and additional materials to make your chosen solution. 
+* Test and analyze your design as you go and record any improvements that you make. 
+
+### Review and Revise Your Solution
+
+* Have you managed to solve the problem that you defined? 
+* Look back at your design criteria. How well does your solution work? 
+* How can you improve your design?
+
+### Communicate Your Solution
+
+Now that you have finished you can:
+* Make a sketch or take a photo or video of your model.
+* Label the three most important parts and explain how they work.
+* Share your work with others.
+
+## Continue
+
+### Rhythm Maker - Sample Solution
 
 This example program combined with the small model will make a beat and rhythm on any surface when the program is run.
 
+![Sound Machine Tinkering Example](/static/lessons/make-a-sound-machine/lego-maker-sound-machine.jpg)
+
+#### Programming
+
+1. Drag a run ``||motors:large motor A||`` block inside the ``||loops:forever||`` loop.
+2. Press the **(+)**.
+3. Change the rotations to `2`.
+4. Drag a ``||loops:pause||`` block and place it under the motor block.
+5. Change the duration to ``200`` ms.
+6. Drag a ``||run large motor A||`` block inside the ``||loops:forever||`` loop.
+7. Press the **(+)**.
+8. Change the power to `100`.
+9. Change the rotations to `1`.
+
 ```blocks
 forever(function () {
-    motors.largeA.run(50)
-    pause(200)
-    motors.largeA.run(100)
+    motors.largeA.run(50, 2, MoveUnit.Rotations)
     pause(200)
+    motors.largeA.run(100, 1, MoveUnit.Rotations)
 })
-``` 
+```
+
+Click **Download** and follow the instructions to get your code onto your EV3 Brick. Press the ``center`` button on the EV3 Brick to run the program.
+
+### Color Sensor Sounds - Sample Solution
+
+You can also tinker with the use of sensors.
+
+![Sound Machine Color Sensor](/static/lessons/make-a-sound-machine/lego-maker-sound-machine-color-sensor.jpg)
+
+#### Programming
+
+1. Drag an ``||logic:if else||`` Logic block and place it inside the ``||loops:forever||`` loop.
+2. Drag a ``||sensors:pause color sensor||`` block and place it inside the ``||logic:if true then||`` block.
+3. Change the color to ``blue``.
+4. Drag a ``||music:play tone||`` block and place under the sensor block.
+5. Change the tone to ``Middle G`` (392 Hz).
+6. Drag a ``||sensors:pause color sensor||`` block and place it inside the ``||logic:else||`` block.
+7. Change the color to ``red``.
+8. Drag a ``||music:play tone||`` block and place under the new sensor block.
+9. Change the tone to ``High C`` (523 Hz).
+10. Press the **(+)**.
+11. Drag a ``||sensors:pause color sensor||`` block and place it inside the ``||logic:else if||`` block.
+12. Change the color to ``green``.
+13. Drag a ``||music:play tone||`` block and place under the new sensor block.
+14. Change the tone to ``High D`` (587 Hz).
+
+```blocks
+forever(function () {
+    if (true) {
+        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Blue)
+        music.playTone(392, music.beat(BeatFraction.Whole))
+    } else if (false) {
+        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
+        music.playTone(523, music.beat(BeatFraction.Half))
+    } else {
+        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Green)
+        music.playTone(587, music.beat(BeatFraction.Half))
+    }
+})
+```
+
+Click **Download** and follow the instructions to get your code onto your EV3 Brick. Press the ``center`` button on the EV3 Brick to run the program.
+
+### Well done!
+
+Click [here](/examples) to try out some more projects!
+
+

docs/reference/brick.md

@@ -9,6 +9,7 @@ brick.showString("Hello world!", 1);
 brick.showNumber(0, 1);
 brick.showValue("item", 0, 1);
 brick.clearScreen();
+brick.showPorts();
 ```
 
 ## Buttons
@@ -19,8 +20,8 @@ brick.buttonEnter.onEvent(ButtonEvent.Bumped, function () {
 });
 brick.buttonEnter.pauseUntil(ButtonEvent.Bumped);
 brick.buttonEnter.isPressed()
-brick.buttonEnter.wasPressed()
 brick.setStatusLight(StatusLight.Red);
+brick.buttonEnter.wasPressed()
 ```
 
 ## Other

docs/reference/brick/button/was-pressed.md

@@ -14,7 +14,7 @@ The fact that a button was pressed earlier is remembered. Once **was pressed** i
 
 Your @boardname@ has touch sensors that work like buttons. Instead of saying `enter` or `left` as the source button, use a touch sensor block with a sensor name like `touch 1`.
 
-```block
+```typescript
 if (sensors.touch1.wasPressed()) {
     console.log("Hey, I was pressed.");
 }
@@ -32,7 +32,7 @@ Read about [touch sensors](/reference/sensors/touch-sensor) and using them as to
 
 Set the brick light to green if the `right` button was pressed before the `left` button. If not, the brick light is turned off when the `left` button is pressed.
 
-```blocks
+```typescript
 brick.buttonLeft.onEvent(ButtonEvent.Bumped, function() {
     if (brick.buttonRight.wasPressed()) {
         brick.setStatusLight(StatusLight.Green)
@@ -45,6 +45,5 @@ brick.buttonLeft.onEvent(ButtonEvent.Bumped, function() {
 ## See also
 
 [is pressed](/reference/brick/button/is-pressed),
-[on event](/reference/brick/button/on-event)
-
+[on event](/reference/brick/button/on-event),
 [Touch sensors](/reference/sensors/touch-sensor)

docs/reference/brick/show-ports.md

@@ -0,0 +1,24 @@
+# show Ports
+
+Show the status of everything connected to the ports.
+
+```sig
+brick.showPorts()
+```
+
+You can find out what's connected to the ports on the brick and show its status. The status information from each sensor or motor connected is displayed on the screen.
+
+## Example
+
+Show the status of the ports on the brick when the ``enter`` button is pressed.
+
+```blocks
+brick.showString("Press ENTER for port status", 1)
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    brick.showPorts()
+})
+```
+
+## See also
+
+[show string](/reference/brick/show-string), [show value](/reference/brick/show-value)

docs/reference/motors/motor/angle.md

@@ -27,5 +27,5 @@ motorAngle = motors.largeA.angle()
 
 ## See also
 
-[tacho](/reference/motors/motor/tacho), [speed](/reference/motors/motor/speed),
+[speed](/reference/motors/motor/speed),
 [reset](/reference/motors/motor/reset), [clear counts](/reference/motors/motor/clear-counts)

docs/reference/motors/motor/clear-counts.md

@@ -31,5 +31,5 @@ motors.largeA.stop()
 
 ## See also
 
-[tacho](/reference/motors/motor/tacho), [angle](/reference/motors/motor/angle),
+[angle](/reference/motors/motor/angle),
 [speed](/reference/motors/motor/speed), [reset](/reference/motors/motor/reset)

docs/reference/motors/motor/speed.md

@@ -29,5 +29,5 @@ motors.largeA.stop()
 
 ## See also
 
-[tacho](/reference/motors/motor/tacho), [speed](/reference/motors/motor/speed),
+[speed](/reference/motors/motor/speed),
 [reset](/reference/motors/motor/reset), [clear counts](/reference/motors/motor/clear-counts)

docs/reference/sensors.md

@@ -4,9 +4,9 @@
 
 ```cards
 sensors.color1.onColorDetected(ColorSensorColor.Blue, function () {})
-sensors.color1.onLightChanged(LightIntensityMode.Reflected, LightCondition.Dark, function () {})
-sensors.color1.pauseForLight(LightIntensityMode.Reflected, LightCondition.Dark)
-sensors.color1.pauseForColor(ColorSensorColor.Blue)
+sensors.color1.onLightConditionDetected(LightIntensityMode.Reflected, LightCondition.Dark, function () {})
+sensors.color1.pauseUntilLightConditionDetected(LightIntensityMode.Reflected, LightCondition.Dark)
+sensors.color1.pauseUntilColorDetected(ColorSensorColor.Blue)
 sensors.color1.color();
 sensors.color1.light(LightIntensityMode.Ambient)
 sensors.color(ColorSensorColor.Blue)
@@ -17,8 +17,8 @@ sensors.color(ColorSensorColor.Blue)
 ```cards
 sensors.touch1.onEvent(ButtonEvent.Pressed, function () {})
 sensors.touch1.pauseUntil(ButtonEvent.Pressed)
-sensors.touch1.wasPressed()
 sensors.touch1.isPressed()
+sensors.touch1.wasPressed()
 ```
 
 ## Gyro

libs/color-sensor/color.ts

@@ -145,15 +145,15 @@ namespace sensors {
          * Waits for the given color to be detected
          * @param color the color to detect
          */
-        //% help=sensors/color-sensor/pause-for-color
-        //% block="pause **color sensor** %this|for %color=colorEnumPicker"
-        //% blockId=colorPauseForColorDetected
+        //% help=sensors/color-sensor/pause-until-color-detected
+        //% block="pause until **color sensor** %this|detected %color=colorEnumPicker"
+        //% blockId=colorpauseUntilColorDetectedDetected
         //% parts="colorsensor"
         //% blockNamespace=sensors
         //% this.fieldEditor="ports"
         //% weight=99 blockGap=8
         //% group="Color Sensor"
-        pauseForColor(color: number) {
+        pauseUntilColorDetected(color: number) {
             this.setMode(ColorSensorMode.Color);
             if (this.color() != color) {
                 const v = this._colorEventValue(<number>color);
@@ -184,15 +184,15 @@ namespace sensors {
          * @param condition the light condition
          * @param handler the code to run when detected
          */
-        //% help=sensors/color-sensor/on-light-changed
-        //% block="on **color sensor** %this|%mode|%condition"
-        //% blockId=colorOnLightChanged
+        //% help=sensors/color-sensor/on-light-condition-detected
+        //% block="on **color sensor** %this|detected %mode|%condition"
+        //% blockId=colorOnLightDetected
         //% parts="colorsensor"
         //% blockNamespace=sensors
         //% this.fieldEditor="ports"
         //% weight=89 blockGap=12
         //% group="Color Sensor"
-        onLightChanged(mode: LightIntensityMode, condition: LightCondition, handler: () => void) {
+        onLightConditionDetected(mode: LightIntensityMode, condition: LightCondition, handler: () => void) {
             this.setMode(<ColorSensorMode><number>mode)
             control.onEvent(this._id, <number>condition, handler);
         }
@@ -201,15 +201,15 @@ namespace sensors {
          * Wait for the given color to be detected
          * @param color the color to detect
          */
-        //% help=sensors/color-sensor/pause-for-light
-        //% block="pause **color sensor** %this|for %mode|%condition"
-        //% blockId=colorPauseForLight
+        //% help=sensors/color-sensor/pause-until-light-condition-detected
+        //% block="pause until **color sensor** %this|detected %mode|%condition"
+        //% blockId=colorPauseUntilLightConditionDetected
         //% parts="colorsensor"
         //% blockNamespace=sensors
         //% this.fieldEditor="ports"
         //% weight=88 blockGap=8
         //% group="Color Sensor"
-        pauseForLight(mode: LightIntensityMode, condition: LightCondition) {
+        pauseUntilLightConditionDetected(mode: LightIntensityMode, condition: LightCondition) {
             this.setMode(<ColorSensorMode><number>mode)
             if (this.thresholdDetector.state != <number>condition)
                 control.waitForEvent(this._id, <number>condition)

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

@@ -2,9 +2,9 @@
 
 ```cards
 sensors.color1.onColorDetected(ColorSensorColor.Blue, function () {})
-sensors.color1.onLightChanged(LightIntensityMode.Reflected, LightCondition.Dark, function () {})
-sensors.color1.pauseForLight(LightIntensityMode.Reflected, LightCondition.Dark)
-sensors.color1.pauseForColor(ColorSensorColor.Blue)
+sensors.color1.onLightConditionDetected(LightIntensityMode.Reflected, LightCondition.Dark, function () {})
+sensors.color1.pauseUntilLightConditionDetected(LightIntensityMode.Reflected, LightCondition.Dark)
+sensors.color1.pauseUntilColorDetected(ColorSensorColor.Blue)
 sensors.color1.color();
 sensors.color1.light(LightIntensityMode.Ambient)
 ```
@@ -12,8 +12,8 @@ sensors.color1.light(LightIntensityMode.Ambient)
 ## See slso
 
 [on color detected](/reference/sensors/color-sensor/on-color-detected),
-[pause for color](/reference/sensors/color-sensor/pause-for-color),
-[on light changed](/reference/sensors/color-sensor/on-light-changed),
-[pause for light](/reference/sensors/color-sensor/pause-for-light),
+[pause until color detected](/reference/sensors/color-sensor/pause-until-color-detected),
+[on light condition detected](/reference/sensors/color-sensor/on-light-condition-detected),
+[pause until light condition detected](/reference/sensors/color-sensor/pause-until-light-condition-detected),
 [color](/reference/sensors/color-sensor/color),
 [light](/reference/sensors/color-sensor/ambient-light)

libs/color-sensor/docs/reference/sensors/color-sensor/on-color-detected.md

@@ -24,4 +24,4 @@ sensors.color1.onColorDetected(ColorSensorColor.Blue, function () {
 ```
 ## See also
 
-[pause for color](/reference/sensors/color-sensor/pause-for-color), [color](/reference/sensors/color)
+[pause until color detected](/reference/sensors/color-sensor/pause-until-color-detected), [color](/reference/sensors/color)

libs/color-sensor/docs/reference/sensors/color-sensor/on-light-condition-detected.md

@@ -3,7 +3,7 @@
 Run some code when the amount of light dectected changes.
 
 ```sig
-sensors.color1.onLightChanged(LightIntensityMode.Reflected, LightCondition.Dark, function () {
+sensors.color1.onLightConditionDetected(LightIntensityMode.Reflected, LightCondition.Dark, function () {
 
 })
 ```
@@ -21,7 +21,7 @@ You can check for a change in either _ambient_ or _reflected_ light and run some
 Show a message on the screen when the ambient light goes dark.
 
 ```blocks
-sensors.color1.onLightChanged(LightIntensityMode.Ambient, LightCondition.Dark, function() {
+sensors.color1.onLightConditionDetected(LightIntensityMode.Ambient, LightCondition.Dark, function() {
     brick.clearScreen();
     brick.showString("It just got dark", 1)
     brick.showString("Can you see me?", 2)

libs/color-sensor/docs/reference/sensors/color-sensor/pause-until-color-detected.md

@@ -1,9 +1,9 @@
-# pause For Color
+# pause Until Color Detected
 
 Wait for the sensor to see a certain color.
 
 ```sig
-sensors.color1.pauseForColor(ColorSensorColor.Blue)
+sensors.color1.pauseUntilColorDetected(ColorSensorColor.Blue)
 ```
 
 The [color](/reference/sensors/color) you choose to look for is one of the colors that the sensor can detect. If you want to use colors for tracking, it's best to use a color that is the same or very close to the ones the sensor detects.
@@ -18,7 +18,7 @@ Wait for the sensor to see ``blue``. Then, show an expression on the screen.
 
 ```blocks
 brick.showString("Waiting for blue", 1)
-sensors.color1.pauseForColor(ColorSensorColor.Blue)
+sensors.color1.pauseUntilColorDetected(ColorSensorColor.Blue)
 brick.clearScreen()
 brick.showImage(images.expressionsSick)
 ```

libs/color-sensor/docs/reference/sensors/color-sensor/pause-until-light-condition-detected.md

@@ -1,9 +1,9 @@
-# pause For Light
+# pause Until Light Condition Detected
 
-Wait for the light condition to change.
+Wait until a particular light condition is detected.
 
 ```sig
-sensors.color1.pauseForLight(LightIntensityMode.Reflected, LightCondition.Dark)
+sensors.color1.pauseUntilLightConditionDetected(LightIntensityMode.Reflected, LightCondition.Dark)
 ```
 
 You can wait for a change in either _ambient_ or _reflected_ light. This event happens when the sensor detects light going to ``dark`` or to ``bright``. You choose what condition you will wait for.
@@ -19,11 +19,11 @@ Wait for the ambient light to go dark, then show an expression on the screen.
 
 ```blocks
 brick.showString("Waiting for dark", 1)
-sensors.color1.pauseForLight(LightIntensityMode.Reflected, LightCondition.Dark)
+sensors.color1.pauseUntilLightConditionDetected(LightIntensityMode.Reflected, LightCondition.Dark)
 brick.clearScreen()
 brick.showImage(images.expressionsSick)
 ```
 
 ## See also
 
-[on light changed](/reference/sensors/color-sensor/on-light-changed)
+[on light condition detected](/reference/sensors/color-sensor/on-light-condition-detected)

libs/color-sensor/docs/reference/sensors/color-sensor/set-threshold.md

@@ -12,7 +12,7 @@ After setting a threshold, any event for that light condition won't happen until
 
 ```block
 sensors.color1.setThreshold(LightCondition.Dark, 20)
-sensors.color1.onLightChanged(LightIntensityMode.Reflected, LightCondition.Dark, function () {
+sensors.color1.onLightConditionDetected(LightIntensityMode.Reflected, LightCondition.Dark, function () {
     brick.showMood(moods.sleeping)
 })
 ```
@@ -28,7 +28,7 @@ Make a daylight alarm. When the ambient light reaches `70` flash the status ligh
 
 ```blocks
 sensors.color3.setThreshold(LightCondition.Bright, 70)
-sensors.color3.onLightChanged(LightIntensityMode.Ambient, LightCondition.Bright, function () {
+sensors.color3.onLightConditionDetected(LightIntensityMode.Ambient, LightCondition.Bright, function () {
     brick.setStatusLight(StatusLight.GreenFlash)
     for (let i = 0; i < 5; i++) {
         music.playSoundEffectUntilDone(sounds.mechanicalBackingAlert)

libs/color-sensor/docs/reference/sensors/color-sensor/threshold.md

@@ -17,7 +17,7 @@ Light intensity is measured from `0` (very dark) to `100` (very bright). A _thre
 Find out what light level is set as the ``dark`` threshold when a dark light event happens.
 
 ```blocks
-sensors.color3.onLightChanged(LightIntensityMode.Reflected, LightCondition.Dark, function () {
+sensors.color3.onLightConditionDetected(LightIntensityMode.Reflected, LightCondition.Dark, function () {
     brick.showValue("DarknessThresholdValue", sensors.color3.threshold(LightCondition.Dark), 1)
 })
 ```

libs/core/buttons.ts

@@ -95,6 +95,7 @@ namespace brick {
         //% help=brick/button/was-pressed
         //% block="%button|was pressed"
         //% blockId=buttonWasPressed
+        //% blockHidden=true
         //% parts="brick"
         //% blockNamespace=brick
         //% weight=80

libs/core/console.ts

@@ -59,7 +59,6 @@ namespace console {
 
 namespace console._screen {
     const maxLines = 100;
-    const screenLines = 10;
     let lines: string[];
     let scrollPosition = 0;
 
@@ -75,10 +74,11 @@ namespace console._screen {
     function printLog() {
         brick.clearScreen()
         if (!lines) return;
+        const screenLines = brick.lineCount();
         for (let i = 0; i < screenLines; ++i) {
             const line = lines[i + scrollPosition];
             if (line)
-                screen.print(line, 0, 4 + i * brick.LINE_HEIGHT)
+                screen.print(line, 0, 4 + i * brick.lineHeight(), 1, brick.font)
         }
     }
 
@@ -98,6 +98,7 @@ namespace console._screen {
             scrollPosition = Math.min(scrollPosition, lines.length - 1)
         }
         // move down scroll once it gets large than the screen
+        const screenLines = brick.lineCount();
         if (lines.length > screenLines
             && lines.length >= scrollPosition + screenLines) {
             scrollPosition++;

libs/core/output.ts

@@ -164,7 +164,7 @@ namespace motors {
          */
         //% blockId=outputMotorSetBrakeMode block="set %motor|brake %brake=toggleOnOff"
         //% weight=60 blockGap=8
-        //% group="Move"
+        //% group="Properties"
         //% help=motors/motor/set-brake
         setBrake(brake: boolean) {
             this.init();
@@ -176,7 +176,7 @@ namespace motors {
         */
         //% blockId=motorSetInverted block="set %motor|inverted %reversed=toggleOnOff"
         //% weight=59 blockGap=8
-        //% group="Move"
+        //% group="Properties"
         //% help=motors/motor/set-inverted
         setInverted(inverted: boolean) {
             this.init();
@@ -344,7 +344,7 @@ namespace motors {
          */
         //% blockId=outputMotorSetRegulated block="set %motor|regulated %value=toggleOnOff"
         //% weight=58
-        //% group="Move"
+        //% group="Properties"
         //% help=motors/motor/set-regulated
         setRegulated(value: boolean) {
             this._regulated = value;

libs/ev3/ns.ts

@@ -13,7 +13,7 @@ namespace sensors {
 }
 
 //% color="#00852B" weight=90 icon="\uf10d"
-//% groups='["Move", "Counters"]'
+//% groups='["Move", "Counters", "Properties"]'
 //% labelLineWidth=50
 namespace motors {
 }

libs/infrared-sensor/docs/reference/sensors/beacon/was-pressed.md

@@ -26,7 +26,7 @@ In order to recognize a button event signalled from a remote beacon, an infrared
 
 If the beacon button ``top left`` was pressed, show a `green` status light. Otherwise, set the status light to `orange`.
 
-```blocks
+```typescript
 sensors.infrared1.setRemoteChannel(InfraredRemoteChannel.Ch0)
 forever(function () {
     if (sensors.remoteButtonTopLeft.wasPressed()) {

libs/infrared-sensor/ir.ts

@@ -101,6 +101,7 @@ namespace sensors {
         //% help=sensors/beacon/was-pressed
         //% block="**remote button** %button|was pressed"
         //% blockId=remotebuttonWasPressed
+        //% blockHidden=true
         //% parts="remote"
         //% blockNamespace=sensors
         //% weight=80

libs/music/music.cpp

@@ -136,8 +136,8 @@ void playSample(Buffer buf) {
 
 /**
 * Play a tone through the speaker for some amount of time.
-* @param frequency pitch of the tone to play in Hertz (Hz)
-* @param ms tone duration in milliseconds (ms)
+* @param frequency pitch of the tone to play in Hertz (Hz), eg: Note.C
+* @param ms tone duration in milliseconds (ms), eg: BeatFraction.Half
 */
 //% help=music/play-tone
 //% blockId=music_play_note block="play tone|at %note=device_note|for %duration=device_beat"

libs/music/shims.d.ts

@@ -15,8 +15,8 @@ declare namespace music {
 
     /**
      * Play a tone through the speaker for some amount of time.
-     * @param frequency pitch of the tone to play in Hertz (Hz)
-     * @param ms tone duration in milliseconds (ms)
+     * @param frequency pitch of the tone to play in Hertz (Hz), eg: Note.C
+     * @param ms tone duration in milliseconds (ms), eg: BeatFraction.Half
      */
     //% help=music/play-tone
     //% blockId=music_play_note block="play tone|at %note=device_note|for %duration=device_beat"

libs/screen/targetoverrides.ts

@@ -14,32 +14,55 @@ namespace _screen_internal {
     function updateStats(msg: string): void { }
 
     control.__screen.setupUpdate(() => updateScreen(screen))
-    control.EventContext.onStats = function(msg: string) { 
+    control.EventContext.onStats = function (msg: string) {
         updateStats(msg);
     }
 }
 
 namespace brick {
-    export const LINE_HEIGHT = 12;
+    const textOffset = 4;
+    const lineOffset = 2;
+    export let font = image.font8;
+
+    /**
+     * Gets the text line height
+     */
+    //%
+    export function lineHeight(): number {
+        return font.charHeight + lineOffset;
+    }
+
+    /**
+     * Number of lines
+     */
+    //%
+    export function lineCount(): number {
+        return ((screen.height - textOffset) / lineHeight()) >> 0
+    }
 
     /**
      * Show text on the screen at a specific line.
      * @param text the text to print on the screen, eg: "Hello world"
-     * @param line the line number to print the text at, eg: 1
+     * @param line the line number to print the text at (starting at 1), eg: 1
      */
     //% blockId=screen_print block="show string %text|at line %line"
     //% weight=98 group="Screen" inlineInputMode="inline" blockGap=8
     //% help=brick/show-string
     //% line.min=1 line.max=10
     export function showString(text: string, line: number) {
-        const NUM_LINES = 9;
-        const offset = 5;
-        const y = offset + (Math.clamp(0, NUM_LINES, line - 1) / (NUM_LINES + 2)) * DAL.LCD_HEIGHT;
-        screen.print(text, offset, y);
+        // line indexing starts at 1.
+        line = (line - 1) >> 0;
+        const nlines = lineCount();
+        if (line < 0 || line > nlines) return; // out of screen
+
+        const h = lineHeight();
+        const y = textOffset + h * line;
+        screen.fillRect(0, y, screen.width, h, 0); // clear background
+        screen.print(text, textOffset, y, 1, font);
     }
 
     /**
-     * Shows a number on the screen
+     * Show a number on the screen
      * @param value the numeric value
      * @param line the line number to print the text at, eg: 1
      */
@@ -52,7 +75,7 @@ namespace brick {
     }
 
     /**
-     * Shows a name, value pair on the screen
+     * Show a name, value pair on the screen
      * @param value the numeric value
      * @param line the line number to print the text at, eg: 1
      */
@@ -78,13 +101,14 @@ namespace brick {
     }
 
     /**
-    * Display the sensor and motor states attached to ports   
+    * Display the status of the sensors and motors attached to ports   
     */
     //% blockId=brickShowPorts block="show ports"
     //% help=brick/show-ports blockGap=8
     //% weight=10 group="Screen"
     export function showPorts() {
         const col = 44;
+        const lineHeight8 = image.font8.charHeight + 2;
         clearScreen();
 
         function scale(x: number) {
@@ -98,19 +122,22 @@ namespace brick {
             const data = datas[i];
             if (!data.actualSpeed && !data.count) continue;
             const x = i * col;
-            screen.print("ABCD"[i], x, brick.LINE_HEIGHT)
-            screen.print(`${scale(data.actualSpeed)}%`, x, 2* brick.LINE_HEIGHT)
-            screen.print(`${scale(data.count)}>`, x, 3 * brick.LINE_HEIGHT)
+            screen.print("ABCD"[i], x + 2, 1 * lineHeight8, 1, image.font8)
+            screen.print(`${scale(data.actualSpeed)}%`, x + 2, 3 * lineHeight8, 1, image.font8)
+            screen.print(`${scale(data.count)}>`, x + 2, 4 * lineHeight8, 1, image.font5)
         }
+        screen.drawLine(0, 5 * lineHeight8, screen.width, 5 * lineHeight8, 1);
 
         // sensors
         const sis = sensors.internal.getActiveSensors();
+        const h = screen.height;
+        screen.drawLine(0, h - 5 * lineHeight8, screen.width, h - 5 * lineHeight8, 1)
         for (let i = 0; i < sis.length; ++i) {
             const si = sis[i];
             const x = (si.port() - 1) * col;
             const inf = si._info();
-            screen.print(si.port() + "", x, 8 * brick.LINE_HEIGHT)
-            screen.print(inf, x, 9 * brick.LINE_HEIGHT)
+            screen.print(si.port() + "", x, h - 4 * lineHeight8, 1, image.font8)
+            screen.print(inf, x, h - 2 * lineHeight8, 1, inf.length > 4 ? image.font5 : image.font8);
         }
     }
 

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

@@ -16,7 +16,7 @@ If a touch sensor was pressed, then that event is remembered. Once you check if
 
 If the touch sensor ``touch 1`` was pressed, show a `green` status light. Otherwise, set the status light to `orange`.
 
-```blocks
+```typescript
 forever(function () {
     if (sensors.touch1.wasPressed()) {
         brick.setStatusLight(StatusLight.Green)

libs/touch-sensor/touch.ts

@@ -83,6 +83,7 @@ namespace sensors {
         //% help=sensors/touch-sensor/was-pressed
         //% block="**touch** %this|was pressed"
         //% blockId=touchWasPressed
+        //% blockHidden=true
         //% parts="touch"
         //% blockNamespace=sensors
         //% this.fieldEditor="ports"

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "0.1.7",
+  "version": "0.1.13",
   "description": "LEGO Mindstorms EV3 for Microsoft MakeCode",
   "private": true,
   "keywords": [
@@ -45,8 +45,8 @@
     "webfonts-generator": "^0.4.0"
   },
   "dependencies": {
-    "pxt-common-packages": "0.20.28",
-    "pxt-core": "3.5.11"
+    "pxt-common-packages": "0.20.31",
+    "pxt-core": "3.7.1"
   },
   "scripts": {
     "test": "node node_modules/pxt-core/built/pxt.js travis"

pxtarget.json

@@ -98,11 +98,14 @@
         "betaUrl": "https://makecode.legoeducation.com/about",
         "boardName": "LEGO Mindstorms EV3 Brick",
         "selectLanguage": true,
+        "availableLocales": [
+            "en"
+        ],
         "highContrast": true,
         "docMenu": [
             {
                 "name": "Support",
-                "path": "https://service.lego.com"
+                "path": "http://service.lego.com"
             },
             {
                 "name": "About",
@@ -163,7 +166,7 @@
             "arrays": "\uf109"
         },
         "monacoColors": {
-            "editor.background": "#ecf6ff"
+            "editor.background": "#f9f9f9"
         }
     },
     "ignoreDocsErrors": true

sim/dalboard.ts

@@ -19,6 +19,9 @@ namespace pxsim {
         brickNode: BrickNode;
         outputNodes: MotorNode[] = [];
 
+        highcontrastMode?: boolean;
+        lightMode?: boolean;
+
         public motorMap: pxt.Map<number> = {
             0x01: 0,
             0x02: 1,
@@ -77,17 +80,25 @@ namespace pxsim {
                 fnArgs: fnArgs,
                 maxWidth: "100%",
                 maxHeight: "100%",
+                highContrast: msg.highContrast,
+                light: msg.light
             };
             const viewHost = new visuals.BoardHost(pxsim.visuals.mkBoardView({
-                visual: boardDef.visual
+                visual: boardDef.visual,
+                highContrast: msg.highContrast,
+                light: msg.light
             }), opts);
 
             document.body.innerHTML = ""; // clear children
+            document.body.className = msg.light ? "light" : "";
             document.body.appendChild(this.view = viewHost.getView() as SVGSVGElement);
 
             this.inputNodes = [];
             this.outputNodes = [];
 
+            this.highcontrastMode = msg.highContrast;
+            this.lightMode = msg.light;
+
             return Promise.resolve();
         }
 
@@ -171,6 +182,14 @@ namespace pxsim {
         return runtime.board as EV3Board;
     }
 
+    export function inLightMode(): boolean {
+        return /light=1/i.test(window.location.href) || ev3board().lightMode;
+    }
+
+    export function inHighcontrastMode(): boolean {
+        return ev3board().highcontrastMode;
+    }
+
     if (!pxsim.initCurrentRuntime) {
         pxsim.initCurrentRuntime = initRuntimeWithDalBoard;
     }

sim/public/simulator.html

@@ -18,6 +18,10 @@ body {
   overflow: hidden;
   margin: 0;
 }
+
+.light * {
+  transition: none !important;
+}
     </style>
     <script src="/cdn/bluebird.min.js"></script>
     <script src="/cdn/pxtsim.js"></script>

sim/visuals/assets/Color Sensor.svg

@@ -13,7 +13,7 @@
           <path id="color_sideboxes" data-name="color sideboxes" d="M2.14,9.19H34a.7.7,0,0,1,.7.7V28a.7.7,0,0,1-.7.7H2.14a.7.7,0,0,1-.7-.7V9.89A.7.7,0,0,1,2.14,9.19Z" transform="translate(-1.44 -1.6)" style="fill: #a8aaa8"/>
           <g id="color_bigbox-2" data-name="color bigbox-2">
             <image width="33" height="34" transform="translate(0.06)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAjCAYAAADxG9hnAAAACXBIWXMAAAsSAAALEgHS3X78AAAAzUlEQVRYR+3YMU4DMRBG4W8Q5eYMUEMuw/3ScQDugkTPcoSsa4ZibYjcUMVQ+Ekjj+Tif7YrT2Sm/8BtayIisOCurtemYEXJzIzMFBEL7vGIJ7vMtVnxgje8q09zxAmvOONzQJ1r3gnH9jQLHuw3cmMMB3tewXIZGrVG8p056vS/MkV6pkjPFOmZIj1TpGeK9EyRninSM0V6pkjPFOmZIj2XIn81n0h+RAo+sNWNUbXV3NI+4Sueaz9iJNFouWu0iVFEHIwb0jQK1szcvgDqy2NNnOFs5AAAAABJRU5ErkJggg==" style="opacity: 0.30000000000000004;mix-blend-mode: multiply"/>
-            <path d="M5,3.33h26c1,0,1.78.57,1.78,1.27V32.77c0,.7-.8,1.27-1.78,1.27H5c-1,0-1.78-.57-1.78-1.27V4.6C3.25,3.9,4.05,3.33,5,3.33Z" transform="translate(-1.44 -1.6)" style="fill: url(#linear-gradient)"/>
+            <path id="color_bigbox-2_path" d="M5,3.33h26c1,0,1.78.57,1.78,1.27V32.77c0,.7-.8,1.27-1.78,1.27H5c-1,0-1.78-.57-1.78-1.27V4.6C3.25,3.9,4.05,3.33,5,3.33Z" transform="translate(-1.44 -1.6)" style="fill: url(#linear-gradient)"/>
           </g>
           <rect id="color_side_black_4" data-name="color side black 4" x="31.83" y="10.38" width="0.7" height="5.58"/>
           <rect id="color_side_black_3" data-name="color side black 3" x="0.84" y="10.38" width="0.7" height="5.58"/>

sim/visuals/assets/ColorSensorsvg.ts

@@ -1,34 +1,3 @@
 namespace pxsim {
-    export const COLOR_SENSOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 33.22 34">
-  <defs>
-    <linearGradient id="linear-gradient" x1="-448.15" y1="475.99" x2="-448.15" y2="475.83" gradientTransform="matrix(32.16, 0, 0, -33.37, 14429.08, 15914.64)" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#a8aaa8"/>
-      <stop offset="1" stop-color="#535453"/>
-    </linearGradient>
-  </defs>
-  <title>Color Sensor</title>
-  <g style="isolation: isolate">
-    <g id="svg41">
-      <g id="color_box" data-name="color box">
-        <g id="color_grey" data-name="color grey">
-          <path id="color_sideboxes" data-name="color sideboxes" d="M2.14,9.19H34a.7.7,0,0,1,.7.7V28a.7.7,0,0,1-.7.7H2.14a.7.7,0,0,1-.7-.7V9.89A.7.7,0,0,1,2.14,9.19Z" transform="translate(-1.44 -1.6)" style="fill: #a8aaa8"/>
-          <g id="color_bigbox-2" data-name="color bigbox-2">
-            <image width="33" height="34" transform="translate(0.06)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAjCAYAAADxG9hnAAAACXBIWXMAAAsSAAALEgHS3X78AAAAzUlEQVRYR+3YMU4DMRBG4W8Q5eYMUEMuw/3ScQDugkTPcoSsa4ZibYjcUMVQ+Ekjj+Tif7YrT2Sm/8BtayIisOCurtemYEXJzIzMFBEL7vGIJ7vMtVnxgje8q09zxAmvOONzQJ1r3gnH9jQLHuw3cmMMB3tewXIZGrVG8p056vS/MkV6pkjPFOmZIj1TpGeK9EyRninSM0V6pkjPFOmZIj2XIn81n0h+RAo+sNWNUbXV3NI+4Sueaz9iJNFouWu0iVFEHIwb0jQK1szcvgDqy2NNnOFs5AAAAABJRU5ErkJggg==" style="opacity: 0.30000000000000004;mix-blend-mode: multiply"/>
-            <path d="M5,3.33h26c1,0,1.78.57,1.78,1.27V32.77c0,.7-.8,1.27-1.78,1.27H5c-1,0-1.78-.57-1.78-1.27V4.6C3.25,3.9,4.05,3.33,5,3.33Z" transform="translate(-1.44 -1.6)" style="fill: url(#linear-gradient)"/>
-          </g>
-          <rect id="color_side_black_4" data-name="color side black 4" x="31.83" y="10.38" width="0.7" height="5.58"/>
-          <rect id="color_side_black_3" data-name="color side black 3" x="0.84" y="10.38" width="0.7" height="5.58"/>
-          <rect id="color_side_black_2" data-name="color side black 2" x="31.83" y="18.34" width="0.7" height="5.58"/>
-          <rect id="color_side_black1" data-name="color side black1" x="0.84" y="18.34" width="0.7" height="5.58"/>
-        </g>
-        <path id="color_red" data-name="color red" d="M11.63,23.43a6.32,6.32,0,0,1,.15-1.37,8.79,8.79,0,1,1,12.54,0,6.42,6.42,0,1,1-12.55,2.7,6.61,6.61,0,0,1-.15-1.33Z" transform="translate(-1.44 -1.6)" style="fill: #d42715"/>
-        <path id="color_black" data-name="color black" d="M13.11,23.43a4.89,4.89,0,0,1,.34-1.81,7.4,7.4,0,1,1,10.4-1.2,7.32,7.32,0,0,1-1.18,1.18,5,5,0,1,1-9.56,1.83Z" transform="translate(-1.44 -1.6)"/>
-        <g id="color_sensors" data-name="color sensors">
-          <circle id="color_sensor_white_big" data-name="color sensor white big" cx="16.61" cy="14.43" r="3.35" style="fill: #f1f1f1"/>
-          <circle id="color_sensor_white_small" data-name="color sensor white small" cx="16.61" cy="21.69" r="1.81" style="fill: #f1f1f1"/>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>`;
+    export const COLOR_SENSOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 33.22 34"><defs><linearGradient id="linear-gradient" x1="-448.15" y1="475.99" x2="-448.15" y2="475.83" gradientTransform="matrix(32.16 0 0 -33.37 14429.08 15914.64)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a8aaa8"/><stop offset="1" stop-color="#535453"/></linearGradient></defs><g style="isolation:isolate"><g id="svg41"><g id="color_box" data-name="color box"><g id="color_grey" data-name="color grey"><path id="color_sideboxes" data-name="color sideboxes" d="M2.14 9.19H34a.7.7 0 0 1 .7.7V28a.7.7 0 0 1-.7.7H2.14a.7.7 0 0 1-.7-.7V9.89a.7.7 0 0 1 .7-.7z" transform="translate(-1.44 -1.6)" fill="#a8aaa8"/><g id="color_bigbox-2" data-name="color bigbox-2"><image width="33" height="34" transform="translate(.06)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAjCAYAAADxG9hnAAAACXBIWXMAAAsSAAALEgHS3X78AAAAzUlEQVRYR+3YMU4DMRBG4W8Q5eYMUEMuw/3ScQDugkTPcoSsa4ZibYjcUMVQ+Ekjj+Tif7YrT2Sm/8BtayIisOCurtemYEXJzIzMFBEL7vGIJ7vMtVnxgje8q09zxAmvOONzQJ1r3gnH9jQLHuw3cmMMB3tewXIZGrVG8p056vS/MkV6pkjPFOmZIj1TpGeK9EyRninSM0V6pkjPFOmZIj2XIn81n0h+RAo+sNWNUbXV3NI+4Sueaz9iJNFouWu0iVFEHIwb0jQK1szcvgDqy2NNnOFs5AAAAABJRU5ErkJggg==" style="mix-blend-mode:multiply" opacity=".3"/><path id="color_bigbox-2_path" d="M5 3.33h26c1 0 1.78.57 1.78 1.27v28.17c0 .7-.8 1.27-1.78 1.27H5c-1 0-1.78-.57-1.78-1.27V4.6c.03-.7.83-1.27 1.78-1.27z" transform="translate(-1.44 -1.6)" fill="url(#linear-gradient)"/></g><path id="color_side_black_4" data-name="color side black 4" d="M31.83 10.38h.7v5.58h-.7z"/><path id="color_side_black_3" data-name="color side black 3" d="M.84 10.38h.7v5.58h-.7z"/><path id="color_side_black_2" data-name="color side black 2" d="M31.83 18.34h.7v5.58h-.7z"/><path id="color_side_black1" data-name="color side black1" d="M.84 18.34h.7v5.58h-.7z"/></g><path id="color_red" data-name="color red" d="M11.63 23.43a6.32 6.32 0 0 1 .15-1.37 8.79 8.79 0 1 1 12.54 0 6.42 6.42 0 1 1-12.55 2.7 6.61 6.61 0 0 1-.15-1.33z" transform="translate(-1.44 -1.6)" fill="#d42715"/><path id="color_black" data-name="color black" d="M13.11 23.43a4.89 4.89 0 0 1 .34-1.81 7.4 7.4 0 1 1 10.4-1.2 7.32 7.32 0 0 1-1.18 1.18 5 5 0 1 1-9.56 1.83z" transform="translate(-1.44 -1.6)"/><g id="color_sensors" data-name="color sensors" fill="#f1f1f1"><circle id="color_sensor_white_big" data-name="color sensor white big" cx="16.61" cy="14.43" r="3.35"/><circle id="color_sensor_white_small" data-name="color sensor white small" cx="16.61" cy="21.69" r="1.81"/></g></g></g></g></svg>`;
 }

sim/visuals/assets/MediumMotorsvg.ts

@@ -1,35 +1,3 @@
 namespace pxsim.visuals {
-    export const MEDIUM_MOTOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48">
-  <defs>
-    <linearGradient id="linear-gradient" x1="-427.2" y1="440.79" x2="-427.2" y2="440.63" gradientTransform="matrix(44.14, 0, 0, -44.15, 18878.72, 19502.57)" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#a8aaa8"/>
-      <stop offset="1" stop-color="#535453"/>
-    </linearGradient>
-  </defs>
-  <title>MediumMotor</title>
-  <g style="isolation: isolate">
-    <g id="svg7610">
-      <g id="Medium_Motor" data-name="Medium Motor">
-        <g id="medmotor_box" data-name="medmotor box">
-          <path id="medmotor_box_wgradient" data-name="medmotor box wgradient" d="M2.57,0h39a2.36,2.36,0,0,1,2.57,2V42.33c0,1-1.1,1.82-2.57,1.82h-39C1.1,44.15,0,43.34,0,42.33V2A2.36,2.36,0,0,1,2.57,0Z" transform="translate(2 1.84)" style="fill: url(#linear-gradient)"/>
-        </g>
-        <g id="medmotor_star" data-name="medmotor star">
-          <g>
-            <image width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAYAAACcXioiAAAACXBIWXMAAAsSAAALEgHS3X78AAACfElEQVRoQ+2aPXLbMBBG32ZUijlCnDo/R1AukCoHyAFS5Sw5g5t0bnwCu0ofpTZ9A1usvSmwoClRJEEAI4gzejMcqliS+2FB4AMoUVVyISICrIErO3dpgBpoNONDJde9RKTCJf4R+Ga/u9TADbAFalXdkYEsAiz5L8B3nICxCmyBa+Auh4jVVMAUneR/ABugAuRIaIUT9w4TJyLJIpIEWJ+/wrX8Bng7fgViMRtcRR5F5G/KO/FmKiCANa5Vq6nADhXwwY7DrjaLHALgeJcZQ4D32MtulYwil4AYfOXOogKxRLe8p7SAZC4CSnMRUJrBmThwbBbSRxIh4HFDs3VPwIQl7oXj/M1U3BBr3PUAY3aiEZGjVnzPjQZY4mOscbNqjIgGeLDzGINWvBUQaImHSOlGIUZu2IqbgAr4CtwCT8AL7sbndLzgcrvF5Vq1jQ98An5bwNSNSh9PuFw/A+KH0RhLXIo9K96dB1L68SnZs+JLnchaK75UAWA9ZskCgGULUFiugAZ4BJquAB0IPjcUZz9ugNoL8IqSNplOxA74Z0ezUlU1p3eNG5787tocUuaQOZXfAfe4XB9UVVcAqroTkTsLaghzoZ5TuFGPb+jWzA3Z6dBk/Hrgp53nVEJx7vKXnUMq0XBgp/cWNFaJbe+yYXzCoS14SINL/g9hAnors96KbM5Gqy0Dg+MHUNxjo+6z1Hmg5SKgNBcBpSktIGrk6VJSQOsopwLHKCVAed2sqmPnAMgnICaB9sv9VOAYOQTEWPEdGZKHRAFWeu8Q74Fnpjemnnm1xEndBxI/dEOUFe9Z4hSy/FcCZlnxniVOIZsACPhKYaR2my5ZBZTgP7HrUIs43RAaAAAAAElFTkSuQmCC" style="opacity: 0.30000000000000004;mix-blend-mode: multiply"/>
-            <path id="medmotor_cut-2" data-name="medmotor cut-2" d="M0,21.25A6.21,6.21,0,0,1,6.22,15H15V6.23A6.22,6.22,0,0,1,21.24,0H22.9a6.22,6.22,0,0,1,6.22,6.22V15h8.8a6.21,6.21,0,0,1,6.22,6.22v1.66a6.21,6.21,0,0,1-6.22,6.22h-8.8v8.8a6.21,6.21,0,0,1-6.22,6.22H21.24A6.22,6.22,0,0,1,15,37.93v-8.8H6.22A6.22,6.22,0,0,1,0,22.92H0Z" transform="translate(2 1.84)" style="fill: #a8aaa8"/>
-          </g>
-          <circle id="medmotor_hole_4" data-name="medmotor hole 4" cx="39.77" cy="24" r="4.85" style="fill: #393939"/>
-          <circle id="medmotor_hole_3" data-name="medmotor hole 3" cx="8.37" cy="24" r="4.85" style="fill: #393939"/>
-          <circle id="medmotor_hole_2" data-name="medmotor hole 2" cx="24.15" cy="8.22" r="4.85" style="fill: #393939"/>
-          <circle id="medmotor_hole_1" data-name="medmotor hole 1" cx="24.15" cy="39.62" r="4.85" style="fill: #393939"/>
-        </g>
-        <g id="medmotor_red" data-name="medmotor red">
-          <circle cx="24.3" cy="24" r="6.75" style="fill: #d42715"/>
-          <circle cx="24.3" cy="24" r="6.63" style="fill: none;stroke: #a20800;stroke-width: 0.25px"/>
-        </g>
-        <path id="medmotor_Hole" data-name="medmotor Hole" d="M20.59,19.46s-.05,1-.77,1-1.46,0-1.46,0a2.38,2.38,0,0,0-.45,1.69c0,1.27.36,1.6.36,1.6h1.62a.64.64,0,0,1,.7.59.21.21,0,0,1,0,.11v1.67a4,4,0,0,0,1.77.29A6.88,6.88,0,0,0,24,26.15V24.48a.73.73,0,0,1,.73-.7,9.89,9.89,0,0,0,1.44-.14s.4-.37.44-1.63-.36-1.64-.36-1.64H24.6a.65.65,0,0,1-.75-.51.49.49,0,0,1,0-.17,11.22,11.22,0,0,1,0-1.64,4.78,4.78,0,0,0-3.25,0C20.58,18.74,20.59,19.46,20.59,19.46Z" transform="translate(2 1.84)"/>
-      </g>
-    </g>
-  </g>
-</svg>`;
+    export const MEDIUM_MOTOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><linearGradient id="linear-gradient" x1="-427.2" y1="440.79" x2="-427.2" y2="440.63" gradientTransform="matrix(44.14 0 0 -44.15 18878.72 19502.57)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a8aaa8"/><stop offset="1" stop-color="#535453"/></linearGradient></defs><g style="isolation:isolate"><g id="svg7610"><g id="Medium_Motor" data-name="Medium Motor"><g id="medmotor_box" data-name="medmotor box"><path id="medmotor_box_wgradient" data-name="medmotor box wgradient" d="M2.57 0h39a2.36 2.36 0 0 1 2.57 2v40.33c0 1-1.1 1.82-2.57 1.82h-39C1.1 44.15 0 43.34 0 42.33V2a2.36 2.36 0 0 1 2.57-2z" transform="translate(2 1.84)" fill="url(#linear-gradient)"/></g><g id="medmotor_star" data-name="medmotor star"><image width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAYAAACcXioiAAAACXBIWXMAAAsSAAALEgHS3X78AAACfElEQVRoQ+2aPXLbMBBG32ZUijlCnDo/R1AukCoHyAFS5Sw5g5t0bnwCu0ofpTZ9A1usvSmwoClRJEEAI4gzejMcqliS+2FB4AMoUVVyISICrIErO3dpgBpoNONDJde9RKTCJf4R+Ga/u9TADbAFalXdkYEsAiz5L8B3nICxCmyBa+Auh4jVVMAUneR/ABugAuRIaIUT9w4TJyLJIpIEWJ+/wrX8Bng7fgViMRtcRR5F5G/KO/FmKiCANa5Vq6nADhXwwY7DrjaLHALgeJcZQ4D32MtulYwil4AYfOXOogKxRLe8p7SAZC4CSnMRUJrBmThwbBbSRxIh4HFDs3VPwIQl7oXj/M1U3BBr3PUAY3aiEZGjVnzPjQZY4mOscbNqjIgGeLDzGINWvBUQaImHSOlGIUZu2IqbgAr4CtwCT8AL7sbndLzgcrvF5Vq1jQ98An5bwNSNSh9PuFw/A+KH0RhLXIo9K96dB1L68SnZs+JLnchaK75UAWA9ZskCgGULUFiugAZ4BJquAB0IPjcUZz9ugNoL8IqSNplOxA74Z0ezUlU1p3eNG5787tocUuaQOZXfAfe4XB9UVVcAqroTkTsLaghzoZ5TuFGPb+jWzA3Z6dBk/Hrgp53nVEJx7vKXnUMq0XBgp/cWNFaJbe+yYXzCoS14SINL/g9hAnors96KbM5Gqy0Dg+MHUNxjo+6z1Hmg5SKgNBcBpSktIGrk6VJSQOsopwLHKCVAed2sqmPnAMgnICaB9sv9VOAYOQTEWPEdGZKHRAFWeu8Q74Fnpjemnnm1xEndBxI/dEOUFe9Z4hSy/FcCZlnxniVOIZsACPhKYaR2my5ZBZTgP7HrUIs43RAaAAAAAElFTkSuQmCC" style="mix-blend-mode:multiply" opacity=".3"/><path id="medmotor_cut-2" data-name="medmotor cut-2" d="M0 21.25A6.21 6.21 0 0 1 6.22 15H15V6.23A6.22 6.22 0 0 1 21.24 0h1.66a6.22 6.22 0 0 1 6.22 6.22V15h8.8a6.21 6.21 0 0 1 6.22 6.22v1.66a6.21 6.21 0 0 1-6.22 6.22h-8.8v8.8a6.21 6.21 0 0 1-6.22 6.22h-1.66A6.22 6.22 0 0 1 15 37.93v-8.8H6.22A6.22 6.22 0 0 1 0 22.92z" transform="translate(2 1.84)" fill="#a8aaa8"/><circle id="medmotor_hole_4" data-name="medmotor hole 4" cx="39.77" cy="24" r="4.85" fill="#393939"/><circle id="medmotor_hole_3" data-name="medmotor hole 3" cx="8.37" cy="24" r="4.85" fill="#393939"/><circle id="medmotor_hole_2" data-name="medmotor hole 2" cx="24.15" cy="8.22" r="4.85" fill="#393939"/><circle id="medmotor_hole_1" data-name="medmotor hole 1" cx="24.15" cy="39.62" r="4.85" fill="#393939"/></g><g id="medmotor_red" data-name="medmotor red"><circle cx="24.3" cy="24" r="6.75" fill="#d42715"/><circle cx="24.3" cy="24" r="6.63" fill="none" stroke="#a20800" stroke-width=".25"/></g><path id="medmotor_Hole" data-name="medmotor Hole" d="M20.59 19.46s-.05 1-.77 1h-1.46a2.38 2.38 0 0 0-.45 1.69c0 1.27.36 1.6.36 1.6h1.62a.64.64 0 0 1 .7.59.21.21 0 0 1 0 .11v1.67a4 4 0 0 0 1.77.29 6.88 6.88 0 0 0 1.64-.26v-1.67a.73.73 0 0 1 .73-.7 9.89 9.89 0 0 0 1.44-.14s.4-.37.44-1.63-.36-1.64-.36-1.64H24.6a.65.65 0 0 1-.75-.51.49.49 0 0 1 0-.17 11.22 11.22 0 0 1 0-1.64 4.78 4.78 0 0 0-3.25 0c-.02.69-.01 1.41-.01 1.41z" transform="translate(2 1.84)"/></g></g></g></svg>`;
 }

sim/visuals/assets/Portsvg.ts

@@ -1,13 +1,4 @@
 
 namespace pxsim.visuals {
-  export const PORT_SVG = `<svg id="svg6348" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.96 58.93">
-  <title>port</title>
-  <g id="icn_port" data-name="icn port">
-    <path id="port_2" data-name="port 2" d="M4.48,0h50V58.93h-50Z" transform="translate(-4.48)" style="fill: #eaeaea"/>
-    <path id="port_1" data-name="port 1" d="M9.74,46.49V18.66H26.85V11.75h4.72V2.59H44.49v8.82h5.06V46.49h-8v7.43H38.9V46.41h-2v7.5H34.71v-7.5H32.55v7.5h-2.1v-7.5H28.6v7.5H26.5v-7.5H24.68v7.5H22.22v-7.5H20.54v7.5H18V46.46Z" transform="translate(-4.48)" style="fill: #a8aaa8"/>
-    <g id="text10060" style="isolation: isolate">
-      <text id="port_text" class="user-select-none" transform="translate(22.21 40.2)" style="isolation: isolate;font-size: 16px;fill: white;font-family: ArialMT, Arial">B</text>
-    </g>
-  </g>
-</svg>`;
+  export const PORT_SVG = `<svg id="svg6348" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.96 58.93"><g id="icn_port" data-name="icn port"><path id="port_2" data-name="port 2" d="M4.48 0h50v58.93h-50z" transform="translate(-4.48)" fill="#eaeaea"/><path id="port_1" data-name="port 1" d="M9.74 46.49V18.66h17.11v-6.91h4.72V2.59h12.92v8.82h5.06v35.08h-8v7.43H38.9v-7.51h-2v7.5h-2.19v-7.5h-2.16v7.5h-2.1v-7.5H28.6v7.5h-2.1v-7.5h-1.82v7.5h-2.46v-7.5h-1.68v7.5H18v-7.45z" transform="translate(-4.48)" fill="#a8aaa8"/><g id="text10060" style="isolation:isolate"><text id="port_text" transform="translate(22.21 40.2)" style="isolation:isolate" font-size="16" fill="#fff" font-family="ArialMT,Arial">B</text></g></g></svg>`;
 }

sim/visuals/assets/RemoteSvg.ts

@@ -1,100 +1,3 @@
 namespace pxsim.visuals {
-    export const REMOVE_SVG = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="123.773" viewBox="0 0 21.166666 32.748275" id="svg10208">
-    <defs id="defs10202">
-      <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -2.30835 7.23512 0 1161.6036 852.6532)" id="linearGradient9407">
-        <stop offset="0" id="stop9403" stop-color="#a9aba9"/>
-        <stop offset="1" id="stop9405" stop-color="#848484"/>
-      </linearGradient>
-      <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 2.61718 -8.4555 0 1161.6036 932.34937)" id="linearGradient9387">
-        <stop offset="0" id="stop9383" stop-color="#303030"/>
-        <stop offset="1" id="stop9385" stop-color="#777"/>
-      </linearGradient>
-      <clipPath id="clipPath9357">
-        <path d="M0 1145.871h1366V0H0z" id="path9355"/>
-      </clipPath>
-      <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(124.418 344.320607 757.342015) scale(10.33459)" id="linearGradient9347">
-        <stop offset="0" id="stop9343" stop-color="#fff"/>
-        <stop offset="1" id="stop9345" stop-color="#9e9e9e"/>
-      </linearGradient>
-      <clipPath id="clipPath9305">
-        <path d="M0 1145.871h1366V0H0z" id="path9303"/>
-      </clipPath>
-      <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -5.71338 10.23004 0 1161.4999 872.46655)" id="linearGradient9295">
-        <stop offset="0" id="stop9291" stop-color="#f2f2f2"/>
-        <stop offset="1" id="stop9293" stop-color="#7a7a7a"/>
-      </linearGradient>
-      <clipPath id="clipPath9273">
-        <path d="M0 1145.871h1366V0H0z" id="path9271"/>
-      </clipPath>
-    </defs>
-    <g id="layer1" transform="translate(0 -264.2517)">
-      <g transform="matrix(.38484 0 0 -.38484 -436.41402 624.06906)" id="g9267">
-        <g id="g9269" clip-path="url(#clipPath9273)">
-          <g id="g9275" transform="translate(1188.0205 889.5135)">
-            <path d="M0 0h-53.041c-.541 0-.98.254-.98.566v29.585c0 .313.439.566.98.566H0c.541 0 .979-.253.979-.566V.566C.979.254.541 0 0 0" id="path9277" fill="#f2f2f2"/>
-          </g>
-        </g>
-      </g>
-      <g transform="matrix(.38484 0 0 -.38484 -436.41402 624.06906)" id="g9279">
-        <g id="g9281">
-          <g id="g9287">
-            <g id="g9289">
-              <path d="M1134.979 898.024c-.541 0-.979-.254-.979-.567v-29.584c0-.313.438-.567.979-.567h53.042c.541 0 .979.254.979.567v29.584c0 .313-.438.567-.979.567z" id="path9297" fill="url(#linearGradient9295)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <path d="M19.009995 291.64843H2.236527v-22.20479h16.773468z" id="path9307" fill="#f2f2f2" stroke-width=".384845"/>
-      <g id="g9309" transform="matrix(.38484 0 0 -.38484 11.821398 288.69324)">
-        <path d="M0 0h-6.642c-.687 0-1.245.558-1.245 1.246v12.867c0 .688.558 1.246 1.245 1.246H0c.687 0 1.245-.558 1.245-1.246V1.246C1.245.558.687 0 0 0" id="path9311" fill="#f22a21"/>
-      </g>
-      <path d="M6.251333 274.21366c-.838192 0-1.517581.67957-1.517581 1.51814v3.53633h3.083082v-3.53633c0-.83857-.67939-1.51814-1.517582-1.51814z" id="topleft" fill="#a9aba9" stroke-width=".384845"/>
-      <path d="M4.733752 281.18484v3.72518c0 .8378.679389 1.51702 1.517581 1.51702h.04792c.838192 0 1.51758-.67922 1.51758-1.51702v-3.72518z" id="bottomleft" fill="#a9aba9" stroke-width=".384845"/>
-      <g id="g9327" transform="matrix(.38484 0 0 -.38484 7.497511 280.74023)">
-        <path d="M0 0h-6.352c-.229 0-.415.186-.415.416v1.717c0 .229.186.415.415.415H0c.229 0 .415-.186.415-.415V.416C.415.186.229 0 0 0" id="path9329" fill="#f22a21"/>
-      </g>
-      <g transform="matrix(.38484 0 0 -.38484 -436.41402 624.06906)" id="g9331">
-        <g id="g9333">
-          <g id="g9339">
-            <g id="g9341">
-              <path d="M1157.731 904.68c0-2.042 1.655-3.697 3.696-3.697 2.043 0 3.698 1.655 3.698 3.697 0 2.041-1.655 3.697-3.698 3.697-2.041 0-3.696-1.656-3.696-3.697" id="path9349" fill="url(#linearGradient9347)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="g9359" transform="matrix(.38484 0 0 -.38484 10.555605 276.77113)">
-        <path d="M0 0c-1.239 0-2.244 1.004-2.244 2.244 0 1.239 1.005 2.244 2.244 2.244 1.24 0 2.244-1.005 2.244-2.244C2.244 1.004 1.24 0 0 0" id="path9361" fill="#f22a21"/>
-      </g>
-      <g id="centerbeacon" transform="matrix(.38484 0 0 -.38484 15.001642 273.1773)">
-        <path d="M0 0h-23.265l-3.683 4.151v6.736H3.684V4.151z" id="path9365" fill="#a9aba9"/>
-      </g>
-      <path d="M12.061234 283.61556H9.025961v-.47952h3.035273z" id="path9367" fill="#b42e29" stroke-width=".384845"/>
-      <path d="M12.061234 284.49416H9.025961v-.47913h3.035273z" id="path9369" fill="#b42e29" stroke-width=".384845"/>
-      <g transform="matrix(.38484 0 0 -.38484 -436.41402 624.06906)" id="g9371">
-        <g id="g9373">
-          <g id="g9379">
-            <g id="g9381">
-              <path d="M1140.849 934.967c-.573 0-1.038-.466-1.038-1.039v-12.452h43.585v12.452c0 .573-.465 1.039-1.037 1.039z" id="path9389" fill="url(#linearGradient9387)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g transform="matrix(.38484 0 0 -.38484 -436.41402 624.06906)" id="g9391">
-        <g id="g9393">
-          <g id="g9399">
-            <g id="g9401">
-              <path d="M1139.811 863.778v-12.453c0-.803.651-1.453 1.453-1.453h40.679c.803 0 1.453.65 1.453 1.453v12.453z" id="path9409" fill="url(#linearGradient9407)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <path d="M14.877744 274.21376c-.838192 0-1.517581.67957-1.517581 1.51815v3.53632h3.083082v-3.53632c0-.83858-.679389-1.51815-1.517582-1.51815z" id="topright" fill="#a9aba9" stroke-width=".384845"/>
-      <path d="M13.360163 281.18494v3.72518c0 .83781.679389 1.51702 1.517581 1.51702h.04792c.838192 0 1.517581-.67921 1.517581-1.51702v-3.72518z" id="bottomright" fill="#a9aba9" stroke-width=".384845"/>
-      <g id="g9323" transform="matrix(.38484 0 0 -.38484 16.12385 280.74023)">
-        <path d="M0 0h-6.352c-.228 0-.415.186-.415.416v1.717c0 .229.187.415.415.415H0c.229 0 .415-.186.415-.415V.416C.415.186.229 0 0 0" id="path9325" fill="#006db4"/>
-      </g>
-    </g>
-  </svg>  
-    `;
+    export const REMOVE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="123.773" viewBox="0 0 21.167 32.748" id="svg10208"><defs id="defs10202"><linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -2.30835 7.23512 0 1161.604 852.653)" id="linearGradient9407"><stop offset="0" id="stop9403" stop-color="#a9aba9"/><stop offset="1" id="stop9405" stop-color="#848484"/></linearGradient><linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 2.61718 -8.4555 0 1161.604 932.35)" id="linearGradient9387"><stop offset="0" id="stop9383" stop-color="#303030"/><stop offset="1" id="stop9385" stop-color="#777"/></linearGradient><clipPath id="clipPath9357"><path d="M0 1145.871h1366V0H0z" id="path9355"/></clipPath><linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(124.418 344.32 757.342) scale(10.33459)" id="linearGradient9347"><stop offset="0" id="stop9343" stop-color="#fff"/><stop offset="1" id="stop9345" stop-color="#9e9e9e"/></linearGradient><clipPath id="clipPath9305"><path d="M0 1145.871h1366V0H0z" id="path9303"/></clipPath><linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -5.71338 10.23004 0 1161.5 872.467)" id="linearGradient9295"><stop offset="0" id="stop9291" stop-color="#f2f2f2"/><stop offset="1" id="stop9293" stop-color="#7a7a7a"/></linearGradient><clipPath id="clipPath9273"><path d="M0 1145.871h1366V0H0z" id="path9271"/></clipPath></defs><g id="layer1" transform="translate(0 -264.252)"><g transform="matrix(.38484 0 0 -.38484 -436.414 624.07)" id="g9267"><g id="g9269" clip-path="url(#clipPath9273)"><g id="g9275" transform="translate(1188.02 889.514)"><path d="M0 0h-53.041c-.541 0-.98.254-.98.566v29.585c0 .313.439.566.98.566H0c.541 0 .979-.253.979-.566V.566C.979.254.541 0 0 0" id="path9277" fill="#f2f2f2"/></g></g></g><g transform="matrix(.38484 0 0 -.38484 -436.414 624.07)" id="g9279"><g id="g9281"><g id="g9287"><g id="g9289"><path d="M1134.979 898.024c-.541 0-.979-.254-.979-.567v-29.584c0-.313.438-.567.979-.567h53.042c.541 0 .979.254.979.567v29.584c0 .313-.438.567-.979.567z" id="path9297" fill="url(#linearGradient9295)"/></g></g></g></g><path d="M19.01 291.648H2.237v-22.204H19.01z" id="path9307" fill="#f2f2f2" stroke-width=".385"/><g id="g9309" transform="matrix(.38484 0 0 -.38484 11.821 288.693)"><path d="M0 0h-6.642c-.687 0-1.245.558-1.245 1.246v12.867c0 .688.558 1.246 1.245 1.246H0c.687 0 1.245-.558 1.245-1.246V1.246C1.245.558.687 0 0 0" id="path9311" fill="#f22a21"/></g><path d="M6.251 274.214c-.838 0-1.517.68-1.517 1.518v3.536h3.083v-3.536c0-.839-.68-1.518-1.518-1.518z" id="topleft" fill="#a9aba9" stroke-width=".385"/><path d="M4.734 281.185v3.725c0 .838.68 1.517 1.517 1.517H6.3c.838 0 1.518-.68 1.518-1.517v-3.725z" id="bottomleft" fill="#a9aba9" stroke-width=".385"/><g id="g9327" transform="matrix(.38484 0 0 -.38484 7.498 280.74)"><path d="M0 0h-6.352a.415.415 0 0 0-.415.416v1.717c0 .229.186.415.415.415H0a.415.415 0 0 0 .415-.415V.416A.415.415 0 0 0 0 0" id="path9329" fill="#f22a21"/></g><g transform="matrix(.38484 0 0 -.38484 -436.414 624.07)" id="g9331"><g id="g9333"><g id="g9339"><g id="g9341"><path d="M1157.731 904.68a3.697 3.697 0 1 1 7.393 0 3.697 3.697 0 0 1-7.393 0" id="path9349" fill="url(#linearGradient9347)"/></g></g></g></g><g id="g9359" transform="matrix(.38484 0 0 -.38484 10.556 276.771)"><path d="M0 0a2.244 2.244 0 1 0 0 4.488A2.244 2.244 0 0 0 0 0" id="path9361" fill="#f22a21"/></g><g id="centerbeacon" transform="matrix(.38484 0 0 -.38484 15.002 273.177)"><path d="M0 0h-23.265l-3.683 4.151v6.736H3.684V4.151z" id="path9365" fill="#a9aba9"/></g><path d="M12.061 283.616H9.026v-.48h3.035z" id="path9367" fill="#b42e29" stroke-width=".385"/><path d="M12.061 284.494H9.026v-.479h3.035z" id="path9369" fill="#b42e29" stroke-width=".385"/><g transform="matrix(.38484 0 0 -.38484 -436.414 624.07)" id="g9371"><g id="g9373"><g id="g9379"><g id="g9381"><path d="M1140.849 934.967a1.04 1.04 0 0 1-1.038-1.039v-12.452h43.585v12.452c0 .573-.465 1.039-1.037 1.039z" id="path9389" fill="url(#linearGradient9387)"/></g></g></g></g><g transform="matrix(.38484 0 0 -.38484 -436.414 624.07)" id="g9391"><g id="g9393"><g id="g9399"><g id="g9401"><path d="M1139.811 863.778v-12.453c0-.803.651-1.453 1.453-1.453h40.679c.803 0 1.453.65 1.453 1.453v12.453z" id="path9409" fill="url(#linearGradient9407)"/></g></g></g></g><path d="M14.878 274.214c-.838 0-1.518.68-1.518 1.518v3.536h3.083v-3.536c0-.839-.68-1.518-1.517-1.518z" id="topright" fill="#a9aba9" stroke-width=".385"/><path d="M13.36 281.185v3.725c0 .838.68 1.517 1.518 1.517h.048c.838 0 1.517-.68 1.517-1.517v-3.725z" id="bottomright" fill="#a9aba9" stroke-width=".385"/><g id="g9323" transform="matrix(.38484 0 0 -.38484 16.124 280.74)"><path d="M0 0h-6.352a.416.416 0 0 0-.415.416v1.717c0 .229.187.415.415.415H0a.415.415 0 0 0 .415-.415V.416A.415.415 0 0 0 0 0" id="path9325" fill="#006db4"/></g></g></svg>`;
 }

sim/visuals/assets/gyro.svg

@@ -32,7 +32,7 @@
                     <path id="gyro_white_1" data-name="gyro white 1" d="M13.52,55.52H46.28v3a2,2,0,0,1-2,2H15.49a2,2,0,0,1-2-2h0Z" transform="translate(-11.5 1.52)" style="opacity: 0.600000023841858;isolation: isolate;fill: url(#linear-gradient)"/>
                   </g>
                   <g id="gyro_white_small" data-name="gyro white small">
-                    <path d="M37.94,60.85H21.71a7.84,7.84,0,0,1-1.26-.24,3.14,3.14,0,0,1-1-.38l1.25-1a1.8,1.8,0,0,1,1.05-.36H37.94a1,1,0,0,1,.6.33l.16.15L40,60.49a2.47,2.47,0,0,1-.93.25A11.33,11.33,0,0,1,37.94,60.85Z" transform="translate(-11.5 1.52)" style="fill: url(#linear-gradient-2)"/>
+                    <path id="gyro_white_small_path" d="M37.94,60.85H21.71a7.84,7.84,0,0,1-1.26-.24,3.14,3.14,0,0,1-1-.38l1.25-1a1.8,1.8,0,0,1,1.05-.36H37.94a1,1,0,0,1,.6.33l.16.15L40,60.49a2.47,2.47,0,0,1-.93.25A11.33,11.33,0,0,1,37.94,60.85Z" transform="translate(-11.5 1.52)" style="fill: url(#linear-gradient-2)"/>
                     <path d="M37.94,60.73a9,9,0,0,0,1.85-.27L38.62,59.4l-.17-.14c-.18-.17-.34-.31-.51-.31H21.71a1.68,1.68,0,0,0-1,.34l-1.11.93a8.7,8.7,0,0,0,2.08.51H37.94m0,.25H21.71c-.34,0-2.46-.44-2.46-.78l1.33-1.1a1.88,1.88,0,0,1,1.13-.4H37.94c.33,0,.57.29.84.51l1.4,1.26C40.18,60.81,38.27,61,37.94,61Z" transform="translate(-11.5 1.52)" style="fill: #9a9a9a"/>
                   </g>
                 </g>

sim/visuals/assets/gyrosvg.ts

@@ -1,54 +1,4 @@
 namespace pxsim {
 
-    export const GYRO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 37 62.5">
-  <defs>
-    <clipPath id="clip-path" transform="translate(-11.5 1.52)">
-      <path d="M21.71,61a8.91,8.91,0,0,1-2-.46H15.49a2,2,0,0,1-2-2h0V54h-.76a.76.76,0,0,1-.76-.76V7a.76.76,0,0,1,.76-.76h.76V2a2,2,0,0,1,2-2H28.14V.61h3.42V0H44.31a2,2,0,0,1,2,2h0V6.22h.91A.76.76,0,0,1,48,7h0V53.24a.76.76,0,0,1-.76.76h-.91v4.55a2,2,0,0,1-2,2H40.17c-.18.3-1.91.46-2.23.46Z" style="fill: none"/>
-    </clipPath>
-    <linearGradient id="linear-gradient" x1="-438.91" y1="1403.05" x2="-438.91" y2="1402.05" gradientTransform="matrix(32.76, 0, 0, -5.01, 14410.48, 7079.21)" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#fff" stop-opacity="0"/>
-      <stop offset="1" stop-color="#3e3e3e"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient-2" x1="-468.07" y1="2985.3" x2="-468.07" y2="2984.3" gradientTransform="matrix(20.61, 0, 0, -2.03, 9674.72, 6104.84)" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#fff"/>
-      <stop offset="1" stop-color="gray"/>
-    </linearGradient>
-  </defs>
-  <title>gyro</title>
-  <g style="isolation: isolate">
-    <g id="svg5788">
-      <g id="gyro">
-        <g id="gyro_total" data-name="gyro total">
-          <g style="clip-path: url(#clip-path)">
-            <g id="gyro_mask_total" data-name="gyro mask total">
-              <g id="gyro_box" data-name="gyro box">
-                <path id="gyro_sides" data-name="gyro sides" d="M12.76,6.22H47.19A.76.76,0,0,1,48,7V53.24a.76.76,0,0,1-.76.76H12.76a.76.76,0,0,1-.76-.76V7A.76.76,0,0,1,12.76,6.22Z" transform="translate(-11.5 1.52)" style="fill: #a8aaa8"/>
-                <rect id="gyro_grey_behind" data-name="gyro grey behind" x="15.52" y="2.13" width="5.76" height="15.77" style="fill: #9a9a9a"/>
-                <g>
-                  <image width="37" height="51" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAA0CAYAAADmI0o+AAAACXBIWXMAAAsSAAALEgHS3X78AAABDklEQVRYR+2ZwU3DQBBF36DcSBHcU0DKohZqoKZwJmkh5jwcNg62iRHfHkEO/0mWbXn99TyytKudyEzukU1/ERFb4AnYzo6epwPeM7OrytkARETQwp6BHRDz734jgQPwEhFv1OQcrhWjfeEO2KMHwleFSnKGYtCC+kNhOn51zsNPo/4Ti6lYTMViKhZTsZhKpdjS+fEm00l8Kf2Kgst5yVpsRIXYcC33ATxe7ldVrkIMxhWDlVJQJwYFMkMqf/5SLKZiMRWLqVhMxWIqFlOxmIrFVCymYjEVi6lYTMViKvcmdm2eTjdVcvjwjzkDJ1rPciTW0fqFULxz80uOwCtwzMyMvvW8sjNbQUeTOgN8AqpBM7JNqq/cAAAAAElFTkSuQmCC" style="opacity: 0.30000000000000004;mix-blend-mode: multiply"/>
-                  <path id="gyro_grey_large-2" data-name="gyro grey large-2" d="M15.49,0H28.15V16l3.42-.26V0H44.31a2,2,0,0,1,2,2h0V45.81a2,2,0,0,1-2,2H15.49a2,2,0,0,1-2-2h0V2a2,2,0,0,1,2-2Z" transform="translate(-11.5 1.52)" style="fill: #a8aaa8"/>
-                </g>
-                <g id="gyro_white" data-name="gyro white">
-                  <g id="gyro_white-2" data-name="gyro white-2">
-                    <path id="gyro_white_2" data-name="gyro white 2" d="M14.73,29.58H45.07a1.21,1.21,0,0,1,1.21,1.21h0V58.55a2,2,0,0,1-2,2H15.49a2,2,0,0,1-2-2h0V30.79A1.21,1.21,0,0,1,14.73,29.58Z" transform="translate(-11.5 1.52)" style="fill: #f1f1f1"/>
-                    <path id="gyro_white_1" data-name="gyro white 1" d="M13.52,55.52H46.28v3a2,2,0,0,1-2,2H15.49a2,2,0,0,1-2-2h0Z" transform="translate(-11.5 1.52)" style="opacity: 0.600000023841858;isolation: isolate;fill: url(#linear-gradient)"/>
-                  </g>
-                  <g id="gyro_white_small" data-name="gyro white small">
-                    <path d="M37.94,60.85H21.71a7.84,7.84,0,0,1-1.26-.24,3.14,3.14,0,0,1-1-.38l1.25-1a1.8,1.8,0,0,1,1.05-.36H37.94a1,1,0,0,1,.6.33l.16.15L40,60.49a2.47,2.47,0,0,1-.93.25A11.33,11.33,0,0,1,37.94,60.85Z" transform="translate(-11.5 1.52)" style="fill: url(#linear-gradient-2)"/>
-                    <path d="M37.94,60.73a9,9,0,0,0,1.85-.27L38.62,59.4l-.17-.14c-.18-.17-.34-.31-.51-.31H21.71a1.68,1.68,0,0,0-1,.34l-1.11.93a8.7,8.7,0,0,0,2.08.51H37.94m0,.25H21.71c-.34,0-2.46-.44-2.46-.78l1.33-1.1a1.88,1.88,0,0,1,1.13-.4H37.94c.33,0,.57.29.84.51l1.4,1.26C40.18,60.81,38.27,61,37.94,61Z" transform="translate(-11.5 1.52)" style="fill: #9a9a9a"/>
-                  </g>
-                </g>
-                <g id="gyro_red_elements" data-name="gyro red elements">
-                  <circle id="gyro_reddot" data-name="gyro reddot" cx="18.4" cy="18.97" r="3.03" style="fill: #d42715"/>
-                  <path id="gyro_arrow_2" data-name="gyro arrow 2" d="M21.92,23.36s-3.9-5.13-.76-10.77a9.59,9.59,0,0,0,.91.45c.65.37.74-.3.61-.75l-1.21-3.8-3.8,1.07a1.2,1.2,0,0,0-.45.15c-.2.12-.37.4,0,.61l1.06.6s-4.53,6.65,1.06,14.26C20.94,24,21.92,23.36,21.92,23.36Z" transform="translate(-11.5 1.52)" style="fill: #d42715"/>
-                  <path id="gyro_arrow1" data-name="gyro arrow1" d="M37.84,23.36s3.9-5.13.76-10.77a9.59,9.59,0,0,1-.91.45c-.64.37-.74-.3-.6-.75l1.21-3.8,3.79,1.07a1.31,1.31,0,0,1,.46.15c.2.12.36.4,0,.61l-1.07.6S46,17.57,40.42,25.18C38.83,24,37.84,23.36,37.84,23.36Z" transform="translate(-11.5 1.52)" style="fill: #d42715"/>
-                </g>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>`;
+    export const GYRO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 37 62.5"><defs><clipPath id="clip-path" transform="translate(-11.5 1.52)"><path d="M21.71 61a8.91 8.91 0 0 1-2-.46h-4.22a2 2 0 0 1-2-2V54h-.76a.76.76 0 0 1-.76-.76V7a.76.76 0 0 1 .76-.76h.76V2a2 2 0 0 1 2-2h12.65v.61h3.42V0h12.75a2 2 0 0 1 2 2v4.22h.91A.76.76 0 0 1 48 7v46.24a.76.76 0 0 1-.76.76h-.91v4.55a2 2 0 0 1-2 2h-4.16c-.18.3-1.91.46-2.23.46z" fill="none"/></clipPath><linearGradient id="linear-gradient" x1="-438.91" y1="1403.05" x2="-438.91" y2="1402.05" gradientTransform="matrix(32.76 0 0 -5.01 14410.48 7079.21)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#3e3e3e"/></linearGradient><linearGradient id="linear-gradient-2" x1="-468.07" y1="2985.3" x2="-468.07" y2="2984.3" gradientTransform="matrix(20.61 0 0 -2.03 9674.72 6104.84)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="gray"/></linearGradient></defs><g style="isolation:isolate"><g id="svg5788"><g id="gyro"><g clip-path="url(#clip-path)" id="gyro_total" data-name="gyro total"><g id="gyro_mask_total" data-name="gyro mask total"><g id="gyro_box" data-name="gyro box"><path id="gyro_sides" data-name="gyro sides" d="M12.76 6.22h34.43A.76.76 0 0 1 48 7v46.24a.76.76 0 0 1-.76.76H12.76a.76.76 0 0 1-.76-.76V7a.76.76 0 0 1 .76-.78z" transform="translate(-11.5 1.52)" fill="#a8aaa8"/><path id="gyro_grey_behind" data-name="gyro grey behind" fill="#9a9a9a" d="M15.52 2.13h5.76V17.9h-5.76z"/><image width="37" height="51" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAA0CAYAAADmI0o+AAAACXBIWXMAAAsSAAALEgHS3X78AAABDklEQVRYR+2ZwU3DQBBF36DcSBHcU0DKohZqoKZwJmkh5jwcNg62iRHfHkEO/0mWbXn99TyytKudyEzukU1/ERFb4AnYzo6epwPeM7OrytkARETQwp6BHRDz734jgQPwEhFv1OQcrhWjfeEO2KMHwleFSnKGYtCC+kNhOn51zsNPo/4Ti6lYTMViKhZTsZhKpdjS+fEm00l8Kf2Kgst5yVpsRIXYcC33ATxe7ldVrkIMxhWDlVJQJwYFMkMqf/5SLKZiMRWLqVhMxWIqFlOxmIrFVCymYjEVi6lYTMViKvcmdm2eTjdVcvjwjzkDJ1rPciTW0fqFULxz80uOwCtwzMyMvvW8sjNbQUeTOgN8AqpBM7JNqq/cAAAAAElFTkSuQmCC" style="mix-blend-mode:multiply" opacity=".3"/><path id="gyro_grey_large-2" data-name="gyro grey large-2" d="M15.49 0h12.66v16l3.42-.26V0h12.74a2 2 0 0 1 2 2v43.81a2 2 0 0 1-2 2H15.49a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z" transform="translate(-11.5 1.52)" fill="#a8aaa8"/><g id="gyro_white" data-name="gyro white"><g id="gyro_white-2" data-name="gyro white-2"><path id="gyro_white_2" data-name="gyro white 2" d="M14.73 29.58h30.34a1.21 1.21 0 0 1 1.21 1.21v27.76a2 2 0 0 1-2 2H15.49a2 2 0 0 1-2-2V30.79a1.21 1.21 0 0 1 1.24-1.21z" transform="translate(-11.5 1.52)" fill="#f1f1f1"/><path id="gyro_white_1" data-name="gyro white 1" d="M13.52 55.52h32.76v3a2 2 0 0 1-2 2H15.49a2 2 0 0 1-2-2z" transform="translate(-11.5 1.52)" style="isolation:isolate" opacity=".6" fill="url(#linear-gradient)"/></g><g id="gyro_white_small" data-name="gyro white small"><path id="gyro_white_small_path" d="M37.94 60.85H21.71a7.84 7.84 0 0 1-1.26-.24 3.14 3.14 0 0 1-1-.38l1.25-1a1.8 1.8 0 0 1 1.05-.36h16.19a1 1 0 0 1 .6.33l.16.15 1.3 1.14a2.47 2.47 0 0 1-.93.25 11.33 11.33 0 0 1-1.13.11z" transform="translate(-11.5 1.52)" fill="url(#linear-gradient-2)"/><path d="M37.94 60.73a9 9 0 0 0 1.85-.27l-1.17-1.06-.17-.14c-.18-.17-.34-.31-.51-.31H21.71a1.68 1.68 0 0 0-1 .34l-1.11.93a8.7 8.7 0 0 0 2.08.51h16.26m0 .25H21.71c-.34 0-2.46-.44-2.46-.78l1.33-1.1a1.88 1.88 0 0 1 1.13-.4h16.23c.33 0 .57.29.84.51l1.4 1.26c0 .34-1.91.53-2.24.53z" transform="translate(-11.5 1.52)" fill="#9a9a9a"/></g></g><g id="gyro_red_elements" data-name="gyro red elements" fill="#d42715"><circle id="gyro_reddot" data-name="gyro reddot" cx="18.4" cy="18.97" r="3.03"/><path id="gyro_arrow_2" data-name="gyro arrow 2" d="M21.92 23.36s-3.9-5.13-.76-10.77a9.59 9.59 0 0 0 .91.45c.65.37.74-.3.61-.75l-1.21-3.8-3.8 1.07a1.2 1.2 0 0 0-.45.15c-.2.12-.37.4 0 .61l1.06.6s-4.53 6.65 1.06 14.26c1.6-1.18 2.58-1.82 2.58-1.82z" transform="translate(-11.5 1.52)"/><path id="gyro_arrow1" data-name="gyro arrow1" d="M37.84 23.36s3.9-5.13.76-10.77a9.59 9.59 0 0 1-.91.45c-.64.37-.74-.3-.6-.75l1.21-3.8 3.79 1.07a1.31 1.31 0 0 1 .46.15c.2.12.36.4 0 .61l-1.07.6s4.52 6.65-1.06 14.26c-1.59-1.18-2.58-1.82-2.58-1.82z" transform="translate(-11.5 1.52)"/></g></g></g></g></g></g></g></svg>`;
 }

sim/visuals/assets/infraredsvg.ts

@@ -1,64 +1,3 @@
 namespace pxsim {
-    export const INFRARED_SVG = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="83" height="34.662998" viewBox="0 0 21.960417 9.171252" id="svg9433">
-    <defs id="defs9427">
-      <clipPath id="clipPath9203">
-        <path d="M0 1145.871h1366V0H0z" id="path9201"/>
-      </clipPath>
-      <clipPath id="clipPath9215">
-        <path d="M737.191 1004.92h12.59v-18.959h-12.59z" id="path9213"/>
-      </clipPath>
-      <clipPath id="clipPath9233">
-        <path d="M741.135 1011.29h5.158v-5.16h-5.158z" id="path9231"/>
-      </clipPath>
-      <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.66153 2.43973 -2.43973 -2.66153 745.59473 1006.9893)" id="linearGradient9243">
-        <stop offset="0" id="stop9239" stop-color="#f2f2f2"/>
-        <stop offset="1" id="stop9241" stop-color="#7a7a7a"/>
-      </linearGradient>
-    </defs>
-    <g id="layer1" transform="translate(0 -287.82875)">
-      <g id="g10128" transform="translate(-62.249591 173.06003) scale(.74516)">
-        <path id="path9195" d="M92.414417 162.9553h13.538203v2.51495H92.414417z" fill="#1f1f1f" stroke-width=".352778"/>
-        <g id="g9197" transform="matrix(.35278 0 0 -.35278 -164.0649 511.69022)">
-          <g clip-path="url(#clipPath9203)" id="g9199">
-            <g transform="translate(719.4443 1013.8715)" id="g9205">
-              <path id="path9207" d="M0 0h48.387c9.634.073 17.503-7.678 17.575-17.312.073-9.633-7.678-17.502-17.312-17.575-.087-.001-.175-.001-.263 0h-5.716l-7.482 6.977H13.803l-6.827-6.977H0c-9.634-.073-17.503 7.678-17.576 17.311C-17.648-7.942-9.898-.073-.265 0H0"/>
-            </g>
-            <g id="g9209">
-              <g id="g9221">
-                <g id="g9219" clip-path="url(#clipPath9215)" opacity=".057999">
-                  <path id="path9217" d="M737.191 1004.922h12.59v-18.961h-12.59z" fill="#fff"/>
-                </g>
-              </g>
-            </g>
-            <g transform="translate(728.0898 1013.8715)" id="g9223">
-              <path id="path9225" d="M0 0h31.101v-1.288L21.7-10.315H9.101L0-1.288z" fill="#1f1f1f"/>
-            </g>
-            <g id="g9227">
-              <g id="g9257">
-                <g id="g9255" clip-path="url(#clipPath9233)" opacity=".261002">
-                  <g id="g9253">
-                    <g id="g9251">
-                      <g id="g9249">
-                        <g id="g9247">
-                          <path id="path9245" d="M743.714 1011.292c1.425 0 2.579-1.154 2.579-2.579 0-1.424-1.154-2.579-2.579-2.579-1.424 0-2.579 1.155-2.579 2.579 0 1.425 1.155 2.579 2.579 2.579" fill="url(#linearGradient9243)"/>
-                        </g>
-                      </g>
-                    </g>
-                  </g>
-                </g>
-              </g>
-            </g>
-            <g transform="translate(709.8887 997.7933)" id="g9259">
-              <path id="path9261" d="M0 0h14.106l2.275-2.427h-4.248L10.616-.759H0z" fill="#d52715"/>
-            </g>
-            <g transform="translate(777.5391 997.7933)" id="g9263">
-              <path id="path9265" d="M0 0h-14.106l-2.275-2.427h4.246l1.518 1.668H.001z" fill="#d52715"/>
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-  </svg>
-      `;
+    export const INFRARED_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="83" height="34.663" viewBox="0 0 21.96 9.171" id="svg9433"><defs id="defs9427"><clipPath id="clipPath9203"><path d="M0 1145.871h1366V0H0z" id="path9201"/></clipPath><clipPath id="clipPath9215"><path d="M737.191 1004.92h12.59v-18.959h-12.59z" id="path9213"/></clipPath><clipPath id="clipPath9233"><path d="M741.135 1011.29h5.158v-5.16h-5.158z" id="path9231"/></clipPath><linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="scale(-3.61054) rotate(-42.51 -461.754 125.99)" id="linearGradient9243"><stop offset="0" id="stop9239" stop-color="#f2f2f2"/><stop offset="1" id="stop9241" stop-color="#7a7a7a"/></linearGradient></defs><g id="layer1" transform="translate(0 -287.829)"><g id="g10128" transform="translate(-62.25 173.06) scale(.74516)"><path id="path9195" d="M92.414 162.955h13.539v2.515H92.414z" fill="#1f1f1f" stroke-width=".353"/><g id="g9197" transform="matrix(.35278 0 0 -.35278 -164.065 511.69)"><g clip-path="url(#clipPath9203)" id="g9199"><g transform="translate(719.444 1013.871)" id="g9205"><path id="path9207" d="M0 0h48.387c9.634.073 17.503-7.678 17.575-17.312.073-9.633-7.678-17.502-17.312-17.575a11.528 11.528 0 0 0-.263 0h-5.716l-7.482 6.977H13.803l-6.827-6.977H0c-9.634-.073-17.503 7.678-17.576 17.311C-17.648-7.942-9.898-.073-.265 0H0"/></g><g id="g9209"><g id="g9221"><g id="g9219" clip-path="url(#clipPath9215)" opacity=".058"><path id="path9217" d="M737.191 1004.922h12.59v-18.961h-12.59z" fill="#fff"/></g></g></g><g transform="translate(728.09 1013.871)" id="g9223"><path id="path9225" d="M0 0h31.101v-1.288L21.7-10.315H9.101L0-1.288z" fill="#1f1f1f"/></g><g id="g9227"><g id="g9257"><g id="g9255" clip-path="url(#clipPath9233)" opacity=".261"><g id="g9253"><g id="g9251"><g id="g9249"><g id="g9247"><path id="path9245" d="M743.714 1011.292a2.578 2.578 0 1 0 0-5.158 2.58 2.58 0 0 0 0 5.158" fill="url(#linearGradient9243)"/></g></g></g></g></g></g></g><g transform="translate(709.889 997.793)" id="g9259"><path id="path9261" d="M0 0h14.106l2.275-2.427h-4.248L10.616-.759H0z" fill="#d52715"/></g><g transform="translate(777.54 997.793)" id="g9263"><path id="path9265" d="M0 0h-14.106l-2.275-2.427h4.246l1.518 1.668H.001z" fill="#d52715"/></g></g></g></g></g></svg>`;
 }

sim/visuals/board.ts

@@ -109,7 +109,7 @@ namespace pxsim.visuals {
         }
     });
 
-    export function randomTheme(): IBoardTheme {
+    export function randomTheme(highContrast?: boolean, light?: boolean): IBoardTheme {
         return themes[Math.floor(Math.random() * themes.length)];
     }
 
@@ -303,7 +303,7 @@ namespace pxsim.visuals {
             this.wrapper = document.createElement('div');
             this.wrapper.style.display = 'inline';
 
-            this.element = svg.elt("svg", { height: "100%", width: "100%" }) as SVGSVGElement;
+            this.element = svg.elt("svg", { height: "100%", width: "100%", "class": "user-select-none" }) as SVGSVGElement;
 
             this.defs = svg.child(this.element, "defs") as SVGDefsElement;
 
@@ -391,6 +391,9 @@ namespace pxsim.visuals {
                     cancelAnimationFrame(animationId);
                 })
             }
+            // Kill the brick
+            this.layoutView.getBrick().kill();
+
             // Save previous inputs for the next cycle
             EV3View.previousSelectedInputs = ev3board().getInputNodes().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1)
             EV3View.previousSeletedOutputs = ev3board().getMotors().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1);

sim/visuals/boardview.ts

@@ -2,7 +2,7 @@ namespace pxsim.visuals {
     mkBoardView = (opts: BoardViewOptions): BoardView => {
         return new visuals.EV3View({
             runtime: runtime,
-            theme: visuals.randomTheme(),
+            theme: visuals.randomTheme(opts.highContrast, opts.light),
             disableTilt: false,
             wireframe: opts.wireframe,
         });

sim/visuals/nodes/brickView.ts

@@ -13,6 +13,9 @@ namespace pxsim.visuals {
         private currentCanvasX = 178;
         private currentCanvasY = 128;
 
+        private static LIGHT_BLACK_COLOR = '#6a6a6a';
+        private static LIGHT_RED_COLOR = '#6a6a6a';
+
         constructor(port: number) {
             super(EV3_SVG, "board", NodeType.Brick, port);
         }
@@ -26,9 +29,16 @@ namespace pxsim.visuals {
             this.light = this.content.getElementById(this.normalizeId(BrickView.EV3_LIGHT_ID)) as SVGElement;
         }
 
-        private setStyleFill(svgId: string, fillUrl: string) {
+        protected optimizeForLightMode() {
+            (this.content.getElementById(this.normalizeId('ev3_body_2')) as SVGElement).style.fill = '#f1f1f1';
+            (this.content.getElementById(this.normalizeId('ev3_screen_grey')) as SVGElement).style.fill = '#a8aaa8';
+            (this.content.getElementById(this.normalizeId('ev3_grey_buttom')) as SVGElement).style.fill = '#a8aaa8';
+            (this.content.getElementById(this.normalizeId('btn_part_2')) as SVGElement).style.fill = '#393939';
+        }
+
+        private setStyleFill(svgId: string, fillUrl: string, lightFill?: string) {
             const el = (this.content.getElementById(svgId) as SVGRectElement);
-            if (el) el.style.fill = `url("#${fillUrl}")`;
+            if (el) el.style.fill = inLightMode() ? lightFill || BrickView.LIGHT_BLACK_COLOR : `url("#${fillUrl}")`;
         }
 
         public hasClick() {
@@ -64,15 +74,15 @@ namespace pxsim.visuals {
                     //svg.fill(this.light, "#FFF");
                     break;
                 case 1:  // LED_GREEN
-                    this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-green`));
+                    this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-green`), 'green');
                     //svg.fill(this.light, "#00ff00");
                     break;
                 case 2:  // LED_RED
-                    this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-red`));
+                    this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-red`), 'red');
                     //svg.fill(this.light, "#ff0000");
                     break;
                 case 3:  // LED_ORANGE
-                    this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-orange`));
+                    this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-orange`), 'orange');
                     //svg.fill(this.light, "#FFA500");
                     break;
                 case 4:  // LED_GREEN_FLASH
@@ -120,14 +130,13 @@ namespace pxsim.visuals {
         private flash: boolean;
         private flashLightAnimationStep(id: string) {
             if (this.flash) {
-                this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`));
+                this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`), id);
             } else {
                 this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`));
             }
             this.flash = !this.flash;
         }
 
-
         private pulseLightAnimation(id: string) {
             const pattern = this.lastLightPattern;
             let fps = 8;
@@ -153,21 +162,24 @@ namespace pxsim.visuals {
         private pulse: number = 0;
         private pulseLightAnimationStep(id: string) {
             switch (this.pulse) {
-                case 0: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
                 case 1: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
                 case 2: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
                 case 3: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
                 case 4: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
-                case 5: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`)); break;
-                case 6: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`)); break;
+                case 5: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`), id); break;
+                case 6: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`), id); break;
                 case 7: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
-                case 8: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`)); break;
+                case 8: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`), id); break;
 
             }
             this.pulse++;
             if (this.pulse == 9) this.pulse = 0;
         }
 
+        public kill() {
+            cancelAnimationFrame(this.lastLightAnimationId);
+        }
+
         public attachEvents() {
             let bpState = ev3board().getBrickNode().buttonState;
             let stateButtons = bpState.buttons;

sim/visuals/nodes/colorSensorView.ts

@@ -9,6 +9,10 @@ namespace pxsim.visuals {
             super(COLOR_SENSOR_SVG, "color", NodeType.ColorSensor, port);
         }
 
+        protected optimizeForLightMode() {
+            (this.content.getElementById(this.normalizeId('color_bigbox-2_path')) as SVGElement).style.fill = '#a8aaa8';
+        }
+
         public getPaddingRatio() {
             return 1 / 4;
         }

sim/visuals/nodes/gyroSensorView.ts

@@ -7,6 +7,11 @@ namespace pxsim.visuals {
             super(GYRO_SVG, "gyro", NodeType.GyroSensor, port);
         }
 
+        protected optimizeForLightMode() {
+            (this.content.getElementById(this.normalizeId('gyro_white_1')) as SVGElement).style.fill = '#7B7B7B';
+            (this.content.getElementById(this.normalizeId('gyro_white_small_path')) as SVGElement).style.fill = '#7B7B7B';
+        }
+
         public getPaddingRatio() {
             return 0.3;
         }

sim/visuals/nodes/infraredview.ts

@@ -6,5 +6,9 @@ namespace pxsim.visuals {
         constructor(port: number) {
             super(INFRARED_SVG, "infrared", NodeType.InfraredSensor, port);
         }
+
+        protected optimizeForLightMode() {
+            (this.content.getElementById(this.normalizeId('path9245')) as SVGElement).style.fill = '#f2f2f2';
+        }
     }
 }

sim/visuals/nodes/mediumMotorView.ts

@@ -8,6 +8,10 @@ namespace pxsim.visuals {
             super(MEDIUM_MOTOR_SVG, "medium-motor", NodeType.MediumMotor, port, "medmotor_Hole");
         }
 
+        protected optimizeForLightMode() {
+            (this.content.getElementById(this.normalizeId('medmotor_box_wgradient')) as SVGElement).style.fill = '#a8aaa8';
+        }
+
         public getPaddingRatio() {
             return 1 / 5;
         }

sim/visuals/nodes/moduleView.ts

@@ -55,6 +55,7 @@ namespace pxsim.visuals {
         protected buildDom(): SVGElement {
             this.content = svg.parseString(this.xml);
             this.buildDomCore();
+            if (pxsim.inLightMode()) this.optimizeForLightMode();
             this.attachEvents();
             if (this.hasClick())
                 this.content.style.cursor = "pointer";
@@ -65,6 +66,10 @@ namespace pxsim.visuals {
 
         }
 
+        protected optimizeForLightMode() {
+            
+        }
+
         public getInnerHeight() {
             if (!this.content) {
                 return 0;

sim/visuals/nodes/touchSensorView.ts

@@ -12,10 +12,17 @@ namespace pxsim.visuals {
 
         private xLinkGradients: string[];
 
+        private static LIGHT_TOUCH_BLACK_COLOR = '#000';
+        private static LIGHT_TOUCH_RED_COLOR = '#d42715';
+
         constructor(port: number) {
             super(TOUCH_SENSOR_SVG, "touch", NodeType.TouchSensor, port);
         }
 
+        protected optimizeForLightMode() {
+            (this.content.getElementById(this.normalizeId('touch_box_2-2')) as SVGElement).style.fill = '#a8aaa8';
+        }
+
         public getPaddingRatio() {
             return 1 / 4;
         }
@@ -29,9 +36,9 @@ namespace pxsim.visuals {
             if (el) el.setAttribute(attribute, value);
         }
 
-        private setStyleFill(svgId: string, fillUrl: string) {
+        private setStyleFill(svgId: string, fillUrl: string, lightFill: string) {
             const el = (this.content.getElementById(svgId) as SVGRectElement);
-            if (el) el.style.fill = `url("#${fillUrl}")`;
+            if (el) el.style.fill = inLightMode() ? lightFill : `url("#${fillUrl}")`;
         }
 
         public attachEvents() {
@@ -55,11 +62,11 @@ namespace pxsim.visuals {
         private setPressed(pressed: boolean) {
             if (pressed) {
                 for (let i = 0; i < 4; i ++) {
-                    this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_PRESSED[i])}`);
+                    this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_PRESSED[i])}`, TouchSensorView.LIGHT_TOUCH_BLACK_COLOR);
                 }
             } else {
                 for (let i = 0; i < 4; i ++) {
-                    this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_UNPRESSED[i])}`);
+                    this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_UNPRESSED[i])}`, TouchSensorView.LIGHT_TOUCH_RED_COLOR);
                 }
             }
         }

sim/visuals/view.ts

@@ -249,6 +249,9 @@ namespace pxsim.visuals {
         protected getView() {
             return super.getView();
         }
+
+        public kill() {
+        }
     }
 
     export class ViewContainer extends View {

targetconfig.json

@@ -12,5 +12,13 @@
         "Design Engineering": "design-engineering",
         "Coding": "coding",
         "Maker": "maker"
+    },
+    "electronManifest": {
+        "majorReleases": {
+            "0": {
+                "latest": "v0.1.5",
+                "promptVersion": "v0.1.5"
+            }
+        }
     }
 }

theme/site/globals/site.variables

@@ -131,8 +131,6 @@
 @editorToolsBackground: @legoGreyLight; /* #fff;*/ /* #fcfbfa; */
 @blocklySvgColor: #f9f9f9; /*#f2f6f8;*/ /*ecf6fe;*/ 
 
-@homeScreenBackground: #F2F2F2;
-
 /*-------------------
    Full screen
 --------------------*/
@@ -147,6 +145,13 @@
 @sidedocsButtonsTop: (@mainMenuHeight + 1rem);
 @sidedocsButtonsRight: 4.25rem;
 
+/*-------------------
+   Home screen
+--------------------*/
+
+@homeScreenBackground: #F2F2F2;
+@homeCardBorderColor: #F2F2F2;
+
 /*-------------------
    Editor
 --------------------*/