0.0.78

* always start with full brick layout

* adding 'on start' to template

* render entire board when selected

* zoom brick when clicking on screen

* resize when zooming

* toggle zooming of the brick

* inject close icon when selected

* fix toggling

docs/SUMMARY.md

@@ -41,3 +41,17 @@
 ## Reference #reference
 
 * [Reference](/reference)
+    * [Brick](/reference/brick)
+        * [show string](/reference/brick/show-string)
+        * [show number](/reference/brick/show-number)
+        * [show value](/reference/brick/show-value)
+        * [show mood](/reference/brick/show-mood)
+        * [show image](/reference/brick/show-image)
+        * [clear screen](/reference/brick/clear-screen)
+        * [print ports](/reference/brick/print-ports)
+        * [on event](/reference/brick/button/on-event)
+        * [is pressed](/reference/brick/button/is-pressed)
+        * [was pressed](/reference/brick/button/was-pressed)
+        * [pause until](/reference/brick/button/pause-until)
+        * [set light](/reference/brick/set-light)
+        * [battery level](/reference/brick/battery-level)

docs/reference.md

@@ -1,8 +1,11 @@
 # Reference
 
-
+```namespaces
+brick.showMood(moods.sleeping);
+```
 
 ## See Also
 
+[brick](/reference/brick),
 [touch sensor](/reference/sensors/touch-sensor),
 [color sensor](/reference/sensors/color-sensor)

docs/reference/brick.md

@@ -0,0 +1,31 @@
+# Brick
+
+## Screen
+
+```cards
+brick.showMood(moods.sleeping);
+brick.showImage(images.expressionsBigSmile);
+brick.showString("Hello world!", 1);
+brick.showNumber(0, 1);
+brick.showValue("item", 0, 1);
+brick.clearScreen();
+brick.printPorts();
+```
+
+## Buttons
+
+```cards
+brick.buttonEnter.onEvent(ButtonEvent.Click, function () {
+
+});
+brick.buttonEnter.pauseUntil(ButtonEvent.Click);
+brick.buttonEnter.isPressed()
+brick.buttonEnter.wasPressed()
+brick.setLight(BrickLight.Red);
+```
+
+## Other
+
+```cards
+brick.batteryLevel()
+```

docs/reference/brick/battery-level.md

@@ -0,0 +1,33 @@
+# battery Level
+
+Return the current battery level.
+
+```sig
+brick.batteryLevel();
+```
+
+## Returns
+
+* a [number](/types/number) which is the current charge level of the brick's battery. This is a percentage of total charge left in the battery.
+
+## Example
+
+Show the battery level percentage on the screen. Also, show a green light if the battery level is above 15%. If the battery level is below 15% but above 5%, show a orange light. But, if the battery level is below 5%, show a pulsing red light.
+
+```blocks
+let battery = 0;
+loops.forever(function() {
+    brick.showString("Battery level:", 1)
+    brick.showNumber(battery, 2)
+    battery = brick.batteryLevel();
+    if (battery > 15)
+    {
+        brick.setLight(BrickLight.Green);
+    } else if (battery > 5) {
+        brick.setLight(BrickLight.Orange);
+    } else {
+        brick.setLight(BrickLight.RedPulse)
+    }
+    loops.pause(30000)
+})
+```

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

@@ -0,0 +1,53 @@
+# is Pressed
+
+Check if a button is being pressed or not.
+
+```sig
+brick.buttonEnter.isPressed()
+```
+
+## ~hint
+
+**Touch sensors**
+
+Your @boardname@ has touch sensors that work like buttons. Instead of saying `enter` or `left` as the source button, use a touch sensor block with a sensor name like `touch 1`.
+
+```block
+if (sensors.touch1.isPressed()) {
+    console.log("Hey, I feel pressed.");
+}
+```
+
+Read about [touch sensors](/reference/sensors/touch-sensor) and using them as touch buttons.
+
+## ~
+
+## Returns
+
+* a [boolean](types/boolean): `true` if the button is pressed, `false` if the button is not pressed
+
+## Example
+
+Set the brick light to green when the `down` is pressed. When the button is not pressed, the brick light is red.
+
+```blocks
+let isRed = false;
+loops.forever(function() {
+    if (brick.buttonLeft.isPressed()) {
+        brick.setLight(BrickLight.Green);
+        isRed = false;
+    } else {
+        if (!isRed) {
+            brick.setLight(BrickLight.Red);
+            isRed = true;
+        }
+    }
+})
+```
+
+## See also
+
+[was pressed](/reference/brick/button/was-pressed),
+[on event](/reference/brick/button/on-event)
+
+[Touch sensors](/reference/sensors/touch-sensor)

docs/reference/brick/button/on-event.md

@@ -0,0 +1,57 @@
+# on Event
+
+Run some code when a button is clicked, pressed down, or released.
+
+```sig
+brick.buttonEnter.onEvent(ButtonEvent.Click, function () {
+
+});
+```
+
+## ~hint
+
+**Touch sensors**
+
+Your @boardname@ has touch sensors that work like buttons. Instead of saying `enter` or `left` as the source button, use a touch sensor block with a sensor name like `touch 1`.
+
+```block
+sensors.touch1.onEvent(TouchSensorEvent.Pressed, function () {
+    brick.setLight(BrickLight.Orange);
+});
+```
+
+Read about [touch sensors](/reference/sensors/touch-sensor) and using them as touch buttons.
+
+## ~
+
+## Parameters
+
+* **ev**: the button action to run some code for. The button actions (events) are:
+> * ``click``: button was clicked (pressed and released)
+> * ``up``: button is released from just being pressed
+> * ``down``: button is just pressed down
+* **body**: the code you want to run when something happens with a button
+
+## Example
+
+Check for event on the ENTER button. Put a message on the screen when the button is pressed, clicked, or released.
+
+```blocks
+brick.showString("ENTER is: UP", 1);
+brick.buttonEnter.onEvent(ButtonEvent.Up, function () {
+    brick.showString("ENTER is: UP      ", 1);
+});
+brick.buttonEnter.onEvent(ButtonEvent.Down, function () {
+    brick.showString("ENTER is: DOWN    ", 1);
+});
+brick.buttonEnter.onEvent(ButtonEvent.Click, function () {
+    brick.showString("ENTER was: CLICKED", 1);
+});
+```
+
+### See also
+
+[is pressed](/reference/brick/button/is-pressed),
+[was pressed](/reference/brick/button/was-pressed),
+
+[Touch sensor](/reference/sensors/touch-sensor)

docs/reference/brick/button/pause-until.md

@@ -0,0 +1,37 @@
+# pause Until
+
+Causes your program to wait until an event at a button happens.
+
+```sig
+brick.buttonEnter.pauseUntil(ButtonEvent.Click);
+```
+
+## Parameters
+
+* **ev**: the button action to wait for. The button actions (events) are:
+> * ``click``: button was clicked (pressed and released)
+> * ``up``: button is released from just being pressed
+> * ``down``: button is just pressed down
+
+## Example
+
+Wait for the `up` button to go up before continuing with displaying a message on the screen.
+
+```blocks
+let waitTime = 0;
+brick.showString("We're going to wait", 1);
+brick.showString("for you to press and", 2);
+brick.showString("release the UP button", 3);
+waitTime = control.millis();
+brick.buttonUp.pauseUntil(ButtonEvent.Click);
+brick.clearScreen();
+if (control.millis() - waitTime > 5000) {
+    brick.showString("Ok, that took awhile!", 1)
+} else {
+    brick.showString("Ah, you let go!", 1)
+}
+```
+
+## See also
+
+[on event](/reference/brick/button/on-event)

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

@@ -0,0 +1,50 @@
+# was Pressed
+
+Check if a button was pressed earlier.
+
+```sig
+brick.buttonEnter.wasPressed()
+```
+
+The fact that a button was pressed earlier is remembered. Once **was pressed** is used, this fact is forgotten and the result is `false` the next time you check with **was pressed** button _state_ is reset). But, if you press the button again before you check with **was pressed**, it will tell you `true`. 
+
+## ~hint
+
+**Touch sensors**
+
+Your @boardname@ has touch sensors that work like buttons. Instead of saying `enter` or `left` as the source button, use a touch sensor block with a sensor name like `touch 1`.
+
+```block
+if (sensors.touch1.wasPressed()) {
+    console.log("Hey, I was pressed.");
+}
+```
+
+Read about [touch sensors](/reference/sensors/touch-sensor) and using them as touch buttons.
+
+## ~
+
+## Returns
+
+* a [boolean](types/boolean): `true` if the button was pressed before, `false` if the button was not pressed before
+
+## Example
+
+Set the brick light to green if the `right` button was pressed before the `left` button. If not, the brick light is turned off when the `left` button is pressed.
+
+```blocks
+brick.buttonLeft.onEvent(ButtonEvent.Click, function() {
+    if (brick.buttonRight.wasPressed()) {
+        brick.setLight(BrickLight.Green)
+    } else {
+        brick.setLight(BrickLight.Off)
+    }
+})
+```
+
+## See also
+
+[is pressed](/reference/brick/button/is-pressed),
+[on event](/reference/brick/button/on-event)
+
+[Touch sensors](/reference/sensors/touch-sensor)

docs/reference/brick/clear-screen.md

@@ -0,0 +1,22 @@
+# clear Screen
+
+Clear any text or numbers displayed on the screen. The screen will be blank.
+
+```sig
+brick.clearScreen();
+```
+
+## Example
+
+Clear the screen after displaying the message.
+
+```blocks
+brick.showString("This message will", 1);
+brick.showString("self-destruct in:", 2);
+brick.showString("seconds", 5);
+for (let i = 0; i < 10; i++) {
+    brick.showNumber(10 - i, 4);
+    loops.pause(1000);
+}
+brick.clearScreen();
+```

docs/reference/brick/print-ports.md

@@ -0,0 +1,19 @@
+# print Ports
+
+Print the status of the ports on the screen.
+
+```sig
+brick.printPorts();
+```
+
+## Example
+
+Show the port status.
+
+```blocks
+brick.printPorts();
+```
+
+## See also
+
+[show string](/reference/brick/show-string), [show value](/reference/brick/show-value)

docs/reference/brick/set-light.md

@@ -0,0 +1,37 @@
+# set Light
+
+Set the light on the brick to a solid or flashing color.
+
+```sig
+brick.setLight(BrickLight.Red);
+```
+## Parameters
+
+* **pattern**: the color or color pattern for the brick light to show. The brick light can have these color patterns:
+>* `off`: brick light is off
+>* `green`: solid green
+>* `red`: solid red
+>* `orange`: solid orange
+>* `green flash`: flashing green
+>* `red flash`: flashing red
+>* `orange flash`: flashing orange
+>* `green pulse`: pulsing green
+>* `red pulse`: pulsing red
+>* `orange pulse`: pulsing orange
+
+## Example
+
+Repeatedly show a different color pattern for the brick light.
+
+```blocks
+loops.forever(function () {
+    brick.setLight(BrickLight.Orange)
+    loops.pause(1000)
+    brick.setLight(BrickLight.GreenFlash)
+    loops.pause(2000)
+    brick.setLight(BrickLight.RedPulse)
+    loops.pause(2000)
+    brick.setLight(BrickLight.Off)
+    loops.pause(500)
+})
+```

docs/reference/brick/show-image.md

@@ -0,0 +1,24 @@
+# show Image
+
+Show an image on the brick's display.
+
+```sig
+brick.showImage(images.expressionsBigSmile);
+```
+You can choose one of several images to show on the display. 
+
+## Parameters
+
+**image**: A image to show on the brick's display. Use the image picker to choose the image you want to show.
+
+## Example
+
+Show a sleeping image on the brick's display.
+
+```blocks
+brick.showImage(images.expressionsZzz)
+```
+
+## See also
+
+[show image](/reference/brick/show-mood)

docs/reference/brick/show-number.md

@@ -0,0 +1,24 @@
+# show Number
+
+Show a number on the screen at the line you select.
+
+```sig
+brick.showNumber(0, 1);
+```
+
+## Parameters
+
+* **value**: a [number](/types/number) to show on the brick's screen.
+* **line**: The line number on the screen where the value is displayed. The line numbers for the screen start with line `1`.
+
+## Example
+
+Show the number `1000` on the screen.
+
+```blocks
+brick.showNumber(1000, 1);
+```
+
+## See also
+
+[show string](/reference/brick/show-string), [show value](/reference/brick/show-value)

docs/reference/brick/show-string.md

@@ -0,0 +1,29 @@
+# show String
+
+Show some text on a the screen at the line you select.
+
+```sig
+brick.showString("Hello world", 1)
+```
+
+## Parameters
+
+* **text**: a [string](/types/string) to show on the brick's screen.
+* **line**: the line [number](/types/number) on the screen where the text is displayed. The line numbers for the screen start with line `1`.
+
+## Example
+
+Show a greeting on the screen. Then, respond with another message when ENTER is pressed.
+
+```blocks
+brick.showString("Hello, I dare you to", 1);
+brick.showString("press ENTER...", 2);
+brick.buttonEnter.onEvent(ButtonEvent.Click, function () {
+	brick.showString("Hey! Don't push my", 4);
+	brick.showString("buttons.", 5);
+});
+```
+
+## See also
+
+[show number](/reference/brick/show-number)

docs/reference/brick/show-value.md

@@ -0,0 +1,29 @@
+# show Value
+
+Show a name-value-pair on the screen at the line you select.
+
+```sig
+brick.showNumber("item", 0, 1);
+```
+
+Name-value-pairs are used to report data values to the screen. If you want to show the current temperature on the screen, you might use `"temp"` as the data name for the the value.
+
+## Parameters
+
+* **name**: a [string](/types/string) which is the name of the data value.
+* **value**: a [number](/types/number) to show on the brick's screen.
+* **line**: The line number on the screen where the value is displayed. The line numbers for the screen start with line `1`.
+
+## Example
+
+Show the current amount of ambient light detected by sensor 2.
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Click, function () {
+    brick.showValue("color", sensors.color2.light(LightIntensityMode.Ambient), 1)
+})
+```
+
+## See also
+
+[show number](/reference/brick/show-number)

editor/field_speed.ts

@@ -40,7 +40,9 @@ export class FieldSpeed extends Blockly.FieldSlider implements Blockly.FieldCust
         var labelContainer = document.createElement('div');
         this.speedSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg") as SVGGElement;
         pxsim.svg.hydrate(this.speedSVG, {
-            viewBox: "0 0 200 100"
+            viewBox: "0 0 200 100",
+            width: "200",
+            height: "100"
         });
 
         labelContainer.appendChild(this.speedSVG);
@@ -58,7 +60,7 @@ export class FieldSpeed extends Blockly.FieldSlider implements Blockly.FieldCust
 
         this.reporter = pxsim.svg.child(this.speedSVG, "text", {
             'x': 100, 'y': 80,
-            'text-anchor': 'middle', 'alignment-baseline': 'middle',
+            'text-anchor': 'middle', 'dominant-baseline': 'middle',
             'style': 'font-size: 50px',
             'class': 'sim-text inverted number'
         }) as SVGTextElement;

editor/field_turnratio.ts

@@ -56,7 +56,7 @@ export class FieldTurnRatio extends Blockly.FieldSlider implements Blockly.Field
         }, marker);
         this.reporter_ = pxsim.svg.child(svg, "text", {
             'x': FieldTurnRatio.HALF, 'y': 96,
-            'text-anchor': 'middle', 'alignment-baseline': 'middle',
+            'text-anchor': 'middle', 'dominant-baseline': 'middle',
             'style': 'font-size: 50px',
             'class': 'sim-text inverted number'
         }) as SVGTextElement;

libs/blocksprj/main.blocks

@@ -1,3 +1,5 @@
 <xml xmlns="http://www.w3.org/1999/xhtml">
-  <block type="forever"></block>
+  <variables></variables>
+  <block type="pxt-on-start" x="0" y="0"></block>
+  <block type="forever" x="176" y="0"></block>
 </xml>

libs/core/_locales/core-jsdoc-strings.json

@@ -29,11 +29,11 @@
   "brick.buttonLeft": "Left button on the EV3 Brick.",
   "brick.buttonRight": "Right button on the EV3 Brick.",
   "brick.buttonUp": "Up button on the EV3 Brick.",
-  "brick.clearScreen": "Clears the screen",
-  "brick.printPorts": "Prints the port states on the screen",
+  "brick.clearScreen": "Clear the screen",
+  "brick.printPorts": "Print the port states on the screen",
   "brick.setLight": "Set lights.",
   "brick.setLight|param|pattern": "the lights pattern to use. eg: BrickLight.Orange",
-  "brick.showImage": "Shows an image on screen",
+  "brick.showImage": "Show an image on the screen",
   "brick.showImage|param|image": "image to draw",
   "brick.showNumber": "Shows a number on the screen",
   "brick.showNumber|param|line": "the line number to print the text at, eg: 1",

libs/core/battery.ts

@@ -5,6 +5,7 @@ namespace brick {
      */
     //% blockId=brickBatteryLevel block="battery level"
     //% group="More"
+    //% help=brick/battery-level
     export function batteryLevel(): number {
         const info = sensors.internal.getBatteryInfo();
         return info.current;

libs/core/buttons.ts

@@ -75,7 +75,7 @@ namespace brick {
          * Check if button is currently pressed or not.
          * @param button the button to query the request
          */
-        //% help=input/button/is-pressed
+        //% help=brick/button/is-pressed
         //% block="%button|is pressed"
         //% blockId=buttonIsPressed
         //% parts="brick"
@@ -91,7 +91,7 @@ namespace brick {
          * See if the button was pressed again since the last time you checked.
          * @param button the button to query the request
          */
-        //% help=input/button/was-pressed
+        //% help=brick/button/was-pressed
         //% block="%button|was pressed"
         //% blockId=buttonWasPressed
         //% parts="brick"
@@ -111,7 +111,7 @@ namespace brick {
          * @param event the kind of button gesture that needs to be detected
          * @param body code to run when the event is raised
          */
-        //% help=input/button/on-event
+        //% help=brick/button/on-event
         //% blockId=buttonEvent block="on %button|%event"
         //% parts="brick"
         //% blockNamespace=brick
@@ -126,7 +126,7 @@ namespace brick {
          * Waits until the event is raised
          * @param ev the event to wait for
          */
-        //% help=input/button/pause-until
+        //% help=brick/button/pause-until
         //% blockId=buttonWaitUntil block="pause until %button|%event"
         //% parts="brick"
         //% blockNamespace=brick
@@ -251,6 +251,7 @@ namespace brick {
      */
     //% blockId=setLights block="set light to %pattern"
     //% weight=100 group="Buttons"
+    //% help=brick/set-light
     export function setLight(pattern: BrickLight): void {
         if (currPattern === pattern)
             return

libs/core/screen.ts

@@ -72,6 +72,7 @@ namespace brick {
      */
     //% 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;
@@ -87,6 +88,7 @@ namespace brick {
      */
     //% 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);
@@ -99,6 +101,7 @@ namespace brick {
      */
     //% 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;
@@ -136,11 +139,12 @@ namespace brick {
     }
 
     /**
-     * Shows an image on screen
+     * 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);
@@ -160,10 +164,11 @@ namespace brick {
     }
 
     /**
-     * Clears the screen
+     * Clear the screen
      */
     //% blockId=screen_clear_screen block="clear screen"
     //% weight=90 group="Screen"
+    //% help=brick/clear-screen
     export function clearScreen() {
         screen.clear();
     }
@@ -208,9 +213,10 @@ namespace brick {
     }
 
     /**
-     * Prints the port states on the screen
+     * Print the port states on the screen
      */
     //% blockId=brickPrintPorts block="print ports"
+    //% help=brick/print-ports
     //% weight=1 group="Screen"
     export function printPorts() {
         const col = 44;

libs/ev3/ns.ts

@@ -9,7 +9,6 @@ namespace brick {
 //% color="#C8509B" weight=95 icon="\uf10f"
 //% labelLineWidth=0
 //% groups='["Touch Sensor", "Color Sensor", "Ultrasonic Sensor", "Gyro Sensor", "Infrared Sensor", "Remote Infrared Beacon", "Threshold"]'
-//% groupIcons='["\uf101","\uf103","\uf102","","","\uf104"]'
 namespace sensors {
 }
 

libs/mood/_locales/mood-jsdoc-strings.json

@@ -1,7 +1,7 @@
 {
   "brick.Mood": "A mood",
   "brick.Mood.show": "Shows the mood on the EV3",
-  "brick.showMood": "Shows a mood",
+  "brick.showMood": "Show a mood on the brick's screen",
   "moods.angry": "An angry mood",
   "moods.awake": "A awake mood",
   "moods.dizzy": "A dizzy mood",

libs/mood/docs/reference/brick/show-mood.md

@@ -0,0 +1,37 @@
+# show Mood
+
+Show a mood on the brick. A mood will have a image on the display along with a sound and solid or flashing light.
+
+```sig
+brick.showMood(moods.sleeping)
+```
+You can choose one of several moods to show on the display. Use a mood to help show what your @boardname@ is doing at the moment.
+
+## Parameters
+
+**mood**: A mood to show on the brick. Choose one of these moods:
+>* ``sleeping``
+* ``awake``
+* ``tired``
+* ``angry``
+* ``sad``
+* ``dizzy``
+* ``knockedOut``
+* ``middleLeft``
+* ``middleRight``
+* ``love``
+* ``winking``
+* ``neutral``
+
+
+## Example
+
+Show a ``winking`` mood on the brick.
+
+```blocks
+brick.showMood(moods.winking)
+```
+
+## See also
+
+[show image](/reference/brick/show-image)

libs/mood/mood.ts

@@ -1,9 +1,10 @@
 namespace brick {
     /**
-     * Shows a mood
+     * Show a mood on the brick's screen
      */
     //% weight=90
     //% blockId=moodShow block="show mood %mood=mood_image_picker"
+    //% help=brick/show-mood
     //% weight=101 group="Screen" blockGap=8
     export function showMood(mood: Mood) {
         if(mood)

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "0.0.77",
+  "version": "0.0.78",
   "description": "LEGO Mindstorms EV3 for Microsoft MakeCode",
   "private": true,
   "keywords": [

sim/visuals/board.ts

@@ -298,7 +298,14 @@ namespace pxsim.visuals {
             this.layoutView.inject(this.element);
 
             // Add EV3 module element
-            this.layoutView.setBrick(new BrickView(-1));
+            const brickCloseIcon = this.getCloseIconView();
+            brickCloseIcon.registerClick(ev => {                
+                this.layoutView.unselectBrick();                
+                this.resize();
+            });
+            const brick =new BrickView(-1);
+            brick.setSelected(EV3View.isPreviousBrickSelected());
+            this.layoutView.setBrick(brick, brickCloseIcon);
 
             this.resize();
 
@@ -329,6 +336,12 @@ namespace pxsim.visuals {
             this.screenCanvas = document.createElement("canvas");
             this.screenCanvas.id = "board-screen-canvas";
             this.screenCanvas.style.position = "absolute";
+            this.screenCanvas.addEventListener(pxsim.pointerEvents.up, ev => {
+                this.layoutView.selectBrick();
+                this.resize();
+            })
+            this.screenCanvas.style.cursor = "pointer";
+            /*
             this.screenCanvas.style.cursor = "crosshair";
             this.screenCanvas.onmousemove = (e: MouseEvent) => {
                 const x = e.clientX;
@@ -340,6 +353,7 @@ namespace pxsim.visuals {
             this.screenCanvas.onmouseleave = () => {
                 this.updateXY(SCREEN_WIDTH, SCREEN_HEIGHT);
             }
+            */
 
             this.screenCanvas.width = SCREEN_WIDTH;
             this.screenCanvas.height = SCREEN_HEIGHT;
@@ -360,10 +374,12 @@ namespace pxsim.visuals {
             // Save previous inputs for the next cycle
             EV3View.previousSelectedInputs = ev3board().getInputNodes().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1)
             EV3View.previousSeletedOutputs = ev3board().getMotors().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1);
+            EV3View.previousSelectedBrick = this.layoutView.getBrick().getSelected();
         }
 
         private static previousSelectedInputs: number[];
         private static previousSeletedOutputs: number[];
+        private static previousSelectedBrick: boolean;
 
         private static isPreviousInputSelected(index: number, id: number) {
             if (EV3View.previousSelectedInputs && EV3View.previousSelectedInputs[index] == id) {
@@ -381,6 +397,12 @@ namespace pxsim.visuals {
             return false;
         }
 
+        private static isPreviousBrickSelected() {
+            const b = EV3View.previousSelectedBrick;
+            EV3View.previousSelectedBrick = false;
+            return !!b;
+        }
+
         private begin() {
             this.running = true;
             this.updateState();

sim/visuals/controls/motorReporter.ts

@@ -23,7 +23,7 @@ namespace pxsim.visuals {
 
             this.reporter = pxsim.svg.child(this.group, "text", { 
                 'x': this.getWidth() / 2, 'y': this.getHeight() / 2, 
-                'text-anchor': 'middle', 'alignment-baseline': 'middle',
+                'text-anchor': 'middle', 'dominant-baseline': 'middle',
                 'style': 'font-size: 50px', 
                 'class': 'sim-text inverted number' }) as SVGTextElement;
 

sim/visuals/controls/motorSlider.ts

@@ -27,7 +27,7 @@ namespace pxsim.visuals {
 
             this.reporter = pxsim.svg.child(this.group, "text", {
                 'x': this.getInnerWidth() / 2, 'y': this.getInnerHeight() / 2,
-                'text-anchor': 'middle', 'alignment-baseline': 'middle',
+                'text-anchor': 'middle', 'dominant-baseline': 'middle',
                 'style': 'font-size: 50px',
                 'class': 'sim-text inverted number'
             }) as SVGTextElement;

sim/visuals/layoutView.ts

@@ -37,6 +37,8 @@ namespace pxsim.visuals {
         private outputWires: WireView[] = [];
 
         private brick: BrickView;
+        private brickCloseIcon: View = undefined;
+
         private offsets: number[];
         private contentGroup: SVGGElement;
         private scrollGroup: SVGGElement;
@@ -67,9 +69,13 @@ namespace pxsim.visuals {
             this.position();
         }
 
-        public setBrick(brick: BrickView) {
+        public setBrick(brick: BrickView, brickCloseIcon: View) {
             this.brick = brick;
             this.brick.inject(this.scrollGroup);
+
+            this.brickCloseIcon = brickCloseIcon;
+            this.addView(this.brickCloseIcon);
+            this.brickCloseIcon.setVisible(this.brick.getSelected());
             this.position();            
         }
 
@@ -77,6 +83,18 @@ namespace pxsim.visuals {
             return this.brick;
         }
 
+        public unselectBrick() {
+            this.brick.setSelected(false);
+            this.brickCloseIcon.setVisible(false);
+            this.position();
+        }
+
+        public selectBrick() {
+            this.brick.setSelected(true);
+            this.brickCloseIcon.setVisible(true);
+            this.position();
+        }
+
         public setInput(port: number, view: LayoutElement, control?: View, closeIcon?: View) {
             if (this.inputs[port] != view || this.inputControls[port] != control) {
                 if (this.inputs[port]) {
@@ -224,17 +242,23 @@ namespace pxsim.visuals {
 
             const noConnections = this.outputs.concat(this.inputs).filter(m => m.getId() != NodeType.Port).length == 0;
 
-            if (noConnections) {
-                // No connections render the entire board
-                this.brick.resize(contentWidth, contentHeight);
-                this.brick.translate(0, 0);
+            // render the full brick layout, even when there are not connection
+            // otherwise, it creates flickering of the simulator.
+            if (this.brick.getSelected()) {
+                // render output button
+                const closeIconWidth = this.brickCloseIcon.getWidth();
+                const closeIconHeight = this.brickCloseIcon.getHeight();
+                this.brickCloseIcon.translate(contentWidth / 2 - closeIconWidth / 2, 0);
+
+                // render the entire board
+                this.brick.resize(contentWidth, contentHeight - closeIconHeight * 2);
+                this.brick.translate(0, closeIconHeight * 2);
 
                 // Hide all other connections
                 this.outputs.concat(this.inputs).forEach(m => m.setVisible(false));
                 return;
-            } else {
-                this.outputs.concat(this.inputs).forEach(m => m.setVisible(true));
             }
+            this.outputs.concat(this.inputs).forEach(m => m.setVisible(true));
 
             const moduleHeight = this.getModuleHeight();
 

sim/visuals/view.ts

@@ -206,9 +206,11 @@ namespace pxsim.visuals {
         }
 
         public setSelected(selected: boolean) {
+            if (this.selected != selected) {
                 this.selected = selected;
                 this.setChangedState();
             }
+        }
 
         protected setChangedState() {
             this.changed = true;

theme/site/globals/site.variables

@@ -2,10 +2,10 @@
      User Global Variables
 *******************************/
 
-@importGoogleFonts: false;
+@importGoogleFonts: true;
 
-@headerFont        : Roboto,"Arial Narrow","Helvetica Neue",Helvetica,Arial,sans-serif;
-@pageFont          : Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
+@headerFont        : "Open Sans","Arial Narrow","Helvetica Neue",Helvetica,Arial,sans-serif;
+@pageFont          : "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 
 @emSize      : 14px;
 @fontSize    : 13px;