0.1.1

bump minor
Integrate screen APIs from common packages (#343 )
2018-02-26 15:17:14 -08:00 · 2018-02-26 15:17:06 -08:00 · 2018-02-26 15:16:17 -08:00 · 2018-02-26 14:49:15 -08:00 · 2018-02-26 14:49:00 -08:00 · 2018-02-26 13:58:51 -08:00
92 changed files with 1624 additions and 1178 deletions
--- a/docs/SUMMARY.md
+++ b/docs/SUMMARY.md
@ -13,7 +13,7 @@
        
 * [Design Engineering](/design-engineering)
    * [Make It Move Without Wheels](/design-engineering/make-it-move)
-    * [Make It Smarter and Faster](/design-engineering/make-it-faster)
+    * [Make It Smarter and Faster](/design-engineering/make-it-smarter)
    * [Make a System that Communicates](/design-engineering/make-it-communicate)

 * [Maker](/maker)
@ -111,3 +111,25 @@
            * [pause for light](/reference/sensors/color-sensor/pause-for-light)
            * [color](/reference/sensors/color-sensor/color)
            * [light](/reference/sensors/color-sensor/ambient-light)
+    * [Music](/reference/music)
+        * [play sound effect](/reference/music/play-sound-effect)
+        * [play sound effect until done](/reference/music/play-sound-effect-until-done)
+        * [play tone](/reference/music/play-tone)
+        * [ring tone](/reference/music/ring-tone)
+        * [stop all sounds](/reference/music/stop-all-sounds)
+        * [rest](/reference/music/rest)
+        * [change tempo by](/reference/music/change-tempo-by)
+        * [set tempo](/reference/music/set-tempo)
+        * [note frequency](/reference/music/note-frequency)
+        * [beat](/reference/music/beat)
+        * [set volume](/reference/music/set-volume)
+    * [Control](/reference/control)
+        * [Timer](/reference/control/timer)
+            * [seconds](/reference/control/timer/seconds)
+            * [millis](/reference/control/timer/millis)
+            * [reset](/reference/control/timer/reset)
+            * [pause until](/reference/control/timer/pause-until)
+    * [Console](/reference/console)
+        * [log](/reference/console/log)
+        * [log value](/reference/console/log-value)
+        * [send to screen](/reference/console/send-to-screen)
--- a/docs/coding.md
+++ b/docs/coding.md
@ -9,6 +9,7 @@
  "name": "Autonomous Parking",
  "description": "TBD",
  "url":"/coding/autonomous-parking",
+  "imageUrl": "/static/lessons/parking.png",
  "cardType": "side"
 }, {
  "name": "Object Detection",
--- a/docs/design-engineering.md
+++ b/docs/design-engineering.md
@ -7,15 +7,15 @@
    {
        "name": "Make It Move Without Wheels",
        "description": "TBD",
-        "imageUrl": "/static/lessons/make-it-move.png",
+        "imageUrl": "/static/lessons/make-it-move-1.png",
        "url": "/design-engineering/make-it-move",
        "cardType": "side"
    },
    {
        "name": "Make It Smarter and Faster",
        "description": "TBD",
-        "imageUrl": "/static/lessons/make-it-smarter.png",
-        "url": "/design-engineering/make-it-move",
+        "imageUrl": "/static/lessons/make-it-smarter-1.png",
+        "url": "/design-engineering/make-it-smarter",
        "cardType": "side"
    },
    {
--- a/docs/design-engineering/make-it-smarter.md
+++ b/docs/design-engineering/make-it-smarter.md
@ -0,0 +1,192 @@
+# Make It Smarter and Faster 
+
+
+## Connect 
+
+### Design Brief
+
+Design, build and program a robotic creature that can sense its environment and respond by moving.
+
+https://www.youtube.com/watch?v=y9-A_C_08KY
+
+* What do the robots in the video need to be able to sense, plan, and act?
+* What senses do humans have and why are they important to us?
+* How many human-like senses do you see the robots demonstrating? 
+
+### Brainstorm 
+
+Discuss different solutions to the design brief.
+
+Think about: 
+
+* What kind of creature can it be? 
+* How can it move? 
+* What does it need to be aware so that it stays safe, well fed and warm (or cool)? 
+* Is it looking for food, a safe place to hide or a warm place to soak up the sun? 
+* Will the creature need to move fast or slow? 
+* Will it need to turn? 
+* Will it need to go backward?
+
+![EV3 and bricks](/static/lessons/make-it-smarter/bricks.png)
+
+## Construct
+ 
+### 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)
+
+
+### Program 
+
+Before you program, think about:  
+
+* How will you program the robot to sense?
+* How will you program the robot to respond?
+* Which programming blocks will you use?
+
+### ~ hint
+
+**Hint:** Explore the different Sensor blocks in the Sensors Menu
+
+### ~
+
+## SCREEN 5
+
+Sample Solution 
+
+[Video: EV3 Insect]
+
+This Insect uses its Ultrasonic Sensor to sense danger and move away from threat.
+
+The Insect solution combines these building ideas:
+
+* 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.
+
+* [Building Instructions](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:
+
+* 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
+
+```blocks
+forever(function () {
+    brick.setStatusLight(StatusLight.Green)
+    sensors.ultrasonic4.pauseUntil(UltrasonicSensorEvent.ObjectDetected)
+    motors.largeAD.tank(50, -50)
+    pause(1500)
+    motors.largeAD.tank(-50, 50)
+    pause(1500)
+    motors.stopAll()
+    music.playSoundEffectUntilDone(sounds.animalsInsectChirp)
+})
+```
+
+### 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.
+
+## Contemplate 
+
+### Test and Analyze 
+
+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: 
+
+* Does your robot move when the sensor is activated? 
+* If not, what will you change to make the robot’s ability to sense and respond more obvious? 
+* What other behaviors can you add to the robot to make it more realistic? 
+
+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.
+* Does your robot resemble a creature? Add arts and crafts materials to you 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! 
+
+Congratulations! What will you design next?
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@ -7,14 +7,14 @@
 {
    "name": "Try",
    "imageUrl": "/static/lessons/try.png",
-    "description": "TBD",
+    "description": "Get a quick introduction to programming with EV3.",
    "url": "/getting-started/try",
    "cardType": "side"
 },
 {
-    "name": "use",
+    "name": "Use",
    "imageUrl": "/static/lessons/use.png",
-    "description": "TBD",
+    "description": "Build a robot and drive into the world of robotics!",
    "url": "/getting-started/use",
    "cardType": "side"
 }
--- a/docs/getting-started/try.md
+++ b/docs/getting-started/try.md
@ -0,0 +1,178 @@
+# Try 
+
+[IMG: Neutral Image Display on EV3 Brick with Music Notes]
+
+Get a quick introduction to programming with EV3.
+
+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.
+
+## 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.
+
+## Create and Run your First Program
+
+[IMG: Try Program Blocks (see JavaScript below)]
+
+1 - Create the program shown here:
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    brick.showMood(moods.neutral)
+    music.playSoundEffect(sounds.communicationHello)
+})
+```
+
+* Drag a Brick Screen show mood block inside the on button block
+* Change mood to 
+
+```block
+brick.showMood(moods.neutral)
+```
+
+* Drag a Music play sound effect block below the show mood block
+* Change sound effect to 
+
+```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.
+
+## ~
+
+## Did It Work?
+
+[IMG: Neutral Image Display, EV3 Brick]
+
+Verify that the program you just created shows eyes on the Brick Display, and that the EV3 Brick played the sound “Hello!”
+
+**Well done!**
+
+## 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.
+
+## Create and Run This Program
+
+[IMG: Program Blocks (see JavaScript below)]
+
+1) Create the program shown here:
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    motors.largeD.run(50, 1, MoveUnit.Rotations)
+})
+```
+
+* 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
+
+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.
+
+## 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.
+
+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.
+
+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)]
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    sensors.touch1.pauseUntil(ButtonEvent.Pressed)
+    motors.largeD.run(50, 1, MoveUnit.Rotations)
+})
+```
+
+1) Add a pause until touch 1 pressed Sensor block on top of the run large D Motor 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.
+
+## 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.
+
+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
+
+[IMG: Program Blocks (see JavaScript below)]
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    sensors.color3.pauseForColor(ColorSensorColor.Green)
+    motors.largeD.run(50, 1, MoveUnit.Rotations)
+})
+```
+
+1) Using the same program, replace the pause until touch 1 block with a pause color 3 for color block
+
+```block
+sensors.color3.pauseForColor(ColorSensorColor.Green)
+```
+
+2) 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.
+
+## Place a Colored Brick in Front of the Color Sensor
+
+[IMG: Colored bricks in front of Color Sensor, hands, EV3 Brick]
+
+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.
+
+## Well Done!
+
+[IMG: EV3 Driving Base]
+
+You have now learned how to control some of the inputs and outputs of the EV3.
+
--- a/docs/getting-started/use.md
+++ b/docs/getting-started/use.md
@ -0,0 +1,114 @@
+# 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.
+
+## Connect
+
+[IMG: Apple Picker]
+
+What if your school had a multipurpose robot? How would you use it?
+
+Would you use it to clean the school or plant trees?
+
+## Build Your Driving Base Robot
+
+[IMG: EV3 Driving Base Building Instructions Cover Image]
+
+* [Building instructions](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.
+
+Start by building this program:
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    motors.largeBC.steer(0, 50, 1, MoveUnit.Rotations)
+})
+```
+
+* Drag a steer large B+C motor block inside the on button block
+* Click on the + sign
+* Change to 1 rotation
+
+### ~ 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.
+
+### ~
+
+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.
+
+## Make It Turn
+
+[IMG: Program Blocks (see JavaScript below)]
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    motors.largeBC.steer(-50, 50, 1, MoveUnit.Rotations)
+})
+```
+
+1) Create a new program that turns the Driving Base 180 degrees.
+
+### ~ hint
+
+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.
+
+## Add an Ultrasonic Sensor to Your Driving Base
+
+[IMG: EV3 Ultrasonic Sensor Driving Base Building Instructions Main Image]
+
+* [building instructions](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)]
+
+1 - Create a program that moves the Driving Base and makes it stop ``6`` cm from the Cuboid.
+
+Create a new program
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    motors.largeBC.tank(50, 50)
+    sensors.ultrasonic4.setThreshold(UltrasonicSensorEvent.ObjectDetected, 6)
+    sensors.ultrasonic4.pauseUntil(UltrasonicSensorEvent.ObjectDetected);
+    motors.stopAll()
+})
+```
+
+* 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
+
+### ~ hint
+
+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.
+
+Click on the JavaScript tab and 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.
--- a/docs/reference.md
+++ b/docs/reference.md
@ -1,9 +1,16 @@
 # Reference

 ```namespaces
-brick.showMood(moods.sleeping);
 sensors.color(null);
 motors.stopAll();
+brick.showMood(moods.sleeping);
+```
+
+## Advanced
+
+```namespaces
+console.log("");
+control.runInParallel(function(){});
 ```

 ## See Also
@ -11,5 +18,5 @@ motors.stopAll();
 [brick](/reference/brick),
 [sensors](/reference/sensors),
 [motors](/reference/motors),
-[touch sensor](/reference/sensors/touch-sensor),
-[color sensor](/reference/sensors/color-sensor)
+[control](/reference/control),
+[console](/reference/console)
--- a/docs/reference/console.md
+++ b/docs/reference/console.md
@ -0,0 +1,15 @@
+# Console
+
+Output text and data values to the console.
+
+```cards
+console.log("");
+console.logValue("x", 0);
+console.sendToScreen();
+```
+
+## See also
+
+[log](/reference/console/log),
+[log value](/reference/console/log-value),
+[send to screen](/reference/console/send-to-screen)
--- a/docs/reference/console/send-to-screen.md
+++ b/docs/reference/console/send-to-screen.md
@ -0,0 +1,26 @@
+# send To Screen
+
+Direct the console output to go to the @boardname@ screen.
+
+```sig
+console.sendToScreen();
+```
+
+A "console" is a place for a user to see special messages from a device. It could be  something connected to a serial port, a display that shows text, or even a text file. A console is typically used as a place to send information that is added to a message _log_ (a record of messages that are sent from a device). Your program can send log messages using the [console](/reference/console) functions. The MakeCode editor has a console view that lets you see the console output when your program runs in the simulator.
+
+On the @boardname@, the screen can serve as a console too and you can make your console output go there. Before using the console log functions, set the screen as the console output location.
+
+## Example
+
+Direct the console output to go to the screen. Show 20 values on the screen. Use the up and down buttons to scroll through the values.
+
+```blocks
+console.sendToScreen()
+for (let index = 0; index <= 20; index++) {
+    console.logValue("index", index)
+}
+```
+
+## See also
+
+[log](reference/console/log), [log value](/reference/console/log-value)
--- a/docs/reference/control.md
+++ b/docs/reference/control.md
@ -0,0 +1,33 @@
+# Control
+
+Program controls and events.
+
+```cards
+control.millis();
+control.runInParallel(() => {
+    
+});
+control.reset();
+control.waitMicros(4);
+control.deviceSerialNumber();
+```
+
+## Timer
+
+```cards
+control.timer1.reset()
+control.timer1.pauseUntil(5)
+control.timer1.millis()
+control.timer1.seconds()
+```
+
+## Advanced #advanced
+
+```cards
+control.raiseEvent(0, 0);
+control.onEvent(0, 0, () => {
+    
+});
+control.assert(false, 0);
+control.panic(0);
+```
--- a/docs/reference/control/timer.md
+++ b/docs/reference/control/timer.md
@ -0,0 +1,8 @@
+# Timer
+
+```cards
+control.timer1.reset()
+control.timer1.pauseUntil(5)
+control.timer1.millis()
+control.timer1.seconds()
+```
--- a/docs/reference/control/timer/millis.md
+++ b/docs/reference/control/timer/millis.md
@ -0,0 +1,25 @@
+# millis
+
+Get the amount of time counted by the timer in milliseconds.
+
+The timer count begins from `0` when you program starts or is [reset](/reference/control/timer/reset). 
+
+## Returns
+
+* a [number](/types/number) that is the amount of time elapsed, in milliseconds, since the timer was started or reset.
+
+## Example
+
+Find out how many milliseconds go by between presses of the `down` button on the brick.
+
+```blocks
+brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
+    brick.showValue("DownButtonTime", control.timer1.millis(), 1)
+    control.timer1.reset()
+})
+```
+
+## See also
+
+[seconds](/reference/control/timer/seconds), [reset](/reference/control/timer/reset)
+
--- a/docs/reference/control/timer/pause-until.md
+++ b/docs/reference/control/timer/pause-until.md
@ -0,0 +1,32 @@
+# pauseUntil
+
+Pause until the timer counts up to a number of milliseconds.
+
+```sig
+control.timer1.pauseUntil(0)
+```
+
+When code in a block comes to a **pauseUntil**, it will wait until the timer count reaches the number of milliseconds you say. Code in blocks like **forever** and **runInParallel** will keep running while the current code is paused.
+
+The time number you give is the number of milliseconds past the running timer count. If the timer is currently at `25000` milliseconds and you want to pause for `10` seconds, then use a pause time of `35000`. If you want your pause time number to match the actual wait time, then [reset](/reference/control/timer/reset) the timer first.
+
+## Parameters
+
+* **ms**: the [number](/types/number) of milliseconds that you want the timer to count up to. For seconds, convert to milliseconds: 100 milliseconds = 1/10 second and 1000 milliseconds = 1 second.
+
+## Example
+
+Pause between messages on the screen by `5` seconds.
+
+```blocks
+brick.clearScreen()
+brick.showString("Testing my pause...", 1)
+let startTime = control.timer1.millis()
+brick.showValue("StartTime", startTime, 3)
+control.timer1.pauseUntil(startTime + 5000)
+brick.showValue("EndTime", control.timer1.millis() - startTime, 4)
+```
+
+## See also
+
+[millis](/reference/control/timer/millis), [reset](/reference/control/timer/reset)
--- a/docs/reference/control/timer/reset.md
+++ b/docs/reference/control/timer/reset.md
@ -0,0 +1,49 @@
+# reset
+
+Reset the elapsed time of the timer back to `0`.
+
+```sig
+control.timer1.reset()
+```
+
+A timer starts counting from `0` when your program starts. It's time value always gets larger as your program runs. Maybe you want to meausure how long some task takes to finish or you want to do some action  only for a little while. A timer can keep track of the time it takes to do it.
+
+Resetting the timer sets the time value to `0` so the next time you check the time it's exactly the amount of time that has _elapsed_. Otherwise, you need to remember a start time value and then subtract it from the current time. 
+
+## Examples
+
+### Press time
+
+Find out how much time goes by between presses of the `enter` button on the brick.
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    brick.showValue("PressTime", control.timer1.seconds(), 1)
+    control.timer1.reset()
+})
+```
+
+### Difference timer
+
+Use a difference timer and compare it to a timer that resets. Use the ``left`` button to start timing and the ``right`` button to stop.
+
+```blocks
+let startTime = 0
+let timing = false
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    brick.clearScreen()
+    brick.showString("Starting timers...", 1)
+    startTime = control.timer1.seconds()
+    control.timer2.reset()
+    timing = true
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    if (timing) {
+        brick.clearScreen()
+        brick.showString("Timer results...", 1)
+        brick.showValue("timer 1", control.timer1.seconds() - startTime, 3)
+        brick.showValue("timer 2", control.timer2.seconds(), 4)
+        timing = false;
+    }
+})
+```
--- a/docs/reference/control/timer/seconds.md
+++ b/docs/reference/control/timer/seconds.md
@ -0,0 +1,25 @@
+# seconds
+
+Get the amount of time counted by the timer in seconds.
+
+The timer count begins from `0` when you program starts or is [reset](/reference/control/timer/reset). The number of seconds returned also includes milliseconds if there is a fractional part of a second too.
+
+## Returns
+
+* a [number](/types/number) that is the amount of time elapsed, in seconds, since the timer was started or reset.
+
+## Example
+
+Find out how many seconds go by between presses of the `down` button on the brick.
+
+```blocks
+brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
+    brick.showValue("DownButtonTime", control.timer1.seconds(), 1)
+    control.timer1.reset()
+})
+```
+
+## See also
+
+[millis](/reference/control/timer/millis), [reset](/reference/control/timer/reset)
+
--- a/docs/reference/sensors.md
+++ b/docs/reference/sensors.md
@ -40,9 +40,9 @@ sensors.ultrasonic1.pauseUntil(UltrasonicSensorEvent.ObjectDetected);
 ## Infrared

 ```cards
-sensors.infraredSensor1.onEvent(null, function () {});
-sensors.infraredSensor1.pauseUntil(null);
-sensors.infraredSensor1.proximity();
+sensors.infrared1.onEvent(null, function () {});
+sensors.infrared1.pauseUntil(null);
+sensors.infrared1.proximity();

 ```

@ -53,5 +53,5 @@ sensors.remoteButtonCenter.onEvent(ButtonEvent.Pressed, function () {})
 sensors.remoteButtonCenter.pauseUntil(ButtonEvent.Pressed);
 sensors.remoteButtonCenter.isPressed()
 sensors.remoteButtonCenter.wasPressed()
-sensors.infraredSensor1.setRemoteChannel(null)
+sensors.infrared1.setRemoteChannel(null)
 ```
--- a/docs/static/avatar.svg
+++ b/docs/static/avatar.svg
@ -5,105 +5,53 @@
 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32"
 	 style="enable-background:new 0 0 32 32;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#303030;}
+	.st0{fill:#DE0612;}
+	.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.4;stroke-miterlimit:10;}
 </style>
 <sodipodi:namedview  bordercolor="#666666" borderopacity="1" gridtolerance="10" guidetolerance="10" id="namedview15" inkscape:current-layer="svg2" inkscape:cx="16" inkscape:cy="16" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-height="661" inkscape:window-maximized="0" inkscape:window-width="997" inkscape:window-x="0" inkscape:window-y="0" inkscape:zoom="5.2149125" objecttolerance="10" pagecolor="#ffffff" showgrid="false">
 	</sodipodi:namedview>
-<g id="avatar_mf" transform="translate(-5304.979 8145.745)">
-	<path id="Path_180" class="st0" d="M5317.1-8125.6c0.2,0,0.3-0.1,0.5-0.1l2.9-0.6c1.3-0.3,2.5-0.5,3.8-0.8c0.5-0.1,1-0.2,1.5-0.3
-		c0.1,0,0.1,0,0.1-0.1c0-0.5,0-1-0.1-1.5c-0.1-0.6-0.2-1.1-0.3-1.7c-0.1-0.4-0.1-0.8-0.2-1.2c-0.1-0.7-0.2-1.4-0.3-2
-		c-0.1-0.6-0.2-1.1-0.3-1.7c0-0.2-0.2-0.4-0.4-0.4c0,0,0,0-0.1,0c-0.2,0-0.5,0.1-0.7,0.1c-0.5,0.1-1,0.1-1.5,0.2
-		c-0.5,0.1-1,0.1-1.6,0.2c-0.5,0.1-1,0.1-1.4,0.2c-0.2,0-0.3,0-0.5,0.1c-0.2,0-0.4,0.2-0.5,0.4c0,0.2-0.1,0.4-0.1,0.5
-		c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.5-0.1,1-0.2,1.5c0,0.4-0.1,0.9-0.1,1.3l-0.1,1.3l-0.1,1.3c-0.1,0.5-0.1,1-0.2,1.5
-		C5317.1-8126,5317.1-8125.8,5317.1-8125.6z"/>
-	<path id="Path_181" class="st0" d="M5316.1-8140c0,0.6,0.1,1.2,0.1,1.8c0,0.4,0.2,0.8,0.6,1c0.3,0.2,0.7,0.3,1.1,0.3
-		c0.7,0.1,1.4,0.1,2.1,0c0.6,0,1.2-0.1,1.8-0.2c0.4,0,0.9-0.2,1.2-0.5c0.3-0.3,0.5-0.7,0.5-1.1c0-1.2,0-2.3-0.1-3.5
-		c0-0.3-0.1-0.6-0.3-0.8c-0.3-0.4-0.8-0.6-1.4-0.6c0,0,0,0-0.1,0c-0.2,0.1-0.4,0.1-0.6,0.1c-0.9,0-1.8,0.1-2.7,0.1
-		c-0.1,0-0.3,0-0.4,0c-0.4-0.1-0.8,0-1.2,0.2c-0.4,0.2-0.6,0.6-0.7,1c0,0.1,0,0.2,0,0.3C5316-8141.2,5316.1-8140.6,5316.1-8140
-		L5316.1-8140z"/>
-	<path id="Path_182" class="st0" d="M5312-8129.2c0,0.6,0,1.2,0,1.8c0,0.1,0,0.1,0.1,0.1c0.3,0,0.6,0.1,0.9,0.1c0.3,0,0.7,0,1,0
-		c0.1,0,0.2,0,0.3,0c0.1,0,0.1,0,0.1-0.1c0.1-0.4,0.2-0.8,0.2-1.2c0.1-0.5,0.2-1,0.3-1.4c0-0.1,0.1-0.1,0.1-0.1
-		c0.4-0.2,0.8-0.5,1.2-0.8c0.4-0.4,0.7-0.9,0.8-1.5c0.1-0.6,0-1.2-0.4-1.7c-0.2-0.3-0.6-0.4-0.9-0.3c-0.3,0.1-0.6,0.3-0.9,0.5
-		c-0.7,0.6-1.5,1.2-2.2,1.8c-0.3,0.2-0.5,0.5-0.6,0.8c0,0.2-0.1,0.4-0.1,0.6C5311.9-8130.2,5311.9-8129.7,5312-8129.2
-		C5311.9-8129.2,5312-8129.2,5312-8129.2z"/>
-	<path id="Path_183" class="st0" d="M5315.5-8124.7c0,0.2-0.1,0.5-0.1,0.7c-0.1,0.5-0.4,0.9-0.8,1.1c0,0,0,0,0,0
-		c-0.1,0-0.2,0.2-0.2,0.3c-0.4,1.4-0.9,2.7-1.3,4.1c0,0,0,0.1,0,0.1c0.8,1.1,1.6,2.2,2.4,3.3c0,0,0,0,0.1,0.1
-		c0.1-0.2,0.1-0.3,0.2-0.5c0.1-0.3,0.2-0.5,0.3-0.8c0,0,0-0.1,0-0.1c-0.2-0.3-0.5-0.7-0.7-1c0,0,0-0.1,0-0.2
-		c0.3-0.9,0.6-1.7,0.9-2.6c0,0,0-0.1,0.1-0.1c0.5-0.2,0.9-0.6,1.1-1.1c0.1-0.3,0.1-0.7,0.1-1.1c0-0.4-0.1-0.8-0.3-1.2
-		c-0.2-0.4-0.5-0.8-1-1C5315.9-8124.7,5315.7-8124.7,5315.5-8124.7z"/>
-	<path id="Path_184" class="st0" d="M5314.7-8134.2c0.1-0.1,0.2-0.1,0.3-0.2c0.3-0.2,0.7-0.3,1-0.3c0.4,0,0.7,0.2,0.8,0.6
-		c0.6,1.1,0.5,2.4-0.4,3.3c-0.4,0.4-0.8,0.7-1.3,1c0,0-0.1,0.1-0.1,0.1c-0.2,0.8-0.3,1.6-0.5,2.5c0,0,0,0.1,0,0.1
-		c0,0.2,0,0.2-0.2,0.2c-0.1,0-0.1,0-0.2,0c0,0.1,0,0.2,0,0.3c0,0,0,0,0.1,0.1l1.9,0.7c0.2,0.1,0.4,0.2,0.7,0.2c0-0.1,0-0.2,0-0.2
-		c0-0.3,0-0.6,0-0.8l0.2-1.5l0.2-1.5c0.1-0.5,0.1-1,0.2-1.5c0.1-0.5,0.1-1.1,0.2-1.6c0.1-0.5,0.1-1,0.2-1.5c0-0.2,0-0.4,0-0.6
-		c0-0.2-0.1-0.4-0.3-0.4c0,0,0,0,0,0c-0.1,0-0.1,0-0.2,0c-0.6-0.1-1.2-0.2-1.9-0.3c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0.1-0.3,0.3
-		C5314.8-8135,5314.7-8134.6,5314.7-8134.2z"/>
-	<path id="Path_185" class="st0" d="M5324.5-8117.2c-0.2-0.7-0.5-1.3-0.7-2l-0.7,0.3c0,0-0.1,0-0.1,0c-0.1,0.1-0.2,0-0.2-0.1
-		c-0.1-0.3-0.2-0.5-0.3-0.8c-0.2-0.7-0.5-1.4-0.7-2.1c0,0,0-0.1,0-0.1c0,0,0,0.1-0.1,0.1c-0.1,0.2-0.3,0.3-0.5,0.5c0,0-0.1,0-0.1,0
-		c-0.3,0.1-0.6,0.1-0.8,0.2c0,0-0.1,0-0.1,0c0,0.2-0.1,0.3-0.1,0.5c0.6,1.5,1.1,3.1,1.7,4.6c0,0,0,0,0,0.1
-		C5322.7-8116.3,5323.6-8116.7,5324.5-8117.2z"/>
-	<path id="Path_186" class="st0" d="M5325.4-8123.1c-0.7,0.2-1.3,0.3-2,0.5c-0.5,0.1-0.9,0.2-1.4,0.3c-0.1,0-0.2,0.1-0.1,0.2
-		c0,0,0,0,0,0.1c0.2,0.5,0.3,0.9,0.5,1.4c0.2,0.5,0.4,1.1,0.6,1.6c0,0,0,0,0,0c0.1-0.1,0.2-0.1,0.3-0.2c0.2-0.1,0.3-0.2,0.5-0.2
-		c0.2-0.1,0.4-0.1,0.6-0.2c0.7-0.2,1.5-0.4,2.2-0.6c0,0,0,0,0.1,0C5326.3-8121.1,5325.9-8122.1,5325.4-8123.1z"/>
-	<path id="Path_187" class="st0" d="M5320.7-8124.4c-0.4,0.1-0.8,0.2-1.2,0.3c-0.6,0.1-1.3,0.3-1.9,0.4c0,0-0.1,0-0.1,0
-		c-0.1,0-0.2-0.1-0.3-0.1c0,0,0,0.1,0,0.1c0.3,0.7,0.4,1.5,0.3,2.2c-0.1,0.4-0.3,0.8-0.5,1.1c0,0,0,0-0.1,0.1
-		c0.2-0.1,0.4-0.1,0.6-0.1l2.5-0.6c0.5-0.1,0.9-0.6,1-1.1c0.1-0.5,0-1-0.1-1.5C5320.8-8124,5320.8-8124.2,5320.7-8124.4z"/>
-	<path id="Path_188" class="st0" d="M5325.5-8127c-2.7,0.5-5.3,1.1-7.9,1.6c0,0.5,0,0.9,0.1,1.4c0.1,0,0.2,0,0.3-0.1
-		c1.2-0.3,2.3-0.5,3.5-0.8c1.2-0.3,2.4-0.5,3.6-0.8c0.1,0,0.3-0.1,0.4-0.1c0,0,0.1,0,0.1-0.1
-		C5325.6-8126.2,5325.5-8126.6,5325.5-8127z"/>
-	<path id="Path_189" class="st0" d="M5328.6-8118.4c-0.2-0.4-0.3-0.7-0.5-1.1c-0.1-0.2-0.2-0.5-0.3-0.7c0-0.1,0-0.1-0.1,0
-		c-1.2,0.3-2.4,0.6-3.6,1c0,0,0,0-0.1,0c0.2,0.7,0.5,1.3,0.7,2C5326-8117.6,5327.3-8118,5328.6-8118.4z"/>
-	<path id="Path_190" class="st0" d="M5319.9-8120.9l-0.6,0.1c-1,0.2-2,0.5-3,0.7c-0.1,0-0.1,0.1-0.1,0.1c-0.3,0.7-0.5,1.5-0.8,2.2
-		c0,0,0,0,0,0.1c0.2,0,0.4-0.1,0.5-0.1c1-0.3,2-0.5,3.1-0.8c0.1,0,0.2-0.1,0.3-0.2C5319.5-8119.5,5319.7-8120.2,5319.9-8120.9z"/>
-	<path id="Path_191" class="st0" d="M5325.1-8125.4c-1.1,0.2-2.2,0.5-3.3,0.7c0.3,0.7,0.4,1.4,0.3,2.2c0.2,0,0.4-0.1,0.5-0.1
-		c0.9-0.2,1.8-0.4,2.7-0.6c0.1,0,0.1,0,0.1-0.1c0.1-0.4,0-0.9-0.1-1.3C5325.3-8124.9,5325.2-8125.1,5325.1-8125.4
-		C5325.1-8125.3,5325.1-8125.4,5325.1-8125.4z"/>
-	<path id="Path_192" class="st0" d="M5325.6-8132c0.2,0,0.4,0,0.5,0c0.2,0,0.4,0,0.6,0c0.3,0,0.6-0.2,0.8-0.4c0.3-0.4,0.7-0.8,1-1.2
-		c-0.1-0.1-0.1-0.1-0.1-0.2c0,0,0,0-0.1,0c-0.7-0.1-1.3-0.5-1.4-1.2c-0.1-0.2-0.1-0.4-0.1-0.6c-0.2,0.1-0.3,0.3-0.5,0.4
-		c-0.1,0.1-0.2,0.1-0.3,0.2c0,0-0.1,0.1-0.2,0c-0.2,0-0.5-0.1-0.7-0.1c0,0,0,0-0.1,0C5325.3-8134.1,5325.4-8133.1,5325.6-8132z"/>
-	<path id="Path_193" class="st0" d="M5328.4-8134.2c0.2-0.3,0.5-0.5,0.8-0.7c0.4-0.4,0.6-0.8,0.7-1.4c0-0.1,0-0.2-0.1-0.3
-		c-0.3-0.5-0.7-1.1-1-1.6c0-0.1-0.1-0.1-0.1,0c-0.4,0.2-0.8,0.5-1.1,0.8c-0.2,0.2-0.4,0.4-0.6,0.6c-0.1,0.1-0.1,0.3,0,0.4
-		c0.5,0.7,1,1.5,1.4,2.2C5328.4-8134.2,5328.4-8134.2,5328.4-8134.2z"/>
-	<path id="Path_194" class="st0" d="M5314.3-8126.1c-0.1-0.1-0.1-0.1-0.2-0.2c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0-0.3,0-0.4h-0.1
-		c-0.6,0-1.2-0.1-1.7-0.2c0,0-0.1,0-0.1,0c-0.4,0.2-0.7,0.4-1,0.8c-0.4,0.6-0.4,1.4,0.1,1.9c0.2,0.2,0.4,0.4,0.6,0.6
-		c0.1,0.1,0.2,0.2,0.3,0.2c-0.2-0.6,0-1.3,0.5-1.8C5313-8125.9,5313.6-8126.2,5314.3-8126.1z"/>
-	<path id="Path_195" class="st0" d="M5315.7-8114.9c0.5-0.1,0.9-0.3,1.4-0.4c0.8-0.2,1.6-0.4,2.4-0.7c0.1,0,0.1,0,0.1-0.1
-		c0.1-0.4,0.2-0.7,0.4-1.1c0,0,0,0,0-0.1c-0.1,0-0.2,0-0.3,0.1c-1.2,0.3-2.3,0.6-3.5,1c-0.1,0-0.1,0.1-0.1,0.1
-		c-0.1,0.4-0.3,0.7-0.4,1.1C5315.7-8115,5315.7-8115,5315.7-8114.9z"/>
-	<path id="Path_196" class="st0" d="M5315.4-8117.4c0.2,0.3,0.4,0.6,0.6,0.9c0,0,0.1,0,0.1,0c1-0.3,1.9-0.5,2.9-0.8
-		c0.3-0.1,0.6-0.2,0.9-0.2c-0.1-0.1-0.1-0.2-0.2-0.2c-0.2-0.2-0.3-0.4-0.5-0.6c0,0-0.1-0.1-0.1,0c-0.9,0.3-1.9,0.5-2.8,0.8
-		C5316-8117.5,5315.7-8117.5,5315.4-8117.4z"/>
-	<path id="Path_197" class="st0" d="M5321.3-8143.6c0-0.3,0-0.7,0-1c0,0-0.1,0-0.1,0c-0.7,0-1.5,0-2.2,0.1c-0.4,0-0.7,0-1.1,0.1
-		c-0.1,0-0.1,0-0.1,0.1c0,0.3,0,0.6,0,0.8c0,0,0,0.1,0.1,0.1c0.4,0,0.8,0,1.1,0c0.5,0,1.1,0,1.6-0.1
-		C5320.9-8143.5,5321.1-8143.6,5321.3-8143.6z"/>
-	<path id="Path_198" class="st0" d="M5329.2-8134.3c0.1,0,0.2,0,0.2-0.1c0.4-0.2,0.8-0.4,1.1-0.7c0.3-0.2,0.4-0.5,0.6-0.8
-		c0.1-0.3,0.1-0.6-0.1-0.9c-0.4-0.5-0.7-1-1.1-1.6c0,0,0,0-0.1-0.1c-0.2,0.2-0.4,0.4-0.6,0.6c0,0,0,0,0,0c0,0,0,0.1,0,0.1
-		c0.2,0.4,0.5,0.7,0.7,1c0.1,0.2,0.2,0.4,0.1,0.6c0,0.5-0.1,0.9-0.4,1.3c-0.1,0.1-0.2,0.2-0.3,0.3
-		C5329.4-8134.5,5329.3-8134.4,5329.2-8134.3C5329.2-8134.3,5329.2-8134.3,5329.2-8134.3z"/>
-	<path id="Path_199" class="st0" d="M5317.5-8136.7c0,0.2,0,0.3,0,0.5c0,0,0,0.1,0.1,0.1c0.2,0,0.3,0.1,0.5,0.1c0.7,0.1,1.4,0.1,2,0
-		c0.4,0,0.8-0.1,1.2-0.1c0.2,0,0.5-0.1,0.7-0.1c0.1,0,0.1,0,0.1-0.1c0-0.2,0-0.3,0-0.5C5320.5-8136.6,5319-8136.5,5317.5-8136.7z"/>
-	<path id="Path_200" class="st0" d="M5312.5-8123.2c0.1-0.4,0.1-0.8,0.2-1.2c0.1-0.6,0.6-1,1.2-1c0.3,0,0.5,0.1,0.7,0.3
-		c0.2,0.2,0.2,0.4,0.2,0.7c-0.1,0.3-0.2,0.6-0.2,0.9c0,0.1-0.1,0.2-0.1,0.4c0,0,0,0,0,0c0.1-0.1,0.2-0.2,0.3-0.3
-		c0.3-0.4,0.4-0.9,0.4-1.4c0-0.6-0.4-1-0.9-1.1c-0.1,0-0.1,0-0.2,0c-0.5,0-1,0.3-1.4,0.7c-0.3,0.3-0.4,0.6-0.5,1
-		c-0.1,0.3,0,0.7,0.2,1C5312.5-8123.2,5312.5-8123.2,5312.5-8123.2z"/>
-	<path id="Path_201" class="st0" d="M5314.3-8123.2c0.1-0.5,0.3-0.9,0.4-1.4c0.1-0.2,0-0.4-0.2-0.5c-0.4-0.2-0.9-0.1-1.2,0.2
-		c0,0,0,0,0,0.1c0,0.2,0,0.4,0.1,0.6c0,0.1,0.1,0.2,0.2,0.3C5313.7-8123.6,5314-8123.4,5314.3-8123.2
-		C5314.2-8123.2,5314.3-8123.2,5314.3-8123.2z"/>
-	<path id="Path_202" class="st0" d="M5317.4-8124.1c0-0.4,0-0.9-0.1-1.3c-0.1,0-0.1,0-0.2,0c-0.1,0-0.2,0-0.3,0
-		c-0.7-0.3-1.4-0.5-2.1-0.8c0,0,0,0,0,0c0.1,0.1,0.1,0.1,0.2,0.2c0.3,0.2,0.5,0.6,0.6,0.9c0,0,0,0,0,0c0.1,0,0.3,0,0.4,0.1
-		c0.3,0.1,0.6,0.3,0.9,0.5c0,0,0.1,0.1,0.1,0.1C5317.1-8124.2,5317.2-8124.1,5317.4-8124.1z"/>
-	<path id="Path_203" class="st0" d="M5321.6-8124.6c-0.2,0-0.4,0.1-0.6,0.1c0.1,0.2,0.1,0.4,0.2,0.6c0.1,0.4,0.2,0.8,0.1,1.2
-		c0,0.5-0.1,0.9-0.4,1.3c0,0,0,0,0,0c0.3,0,0.6-0.2,0.7-0.5c0.2-0.3,0.3-0.6,0.3-0.9C5321.9-8123.4,5321.8-8124,5321.6-8124.6z"/>
-	<path id="Path_204" class="st0" d="M5315.7-8135.8c0.2,0,0.3,0.1,0.5,0.1c0.5,0.1,1,0.2,1.5,0.2c0.2,0,0.5,0,0.7,0
-		c0.7-0.1,1.4-0.2,2.1-0.2c0.6-0.1,1.2-0.2,1.8-0.2c0.5-0.1,1.1-0.1,1.6-0.2l-1.5-0.2c0,0,0,0,0,0c0,0.2-0.1,0.3-0.2,0.3
-		c0,0,0,0,0,0c-0.3,0.1-0.5,0.1-0.8,0.2c-0.8,0.1-1.6,0.1-2.3,0.1c-0.4,0-0.9,0-1.3-0.1c-0.1,0-0.2-0.1-0.3-0.2c0,0-0.1,0-0.1,0
-		c-0.3,0-0.6,0.1-0.9,0.1L5315.7-8135.8L5315.7-8135.8z"/>
-	<path id="Path_205" class="st0" d="M5327.3-8117.7c-0.3,0.1-0.5,0.2-0.8,0.2c-0.6,0.2-1.1,0.3-1.7,0.5c0,0-0.1,0-0.1,0.1
-		c-0.5,0.2-1,0.5-1.5,0.7c0,0,0,0,0,0c0.3-0.1,0.5-0.1,0.8-0.2c0.5-0.2,1.1-0.3,1.6-0.5c0.1,0,0.2-0.1,0.2-0.1
-		C5326.2-8117.2,5326.8-8117.5,5327.3-8117.7C5327.3-8117.7,5327.3-8117.7,5327.3-8117.7C5327.3-8117.7,5327.3-8117.7,5327.3-8117.7
-		z"/>
-	<path id="Path_206" class="st0" d="M5327-8135.8c0,0.1,0,0.2,0,0.4c0.1,0.5,0.3,0.9,0.7,1.1c0.1,0.1,0.3,0.1,0.4,0.2l0,0
-		C5327.8-8134.7,5327.4-8135.2,5327-8135.8L5327-8135.8z"/>
-	<path id="Path_207" class="st0" d="M5329-8134.4c-0.1,0.1-0.2,0.2-0.3,0.4c0,0,0,0,0,0.1c0,0.1,0,0.1,0.1,0.1c0.1,0,0.2,0,0.3-0.1
-		c0.1,0,0.2-0.1,0.3-0.1c-0.1,0-0.1-0.1-0.2-0.1C5329-8134.2,5329-8134.3,5329-8134.4z"/>
+<g>
+	<polygon class="st0" points="2,9.9 5.8,8.2 5.8,8 6.2,7.4 6.9,6.9 8,6.6 9.1,6.5 9.5,6.6 13.1,5 13.1,4.8 13.4,4.3 14,3.9 
+		14.9,3.6 16,3.5 17.1,3.6 18,3.9 18.6,4.3 18.9,4.8 18.9,5 22.4,6.6 23,6.6 24,6.7 25,7 25.8,7.5 26.2,8 26.2,8.3 29.9,10 
+		28.8,19.3 15.9,28.5 3.1,19.2 	"/>
+	<g>
+		<path class="st1" d="M15.9,28.6C15.9,28.6,15.9,28.6,15.9,28.6L15.9,28.6C15.9,28.6,15.9,28.6,15.9,28.6
+			C15.9,28.6,15.9,28.6,15.9,28.6L15.9,28.6C15.9,28.6,15.9,28.6,15.9,28.6L15.9,28.6C15.9,28.6,15.9,28.6,15.9,28.6L15.9,28.6
+			C15.9,28.6,15.9,28.6,15.9,28.6L15.9,28.6C15.9,28.6,15.9,28.6,15.9,28.6C15.9,28.6,15.9,28.6,15.9,28.6
+			C15.9,28.6,15.9,28.6,15.9,28.6C15.9,28.6,15.9,28.6,15.9,28.6L3.1,19.3c0,0,0,0,0,0L2,9.9c0,0,0,0,0,0c0,0,0,0,0,0l0,0
+			c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0v0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0h0c0,0,0,0,0,0c0,0,0,0,0,0
+			c0,0,0,0,0,0l3.8-1.7l0-0.1l0-0.1c0,0,0,0,0,0l0.4-0.6c0,0,0,0,0,0l0.7-0.5c0,0,0,0,0,0l1-0.3c0,0,0,0,0,0l1.2-0.1c0,0,0,0,0,0
+			l0.4,0l3.6-1.6l0-0.1c0,0,0,0,0,0c0,0,0,0,0,0l0,0l0.2-0.5c0,0,0,0,0,0L14,3.8c0,0,0,0,0,0l0.9-0.3c0,0,0,0,0,0L16,3.4
+			c0,0,0,0,0,0l1.1,0.1c0,0,0,0,0,0L18,3.8c0,0,0,0,0,0l0.6,0.4c0,0,0,0,0,0l0.3,0.5c0,0,0,0,0,0v0c0,0,0,0,0,0l0,0.2l3.6,1.6l0.4,0
+			c0,0,0,0,0,0L24,6.6c0,0,0,0,0,0l1,0.3c0,0,0,0,0,0l0.8,0.5c0,0,0,0,0,0L26.2,8c0,0,0,0,0,0c0,0,0,0,0,0l0,0.2L30,9.9c0,0,0,0,0,0
+			l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0
+			c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0l-1.2,9.3c0,0,0,0,0,0L15.9,28.6C15.9,28.6,15.9,28.6,15.9,28.6
+			C15.9,28.6,15.9,28.6,15.9,28.6L15.9,28.6C15.9,28.6,15.9,28.6,15.9,28.6z M16,18.5L16,28.4l12.8-9.1l1.2-9.2L16,18.5z M3.2,19.2
+			l12.7,9.2l0.1-9.9L2.1,10L3.2,19.2z M2.1,9.9L16,18.4L29.9,10l-3.6-1.6L26.1,10L26,10.6c0,0,0,0,0,0l-0.6,0.5c0,0,0,0,0,0
+			l-0.9,0.4c0,0,0,0,0,0l-1.2,0.1c0,0,0,0,0,0L22,11.5c0,0,0,0,0,0l-1.1-0.4c0,0,0,0,0,0l-0.7-0.5c0,0,0,0,0,0L19.9,10c0,0,0,0,0,0
+			L20,8c0,0,0,0,0,0v0c0,0,0,0,0,0s0,0,0,0v0c0,0,0,0,0,0l0.2-0.6c0,0,0,0,0,0l0.6-0.5c0,0,0,0,0,0l0.9-0.3c0,0,0,0,0,0l0.5-0.1
+			l-3.3-1.5l0,1.5c0,0,0,0,0,0l-0.2,0.5c0,0,0,0,0,0l-0.6,0.4c0,0,0,0,0,0l-0.9,0.3c0,0,0,0,0,0L16,8c0,0,0,0,0,0l-1.1-0.1
+			c0,0,0,0,0,0l-0.9-0.3c0,0,0,0,0,0l-0.6-0.5c0,0,0,0,0,0l-0.2-0.5c0,0,0,0,0,0l0-1.5L9.7,6.5l0.5,0.1c0,0,0,0,0,0l0.9,0.3
+			c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0.6,0.5c0,0,0,0,0,0L12,8c0,0,0,0,0,0l0.1,1.9c0,0,0,0,0,0l-0.3,0.5l0,0.1c0,0,0,0,0,0L11,11.1
+			c0,0,0,0,0,0L10,11.5c0,0,0,0,0,0l-1.2,0.1c0,0,0,0,0,0l-1.2-0.1c0,0,0,0,0,0l-0.9-0.4c0,0,0,0,0,0L6,10.5c0,0,0,0,0,0L5.9,9.9
+			L5.8,8.3L2.1,9.9z M22,11.4l1.2,0.1l1.2-0.1l0.9-0.3l0.5-0.5L26,9.9l0.1-1.2L26,8.8l-0.1,0.1l-0.3,0.3c0,0,0,0,0,0l-1,0.3
+			c0,0,0,0,0,0l-1.2,0.1c0,0,0,0,0,0l-1.2-0.1c0,0,0,0,0,0L21,9.2c0,0,0,0,0,0l-0.7-0.5c0,0,0,0,0,0l-0.2-0.4L20,9.9l0.3,0.6L21,11
+			L22,11.4z M7.6,11.3l1.2,0.1l1.2-0.1l1-0.3l0.7-0.5l0,0L12,9.9l-0.1-1.7l-0.2,0.4c0,0,0,0,0,0L11,9.2c0,0,0,0,0,0L9.9,9.5
+			c0,0,0,0,0,0L8.7,9.6c0,0,0,0,0,0L7.4,9.5c0,0,0,0,0,0l-1-0.4c0,0,0,0,0,0L5.9,8.7L6,9.9l0.1,0.6L6.7,11L7.6,11.3z M22.1,9.4
+			l1.2,0.1l1.2-0.1l1-0.3l0.3-0.3l0.1-0.1L26,8.6l0.1-0.5l0,0l-0.3-0.5L25,7l-1-0.3l-1.2-0.1l-0.4,0l-0.7,0.1L20.8,7l-0.6,0.5
+			L20.1,8l0.3,0.5l0.7,0.5L22.1,9.4z M7.4,9.4l1.2,0.1l1.2-0.1l1.1-0.3l0.7-0.5L11.9,8l-0.2-0.5L11.1,7l-0.9-0.3L9.5,6.6
+			c0,0,0,0,0,0l-0.4,0l0,0L8,6.7L6.9,7L6.2,7.4L5.9,8l0,0c0,0,0,0,0,0L6,8.5L6.5,9L7.4,9.4z M14.9,7.8L16,7.9l1.1-0.1l0.1,0L18,7.5
+			l0.6-0.4l0.2-0.5l0-1.4l-0.1,0.2c0,0,0,0,0,0l-0.6,0.4c0,0,0,0,0,0l-0.9,0.3c0,0,0,0,0,0L16,6.2c0,0,0,0,0,0l-1.1-0.1c0,0,0,0,0,0
+			l-0.9-0.3c0,0,0,0,0,0l-0.6-0.4c0,0,0,0,0,0l-0.1-0.2l0,1.5l0.2,0.5L14,7.5L14.9,7.8z M14.9,5.9L16,6.1L17.1,6L18,5.7l0.6-0.4
+			l0.2-0.5l-0.2-0.5L18,3.9L17,3.6L16,3.6l-1.1,0.1L14,3.9l-0.6,0.4l-0.2,0.5l0.2,0.5L14,5.7L14.9,5.9z M16,15.8
+			C16,15.8,16,15.8,16,15.8l-1.3-0.2c0,0,0,0,0,0l-1.1-0.4c0,0,0,0,0,0l-0.7-0.6c0,0,0,0,0,0l-0.2-0.7c0,0,0,0,0,0l0-2l0,0
+			c0,0,0,0,0,0l0.3-0.7c0,0,0,0,0,0l0.7-0.6c0,0,0,0,0,0l1.1-0.4c0,0,0,0,0,0L16,10c0,0,0,0,0,0l1.3,0.1c0,0,0,0,0,0l1.1,0.4
+			c0,0,0,0,0,0l0.7,0.6c0,0,0,0,0,0l0.3,0.7c0,0,0,0,0,0l0,0l-0.1,2c0,0,0,0,0,0l-0.2,0.7c0,0,0,0,0,0l-0.7,0.6c0,0,0,0,0,0
+			l-1.1,0.4c0,0,0,0,0,0L16,15.8C16,15.8,16,15.8,16,15.8z M14.7,15.5l1.3,0.1l1.3-0.1l1.1-0.4l0.7-0.6l0.2-0.7v0l0-1.5l-0.1,0.2
+			c0,0,0,0,0,0l-0.7,0.6c0,0,0,0,0,0l-1.1,0.4c0,0,0,0,0,0L16,13.7c0,0,0,0,0,0l-1.3-0.1c0,0,0,0,0,0l-1.1-0.4c0,0,0,0,0,0l-0.7-0.6
+			c0,0,0,0,0,0l-0.1-0.3l0,1.5l0.2,0.7l0.7,0.6L14.7,15.5z M14.7,13.5l1.3,0.1l1.3-0.1l1.1-0.4l0.7-0.6l0.1-0.3l0,0c0,0,0,0,0,0
+			l0-0.1l0,0c0,0,0,0,0,0l0,0l0-0.1L19,11.2l-0.7-0.5l-1.1-0.4L16,10.2l-1.2,0.1l-1.1,0.4L13,11.2l-0.3,0.6l0,0c0,0,0,0,0,0l0.2,0.7
+			l0.7,0.6L14.7,13.5z"/>
+	</g>
 </g>
 </svg>
--- a/docs/static/fonts/icons/iconfont.css
+++ b/docs/static/fonts/icons/iconfont.css
@ -1,8 +1,8 @@
@font-face {
 	font-family: "iconfont";
-	src: url("iconfont.eot?8b7e57577c2d1f1ae9e810b9e010bc84?#iefix") format("embedded-opentype"),
-url("iconfont.woff2?8b7e57577c2d1f1ae9e810b9e010bc84") format("woff2"),
-url("iconfont.woff?8b7e57577c2d1f1ae9e810b9e010bc84") format("woff");
+	src: url("iconfont.eot?92b07c6c5392088e45983d845234d068?#iefix") format("embedded-opentype"),
+url("iconfont.woff2?92b07c6c5392088e45983d845234d068") format("woff2"),
+url("iconfont.woff?92b07c6c5392088e45983d845234d068") format("woff");
 }

 .icon {
@ -91,3 +91,6 @@ url("iconfont.woff?8b7e57577c2d1f1ae9e810b9e010bc84") format("woff");
 .icon-blocks:before {
 	content: "\f119";
 }
+.icon-search:before {
+	content: "\f11a";
+}
--- a/docs/static/fonts/icons/iconfont.eot
+++ b/docs/static/fonts/icons/iconfont.eot
--- a/docs/static/fonts/icons/iconfont.svg
+++ b/docs/static/fonts/icons/iconfont.svg
@ -82,6 +82,9 @@
    <glyph glyph-name="blocks"
      unicode="&#xF119;"
      horiz-adv-x="40" d=" M10.9 23H39V16.9H10.9V23z M39.2 27.1L39.2 33L0.9 33L0.9 31.1L0.9 27.1L0.9 12.9L0.9 7L39.2 7L39.2 12.9L6.9 12.9L6.9 27.1z" />
+    <glyph glyph-name="search"
+      unicode="&#xF11A;"
+      horiz-adv-x="40" d=" M38.6 4.9L29.6 13.9C31.5 16.5 32.7 19.7 32.7 23.1C32.7 31.8 25.7 38.8 17 38.8C8.3 38.8 1.4 31.8 1.4 23.1C1.4 14.4 8.3 7.5 17 7.5C20.3 7.5 23.3 8.5 25.9 10.3L35 1.2L38.6 4.9zM17 12.7C11.3 12.7 6.6 17.4 6.6 23.1S11.3 33.6 17 33.6S27.5 28.9 27.5 23.1S22.8 12.7 17 12.7z" />
  </font>
 </defs>
 </svg>
--- a/docs/static/fonts/icons/iconfont.ttf
+++ b/docs/static/fonts/icons/iconfont.ttf
--- a/docs/static/fonts/icons/iconfont.woff
+++ b/docs/static/fonts/icons/iconfont.woff
--- a/docs/static/fonts/icons/iconfont.woff2
+++ b/docs/static/fonts/icons/iconfont.woff2
--- a/docs/static/lessons/make-a-system.png
+++ b/docs/static/lessons/make-a-system.png
--- a/docs/static/lessons/make-it-communicate/trackrover.mp4
+++ b/docs/static/lessons/make-it-communicate/trackrover.mp4
--- a/docs/static/lessons/make-it-move-1.png
+++ b/docs/static/lessons/make-it-move-1.png
--- a/docs/static/lessons/make-it-move-2.png
+++ b/docs/static/lessons/make-it-move-2.png
--- a/docs/static/lessons/make-it-move-3.png
+++ b/docs/static/lessons/make-it-move-3.png
--- a/docs/static/lessons/make-it-move.png
+++ b/docs/static/lessons/make-it-move.png
--- a/docs/static/lessons/make-it-smarter-1.png
+++ b/docs/static/lessons/make-it-smarter-1.png
--- a/docs/static/lessons/make-it-smarter-2.png
+++ b/docs/static/lessons/make-it-smarter-2.png
--- a/docs/static/lessons/make-it-smarter.png
+++ b/docs/static/lessons/make-it-smarter.png
--- a/docs/static/lessons/make-it-smarter/bricks.png
+++ b/docs/static/lessons/make-it-smarter/bricks.png
--- a/docs/static/lessons/parking.png
+++ b/docs/static/lessons/parking.png
--- a/docs/static/lessons/sound-machine.png
+++ b/docs/static/lessons/sound-machine.png
--- a/docs/static/lessons/try.png
+++ b/docs/static/lessons/try.png
--- a/docs/static/lessons/use.png
+++ b/docs/static/lessons/use.png
--- a/editor/extension.ts
+++ b/editor/extension.ts
@ -7,6 +7,7 @@ import { FieldImages } from "./field_images";
 import { FieldSpeed } from "./field_speed";
 import { FieldBrickButtons } from "./field_brickbuttons";
 import { FieldTurnRatio } from "./field_turnratio";
+import { FieldColorEnum } from "./field_color";

 pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): Promise<pxt.editor.ExtensionResult> {
    pxt.debug('loading pxt-ev3 target extensions...')
@ -27,6 +28,9 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
        }, {
            selector: "turnratio",
            editor: FieldTurnRatio
+        }, {
+            selector: "colorenum",
+            editor: FieldColorEnum
        }],
        deployCoreAsync,
        showUploadInstructionsAsync: (fn: string, url: string, confirmAsync: (options: any) => Promise<number>) => {
--- a/editor/field_color.ts
+++ b/editor/field_color.ts
@ -0,0 +1,71 @@
+/// <reference path="../node_modules/pxt-core/localtypings/blockly.d.ts"/>
+/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
+
+export interface FieldColorEnumOptions extends pxtblockly.FieldColourNumberOptions {
+}
+
+export class FieldColorEnum extends pxtblockly.FieldColorNumber implements Blockly.FieldCustom {
+    public isFieldCustom_ = true;
+
+    constructor(text: string, params: FieldColorEnumOptions, opt_validator?: Function) {
+        super(text, params, opt_validator);
+    }
+
+    mapColour(enumString: string) {
+        switch(enumString) {
+            case '#000000': return 'ColorSensorColor.Black';
+            case '#006db3': return 'ColorSensorColor.Blue';
+            case '#00934b': return 'ColorSensorColor.Green';
+            case '#ffd01b': return 'ColorSensorColor.Yellow';
+            case '#f12a21': return 'ColorSensorColor.Red';
+            case '#ffffff': return 'ColorSensorColor.White';
+            case '#6c2d00': return 'ColorSensorColor.Brown';
+            default: return 'ColorSensorColor.None';
+        }
+    }
+
+    mapEnum(colorString: string) {
+        console.log(colorString);
+        switch(colorString) {
+            case 'ColorSensorColor.Black': return '#000000';
+            case 'ColorSensorColor.Blue': return '#006db3';
+            case 'ColorSensorColor.Green': return '#00934b';
+            case 'ColorSensorColor.Yellow': return '#ffd01b';
+            case 'ColorSensorColor.Red': return '#f12a21';
+            case 'ColorSensorColor.White': return '#ffffff';
+            case 'ColorSensorColor.Brown': return '#6c2d00';
+            case 'ColorSensorColor.None': return '#dfe6e9'; // Grey
+            default: return colorString;
+        }
+    }
+
+    /**
+     * Return the current colour.
+     * @param {boolean} opt_asHex optional field if the returned value should be a hex
+     * @return {string} Current colour in '#rrggbb' format.
+     */
+    getValue(opt_asHex?: boolean) {
+        var colour = this.mapColour(this.colour_);
+        if (!opt_asHex && colour.indexOf('#') > -1) {
+            return `0x${colour.replace(/^#/, '')}`;
+        }
+        return colour;
+    }
+
+    /**
+     * Set the colour.
+     * @param {string} colour The new colour in '#rrggbb' format.
+     */
+    setValue(colorStr: string) {
+        var colour = this.mapEnum(colorStr);
+        if (this.sourceBlock_ && Blockly.Events.isEnabled() &&
+            this.colour_ != colour) {
+            Blockly.Events.fire(new (Blockly as any).Events.BlockChange(
+                this.sourceBlock_, 'field', this.name, this.colour_, colour));
+        }
+        this.colour_ = colour;
+        if (this.sourceBlock_) {
+            this.sourceBlock_.setColour(colour, colour, colour);
+        }
+    }
+}
--- a/libs/base/shims.d.ts
+++ b/libs/base/shims.d.ts
@ -64,6 +64,15 @@ declare interface Buffer {
    //% shim=BufferMethods::write
    write(dstOffset: int32, src: Buffer): void;
 }
+declare namespace control {
+
+    /**
+     * Create a new zero-initialized buffer.
+     * @param size number of bytes in the buffer
+     */
+    //% shim=control::createBuffer
+    function createBuffer(size: int32): Buffer;
+}
 declare namespace loops {

    /**
--- a/libs/color-sensor/color.ts
+++ b/libs/color-sensor/color.ts
@ -19,21 +19,21 @@ enum LightIntensityMode {
 }

 const enum ColorSensorColor {
-    //% block="none" jres=colors.none blockIdentity=sensors.color
+    //% block="none" blockIdentity=sensors.__colorEnumPicker
    None,
-    //% block="black" jres=colors.black blockIdentity=sensors.color
+    //% block="black" blockIdentity=sensors.__colorEnumPicker
    Black,
-    //% block="blue" jres=colors.blue blockIdentity=sensors.color
+    //% block="blue" blockIdentity=sensors.__colorEnumPicker
    Blue,
-    //% block="green" jres=colors.green blockIdentity=sensors.color
+    //% block="green" blockIdentity=sensors.__colorEnumPicker
    Green,
-    //% block="yellow" jres=colors.yellow blockIdentity=sensors.color
+    //% block="yellow" blockIdentity=sensors.__colorEnumPicker
    Yellow,
-    //% block="red" jres=colors.red blockIdentity=sensors.color
+    //% block="red" blockIdentity=sensors.__colorEnumPicker
    Red,
-    //% block="white" jres=colors.white blockIdentity=sensors.color
+    //% block="white" blockIdentity=sensors.__colorEnumPicker
    White,
-    //% block="brown" jres=colors.brown blockIdentity=sensors.color
+    //% block="brown" blockIdentity=sensors.__colorEnumPicker
    Brown
 }

@ -110,19 +110,14 @@ namespace sensors {
         * @param handler the code to run when detected
         */
        //% help=sensors/color-sensor/on-color-detected
-        //% block="on %sensor|detected color %color"
+        //% block="on **color** %this|detected color %color=colorEnumPicker"
        //% blockId=colorOnColorDetected
        //% parts="colorsensor"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=100 blockGap=12
        //% group="Color Sensor"
-        //% color.fieldEditor="gridpicker"
-        //% color.fieldOptions.columns=4 
-        //% color.fieldOptions.tooltips=true
-        //% color.fieldOptions.hideRect=true
-        //% color.fieldOptions.width=268
-        onColorDetected(color: ColorSensorColor, handler: () => void) {
+        onColorDetected(color: number, handler: () => void) {
            this.setMode(ColorSensorMode.Color)
            const v = this._colorEventValue(<number>color);
            control.onEvent(this._id, v, handler);
@ -135,19 +130,14 @@ namespace sensors {
         * @param color the color to detect
         */
        //% help=sensors/color-sensor/pause-for-color
-        //% block="pause %sensor|for color %color"
+        //% block="pause **color** %this|for color %color=colorEnumPicker"
        //% blockId=colorPauseForColorDetected
        //% parts="colorsensor"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=99 blockGap=8
        //% group="Color Sensor"
-        //% color.fieldEditor="gridpicker"
-        //% color.fieldOptions.columns=4 
-        //% color.fieldOptions.tooltips=true
-        //% color.fieldOptions.hideRect=true
-        //% color.fieldOptions.width=268
-        pauseForColor(color: ColorSensorColor) {
+        pauseForColor(color: number) {
            this.setMode(ColorSensorMode.Color);
            if (this.color() != color) {
                const v = this._colorEventValue(<number>color);
@ -160,11 +150,11 @@ namespace sensors {
         * @param sensor the color sensor to query the request
         */
        //% help=sensors/color-sensor/color
-        //% block="%sensor| color"
+        //% block="**color** %this| color"
        //% blockId=colorGetColor
        //% parts="colorsensor"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=98
        //% group="Color Sensor"
        //% blockGap=8
@ -179,11 +169,11 @@ namespace sensors {
         * @param handler the code to run when detected
         */
        //% help=sensors/color-sensor/on-light-changed
-        //% block="on %sensor|%mode|%condition"
+        //% block="on **color** %this|%mode|%condition"
        //% blockId=colorOnLightChanged
        //% parts="colorsensor"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=89 blockGap=12
        //% group="Color Sensor"
        onLightChanged(mode: LightIntensityMode, condition: LightCondition, handler: () => void) {
@ -196,11 +186,11 @@ namespace sensors {
         * @param color the color to detect
         */
        //% help=sensors/color-sensor/pause-for-light
-        //% block="pause %sensor|for %mode|%condition"
+        //% block="pause **color** %this|for %mode|%condition"
        //% blockId=colorPauseForLight
        //% parts="colorsensor"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=88 blockGap=8
        //% group="Color Sensor"
        pauseForLight(mode: LightIntensityMode, condition: LightCondition) {
@ -214,11 +204,11 @@ namespace sensors {
         * @param sensor the color sensor port
         */
        //% help=sensors/color-sensor/light
-        //% block="%sensor|%mode"
+        //% block="**color** %this|%mode"
        //% blockId=colorLight
        //% parts="colorsensor"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=87
        //% group="Color Sensor"
        light(mode: LightIntensityMode) {
@ -241,10 +231,10 @@ namespace sensors {
         * @param condition the dark or bright light condition
         * @param value the value threshold
         */
-        //% blockId=colorSetThreshold block="set %sensor|%condition|to %value"
+        //% blockId=colorSetThreshold block="set **color** %this|%condition|to %value"
        //% group="Threshold" blockGap=8 weight=90
        //% value.min=0 value.max=100
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% help=sensors/color-sensor/set-threshold
        setThreshold(condition: LightCondition, value: number) {
            if (condition == LightCondition.Dark)
@ -257,9 +247,9 @@ namespace sensors {
         * Get a threshold value
         * @param condition the light condition
         */
-        //% blockId=colorGetThreshold block="%sensor|%condition"
+        //% blockId=colorGetThreshold block="**color** %this|%condition"
        //% group="Threshold" blockGap=8 weight=89
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% help=sensors/color-sensor/threshold
        threshold(condition: LightCondition): number {
            return this.thresholdDetector.threshold(<ThresholdState><number>LightCondition.Dark);
@ -268,9 +258,9 @@ namespace sensors {
        /**
         * Collects measurement of the light condition and adjusts the threshold to 10% / 90%.
         */
-        //% blockId=colorCalibrateLight block="calibrate|%sensor|for %mode"
+        //% blockId=colorCalibrateLight block="calibrate **color** %this|for %mode"
        //% group="Threshold" weight=91 blockGap=8
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% help=sensors/color-sensor/calibrate-light
        calibrateLight(mode: LightIntensityMode, deviation: number = 8) {
            this.calibrating = true; // prevent events
@ -319,28 +309,23 @@ namespace sensors {
     * @param color the color sensed by the sensor, eg: ColorSensorColor.Red
     */
    //% shim=TD_ID
-    //% blockId=colorSensorColor block="color %color"
+    //% blockId=colorSensorColor block="color %color=colorEnumPicker"
    //% group="Color Sensor"
    //% weight=97
    //% help=sensors/color
-    //% color.fieldEditor="gridpicker"
-    //% color.fieldOptions.columns=4 
-    //% color.fieldOptions.tooltips=true
-    //% color.fieldOptions.hideRect=true
-    //% color.fieldOptions.width=268
-    export function color(color: ColorSensorColor): ColorSensorColor {
+    export function color(color: number): ColorSensorColor {
        return color;
    }

-    //% whenUsed block="color 3" weight=95 fixedInstance jres=icons.port3
+    //% whenUsed block="3" weight=95 fixedInstance jres=icons.port3
    export const color3: ColorSensor = new ColorSensor(3)

-    //% whenUsed block="color 1" weight=90 fixedInstance jres=icons.port1
+    //% whenUsed block="1" weight=90 fixedInstance jres=icons.port1
    export const color1: ColorSensor = new ColorSensor(1)

-    //% whenUsed block="color 2" weight=90 fixedInstance jres=icons.port2
+    //% whenUsed block="2" weight=90 fixedInstance jres=icons.port2
    export const color2: ColorSensor = new ColorSensor(2)

-    //% whenUsed block="color 4" weight=90 fixedInstance jres=icons.port4
+    //% whenUsed block="4" weight=90 fixedInstance jres=icons.port4
    export const color4: ColorSensor = new ColorSensor(4)
 }
--- a/libs/color-sensor/ns.ts
+++ b/libs/color-sensor/ns.ts
@ -0,0 +1,17 @@
+
+
+namespace sensors {
+
+    /**
+     * A color enum picker
+     * @param color to use, eg: ColorSensorColor.Blue
+     */
+    //% blockId=colorEnumPicker block="%color" shim=TD_ID
+    //% weight=0 blockHidden=1 turnRatio.fieldOptions.decompileLiterals=1
+    //% color.fieldEditor="colorenum"
+    //% color.fieldOptions.colours='["#f12a21", "#ffd01b", "#006db3", "#00934b", "#ffffff", "#6c2d00", "#000000"]'
+    //% color.fieldOptions.columns=2 color.fieldOptions.className='legoColorPicker'
+    export function __colorEnumPicker(color: ColorSensorColor): number {
+        return color;
+    }
+}
--- a/libs/color-sensor/pxt.json
+++ b/libs/color-sensor/pxt.json
@ -4,7 +4,8 @@
    "files": [
        "README.md",
        "colors.jres",
-        "color.ts"
+        "color.ts",
+        "ns.ts"
    ],
    "testFiles": [
        "test.ts"
--- a/libs/core/console.ts
+++ b/libs/core/console.ts
@ -51,12 +51,13 @@ namespace console {
     */
    //% blockId=logsendtostreen block="send console to screen"
    //% weight=1
+    //% help=console/send-to-screen
    export function sendToScreen(): void {
-        console.screen.attach();
+        console._screen.attach();
    }
 }

-namespace console.screen {
+namespace console._screen {
    const maxLines = 100;
    const screenLines = 10;
    let lines: string[];
@ -77,7 +78,7 @@ namespace console.screen {
        for (let i = 0; i < screenLines; ++i) {
            const line = lines[i + scrollPosition];
            if (line)
-                brick.print(line, 0, 4 + i * brick.LINE_HEIGHT)
+                screen.print(line, 0, 4 + i * brick.LINE_HEIGHT)
        }
    }

--- a/libs/core/control.cpp
+++ b/libs/core/control.cpp
@ -10,6 +10,7 @@ namespace control {
 */
 //% weight=21 blockGap=12 blockId="control_raise_event"
 //% block="raise event|from %src|with value %value" blockExternalInputs=1
+//% help=control/raise-event
 void raiseEvent(int src, int value) {
    pxt::raiseEvent(src, value);
 }
--- a/libs/core/enums.d.ts
+++ b/libs/core/enums.d.ts
@ -11,19 +11,4 @@
    End = 2,
    }

-
-    /**
-     * Drawing modes
-     */
-
-    declare const enum Draw {
-    Normal = 0x00,
-    Clear = 0x01,
-    Xor = 0x02,
-    Fill = 0x04,
-    Transparent = 0x08,
-    Double = 0x10,
-    Quad = 0x20,
-    }
-
 // Auto-generated. Do not edit. Really.
--- a/libs/core/png.cpp
+++ b/libs/core/png.cpp
@ -19,20 +19,13 @@ struct PNGHeader {
    uint8_t IDAT[4];
 } __attribute__((packed));

-namespace screen {
+namespace image {

 static uint32_t swap(uint32_t num) {
    return ((num >> 24) & 0xff) | ((num << 8) & 0xff0000) | ((num >> 8) & 0xff00) |
           ((num << 24) & 0xff000000);
 }

-static uint8_t revbits(uint8_t v) {
-    v = (v & 0xf0) >> 4 | (v & 0x0f) << 4;
-    v = (v & 0xcc) >> 2 | (v & 0x33) << 2;
-    v = (v & 0xaa) >> 1 | (v & 0x55) << 1;
-    return v;
-}
-
 /** Decompresses a 1-bit gray scale PNG image to image format. */
 //%
 Image unpackPNG(Buffer png) {
@ -101,12 +94,11 @@ Image unpackPNG(Buffer png) {
        return NULL;
    }

-    Buffer res = mkBuffer(NULL, 2 + byteW * hd.height);
-    res->data[0] = 0xf0;
-    res->data[1] = hd.width;
-    uint8_t *dst = res->data + 2;
+    auto res = mkImage(hd.width, hd.height, 1);
+
+    uint8_t *dst = res->pix();
    uint8_t *src = tmp;
-    uint8_t lastMask = (1 << (hd.width & 7)) - 1;
+    uint8_t lastMask = 0xff << (8 - (hd.width & 7));
    if (lastMask == 0)
        lastMask = 0xff;
    for (uint32_t i = 0; i < hd.height; ++i) {
@ -117,7 +109,7 @@ Image unpackPNG(Buffer png) {
            return NULL;
        }
        for (uint32_t j = 0; j < byteW; ++j) {
-            *dst = ~revbits(*src++);
+            *dst = ~*src++;
            if (j == byteW - 1) {
                *dst &= lastMask;
            }
--- a/libs/core/pxt.h
+++ b/libs/core/pxt.h
@ -32,7 +32,6 @@ class MMap : public RefObject {
 extern volatile bool paniced;

 // Buffer, Sound, and Image share representation.
-typedef Buffer Image;
 typedef Buffer Sound;

 }
@ -41,4 +40,6 @@ typedef Buffer Sound;
 #define DEVICE_ID_NOTIFY 10000
 #define DEVICE_ID_NOTIFY_ONE 10001

+#define IMAGE_BITS 1
+
 #endif
--- a/libs/core/pxt.json
+++ b/libs/core/pxt.json
@ -16,7 +16,6 @@
        "buttons.ts",
        "png.cpp",
        "screen.cpp",
-        "screen.ts",
        "battery.ts",
        "output.cpp",
        "output.ts",
@ -26,8 +25,6 @@
        "shims.d.ts",
        "enums.d.ts",
        "dal.d.ts",
-        "images.ts",
-        "images.jres",
        "icons.jres",
        "ns.ts"
    ],
--- a/libs/core/screen.cpp
+++ b/libs/core/screen.cpp
@ -9,39 +9,12 @@
 #include <fcntl.h>
 #include <sys/ioctl.h>

-/**
-* Drawing modes
-*/
-enum class Draw {
-    Normal = 0x00, // set pixels to black, no fill
-    Clear = 0x01,
-    Xor = 0x02,
-    Fill = 0x04,
-    Transparent = 0x08,
-    Double = 0x10,
-    Quad = 0x20,
-};
+namespace pxt {

-inline bool operator&(Draw a, Draw b) {
-    return ((int)a & (int)b) != 0;
-}
-
-inline Draw operator|(Draw a, Draw b) {
-    return (Draw)((int)a | (int)b);
-}
-
-#define XX(v) ((uint32_t)(v)&0xffff)
-#define YY(v) ((uint32_t)(v) >> 16)
-
-// We only support up to 4 arguments for C++ functions - need to pack them on the TS side
-namespace screen {
-
-#define ROW_SIZE 32
+#define ROW_SIZE 23
 #define FB_SIZE (60 * LCD_HEIGHT)

-static const uint8_t pixmap[] = {0x00, 0xE0, 0x1C, 0xFC, 0x03, 0xE3, 0x1F, 0xFF};
-static uint8_t bitBuffer[ROW_SIZE * LCD_HEIGHT];
-static bool dirty;
+static const uint8_t pixmap[] = {0x00, 0x03, 0x1C, 0x1F, 0xE0, 0xE3, 0xFC, 0xFF};

 static void bitBufferToFrameBuffer(uint8_t *bitBuffer, uint8_t *fb) {
    uint32_t pixels;
@ -49,129 +22,48 @@ static void bitBufferToFrameBuffer(uint8_t *bitBuffer, uint8_t *fb) {
    for (int line = 0; line < LCD_HEIGHT; line++) {
        int n = 7;
        while (n--) {
-            pixels = *bitBuffer++ << 0;
+            pixels = *bitBuffer++ << 16;
            pixels |= *bitBuffer++ << 8;
-            pixels |= *bitBuffer++ << 16;
+            pixels |=  *bitBuffer++ << 0;

            int m = 8;
            while (m--) {
-                *fb++ = pixmap[pixels & 0x07];
-                pixels >>= 3;
+                *fb++ = pixmap[(pixels >> 21) & 0x07];
+                pixels <<= 3;
            }
        }

-        pixels = *bitBuffer++ << 0;
-        pixels |= *bitBuffer++ << 8;
-
-        bitBuffer += ROW_SIZE - 23;
+        pixels = *bitBuffer++ << 8;
+        pixels |= *bitBuffer++ << 0;

        int m = 4;
        while (m--) {
-            *fb++ = pixmap[pixels & 0x07];
-            pixels >>= 3;
+            *fb++ = pixmap[(pixels >> 13) & 0x07];
+            pixels <<= 3;
        }
    }
 }

-#define OFF(x, y) (((y) << 5) + ((x) >> 3))
-#define MASK(x, y) (1 << ((x)&7))
-#define PIX2BYTES(x) (((x) + 7) >> 3)
-
-static inline void applyMask(int off, int mask, Draw mode) {
-    if (mode & Draw::Clear)
-        bitBuffer[off] &= ~mask;
-    else if (mode & Draw::Xor)
-        bitBuffer[off] ^= mask;
-    else
-        bitBuffer[off] |= mask;
-}
-
-//%
-void _setPixel(int x, int y, Draw mode) {
-    applyMask(OFF(x, y), MASK(x, y), mode);
-}
-
-void blitLineCore(int x, int y, int w, uint8_t *data, Draw mode) {
-    if (y < 0 || y >= LCD_HEIGHT)
-        return;
-    if (x + w <= 0)
-        return;
-    if (x >= LCD_WIDTH)
-        return;
-
-    int shift = x & 7;
-    int off = OFF(x, y);
-    int off0 = OFF(0, y);
-    int off1 = OFF(LCD_WIDTH - 1, y);
-    int x1 = x + w + shift;
-    int prev = 0;
-
-    while (x < x1 - 8) {
-        int curr = *data++ << shift;
-        if (off0 <= off && off <= off1)
-            applyMask(off, curr | prev, mode);
-        off++;
-        prev = curr >> 8;
-        x += 8;
-    }
-
-    int left = x1 - x;
-    if (left > 0) {
-        int curr = *data << shift;
-        if (off0 <= off && off <= off1)
-            applyMask(off, (curr | prev) & ((1 << left) - 1), mode);
-    }
-
-    dirty = true;
-}
-
-//%
-void _blitLine(int xw, int y, Buffer buf, Draw mode) {
-    blitLineCore(XX(xw), y, YY(xw), buf->data, mode);
-}
-
-/** Clear screen and reset font to normal. */
-//%
-void clear() {
-    memset(bitBuffer, 0, sizeof(bitBuffer));
-    dirty = true;
-}
-
-//%
-void dump() {
-    char buf[LCD_WIDTH + 1];
-    FILE *f = fopen("/tmp/screen.txt", "w");
-    for (int i = 0; i < LCD_HEIGHT; ++i) {
-        for (int j = 0; j < LCD_WIDTH; ++j) {
-            if (bitBuffer[OFF(j, i)] & MASK(j, i))
-                buf[j] = '#';
-            else
-                buf[j] = '.';
-        }
-        buf[LCD_WIDTH] = 0;
-        fprintf(f, "%s\n", buf);
-    }
-    fclose(f);
-}
-
 static uint8_t *mappedFrameBuffer;
+static Image lastImg;

 //%
-void updateLCD() {
-    if (dirty && mappedFrameBuffer != MAP_FAILED) {
-        dirty = false;
-        bitBufferToFrameBuffer(bitBuffer, mappedFrameBuffer);
+void updateScreen(Image img) {
+    if (img && img != lastImg) {
+        decrRC(lastImg);
+        incrRC(img);
+        lastImg = img;
+    }
+
+    if (lastImg && lastImg->isDirty() && mappedFrameBuffer != MAP_FAILED) {
+        if (lastImg->bpp() != 1 || lastImg->width() != LCD_WIDTH || lastImg->height() != LCD_HEIGHT)
+            target_panic(906);
+        lastImg->clearDirty();
+        bitBufferToFrameBuffer(lastImg->pix(), mappedFrameBuffer);
    }
 }

-void *screenRefresh(void *dummy) {
-    while (true) {
-        sleep_core_us(30000);
-        updateLCD();
-    }
-}
-
-void init() {
+void screen_init() {
    DMESG("init screen");
    if (mappedFrameBuffer)
        return;
@ -182,25 +74,19 @@ void init() {
    if (mappedFrameBuffer == MAP_FAILED) {
        target_panic(903);
    }
-    clear();
-
-    pthread_t pid;
-    pthread_create(&pid, NULL, screenRefresh, NULL);
-    pthread_detach(pid);
 }

 static const uint8_t numbers[] = {
-    0x06, 0x09, 0x09, 0x09, 0x06, 0x04, 0x06, 0x04, 0x04, 0x0e, 0x07, 0x08, 0x06, 0x01, 0x0f, 0x0f,
-    0x08, 0x04, 0x09, 0x06, 0x0c, 0x0a, 0x09, 0x1f, 0x08, 0x1f, 0x01, 0x0f, 0x10, 0x0f, 0x08, 0x04,
-    0x0e, 0x11, 0x0e, 0x1f, 0x08, 0x04, 0x02, 0x01, 0x0e, 0x11, 0x0e, 0x11, 0x0e, 0x0e, 0x11, 0x0e,
-    0x04, 0x02,
-    // face
-    0b11011, 0b11011, 0b00000, 0b11111, 0b11011,
+    0x06, 0x09, 0x09, 0x09, 0x06, 0x04, 0x06, 0x04, 0x04, 0x0e, 0x07, 0x08, 0x06,
+    0x01, 0x0f, 0x0f, 0x08, 0x04, 0x09, 0x06, 0x0c, 0x0a, 0x09, 0x1f, 0x08, 0x1f,
+    0x01, 0x0f, 0x10, 0x0f, 0x08, 0x04, 0x0e, 0x11, 0x0e, 0x1f, 0x08, 0x04, 0x02,
+    0x01, 0x0e, 0x11, 0x0e, 0x11, 0x0e, 0x0e, 0x11, 0x0e, 0x04, 0x02,
+
+    0x1b, 0x1b, 0x00, 0x1f, 0x1b,
 };

-static void drawNumber(int off, int idx) {
+static void drawNumber(uint8_t *dst, int idx) {
    const uint8_t *src = &numbers[idx * 5];
-    uint8_t *dst = &bitBuffer[off];
    for (int i = 0; i < 5; i++) {
        uint8_t ch = *src++;
        for (int jj = 0; jj < 8; ++jj) {
@ -215,13 +101,19 @@ static void drawNumber(int off, int idx) {
 }

 extern "C" void drawPanic(int code) {
-    clear();
+    int fd = open("/dev/lms_ui", O_RDWR);
+    uint8_t cmd[] = {48 + 5, 0};
+    write(fd, cmd, 2);
+    close(fd);

-    int ptr = ROW_SIZE * 16 + 3 + 6;
+    uint8_t bitBuffer[ROW_SIZE * LCD_HEIGHT];
+
+    memset(bitBuffer, 0, sizeof(bitBuffer));
+
+    auto ptr = &bitBuffer[ROW_SIZE * 16 + 3 + 6];
    drawNumber(ptr, 10);
-    ptr += 6;

-    ptr = ROW_SIZE * 70 + 3;
+    ptr = &bitBuffer[ROW_SIZE * 70 + 3];

    drawNumber(ptr, (code / 100) % 10);
    ptr += 6;
@ -230,132 +122,9 @@ extern "C" void drawPanic(int code) {
    drawNumber(ptr, (code / 1) % 10);
    ptr += 6;

-    updateLCD();
-
-    int fd = open("/dev/lms_ui", O_RDWR);
-    uint8_t cmd[] = {48 + 5, 0};
-    write(fd, cmd, 2);
-    close(fd);
-}
-
-bool isValidImage(Buffer buf) {
-    return buf != NULL && buf->length >= 3 && buf->data[0] == 0xf0;
-}
-
-/** Makes an image bound to a buffer. */
-//%
-Image imageOf(Buffer buf) {
-    if (!isValidImage(buf))
-        return NULL;
-    incrRC(buf);
-    return buf;
-}
-}
-
-namespace pxt {
-void screen_init() {
-    screen::init();
-}
-}
-
-//% fixedInstances
-namespace ImageMethods {
-
-using namespace screen;
-
-static const uint8_t bitdouble[] = {
-    0x00, 0x03, 0x0c, 0x0f, 0x30, 0x33, 0x3c, 0x3f, 0xc0, 0xc3, 0xcc, 0xcf, 0xf0, 0xf3, 0xfc, 0xff,
-};
-
-static uint8_t ones[] = {
-    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
-    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
-};
-
-/** Returns the underlaying Buffer object. */
-//% property
-Buffer buffer(Image ic) {
-    incrRC(ic);
-    return ic;
-}
-
-/** Returns the width of an image. */
-//% property
-int width(Image ic) {
-    if (!isValidImage(ic))
-        return 0;
-    return ic->data[1];
-}
-
-/** Returns the height of an image. */
-//% property
-int height(Image ic) {
-    if (!isValidImage(ic))
-        return 0;
-    int bw = PIX2BYTES(ic->data[1]);
-    return (ic->length - 2) / bw;
-}
-
-/** Double size of an image. */
-//%
-Image doubled(Image buf) {
-    if (!isValidImage(buf))
-        return NULL;
-    int w = buf->data[1];
-    if (w > 126)
-        return NULL;
-    int bw = PIX2BYTES(w);
-    int h = (buf->length - 2) / bw;
-    int bw2 = PIX2BYTES(w * 2);
-    Buffer out = mkBuffer(NULL, 2 + bw2 * h * 2);
-    out->data[0] = 0xf0;
-    out->data[1] = w * 2;
-    uint8_t *src = buf->data + 2;
-    uint8_t *dst = out->data + 2;
-    for (int i = 0; i < h; ++i) {
-        for (int jj = 0; jj < 2; ++jj) {
-            auto p = src;
-            for (int j = 0; j < bw; ++j) {
-                *dst++ = bitdouble[*p & 0xf];
-                *dst++ = bitdouble[*p >> 4];
-                p++;
-            }
-        }
-        src += bw;
+    if (mappedFrameBuffer != MAP_FAILED) {
+        bitBufferToFrameBuffer(bitBuffer, mappedFrameBuffer);
    }
-    return out;
 }

-/** Draw an image on the screen. */
-//%
-void draw(Image buf, int x, int y, Draw mode) {
-    if (!isValidImage(buf))
-        return;
-    if (mode & (Draw::Double | Draw::Quad)) {
-        buf = doubled(buf);
-        if (mode & Draw::Quad) {
-            auto pbuf = buf;
-            buf = doubled(buf);
-            decrRC(pbuf);
-        }
-    }
-
-    int pixwidth = buf->data[1];
-    int ptr = 2;
-    int bytewidth = PIX2BYTES(pixwidth);
-    pixwidth = min(pixwidth, LCD_WIDTH);
-    while (ptr + bytewidth <= buf->length) {
-        if (mode & (Draw::Clear | Draw::Xor | Draw::Transparent)) {
-            // no erase of background
-        } else {
-            blitLineCore(x, y, pixwidth, ones, Draw::Clear);
-        }
-        blitLineCore(x, y, pixwidth, &buf->data[ptr], mode);
-        y++;
-        ptr += bytewidth;
-    }
-
-    if (mode & (Draw::Double | Draw::Quad))
-        decrRC(buf);
-}
-}
+} // namespace pxt
--- a/libs/core/screen.ts
+++ b/libs/core/screen.ts
@ -1,214 +0,0 @@
-namespace brick {
-    export const LINE_HEIGHT = 12;
-
-    //% shim=screen::_setPixel
-    function _setPixel(p0: uint32, p1: uint32, mode: Draw): void { }
-
-    //% shim=screen::_blitLine
-    function _blitLine(xw: uint32, y: uint32, buf: Buffer, mode: Draw): void { }
-
-    function pack(x: number, y: number) {
-        return Math.clamp(0, 512, x) | (Math.clamp(0, 512, y) << 16)
-    }
-
-    const ones = hex`ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff`
-
-    function setLineCore(x: number, x1: number, y: number, mode: Draw) {
-        _blitLine(pack(x, x1 - x), y, ones, mode)
-    }
-
-    export interface Font {
-        charWidth: number;
-        charHeight: number;
-        firstChar: number;
-        data: Buffer;
-    }
-    let currFont: Font
-
-    export function setFont(f: Font) {
-        currFont = f
-    }
-
-    export const heart = screen.imageOf(hex`f007 367f7f3e1c08`)
-
-    export function defaultFont(): Font {
-        return {
-            charWidth: 8,
-            charHeight: 8,
-            firstChar: 32,
-            // source https://github.com/dhepper/font8x8
-            data: hex`
-0000000000000000 183C3C1818001800 3636000000000000 36367F367F363600 0C3E031E301F0C00 006333180C666300
-1C361C6E3B336E00 0606030000000000 180C0606060C1800 060C1818180C0600 00663CFF3C660000 000C0C3F0C0C0000
-00000000000C0C06 0000003F00000000 00000000000C0C00 6030180C06030100 3E63737B6F673E00 0C0E0C0C0C0C3F00
-1E33301C06333F00 1E33301C30331E00 383C36337F307800 3F031F3030331E00 1C06031F33331E00 3F3330180C0C0C00
-1E33331E33331E00 1E33333E30180E00 000C0C00000C0C00 000C0C00000C0C06 180C0603060C1800 00003F00003F0000
-060C1830180C0600 1E3330180C000C00 3E637B7B7B031E00 0C1E33333F333300 3F66663E66663F00 3C66030303663C00
-1F36666666361F00 7F46161E16467F00 7F46161E16060F00 3C66030373667C00 3333333F33333300 1E0C0C0C0C0C1E00
-7830303033331E00 6766361E36666700 0F06060646667F00 63777F7F6B636300 63676F7B73636300 1C36636363361C00
-3F66663E06060F00 1E3333333B1E3800 3F66663E36666700 1E33070E38331E00 3F2D0C0C0C0C1E00 3333333333333F00
-33333333331E0C00 6363636B7F776300 6363361C1C366300 3333331E0C0C1E00 7F6331184C667F00 1E06060606061E00
-03060C1830604000 1E18181818181E00 081C366300000000 00000000000000FF 0C0C180000000000 00001E303E336E00
-0706063E66663B00 00001E3303331E00 3830303e33336E00 00001E333f031E00 1C36060f06060F00 00006E33333E301F
-0706366E66666700 0C000E0C0C0C1E00 300030303033331E 070666361E366700 0E0C0C0C0C0C1E00 0000337F7F6B6300
-00001F3333333300 00001E3333331E00 00003B66663E060F 00006E33333E3078 00003B6E66060F00 00003E031E301F00
-080C3E0C0C2C1800 0000333333336E00 00003333331E0C00 0000636B7F7F3600 000063361C366300 00003333333E301F
-00003F190C263F00 380C0C070C0C3800 1818180018181800 070C0C380C0C0700 6E3B000000000000 0000000000000000
-`
-        }
-    }
-
-    function setPixel(on: boolean, x: number, y: number) {
-        x |= 0
-        y |= 0
-        if (0 <= x && x < DAL.LCD_WIDTH && 0 <= y && y < DAL.LCD_HEIGHT)
-            _setPixel(x, y, on ? Draw.Normal : Draw.Clear)
-    }
-
-    /**
-     * Show text on the screen at a specific line.
-     * @param text the text to print on the screen, eg: "Hello world"
-     * @param line the line number to print the text at, eg: 1
-     */
-    //% blockId=screen_print block="show string %text|at line %line"
-    //% weight=98 group="Screen" inlineInputMode="inline" blockGap=8
-    //% help=brick/show-string
-    //% line.min=1 line.max=10
-    export function showString(text: string, line: number) {
-        const NUM_LINES = 9;
-        const offset = 5;
-        const y = offset + (Math.clamp(0, NUM_LINES, line - 1) / (NUM_LINES + 2)) * DAL.LCD_HEIGHT;
-        brick.print(text, offset, y);
-    }
-
-    /**
-     * Shows a number on the screen
-     * @param value the numeric value
-     * @param line the line number to print the text at, eg: 1
-     */
-    //% blockId=screenShowNumber block="show number %name|at line %line"
-    //% weight=96 group="Screen" inlineInputMode="inline" blockGap=8
-    //% help=brick/show-number
-    //% line.min=1 line.max=10
-    export function showNumber(value: number, line: number) {
-        showString("" + value, line);
-    }
-
-    /**
-     * Shows a name, value pair on the screen
-     * @param value the numeric value
-     * @param line the line number to print the text at, eg: 1
-     */
-    //% blockId=screenShowValue block="show value %name|= %text|at line %line"
-    //% weight=96 group="Screen" inlineInputMode="inline" blockGap=8
-    //% help=brick/show-value
-    //% 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);        
-    }
-
-    export function print(text: string, x: number, y: number, mode = Draw.Normal) {
-        x |= 0
-        y |= 0
-        if (!currFont) currFont = defaultFont()
-        let x0 = x
-        let cp = 0
-        let byteWidth = (currFont.charWidth + 7) >> 3
-        let charSize = byteWidth * currFont.charHeight
-        let imgBuf = output.createBuffer(2 + charSize)
-        let double = (mode & Draw.Quad) ? 4 : (mode & Draw.Double) ? 2 : 1
-        imgBuf[0] = 0xf0
-        imgBuf[1] = currFont.charWidth
-        let img = screen.imageOf(imgBuf)
-        while (cp < text.length) {
-            let ch = text.charCodeAt(cp++)
-            if (ch == 10) {
-                y += double * currFont.charHeight + 2
-                x = x0
-            }
-            if (ch < 32) continue
-            let idx = (ch - currFont.firstChar) * charSize
-            if (idx < 0 || idx + imgBuf.length - 1 > currFont.data.length)
-                imgBuf.fill(0, 2)
-            else
-                imgBuf.write(2, currFont.data.slice(idx, charSize))
-            img.draw(x, y, mode)
-            x += double * currFont.charWidth
-        }
-    }
-
-    /**
-     * Show an image on the screen
-     * @param image image to draw
-     */
-    //% blockId=screen_show_image block="show image %image=screen_image_picker"
-    //% weight=100 group="Screen" blockGap=8
-    //% help=brick/show-image
-    export function showImage(image: Image) {
-        if (!image) return;
-        image.draw(0, 0, Draw.Normal);
-    }
-
-    /**
-     * An image
-     * @param image the image
-     */
-    //% blockId=screen_image_picker block="%image" shim=TD_ID
-    //% image.fieldEditor="images"
-    //% image.fieldOptions.columns=6
-    //% image.fieldOptions.width=600
-    //% group="Screen" weight=0 blockHidden=1
-    export function __imagePicker(image: Image): Image {
-        return image;
-    }
-
-    /**
-     * Clear the screen
-     */
-    //% blockId=screen_clear_screen block="clear screen"
-    //% weight=90 group="Screen"
-    //% help=brick/clear-screen
-    export function clearScreen() {
-        screen.clear();
-    }
-
-    function drawRect(x: number, y: number, w: number, h: number, mode = Draw.Normal) {
-        x |= 0;
-        y |= 0;
-        w |= 0;
-        h |= 0;
-        if (x < 0) {
-            w += x;
-            x = 0;
-        }
-        if (y < 0) {
-            h += y;
-            y = 0;
-        }
-        if (w <= 0)
-            return;
-        if (h <= 0)
-            return;
-        let x1 = Math.min(DAL.LCD_WIDTH, x + w);
-        let y1 = Math.min(DAL.LCD_HEIGHT, y + h);
-        if (w == 1) {
-            while (y < y1)
-                _setPixel(x, y++, mode);
-            return;
-        }
-
-        setLineCore(x, x1, y++, mode);
-        while (y < y1 - 1) {
-            if (mode & Draw.Fill) {
-                setLineCore(x, x1, y, mode);
-            } else {
-                _setPixel(x, y, mode);
-                _setPixel(x1 - 1, y, mode);
-            }
-            y++;
-        }
-        if (y < y1)
-            setLineCore(x, x1, y, mode);
-    }
-}
--- a/libs/core/shims.d.ts
+++ b/libs/core/shims.d.ts
@ -55,7 +55,8 @@ declare namespace control {
     * @param mode optional definition of how the event should be processed after construction.
     */
    //% weight=21 blockGap=12 blockId="control_raise_event"
-    //% block="raise event|from %src|with value %value" blockExternalInputs=1 shim=control::raiseEvent
+    //% block="raise event|from %src|with value %value" blockExternalInputs=1
+    //% help=control/raise-event shim=control::raiseEvent
    function raiseEvent(src: int32, value: int32): void;

    /**
@ -74,47 +75,12 @@ declare namespace serial {
    //% shim=serial::writeDmesg
    function writeDmesg(): void;
 }
-declare namespace screen {
+declare namespace image {

    /** Decompresses a 1-bit gray scale PNG image to image format. */
-    //% shim=screen::unpackPNG
+    //% shim=image::unpackPNG
    function unpackPNG(png: Buffer): Image;
 }
-declare namespace screen {
-
-    /** Clear screen and reset font to normal. */
-    //% shim=screen::clear
-    function clear(): void;
-
-    /** Makes an image bound to a buffer. */
-    //% shim=screen::imageOf
-    function imageOf(buf: Buffer): Image;
-}
-
-
-
-    //% fixedInstances
-declare interface Image {
-    /** Returns the underlaying Buffer object. */
-    //% property shim=ImageMethods::buffer
-    buffer: Buffer;
-
-    /** Returns the width of an image. */
-    //% property shim=ImageMethods::width
-    width: int32;
-
-    /** Returns the height of an image. */
-    //% property shim=ImageMethods::height
-    height: int32;
-
-    /** Double size of an image. */
-    //% shim=ImageMethods::doubled
-    doubled(): Image;
-
-    /** Draw an image on the screen. */
-    //% shim=ImageMethods::draw
-    draw(x: int32, y: int32, mode: Draw): void;
-}
 declare namespace output {

    /**
--- a/libs/core/timer.ts
+++ b/libs/core/timer.ts
@ -11,36 +11,40 @@ namespace control {
        }

        /**
-         * Gets the elapsed time in millis since the last reset
+         * Get the elapsed time in millis since the last reset
         */
        //% blockId=timerMillis block="%timer|millis"
+        //% help=control/timer/millis
        millis(): number {
            return control.millis() - this.start;
        }
        
        /**
-         * Gets the elapsed time in seconds since the last reset
+         * Get the elapsed time in seconds since the last reset
         */
        //% blockId=timerSeconds block="%timer|seconds"
+        //% help=control/timer/seconds
        seconds(): number {
            return this.millis() / 1000;
        }

        /**
-         * Resets the timer
+         * Reset the timer
         */
        //% blockId=timerRest block="%timer|reset"
+        //% help=control/timer/reset
        reset() {
            this.start = control.millis();
        }

        /**
-         * Pauses until the timer reaches the given amount of milliseconds
+         * Pause until the timer reaches the given amount of milliseconds
         * @param ms how long to pause for, eg: 5, 100, 200, 500, 1000, 2000
         */
        //% blockId=timerPauseUntil block="%timer|pause until (ms) %ms"
+        //% help=control/timer/pause-until
        pauseUntil(ms: number) {
-            const remaining = this.millis() - ms;
+            const remaining = ms - this.millis();
            pause(Math.max(0, remaining));
        }
    }
--- a/libs/core/images.jres
+++ b/libs/core/images.jres
--- a/libs/core/images.ts
+++ b/libs/core/images.ts
@ -1,229 +1,229 @@
 namespace images {
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsBigSmile = screen.unpackPNG(hex``);
+    export const expressionsBigSmile = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsHeartLarge = screen.unpackPNG(hex``);
+    export const expressionsHeartLarge = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsHeartSmall = screen.unpackPNG(hex``);
+    export const expressionsHeartSmall = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsMouth1open = screen.unpackPNG(hex``);
+    export const expressionsMouth1open = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsMouth1shut = screen.unpackPNG(hex``);
+    export const expressionsMouth1shut = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsMouth2open = screen.unpackPNG(hex``);
+    export const expressionsMouth2open = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsMouth2shut = screen.unpackPNG(hex``);
+    export const expressionsMouth2shut = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsSad = screen.unpackPNG(hex``);
+    export const expressionsSad = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsSick = screen.unpackPNG(hex``);
+    export const expressionsSick = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsSmile = screen.unpackPNG(hex``);
+    export const expressionsSmile = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsSwearing = screen.unpackPNG(hex``);
+    export const expressionsSwearing = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsTalking = screen.unpackPNG(hex``);
+    export const expressionsTalking = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsWink = screen.unpackPNG(hex``);
+    export const expressionsWink = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const expressionsZzz = screen.unpackPNG(hex``);
+    export const expressionsZzz = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesAngry = screen.unpackPNG(hex``);
+    export const eyesAngry = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesAwake = screen.unpackPNG(hex``);
+    export const eyesAwake = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesBlackEye = screen.unpackPNG(hex``);
+    export const eyesBlackEye = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesBottomLeft = screen.unpackPNG(hex``);
+    export const eyesBottomLeft = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesBottomRight = screen.unpackPNG(hex``);
+    export const eyesBottomRight = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesCrazy1 = screen.unpackPNG(hex``);
+    export const eyesCrazy1 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesCrazy2 = screen.unpackPNG(hex``);
+    export const eyesCrazy2 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesDisappointed = screen.unpackPNG(hex``);
+    export const eyesDisappointed = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesDizzy = screen.unpackPNG(hex``);
+    export const eyesDizzy = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesDown = screen.unpackPNG(hex``);
+    export const eyesDown = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesEvil = screen.unpackPNG(hex``);
+    export const eyesEvil = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesHurt = screen.unpackPNG(hex``);
+    export const eyesHurt = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesKnockedOut = screen.unpackPNG(hex``);
+    export const eyesKnockedOut = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesLove = screen.unpackPNG(hex``);
+    export const eyesLove = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesMiddleLeft = screen.unpackPNG(hex``);
+    export const eyesMiddleLeft = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesMiddleRight = screen.unpackPNG(hex``);
+    export const eyesMiddleRight = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesNeutral = screen.unpackPNG(hex``);
+    export const eyesNeutral = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesNuclear = screen.unpackPNG(hex``);
+    export const eyesNuclear = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesPinchLeft = screen.unpackPNG(hex``);
+    export const eyesPinchLeft = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesPinchMiddle = screen.unpackPNG(hex``);
+    export const eyesPinchMiddle = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesPinchRight = screen.unpackPNG(hex``);
+    export const eyesPinchRight = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesSleeping = screen.unpackPNG(hex``);
+    export const eyesSleeping = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesTear = screen.unpackPNG(hex``);
+    export const eyesTear = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesTiredLeft = screen.unpackPNG(hex``);
+    export const eyesTiredLeft = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesTiredMiddle = screen.unpackPNG(hex``);
+    export const eyesTiredMiddle = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesTiredRight = screen.unpackPNG(hex``);
+    export const eyesTiredRight = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesToxic = screen.unpackPNG(hex``);
+    export const eyesToxic = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesUp = screen.unpackPNG(hex``);
+    export const eyesUp = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const eyesWinking = screen.unpackPNG(hex``);
+    export const eyesWinking = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const informationAccept = screen.unpackPNG(hex``);
+    export const informationAccept = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const informationBackward = screen.unpackPNG(hex``);
+    export const informationBackward = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const informationDecline = screen.unpackPNG(hex``);
+    export const informationDecline = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const informationForward = screen.unpackPNG(hex``);
+    export const informationForward = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const informationLeft = screen.unpackPNG(hex``);
+    export const informationLeft = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const informationNoGo = screen.unpackPNG(hex``);
+    export const informationNoGo = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const informationQuestionMark = screen.unpackPNG(hex``);
+    export const informationQuestionMark = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const informationRight = screen.unpackPNG(hex``);
+    export const informationRight = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const informationStop1 = screen.unpackPNG(hex``);
+    export const informationStop1 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const informationStop2 = screen.unpackPNG(hex``);
+    export const informationStop2 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const informationThumbsDown = screen.unpackPNG(hex``);
+    export const informationThumbsDown = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const informationThumbsUp = screen.unpackPNG(hex``);
+    export const informationThumbsUp = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const informationWarning = screen.unpackPNG(hex``);
+    export const informationWarning = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoColorSensor = screen.unpackPNG(hex``);
+    export const legoColorSensor = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoEv3icon = screen.unpackPNG(hex``);
+    export const legoEv3icon = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoEv3 = screen.unpackPNG(hex``);
+    export const legoEv3 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoGyroSensor = screen.unpackPNG(hex``);
+    export const legoGyroSensor = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoIrBeacon = screen.unpackPNG(hex``);
+    export const legoIrBeacon = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoIrSensor = screen.unpackPNG(hex``);
+    export const legoIrSensor = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoLego = screen.unpackPNG(hex``);
+    export const legoLego = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoLargeMotor = screen.unpackPNG(hex``);
+    export const legoLargeMotor = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoMindstorms = screen.unpackPNG(hex``);
+    export const legoMindstorms = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoMediumMotor = screen.unpackPNG(hex``);
+    export const legoMediumMotor = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoSoundSensor = screen.unpackPNG(hex``);
+    export const legoSoundSensor = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoTempSensor = screen.unpackPNG(hex``);
+    export const legoTempSensor = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoTouchSensor = screen.unpackPNG(hex``);
+    export const legoTouchSensor = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const legoUsSensor = screen.unpackPNG(hex``);
+    export const legoUsSensor = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const objectsBomb = screen.unpackPNG(hex``);
+    export const objectsBomb = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const objectsBoom = screen.unpackPNG(hex``);
+    export const objectsBoom = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const objectsFire = screen.unpackPNG(hex``);
+    export const objectsFire = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const objectsFlowers = screen.unpackPNG(hex``);
+    export const objectsFlowers = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const objectsForest = screen.unpackPNG(hex``);
+    export const objectsForest = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const objectsLightOff = screen.unpackPNG(hex``);
+    export const objectsLightOff = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const objectsLightOn = screen.unpackPNG(hex``);
+    export const objectsLightOn = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const objectsLightning = screen.unpackPNG(hex``);
+    export const objectsLightning = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const objectsNight = screen.unpackPNG(hex``);
+    export const objectsNight = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const objectsPirate = screen.unpackPNG(hex``);
+    export const objectsPirate = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const objectsSnow = screen.unpackPNG(hex``);
+    export const objectsSnow = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const objectsTarget = screen.unpackPNG(hex``);
+    export const objectsTarget = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressBar0 = screen.unpackPNG(hex``);
+    export const progressBar0 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressBar1 = screen.unpackPNG(hex``);
+    export const progressBar1 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressBar2 = screen.unpackPNG(hex``);
+    export const progressBar2 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressBar3 = screen.unpackPNG(hex``);
+    export const progressBar3 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressBar4 = screen.unpackPNG(hex``);
+    export const progressBar4 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressDial0 = screen.unpackPNG(hex``);
+    export const progressDial0 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressDial1 = screen.unpackPNG(hex``);
+    export const progressDial1 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressDial2 = screen.unpackPNG(hex``);
+    export const progressDial2 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressDial3 = screen.unpackPNG(hex``);
+    export const progressDial3 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressDial4 = screen.unpackPNG(hex``);
+    export const progressDial4 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressDots0 = screen.unpackPNG(hex``);
+    export const progressDots0 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressDots1 = screen.unpackPNG(hex``);
+    export const progressDots1 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressDots2 = screen.unpackPNG(hex``);
+    export const progressDots2 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressDots3 = screen.unpackPNG(hex``);
+    export const progressDots3 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressHourglass0 = screen.unpackPNG(hex``);
+    export const progressHourglass0 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressHourglass1 = screen.unpackPNG(hex``);
+    export const progressHourglass1 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressHourglass2 = screen.unpackPNG(hex``);
+    export const progressHourglass2 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressTimer0 = screen.unpackPNG(hex``);
+    export const progressTimer0 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressTimer1 = screen.unpackPNG(hex``);
+    export const progressTimer1 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressTimer2 = screen.unpackPNG(hex``);
+    export const progressTimer2 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressTimer3 = screen.unpackPNG(hex``);
+    export const progressTimer3 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressTimer4 = screen.unpackPNG(hex``);
+    export const progressTimer4 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressWaterLevel0 = screen.unpackPNG(hex``);
+    export const progressWaterLevel0 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressWaterLevel1 = screen.unpackPNG(hex``);
+    export const progressWaterLevel1 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressWaterLevel2 = screen.unpackPNG(hex``);
+    export const progressWaterLevel2 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const progressWaterLevel3 = screen.unpackPNG(hex``);
+    export const progressWaterLevel3 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const systemAccept1 = screen.unpackPNG(hex``);
+    export const systemAccept1 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const systemAccept2 = screen.unpackPNG(hex``);
+    export const systemAccept2 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const systemBox = screen.unpackPNG(hex``);
+    export const systemBox = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const systemDecline1 = screen.unpackPNG(hex``);
+    export const systemDecline1 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
-    export const systemDecline2 = screen.unpackPNG(hex``);
+    export const systemDecline2 = image.unpackPNG(hex``);
    //% fixedInstance jres blockIdentity=brick.__imagePicker
 }
--- a/libs/ev3/pxt.json
+++ b/libs/ev3/pxt.json
@ -4,11 +4,14 @@
    "files": [
        "README.md",
        "ns.ts",
-        "startup.ts"
+        "startup.ts",
+        "images.jres",
+        "images.ts"
    ],
    "dependencies": {
        "base": "file:../base",
        "core": "file:../core",
+        "screen": "file:../screen",
        "music": "file:../music",
        "color-sensor": "file:../color-sensor",
        "touch-sensor": "file:../touch-sensor",
--- a/libs/game/pxt.json
+++ b/libs/game/pxt.json
@ -0,0 +1,3 @@
+{
+    "additionalFilePath": "../../node_modules/pxt-common-packages/libs/game"
+}
--- a/libs/gyro-sensor/gyro.ts
+++ b/libs/gyro-sensor/gyro.ts
@ -37,11 +37,11 @@ namespace sensors {
         * @param sensor the gyroscope to query the request
         */
        //% help=sensors/gyro/angle
-        //% block="%sensor|angle"
+        //% block="**gyro** %this|angle"
        //% blockId=gyroGetAngle
        //% parts="gyroscope"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=64 blockGap=8
        //% group="Gyro Sensor"
        angle(): number {
@ -57,12 +57,12 @@ namespace sensors {
         * @param sensor the gyroscope to query the request
         */
        //% help=sensors/gyro/rate
-        //% block="%sensor|rate"
+        //% block="**gyro** %this|rate"
        //% blockId=gyroGetRate
        //% parts="gyroscope"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
-        //% weight=65 blockGap=8        
+        //% this.fieldEditor="ports"
+        //% weight=65 blockGap=8
        //% group="Gyro Sensor"
        rate(): number {
            if (this.calibrating)
@ -82,18 +82,18 @@ namespace sensors {
         * Forces a calibration of the gyro. Must be called when the sensor is completely still.
         */
        //% help=sensors/gyro/reset
-        //% block="reset %sensor|"
-        //% blockId=gyroReset  
+        //% block="reset **gyro** %this|"
+        //% blockId=gyroReset
        //% parts="gyroscope"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
-        //% weight=50        
+        //% this.fieldEditor="ports"
+        //% weight=50
        //% group="Gyro Sensor"
        reset(): void {
            if (this.calibrating) return; // already in calibration mode

            this.calibrating = true;
-            // may be triggered by a button click, 
+            // may be triggered by a button click,
            // give time for robot to settle
            pause(700);
            // send a reset command
@ -127,7 +127,7 @@ namespace sensors {

        /**
         * Enables or disable drift correction
-         * @param enabled 
+         * @param enabled
         */
        //%
        setDriftCorrection(enabled: boolean) {
@ -135,15 +135,15 @@ namespace sensors {
        }
    }

-    //% fixedInstance whenUsed block="gyro 2" weight=95 jres=icons.port2
+    //% fixedInstance whenUsed block="2" weight=95 jres=icons.port2
    export const gyro2: GyroSensor = new GyroSensor(2)

-    //% fixedInstance whenUsed block="gyro 1" jres=icons.port1
+    //% fixedInstance whenUsed block="1" jres=icons.port1
    export const gyro1: GyroSensor = new GyroSensor(1)

-    //% fixedInstance whenUsed block="gyro 3" jres=icons.port3
+    //% fixedInstance whenUsed block="3" jres=icons.port3
    export const gyro3: GyroSensor = new GyroSensor(3)

-    //% fixedInstance whenUsed block="gyro 4" jres=icons.port4
+    //% fixedInstance whenUsed block="4" jres=icons.port4
    export const gyro4: GyroSensor = new GyroSensor(4)
 }
--- a/libs/infrared-sensor/docs/reference/sensors/beacon.md
+++ b/libs/infrared-sensor/docs/reference/sensors/beacon.md
@ -5,7 +5,7 @@ sensors.remoteButtonCenter.onEvent(ButtonEvent.Pressed, function () {})
 sensors.remoteButtonCenter.pauseUntil(ButtonEvent.Pressed);
 sensors.remoteButtonCenter.isPressed()
 sensors.remoteButtonCenter.wasPressed()
-sensors.infraredSensor1.setRemoteChannel(null)
+sensors.infrared1.setRemoteChannel(null)
 ```

 ## See also
--- a/libs/infrared-sensor/docs/reference/sensors/beacon/is-pressed.md
+++ b/libs/infrared-sensor/docs/reference/sensors/beacon/is-pressed.md
@ -25,7 +25,7 @@ In order to recognize a button event signalled from a remote beacon, an infrared
 If the beacon button ``center`` is pressed, show a `green` status light. Otherwise, set the status light to `orange`.

 ```blocks
-sensors.infraredSensor1.setRemoteChannel(InfraredRemoteChannel.Ch0)
+sensors.infrared1.setRemoteChannel(InfraredRemoteChannel.Ch0)
 forever(function () {
    if (sensors.remoteButtonCenter.isPressed()) {
        brick.setStatusLight(StatusLight.Green)
--- a/libs/infrared-sensor/docs/reference/sensors/beacon/on-event.md
+++ b/libs/infrared-sensor/docs/reference/sensors/beacon/on-event.md
@ -29,7 +29,7 @@ In order to recognize a button event signalled from a remote beacon, an infrared
 Check for an event on beacon button sensor ``center``. Put an expression on the screen when the button is released.

 ```blocks
-sensors.infraredSensor1.setRemoteChannel(InfraredRemoteChannel.Ch0)
+sensors.infrared1.setRemoteChannel(InfraredRemoteChannel.Ch0)
 sensors.remoteButtonCenter.onEvent(ButtonEvent.Released, function () {
    brick.showImage(images.expressionsSick)
 })
--- a/libs/infrared-sensor/docs/reference/sensors/beacon/pause-until.md
+++ b/libs/infrared-sensor/docs/reference/sensors/beacon/pause-until.md
@ -34,7 +34,7 @@ brick.showString("We're going to wait", 1);
 brick.showString("for you to bump the", 2);
 brick.showString("touch sensor on port 1", 3);
 waitTime = control.millis();
-sensors.infraredSensor1.setRemoteChannel(InfraredRemoteChannel.Ch0)
+sensors.infrared1.setRemoteChannel(InfraredRemoteChannel.Ch0)
 sensors.remoteButtonCenter.pauseUntil(ButtonEvent.Bumped);
 brick.clearScreen();
 if (control.millis() - waitTime > 5000) {
--- a/libs/infrared-sensor/docs/reference/sensors/beacon/set-remote-channel.md
+++ b/libs/infrared-sensor/docs/reference/sensors/beacon/set-remote-channel.md
@ -3,7 +3,7 @@
 Set the remote infrared signal channel for an infrared sensor.

 ```sig
-sensors.infraredSensor1.setRemoteChannel(InfraredRemoteChannel.Ch0)
+sensors.infrared1.setRemoteChannel(InfraredRemoteChannel.Ch0)
 ```
 An infrared sensor connected to the @boardname@ can receive messages (signals for button events) from a remote infrared beacon. In order for the sensor to know which beacon to receive messages from, a _channel_ is used. The beacon has a switch on it to select a particular channel to transmit on. The sensor needs to know which channel to receive ("listen" for) messages from the beacon.

@ -18,7 +18,7 @@ A sensor is not automatically set to listen for infrared messages on a channel.
 Select channel **2** on an infrared beacon. Set the remote channel for infrared sensor  ``infrared 3`` to channel ``2``. Wait for the ``center`` button press on the beacon using channel ``2``.

 ```blocks
-sensors.infraredSensor3.setRemoteChannel(InfraredRemoteChannel.Ch2);
+sensors.infrared3.setRemoteChannel(InfraredRemoteChannel.Ch2);
 sensors.remoteButtonCenter.pauseUntil(ButtonEvent.Pressed);
 brick.clearScreen();
 brick.showString("Center button on", 1);
--- a/libs/infrared-sensor/docs/reference/sensors/beacon/was-pressed.md
+++ b/libs/infrared-sensor/docs/reference/sensors/beacon/was-pressed.md
@ -27,7 +27,7 @@ In order to recognize a button event signalled from a remote beacon, an infrared
 If the beacon button ``top left`` was pressed, show a `green` status light. Otherwise, set the status light to `orange`.

 ```blocks
-sensors.infraredSensor1.setRemoteChannel(InfraredRemoteChannel.Ch0)
+sensors.infrared1.setRemoteChannel(InfraredRemoteChannel.Ch0)
 forever(function () {
    if (sensors.remoteButtonTopLeft.wasPressed()) {
        brick.setStatusLight(StatusLight.Green)
--- a/libs/infrared-sensor/docs/reference/sensors/infrared.md
+++ b/libs/infrared-sensor/docs/reference/sensors/infrared.md
@ -1,9 +1,9 @@
 # Infrared sensor

 ```cards
-sensors.infraredSensor1.onEvent(null, function () {});
-sensors.infraredSensor1.pauseUntil(null);
-sensors.infraredSensor1.proximity();
+sensors.infrared1.onEvent(null, function () {});
+sensors.infrared1.pauseUntil(null);
+sensors.infrared1.proximity();
 ```

 ## See Also
--- a/libs/infrared-sensor/docs/reference/sensors/infrared/on-event.md
+++ b/libs/infrared-sensor/docs/reference/sensors/infrared/on-event.md
@ -3,7 +3,7 @@
 Run some code when an object is detected by the infrared sensor.

 ```sig
-sensors.infraredSensor4.onEvent(InfraredSensorEvent.ObjectNear, function () {});
+sensors.infrared4.onEvent(InfraredSensorEvent.ObjectNear, function () {});
 ```

 How an object is detected depends on the light _thresholds_ set for the sensor. A threshold is a number for relative distance of the a return of reflected infrared light. The brighter the light, the nearer the object is. The value for what _near_ means is determined by this threshold. A certain minimum amount of light returned is also set to determine that an object is detected. The two thresholds you can set are:
@ -23,9 +23,9 @@ How an object is detected depends on the light _thresholds_ set for the sensor.
 When the ultrasonic sensor on port 4 detects a near object, display its distance on the screen.

 ```blocks
-sensors.infraredSensor4.onEvent(InfraredSensorEvent.ObjectNear, function () {
+sensors.infrared4.onEvent(InfraredSensorEvent.ObjectNear, function () {
    brick.showString("Object detected at:", 1)
-    brick.showNumber(sensors.infraredSensor4.proximity(), 2)
+    brick.showNumber(sensors.infrared4.proximity(), 2)
    brick.showString("percent of range", 3)
 })
 ```
--- a/libs/infrared-sensor/docs/reference/sensors/infrared/pause-until.md
+++ b/libs/infrared-sensor/docs/reference/sensors/infrared/pause-until.md
@ -3,7 +3,7 @@
 Make your program wait until an some object is detected in proximity of the infrared sensor.

 ```sig
-sensors.infraredSensor1.pauseUntil(InfraredSensorEvent.ObjectDetected);
+sensors.infrared1.pauseUntil(InfraredSensorEvent.ObjectDetected);
 ```

 How an object is detected depends on the light _thresholds_ set for the sensor. A threshold is a number for relative distance of the a return of reflected infrared light. The brighter the light, the nearer the object is. The value for what _near_ means is determined by this threshold. A certain minimum amount of light returned is also set to determine that an object is detected. The two thresholds you can set are:
@ -24,7 +24,7 @@ Wait for another object sending out infrared light. Show a message on the screen
 ```blocks
 brick.showString("Waiting for another", 1);
 brick.showString("robot to appear...", 2);
-sensors.infraredSensor1.pauseUntil(InfraredSensorEvent.ObjectDetected);
+sensors.infrared1.pauseUntil(InfraredSensorEvent.ObjectDetected);
 brick.showString("Hey, I just saw", 1)
 brick.showString("Something!", 2);
 ```
--- a/libs/infrared-sensor/docs/reference/sensors/infrared/proximity-threshold.md
+++ b/libs/infrared-sensor/docs/reference/sensors/infrared/proximity-threshold.md
@ -3,7 +3,7 @@
 Get the proximity threshold for when objects are near and detected.

 ```sig
-sensors.infraredSensor1.proximityThreshold(InfraredSensorEvent.ObjectNear)
+sensors.infrared1.proximityThreshold(InfraredSensorEvent.ObjectNear)
 ```

 Infrared sensors determine proximity of an object by measuring the intensity of the infrared light reflected from it. The proximity range of measurment is from `0` to `100`. Proximity _thresholds_ use a value in this range to decide when a proximity event should happen for a detected object.
@ -21,8 +21,8 @@ Infrared sensors determine proximity of an object by measuring the intensity of
 When an object with near proximity is detected, show what the threshold is.

 ```blocks
-sensors.infraredSensor1.onEvent(InfraredSensorEvent.ObjectNear, function () {
-    brick.showValue("NearObjectThreshold", sensors.infraredSensor1.proximityThreshold(InfraredSensorEvent.ObjectNear)
+sensors.infrared1.onEvent(InfraredSensorEvent.ObjectNear, function () {
+    brick.showValue("NearObjectThreshold", sensors.infrared1.proximityThreshold(InfraredSensorEvent.ObjectNear)
 , 1)
 })
 ```
--- a/libs/infrared-sensor/docs/reference/sensors/infrared/proximity.md
+++ b/libs/infrared-sensor/docs/reference/sensors/infrared/proximity.md
@ -3,7 +3,7 @@
 Get the promixity of an object measured by the infrared sensor.

 ```sig
-sensors.infraredSensor1.proximity();
+sensors.infrared1.proximity();
 ```

 The proximity value returned is a number between `0` and `100` which is a _relative_ measurment of  distance to an object. A value of `0` means something is very close and `100` means something is far away. The proximity is determined by the amount of infrared light reflected back by an object. The proximity value for an object that has a lighter color and smooth surface will be less than an object at the same distance with a darker color and a rough surface.
@ -19,9 +19,9 @@ Proximity isn't an actual measurement units of distance, like in centimeters or
 When the infrared sensor on port 4 detects a near object, display its proximity value on the screen.

 ```blocks
-sensors.infraredSensor4.onEvent(InfraredSensorEvent.ObjectNear, function () {
+sensors.infrared4.onEvent(InfraredSensorEvent.ObjectNear, function () {
    brick.clearScreen()
-    brick.showValue("proximity", sensors.infraredSensor4.proximity(), 1)
+    brick.showValue("proximity", sensors.infrared4.proximity(), 1)
 })
 ```

--- a/libs/infrared-sensor/docs/reference/sensors/infrared/set-proximity-threshold.md
+++ b/libs/infrared-sensor/docs/reference/sensors/infrared/set-proximity-threshold.md
@ -3,7 +3,7 @@
 Set the proximity threshold for when objects are near or detected.

 ```sig
-sensors.infraredSensor1.setPromixityThreshold(InfraredSensorEvent.ObjectNear, 0)
+sensors.infrared1.setPromixityThreshold(InfraredSensorEvent.ObjectNear, 0)
 ```

 Infrared sensors determine proximity of an object by measuring the intensity of the infrared light reflected from it. The proximity range of measurment is from `0` to `100`. You can decide what value in that range you want mean that something is near or that something was detected.
@ -20,8 +20,8 @@ If you want a proximity value of `32` to mean that a detected object is near, th
 Set a threshold for detecting something moving within a proximity `30`. Wait for an object to show up. When it does, flash the status light and make noise as an alarm.

 ```blocks
-sensors.infraredSensor1.setPromixityThreshold(InfraredSensorEvent.ObjectDetected, 30)
-sensors.infraredSensor1.pauseUntil(InfraredSensorEvent.ObjectDetected)
+sensors.infrared1.setPromixityThreshold(InfraredSensorEvent.ObjectDetected, 30)
+sensors.infrared1.pauseUntil(InfraredSensorEvent.ObjectDetected)
 brick.clearScreen()
 brick.showString("Perimeter Breach!!!", 3)
 brick.setStatusLight(StatusLight.RedFlash)
--- a/libs/infrared-sensor/ir.ts
+++ b/libs/infrared-sensor/ir.ts
@ -84,7 +84,7 @@ namespace sensors {
         * @param button the remote button to query the request
         */
        //% help=sensors/beacon/is-pressed
-        //% block="%button|is pressed"
+        //% block="**remote button** %button|is pressed"
        //% blockId=remoteButtonIsPressed
        //% parts="remote"
        //% blockNamespace=sensors
@ -99,7 +99,7 @@ namespace sensors {
         * @param button the remote button to query the request
         */
        //% help=sensors/beacon/was-pressed
-        //% block="%button|was pressed"
+        //% block="**remote button** %button|was pressed"
        //% blockId=remotebuttonWasPressed
        //% parts="remote"
        //% blockNamespace=sensors
@ -116,7 +116,7 @@ namespace sensors {
         * @param body code to run when the event is raised
         */
        //% help=sensors/beacon/on-event
-        //% blockId=remotebuttonEvent block="on %button|%event"
+        //% blockId=remotebuttonEvent block="on **remote button** %button|%event"
        //% parts="remote"
        //% blockNamespace=sensors
        //% weight=99 blockGap=8
@ -130,7 +130,7 @@ namespace sensors {
         * @param ev the event to wait for
         */
        //% help=sensors/beacon/pause-until
-        //% blockId=remoteButtonPauseUntil block="pause until %button|%event"
+        //% blockId=remoteButtonPauseUntil block="pause until **remote button** %button|%event"
        //% parts="remote"
        //% blockNamespace=sensors
        //% weight=99 blockGap=8
@ -185,12 +185,13 @@ namespace sensors {
         * @param handler the code to run when detected
         */
        //% help=sensors/infrared/on-event
-        //% block="on %sensor|%event"
+        //% block="on **infrared** %this|%event"
        //% blockId=infraredOn
        //% parts="infraredsensor"
        //% blockNamespace=sensors
        //% weight=100 blockGap=8
        //% group="Infrared Sensor"
+        //% this.fieldEditor="ports"
        onEvent(event: InfraredSensorEvent, handler: () => void) {
            this._setMode(InfraredSensorMode.Proximity)
            control.onEvent(this._id, event, handler);
@ -200,12 +201,13 @@ namespace sensors {
         * Wait until the infrared sensor detects something
         */
        //% help=sensors/infrared/pause-until
-        //% block="pause until %sensor| %event"
+        //% block="pause until **infrared** %this| %event"
        //% blockId=infraredwait
        //% parts="infraredsensor"
        //% blockNamespace=sensors
        //% weight=99 blockGap=8
        //% group="Infrared Sensor"
+        //% this.fieldEditor="ports"
        pauseUntil(event: InfraredSensorEvent) {
            this._setMode(InfraredSensorMode.Proximity)
            control.waitForEvent(this._id, event);
@ -216,12 +218,13 @@ namespace sensors {
         * @param sensor the infrared sensor
         */
        //% help=sensors/infrared/proximity
-        //% block="%sensor|proximity"
+        //% block="**infrared** %this|proximity"
        //% blockId=infraredGetProximity
        //% parts="infrared"
        //% blockNamespace=sensors
-        //% weight=98 blockGap=8   
-        //% group="Infrared Sensor"     
+        //% weight=98 blockGap=8
+        //% group="Infrared Sensor"
+        //% this.fieldEditor="ports"
        proximity(): number {
            this._setMode(InfraredSensorMode.Proximity)
            return this.getNumber(NumberFormat.UInt8LE, 0)
@ -232,9 +235,10 @@ namespace sensors {
         * @param channel the channel to listen
         */
        //% blockNamespace=sensors
-        //% blockId=irSetRemoteChannel block="set %sensor|remote channel to %channel"
-        //% weight=99       
+        //% blockId=irSetRemoteChannel block="set **infrared** %this|remote channel to %channel"
+        //% weight=99
        //% group="Remote Infrared Beacon"
+        //% this.fieldEditor="ports"
        //% help=sensors/beacon/set-remote-channel
        setRemoteChannel(channel: InfraredRemoteChannel) {
            this.setMode(InfraredSensorMode.RemoteControl)
@ -247,9 +251,10 @@ namespace sensors {
         * @param condition the dark or bright light condition
         * @param value the value threshold
         */
-        //% blockId=irSetThreshold block="set %sensor|%condition|to %value"
+        //% blockId=irSetThreshold block="set **infrared** %this|%condition|to %value"
        //% group="Threshold" blockGap=8 weight=49
        //% value.min=0 value.max=100
+        //% this.fieldEditor="ports"
        setPromixityThreshold(condition: InfraredSensorEvent, value: number) {
            if (condition == InfraredSensorEvent.ObjectNear)
                this._proximityThreshold.setLowThreshold(value)
@ -261,9 +266,9 @@ namespace sensors {
         * Get a threshold value
         * @param condition the proximity condition
         */
-        //% blockId=irGetThreshold block="%sensor|%condition"
+        //% blockId=irGetThreshold block="**infrared** %this|%condition"
        //% group="Threshold" blockGap=8 weight=49
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        proximityThreshold(condition: InfraredSensorEvent): number {
            return this._proximityThreshold.threshold(<ThresholdState><number>LightCondition.Dark);
        }
@ -275,45 +280,45 @@ namespace sensors {
        }
    }

-    //% fixedInstance whenUsed block="infrared 1" jres=icons.port1
-    export const infraredSensor1: InfraredSensor = new InfraredSensor(1)
+    //% fixedInstance whenUsed block="1" jres=icons.port1
+    export const infrared1: InfraredSensor = new InfraredSensor(1)

-    //% fixedInstance whenUsed block="infrared 2" jres=icons.port2
-    export const infraredSensor2: InfraredSensor = new InfraredSensor(2)
+    //% fixedInstance whenUsed block="2" jres=icons.port2
+    export const infrared2: InfraredSensor = new InfraredSensor(2)

-    //% fixedInstance whenUsed block="infrared 3" jres=icons.port3
-    export const infraredSensor3: InfraredSensor = new InfraredSensor(3)
+    //% fixedInstance whenUsed block="3" jres=icons.port3
+    export const infrared3: InfraredSensor = new InfraredSensor(3)

-    //% fixedInstance whenUsed block="infrared 4" jres=icons.port4
-    export const infraredSensor4: InfraredSensor = new InfraredSensor(4)
+    //% fixedInstance whenUsed block="4" jres=icons.port4
+    export const infrared4: InfraredSensor = new InfraredSensor(4)

    /**
     * Remote beacon (center) button.
     */
-    //% whenUsed block="remote button center" weight=95 fixedInstance
+    //% whenUsed block="center" weight=95 fixedInstance
    export const remoteButtonCenter = __irButton(InfraredRemoteButton.CenterBeacon)

    /**
     * Remote top-left button.
     */
-    //% whenUsed block="remote button top left" weight=95 fixedInstance
+    //% whenUsed block="top left" weight=95 fixedInstance
    export const remoteButtonTopLeft = __irButton(InfraredRemoteButton.TopLeft)

    /**
     * Remote top-right button.
     */
-    //% whenUsed block="remote button top right" weight=95 fixedInstance
+    //% whenUsed block="top right" weight=95 fixedInstance
    export const remoteButtonTopRight = __irButton(InfraredRemoteButton.TopRight)

    /**
     * Remote bottom-left button.
     */
-    //% whenUsed block="remote button bottom left" weight=95 fixedInstance
+    //% whenUsed block="bottom left" weight=95 fixedInstance
    export const remoteButtonBottomLeft = __irButton(InfraredRemoteButton.BottomLeft)

    /**
     * Remote bottom-right button.
     */
-    //% whenUsed block="remote button bottom right" weight=95 fixedInstance
+    //% whenUsed block="bottom right" weight=95 fixedInstance
    export const remoteButtonBottomRight = __irButton(InfraredRemoteButton.BottomRight)
 }
--- a/libs/mood/mood.ts
+++ b/libs/mood/mood.ts
@ -41,10 +41,10 @@ namespace brick {
     * An image
     * @param image the image
     */
-    //% blockId=mood_image_picker block="%image" shim=TD_ID
-    //% image.fieldEditor="images"
-    //% image.fieldOptions.columns=4
-    //% image.fieldOptions.width=400
+    //% blockId=mood_image_picker block="%mood" shim=TD_ID
+    //% mood.fieldEditor="images"
+    //% mood.fieldOptions.columns=4
+    //% mood.fieldOptions.width=400
    //% group="Screen" weight=0 blockHidden=1
    export function __moodImagePicker(mood: Mood): Mood {
        return mood;
--- a/libs/music/docs/reference/music.md
+++ b/libs/music/docs/reference/music.md
@ -0,0 +1,15 @@
+# Music
+
+```cards
+music.playSoundEffect(null)
+music.playSoundEffectUntilDone(null)
+music.stopAllSounds()
+music.playTone(0, 0)
+music.ringTone(Note.C)
+music.rest(100)
+music.changeTempoBy(20)
+music.setTempo(120)
+music.noteFrequency(Note.C)
+music.beat()
+music.setVolume(50)
+```
--- a/libs/music/docs/reference/music/play-sound-effect-until-done.md
+++ b/libs/music/docs/reference/music/play-sound-effect-until-done.md
@ -0,0 +1,54 @@
+# play Sound Effect Until Done
+
+Play a sound from one of the built-in sound effect until it completes.
+
+```sig
+music.playSoundEffectUntilDone(null)
+```
+
+There are several sound effects you can play. Use the sounds list in the block to pick the sound you want to play. The sound plays and this part of your program waits until the sound finishes. Other parts of your program, like code in **forever** loops and **runInParallel** blocks will continue to run though.
+
+Many of the built-in sound effects make sounds match to the actions that your @boardname@ is doing. For example, you can add the ``mechanical motor start`` sound your program to indicate that your motors are running.
+
+## Parameters
+
+* **sound**: a built-in sound effect from the list of available sounds.
+
+## Example
+
+Make a game where the buttons on the brick are used to guess a number from `1` to `4` that your program randomly chooses. On the correct guess, flash a ``green`` status light and play a cheering sound. The ``enter`` button resets the game to play again.
+
+```blocks
+let pick = 0
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    pick = 0
+    music.stopAllSounds()
+    brick.setStatusLight(StatusLight.Off)
+})
+brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
+    pick = 1
+})
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    pick = 2
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    pick = 3
+})
+brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
+    pick = 4
+})
+forever(function () {
+    if (pick > 0) {
+        if (Math.randomRange(0, 3) + 1 == pick) {
+            brick.setStatusLight(StatusLight.GreenFlash)
+            music.playSoundEffectUntilDone(sounds.expressionsCheering)
+        }
+        pick = 0
+    }
+    pause(300)
+})
+```
+
+## See also
+
+[play sound effect](/reference/music/play-sound-effect), [stop all sounds](/reference/music/stop-all-sounds)
--- a/libs/music/docs/reference/music/play-sound-effect.md
+++ b/libs/music/docs/reference/music/play-sound-effect.md
@ -0,0 +1,29 @@
+# play Sound Effect
+
+Play a sound from one of the built-in sound effects.
+
+```sig
+music.playSoundEffect(null)
+```
+
+There are several sound effects you can play. Use the sounds list in the block to pick the sound you want to play. When the sounds starts, your program continues on and doesn't wait for the sound to finish. This lets your program do other things while your sound plays in the _background_.
+
+Many of the built-in sound effects make sounds match to the actions that your @boardname@ is doing. For example, you can add the ``mechanical motor start`` sound to your program to indicate that your motors are running.
+
+## Parameters
+
+* **sound**: a built-in sound effect from the list of available sounds.
+
+## Example
+
+Drive the brick backwards and play a backup alert sound.
+
+```blocks
+music.playSoundEffect(sounds.mechanicalBackingAlert);
+motors.largeBC.tank(-50, -50, 15, MoveUnit.Rotations);
+music.stopAllSounds();
+```
+
+## See also
+
+[play sound effect until done](/reference/music/play-sound-effect-until-done), [stop all sounds](/reference/music/stop-all-sounds)
--- a/libs/music/sounds.ts
+++ b/libs/music/sounds.ts
@ -260,11 +260,12 @@ namespace music {
    const soundsLimit = 1;

    /**
-     * Plays a sound
+     * Play a sound and wait until it finishes
     * @param sound the sound to play
     */
    //% blockId=music_play_sound_effect_until_done block="play sound effect %sound|until done"
    //% weight=98 blockGap=8
+    //% help=music/play-sound-effect-until-done
    export function playSoundEffectUntilDone(sound: Sound) {
        if (!sound || numSoundsPlaying >= soundsLimit) return;
        numSoundsPlaying++;
@ -288,6 +289,7 @@ namespace music {
     */
    //% blockId=music_play_sound_effect block="play sound effect %sound"
    //% weight=99 blockGap=8
+    //% help=music/play-sound-effect
    export function playSoundEffect(sound: Sound) {
        if (!sound || numSoundsPlaying >= soundsLimit) return;
        numSoundsPlaying++;
--- a/libs/screen/pxt.json
+++ b/libs/screen/pxt.json
@ -0,0 +1,3 @@
+{
+    "additionalFilePath": "../../node_modules/pxt-common-packages/libs/screen"   
+}
--- a/libs/screen/shims.d.ts
+++ b/libs/screen/shims.d.ts
@ -0,0 +1,128 @@
+// Auto-generated. Do not edit.
+
+
+declare interface Image {
+    /**
+     * Get the width of the image
+     */
+    //% property shim=ImageMethods::width
+    width: int32;
+
+    /**
+     * Get the height of the image
+     */
+    //% property shim=ImageMethods::height
+    height: int32;
+
+    /**
+     * True iff the image is monochromatic (black and white)
+     */
+    //% property shim=ImageMethods::isMono
+    isMono: boolean;
+
+    /**
+     * Set pixel color
+     */
+    //% shim=ImageMethods::set
+    set(x: int32, y: int32, c: int32): void;
+
+    /**
+     * Get a pixel color
+     */
+    //% shim=ImageMethods::get
+    get(x: int32, y: int32): int32;
+
+    /**
+     * Fill entire image with a given color
+     */
+    //% shim=ImageMethods::fill
+    fill(c: int32): void;
+
+    /**
+     * Return a copy of the current image
+     */
+    //% shim=ImageMethods::clone
+    clone(): Image;
+
+    /**
+     * Flips (mirrors) pixels horizontally in the current image
+     */
+    //% shim=ImageMethods::flipX
+    flipX(): void;
+
+    /**
+     * Flips (mirrors) pixels vertically in the current image
+     */
+    //% shim=ImageMethods::flipY
+    flipY(): void;
+
+    /**
+     * Every pixel in image is moved by (dx,dy)
+     */
+    //% shim=ImageMethods::scroll
+    scroll(dx: int32, dy: int32): void;
+
+    /**
+     * Stretches the image horizontally by 100%
+     */
+    //% shim=ImageMethods::doubledX
+    doubledX(): Image;
+
+    /**
+     * Stretches the image vertically by 100%
+     */
+    //% shim=ImageMethods::doubledY
+    doubledY(): Image;
+
+    /**
+     * Replaces one color in an image with another
+     */
+    //% shim=ImageMethods::replace
+    replace(from: int32, to: int32): void;
+
+    /**
+     * Stretches the image in both directions by 100%
+     */
+    //% shim=ImageMethods::doubled
+    doubled(): Image;
+
+    /**
+     * Draw given image on the current image
+     */
+    //% shim=ImageMethods::drawImage
+    drawImage(from: Image, x: int32, y: int32): void;
+
+    /**
+     * Draw given image with transparent background on the current image
+     */
+    //% shim=ImageMethods::drawTransparentImage
+    drawTransparentImage(from: Image, x: int32, y: int32): void;
+
+    /**
+     * Check if the current image "collides" with another
+     */
+    //% shim=ImageMethods::overlapsWith
+    overlapsWith(other: Image, x: int32, y: int32): boolean;
+}
+declare namespace image {
+
+    /**
+     * Create new empty (transparent) image
+     */
+    //% shim=image::create
+    function create(width: int32, height: int32): Image;
+
+    /**
+     * Create new image with given content
+     */
+    //% shim=image::ofBuffer
+    function ofBuffer(buf: Buffer): Image;
+
+    /**
+     * Double the size of an icon
+     */
+    //% shim=image::doubledIcon
+    function doubledIcon(icon: Buffer): Buffer;
+}
+
+// Auto-generated. Do not edit. Really.
--- a/libs/screen/targetoverrides.ts
+++ b/libs/screen/targetoverrides.ts
@ -0,0 +1,107 @@
+/**
+ * Tagged image literal converter
+ */
+//% shim=@f4 helper=image::ofBuffer
+//% groups=["0.,","1#*"]
+function img(lits: any, ...args: any[]): Image { return null }
+
+
+let screen = image.create(DAL.LCD_WIDTH, DAL.LCD_HEIGHT)
+
+namespace _screen_internal {
+    //% shim=pxt::updateScreen
+    function updateScreen(img: Image): void {}
+
+    control.addFrameHandler(200, () => {
+        updateScreen(screen)
+    })
+
+    updateScreen(screen)
+
+    export function _stats(msg: string) {
+        // show the msg somewhere - it contains frame rate etc
+    }
+}
+
+
+namespace brick {
+    export const LINE_HEIGHT = 12;
+
+    /**
+     * Show text on the screen at a specific line.
+     * @param text the text to print on the screen, eg: "Hello world"
+     * @param line the line number to print the text at, eg: 1
+     */
+    //% blockId=screen_print block="show string %text|at line %line"
+    //% weight=98 group="Screen" inlineInputMode="inline" blockGap=8
+    //% help=brick/show-string
+    //% line.min=1 line.max=10
+    export function showString(text: string, line: number) {
+        const NUM_LINES = 9;
+        const offset = 5;
+        const y = offset + (Math.clamp(0, NUM_LINES, line - 1) / (NUM_LINES + 2)) * DAL.LCD_HEIGHT;
+        screen.print(text, offset, y);
+    }
+
+    /**
+     * Shows a number on the screen
+     * @param value the numeric value
+     * @param line the line number to print the text at, eg: 1
+     */
+    //% blockId=screenShowNumber block="show number %name|at line %line"
+    //% weight=96 group="Screen" inlineInputMode="inline" blockGap=8
+    //% help=brick/show-number
+    //% line.min=1 line.max=10
+    export function showNumber(value: number, line: number) {
+        showString("" + value, line);
+    }
+
+    /**
+     * Shows a name, value pair on the screen
+     * @param value the numeric value
+     * @param line the line number to print the text at, eg: 1
+     */
+    //% blockId=screenShowValue block="show value %name|= %text|at line %line"
+    //% weight=96 group="Screen" inlineInputMode="inline" blockGap=8
+    //% help=brick/show-value
+    //% 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);        
+    }
+
+    /**
+     * Show an image on the screen
+     * @param image image to draw
+     */
+    //% blockId=screen_show_image block="show image %image=screen_image_picker"
+    //% weight=100 group="Screen" blockGap=8
+    //% help=brick/show-image
+    export function showImage(image: Image) {
+        if (!image) return;
+        screen.drawImage(image, 0, 0)
+    }
+
+    /**
+     * An image
+     * @param image the image
+     */
+    //% blockId=screen_image_picker block="%image" shim=TD_ID
+    //% image.fieldEditor="images"
+    //% image.fieldOptions.columns=6
+    //% image.fieldOptions.width=600
+    //% group="Screen" weight=0 blockHidden=1
+    export function __imagePicker(image: Image): Image {
+        return image;
+    }
+
+    /**
+     * Clear the screen
+     */
+    //% blockId=screen_clear_screen block="clear screen"
+    //% weight=90 group="Screen"
+    //% help=brick/clear-screen
+    export function clearScreen() {
+        screen.fill(0)
+    }
+}
--- a/libs/touch-sensor/touch.ts
+++ b/libs/touch-sensor/touch.ts
@ -30,10 +30,10 @@ namespace sensors {
         * @param body code to run when the event is raised
         */
        //% help=sensors/touch-sensor/on-event
-        //% blockId=touchEvent block="on %sensor|%event"
+        //% blockId=touchEvent block="on **touch** %this|%event"
        //% parts="touch"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=99 blockGap=12
        //% group="Touch Sensor"
        onEvent(ev: ButtonEvent, body: () => void) {
@ -46,10 +46,10 @@ namespace sensors {
         * @param event the kind of button gesture that needs to be detected
         */
        //% help=sensors/touch-sensor/pause-until
-        //% blockId=touchWaitUntil block="pause until %sensor|%event"
+        //% blockId=touchWaitUntil block="pause until **touch** %this|%event"
        //% parts="touch"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=98 blockGap=12
        //% group="Touch Sensor"
        pauseUntil(ev: ButtonEvent) {
@ -61,11 +61,11 @@ namespace sensors {
         * @param sensor the port to query the request
         */
        //% help=sensors/touch-sensor/is-pressed
-        //% block="%sensor|is pressed"
+        //% block="**touch** %this|is pressed"
        //% blockId=touchIsPressed
        //% parts="touch"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=81 blockGap=8
        //% group="Touch Sensor"
        isPressed() {
@ -77,11 +77,11 @@ namespace sensors {
         * @param sensor the port to query the request
         */
        //% help=sensors/touch-sensor/was-pressed
-        //% block="%sensor|was pressed"
+        //% block="**touch** %this|was pressed"
        //% blockId=touchWasPressed
        //% parts="touch"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=81
        //% group="Touch Sensor"
        wasPressed() {
@ -89,12 +89,12 @@ namespace sensors {
        }
    }

-    //% whenUsed block="touch 1" weight=95 fixedInstance jres=icons.port1
+    //% whenUsed block="1" weight=95 fixedInstance jres=icons.port1
    export const touch1: TouchSensor = new TouchSensor(1)
-    //% whenUsed block="touch 2" weight=95 fixedInstance jres=icons.port2
+    //% whenUsed block="2" weight=95 fixedInstance jres=icons.port2
    export const touch2: TouchSensor = new TouchSensor(2)
-    //% whenUsed block="touch 3" weight=95 fixedInstance jres=icons.port3
+    //% whenUsed block="3" weight=95 fixedInstance jres=icons.port3
    export const touch3: TouchSensor = new TouchSensor(3)
-    //% whenUsed block="touch 4" weight=95 fixedInstance jres=icons.port4
+    //% whenUsed block="4" weight=95 fixedInstance jres=icons.port4
    export const touch4: TouchSensor = new TouchSensor(4)
 }
--- a/libs/ultrasonic-sensor/ultrasonic.ts
+++ b/libs/ultrasonic-sensor/ultrasonic.ts
@ -43,10 +43,10 @@ namespace sensors {
         */
        //% help=sensors/ultrasonic/on-event
        //% blockId=ultrasonicOn
-        //% block="on %sensor|%event"
+        //% block="on **ultrasonic** %this|%event"
        //% parts="ultrasonicsensor"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=100 blockGap=8
        //% group="Ultrasonic Sensor"
        onEvent(event: UltrasonicSensorEvent, handler: () => void) {
@ -57,13 +57,13 @@ namespace sensors {
         * Waits for the event to occur
         */
        //% help=sensors/ultrasonic/pause-until
-        //% block="pause until %sensor| %event"
+        //% block="pause until **ultrasonic** %this| %event"
        //% blockId=ultrasonicWait
        //% parts="ultrasonicsensor"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=99 blockGap=8
-        //% group="Ultrasonic Sensor"        
+        //% group="Ultrasonic Sensor"
        pauseUntil(event: UltrasonicSensorEvent) {
            control.waitForEvent(this._id, event);
        }
@ -73,13 +73,13 @@ namespace sensors {
         * @param sensor the ultrasonic sensor port
         */
        //% help=sensors/ultrasonic/distance
-        //% block="%sensor|distance"
+        //% block="**ultrasonic** %this|distance"
        //% blockId=sonarGetDistance
        //% parts="ultrasonicsensor"
        //% blockNamespace=sensors
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        //% weight=65
-        //% group="Ultrasonic Sensor"     
+        //% group="Ultrasonic Sensor"
        distance(): number {
            // it supposedly also has an inch mode, but we stick to cm
            this._setMode(0)
@ -92,9 +92,10 @@ namespace sensors {
         * @param condition the dark or bright light condition
         * @param value the value threshold
         */
-        //% blockId=ultrasonicSetThreshold block="set %sensor|%condition|to %value"
+        //% blockId=ultrasonicSetThreshold block="set **ultrasonic** %this|%condition|to %value"
        //% group="Threshold" blockGap=8 weight=80
        //% value.min=0 value.max=255
+        //% this.fieldEditor="ports"
        setThreshold(condition: UltrasonicSensorEvent, value: number) {
            switch (condition) {
                case UltrasonicSensorEvent.ObjectNear: this.promixityThreshold.setLowThreshold(value); break;
@ -107,9 +108,9 @@ namespace sensors {
         * Gets the threshold value
         * @param condition the proximity condition
         */
-        //% blockId=ultrasonicGetThreshold block="%sensor|%condition"
+        //% blockId=ultrasonicGetThreshold block="**ultrasonic** %this|%condition"
        //% group="Threshold" blockGap=8 weight=79
-        //% sensor.fieldEditor="ports"
+        //% this.fieldEditor="ports"
        threshold(condition: UltrasonicSensorEvent): number {
            switch (condition) {
                case UltrasonicSensorEvent.ObjectNear: this.promixityThreshold.threshold(ThresholdState.Low); break;
@ -120,15 +121,15 @@ namespace sensors {
        }
    }

-    //% fixedInstance whenUsed block="ultrasonic 4" jres=icons.port4
+    //% fixedInstance whenUsed block="4" jres=icons.port4
    export const ultrasonic4: UltraSonicSensor = new UltraSonicSensor(4)

-    //% fixedInstance whenUsed block="ultrasonic 1" jres=icons.port1
+    //% fixedInstance whenUsed block="1" jres=icons.port1
    export const ultrasonic1: UltraSonicSensor = new UltraSonicSensor(1)

-    //% fixedInstance whenUsed block="ultrasonic 2" jres=icons.port2
+    //% fixedInstance whenUsed block="2" jres=icons.port2
    export const ultrasonic2: UltraSonicSensor = new UltraSonicSensor(2)

-    //% fixedInstance whenUsed block="ultrasonic 3" jres=icons.port3
+    //% fixedInstance whenUsed block="3" jres=icons.port3
    export const ultrasonic3: UltraSonicSensor = new UltraSonicSensor(3)
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "pxt-ev3",
-  "version": "0.0.106",
+  "version": "0.1.1",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "pxt-ev3",
-  "version": "0.0.106",
+  "version": "0.1.1",
  "description": "LEGO Mindstorms EV3 for Microsoft MakeCode",
  "private": true,
  "keywords": [
@ -45,8 +45,8 @@
    "webfonts-generator": "^0.4.0"
  },
  "dependencies": {
-    "pxt-common-packages": "0.19.5",
-    "pxt-core": "3.4.8"
+    "pxt-common-packages": "0.20.3",
+    "pxt-core": "3.4.9"
  },
  "scripts": {
    "test": "node node_modules/pxt-core/built/pxt.js travis"
--- a/pxtarget.json
+++ b/pxtarget.json
@ -21,6 +21,8 @@
        "libs/storage",
        "libs/datalog",
        "libs/tests",
+        "libs/screen",
+        "libs/game",
        "libs/automation"
    ],
    "simulator": {
--- a/sim/dalboard.ts
+++ b/sim/dalboard.ts
@ -11,7 +11,7 @@ namespace pxsim {
        analogState: EV3AnalogState;
        uartState: EV3UArtState;
        motorState: EV3MotorState;
-        screenState: EV3ScreenState;
+        screenState: ScreenState;
        audioState: AudioState;
        remoteState: RemoteState;

@ -37,7 +37,7 @@ namespace pxsim {
            this.analogState = new EV3AnalogState();
            this.uartState = new EV3UArtState();
            this.motorState = new EV3MotorState();
-            this.screenState = new EV3ScreenState();
+            this.screenState = new ScreenState(["#97b5a6", "#000000"], visuals.SCREEN_WIDTH, visuals.SCREEN_HEIGHT);
            this.audioState = new AudioState();
            this.remoteState = new RemoteState();
        }
--- a/sim/state/screen.ts
+++ b/sim/state/screen.ts
@ -1,134 +1,8 @@
-
-namespace pxsim {
-
-    function OFF(x: number, y: number) {
-        return x + y * visuals.SCREEN_WIDTH
-    }
-
-
-    export class EV3ScreenState {
-        changed: boolean = true;
-        points: Uint8Array;
-        constructor() {
-            this.points = new Uint8Array(visuals.SCREEN_WIDTH * visuals.SCREEN_HEIGHT)
-        }
-
-        applyMode(off: number, v: number) {
-            if (v & Draw.Clear)
-                this.points[off] = 0;
-            else if (v & Draw.Xor)
-                this.points[off] = this.points[off] ? 0 : 255;
-            else
-                this.points[off] = 255;
-        }
-
-        setPixel(x: number, y: number, v: number) {
-            this.applyMode(OFF(x, y), v)
-            this.changed = true;
-        }
-
-        clear() {
-            for (let i = 0; i < this.points.length; ++i)
-                this.points[i] = 0;
-            this.changed = true;
-        }
-
-        blitLineCore(x: number, y: number, w: number, buf: RefBuffer, mode: Draw, offset = 0) {
-            if (y < 0 || y >= visuals.SCREEN_HEIGHT)
-                return;
-            if (x + w <= 0)
-                return;
-            if (x >= visuals.SCREEN_WIDTH)
-                return;
-
-            let off = OFF(x, y);
-            const off0 = OFF(0, y);
-            const off1 = OFF(visuals.SCREEN_WIDTH - 1, y);
-            let mask = 0x01
-            let dp = offset
-
-            for (let i = 0; i < w; ++i) {
-                if ((buf.data[dp] & mask) && off0 <= off && off <= off1) {
-                    this.applyMode(off, mode);
-                }
-                off++
-                mask <<= 1
-                if (mask & 0x100) {
-                    mask = 0x01
-                    dp++
-                }
-            }
-
-            this.changed = true;
-        }
-
-        clearLine(x: number, y: number, w: number) {
-            let off = OFF(x, y);
-            const off0 = OFF(0, y);
-            const off1 = OFF(visuals.SCREEN_WIDTH - 1, y);
-            for (let i = 0; i < w; ++i) {
-                if (off0 <= off && off <= off1) {
-                    this.points[off] = 0
-                }
-                off++
-            }
-        }
-
-        didChange() {
-            const res = this.changed;
-            this.changed = false;
-            return res;
-        }
-    }
-}
-
-
-namespace pxsim.screen {
-    function XX(v: number) { return (v << 16) >> 16 }
-    function YY(v: number) { return v >> 16 }
-
-    export function _setPixel(x: number, y: number, mode: Draw) {
-        const screenState = ev3board().screenState;
-        screenState.setPixel(x, y, mode);
-    }
-
-    export function _blitLine(xw: number, y: number, buf: RefBuffer, mode: Draw) {
-        const screenState = ev3board().screenState;
-        screenState.blitLineCore(XX(xw), y, YY(xw), buf, mode)
-    }
-
-    export function isValidImage(buf: RefBuffer) {
-        return buf.data.length >= 3 && buf.data[0] == 0xf0;
-    }
-
-    export function PIX2BYTES(x: number) {
-        return ((x + 7) >> 3)
-    }
-    export function clear(): void {
-        const screenState = ev3board().screenState;
-        screenState.clear()
-    }
-
-    export function dump() {
-        // No need for this one.
-    }
-
-    export function imageOf(buf: RefBuffer) {
-        return incr(buf)
-    }
-}
-
-namespace pxsim.screen {
+namespace pxsim.image {
    function DMESG(msg: string) {
        control.dmesg(msg)
    }
    const NULL: RefBuffer = null;
-    function revbits(v: number) {
-        v = (v & 0xf0) >> 4 | (v & 0x0f) << 4;
-        v = (v & 0xcc) >> 2 | (v & 0x33) << 2;
-        v = (v & 0xaa) >> 1 | (v & 0x55) << 1;
-        return v;
-    }

    export function unpackPNG(png: RefBuffer) {
        function memcmp(off: number, mark: string) {
@ -198,10 +72,11 @@ namespace pxsim.screen {
            return NULL;
        }

-        const res = output.createBuffer(2 + byteW * height);
-        res.data[0] = 0xf0;
+        const res = output.createBuffer(3 + byteW * height);
+        res.data[0] = 0xf1;
        res.data[1] = width;
-        let dst = 2
+        res.data[2] = height;
+        let dst = 3
        let src = 0
        let lastMask = (1 << (width & 7)) - 1;
        if (lastMask == 0)
@ -213,99 +88,13 @@ namespace pxsim.screen {
                return NULL;
            }
            for (let j = 0; j < byteW; ++j) {
-                res.data[dst] = ~revbits(two[src++]);
+                res.data[dst] = ~(two[src++]);
                if (j == byteW - 1) {
                    res.data[dst] &= lastMask;
                }
                dst++;
            }
        }
-        return res;
+        return image.ofBuffer(res)
    }
 }
-
-namespace pxsim.ImageMethods {
-    const bitdouble = [
-        0x00, 0x03, 0x0c, 0x0f, 0x30, 0x33, 0x3c, 0x3f, 0xc0, 0xc3, 0xcc, 0xcf, 0xf0, 0xf3, 0xfc, 0xff,
-    ]
-
-    export function buffer(buf: RefBuffer) {
-        return incr(buf)
-    }
-
-    export function width(buf: RefBuffer) {
-        if (!screen.isValidImage(buf)) return 0
-        return buf.data[1]
-    }
-
-    export function height(buf: RefBuffer) {
-        if (!screen.isValidImage(buf)) return 0
-        const bw = screen.PIX2BYTES(buf.data[1]);
-        const h = ((buf.data.length - 2) / bw) | 0;
-        return h
-    }
-
-    export function draw(buf: RefBuffer, x: number, y: number, mode: Draw): void {
-        const screenState = ev3board().screenState;
-
-        if (!screen.isValidImage(buf))
-            return;
-
-        if (mode & (Draw.Double | Draw.Quad)) {
-            buf = doubled(buf);
-            if (mode & Draw.Quad) {
-                let pbuf = buf;
-                buf = doubled(buf);
-                decr(pbuf);
-            }
-        }
-
-        let pixwidth = buf.data[1];
-        let ptr = 2;
-        const bytewidth = screen.PIX2BYTES(pixwidth);
-        pixwidth = Math.min(pixwidth, visuals.SCREEN_WIDTH);
-        while (ptr + bytewidth <= buf.data.length) {
-            if (mode & (Draw.Clear | Draw.Xor | Draw.Transparent)) {
-                // no erase of background
-            } else {
-                screenState.clearLine(x, y, pixwidth)
-            }
-            screenState.blitLineCore(x, y, pixwidth, buf, mode, ptr);
-            y++;
-            ptr += bytewidth;
-        }
-
-        if (mode & (Draw.Double | Draw.Quad))
-            decr(buf);
-    }
-
-    export function doubled(buf: RefBuffer): RefBuffer {
-        if (!screen.isValidImage(buf))
-            return null;
-        const w = buf.data[1];
-        if (w > 126)
-            return null;
-        const bw = screen.PIX2BYTES(w);
-        const h = ((buf.data.length - 2) / bw) | 0;
-        const bw2 = screen.PIX2BYTES(w * 2);
-        const out = pins.createBuffer(2 + bw2 * h * 2)
-        out.data[0] = 0xf0;
-        out.data[1] = w * 2;
-        let src = 2
-        let dst = 2
-        for (let i = 0; i < h; ++i) {
-            for (let jj = 0; jj < 2; ++jj) {
-                let p = src;
-                for (let j = 0; j < bw; ++j) {
-                    const v = buf.data[p++]
-                    out.data[dst++] = bitdouble[v & 0xf];
-                    out.data[dst++] = bitdouble[v >> 4];
-                }
-            }
-            src += bw;
-        }
-        return out;
-    }
-
-
-}
--- a/sim/visuals/board.ts
+++ b/sim/visuals/board.ts
@ -351,6 +351,10 @@ namespace pxsim.visuals {
        private buildScreenCanvas() {
            this.screenCanvas = document.createElement("canvas");
            this.screenCanvas.id = "board-screen-canvas";
+            this.screenCanvas.style.userSelect = "none";
+            this.screenCanvas.style.msUserSelect = "none";
+            this.screenCanvas.style.webkitUserSelect = "none";
+            (this.screenCanvas.style as any).MozUserSelect = "none";
            this.screenCanvas.style.position = "absolute";
            this.screenCanvas.addEventListener(pxsim.pointerEvents.up, ev => {
                this.layoutView.selectBrick();
@ -496,7 +500,7 @@ namespace pxsim.visuals {
            }
        }

-        private updateScreenStep(state: EV3ScreenState) {
+        private updateScreenStep(state: ScreenState) {
            const bBox = this.layoutView.getBrick().getScreenBBox();
            if (!bBox || bBox.width == 0) return;

@ -511,13 +515,7 @@ namespace pxsim.visuals {

            this.screenCanvasData = this.screenCanvasCtx.getImageData(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

-            let sp = 3
-            const points = state.points
-            const data = this.screenCanvasData.data
-            for (let i = 0; i < points.length; ++i) {
-                data[sp] = points[i]
-                sp += 4;
-            }
+            new Uint32Array(this.screenCanvasData.data.buffer).set(state.screen)

            // Move the image to another canvas element in order to scale it
            this.screenCanvasTemp.style.width = `${SCREEN_WIDTH}`;
--- a/svgicons/categories/search.svg
+++ b/svgicons/categories/search.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="svg41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 23 23" style="enable-background:new 0 0 23 23;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<title>color</title>
+<path class="st0" d="M22.2,20.2L17,15c1.1-1.5,1.8-3.3,1.8-5.3c0-5-4-9-9-9c-5,0-9,4-9,9c0,5,4,9,9,9c1.9,0,3.6-0.6,5.1-1.6l5.2,5.2
+	L22.2,20.2z M9.8,15.7c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S13.1,15.7,9.8,15.7z"/>
+</svg>
--- a/svgicons/generateIcons.js
+++ b/svgicons/generateIcons.js
@ -26,7 +26,8 @@ webfontsGenerator({
    "./icons/check.svg",
    "./icons/download.svg",
    "./icons/save.svg",
-    "./icons/blocks.svg"
+    "./icons/blocks.svg",
+    "./categories/search.svg"
  ],
  dest: '../docs/static/fonts/icons/',
  round: 10
--- a/theme/blockly.less
+++ b/theme/blockly.less
@ -142,6 +142,10 @@ span.blocklyTreeIcon.blocklyTreeIconadvancedexpanded::before {
    content: "\f114";
 }

+span.blocklyTreeIcon.blocklyTreeIconsearch::before {
+    content: "\f11a";
+}
+
 .save-editortools-btn .icon.save:before {
    font-family: 'legoIcons';
    content: "\f118";
--- a/theme/fieldeditors.less
+++ b/theme/fieldeditors.less
@ -37,3 +37,24 @@
    stroke:#fc3;
    stroke-width: 4px !important;
 }
+
+
+/* Color enum picker */
+.blocklyDropDownDiv {
+    .goog-palette {
+        margin-bottom: 0px !important;
+    }
+    .legoColorPicker {
+        .goog-palette-colorswatch {
+            height: 30px;
+            width: 30px;
+            border-radius: 100%;
+        }
+        .goog-palette-cell-hover .goog-palette-colorswatch {
+            border: 2px solid #000;
+        }
+        .goog-palette-cell-selected .goog-palette-colorswatch {
+            border: 3px solid #000;
+        }
+    }
+}
Author	SHA1	Message	Date
Peli de Halleux	5f05934dda	0.1.1	2018-02-26 15:17:14 -08:00
Peli de Halleux	3e0ca1acb9	bump minor	2018-02-26 15:17:06 -08:00
Michał Moskal	c2d26a8418	Integrate screen APIs from common packages (#343 ) * starting screen api intergration * Further image integration * Aligning with new screen apis * Build fixes * Adjust to common screen state * Fix unpackPNG * Add game library * Optimize screen rendering * bumping common packages * updated shims * moving images into ev3 * upgrading to common packages * added try/use * cap * fixed tryp age	2018-02-26 15:16:17 -08:00
Sam El-Husseini	5bd9705966	0.0.109	2018-02-26 14:49:15 -08:00
Sam El-Husseini	1160d73b16	bump pxt-core to 3.4.9, bump pxt-common-packages to 0.20.3,	2018-02-26 14:49:00 -08:00
Sam El-Husseini	a2218d9ba5	Fix canvas (screen) user select options to disable selection in Safari, Mozilla, etc. (#348 )	2018-02-26 13:58:51 -08:00
Sam El-Husseini	54576ae77a	Fix authoring of the mood field editor. (#347 )	2018-02-26 13:52:26 -08:00
Sam El-Husseini	f16549d7cd	0.0.108	2018-02-26 13:38:20 -08:00
Sam El-Husseini	a021c0b292	Use a color picker for the color field (color enum picker) (#346 )	2018-02-26 13:37:58 -08:00
Peli de Halleux	cda7013e96	fixing links	2018-02-26 13:27:03 -08:00
Peli de Halleux	2f0fefbeaf	updated images	2018-02-26 13:25:53 -08:00
Peli de Halleux	b5303a660b	0.0.107	2018-02-26 11:22:44 -08:00
Sam El-Husseini	a60958f72a	Update search icon and avatar SVG (#345 )	2018-02-26 10:43:29 -08:00
Peli de Halleux	33dcb6deee	renaming infraredSensor to infrared (#344 )	2018-02-26 10:39:15 -08:00
Guillaume Jenkins	130a47d684	Sensor names are now part of the block text (#341 ) * Sensor names are now part of the block text * Use ports field editor	2018-02-26 11:33:50 -05:00
Peli de Halleux	2d355bb2ca	Merge branch 'master' of https://github.com/microsoft/pxt-ev3	2018-02-23 20:38:53 -08:00
Galen Nickel	8ee63df325	Add in 'console' doc stuff (#342 ) * Add 'playSound' api docs * Add in 'console' doc stuff * Add 'send to screen' in summary\	2018-02-23 14:13:08 -08:00
Peli de Halleux	7d16cf10ac	added make it smarter	2018-02-23 07:37:32 -08:00
Galen Nickel	60ec3f1c99	Add 'playSound' api docs (#340 ) * Add 'playSound' api docs * Linkup summary	2018-02-22 16:23:07 -08:00
Galen Nickel	6524b0a841	Add 'timer' api docs (#339 )	2018-02-22 14:56:15 -08:00
Peli de Halleux	d778232155	removing .mp4 file	2018-02-22 10:24:40 -08:00