0.1.8

* Optimize simulator for light mode.

* Add user-select none.

docs/SUMMARY.md

@@ -9,7 +9,7 @@
 * [Coding](/coding)
     * [Autonomous Parking](/coding/autonomous-parking)
     * [Object Detection](/coding/object-detection)
-    * [Line Following](/coding/line-following)
+    * [Line Detection](/coding/line-detection)
         
 * [Design Engineering](/design-engineering)
     * [Make It Move Without Wheels](/design-engineering/make-it-move)

docs/about.md

@@ -27,6 +27,12 @@ so it appears as a mounted drive (named **EV3**).
 Compilation to machine code from [Blocks](/blocks) or [JavaScript](/javascript) happens in the browser. You save the binary 
 program to a **.uf2** file, which you then copy to the **EV3** drive, which flashes the device with the new program.
 
+### ~ hint
+
+Not seeing the **EV3** drive? Make sure to upgrade your firmware at https://ev3manager.education.lego.com/.
+
+### ~
+
 ## Simulator: Test Your Code
 
 You can run your code using the micro:bit simulator, all within the confines of a web browser. 

docs/coding.md

@@ -13,13 +13,13 @@
   "cardType": "side"
 }, {
   "name": "Object Detection",
-  "description": "TBD",
+  "description": "Design ways to avoid accidents between vehicles and objects",
   "url":"/coding/object-detection",
   "imageUrl": "/static/lessons/object-detection.jpg",
   "cardType": "side"
 }, {
-  "name": "Line Following",
-  "description": "TBD",
+  "name": "Line Detection",
+  "description": "Improve driving safety by helping drivers stay on course",
   "url":"/coding/line-detection",
   "imageUrl": "/static/lessons/line-detection.jpg",
   "cardType": "side"

docs/coding/autonomous-parking.md

@@ -16,12 +16,11 @@ Design cars that can park themselves safely without driver intervention.
 
 ### Build
 
-Build a LEGO MINDSTORMS vehicle that can park itself safely without driver intervention.
-Start by constructing this [model](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf).
+Build a LEGO MINDSTORMS vehicle that can park itself safely without driver intervention. Start by constructing this model:
 
-![EV3- Robot Driving Base](/static/coding/autonomous-parking/ev3-robot-driving-base.jpg)
+[![EV3- Robot Driving Base](/static/coding/autonomous-parking/ev3-robot-driving-base.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
 
-### Checks
+### Check
 
 Before you program, check:
 
@@ -65,6 +64,7 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
     loops.pause(3000)
 })
 ```
+
 ### Download and test
 
 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.
@@ -160,7 +160,6 @@ Click Download and follow the instructions to get your code onto your EV3 Brick.
 * Is there a more efficient way to build your program?
 * How can your program be used in real-world scenarios?
 
-
 ## Continue
 
 * Click on the JavaScript tab and experiment with changing the values in the code.

docs/coding/line-detection.md

@@ -16,15 +16,15 @@ Think about:
 
 ### Build
 
-Build a LEGO MINDSTORMS vehicle that can help prevent drivers from falling asleep and causing an accident.
+Build a LEGO MINDSTORMS vehicle that can help prevent drivers from falling asleep and causing an accident. Start by constructing this model:
 
-Start by constructing this [model](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-color-sensor-down-driving-base-d30ed30610c3d6647d56e17bc64cf6e2.pdf):
+[![EV3 robot with color sensor](/static/coding/line-detection/ev3-robot-color-sensor-down.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-color-sensor-down-driving-base-d30ed30610c3d6647d56e17bc64cf6e2.pdf)
 
-![EV3 robot with color sensor](/static/coding/line-detection/ev3-robot-color-sensor-down.jpg)
+Build red and green “lights” for your robot to detect. You can use LEGO bricks, colored tape, or marker on white paper. Building instructions:
 
-Build red and green “lights” for your robot to detect. You can use LEGO bricks, colored tape, or marker on white paper. Read the building [instructions](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/color%20squares-0a88dfd98bb2e64b5b8151fc422bae36.pdf).
+[![IMAGE: Color Squares](/static/coding/line-detection/ev3-color-squares.jpg)](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/color%20squares-0a88dfd98bb2e64b5b8151fc422bae36.pdf)
 
-![IMAGE: Color Squares](/static/coding/line-detection/ev3-color-squares.jpg)
+### Check
 
 Before you program, check:
 
@@ -33,7 +33,7 @@ Before you program, check:
 * Are the wheels rotating freely?
 * Are the wires connected from the Color Sensor to port 3?
 
-![IMAGE: EV3 Driving Base](/static/coding/line-detection/ev3-robot-driving-base.jpg)
+![EV3 Driving Base](/static/coding/line-detection/ev3-robot-driving-base.jpg)
 
 ### Program
 
@@ -126,7 +126,7 @@ music.playSoundEffect(sounds.systemGeneralAlert)
 
 1. Start motors ``B`` and ``C`` (drive forward with a curve toward the line).
 2. Wait for the color sensor to detect the color black.
-3. Play sound effect “System General Alert.”
+3. Play sound effect ``system general alert``.
 4. Start motors ``B`` and ``C`` (drive forward with a curve away from the line).
 5. Wait for the color sensor to detect the color white.
 6. Loop forever.
@@ -141,11 +141,11 @@ loops.forever(function () {
 })
 ```
 
-### Download and test
+#### Download and test
 
 Click **Download** and follow the instructions to get your code onto your EV3 Brick. 
 
-### Differentiation
+#### Differentiation
 
 Program your robot to drive on “autopilot” along a given route. You will need to create a program that recognizes and responds to a dark line (or white line). You will create a line-following program and your robot will need to travel along the line without losing contact with it.
 
@@ -167,14 +167,16 @@ motors.largeBC.steer(0, 50)
 ```block
 if (true) {
 	
+} else {
+
 }
 ```
 
 ### ~
 
-### Sample Solutions
+### Sample Solutions - Line Following in Loop
 
-#### Line Following in Loop
+#### Method 1
 
 1. While the Color Sensor detects the color black, start motors ``B`` and ``C`` (drive forward with a curve toward the line).
 2. While the Color Sensor detects the color white, start motors ``B`` and ``C`` (drive forward with a curve away from the line).
@@ -193,7 +195,7 @@ forever(function () {
 })
 ```
 
-#### Line Following in Loop
+#### Method 2
 
 1. If the Color Sensor detects the color black, start motors ``B`` and ``C`` (drive forward with a curve toward the line).
 Else the Color Sensor detects the color white, start motors ``B`` and ``C`` (drive forward with a curve away from the line).
@@ -235,4 +237,3 @@ Personalize:
 * Add a team photograph! 
 
 Congratulations! What will you design next?
-

docs/coding/object-detection.md

@@ -16,15 +16,15 @@ Think about:
 
 ### Build
 
-Build a LEGO MINDSTORMS vehicle that can avoid accidents between vehicles and objects in the road.
+Build a LEGO MINDSTORMS vehicle that can avoid accidents between vehicles and objects in the road. Start by constructing this model:
 
-Start by constructing this [model](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-ultrasonic-sensor-driving-base-61ffdfa461aee2470b8ddbeab16e2070.pdf).
+[![EV3 Robot Driving Base](/static/coding/object-detection/ev3-robot-driving-base.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-ultrasonic-sensor-driving-base-61ffdfa461aee2470b8ddbeab16e2070.pdf)
 
-![EV3 Robot Driving Base](/static/coding/object-detection/ev3-robot-driving-base.jpg)
+Build an obstacle for your robot to detect. You can build the **cuboid model** out of LEGO bricks or an obstacle of your choice. 
 
-Build an obstacle for your robot to detect. You can build the [cuboid model](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-cuboid-dc93b2e60bed2981e76b3bac9ea04558.pdf) out of LEGO bricks or an obstacle of your choice. 
+[![Cubiod block](/static/coding/object-detection/ev3-cuboid.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-cuboid-dc93b2e60bed2981e76b3bac9ea04558.pdf)
 
-![Cubiod block](/static/coding/object-detection/ev3-cuboid.jpg)
+### Check
 
 Before you program, check:
 
@@ -134,4 +134,4 @@ Click **Download** and follow the instructions to get your code onto your EV3 Br
 * Include an image of your program with comments. 
 * Add a team photograph! 
 
-Congratulations! What will you design next
+Congratulations! What will you design next?

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

@@ -8,9 +8,9 @@ Design, build and program a robotic system that follows a path and communicates
 
 https://www.youtube.com/watch?v=6piMI1JPDQc
 
-*	Robotic systems are built from smaller, related subsystems. Look at the automobile system shown in the video. What subsystems can you see?
-*	What kinds of robots follow a path?
-*	What kind of system do you want to make?
+* Robotic systems are built from smaller, related subsystems. Look at the automobile system shown in the video. What subsystems can you see?
+* What kinds of robots follow a path?
+* What kind of system do you want to make?
 
 ### Brainstorm
 
@@ -21,7 +21,7 @@ Think about:
 * How can the robot sense where it is along the path?
 * How can the robot communicate its position?
  
- ![EV3 + LEGO Bricks](/static/lessons/make-it-communicate/hero.png)
+![EV3 + LEGO Bricks](/static/lessons/make-it-communicate/ev3-plus-parts.jpg)
 
 ## Construct 
 
@@ -29,25 +29,26 @@ Think about:
 
 You can start by tinkering with the LEGO elements in the picture and then build on.
 
-More building ideas: 
-* [EV3 Frames](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/ev3%20frames-5054ee378e624fb4cb31158d2fc8e5cf.pdf)
+More building ideas:
 
-* [Tracks](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/tracks-32d7554813af3f25cf5012d54a4bad2b.pdf)
+[![EV3 Frames](/static/lessons/make-it-communicate/ev3-frames.jpg)](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/ev3%20frames-5054ee378e624fb4cb31158d2fc8e5cf.pdf)
 
-* [Color Sensor 2](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/color%20sensor_v2-e7fd54b6fa3cdfe36f414c1d2510f9cb.pdf)
+[![Tracks](/static/lessons/make-it-communicate/ev3-tracks.jpg)](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/tracks-32d7554813af3f25cf5012d54a4bad2b.pdf)
+
+[![Color Sensor 2](/static/lessons/make-it-communicate/ev3-color-sensor2.jpg)](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/color%20sensor_v2-e7fd54b6fa3cdfe36f414c1d2510f9cb.pdf)
 
 
 Build a path for your robot to follow. You can use electrical tape on a floor, or marker on paper. You can use objects as milestones to indicate a path that can be detected by either the Touch Sensor, Color Sensor, or Ultrasonic Sensor. 
 
-## Program 
+### Program 
 
 Before you program, think about: 
  
-*	How will you program the robot to follow a path?
-*	How will you program the robot to communicate its position?
-*	Which programming blocks will you use?
+* How will you program the robot to follow a path?
+* How will you program the robot to communicate its position?
+* Which programming blocks will you use?
 
-### ~ hint
+### ~hint
 
 Explore the different Motor and Sensor blocks in the programming menu.
 
@@ -55,17 +56,25 @@ Explore the different Motor and Sensor blocks in the programming menu.
 
 ### Sample Solution 
 
-[Video: EV3 Track Rover](/static/lessons/make-it-communicate/trackrover.mp4)
+[![Video: EV3 Track Rover](/static/lessons/make-it-communicate/ev3-track-rover.jpg)](https://legoeducation.23video.com/v.ihtml/player.html?token=79c99735f906403a4dd7f2909935983d&source=embed&photo%5fid=19857954)
 
 The Track Rover follows a path using the color sensor. It identifies two locations by color.
 
-[Building Instructions](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/ev3-dep/building%20instructions/track-rover-bi-6aadb1b053df0c58a0dea108b5ce0eea.pdf)
+Track Rover solution combines these building ideas:
+
+* EV3 frames
+* Tracks
+* Color sensor 2
+
+Two copies of the tracks are built: one for the right side and a mirror image for the left side.
+
+[![Track rover assembled](/static/lessons/make-it-communicate/ev3-track-rover2.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/ev3-dep/building%20instructions/track-rover-bi-6aadb1b053df0c58a0dea108b5ce0eea.pdf)
 
 ### Sample Program Solution 
 
 This program works with the Track Rover. If you create a different robot, adjust the program to fit your solution. 
 
-#### Program summary: 
+Program summary: 
 
 * If the Color Sensor sees black, Motor B runs at -50 power and Motor C turns off.
 * If the Color Sensor sees white, Motor B turns off and Motor C runs at -50 power.
@@ -91,35 +100,10 @@ forever(function () {
         motors.stopAll()
         music.playSoundEffectUntilDone(sounds.colorsRed)
         motors.largeBC.run(-50)
-    } else {
-
     }
 })
 ```
 
-```blocks
-sensors.color3.onColorDetected(ColorSensorColor.Black, function () {
-    motors.largeB.run(-50)
-    motors.largeC.run(0)    
-})
-sensors.color3.onColorDetected(ColorSensorColor.White, function () {
-    motors.largeB.run(0)    
-    motors.largeC.run(-50)
-})
-sensors.color3.onColorDetected(ColorSensorColor.Green, function () {
-    motors.stopAll()
-    music.playSoundEffect(sounds.colorsGreen)
-    pause(1000)  
-    motors.largeBC.run(-50)
-})
-sensors.color3.onColorDetected(ColorSensorColor.Red, function () {
-    motors.stopAll()
-    music.playSoundEffect(sounds.colorsRed)
-    pause(1000)
-    motors.largeBC.run(-50)
-})
-```
-
 ### Download and test
 
 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.
@@ -128,37 +112,40 @@ Click Download and follow the instructions to get your code onto your EV3 Brick.
 
 ### Test and Analyze 
 
-As you work on your solution: 
+As you work on your solution:
+
 1. Describe one part of your design that worked especially well. 
 2. Describe one design change that you had to make. 
 3. What will you try next? 
 
 
 ### Review and Revise 
+
 Take a moment to reflect on your robot solution. 
 
-### Think about: 
-*	Can the robot’s movement be more accurate? 
-*	What are some ways that others have solved the problem?
+Think about:
+
+* Can the robot’s movement be more accurate? 
+* What are some ways that others have solved the problem?
 
 Describe two ways you could improve your robot.
 
 ## Continue 
 
 ### Personalize your project
-*	Add/remove LEGO elements to improve the way your robot moves. 
-*	Click on the JavaScript tab and experiment with changing the values in the code.
-*	Add a custom image or sounds by adding blocks from the Brick or Music menus.
+
+* Add/remove LEGO elements to improve the way your robot moves. 
+* Click on the JavaScript tab and experiment with changing the values in the code.
+* Add a custom image or sounds by adding blocks from the Brick or Music menus.
 
 ## Communicate 
 
-Here are some ideas: 
-*	Create a video of your project, especially your final presentation and your robot’s performance. 
-*	Explain some important features of your software program. 
-*	Produce a building guide for your model by taking a series of photographs as you deconstruct it. 
-*	Include an image of your program with comments. 
-*	Add a team photograph! 
+Here are some ideas:
+
+* Create a video of your project, especially your final presentation and your robot’s performance. 
+* Explain some important features of your software program. 
+* Produce a building guide for your model by taking a series of photographs as you deconstruct it. 
+* Include an image of your program with comments. 
+* Add a team photograph! 
 
 Congratulations! What will you design next?
-
-

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

@@ -1,90 +1,97 @@
 # Make It Move Without Wheels
 
-## ~ avatar
-
-Design, build and program a robot that can move itself using no wheels for locomotion.
-
-## ~
-
 ## Connect
 
 ### Design Brief
 
-Design, build and program a robot that can move itself a distance of at least 30cm, using at least one motor, using NO wheels for locomotion.
+Design, build and program a robot that can move itself using no wheels for locomotion.
+
+![Make it move banner](/static/lessons/make-it-move/make-it-move-without-wheels.jpg)
+
+Your robot will:
+
+* Go a distance of at least 30cm
+* Use at least one motor
+* Use NO wheels for locomotion
 
 ### Brainstorm
 
-Discuss different solutions to the design brief.
-
-Think about:
-
-How can robots move without wheels? For example, how will you:
-* Connect the motor(s) to something to make the robot walk, crawl, or wiggle?
-How will you program the robot to move? For example, which programming blocks will you use to:
-* Turn on and turn off the motor or motors?
-* Display the distance moved?
-
-### Select the Best Solution
-
-Describe the solution that you have agreed to build and program.
-
-Think about examples from your brainstorming discussion. Then explain why you chose this solution for the design brief.
-
-![The Mars rover](/static/lessons/make-it-move/hero.png)
-
-https://www.youtube.com/ErC_s3hLGMk
+In nature, creatures use many methods to get around. None of them, however, use wheels to move. Can we copy the method of animal locomotion with our robot? Using motors and legs, make a robot that can move without using any wheels.
 
 ## Construct
 
-### Build and Program
+### Build
 
-Now you are ready to start building and programming your solution!
+Think about a creature’s movement for inspiration. Will you make the robot walk, crawl, hop, or wiggle?  Your mechanism can be attached or unattached to the EV3 brick. You can start by tinkering with the LEGO elements in the picture above and then build on.
+
+### Building Hint
+
+If you want some building help you can follow these instructions.
+
+[![Toddle Bot](/static/lessons/make-it-move/toddle-bot.jpg)](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/toddle%20bot-3dcad146d7f5deac4753f93e9dcc0739.pdf)
+
+### Program
+
+Before you program, think about:
+
+* How will you program the robot to move? 
+* How will you program the robot to stop?
+* How will you program the robot to display the distance moved?
+
+Which programming blocks will you use:
+
+* To turn on and turn off the motor or motors? 
+* To display the distance moved? 
+
+### Sample Code
+
+Example code of a robot that moves without wheels using one motor:
+
+* The robot moves with ``large motor D`` rotating at ``-100`` speed
+* The robot moves for ``30000`` milliseconds (30 seconds)
+* The robot stops 
+* The robot displays the text ``"30cm"``
 
 ```blocks
-motors.largeBC.tank(-60, 60, 9, MoveUnit.Rotations);
-motors.stopAll();
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    motors.largeD.run(-100)
+    loops.pause(30000)
+    motors.stopAll()
+    brick.showString("30cm", 1)
+})
 ```
 
-As you work on your solution:
+### Download and test
 
-* Describe one part of your design that worked especially well.
-* Describe one design change that you had to make.
+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.
 
-What will you try next?
-	
-As you test your design solution, use the table for recording your findings.
-
-[**VIEW BUILDING INSTRUCTIONS**](TODO) for a sample solution. (7.8 MB, PDF)
-
-## Contemplate
+## Contemplate 
 
 ### Test and Analyze
 
-How well does your solution satisfy the design brief? Record your data. Name the columns and rows, such as Trial Number, Distance Moved, and Observations.
-
-### Review and Revise
-
-Take a moment to reflect on your robot solution.
-
 Think about:
+
 * Is the robot using something other than wheels to move? Trace the movement from the motor axle to the mechanism(s) that drives the robot forward, backward or sideways. Wheels can be used to stabilize the robot but not to drive it.
-* Does the robot display the distance moved?
-* Is it accurate? How do you know?
-Describe two ways you could improve your robot.
+* Does the robot display the distance moved? Is it accurate? How do you know?
+* What is one part of your design that worked well?
+* What is a change that you need to make?
+* What will you try next?
 
 ## Continue
 
-### Communicate
+### Personalize your project
+
+* Add/remove LEGO elements to improve the way your robot moves. Will your robot walk, wiggle, hop, or slither? Will it move slower, faster or farther?
+* Click on the JavaScript tab and experiment with changing the values in the code.
+* Add a custom image or sounds by adding blocks from the Brick or Music menus.
+* Does your robot resemble a creature? Add arts and crafts materials to your project.
+
+## Communicate
 
-Here are some ideas:
 * Create a video of your project, especially your final presentation and your robot’s performance.
 * Explain some important features of your software program.
 * Produce a building guide for your model by taking a series of photographs as you deconstruct it.
 * Include an image of your program with comments.
 * Add a team photograph!
 
-## ~ avatar
-
 Congratulations! What will you design next?
-
-## ~

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

@@ -1,6 +1,5 @@
 # Make It Smarter and Faster 
 
-
 ## Connect 
 
 ### Design Brief
@@ -34,18 +33,25 @@ Think about:
 ### Build
 
 Think about a creature’s movement for inspiration. Your mechanism can be attached or unattached to the EV3 brick. You can start by tinkering with the LEGO elements in the picture add then build on.
+
 More building ideas: 
 
-* [EV3 Frames](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/ev3%20frames-5054ee378e624fb4cb31158d2fc8e5cf.pdf)
-* [Color Sensor 1](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/color%20sensor_v1-16a7231bdc187cd88a8da120c68f58d5.pdf)
-* [Gyro Sensor](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/gyro%20sensor-6f0fdbd82ae45fe0effa0ebf3f460f3d.pdf)
-* [Ultrasonic Sensor](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/ultrasonic%20sensor-a56156c72e8946ed4c58c5e69f3520d3.pdf)
-* [Touch Sensor](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/touch%20sensor-868fda1b9d6070a0a034fb22456a7fc9.pdf)
-* [Jaw](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/jaw-ee93e8f3243e4d30cd34b0c337c33653.pdf)
-* [Leg 1](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/leg%201-c14624046ea3a95148820ed404f5ac65.pdf)
-* [Leg 2](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/leg%202-8855c35b990205f6b9d7130687a3d4db.pdf)
-* [Leg 3](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/leg%203-575d52ef15fb79f1e4d3350d36607160.pdf)
+| | | | | |
+|-|-|-|-|-|
+|[![EV3 Frames](/static/lessons/make-it-smarter/ev3-parts-frames.jpg)][EV3 Frames] | |[![EV3 Color Sensor 1](/static/lessons/make-it-smarter/ev3-parts-color-sensor-1.jpg)][Color Sensor 1] | |[![EV3 Gyro Sensor](/static/lessons/make-it-smarter/ev3-parts-gyro-sensor.jpg)][Gyro Sensor] |
+| [EV3 Frames] | | [Color Sensor 1] | | [Gyro Sensor] |
+<br/>
 
+| | | | | |
+|-|-|-|-|-|
+|[![EV3 Ultrasonic Sensor](/static/lessons/make-it-smarter/ev3-parts-ultrasonic-sensor.jpg)][Ultrasonic Sensor] | | [![EV3 Touch Sensor](/static/lessons/make-it-smarter/ev3-parts-touch-sensor.jpg)][Touch Sensor] | | [![EV3 Gyro Sensor](/static/lessons/make-it-smarter/ev3-parts-jaw.jpg)][Jaw] |
+| [Ultrasonic Sensor] | | [Touch Sensor] | | [Jaw] |
+<br/>
+
+| | | | | |
+|-|-|-|-|-|
+| [![EV3 Leg 1](/static/lessons/make-it-smarter/ev3-parts-leg-1.jpg)][Leg 1] | | [![EV3 Leg 2](/static/lessons/make-it-smarter/ev3-parts-leg-2.jpg)][Leg 2] | | [![EV3 Leg 3](/static/lessons/make-it-smarter/ev3-parts-leg-3.jpg)][Leg 3] |
+| [Leg 1] | | [Leg 2] | | [Leg 3] |
 
 ### Program 
 
@@ -55,81 +61,46 @@ Before you program, think about:
 * How will you program the robot to respond?
 * Which programming blocks will you use?
 
-### ~ hint
+### ~hint
 
 **Hint:** Explore the different Sensor blocks in the Sensors Menu
 
 ### ~
 
-## SCREEN 5
+### Sample Solution 
 
-Sample Solution 
-
-[Video: EV3 Insect]
-
-This Insect uses its Ultrasonic Sensor to sense danger and move away from threat.
+The Insect uses its Ultrasonic Sensor to sense danger and move away from a threat.
 
+https://www.youtube.com/watch?v=PoeYoiXHHE4
+<br/>
 The Insect solution combines these building ideas:
 
-* EV3 Frames
-* Leg 2
-* Leg 3
-* Ultrasonic Sensor 
+* [EV3 Frames]
+* [Leg 2]
+* [Leg 3]
+* [Ultrasonic Sensor]
 
-Four copies of Leg 3 were built: one for the front left, one for the back right, and two mirror copies for the front right and back left.
+Four copies of Leg 3 are built: one for the front left, one for the back right, and two mirror copies for the front right and back left.
 
-* [Building Instructions](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/insect-94b8a46f0dc5082c9d78ddb734626dc9.pdf)
+Building Instructions:
+
+[![Insect robot](/static/lessons/make-it-smarter/insect-bot.jpg)](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/insect-94b8a46f0dc5082c9d78ddb734626dc9.pdf)
 
 ### Sample Solution 
 
 This program checks if the Ultrasonic Sensor senses something near. 
 
-This program:
+The blocks inside the ``||loops:forever||`` loop have these actions: 
 
-* Turns on the green EV3 brick Status Light
-
-```block
-brick.setStatusLight(StatusLight.Green)
-```
-
-* Waits for Ultrasonic Sensor to detect an object
-
-```block
-sensors.ultrasonic4.pauseUntil(UltrasonicSensorEvent.ObjectDetected)
-```
-
-* Turns on Motors A and D in opposite directions
-
-```block
-motors.largeAD.tank(50, -50)
-```
-
-* Waits for one half of a second (1500 milli seconds)
-
-```block
-pause(1500)
-```
-
-* Reverses the direction of Motors A and D
-
-```block
-motors.largeAD.tank(-50, 50)
-```
-
-* Waits for one half of a second
-* Stops all motors
-
-```block
-motors.stopAll()
-```
-
-* Makes an insect chirping sound
-
-```block
-music.playSoundEffectUntilDone(sounds.animalsInsectChirp)
-```
-
-* Loops so the insect wanders around when the Ultrasonic Sensor is triggered
+1. Turn on the ``green`` EV3 brick Status Light.
+2. Wait for Ultrasonic Sensor to detect an object.
+3. Turn on Motors ``A`` and ``D`` in opposite directions.
+4. Wait for one quarter of a second (``1500`` milli seconds).
+5. Reverse the direction of Motors ``A`` and ``D``.
+6. Wait for one quarter of a second.
+7. Stop all motors.
+8. Make an insect chirping sound.
+9. Loop continuously so that the insect wanders around when the Ultrasonic Sensor is detects something.
 
 ```blocks
 forever(function () {
@@ -146,7 +117,7 @@ forever(function () {
 
 ### Download and test
 
-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.
+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.
 
 ## Contemplate 
 
@@ -157,7 +128,6 @@ As you work on your solution:
 2. Describe one design change that you had to make. 
 3. What will you try next? 
 
-
 ### Review and Revise 
 
 Take a moment to reflect on your robot solution. 
@@ -170,15 +140,14 @@ Think about:
 
 Describe two ways you could improve your robot.
 
-
 ## Continue 
 
-Personalize your project
+Personalize your project:
 
 * Add/remove LEGO elements to improve the way your robot moves. 
 * Click on the JavaScript tab and experiment with changing the values in the code.
 * Add a custom image or sounds by adding blocks from the Brick or Music menus.
-* Does your robot resemble a creature? Add arts and crafts materials to you project.
+* Does your robot resemble a creature? Maybe add more craft materials to your project.
 
 ## Communicate 
 
@@ -190,3 +159,14 @@ Here are some ideas:
 * Add a team photograph! 
 
 Congratulations! What will you design next?
+
+
+[EV3 Frames]: https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/ev3%20frames-5054ee378e624fb4cb31158d2fc8e5cf.pdf
+[Color Sensor 1]: https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/color%20sensor_v1-16a7231bdc187cd88a8da120c68f58d5.pdf
+[Gyro Sensor]: https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/gyro%20sensor-6f0fdbd82ae45fe0effa0ebf3f460f3d.pdf
+[Ultrasonic Sensor]: https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/ultrasonic%20sensor-a56156c72e8946ed4c58c5e69f3520d3.pdf
+[Touch Sensor]: https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/touch%20sensor-868fda1b9d6070a0a034fb22456a7fc9.pdf
+[Jaw]: https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/jaw-ee93e8f3243e4d30cd34b0c337c33653.pdf
+[Leg 1]: https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/leg%201-c14624046ea3a95148820ed404f5ac65.pdf
+[Leg 2]: https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/leg%202-8855c35b990205f6b9d7130687a3d4db.pdf
+[Leg 3]: https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/leg%203-575d52ef15fb79f1e4d3350d36607160.pdf

docs/getting-started/try.md

@@ -1,28 +1,26 @@
 # Try 
 
-[IMG: Neutral Image Display on EV3 Brick with Music Notes]
-
 Get a quick introduction to programming with EV3.
 
+![Display on EV3 Brick with Music Notes](/static/getting-started/01_EyesOn_Intro.png)
+
 We are excited to help you get started with LEGO MINDSTORMS Education EV3. In this project we will guide you through connecting your EV3 brick, creating your first program, controlling a Large Motor, a Touch Sensor and a Color Sensor. These steps can take up to 45 minutes.
 
 ## Turn on your EV3 Brick
 
-[IMG: Hand pressing power button, Neutral Image Display, EV3 Brick]
-
 Power on your EV3 Brick by pressing the Center Button.
 
+![Hand pressing power button](/static/getting-started/02_PowerOn.png)
+
 ## Connect Your EV3 Brick to Your Device
 
-[IMG: Hand on cable & computer, Neutral Image Display, EV3 Brick]
-
 Use the USB cable to connect your EV3 Brick to your device.
 
+![Computer and cable connected to EV3 Brick](/static/getting-started/03_insert-usb-02.png)
+
 ## Create and Run your First Program
 
-[IMG: Try Program Blocks (see JavaScript below)]
-
-1 - Create the program shown here:
+**Code it:** Create the program shown here.
 
 ```blocks
 brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
@@ -31,31 +29,26 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 })
 ```
 
-* Drag a Brick Screen show mood block inside the on button block
-* Change mood to 
+* Drag out a ``||brick:on button||`` block from Buttons section in the ``||brick:Brick||`` Toolbox drawer.
+* Drag a Brick Screen ``||brick:show mood||`` block inside the ``||brick:on button||`` block.
+* Change mood to ``neutral``.
 
 ```block
 brick.showMood(moods.neutral)
 ```
 
-* Drag a Music play sound effect block below the show mood block
-* Change sound effect to 
+* Drag a Music ``||music:play sound effect||`` block below the ``||brick:show mood||`` block.
+* Change sound effect to ``communication hello``.
 
 ```block
 music.playSoundEffect(sounds.communicationHello)
 ```
 
-2 – 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.
-
-## ~ hint
-
-Note: Click here  for help and more information about the programming blocks.
-
-## ~
+**Download:** 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.
 
 ## Did It Work?
 
-[IMG: Neutral Image Display, EV3 Brick]
+![EV3 Brick with eyes on the display](/static/getting-started/05_EyesOn.png)
 
 Verify that the program you just created shows eyes on the Brick Display, and that the EV3 Brick played the sound “Hello!”
 
@@ -63,17 +56,15 @@ Verify that the program you just created shows eyes on the Brick Display, and th
 
 ## Connect a Large Motor
 
-[IMG: EV3 Brick with hands connecting Large Motor to Port D]
-
 Now you will learn to control the Large Motor.
 
-Connect a Large Motor to Port D of your EV3 Brick using any of the connector cables.
+![EV3 Brick with hands connecting Large Motor to Port D](/static/getting-started/06_PlugInLargeMotor.png)
+
+Connect a Large Motor to **Port D** of your EV3 Brick using any of the connector cables.
 
 ## Create and Run This Program
 
-[IMG: Program Blocks (see JavaScript below)]
-
-1) Create the program shown here:
+**Code it:** Create the program shown here.
 
 ```blocks
 brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
@@ -81,33 +72,33 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 })
 ```
 
-* Start a new program
-* Drag a run large A motor block inside the on button block
-* Change large A to large D motors.largeD.run(50)
-* Click on the + sign
-* Change to 1 rotation
+* Start a new program.
+* Drag a ``||motors:run large A motor||`` block inside the ``||brick:on button||`` block.
+* Change ``large motor A`` to ``large motor D``.
+* Click on the **(+)** sign.
+* Change to ``1`` rotation.
 
-2) 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.
+**Download:** 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.
 
 ## Did It Rotate?
 
-[IMG: Large Motor D w/Rotating “WHRRR,” Hand, EV3 Brick]
-
 Confirm that your motor has turned one rotation at power level 50 before stopping.
 
+![Large Motor D w/Rotating “WHRRR,” Hand, EV3 Brick](/static/getting-started/08_WorkingLargeMotor.png)
+
 Download and run the program as many times as you want in order to verify this, or tinker with different power levels and different rotations.
 
 ## Connect a Touch Sensor
 
-[IMG: Hands connecting Touch Sensor to Port 1 on EV3 Brick]
-
 We will now control the Large Motor using a Touch Sensor.
 
+![Hands connecting Touch Sensor to Port 1 on EV3 Brick](/static/getting-started/09_Connect_Touch.png)
+
 Keeping the Large Motor connected to **Port D**, connect a Touch Sensor to **Port 1** of your EV3 Brick.
 
 ## Modify Your Program
 
-[IMG: Program Blocks (see JavaScript below)]
+**Code it:** Add code to the program for the Touch Sensor.
 
 ```blocks
 brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
@@ -116,32 +107,31 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 })
 ```
 
-1) Add a pause until touch 1 pressed Sensor block on top of the run large D Motor block
+* Add a ``||sensors:pause until touch 1 pressed||`` Sensor block on top of the ``||motors:run large motor D||`` block.
 
 ```block
 sensors.touch1.pauseUntil(ButtonEvent.Pressed)
 ```
 
-2) 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.
+**Download:** 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.
 
 ## Press the Touch Sensor
 
-[IMG: Hand Touch Sensor Pressed & EV3 Brick & Large Motor]
-
 Confirm that the Large Motor has turned one rotation AFTER you press the Touch Sensor.
 
+![Hand Touch Sensor Pressed & EV3 Brick & Large Motor](/static/getting-started/11_TouchMotorWorking.png)
+
 Download and run the program as many times as you want in order to verify this, or tinker with different Touch Sensor and Large Motor values.
 
 ## Connect a Color Sensor
 
-[IMG: Hand connecting Color Sensor to Port 4, Large Motor D, EV3 Brick]
-
 Now we will try to control the Large Motor using another sensor.
 
-Keeping the Large Motor connected to **Port D**, connect the Color Sensor to **Port 4**.
-Modify Your Program
+![Hand connecting Color Sensor to Port 4, Large Motor D, EV3 Brick](/static/getting-started/12_ConnectColor.png)
 
-[IMG: Program Blocks (see JavaScript below)]
+Keeping the Large Motor connected to **Port D**, connect the Color Sensor to **Port 4**.
+
+**Code it:** Modify Your Program to use the Color Sensor.
 
 ```blocks
 brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
@@ -150,29 +140,26 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 })
 ```
 
-1) Using the same program, replace the pause until touch 1 block with a pause color 3 for color block
+* 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)
 ```
 
-2) Select the color you want to detect (e.g., green).
+* Select the color you want to detect (e.g., green).
 
-3) 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.
+**Download:** 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.
 
 ## Place a Colored Brick in Front of the Color Sensor
 
-[IMG: Colored bricks in front of Color Sensor, hands, EV3 Brick]
+![IMG: Colored bricks in front of Color Sensor, hands, EV3 Brick](/static/getting-started/14_ColorSensorWorking.png)
 
 Confirm that the Large Motor has turned one rotation AFTER the Color Sensor has detected the colored brick.
 
 Download and run the program as many times as you want in order to verify this, or tinker with different Color Sensor and Large Motor values.
 
-Click on the JavaScript tab and change the color the Color Sensor detects to Black, Blue, Green, Yellow, Red, White, or Brown. Use Title Case for the color names.
+Click on the **JavaScript** tab and change the color the Color Sensor detects to Black, Blue, Green, Yellow, Red, White, or Brown. Use Title Case for the color names.
 
 ## Well Done!
 
-[IMG: EV3 Driving Base]
-
 You have now learned how to control some of the inputs and outputs of the EV3.
-

docs/getting-started/use.md

@@ -1,29 +1,28 @@
 # Use
 
-[IMG: EV3 Driving Base full w/cuboid]
-
 Build a robot and drive into the world of robotics!
-In this project we will guide you through building a Driving Base Robot and programming it to move straight and turn. You will also build and Object Detector Module, and program it to detect an object. It’s a good idea to have done the [Try](/getting-started/try)  sequence first.
+
+![EV3 Driving Base full w/cuboid](/static/getting-started/EV3_GettingStarted_13.jpg)
+
+In this project we will guide you through building a Driving Base Robot and programming it to move straight and turn. You will also build and Object Detector Module, and program it to detect an object. It’s a good idea to have done the [Try](/getting-started/try) sequence first.
 
 ## Connect
 
-[IMG: Apple Picker]
-
 What if your school had a multipurpose robot? How would you use it?
 
+![Apple Picker Robot](/static/getting-started/02_ApplePickerRobot.jpg)
+
 Would you use it to clean the school or plant trees?
 
 ## Build Your Driving Base Robot
 
-[IMG: EV3 Driving Base Building Instructions Cover Image]
+Build the robot driving base:
 
-* [Building instructions](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
+[![EV3 Driving Base](/static/lessons/common/ev3-driving-base.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
 
 ## Make It Move
 
-[IMG: Program Blocks (see JavaScript below)]
-
-1) Create a program that makes the Driving Base move forward and stop at the finish line, which is 1 meter away.
+**Code it:** Create a program that makes the Driving Base move forward and stop at the finish line, which is ``1`` meter away.
 
 Start by building this program:
 
@@ -33,21 +32,21 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 })
 ```
 
-* Drag a steer large B+C motor block inside the on button block
-* Click on the + sign
-* Change to 1 rotation
+* Drag a ``||motors:steer large motors B+C||`` block inside an ``||brick:on button||`` block.
+* Click on the **(+)** sign.
+* Change to ``1`` rotation.
 
-### ~ hint
+### ~hint
 
-Hint: You will have to modify the number of rotations until you find the number that matches the robot moving forward 1 meter and stopping.
+**Hint:** You will have to modify the number of rotations until you find the number that matches the robot moving forward 1 meter and stopping.
 
 ### ~
 
-2) 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.
+**Download:** 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.
 
 ## Make It Turn
 
-[IMG: Program Blocks (see JavaScript below)]
+**Code it:** Create a new program that turns the Driving Base 180 degrees.
 
 ```blocks
 brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
@@ -55,30 +54,26 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 })
 ```
 
-1) Create a new program that turns the Driving Base 180 degrees.
+### ~hint
 
-### ~ hint
-
-Hint: You will have to modify the turn ratio and the number of rotations until the robot reaches 180 degrees.
+**Hint:** You will have to modify the turn ratio and the number of rotations until the robot reaches 180 degrees.
 
 ### ~
- 
 
-2) 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.
+**Download:** 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.
 
 ## Add an Ultrasonic Sensor to Your Driving Base
 
-[IMG: EV3 Ultrasonic Sensor Driving Base Building Instructions Main Image]
+Build and attach an Ultrasonic Sensor to your driving base:
 
-* [building instructions](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-ultrasonic-sensor-driving-base-61ffdfa461aee2470b8ddbeab16e2070.pdf)
+[![EV3 Ultrasonic Sensor Driving Base Building Instructions Main Image](/static/lessons/common/ev3-ultrasonic-sensor-driving-base.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-ultrasonic-sensor-driving-base-61ffdfa461aee2470b8ddbeab16e2070.pdf)
 
 ## Detect an Object
 
-[IMG: Program Blocks (see JavaScript below)]
+**Code it:**  Create a program that moves the Driving Base and makes it stop ``6`` cm from the Cuboid.
 
-1 - Create a program that moves the Driving Base and makes it stop ``6`` cm from the Cuboid.
+Create a new program:
 
-Create a new program
 ```blocks
 brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
     motors.largeBC.tank(50, 50)
@@ -88,27 +83,27 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 })
 ```
 
-* Drag a tank large B+C motor block inside the on button block
-* Drag a threshold Ultrasonic Sensor block and place below the motor block
-* Drag a stop all motors block and place it below the sensor block
+* Drag a ``||motors:tank large motors B+C||`` motor block inside the ``||brick:on button||`` block.
+* Drag the Ultrasonic Sensor threshold ``||sensors:set ultrasonic 4||``  block and place it below the motor block.
+* Drag a ``|sensors:pause until ultrasonic 4||`` block and place it under the threshold block.
+* Drag a ``||motors:stop all motors||`` block and place it below the sensor block.
 
-### ~ hint
+### ~hint
 
-Hint: You will have to modify the values of the Ultrasonic Sensor block until the robot reaches the desired position.
+**Hint:** You will have to modify the values of the Ultrasonic Sensor block until the robot reaches the desired position.
 
 ### ~
 
-2) 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.
+**Download:** 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.
 
-Click on the JavaScript tab and change and test the number value of the Ultrasonic Sensor 
+Click on the **JavaScript** tab. Change and test the number value of the Ultrasonic
+Sensor.
 
 ```typescript
 sensors.ultrasonic4.setThreshold(UltrasonicSensorEvent.ObjectDetected, 10)
 ```
 
-[IMG: EV3 Ultrasonic Sensor Driving Base Building Instructions Main Image]
-
 **Congratulations!**
 
 You are ready to move on to the next steps.
-Try a LEGO MINDSTORMS Design Engineering, Coding, or Maker activity.
+Try a LEGO MINDSTORMS [Design Engineering](/design-engineering), [Coding](/coding), or [Maker](/maker) activity.

docs/lessons/classroom-management.md

@@ -0,0 +1,68 @@
+# Classroom Management Tips
+
+## Lesson Planning
+
+### Required Materials
+
+* [LEGO MINDSTORMS Education EV3 Core Set](https://education.lego.com/enus/products/legomindstormseducationev3coreset/5003400)
+* Lesson plan
+* Student Worksheet for each activity
+* Inspirational images for each activity
+* Modeling materials already available in your classroom
+
+### How much time do you need?
+
+Each lesson is designed to take 90 minutes. If you work in shorter class periods, you can break this down into two 45 minute sessions.
+
+### Preparation
+
+It is important to establish student groups. Groups of two work well. Ensure that each student has a copy of the Student Worksheet for recording their design process, or alternatively, they can use their own preferred method for recording their design journey. They will also need the LEGO MINDSTORMS Education EV3 Core Set (one set for every two students is recommended).
+
+### Prior Learning
+
+Before beginning these Maker activities, it is recommended that students complete the lessons from the Introduction to Robotics Lesson Plan. These lessons can be found in both EV3 Lab and EV3 Programming. These tutorial lessons last between 45 - 90 minutes each, and you will need to factor this into your lesson planning.
+
+However, if you prefer a more open-ended, explorative method, you can start out with this activity and allow students to find help on their own by referring to the Robot Educator Tutorials.
+
+## The LEGO Education Maker (Design) Process #design-process
+
+### Defining the Problem
+
+It is important that students define a real problem to solve, or find a new design opportunity from the start. The “Connect” images are provided to help students think about designing their solutions. At this stage of the process, it is important that you not show examples of a final or sample solution.
+
+### Brainstorm
+
+Brainstorming is an active part of making. Some students will find it easier to explore their thoughts through tinkering (hands-on experimentation) with the LEGO bricks, and others will prefer to record sketches and notes. Group work is essential, but it is important to allow time for students to work alone before sharing their ideas with their groups.
+
+### Define the Design Criteria
+
+Discussing and reaching an agreement about the best solution to build can involve a lot of negotiation and may require different techniques that are dependent on the students’ skills. For example:
+
+* Some students draw well.
+* Others may build part of a model, and then describe what they mean.
+* Other students may be good at describing a strategy.
+
+Encourage an ethos where students can share anything, no matter how abstract it might sound. Be active during this phase and ensure that the ideas the students choose are achievable.
+
+It is important that students set clear design criteria. Once the solution to the problem has been made, the students will return to these criteria, which will then form the basis for testing how well their solution works.
+
+### Go Make
+
+Students must make one of their ideas using the LEGO set, and can use other materials if needed. If they are finding it hard to build their idea, encourage them to break problems down into smaller parts. Explain that they do not have to come up with the whole solution from the start. Remind students that this process is iterative and they must test, analyze, and revise their idea as they go.
+
+Using this Maker process does not mean you are following an inflexible set of steps. Instead, think of it as a set of practices.
+For example, brainstorming may be prominent at the beginning of the process. However, students may also need to brainstorm ideas when they are trying to figure out ways to improve their idea, or when they have a bad test result and must change a feature of their design.
+
+### Review and Revise Your Solution
+
+To help students develop their critical thinking and communication skills, you may wish to have students from one group observe and critique another group’s solution. Peer review and formative feedback helps both the students giving, and the students receiving the feedback to improve their work.
+
+### Communicate Your Solution
+
+The Student Worksheet is helpful for basic documentation of the activity. Students can also refer to it when presenting their work in front of the class. You may also wish to use the Student Worksheet as a portfolio for performance evaluations or for student self-evaluation.
+
+## Maker (Design) Process Diagram
+
+Here's a diagram to quickly illustrate the steps of the Maker (Design) Process. You can copy and print this as a poster to give to the students.
+
+![Design process diagram](/static/lessons/common/lego-maker-design-process-large.jpg)

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

@@ -1,15 +1,15 @@
 
 # Make a Security Gadget
 
-![Maker – Make a Security Gadget Main Image](/static/lessons/make-a-security-gadget/lego-maker-security.jpg)
-
 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/lego-security-gadget.jpg)
+![Make a Security Gadget 3 Stock Footage Images](/static/lessons/make-a-security-gadget/three-stock.jpg)
 
 Look at the photos and think about:
 
@@ -36,12 +36,16 @@ Additional materials to add to your Security Gadget:
 
 ### Prior Knowledge
 
-This activity uses sensor inputs. You may want to try the Use or Object Detection activity before this one. Or, you can start out with this activity and tinker with coding sensor inputs on your own.
+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
 
-![LEGO Education Maker Design Process](/static/lessons/make-a-security-gadget/lego-security-gadget.jpg)
-
 1. What problems did you imagine? 
 2. Pick one problem and explain it to a partner.
 
@@ -64,7 +68,7 @@ Some things to do while brainstorming:
 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
+### Go Make
 
 It is time to start making!
 
@@ -85,20 +89,20 @@ Now that you have finished you can:
 * Label the three most important parts and explain how they work.
 * Share your work with others.
 
-### Sample Solutions
+## Continue
 
-#### Phone Protector
-
-![Security Gadget Tinkering Example #1 – Phone Stand](/static/lessons/make-a-security-gadget/lego-security-gadget.jpg)
+### 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``.
 
-![Tinkering Example #1 Programming Blocks (see JavaScript below)](/static/lessons/make-a-security-gadget/lego-security-gadget.jpg)
-
 ```blocks
 forever(function () {
     sensors.touch1.pauseUntil(ButtonEvent.Pressed)
@@ -108,13 +112,13 @@ forever(function () {
 
 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
-
-![Security Gadget Tinkering Example #1 – Mouse detector](/static/lessons/make-a-security-gadget/lego-security-gadget.jpg)
+### 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.
 
-![Tinkering Example #2 Programming Blocks (see JavaScript below)](/static/lessons/make-a-security-gadget/lego-security-gadget.jpg)
+![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.
@@ -131,5 +135,5 @@ Click **Download** and follow the instructions to get your code onto your EV3 Br
 
 ### Well done!
 
-Click [here](#) to try out some more projects!
+Click [here](/examples) to try out some more projects!
 

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

@@ -1,9 +1,9 @@
 # Make a Sound Machine
 
-![Maker – Make a Sound Machine Main Image](/static/lessons/make-a-sound-machine/lego-maker-sound-machine-1.jpg)
-
 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. 
@@ -35,12 +35,16 @@ Additional materials to add to your Sound Machine:
 
 ### Prior Knowledge
 
-This activity uses motor rotations and sensor inputs. You may want to try the Use or 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.
+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
 
-![LEGO Education Maker Design Process](/static/lessons/make-a-sound-machine/lego-maker-sound-machine.jpg)
-
 1. What problems did you imagine? 
 2. Pick one problem and explain it to a partner.
 
@@ -63,32 +67,35 @@ Some things to do while brainstorming:
 * 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
+### 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 
+### 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 
+### 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.
 
-## Sample Solutions
+## Continue
 
-### Rhythm Maker
-
-![Sound Machine Tinkering Example #1](/static/lessons/make-a-sound-machine/lego-maker-sound-machine.jpg)
+### 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.
 
-![Tinkering Example #1 Programming Blocks (see JavaScript below)](/static/lessons/make-a-sound-machine/lego-maker-sound-machine.jpg)
+![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 **(+)**.
@@ -110,13 +117,13 @@ forever(function () {
 
 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
-
-![Sound Machine Tinkering Example #1](/static/lessons/make-a-sound-machine/lego-maker-sound-machine.jpg)
+### Color Sensor Sounds - Sample Solution
 
 You can also tinker with the use of sensors.
 
-![Tinkering Example #2 Programming Blocks (see JavaScript below)](/static/lessons/make-a-sound-machine/lego-maker-sound-machine.jpg)
+![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.
@@ -152,6 +159,6 @@ Click **Download** and follow the instructions to get your code onto your EV3 Br
 
 ### Well done!
 
-Click [here](#) to try out some more projects!
+Click [here](/examples) to try out some more projects!
 
 

docs/reference/motors.md

@@ -19,6 +19,5 @@ motors.stopAll()
 ```cards
 motors.largeA.speed()
 motors.largeA.angle()
-motors.largeA.tacho()
 motors.largeA.clearCounts()
 ```

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

@@ -17,11 +17,11 @@ let tachoCount = 0;
 motors.largeA.reset()
 motors.largeA.run(50)
 pause(10000)
-tachoCount = motors.largeA.tacho()
+tachoCount = motors.largeA.angle()
 motors.largeA.clearCounts()
 motors.largeA.run(50)
 pause(10000)
-if (tachoCount == motors.largeA.tacho()) {
+if (tachoCount == motors.largeA.angle()) {
     brick.showString("Motor turns equal.", 1)
 } else {
     brick.showString("Motor turns NOT equal.", 1)

docs/reference/motors/motor/tacho.md

@@ -1,48 +0,0 @@
-# tacho
-
-Get the current number of degress of rotation.
-
-```sig
-motors.largeA.tacho()
-```
-
-The motors that come with your @boardname@ have a way to detect their own turning motion. They count the amount of motor rotation in degrees. The motor will count each degree of angle rotation up to 360 degrees for a full rotation. As the motor continues to turn, the _tacho_ count keeps adding up the degrees even past one full rotation. So, if the motor makes 3 complete rotations, the count will be 1080.
-
-The name _tacho_ comes from the first part of the word [tachometer](https://en.wikipedia.org/wiki/Tachometer) which is a device to measure how fast something is turning. The motor controller in the brick uses the tacho count to regulate the motor's speed.
-
-## ~hint
-
-**Measure RPM**
-
-A standard way to know how fast a motor is turning is by measuring its _revolutions per minute_ (rpm). One revolution is the same thing as a rotation, or one turn. How do you measure rpm? Well, here's a simple way:
-
-1. Record the current tacho count
-2. Run the motor for 60 seconds
-3. Get the tacho count again
-4. Subtract the first tacho count from the second one
-5. Divide that number by `360`
-
-## ~
-
-## Returns
-
-* a [number](/types/number) which is the total count of degrees of rotation that the motor has turned since it was first started or reset.
-
-## Example
-
-Run the motor connected to port **A** at half speed for 5 seconds. Display the number of full rotations on the screen.
-
-```blocks
-motors.largeA.run(50)
-pause(5000)
-motors.largeA.stop()
-brick.showString("Motor rotations:", 1)
-brick.showNumber(motors.largeA.tacho() / 360, 3)
-motors.largeA.run(50)
-```
-
-## See also
-
-[angle](/reference/motors/motor/tacho), [speed](/reference/motors/motor/speed),
-[set regulated](/reference/motors/motor/set-regulated),
-[reset](/reference/motors/motor/reset), [clear counts](/reference/motors/motor/clear-counts)

editor/field_color.ts

@@ -25,7 +25,6 @@ export class FieldColorEnum extends pxtblockly.FieldColorNumber implements Block
     }
 
     mapEnum(colorString: string) {
-        console.log(colorString);
         switch(colorString) {
             case 'ColorSensorColor.Black': return '#000000';
             case 'ColorSensorColor.Blue': return '#006db3';

libs/base/pxt.json

@@ -16,6 +16,7 @@
         "ns.ts",
         "control.cpp",
         "control.ts",
+        "eventcontext.ts",
         "serial.cpp",
         "serial.ts",
         "fieldeditors.ts"

libs/base/shims.d.ts

@@ -102,14 +102,10 @@ declare namespace control {
     function millis(): int32;
 
     /**
-     * Run code when a registered event happens.
-     * @param id the event compoent id
-     * @param value the event value to match
+     * Used internally
      */
-    //% weight=20 blockGap=8 blockId="control_on_event" block="on event|from %src|with value %value"
-    //% blockExternalInputs=1
-    //% help="control/on-event" flags.defl=16 shim=control::onEvent
-    function onEvent(src: int32, value: int32, handler: () => void, flags?: int32): void;
+    //% flags.defl=16 shim=control::internalOnEvent
+    function internalOnEvent(src: int32, value: int32, handler: () => void, flags?: int32): void;
 
     /**
      * Reset the device.

libs/color-sensor/color.ts

@@ -96,6 +96,22 @@ namespace sensors {
             return 0
         }
 
+        _info(): string {
+            switch (this.mode) {
+                case ColorSensorMode.Color:
+                    return ["none",
+                        "black",
+                        "blue",
+                        "green",
+                        "yellow",
+                        "red",
+                        "white",
+                        "brown"][this._query()];
+                default:
+                    return this._query().toString();
+            }
+        }
+
         _update(prev: number, curr: number) {
             if (this.calibrating) return; // simply ignore data updates while calibrating
             if (this.mode == ColorSensorMode.Color)

libs/core/input.ts

@@ -177,6 +177,10 @@ namespace sensors.internal {
             return 0
         }
 
+        _info(): string {
+            return this._query().toString();
+        }
+
         _update(prev: number, curr: number) {
         }
 

libs/core/output.ts

@@ -378,21 +378,6 @@ namespace motors {
             return getMotorData(this._port).count;
         }
 
-
-        /**
-         * Gets motor tachometer count.
-         * @param motor the port which connects to the motor
-         */
-        //% blockId=motorTachoCount block="%motor|tacho"
-        //% weight=69
-        //% blockGap=8
-        //% group="Counters"
-        //% help=motors/motor/tacho
-        tacho(): number {
-            this.init();
-            return getMotorData(this._port).tachoCount;
-        }
-
         /**
          * Clears the motor count
          */

libs/core/png.cpp

@@ -28,7 +28,7 @@ static uint32_t swap(uint32_t num) {
 
 /** Decompresses a 1-bit gray scale PNG image to image format. */
 //%
-Image unpackPNG(Buffer png) {
+Image_ unpackPNG(Buffer png) {
     if (!png) {
         DMESG("PNG: Missing image");
         return NULL;

libs/core/screen.cpp

@@ -45,10 +45,10 @@ static void bitBufferToFrameBuffer(uint8_t *bitBuffer, uint8_t *fb) {
 }
 
 static uint8_t *mappedFrameBuffer;
-static Image lastImg;
+static Image_ lastImg;
 
 //%
-void updateScreen(Image img) {
+void updateScreen(Image_ img) {
     if (img && img != lastImg) {
         decrRC(lastImg);
         incrRC(img);

libs/infrared-sensor/ir.ts

@@ -56,7 +56,7 @@ namespace sensors {
 
     const __remoteButtons: RemoteInfraredBeaconButton[] = [];
     function __irButton(id: InfraredRemoteButton): RemoteInfraredBeaconButton {
-        for(let i = 0; i < __remoteButtons.length; ++i) {
+        for (let i = 0; i < __remoteButtons.length; ++i) {
             if (__remoteButtons[i].position == id)
                 return __remoteButtons[i];
         }
@@ -161,6 +161,14 @@ namespace sensors {
             return 0
         }
 
+        _info(): string {
+            if (this.mode == InfraredSensorMode.RemoteControl)
+                return "remote";
+            else if (this.mode == InfraredSensorMode.Proximity)
+                return `${this._query()}%`;
+            return "";
+        }
+
         _update(prev: number, curr: number) {
             if (this.mode == InfraredSensorMode.RemoteControl) {
                 for (let i = 0; i < __remoteButtons.length; ++i) {

libs/screen/shims.d.ts

@@ -23,14 +23,14 @@ declare interface Image {
     /**
      * Set pixel color
      */
-    //% shim=ImageMethods::set
-    set(x: int32, y: int32, c: int32): void;
+    //% shim=ImageMethods::setPixel
+    setPixel(x: int32, y: int32, c: int32): void;
 
     /**
      * Get a pixel color
      */
-    //% shim=ImageMethods::get
-    get(x: int32, y: int32): int32;
+    //% shim=ImageMethods::getPixel
+    getPixel(x: int32, y: int32): int32;
 
     /**
      * Fill entire image with a given color

libs/screen/targetoverrides.ts

@@ -5,18 +5,17 @@
 //% groups=["0.,","1#*"]
 function img(lits: any, ...args: any[]): Image { return null }
 
-let screen = image.create(DAL.LCD_WIDTH, DAL.LCD_HEIGHT)
+const screen = image.create(DAL.LCD_WIDTH, DAL.LCD_HEIGHT)
 
 namespace _screen_internal {
     //% shim=pxt::updateScreen
-    function updateScreen(img: Image): void {}
+    function updateScreen(img: Image): void { }
     //% shim=pxt::updateStats
-    function updateStats(msg: string): void {}
+    function updateStats(msg: string): void { }
 
-    control.setupScreenRefresh(() => updateScreen(screen))
-
-    export function _stats(msg: string) {
-        updateStats(msg)
+    control.__screen.setupUpdate(() => updateScreen(screen))
+    control.EventContext.onStats = function(msg: string) { 
+        updateStats(msg);
     }
 }
 
@@ -63,7 +62,7 @@ namespace brick {
     //% line.min=1 line.max=10
     export function showValue(name: string, value: number, line: number) {
         value = Math.round(value * 1000) / 1000;
-        showString((name ? name + ": " : "") + value, line);        
+        showString((name ? name + ": " : "") + value, line);
     }
 
     /**
@@ -78,6 +77,43 @@ namespace brick {
         screen.drawImage(image, 0, 0)
     }
 
+    /**
+    * Display the sensor and motor states attached to ports   
+    */
+    //% blockId=brickShowPorts block="show ports"
+    //% help=brick/show-ports blockGap=8
+    //% weight=10 group="Screen"
+    export function showPorts() {
+        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;
+            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)
+        }
+
+        // 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 inf = si._info();
+            screen.print(si.port() + "", x, 8 * brick.LINE_HEIGHT)
+            screen.print(inf, x, 9 * brick.LINE_HEIGHT)
+        }
+    }
+
     /**
      * An image
      * @param image the image
@@ -96,7 +132,7 @@ namespace brick {
      */
     //% blockId=screen_clear_screen block="clear screen"
     //% weight=90 group="Screen"
-    //% help=brick/clear-screen
+    //% help=brick/clear-screen weight=1
     export function clearScreen() {
         screen.fill(0)
     }

libs/touch-sensor/touch.ts

@@ -15,6 +15,10 @@ namespace sensors {
             return this._readPin6() > 2500 ? 1 : 0
         }
 
+        _info(): string {
+            return this._query() ? "pres" : "rel";
+        }
+
         _update(prev: number, curr: number) {
             this.button._update(curr > 0)
         }

libs/ultrasonic-sensor/ultrasonic.ts

@@ -18,6 +18,7 @@ namespace sensors {
             super(port)
             this.promixityThreshold = new sensors.ThresholdDetector(this.id(), 0, 255, 10, 100); // range is 0..255cm
             this.movementThreshold = 1;
+            this._setMode(0);
         }
 
         _deviceType() {
@@ -28,6 +29,10 @@ namespace sensors {
             return ((this.getNumber(NumberFormat.UInt16LE, 0) & 0x0fff) / 10) >> 0; // range is 0..2550, in 0.1 cm increments.
         }
 
+        _info(): string {
+            return `${this.distance()}cm`
+        }
+
         _update(prev: number, curr: number) {
             // is there an object near?
             this.promixityThreshold.setLevel(curr);
@@ -38,7 +43,7 @@ namespace sensors {
         }
 
         /**
-         * Registers code to run when the given color is close
+         * Registers code to run when an object is close or far
          * @param handler the code to run when detected
          */
         //% help=sensors/ultrasonic/on-event

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "0.1.4",
+  "version": "0.1.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3274,19 +3274,19 @@
       "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
     },
     "pxt-common-packages": {
-      "version": "0.19.4",
-      "resolved": "https://registry.npmjs.org/pxt-common-packages/-/pxt-common-packages-0.19.4.tgz",
-      "integrity": "sha512-sAccQrTh+LNuuDuQlkeuGaRu99+7iORfiREJV7eemqzr5yuspgA9aLif0FYFIPas37RD8Uoz+n36RxgsKZoLJg==",
+      "version": "0.20.14",
+      "resolved": "https://registry.npmjs.org/pxt-common-packages/-/pxt-common-packages-0.20.14.tgz",
+      "integrity": "sha512-DlZIDfDSH5jGq5K4k+9QtALzcedT+lYBNnxUWrbAK/GOxkqXZxhwGGvi1O2p6eFOfCWBuH0kjBlui3dzxeF0LA==",
       "requires": {
         "autoprefixer": "6.7.7",
-        "pxt-core": "3.4.3",
+        "pxt-core": "3.5.11",
         "rtlcss": "2.2.1"
       }
     },
     "pxt-core": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/pxt-core/-/pxt-core-3.4.3.tgz",
-      "integrity": "sha512-zsBf5/pf9B5vS4THqTQLOFodi+o0GtX2npvT3efF6Cql29dXtzVYKUAxSclzGCtNljI34dC++CLaaPfYfzMOnQ==",
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/pxt-core/-/pxt-core-3.5.11.tgz",
+      "integrity": "sha512-niFvx2PbvWqNPikB0uyR22Pnsc7ipOfWsB656KvnenK4lRNUMEFcxUg4B+65+NZZQypEHk5OxsD3nbE62749EA==",
       "requires": {
         "bluebird": "3.5.1",
         "browserify": "13.3.0",
@@ -3298,7 +3298,7 @@
         "lzma": "2.3.2",
         "marked": "0.3.12",
         "node-hid": "0.5.7",
-        "postcss": "6.0.17",
+        "postcss": "6.0.21",
         "request": "2.83.0",
         "rimraf": "2.5.4",
         "rtlcss": "2.2.1",
@@ -3307,21 +3307,21 @@
       },
       "dependencies": {
         "ansi-styles": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
-          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
           "requires": {
             "color-convert": "1.9.1"
           }
         },
         "chalk": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz",
-          "integrity": "sha512-QUU4ofkDoMIVO7hcx1iPTISs88wsO8jA92RQIm4JAwZvFGGAV2hSAA1NX7oVj2Ej2Q6NDTcRDjPTFrMCRZoJ6g==",
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
+          "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==",
           "requires": {
-            "ansi-styles": "3.2.0",
+            "ansi-styles": "3.2.1",
             "escape-string-regexp": "1.0.5",
-            "supports-color": "5.2.0"
+            "supports-color": "5.3.0"
           }
         },
         "has-flag": {
@@ -3330,13 +3330,13 @@
           "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
         },
         "postcss": {
-          "version": "6.0.17",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.17.tgz",
-          "integrity": "sha512-Bl1nybsSzWYbP8O4gAVD8JIjZIul9hLNOPTGBIlVmZNUnNAGL+W0cpYWzVwfImZOwumct4c1SDvSbncVWKtXUw==",
+          "version": "6.0.21",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.21.tgz",
+          "integrity": "sha512-y/bKfbQz2Nn/QBC08bwvYUxEFOVGfPIUOTsJ2CK5inzlXW9SdYR1x4pEsG9blRAF/PX+wRNdOah+gx/hv4q7dw==",
           "requires": {
-            "chalk": "2.3.1",
+            "chalk": "2.3.2",
             "source-map": "0.6.1",
-            "supports-color": "5.2.0"
+            "supports-color": "5.3.0"
           }
         },
         "source-map": {
@@ -3345,9 +3345,9 @@
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "supports-color": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.2.0.tgz",
-          "integrity": "sha512-F39vS48la4YvTZUPVeTqsjsFNrvcMwrV3RLZINsmHo+7djCvuUzSIeXOnZ5hmjef4bajL1dNccN+tg5XAliO5Q==",
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz",
+          "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==",
           "requires": {
             "has-flag": "3.0.0"
           }
@@ -3710,9 +3710,9 @@
       "integrity": "sha1-KBYjTiN4vdxOU1T6tcqold9xANk="
     },
     "semantic-ui-less": {
-      "version": "2.2.12",
-      "resolved": "https://registry.npmjs.org/semantic-ui-less/-/semantic-ui-less-2.2.12.tgz",
-      "integrity": "sha1-0ChpjwgOgc2wv4DlXl5jf8mUNdQ=",
+      "version": "2.2.14",
+      "resolved": "https://registry.npmjs.org/semantic-ui-less/-/semantic-ui-less-2.2.14.tgz",
+      "integrity": "sha512-JLkTqjOtct+OwM/JRv0SH76gCC0eE98xp5G4D29e9VbJ66QjWD3nB3waB7drpaMUFXo/YbKcyNOJBgMamcJI0Q==",
       "dev": true,
       "requires": {
         "jquery": "3.2.1"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "0.1.4",
+  "version": "0.1.8",
   "description": "LEGO Mindstorms EV3 for Microsoft MakeCode",
   "private": true,
   "keywords": [
@@ -34,10 +34,10 @@
   "typings": "built/pxtrequire.d.ts",
   "devDependencies": {
     "typescript": "2.6.1",
-    "less": "^2.6.0",
     "rtlcss": "^2.1.2",
     "autoprefixer": "^6.7.6",
-    "semantic-ui-less": "^2.2.4",
+    "less": "2.7.3",
+    "semantic-ui-less": "2.2.14",
     "@types/bluebird": "2.0.33",
     "@types/jquery": "3.2.16",
     "@types/marked": "0.3.0",
@@ -45,8 +45,8 @@
     "webfonts-generator": "^0.4.0"
   },
   "dependencies": {
-    "pxt-common-packages": "0.20.5",
-    "pxt-core": "3.4.9"
+    "pxt-common-packages": "0.20.28",
+    "pxt-core": "3.5.13"
   },
   "scripts": {
     "test": "node node_modules/pxt-core/built/pxt.js travis"

pxtarget.json

@@ -100,10 +100,18 @@
         "selectLanguage": true,
         "highContrast": true,
         "docMenu": [
+            {
+                "name": "Support",
+                "path": "https://service.lego.com"
+            },
             {
                 "name": "About",
                 "path": "/about"
             },
+            {
+                "name": "Upgrade Firmware",
+                "path": "https://ev3manager.education.lego.com/"
+            },
             {
                 "name": "Blocks",
                 "path": "/blocks"

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/state/screen.ts

@@ -99,8 +99,8 @@ namespace pxsim.image {
     }
 }
 
-namespace pxsim.pxtcore {
-    export function updateStats(str: string) {
+namespace pxsim.game {
+    export function takeScreenshot() {
         // TODO
     }
 }

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 {