0.1.46

docs/tutorials/line-following.md

@@ -1,6 +1,6 @@
 # Line Following
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Make a program to follow a line using the Color sensor and reflected light. Let's test reflected light to see if it's white or black (on the line), and drive our robot accordingly. 
 

docs/tutorials/make-an-animation.md

@@ -1,6 +1,6 @@
 # Make a custom animation
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Create a custom animation for your @boardname@.
  

docs/tutorials/music-brick.md

@@ -1,6 +1,6 @@
 # Music Brick
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Transform your @boardname@ into a musical instrument!
 

docs/tutorials/object-near.md

@@ -1,6 +1,6 @@
 # Object Near?
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 The digital Ultrasonic Sensor generates sound waves and reads their echoes to detect and measure distance from objects in centimeters. Build a program that will detect when an object is nearby.
 

docs/tutorials/redlight-greenlight.md

@@ -1,6 +1,6 @@
 # Red Light, Green Light
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Use the ``||sensors:pause color sensor||`` block to play Red Light, Green Light with your @boardname@ robot! 
 

docs/tutorials/run-motors.md

@@ -1,6 +1,6 @@
 # Run motors
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Use the buttons to start and stop the large and medium motors.
  
@@ -66,8 +66,7 @@ brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
 
 ## Step 5
 
-Now, let’s add a Medium motor, and tell it how many rotations we want it to run for. 
-Open the ``||brick:Brick||`` Toolbox drawer. Drag out **2** ``|brick:on button||`` blocks. In the ``||brick:on button||`` blocks, use the drop-down menu to select the ``left`` and ``right`` buttons.
+Now, let’s add a Medium motor, and tell it how many rotations we want it to run for. Open the ``||brick:Brick||`` Toolbox drawer. Drag out **2** ``|brick:on button||`` blocks. In the ``||brick:on button||`` blocks, use the drop-down menu to select the ``left`` and ``right`` buttons.
 
 ```blocks
 brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
@@ -105,9 +104,11 @@ brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
 
 ## Step 7
 
-For the ``||motors:run||`` blocks that are in the ``||brick:on button left||`` and ``||brick:on button right||`` blocks, use the drop-down menu to select ``medium motor D``. 
- 
-![Select motor on a port dropdown](/static/tutorials/run-motors/run-motor-dropdown.png)
+For the ``||motors:run||`` blocks that are in the ``||brick:on button left||`` and ``||brick:on button right||`` blocks, use the drop-down menu to select a ``medium motor`` on port ``D``. 
+
+| | | |
+|-|-|-|
+| ![Select a motor type dropdown](/static/tutorials/run-motors/run-motor-dropdown.png) | | | ![Select a motor port dropdown](/static/tutorials/run-motors/motor-port-dropdown.png) |
 
 ```blocks
 brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
@@ -203,7 +204,7 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 })
 ```
 
-# Step 12
+## Step 12
 
 Open the ``||motors:Motors||`` Toolbox drawer. Drag out a ``||motors:stop all motors||`` block onto the Workspace, and drop into the ``||brick:on button||`` enter block.
 

docs/tutorials/security-alert.md

@@ -1,6 +1,6 @@
 # Security Alert
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 The Infrared Sensor uses infrared light waves to detect proximity to the robot. Build an security alert using the infrared sensor. 
  

docs/tutorials/touch-sensor-values.md

@@ -1,6 +1,6 @@
 # Using Touch Sensor Values
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Use the Touch sensor value to stop a running motor.
 

docs/tutorials/touch-to-run.md

@@ -1,6 +1,6 @@
 # Touch to Run
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Use the Touch sensor to run a motor.
 

docs/tutorials/wake-up.md

@@ -1,6 +1,6 @@
 # Wake Up!
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Show different moods on your @boardname@.
 

docs/tutorials/what-animal-am-i.md

@@ -1,6 +1,6 @@
 # What Animal Am I?
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Create different animal effects with your @boardname@.
 

docs/tutorials/what-color.md

@@ -1,6 +1,6 @@
 # What Color is it?
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Use the Color sensor to detect different colors.
 
@@ -111,7 +111,7 @@ brick.showString("What color?", 1)
 
 ## Step 8
 
-In the ``||music::play sound effect||`` blocks, use the drop-down menu to select the ``colors red``, ``colors green``, and ``colors yellow`` sound effects corresponding to the different colors detected. 
+In the ``||music:play sound effect||`` blocks, use the drop-down menu to select the ``colors red``, ``colors green``, and ``colors yellow`` sound effects corresponding to the different colors detected. 
 
 ```blocks
 sensors.color3.onColorDetected(ColorSensorColor.Red, function () {

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "0.1.42",
+  "version": "0.1.46",
   "description": "LEGO MINDSTORMS EV3 for Microsoft MakeCode",
   "private": true,
   "keywords": [
@@ -39,8 +39,8 @@
     "webfonts-generator": "^0.4.0"
   },
   "dependencies": {
-    "pxt-common-packages": "0.22.2",
-    "pxt-core": "3.12.18"
+    "pxt-common-packages": "0.22.7",
+    "pxt-core": "3.12.23"
   },
   "scripts": {
     "test": "node node_modules/pxt-core/built/pxt.js travis"

pxtarget.json

@@ -81,7 +81,6 @@
         "accentColor": "#0089BF",
         "logoUrl": "https://education.lego.com/",
         "logo": "./static/lego_education_logo.png",
-        "highContrastLogo": "./static/lego_education_logo_white.png",
         "docsLogo": "./static/lego-logo.svg",
         "portraitLogo": "./static/lego-logo.svg",
         "footerLogo": "./static/lego-logo.svg",

sim/visuals/board.ts

@@ -101,10 +101,13 @@ namespace pxsim.visuals {
     export const SCREEN_HEIGHT = 128;
     export interface IBoardTheme {
         accent?: string;
+        highContrast?: boolean;
         display?: string;
         buttonOuter?: string;
         buttonUps: string[];
         buttonDown?: string;
+        wireColor?: string;
+        backgroundViewColor?: string;
     }
 
     export var themes: IBoardTheme[] = ["#3ADCFE"].map(accent => {
@@ -112,12 +115,21 @@ namespace pxsim.visuals {
             accent: accent,
             buttonOuter: "#979797",
             buttonUps: ["#a8aaa8", "#393939", "#a8aaa8", "#a8aaa8", "#a8aaa8", '#a8aaa8'],
-            buttonDown: "#000"
+            buttonDown: "#000",
+            wireColor: '#5A5A5A',
+            backgroundViewColor: '#d6edff'
         }
     });
 
     export function randomTheme(highContrast?: boolean, light?: boolean): IBoardTheme {
-        return themes[Math.floor(Math.random() * themes.length)];
+        let theme = themes[Math.floor(Math.random() * themes.length)];
+        if (highContrast) {
+            theme = JSON.parse(JSON.stringify(theme)) as IBoardTheme;
+            theme.highContrast = true;
+            theme.wireColor = '#ffffff';
+            theme.backgroundViewColor = '#ffffff';
+        }
+        return theme;
     }
 
     export interface IBoardProps {
@@ -334,7 +346,7 @@ namespace pxsim.visuals {
             this.style.textContent = EV3_STYLE;
 
             this.layoutView = new LayoutView();
-            this.layoutView.inject(this.element);
+            this.layoutView.inject(this.element, this.props.theme);
 
             const brick = new BrickViewPortrait(-1);
             this.layoutView.setBrick(brick);

sim/visuals/controls/backgroundView.ts

@@ -13,7 +13,7 @@ namespace pxsim.visuals {
                     'x': 0, 'y': 0,
                     'width': '100%',
                     'height': '100%',
-                    'style': `fill: #d6edff; stroke: #A8A9A8; stroke-width: 3px; stroke-opacity: 0.2`
+                    'style': `fill: ${this.theme.backgroundViewColor};stroke: #A8A9A8; stroke-width: 3px; stroke-opacity: 0.2`
                 }) as SVGRectElement;
             return this.backgroundGroup;
         }

sim/visuals/layoutView.ts

@@ -79,8 +79,8 @@ namespace pxsim.visuals {
 
         public setBrick(brick: BrickView) {
             this.brick = brick;
-            this.brick.inject(this.scrollGroup);
-            this.brickLandscape.inject(this.scrollGroup);
+            this.brick.inject(this.scrollGroup, this.theme);
+            this.brickLandscape.inject(this.scrollGroup, this.theme);
             this.brick.setSelected(false);
             this.brickLandscape.setSelected(true);
             this.brickLandscape.setVisible(false);
@@ -212,16 +212,16 @@ namespace pxsim.visuals {
 
             // Inject all wires
             for (let port = 0; port < DAL.NUM_OUTPUTS; port++) {
-                this.outputWires[port].inject(this.scrollGroup);
+                this.outputWires[port].inject(this.scrollGroup, this.theme);
             }
             for (let port = 0; port < DAL.NUM_INPUTS; port++) {
-                this.inputWires[port].inject(this.scrollGroup);
+                this.inputWires[port].inject(this.scrollGroup, this.theme);
             }
 
             // Inject all view containers
             for (let i = 0; i < 4; i++) {
-                this.inputContainers[i].inject(this.scrollGroup);
-                this.outputContainers[i].inject(this.scrollGroup);
+                this.inputContainers[i].inject(this.scrollGroup, this.theme);
+                this.outputContainers[i].inject(this.scrollGroup, this.theme);
             }
 
             // Inject all ports
@@ -253,6 +253,12 @@ namespace pxsim.visuals {
         }
 
         public updateTheme(theme: IBoardTheme) {
+            this.inputWires.forEach(n => {
+                n.updateTheme(theme);
+            })
+            this.outputWires.forEach(n => {
+                n.updateTheme(theme);
+            })
             this.inputs.forEach(n => {
                 n.updateTheme(theme);
             })

sim/visuals/view.ts

@@ -19,8 +19,9 @@ namespace pxsim.visuals {
         public abstract getInnerWidth(): number;
         public abstract getInnerHeight(): number;
 
-        public inject(parent: SVGElement, width?: number, visible = true) {
+        public inject(parent: SVGElement, theme: IBoardTheme, width?: number, visible = true) {
             this.width = width;
+            this.theme = theme;
             parent.appendChild(this.getView());
 
             if (visible) {
@@ -276,7 +277,7 @@ namespace pxsim.visuals {
         }
 
         public addView(view: View) {
-            view.inject(this.element);
+            view.inject(this.element, this.theme);
         }
 
         public clear() {

sim/visuals/wireView.ts

@@ -41,6 +41,11 @@ namespace pxsim.visuals {
             return this.wire;
         }
 
+        public updateThemeCore() {
+            let theme = this.theme;
+            this.path.setAttribute('stroke', theme.wireColor);
+        }
+
         updatePath() {
             if (!this.hasDimensions) return;
             const height = this.endY - this.startY;

targetconfig.json

@@ -15,6 +15,6 @@
         "Maker": "maker"
     },
     "electronManifest": {
-        "latest": "v0.1.36"
+        "latest": "v0.1.43"
     }
 }

theme/style.less

@@ -155,22 +155,6 @@
     }
 }
 
-/** high contrast **/
-.hc {
-    .ui.menu, #downloadArea,
-    .menubar .ui.menu.fixed .ui.item.editor-menuitem .item.active {
-        background-color: black !important;
-        color: white !important;
-    }
-    .ui.red.corner.label {
-        border-color: #d4000d!important;
-    }
-    .menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
-        border-color: white !important;
-    }
-}
-
-
 /*******************************
      Custom icons
 *******************************/