0.2.3

Release 0.1.57 with tutorial fix patch

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a report to help us improve
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+Add screenshots to help explain your problem. You can copy paste the screenshot in the github report. The .gif screen recording is very useful as well. 
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

cmds/pxtrequire.ts

@@ -1,6 +0,0 @@
-/// <reference path="../node_modules/pxt-core/built/pxtlib.d.ts" />
-
-import * as path from "path";
-export let pxtCore = require("pxt-core");
-// require.resolve() gives path to [pxt dir]/built/pxt.js, so move up twice to get pxt root dir
-export let pxtCoreDir = path.resolve(require.resolve("pxt-core"), "..", "..");

docs/SUMMARY.md

@@ -3,8 +3,8 @@
 ## Support #support
 
 * [Troubleshoot](/troubleshoot)
-* [LEGO Support](http://service.lego.com/)
 * [EV3 Manager](https://ev3manager.education.lego.com/)
+* [LEGO Support](https://www.lego.com/service/)
 
 ## Projects #projects
 

docs/getting-started.md

@@ -4,6 +4,14 @@
 
 ```codecard
 [
+{
+    "name": "Prepare",
+    "imageUrl": "/static/lessons/firmware.png",
+    "description": "To use Microsoft MakeCode with your EV3 brick, you will need to install the latest LEGO MINDSTORMS Education EV3 firmware - version 1.10 or higher. Follow these steps to install the latest firmware from LEGO.",
+    "label": "New? Start Here!",
+    "labelClass": "red ribbon large",
+    "url": "https://makecode.mindstorms.com/troubleshoot"
+},
 {
     "name": "Try",
     "imageUrl": "/static/lessons/try.png",

docs/index-ref.json

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

docs/maker.md

@@ -1,9 +1,5 @@
 # Maker Activites
 
-These six activities require the [@boardname@ Core Set (45544)](https://education.lego.com/en-us/products/lego-mindstorms-education-ev3-core-set-/5003400). Supporting materials for teachers and middle school students are provided, offering everything teachers and students need to explore their inner makers as they follow the design process to solve open-ended, themed challenges...
-
-* [Download Curriculum Materials](https://education.lego.com/en-us/downloads/mindstorms-ev3/curriculum)
-
 ## Activites
 
 ```codecard

docs/static/download/firmware.svg

@@ -1,252 +1,279 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="261.3" height="109.3" viewBox="0 0 69.1 28.9" id="svg9461">
-  <defs id="defs9455">
-    <clipPath id="clipPath8689">
-      <path d="M0 1145.9h1366V0H0z" id="path8687"/>
-    </clipPath>
-    <clipPath id="clipPath8663">
-      <path d="M309.8 89.4h3.7v3.7h-3.7z" id="path8661"/>
-    </clipPath>
-    <clipPath id="clipPath8647">
-      <path d="M0 1145.9h1366V0H0z" id="path8645"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 .6661 -.32488 0 300.7 115)" id="linearGradient8637">
-      <stop offset="0" id="stop8633" stop-color="#757575"/>
-      <stop offset="1" id="stop8635" stop-color="#393939"/>
-    </linearGradient>
-    <clipPath id="clipPath8595">
-      <path d="M0 1145.9h1366V0H0z" id="path8593"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 12.8096 -17.18704 0 300.7 98.4)" id="linearGradient8585">
-      <stop offset="0" id="stop8579" stop-color="#6a6a6a"/>
-      <stop offset=".5" id="stop8581" stop-color="#48e400"/>
-      <stop offset="1" id="stop8583" stop-color="#6a6a6a"/>
-    </linearGradient>
-    <clipPath id="clipPath8561">
-      <path d="M0 1145.9h1366V0H0z" id="path8559"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.33016 5.597 0 300.7 88.4)" id="linearGradient8551">
-      <stop offset="0" id="stop8547" stop-color="#a9aba9"/>
-      <stop offset="1" id="stop8549" stop-color="#535453"/>
-    </linearGradient>
-    <clipPath id="clipPath8525">
-      <path d="M0 1145.9h1366V0H0z" id="path8523"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -.56074 .70884 0 300.7 115.6)" id="linearGradient8515">
-      <stop offset="0" id="stop8511" stop-color="#a9aba9"/>
-      <stop offset="1" id="stop8513" stop-color="#818181"/>
-    </linearGradient>
-    <clipPath id="clipPath8493">
-      <path d="M0 1145.9h1366V0H0z" id="path8491"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -2.39765 2.48247 0 300.7 98.1)" id="linearGradient8483">
-      <stop offset="0" id="stop8479" stop-color="#f2f2f2"/>
-      <stop offset="1" id="stop8481" stop-color="#7a7a7a"/>
-    </linearGradient>
-    <clipPath id="clipPath8449">
-      <path d="M0 1145.9h1366V0H0z" id="path8447"/>
-    </clipPath>
-    <clipPath id="clipPath8977">
-      <path d="M0 1145.9h1366V0H0z" id="path8975"/>
-    </clipPath>
-    <clipPath id="clipPath8951">
-      <path d="M593 101h3.6v3.7H593z" id="path8949"/>
-    </clipPath>
-    <clipPath id="clipPath8935">
-      <path d="M0 1145.9h1366V0H0z" id="path8933"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 .67046 -.32706 0 583.8 126.8)" id="linearGradient8925">
-      <stop offset="0" id="stop8921" stop-color="#757575"/>
-      <stop offset="1" id="stop8923" stop-color="#393939"/>
-    </linearGradient>
-    <clipPath id="clipPath8883">
-      <path d="M0 1145.9h1366V0H0z" id="path8881"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 12.89405 -17.29507 0 583.7 110)" id="linearGradient8873">
-      <stop offset="0" id="stop8867" stop-color="#6a6a6a"/>
-      <stop offset=".5" id="stop8869" stop-color="#48e400"/>
-      <stop offset="1" id="stop8871" stop-color="#6a6a6a"/>
-    </linearGradient>
-    <clipPath id="clipPath8849">
-      <path d="M0 1145.9h1366V0H0z" id="path8847"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.33884 5.6329 0 583.7 100)" id="linearGradient8839">
-      <stop offset="0" id="stop8835" stop-color="#a9aba9"/>
-      <stop offset="1" id="stop8837" stop-color="#535453"/>
-    </linearGradient>
-    <clipPath id="clipPath8813">
-      <path d="M0 1145.9h1366V0H0z" id="path8811"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -.56429 .71345 0 583.7 127.4)" id="linearGradient8803">
-      <stop offset="0" id="stop8799" stop-color="#a9aba9"/>
-      <stop offset="1" id="stop8801" stop-color="#818181"/>
-    </linearGradient>
-    <clipPath id="clipPath8781">
-      <path d="M0 1145.9h1366V0H0z" id="path8779"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -2.41323 2.4988 0 583.7 109.8)" id="linearGradient8771">
-      <stop offset="0" id="stop8767" stop-color="#f2f2f2"/>
-      <stop offset="1" id="stop8769" stop-color="#7a7a7a"/>
-    </linearGradient>
-    <clipPath id="clipPath8737">
-      <path d="M0 1145.9h1366V0H0z" id="path8735"/>
-    </clipPath>
-  </defs>
-  <g id="layer1" transform="translate(0 -268)">
-    <g id="g10860" transform="translate(-20.8 -2)">
-      <g transform="matrix(.35278 0 0 -.35278 62.8 291.4)" id="g8727">
-        <path id="path8729" d="M0 0h24" fill="none" stroke="#000" stroke-width="2"/>
-      </g>
-      <g id="g8731" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8737)" id="g8733">
-          <g transform="translate(458 159.9)" id="g8739">
-            <path id="path8741" d="M0 0h83a4 4 0 0 0 4-4v-52.5H-4V-4a4 4 0 0 0 4 4" fill="#e6e6e6"/>
-          </g>
-          <g transform="translate(458 158.4)" id="g8743">
-            <path id="path8745" d="M0 0h83c1.3 0 2.4-1.1 2.4-2.5V-52c0-.9-.6-1.5-1.5-1.5H-1c-.8 0-1.5.6-1.5 1.5v49.5C-2.5-1.1-1.4 0 0 0z" fill="none" stroke="#282828" stroke-width="3"/>
-          </g>
-          <g transform="translate(445 102.9)" id="g8747">
-            <path id="path8749" d="M0 0h108.8v-1.2a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3z" fill="#626262"/>
-          </g>
-          <g transform="translate(489.8 102.9)" id="g8751">
-            <path id="path8753" d="M0 0h19.3c0-.8-.6-1.4-1.4-1.4H1.4C.6-1.4 0-.8 0 0" fill="#818181"/>
-          </g>
-        </g>
-      </g>
-      <g id="g8755" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g id="g8757">
-          <g id="g8763">
-            <g id="g8765">
-              <path id="path8773" d="M567.9 139.7a.6.6 0 0 1-.6-.6v-30.6c0-.3.2-.6.6-.6h31.7c.3 0 .5.3.5.6v30.6c0 .3-.2.6-.5.6z" fill="url(#linearGradient8771)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="g8775" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8781)" id="g8777">
-          <g transform="translate(569.7 111.2)" id="g8783">
-            <path id="path8785" d="M0 0h28c.3 0 .6-.3.6-.6V-12c0-.4-.3-.6-.6-.6H0c-.3 0-.6.2-.6.6V-.6c0 .3.3.6.6.6" fill="#f2f2f2"/>
-          </g>
-        </g>
-      </g>
-      <g id="g8787" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g id="g8789">
-          <g id="g8795">
-            <g id="g8797">
-              <path id="path8805" d="M569.4 149.1a.6.6 0 0 1-.6-.6v-22.3c0-.3.3-.6.6-.6H598c.3 0 .6.3.6.6v22.3c0 .3-.3.6-.6.6z" fill="url(#linearGradient8803)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="g8807" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8813)" id="g8809">
-          <g transform="translate(572.7 146)" id="g8815">
-            <path id="path8817" d="M0 0h22.1c.6 0 1.1-.5 1.1-1.1v-12.5c0-.6-.5-1-1-1H0c-.6 0-1.1.4-1.1 1V-1c0 .5.5 1 1.1 1" fill="#393939"/>
-          </g>
-          <g transform="translate(574.4 145.4)" id="g8819">
-            <path id="path8821" d="M0 0h18.8c.4 0 .8-.4.8-.8v-12c0-.4-.4-.8-.8-.8H0c-.4 0-.8.4-.8.8v12c0 .4.4.8.8.8" fill="#98b6a7"/>
-          </g>
-        </g>
-      </g>
-      <g id="g8823" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g id="g8825">
-          <g id="g8831">
-            <g id="g8833">
-              <path id="path8841" d="M569.1 105.6v-6.4c0-.3.3-.6.6-.6h28c.3 0 .6.3.6.6v6.4z" fill="url(#linearGradient8839)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="g8843" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8849)" id="g8845">
-          <g transform="translate(581.7 109.3)" id="g8851">
-            <path id="path8853" d="M0 0l-4.2 4.2v.6h-1a2.5 2.5 0 0 0 0 4.9h1v.5L0 14.5h4l4.2-4.2v-.6h1a2.5 2.5 0 0 0 0-5h-1v-.5L4.2 0z" fill="#6a6a6a"/>
-          </g>
-        </g>
-      </g>
-      <g id="g8855" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g id="g8857">
-          <g id="g8863">
-            <g id="g8865">
-              <path id="path8875" d="M581.7 123.8l-4.2-4.2v-.6h-1a2.5 2.5 0 1 1 0-5v.1h1v-.5l4.2-4.3h4.2l4.2 4.3v.5h1a2.5 2.5 0 0 1-.1 4.9h-1v.7l-4.1 4.1z" fill="url(#linearGradient8873)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="g8877" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8883)" id="g8879">
-          <g transform="translate(576.4 118.4)" id="g8885">
-            <path id="path8887" d="M0 0h3v-3.6H0A1.8 1.8 0 1 0 0 0" fill="#a9aba9"/>
-          </g>
-          <g transform="translate(591 114.8)" id="g8889">
-            <path id="path8891" d="M0 0h-3v3.6h3A1.8 1.8 0 1 0 0 0" fill="#a9aba9"/>
-          </g>
-          <g transform="translate(582 118.4)" id="g8893">
-            <path id="path8895" d="M0 0h3.6v-3.6H-.1V0H0" fill="#393939"/>
-          </g>
-          <g transform="translate(581.9 123.2)" id="g8897">
-            <path id="path8899" d="M0 0h3.8l2.8-2.9L5.5-4v-2H4.3v1c0 .5-.4 1-1 1h-3a.7.7 0 0 1-.8-.8v-1.4h-1V-4l-1.2 1.2z" fill="#a9aba9"/>
-          </g>
-          <g transform="translate(585.6 110)" id="g8901">
-            <path id="path8903" d="M0 0h-3.8l-2.8 2.9 1.2 1.2v2h1V5c0-.5.5-1 1-1h3.2c.5 0 .8.4.8.8v1.4h1.1V4l1.2-1.2z" fill="#a9aba9"/>
-          </g>
-          <path id="path8905" d="M583.3 131.4h.9v-4.1h-.9z" fill="#393939"/>
-          <path id="path8907" d="M583.3 127.4h.9v-1.8h-.9z" fill="#9b9b9b"/>
-        </g>
-      </g>
-      <g id="g8909" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g id="g8911">
-          <g id="g8917">
-            <g id="g8919">
-              <path id="path8927" d="M583.3 125.6h.9v1.8h-.9z" fill="url(#linearGradient8925)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="g8929" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8935)" id="g8931">
-          <path id="path8937" d="M583.3 125.6h.9v-1.8h-.9z" fill="#818181"/>
-          <g transform="translate(571.2 125.6)" id="g8939">
-            <path id="path8941" d="M0 0h7v-1.7L5.3-3.5H.6c-.3 0-.6.3-.6.6z" fill="#a9aba9"/>
-          </g>
-          <path id="path8943" d="M593 104.7h3.6V101H593z" fill="#fff"/>
-        </g>
-      </g>
-      <g id="g8945" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8951)" id="g8947">
-          <g transform="translate(596.4 103.2)" id="g8953">
-            <path id="path8955" d="M0 0v-.3C-.3-.8-.4-1-.8-1l-.3.2a.6.6 0 0 0-.5-.2c-.1 0-.2 0-.3.2C-2-1-2.1-1-2.2-1h-.6a.3.3 0 0 0-.3.2l.3 1h.5l.5.2.2-.1h.4c.1.1.3 0 .4 0V.1l.4.2.3-.1L0 0m-3.4-2.1H.2v3.6h-3.6z" fill="#fe0"/>
-          </g>
-          <g transform="translate(596.5 103)" id="g8957">
-            <path id="path8959" d="M0 0c0-.2 0-.3-.2-.5 0-.2-.3-.4-.6-.4l-.4.1a.7.7 0 0 0-.4-.1H-2a.7.7 0 0 0-.4 0H-3c-.2 0-.3.1-.4.3 0 .4.2.7.4 1 0 .2.2.2.4.2h2.1L0 .5V0m-3.5-2H.1v3.6h-3.6z" fill="#d52715"/>
-          </g>
-          <path id="path8961" d="M596.6 101H593v3.6h3.6zm-3.7 0h3.7v3.7H593z" fill="#171714"/>
-          <g transform="translate(596.5 103.7)" id="g8963">
-            <path id="path8965" d="M0 0v-.2.2m0 0v-.2.1m0 0zm0 0z" fill="#171714"/>
-          </g>
-          <g transform="translate(596 103.2)" id="g8967">
-            <path id="path8969" d="M0 0a3 3 0 0 0-.2-.6h-.1c0 .2 0 .4.2.6H0m.3-.2L0-.6C0-.8-.2-1-.3-1c-.2 0-.3 0-.3.3l.1.4c.1.3.2.5.5.5s.3-.3.3-.5M-1 .1V0l-.3-.5.1-.1.2.2c0 .2 0 .2.2.2s.2-.1.1-.2c0-.3-.2-.5-.5-.5a.3.3 0 0 0-.3.3l.2.5c0 .2.2.4.5.4.2 0 .3 0 .3-.2 0-.1 0-.2-.2-.2h-.1v.2m-1-.5v-.2h.3c0-.2-.2-.3-.3-.3-.2 0-.3.1-.3.2 0 .3 0 .5.2.7 0 .2.2.3.4.3l.2-.1c0-.2 0-.2-.2-.2h-.1v-.1c.1 0 .2 0 .1-.2l-.3-.1m-.6-.2h.2c0-.2-.1-.3-.3-.3 0 0-.2 0-.2.2l.3.9s.1.1.2 0h.1c0-.3-.2-.5-.3-.8M0 .4C-.2.4-.3.4-.4.2l-.4.2-.4-.1-.3.1c-.2 0-.3 0-.4-.2v.1l-.3.1c-.1 0-.2 0-.3-.2-.1-.3-.3-.6-.3-1 0 0 .1-.2.3-.2l.3.1c.1 0 .2-.1.4 0h.6l.5.1.4-.2c.3 0 .5.3.6.6V0a.4.4 0 0 1-.3.4" fill="#171714"/>
-          </g>
-        </g>
-      </g>
-      <g id="g8971" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8977)" id="g8973">
-          <g transform="translate(578 103)" id="g8979">
-            <path id="path8981" d="M0 0v-.3h-.6l-.1-.1v-.4H0v-.4h-1l-.2.2h-.3l-.1-.1v-.6H.7V.5h-2.3v-.6h.5V0H0z" fill="#f2f2f2"/>
-          </g>
-          <g transform="translate(576 103.6)" id="g8983">
-            <path id="path8985" d="M0 0h-.5l-.1-.1-.6-1.3L-2-.1V0h-.5s-.1 0 0-.1l.9-2 .2-.1h.5l1 2L0 0" fill="#f2f2f2"/>
-          </g>
-          <g transform="translate(573 102.8)" id="g8987">
-            <path id="path8989" d="M0 0h.1v-.4L0-.5h-1.5v-.3H0L.1-1v-.4h-2.2v2l.1.2H.1V.4h-1.6V0z" fill="#f2f2f2"/>
-          </g>
-          <g transform="translate(583.5 136.6)" id="g8991">
-            <path id="path8993" d="M0 0l-.8 1.3-1.4-2.9 4-1c-.5.5-.5.7-.9 1.3.5.1 1 .4 1.4.7.8.4 1.5 1 2 1.9a4 4 0 0 1-.6 3.6c-.4 0-.8 0-1.3-.2C3.5 3 3.5 1 0 0" fill="#303030"/>
-          </g>
-          <g transform="translate(583.1 141.4)" id="g8995">
-            <path id="path8997" d="M0 0l.8-1.2 1.4 2.8-3.8 1 .7-1.3-1.3-.7a4.5 4.5 0 0 1-2-2c-.4-1-.2-2.4.5-3.4.4 0 .8 0 1.2.2C-3.3-3-3.3-1 0 0" fill="#303030"/>
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
+<?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="svg9461" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 85.6 95.6" style="enable-background:new 0 0 85.6 95.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#path8773_1_);}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:#F2F2F2;}
+	.st3{fill:url(#path8805_1_);}
+	.st4{clip-path:url(#SVGID_4_);}
+	.st5{fill:#393939;}
+	.st6{fill:#98B6A7;}
+	.st7{fill:url(#path8841_1_);}
+	.st8{clip-path:url(#SVGID_6_);}
+	.st9{fill:#6A6A6A;}
+	.st10{fill:url(#path8875_1_);}
+	.st11{clip-path:url(#SVGID_8_);}
+	.st12{fill:#A9ABA9;}
+	.st13{fill:#9B9B9B;}
+	.st14{fill:url(#path8927_1_);}
+	.st15{clip-path:url(#SVGID_10_);}
+	.st16{fill:#818181;}
+	.st17{fill:#FFFFFF;}
+	.st18{clip-path:url(#SVGID_12_);}
+	.st19{fill:#FFEE00;}
+	.st20{fill:#D52715;}
+	.st21{fill:#171714;}
+	.st22{clip-path:url(#SVGID_14_);}
+	.st23{fill:#303030;}
+</style>
+<g id="layer1" transform="translate(0 -268)">
+	<g id="g10860" transform="translate(-20.8 -2)">
+		<g id="g8755" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g id="g8757">
+				<g id="g8763">
+					<g id="g8765">
+						
+							<linearGradient id="path8773_1_" gradientUnits="userSpaceOnUse" x1="-839.9431" y1="-715.001" x2="-838.9431" y2="-715.001" gradientTransform="matrix(0 -3.2193 3.3335 0 2933.3757 -2723.9758)">
+							<stop  offset="0" style="stop-color:#F2F2F2"/>
+							<stop  offset="1" style="stop-color:#7A7A7A"/>
+						</linearGradient>
+						<path id="path8773" class="st0" d="M490.2,93.1c-1.3,0-2.3-1-2.3-2.3V-24.8c0-1.1,0.8-2.3,2.3-2.3h119.9
+							c1.1,0,1.9,1.1,1.9,2.3V90.9c0,1.1-0.8,2.3-1.9,2.3H490.2z"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8775" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_1_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
+				</defs>
+				<clipPath id="SVGID_2_">
+					<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8777" class="st1">
+					<g id="g8783" transform="translate(569.7 111.2)">
+						<path id="path8785" class="st2" d="M-72.7-125.8H33.2c1.1,0,2.3-1.1,2.3-2.3v-43.1c0-1.5-1.1-2.3-2.3-2.3H-72.7
+							c-1.1,0-2.3,0.8-2.3,2.3v43.1C-75-127-73.8-125.8-72.7-125.8"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8787" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g id="g8789">
+				<g id="g8795">
+					<g id="g8797">
+						
+							<linearGradient id="path8805_1_" gradientUnits="userSpaceOnUse" x1="106.3515" y1="93.6155" x2="107.3515" y2="93.6155" gradientTransform="matrix(0 -0.7528 0.9518 0 460.8399 126.682)">
+							<stop  offset="0" style="stop-color:#A9ABA9"/>
+							<stop  offset="1" style="stop-color:#818181"/>
+						</linearGradient>
+						<path id="path8805" class="st3" d="M495.9,128.7c-1.3,0-2.3-1-2.3-2.3V42.1c0-1.1,1.1-2.3,2.3-2.3H604c1.1,0,2.3,1.1,2.3,2.3
+							v84.3c0,1.1-1.1,2.3-2.3,2.3H495.9z"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8807" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_3_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
+				</defs>
+				<clipPath id="SVGID_4_">
+					<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8809" class="st4">
+					<g id="g8815" transform="translate(572.7 146)">
+						<path id="path8817" class="st5" d="M-64.4-29h83.6c2.3,0,4.2-1.9,4.2-4.2v-47.3c0-2.3-1.9-3.8-3.8-3.8h-83.9
+							c-2.3,0-4.2,1.5-4.2,3.8v47.6C-68.5-30.9-66.6-29-64.4-29"/>
+					</g>
+					<g id="g8819" transform="translate(574.4 145.4)">
+						<path id="path8821" class="st6" d="M-59.6-30.7h71.1c1.5,0,3-1.5,3-3v-45.4c0-1.5-1.5-3-3-3h-71.1c-1.5,0-3,1.5-3,3v45.4
+							C-62.7-32.2-61.1-30.7-59.6-30.7"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8823" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g id="g8825">
+				<g id="g8831">
+					<g id="g8833">
+						
+							<linearGradient id="path8841_1_" gradientUnits="userSpaceOnUse" x1="-608.1827" y1="-894.7903" x2="-607.1827" y2="-894.7903" gradientTransform="matrix(0 -1.7861 7.5145 0 7273.7993 -1143.2354)">
+							<stop  offset="0" style="stop-color:#A9ABA9"/>
+							<stop  offset="1" style="stop-color:#535453"/>
+						</linearGradient>
+						<path id="path8841" class="st7" d="M494.7-35.8V-60c0-1.1,1.1-2.3,2.3-2.3h105.9c1.1,0,2.3,1.1,2.3,2.3v24.2H494.7z"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8843" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_5_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
+				</defs>
+				<clipPath id="SVGID_6_">
+					<use xlink:href="#SVGID_5_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8845" class="st8">
+					<g id="g8851" transform="translate(581.7 109.3)">
+						<path id="path8853" class="st9" d="M-39.3-131.1l-15.9,15.9v2.3H-59c-5.1,1-8.4,6-7.4,11.1c0.8,3.7,3.7,6.6,7.4,7.4h3.8v1.9
+							l15.9,16.3h15.1l15.9-15.9v-2.3h3.8c5.2,0,9.5-4.2,9.5-9.5c0-5.2-4.2-9.5-9.5-9.5h-3.8v-1.9l-15.1-15.9H-39.3z"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8855" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g id="g8857">
+				<g id="g8863">
+					<g id="g8865">
+						
+							<linearGradient id="path8875_1_" gradientUnits="userSpaceOnUse" x1="-1182.8013" y1="-1084.7936" x2="-1181.8013" y2="-1084.7936" gradientTransform="matrix(0 17.201 -23.0721 0 -24479.207 20326.2344)">
+							<stop  offset="0" style="stop-color:#6A6A6A"/>
+							<stop  offset="0.5" style="stop-color:#48E400"/>
+							<stop  offset="1" style="stop-color:#6A6A6A"/>
+						</linearGradient>
+						<path id="path8875" class="st10" d="M542.4,33l-15.9-15.9v-2.3h-3.8c-5.2,0-9.5-4.2-9.5-9.5s4.2-9.5,9.5-9.5v0.4h3.8v-1.9
+							l15.9-16.3h15.9l15.9,16.3v1.9h3.8c5.1,1.1,8.3,6.2,7.2,11.3c-0.8,3.7-3.8,6.6-7.5,7.2h-3.8v2.6L558.3,33H542.4z"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8877" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_7_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
+				</defs>
+				<clipPath id="SVGID_8_">
+					<use xlink:href="#SVGID_7_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8879" class="st11">
+					<g id="g8885" transform="translate(576.4 118.4)">
+						<path id="path8887" class="st12" d="M-54.1-105.8h11.3v-13.6h-11.3c-3.8,0-6.8,3-6.8,6.8C-60.9-108.9-57.8-105.8-54.1-105.8"
+							/>
+					</g>
+					<g id="g8889" transform="translate(591 114.8)">
+						<path id="path8891" class="st12" d="M-13.5-115.8h-11.3v13.6h11.3c3.8,0,6.8-3,6.8-6.8C-6.6-112.8-9.7-115.8-13.5-115.8"/>
+					</g>
+					<g id="g8893" transform="translate(582 118.4)">
+						<path id="path8895" class="st5" d="M-38.5-105.8h13.6v-13.6h-14v13.6H-38.5"/>
+					</g>
+					<g id="g8897" transform="translate(581.9 123.2)">
+						<path id="path8899" class="st12" d="M-38.8-92.5h14.4l10.6-11l-4.2-4.2v-7.6h-4.5v3.8c0,1.9-1.5,3.8-3.8,3.8h-11.3
+							c-1.4,0.2-2.8-0.8-3-2.2c0-0.3,0-0.5,0-0.8v-5.3h-3.8v8.3L-49-103L-38.8-92.5z"/>
+					</g>
+					<g id="g8901" transform="translate(585.6 110)">
+						<path id="path8903" class="st12" d="M-28.5-129.2h-14.4l-10.6,11l4.5,4.5v7.6h3.8v-4.2c0-1.9,1.9-3.8,3.8-3.8h12.1
+							c1.9,0,3,1.5,3,3v5.3h4.2v-8.3l4.5-4.5L-28.5-129.2z"/>
+					</g>
+					<path id="path8905" class="st5" d="M548.4,61.7h3.4V46.2h-3.4V61.7z"/>
+					<path id="path8907" class="st13" d="M548.4,46.6h3.4v-6.8h-3.4V46.6z"/>
+				</g>
+			</g>
+		</g>
+		<g id="g8909" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g id="g8911">
+				<g id="g8917">
+					<g id="g8919">
+						
+							<linearGradient id="path8927_1_" gradientUnits="userSpaceOnUse" x1="-2168.2661" y1="-3506.5073" x2="-2167.2661" y2="-3506.5073" gradientTransform="matrix(0 0.8944 -0.4363 0 -979.787 1983.6796)">
+							<stop  offset="0" style="stop-color:#757575"/>
+							<stop  offset="1" style="stop-color:#393939"/>
+						</linearGradient>
+						<path id="path8927" class="st14" d="M548.4,39.8h3.4v6.8h-3.4V39.8z"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8929" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_9_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
+				</defs>
+				<clipPath id="SVGID_10_">
+					<use xlink:href="#SVGID_9_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8931" class="st15">
+					<path id="path8937" class="st16" d="M548.4,39.8h3.4V33h-3.4V39.8z"/>
+					<g id="g8939" transform="translate(571.2 125.6)">
+						<path id="path8941" class="st12" d="M-68.5-85.8h26.5v-6.4l-6.4-6.8h-17.8c-1.1,0-2.3,1.1-2.3,2.3V-85.8z"/>
+					</g>
+					<path id="path8943" class="st17" d="M585.1-39.2h13.6v-14h-13.6V-39.2z"/>
+				</g>
+			</g>
+		</g>
+		<g id="g8945" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_11_" x="589.5" y="-48.7" width="4.8" height="4.9"/>
+				</defs>
+				<clipPath id="SVGID_12_">
+					<use xlink:href="#SVGID_11_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8947" class="st18">
+					<g id="g8953" transform="translate(596.4 103.2)">
+						<path id="path8955" class="st19" d="M1.6-148.1v-1.1c-1.1-1.9-1.5-2.6-3-2.6l-1.1,0.8c-0.5-0.5-1.2-0.8-1.9-0.8
+							c-0.4,0-0.8,0-1.1,0.8c-0.4-0.8-0.8-0.8-1.1-0.8H-9c-0.5,0-1,0.3-1.1,0.8l1.1,3.8h1.9l1.9,0.8l0.8-0.4H-3c0.4,0.4,1.1,0,1.5,0
+							v-0.8l1.5,0.8l1.1-0.4L1.6-148.1 M-11.3-156H2.3v13.6h-13.6L-11.3-156z"/>
+					</g>
+					<g id="g8957" transform="translate(596.5 103)">
+						<path id="path8959" class="st20" d="M1.8-148.6c0-0.8,0-1.1-0.8-1.9c0-0.8-1.1-1.5-2.3-1.5l-1.5,0.4c-0.5-0.3-1-0.4-1.5-0.4
+							h-1.5c-0.5-0.1-1-0.1-1.5,0h-2.3c-0.8,0-1.1,0.4-1.5,1.1c0,1.5,0.8,2.6,1.5,3.8c0,0.8,0.8,0.8,1.5,0.8H0l1.9-0.4V-148.6
+							 M-11.4-156.2H2.2v13.6h-13.6V-156.2z"/>
+					</g>
+					<path id="path8961" class="st21" d="M598.7-53.2h-13.6v13.6h13.6V-53.2z M584.7-53.2h14v14h-13.6L584.7-53.2z"/>
+					<g id="g8963" transform="translate(596.5 103.7)">
+						<path id="path8965" class="st21" d="M1.8-146.7v-0.8V-146.7 M1.8-146.7v-0.8v0.4V-146.7z"/>
+					</g>
+					<g id="g8967" transform="translate(596 103.2)">
+						<path id="path8969" class="st21" d="M0.5-148.1c-0.2-0.8-0.4-1.5-0.8-2.3h-0.4c0,0.8,0,1.5,0.8,2.3H0.5 M1.6-148.8l-1.1-1.5
+							c0-0.8-0.8-1.5-1.1-1.5c-0.8,0-1.1,0-1.1,1.1l0.4,1.5c0.4,1.1,0.8,1.9,1.9,1.9s1.1-1.1,1.1-1.9 M-3.3-147.7v-0.4l-1.1-1.9
+							l0.4-0.4l0.8,0.8c0,0.8,0,0.8,0.8,0.8s0.8-0.4,0.4-0.8c0-1.1-0.8-1.9-1.9-1.9c-0.6,0-1.1,0.5-1.1,1.1l0,0l0.8,1.9
+							c0,0.8,0.8,1.5,1.9,1.5c0.8,0,1.1,0,1.1-0.8c0-0.4,0-0.8-0.8-0.8h-0.4v0.8 M-6.4-149.6v-0.8h1.1c0-0.8-0.8-1.1-1.1-1.1
+							c-0.8,0-1.1,0.4-1.1,0.8c0,1.1,0,1.9,0.8,2.6c0,0.8,0.8,1.1,1.5,1.1l0.8-0.4c0-0.8,0-0.8-0.8-0.8h-0.4v-0.4
+							c0.4,0,0.8,0,0.4-0.8L-6.4-149.6 M-8.6-150.4h0.8c0-0.8-0.4-1.1-1.1-1.1c0,0-0.8,0-0.8,0.8l1.1,3.4c0,0,0.4,0.4,0.8,0h0.4
+							C-7.5-148.5-8.2-149.2-8.6-150.4 M0.5-146.6c-0.8,0-1.1,0-1.5-0.8l-1.5,0.8l-1.5-0.4l-1.1,0.4c-0.8,0-1.1,0-1.5-0.8v0.4
+							l-1.1,0.4c-0.4,0-0.8,0-1.1-0.8c-0.4-1.1-1.1-2.3-1.1-3.8c0,0,0.4-0.8,1.1-0.8l1.1,0.4c0.4,0,0.8-0.4,1.5,0h2.3l1.9,0.4
+							l1.5-0.8c1.1,0,1.9,1.1,2.3,2.3v1.5C1.6-147.4,1.1-146.8,0.5-146.6"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8971" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_13_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
+				</defs>
+				<clipPath id="SVGID_14_">
+					<use xlink:href="#SVGID_13_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8973" class="st22">
+					<g id="g8979" transform="translate(578 103)">
+						<path id="path8981" class="st2" d="M-49.6-148.6v-1.1h-2.3l-0.4-0.4v-1.5h2.6v-1.5h-3.8l-0.8,0.8h-1.1l-0.4-0.4v-2.3h8.7v8.3
+							h-8.7v-2.3h1.9v0.4H-49.6z"/>
+					</g>
+					<g id="g8983" transform="translate(576 103.6)">
+						<path id="path8985" class="st2" d="M-55.2-147h-1.9l-0.4-0.4l-2.3-4.9l-3,4.9v0.4h-1.9c0,0-0.4,0,0-0.4l3.4-7.6l0.8-0.4h1.9
+							l3.8,7.6L-55.2-147"/>
+					</g>
+					<g id="g8987" transform="translate(573 102.8)">
+						<path id="path8989" class="st2" d="M-63.5-149.2h0.4v-1.5l-0.4-0.4h-5.7v-1.1h5.7l0.4-0.8v-1.5h-8.3v7.6l0.4,0.8h7.9v-1.5
+							h-6.1v-1.5H-63.5z"/>
+					</g>
+					<g id="g8991" transform="translate(583.5 136.6)">
+						<path id="path8993" class="st23" d="M-34.3-55.2l-3,4.9l-5.3-11l15.1-3.8c-1.9,1.9-1.9,2.6-3.4,4.9c1.9,0.4,3.8,1.5,5.3,2.6
+							c3,1.5,5.7,3.8,7.6,7.2c1.5,4.6,0.6,9.7-2.3,13.6c-1.5,0-3,0-4.9-0.8C-21.1-43.8-21.1-51.4-34.3-55.2"/>
+					</g>
+					<g id="g8995" transform="translate(583.1 141.4)">
+						<path id="path8997" class="st23" d="M-35.4-41.8l3-4.5l5.3,10.6L-41.5-32l2.6-4.9l-4.9-2.6c-3.3-1.6-5.9-4.3-7.6-7.6
+							c-1.5-3.8-0.8-9.1,1.9-12.9c1.5,0,3,0,4.5,0.8C-47.9-53.2-47.9-45.6-35.4-41.8"/>
+					</g>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
 </svg>

docs/static/icons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#33adcb</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

docs/static/icons/safari-pinned-tab.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="326.000000pt" height="326.000000pt" viewBox="0 0 326.000000 326.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,326.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1535 3046 c-5 -2 -35 -9 -65 -16 -30 -7 -69 -23 -85 -36 -38 -30
+-29 -49 37 -81 131 -64 395 -46 468 32 l22 23 -39 26 c-53 35 -134 53 -239 54
+-49 1 -93 -1 -99 -2z"/>
+<path d="M1122 2799 l-64 -30 56 -41 c74 -54 87 -92 93 -269 5 -129 4 -139
+-20 -190 -97 -213 -600 -265 -788 -82 -38 37 -49 55 -58 101 -6 30 -11 75 -11
+98 0 24 -4 45 -9 48 -8 5 -228 -88 -243 -102 -3 -4 78 -58 180 -121 295 -181
+588 -360 987 -606 204 -125 375 -228 381 -228 6 0 154 87 330 193 175 107 330
+200 344 208 14 7 165 98 335 202 171 103 365 221 432 262 67 40 119 76 115 79
+-18 18 -236 109 -242 102 -4 -4 -10 -37 -13 -73 -10 -105 -22 -134 -79 -184
+-29 -25 -57 -46 -64 -46 -7 0 -33 -9 -58 -20 -39 -16 -128 -31 -201 -34 -62
+-2 -186 18 -248 41 -106 38 -171 87 -204 152 -24 48 -27 63 -24 145 6 224 14
+253 93 316 l57 45 -71 33 c-39 17 -74 32 -78 32 -5 0 -8 -19 -7 -43 2 -78 -21
+-134 -72 -177 -153 -132 -500 -137 -674 -9 -39 28 -50 44 -65 93 -11 33 -19
+77 -18 98 2 47 -6 47 -92 7z m729 -454 c163 -53 253 -149 252 -270 -1 -268
+-14 -325 -95 -396 -38 -33 -77 -55 -138 -78 -74 -26 -203 -49 -250 -44 -8 1
+-46 5 -85 8 -105 10 -220 56 -288 117 -74 66 -87 106 -92 293 -4 128 -2 145
+18 195 29 69 110 135 212 170 92 31 138 37 271 35 90 -2 127 -8 195 -30z"/>
+<path d="M1619 2246 c-2 -2 -33 -7 -69 -10 -91 -10 -176 -43 -222 -87 -46 -43
+-45 -64 3 -115 27 -28 112 -66 179 -79 36 -8 188 -8 230 -1 120 20 220 82 220
+137 0 65 -118 130 -260 145 -36 3 -68 8 -71 10 -3 2 -8 2 -10 0z"/>
+<path d="M1297 1873 c-3 -2 -1 -18 5 -35 68 -194 612 -185 653 11 7 31 5 33
+-11 26 -193 -80 -377 -88 -561 -25 -45 16 -84 26 -86 23z"/>
+<path d="M1350 2775 c0 -68 96 -119 240 -128 144 -9 288 34 309 94 13 39 -1
+45 -59 24 -112 -40 -311 -38 -432 4 -47 16 -58 17 -58 6z"/>
+<path d="M680 2674 c-99 -19 -210 -72 -223 -108 -10 -25 31 -64 91 -87 75 -28
+256 -35 335 -13 107 32 177 77 177 115 0 22 -42 53 -101 74 -44 16 -229 28
+-279 19z"/>
+<path d="M2448 2675 c-2 -2 -30 -5 -63 -8 -99 -8 -184 -54 -185 -99 0 -26 74
+-75 149 -99 96 -30 262 -31 352 0 66 21 90 39 102 73 16 46 -149 121 -285 131
+-37 2 -69 3 -70 2z"/>
+<path d="M1050 2380 c-34 -19 -149 -52 -200 -58 -121 -14 -268 -4 -332 23 -48
+19 -48 19 -48 -9 0 -35 37 -71 101 -97 45 -18 74 -22 174 -22 101 -1 130 3
+185 23 78 28 125 61 138 99 12 33 3 53 -18 41z"/>
+<path d="M2184 2363 c2 -16 7 -36 11 -45 13 -32 112 -84 200 -104 11 -3 65 -5
+120 -6 154 -1 253 41 271 116 6 26 5 28 -12 22 -87 -34 -252 -48 -364 -32 -51
+8 -161 42 -202 63 -27 13 -28 13 -24 -14z"/>
+<path d="M11 2146 c4 -31 10 -88 14 -128 4 -40 9 -80 10 -89 2 -9 6 -40 10
+-70 6 -55 32 -266 40 -329 5 -36 11 -93 20 -177 3 -27 8 -65 11 -85 5 -35 28
+-53 716 -553 391 -284 712 -514 715 -512 2 3 6 237 7 521 2 369 0 520 -8 530
+-9 11 -465 295 -576 358 -19 11 -47 29 -62 39 -14 11 -31 19 -37 19 -6 0 -11
+4 -11 8 0 5 -12 14 -27 21 -14 7 -49 27 -77 45 -52 34 -467 288 -515 316 -14
+8 -68 41 -120 73 -126 79 -119 78 -110 13z"/>
+<path d="M2816 1930 c-236 -143 -431 -260 -433 -260 -3 0 -17 -8 -31 -19 -15
+-10 -166 -103 -337 -206 -170 -103 -313 -191 -316 -196 -7 -13 -12 -1049 -4
+-1049 4 0 382 267 500 354 11 8 135 96 275 196 140 100 262 186 270 193 8 7
+94 68 190 136 96 68 180 128 187 135 10 9 28 108 38 214 2 18 6 45 9 60 3 15
+8 52 11 82 4 30 11 87 16 125 5 39 12 88 15 110 2 22 7 56 9 76 3 20 8 56 10
+80 3 24 7 60 10 79 10 67 17 150 14 150 -2 0 -197 -117 -433 -260z"/>
+</g>
+</svg>

docs/static/icons/site.webmanifest

@@ -0,0 +1,21 @@
+{
+    "name": "MakeCode for EV3",
+    "short_name": "MakeCode for EV3",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ff0000",
+    "background_color": "#ff0000",
+    "start_url": "makecode.mindstorms.com",
+    "display": "standalone",
+    "orientation": "portrait"
+}

docs/troubleshoot.md

@@ -2,6 +2,33 @@
 
 If your're having trouble getting your code onto the EV3 Brick, try these steps to see if you can fix the problem.
 
+## Check your **@drivename@** firmware
+
+MakeCode requires the firmware version **1.10E** or up. 
+
+### ~hint
+
+Firmware is the software that runs all the basic operations on your brick. Your programs run with the firmware to make the @boardname@ do all the things you want it to do. Your brick comes with the firmware already installed. You could have a brick with an older version of firmware that needs updating in order for it to work properly with MakeCode.
+
+### ~
+
+To check the version on your brick,
+
+* go to the **Settings** menu (wrench symbol)
+* select to **Brick Info**
+
+![Brick Info menu](/static/setup/brickinfo.jpg)
+
+* check the version under **Brick FW:**
+
+![Brick Firmware version](/static/setup/brickfw.jpg)
+
+If you cannot find the **brick info** or the version is less than **1.10E**, **you need to upgrade your firmware**.
+
+**To update your firmware, use the [EV3 manager](https://ev3manager.education.lego.com/)** or follow these instructions: [Updating and Resetting Firmware](https://www.lego.com/en-us/service/help/products/themes-sets/mindstorms/updating-and-resetting-lego-mindstorms-ev3-firmware-408100000007884).
+
+If your EV3 Brick isn't connected to the internet through a computer, or with some other mobile device, you'll need to do a manual update of the firmware. Read the instructions in the **Manual Firmware Update** section of the [Firmware Update](https://education.lego.com/en-us/support/mindstorms-ev3/firmware-update) support page.
+
 ## Can I see the **@drivename@** drive on my computer?
 
 When your EV3 Brick is connected to your computer, you should see a new drive called **@drivename@** attached.
@@ -31,24 +58,6 @@ If you think your USB connection is good and you still can't see your **@drivena
 
 You can also watch this [How to Reset](https://www.lego.com/en-us/videos/themes/mindstorms/how-to-reset-the-ev3-p-brick-fbcbdbed398e4e12a7ce30fa662c54be) video to see how to do a reset.
 
-If you try a reset and the **@drivename@** drive still doesn't appear, or you attempted a download and it didn't copy to the brick, you might need a firmware update.
-
-## What's a firmware update and how do I get one?
-
-Firmware is the software that runs all the basic operations on your brick. Your programs run with the firmware to make the @boardname@ do all the things you want it to do. Your brick comes with the firmware already installed. You could have a brick with an older version of firmware that needs updating in order for it to work properly with MakeCode.
-
-To update your firmware, follow these instructions: [Updating and Resetting Firmware](https://www.lego.com/en-us/service/help/products/themes-sets/mindstorms/updating-and-resetting-lego-mindstorms-ev3-firmware-408100000007884).
-
-### ~hint
-
-**Offline firmware update**
-
-If your EV3 Brick isn't connected to the internet through a computer, or with some other mobile device, you'll need to do a manual update of the firmware. You need to have the firmware file already downloaded and available on the computer connected to the brick.
-
-To do this, read the instructions in the **Manual Firmware Update** section of the [Firmware Update](https://education.lego.com/en-us/support/mindstorms-ev3/firmware-update) support page.
-
-### ~
-
 ## LEGO Support
 
 If you've checked everything here and can't get the **@drivename@** drive to show up on your computer, you can't make the brick reset, or your program just won't download, then try the [Troubleshooting Walkthrough](https://www.lego.com/en-us/service/help/products/themes-sets/mindstorms/lego-mindstorms-ev3-troubleshooting-walkthrough-408100000009798).

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. 
 
@@ -90,7 +90,7 @@ forever(function () {
 })
 ```
 
-# Step 7
+## Step 7
 
 In the second ``||motors:tank large motors||`` block in the ``||logic:else||`` clause, change the speed values of the motors from ``50%``, ``50%`` to ``15%``, ``5%``.  This slows down the robot, and steers it to the right (because the **B** motor is driving faster than the **C** motor).
 
@@ -104,8 +104,17 @@ forever(function () {
 })
 ```
 
-## Step 8
+## Step 8 @fullscreen
 
-Now, plug your EV3 Brick into the computer with the USB cable, and click the **Download** button at the bottom of your screen. Follow the directions to save your program to the brick.
+Use the EV3 simulator to try out your code. 
+
+![Brick with color sensors tracking a yellow line](/static/tutorials/line-following/line-following.gif)
+
+Move the slider under the Color Sensor to change the reflected light and check that motors 
+are moving as you would expect!
+
+## Step 9
+
+Plug your EV3 Brick into the computer with the USB cable, and click the **Download** button at the bottom of your screen. Follow the directions to save your program to the brick.
 
 Attach a Color Sensor to Port 3 of your brick, and attach your brick to a driving base with large motors attached to Ports B and C. See the instructions for building a _Driving Base with Color Sensor Down_. Test your program by positioning your robot to the right of a dark, thick line and then let it drive! 

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@.
  
@@ -10,7 +10,7 @@ Create a custom animation for your @boardname@.
 
 Open the ``||brick:Brick||`` Toolbox drawer. Drag out a ``||brick:show string||`` block onto the Workspace, and drop it into the ``||loops:on Start||`` block. You should hear and see the block click into place.
 
-```block
+```blocks
 brick.showString("Hello world", 1) 
 ```
 
@@ -46,6 +46,12 @@ brick.showString("Press my button!", 1)
 
 ## Step 5
 
+Try out your code in the EV3 simulator!
+
+Press the ``Enter`` button and check that the image shows up as you expected.
+
+## Step 6
+
 Open the ``||brick:Brick||`` Toolbox drawer. Drag out a ``||brick:set status light||`` block onto the Workspace, and drop it into the ``||brick:on button||`` block after the ``||brick:show image||`` block.
 
 ```blocks
@@ -56,6 +62,6 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 brick.showString("Press my button!", 1) 
 ```
 
-## Step 6
+## Step 7
 
-Now, plug your EV3 Brick into the computer with the USB cable, and click the **Download** button at the bottom of your screen. Follow the directions to save your program to the brick.
+Plug your EV3 Brick into the computer with the USB cable, and click the **Download** button at the bottom of your screen. Follow the directions to save your program to the brick.

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,10 +1,10 @@
 # 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.
 
-![Simualtor with brick and ultrasonic sensor](/static/tutorials/object-near/ultrasonic-near.gif)
+![Simulator with brick and ultrasonic sensor](/static/tutorials/object-near/ultrasonic-near.gif)
 
 ## Step 1
 

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@.
 
@@ -10,7 +10,7 @@ Create different animal effects with your @boardname@.
 
 Open the ``||brick:Brick||`` Toolbox drawer. Drag out a ``||brick:show string||`` block from the **Screen** section onto the Workspace, and drop it into the ``||loops:on start||`` block. You should hear and see the block click into place.
 
-```block
+```blocks
 brick.showString("Hello world", 1)
 ```
 

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 () {

editor/extension.ts

@@ -25,31 +25,51 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
             const saveAs = pxt.BrowserUtils.hasSaveAs();
 
             const htmlBody = `
-            <div class="ui two column grid stackable">
-                <div class="column">
-                    <div class="ui">
-                        <div class="image">
-                            <img class="ui medium rounded image" src="./static/download/connect.svg" style="height:109px;width:261px;margin-bottom:1rem;">
-                        </div>
-                        <div class="content">
-                            <div class="description">
-                                <span class="ui yellow circular label">1</span>
-                                <strong>${lf("Connect EV3 to computer with USB cable")}</strong>
-                                <br/>
-                                ${lf("Use the miniUSB port on top of EV3 brick")}
-                            </div>
-                        </div>
+            <div class="ui grid stackable">
+                <div class="column five wide" style="background-color: #E2E2E2;">
+                    <div class="ui header">${lf("First time here?")}</div>
+                    <strong style="font-size:small">${lf("You must have version 1.10 or above of the firmware")}</strong>
+                    <div style="justify-content: center;display: flex;padding: 1rem;">
+                        <img class="ui image" src="./static/download/firmware.png" style="height:100px;" />
                     </div>
+                    <a href="/troubleshoot" target="_blank">${lf("Check your firmware version here and update if needed")}</a>
                 </div>
-                <div class="column">
-                    <div class="ui">
-                        <div class="image">
-                            <img class="ui medium rounded image" src="./static/download/transfer.svg" style="height:109px;width:261px;margin-bottom:1rem;">
-                        </div>
-                        <div class="content">
-                            <div class="description">
-                                <span class="ui blue circular label">2</span>
-                                ${lf("Locate the downloaded .uf2 file and drag it to the EV3 drive")}
+                <div class="column eleven wide">
+                    <div class="ui grid">
+                        <div class="row">
+                            <div class="column">
+                                <div class="ui two column grid padded">
+                                    <div class="column">
+                                        <div class="ui">
+                                            <div class="image">
+                                                <img class="ui medium rounded image" src="./static/download/connect.svg" style="height:109px;width:261px;margin-bottom:1rem;" />
+                                            </div>
+                                            <div class="content">
+                                                <div class="description">
+                                                    <span class="ui yellow circular label">1</span>
+                                                    <strong>${lf("Connect the EV3 to your computer with a USB cable")}</strong>
+                                                    <br />
+                                                    <span style="font-size:small">${lf("Use the miniUSB port on the top of the EV3 brick")}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="column">
+                                        <div class="ui">
+                                            <div class="image">
+                                                <img class="ui medium rounded image" src="./static/download/transfer.svg" style="height:109px;width:261px;margin-bottom:1rem;" />
+                                            </div>
+                                            <div class="content">
+                                                <div class="description">
+                                                    <span class="ui yellow circular label">2</span>
+                                                    <strong>${lf("Move the .uf2 file to the EV3 brick")}</strong>
+                                                    <br />
+                                                    <span style="font-size:small">${lf("Locate the downloaded .uf2 file and drag it to the EV3 USB drive")}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -63,20 +83,17 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
                 hideCancel: true,
                 hideAgree: false,
                 agreeLbl: lf("I got it"),
-                buttons: [{
-                    label: lf("I don't see the EV3 drive"),
-                    url: '/troubleshoot',
-                    class: 'troubleshoot left floated'
-                }, downloadAgain ? {
+                className: 'downloaddialog',
+                buttons: [downloadAgain ? {
                     label: fn,
                     icon: "download",
-                    class: "lightgrey focused",
+                    className: "lightgrey focused",
                     url,
                     fileName: fn
                 } : undefined, docUrl ? {
                     label: lf("Help"),
                     icon: "help",
-                    class: "lightgrey",
+                    className: "lightgrey",
                     url: docUrl
                 } : undefined]
                 //timeout: 20000

fieldeditors/field_music.ts

@@ -10,6 +10,7 @@ export interface FieldMusicOptions extends pxtblockly.FieldImagesOptions {
 declare const pxtTargetBundle: any;
 
 let soundCache: any;
+let soundIconCache: any;
 
 export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldCustom {
     public isFieldCustom_ = true;
@@ -18,8 +19,6 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
 
     private categoriesCache_: string[];
 
-    private static MUSIC_DATA_URI = `data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIzIDIzIj48cGF0aCBpZD0ibWVudV9pY25fbXVzaWMiIGQ9Ik0xMy45IDEyLjhjMS43LjMgMy4zIDEuMiA0LjMgMi42aDFzMS41LTQuNC0xLjgtNy41LTkuNy0zLjEtMTIuMSAwYy0xLjcgMi4xLTIuMyA1LTEuNCA3LjVoLjhzMS43LTIuNSA0LjQtMi42QzkgMTcuMiA5IDIxIDkgMjFjLTEuOS0uNC0zLjUtMS42LTQuNC0zLjQtMi0uNC0zLjYtMi4yLTMuNi00LjRDMSA2LjcgNS45IDMgMTEuNSAzczEwLjggNC4zIDEwLjQgMTAuMmMtLjIgNC4xLTMuNiA0LjQtMy42IDQuNC0uOCAxLjgtMi40IDMuMS00LjMgMy40LS4xLTQuNS0uMS04LjItLjEtOC4yeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==`;
-
     constructor(text: string, options: FieldMusicOptions, validator?: Function) {
         super(text, { sort: true, data: options.data }, validator);
 
@@ -33,6 +32,9 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
         if (!pxt.BrowserUtils.isIE() && !soundCache) {
             soundCache = JSON.parse(pxtTargetBundle.bundledpkgs['music']['sounds.jres']);
         }
+        if (!soundIconCache) {
+            soundIconCache = JSON.parse(pxtTargetBundle.bundledpkgs['music']['icons.jres']);
+        }
     }
 
     /**
@@ -214,7 +216,7 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
                 contentDiv.removeAttribute('aria-activedescendant');
             });
             let buttonImg = document.createElement('img');
-            buttonImg.src = FieldMusic.MUSIC_DATA_URI;
+            buttonImg.src = this.getSoundIcon(category);
             //buttonImg.alt = icon.alt;
             // Upon click/touch, we will be able to get the clicked element as e.target
             // Store a data attribute on all possible click targets so we can match it to the icon.
@@ -308,4 +310,11 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
     private stopSounds() {
         pxsim.AudioContextManager.stop();
     }
+
+    private getSoundIcon(category: string) {
+        if (soundIconCache && soundIconCache[category]) {
+            return soundIconCache[category].icon;
+        }
+        return undefined;
+    }
 }

jenkins.groovy

@@ -24,6 +24,7 @@ def projectName = "pxt-ev3"
                 credentialsBinding {
                     string("PXT_ACCESS_TOKEN", "pxt_access_token")
                     string("PXT_RELEASE_REPO", "pxt_release_repo_ev3")
+                    string("CROWDIN_KEY", "pxt_crowdin_key")
                 }
             }
         }

jenkins.sh

@@ -13,7 +13,7 @@ echo isPR: $1
 
 originRegex="^origin/.*"
 branchRegex="^origin/\K.*(?=$)"
-releaseBranchRegex="^(master|v\d+)$"
+releaseBranchRegex="^(master|stable|v\d+)$"
 
 if [[ "$GIT_BRANCH" =~ $originRegex ]]; then
     branchName=$(echo ${GIT_BRANCH} | grep -oP $branchRegex)

legoresources/musicicons/animals.svg

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="70mm"
+   height="70mm"
+   viewBox="0 0 248.0315 248.0315"
+   id="svg4488"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="animals.svg"
+   inkscape:export-filename="/Users/sammysam/Work/pxt-ev3/libs/music/jres/icons/animals-icon.png"
+   inkscape:export-xdpi="34.830002"
+   inkscape:export-ydpi="34.830002">
+  <defs
+     id="defs4490">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath98">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path100"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath122">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path124"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#2718ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="-376.32914"
+     inkscape:cy="-19.033229"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1676"
+     inkscape:window-height="1005"
+     inkscape:window-x="4"
+     inkscape:window-y="1"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4493">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-277.04342,-265.29748)">
+    <g
+       transform="matrix(1.25,0,0,-1.25,-2100.8925,2887.6972)"
+       id="g118">
+      <g
+         id="g120"
+         clip-path="url(#clipPath122)">
+        <g
+           id="g126"
+           transform="translate(2017.1379,1954.1029)">
+          <path
+             d="m 0,0 c 12.851,-2.399 13.107,-2.587 12.519,-8.787 -0.943,-0.046 -1.918,-0.132 -2.893,-0.136 -14.5,-0.058 -29,-0.155 -43.5,-0.089 -1.649,0.007 -3.49,0.628 -4.9,1.512 -2.893,1.813 -5.926,2.095 -8.902,0.969 -7.461,-2.823 -14.82,-5.916 -22.211,-8.923 -0.548,-0.223 -1.034,-0.604 -1.533,-0.935 -5.548,-3.686 -5.96,-6.674 -1.609,-11.69 1.225,-1.413 2.468,-2.811 4.029,-4.588 -1.245,-0.328 -1.964,-0.669 -2.691,-0.686 -8.496,-0.191 -15.669,8.671 -13.199,16.707 0.705,2.294 2.514,4.578 4.43,6.087 2.3,1.813 5.269,2.767 7.924,4.139 4.427,2.286 9.051,4.275 13.203,6.986 7.84,5.118 12.762,12.245 14.707,21.674 1.404,6.806 3.486,13.583 6.171,19.994 7.904,18.87 22.119,30.122 42.379,33.585 3.248,0.555 6.498,1.124 9.714,1.839 4.047,0.899 5.915,3.286 5.274,7.363 -0.585,3.723 -1.815,7.339 -2.653,11.027 -1.013,4.461 -2.337,8.911 -2.747,13.436 -0.446,4.911 1.49,5.919 5.992,3.87 2.633,-1.199 5.222,-2.536 7.943,-3.487 4.145,-1.447 8.069,-0.97 11.407,2.179 1.962,1.85 3.809,3.846 5.912,5.519 2.664,2.12 5.794,1.074 6.407,-2.244 1.214,-6.574 2.348,-13.181 3.032,-19.824 0.196,-1.905 -0.763,-4.42 -2.059,-5.892 -3.638,-4.133 -4.21,-8.637 -2.95,-13.702 0.554,-2.224 1.048,-4.472 1.408,-6.736 C 51.821,61.539 49.211,55.296 43.769,49.963 32.731,39.146 31.093,25.806 33.795,11.417 c 0.989,-5.261 4.45,-9.076 8.021,-12.753 1.932,-1.989 2.758,-4.11 1.4,-6.76 -0.889,-1.734 -2.259,-2.588 -4.147,-2.094 -1.424,0.373 -2.94,0.833 -4.106,1.68 -6.867,4.983 -12.026,11.078 -12.636,20.061 -0.196,2.889 -0.986,5.593 -4.212,6.603 -3.326,1.042 -6.248,0.29 -8.201,-2.62 C 6.602,10.597 3.503,5.516 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path128"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g130"
+           transform="translate(1978.552,2047.5795)">
+          <path
+             d="m 0,0 c -0.348,-6.542 -5.815,-7.142 -5.815,-7.142 -1.215,-2.91 -3.873,-4.962 -6.996,-5.401 -0.033,7.213 -0.005,13.177 -0.005,13.177 2.81,-0.426 5.332,-1.963 6.996,-4.268 0.735,0.041 1.611,0 1.611,0 0,0 2.493,7.109 -2.865,12.154 -5.358,5.045 -15.685,5.048 -19.55,0 -2.816,-3.38 -3.688,-7.977 -2.305,-12.154 0.408,-0.075 0.827,-0.075 1.235,0 0,0 2.794,4.043 7.019,4.268 l 0,-13.177 c -3.047,0.623 -5.636,2.615 -7.019,5.401 -3.417,0.68 -5.891,3.66 -5.931,7.142 0.037,10.443 7.894,16.419 16.861,16.419 C -7.797,16.419 0.656,9.565 0,0 m -16.794,29.088 c -14.995,0 -27.151,-12.156 -27.151,-27.15 0,-14.995 12.156,-27.151 27.151,-27.151 14.995,0 27.15,12.156 27.15,27.151 0,14.994 -12.155,27.15 -27.15,27.15"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path132"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

legoresources/musicicons/colors.svg

@@ -0,0 +1,117 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="70mm"
+   height="70mm"
+   viewBox="0 0 248.0315 248.0315"
+   id="svg4488"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="colors.svg"
+   inkscape:export-filename="/Users/sammysam/Work/pxt-ev3/libs/music/jres/icons/colors-icon.png"
+   inkscape:export-xdpi="34.830002"
+   inkscape:export-ydpi="34.830002">
+  <defs
+     id="defs4490">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath98">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path100"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#2718ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="-129.18628"
+     inkscape:cy="-19.033229"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1676"
+     inkscape:window-height="1005"
+     inkscape:window-x="4"
+     inkscape:window-y="1"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4493">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-277.04342,-265.29748)">
+    <g
+       transform="matrix(1.25,0,0,-1.25,-1715.338,2910.8175)"
+       id="g94">
+      <g
+         id="g96"
+         clip-path="url(#clipPath98)">
+        <g
+           id="g102"
+           transform="translate(1780.3923,1979.9672)">
+          <path
+             d="m 0,0 c -4.26,21.817 -9.354,43.277 -15.616,64.542 1.52,-1.196 1.911,-1.587 3.402,-2.819 C -4.136,55.052 1.883,46.592 6.547,37.119 9.516,31.087 11.34,24.736 11.063,17.958 10.956,15.337 10.367,12.732 9.951,10.128 9.864,9.584 9.613,9.051 9.362,8.551 7.005,3.864 4.842,1.6 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path104"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g106"
+           transform="translate(1742.9729,2104.834)">
+          <path
+             d="m 0,0 c 5.638,-5.627 10.679,-11.504 14.972,-18.011 3.499,-5.303 6.592,-10.815 8.489,-16.912 1.154,-3.707 1.925,-7.507 1.307,-11.409 -0.858,-5.417 -3.925,-9.443 -8.27,-12.594 -0.981,-0.711 -2.002,-1.367 -3.114,-2.122 0.39,-1.262 0.778,-2.533 1.177,-3.801 6.264,-19.951 11.186,-40.243 15.26,-60.743 1.774,-8.926 3.319,-17.898 4.985,-26.847 0.424,-2.279 -0.098,-4.344 -1.486,-6.131 -6.708,-8.633 -17.447,-9.729 -26.074,-3.801 -1.887,1.297 -2.887,3.205 -3.201,5.454 -1.631,11.682 -3.524,23.335 -4.799,35.055 -1.397,12.847 -2.318,25.75 -3.25,38.643 -0.451,6.228 -0.476,12.488 -0.638,18.735 -0.024,0.957 -0.282,1.461 -1.22,1.805 -3.192,1.171 -5.884,3.054 -8.112,5.673 -3.861,4.537 -4.489,9.935 -4.243,15.537 0.277,6.315 2.626,11.865 6.549,16.801 2.646,3.328 5.249,6.693 7.766,10.119 2.231,3.036 4.023,6.309 4.113,10.215 C 0.243,-2.958 0.083,-1.579 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path108"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g110"
+           transform="translate(1638.6975,2062.73)">
+          <path
+             d="m 0,0 c -0.348,-6.542 -5.816,-7.142 -5.816,-7.142 -1.214,-2.91 -3.873,-4.962 -6.996,-5.401 -0.032,7.213 -0.004,13.177 -0.004,13.177 2.81,-0.426 5.331,-1.963 6.995,-4.268 0.735,0.041 1.611,0 1.611,0 0,0 2.494,7.109 -2.864,12.154 -5.358,5.045 -15.686,5.048 -19.551,0 -2.815,-3.38 -3.687,-7.977 -2.304,-12.154 0.407,-0.075 0.827,-0.075 1.235,0 0,0 2.794,4.043 7.019,4.268 l 0,-13.177 c -3.047,0.623 -5.637,2.615 -7.019,5.401 -3.417,0.68 -5.891,3.66 -5.931,7.142 0.036,10.442 7.894,16.418 16.86,16.418 C -7.798,16.418 0.656,9.564 0,0 m -16.794,29.088 c -14.996,0 -27.151,-12.156 -27.151,-27.151 0,-14.994 12.155,-27.15 27.151,-27.15 14.994,0 27.15,12.156 27.15,27.15 0,14.995 -12.156,27.151 -27.15,27.151"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path112"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g114"
+           transform="translate(1699.2346,2029.5179)">
+          <path
+             d="m 0,0 c -3.111,-3.868 -7.408,-5.535 -12.202,-6.12 -0.821,-0.101 -1.655,-0.099 -2.565,-0.15 -5.208,0.144 -10.045,1.473 -13.871,5.396 -4.563,4.677 -4.551,11.567 0.014,16.242 3.243,3.321 7.295,4.826 11.819,5.244 4.264,0.395 8.347,-0.268 12.145,-2.303 2.832,-1.517 5.103,-3.625 6.365,-6.642 C 3.465,7.454 2.825,3.512 0,0 m -25.273,-66.367 c -3.344,-2.025 -7.063,-2.846 -12.238,-2.786 -4.011,0.125 -8.842,1.458 -12.683,5.355 -4.688,4.756 -4.714,11.787 -0.034,16.557 3.667,3.738 8.275,5.215 13.371,5.375 4.999,0.157 9.628,-0.996 13.595,-4.215 6.772,-5.492 6.527,-15.116 -2.011,-20.286 M -65.637,-8.87 c 3.668,3.451 8.172,4.64 13.133,4.745 4.945,-0.132 9.537,-1.375 13.216,-5.018 4.685,-4.639 4.687,-11.498 -0.006,-16.133 -3.773,-3.726 -8.484,-5.034 -13.612,-4.98 -4.732,0.049 -9.086,1.33 -12.655,4.643 -5.131,4.761 -5.173,11.946 -0.076,16.743 M 41.219,-82.11 c -1.734,10.652 -3.265,21.346 -4.537,32.065 -1.238,10.42 -2.245,20.875 -3.016,31.34 -0.669,9.083 -0.875,18.201 -1.257,27.305 -0.03,0.729 -0.224,1.135 -0.922,1.485 -7.246,3.638 -11.487,9.456 -12.401,17.549 -0.131,1.158 -0.669,1.395 -1.565,1.602 -8.743,2.016 -14.601,3.018 -23.573,2.996 -12.102,0.009 -23.944,-1.681 -35.415,-5.627 -0.317,-0.11 -0.63,-0.227 -0.946,-0.339 -3.957,-15.599 -18.088,-27.142 -34.919,-27.142 -0.721,0 -1.436,0.027 -2.146,0.069 -7.479,-11.151 -10.165,-23.651 -7.356,-37.526 2.209,-10.921 7.648,-20.221 15.07,-28.374 12.406,-13.626 27.977,-22.107 45.388,-27.509 9.027,-2.801 18.313,-4.273 27.692,-5.164 7.97,-0.758 15.943,-0.966 23.843,0.739 6.608,1.427 9.464,4.226 13.94,9.463 1.733,2.028 2.601,4.111 2.12,7.068"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path116"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

legoresources/musicicons/communication.svg

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="70mm"
+   height="70mm"
+   viewBox="0 0 248.0315 248.0315"
+   id="svg4488"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="communication.svg"
+   inkscape:export-filename="/Users/sammysam/Work/pxt-ev3/libs/music/jres/icons/communication-icon.png"
+   inkscape:export-xdpi="34.830002"
+   inkscape:export-ydpi="34.830002">
+  <defs
+     id="defs4490">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath98">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path100"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath350">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path352"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#2718ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="-376.32914"
+     inkscape:cy="-19.033229"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1676"
+     inkscape:window-height="1005"
+     inkscape:window-x="4"
+     inkscape:window-y="1"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4493">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-277.04342,-265.29748)">
+    <g
+       transform="matrix(1.25,0,0,-1.25,-2844.1138,2903.3177)"
+       id="g346">
+      <g
+         id="g348"
+         clip-path="url(#clipPath350)">
+        <g
+           id="g354"
+           transform="translate(2645.6692,2007.9222)">
+          <path
+             d="M 0,0 C -7.32,-0.015 -13.303,5.941 -13.312,13.253 -13.32,20.57 -7.365,26.534 -0.038,26.547 7.309,26.562 13.243,20.641 13.251,13.291 13.259,5.934 7.358,0.016 0,0 m -39.798,0 c -7.324,-0.052 -13.329,5.887 -13.35,13.202 -0.022,7.358 5.846,13.287 13.209,13.345 7.317,0.057 13.329,-5.888 13.35,-13.204 C -26.567,5.987 -32.443,0.052 -39.798,0 m -39.44,0 c -7.303,-0.042 -13.334,5.929 -13.362,13.229 -0.028,7.285 5.954,13.305 13.256,13.34 C -72,26.605 -66.061,20.7 -66.034,13.333 -66.007,5.947 -71.854,0.042 -79.238,0 M 36.901,36.552 c -0.003,1.559 -0.149,3.126 -0.35,4.674 -1.972,15.185 -14.606,26.72 -29.775,26.78 -26.69,0.105 -53.381,0.13 -80.072,0.03 0.27,-1.775 0.409,-3.592 0.409,-5.441 0,-19.896 -16.129,-36.026 -36.024,-36.026 -2.525,0 -4.987,0.263 -7.365,0.757 -0.007,-11.576 -0.008,-23.151 0.02,-34.727 0.004,-1.772 0.122,-3.572 0.441,-5.313 3.059,-16.713 16.377,-27.791 33.377,-27.811 9.769,-0.012 19.539,-0.002 29.308,-0.003 l 1.839,0 c -0.132,-0.621 -0.208,-1.097 -0.335,-1.557 -1.966,-7.115 -3.938,-14.228 -5.908,-21.342 -1.309,-4.725 -2.628,-9.448 -3.914,-14.179 -0.491,-1.811 -0.185,-3.451 1.375,-4.656 1.418,-1.096 2.994,-1.208 4.55,-0.365 0.794,0.43 1.481,1.07 2.185,1.653 15.882,13.142 31.765,26.284 47.623,39.454 0.895,0.744 1.782,1.031 2.926,1.015 3.507,-0.051 7.017,-0.052 10.523,0.022 3.655,0.076 7.207,0.838 10.491,2.415 12.322,5.917 18.376,16.024 18.628,29.445 0.282,15.054 0.075,30.117 0.048,45.175"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path356"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g358"
+           transform="translate(2553.552,2068.5796)">
+          <path
+             d="m 0,0 c -0.348,-6.542 -5.815,-7.142 -5.815,-7.142 -1.215,-2.91 -3.873,-4.962 -6.996,-5.401 -0.033,7.213 -0.004,13.177 -0.004,13.177 2.809,-0.426 5.331,-1.963 6.995,-4.268 0.734,0.041 1.611,0 1.611,0 0,0 2.493,7.109 -2.865,12.154 -5.358,5.045 -15.685,5.048 -19.55,0 -2.816,-3.38 -3.688,-7.977 -2.305,-12.154 0.408,-0.075 0.827,-0.075 1.235,0 0,0 2.794,4.043 7.019,4.268 l 0,-13.177 c -3.047,0.623 -5.637,2.615 -7.019,5.401 -3.416,0.68 -5.891,3.66 -5.93,7.142 0.036,10.442 7.894,16.418 16.859,16.418 C -7.798,16.418 0.656,9.564 0,0 m -16.794,29.088 c -14.995,0 -27.15,-12.156 -27.15,-27.151 0,-14.994 12.155,-27.15 27.15,-27.15 14.994,0 27.15,12.156 27.15,27.15 0,14.995 -12.156,27.151 -27.15,27.151"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path360"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

legoresources/musicicons/expressions.svg

@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="70mm"
+   height="70mm"
+   viewBox="0 0 248.0315 248.0315"
+   id="svg4488"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="expressions.svg"
+   inkscape:export-filename="/Users/sammysam/Work/pxt-ev3/libs/music/jres/icons/expressions-icon.png"
+   inkscape:export-xdpi="34.830002"
+   inkscape:export-ydpi="34.830002">
+  <defs
+     id="defs4490">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath98">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path100"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath60">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path62"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#2718ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="-142.31826"
+     inkscape:cy="41.575924"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1676"
+     inkscape:window-height="1005"
+     inkscape:window-x="4"
+     inkscape:window-y="1"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4493">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-277.04342,-265.29748)">
+    <g
+       transform="matrix(0.97413611,0,0,-0.97413611,-1827.6604,2336.9603)"
+       id="g56">
+      <g
+         id="g58"
+         clip-path="url(#clipPath60)">
+        <g
+           id="g64"
+           transform="translate(2384.9529,2017.6815)">
+          <path
+             d="m 0,0 c -1.714,0.451 -2.514,1.918 -3.269,3.579 -0.581,1.28 -1.26,2.586 -3.554,4.957 -3.184,3.208 -5.397,3.115 -9.004,3.279 -3.207,0.145 -4.617,1.318 -5.51,3.895 0.045,2.225 1.201,3.894 3.725,4.494 C -11.17,21.736 -6.029,19.046 -0.64,14.2 2.023,11.806 3.954,8.939 5.054,5.622 6.249,2.021 3.55,-0.935 0,0 m 24.409,39.626 c -5.068,6.681 -11.677,11.44 -18.941,15.375 -8.855,4.796 -18.282,8.034 -28.148,10.022 -11.477,2.313 -22.979,2.945 -34.513,0.466 -4.83,-1.038 -8.89,-2.951 -12.959,-5.842 -0.411,-0.292 -0.828,-0.688 -1.036,-1.133 -1.229,-2.64 -2.398,-5.309 -3.587,-7.968 -0.073,0.028 -1.246,-2.845 -2.698,-6.642 1.897,-1.536 3.302,-3.451 4.264,-6.044 2.727,-7.351 5.171,-14.771 7.14,-22.311 -0.02,0.68 0.103,1.411 0.423,2.201 2.48,6.14 7.65,8.775 14.72,10.364 3.495,0.784 6.95,0.699 10.292,-0.324 3.627,-1.11 4.475,-5.022 1.657,-7.375 -1.359,-1.137 -3.019,-0.94 -4.81,-0.594 -1.38,0.267 -2.838,0.47 -6.099,-0.028 -4.46,-0.739 -5.665,-2.597 -7.886,-5.443 -1.976,-2.531 -3.749,-3.002 -6.367,-2.239 -0.648,0.481 -1.146,1.04 -1.479,1.669 1.457,-5.828 2.628,-11.729 3.373,-17.738 0.905,-7.307 1.344,-14.561 1.298,-21.758 2.621,1.02 5.493,1.738 8.716,2.022 4.335,0.381 8.784,-0.21 11.197,-1.129 7.369,-2.826 11.595,-5.803 15.235,-9.303 4.623,-4.445 7.915,-9.246 10.666,-14.182 0.278,-0.498 0.563,-0.997 0.867,-1.491 0.685,-1.116 0.412,-2.047 -0.741,-2.472 -1.07,-0.394 -2.657,-0.027 -3.729,0.868 -0.178,0.149 -0.335,0.311 -0.494,0.471 -10.839,10.86 -27.343,16.759 -42.122,14.98 -0.916,-12.252 -3.382,-24.321 -7.643,-36.168 2.36,-2.485 5.062,-4.621 8.35,-6.341 9.484,-4.964 19.04,-4.073 28.507,0.033 6.883,2.986 12.899,7.336 18.303,12.498 16.833,16.08 27.834,35.69 34.603,57.788 3.87,12.633 5.564,25.639 6.424,38.799 0.231,3.529 -0.741,6.277 -2.783,8.969"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path66"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g68"
+           transform="translate(2304.2834,1978.8392)">
+          <path
+             d="m 0,0 c -1.893,-5.065 -4.079,-10.012 -6.982,-14.685 -3.189,-5.133 -7.155,-9.702 -12.507,-13.198 -4.592,-3 -9.72,-4.638 -12.753,-4.651 -9.271,-0.005 -15.157,1.979 -20.623,5.06 -6.942,3.913 -12.573,9.099 -17.668,14.786 -0.515,0.574 -1.038,1.144 -1.58,1.698 -1.221,1.25 -1.314,2.767 -0.228,4.04 1.008,1.18 2.902,1.536 4.454,0.828 0.258,-0.117 0.498,-0.268 0.741,-0.412 16.664,-9.94 37.563,-9.174 53.081,2.152 2.935,2.143 5.326,4.901 7.839,7.475 1.478,1.515 3.278,2.081 4.942,1.206 C 0.417,3.404 0.725,1.941 0,0 m -78.218,22.22 c -1.623,1.523 -2.091,3.498 -0.849,5.775 3.17,5.814 8.609,7.837 15.816,8.601 3.561,0.378 6.983,-0.105 10.186,-1.506 3.475,-1.52 3.867,-5.503 0.797,-7.517 -1.482,-0.972 -3.107,-0.586 -4.846,-0.035 -1.341,0.424 -2.766,0.792 -6.063,0.673 -4.514,-0.221 -5.925,-1.928 -8.46,-4.5 -2.253,-2.286 -4.069,-2.55 -6.581,-1.491 m 45.45,11.867 c 3.17,5.813 8.609,7.836 15.816,8.601 3.561,0.377 6.983,-0.105 10.185,-1.506 3.476,-1.52 3.868,-5.503 0.798,-7.517 -1.481,-0.972 -3.107,-0.586 -4.846,-0.036 -1.341,0.425 -2.766,0.792 -6.062,0.674 -4.515,-0.221 -5.926,-1.928 -8.46,-4.5 -2.254,-2.286 -4.069,-2.55 -6.582,-1.491 -1.623,1.522 -2.091,3.498 -0.849,5.775 M 12.963,32.609 C 11.339,45.721 7.577,58.285 2.99,70.65 c -1.23,3.316 -3.24,5.428 -6.203,7.052 -7.353,4.03 -15.329,5.677 -23.566,6.303 -10.042,0.764 -19.97,-0.129 -29.787,-2.342 -7.533,-1.697 -14.774,-4.073 -21.564,-7.49 0.408,-2.17 0.631,-4.405 0.631,-6.694 0,-14.204 -8.223,-26.482 -20.164,-32.349 0.247,-3.605 0.559,-7.311 0.905,-10.005 2.639,-20.573 9.695,-39.572 20.99,-56.978 6.423,-9.896 13.939,-18.788 23.78,-25.497 6.027,-4.108 11.956,-7.014 19.337,-7.469 10.684,-0.66 19.043,4.054 26.009,11.668 5.065,5.535 8.782,11.962 11.607,18.88 8.802,21.551 10.84,43.943 7.998,66.88"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path70"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g72"
+           transform="translate(2207.5535,2044.3802)">
+          <path
+             d="m 0,0 c -0.348,-6.542 -5.816,-7.142 -5.816,-7.142 -1.214,-2.91 -3.872,-4.962 -6.995,-5.401 -0.033,7.213 -0.005,13.177 -0.005,13.177 2.81,-0.426 5.331,-1.963 6.996,-4.268 0.734,0.041 1.611,0 1.611,0 0,0 2.493,7.109 -2.865,12.154 -5.358,5.045 -15.685,5.048 -19.551,0 -2.815,-3.38 -3.687,-7.977 -2.304,-12.154 0.408,-0.075 0.827,-0.075 1.235,0 0,0 2.794,4.043 7.019,4.268 l 0,-13.177 c -3.047,0.622 -5.637,2.615 -7.019,5.401 -3.417,0.68 -5.891,3.66 -5.931,7.142 0.037,10.443 7.894,16.419 16.861,16.419 C -7.798,16.419 0.656,9.565 0,0 m -16.794,29.088 c -14.995,0 -27.151,-12.156 -27.151,-27.151 0,-14.994 12.156,-27.15 27.151,-27.15 14.994,0 27.15,12.156 27.15,27.15 0,14.995 -12.156,27.151 -27.15,27.151"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path74"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

legoresources/musicicons/information.svg

@@ -0,0 +1,128 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="70mm"
+   height="70mm"
+   viewBox="0 0 248.0315 248.0315"
+   id="svg4488"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="information.svg"
+   inkscape:export-filename="/Users/sammysam/Work/pxt-ev3/libs/music/jres/icons/information-icon.png"
+   inkscape:export-xdpi="34.830002"
+   inkscape:export-ydpi="34.830002">
+  <defs
+     id="defs4490">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath98">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path100"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath326">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path328"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath306">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path308"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath80">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path82"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#2718ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="-623.472"
+     inkscape:cy="-19.033229"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1676"
+     inkscape:window-height="1005"
+     inkscape:window-x="4"
+     inkscape:window-y="1"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4493">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-277.04342,-265.29748)">
+    <g
+       transform="matrix(1.25,0,0,-1.25,-4045.5446,2893.0624)"
+       id="g76">
+      <g
+         id="g78"
+         clip-path="url(#clipPath80)">
+        <g
+           id="g84"
+           transform="translate(3570.8577,2080.2783)">
+          <path
+             d="m 0,0 c -17.199,0 -33.081,-5.625 -45.92,-15.127 1.907,-3.367 3.287,-7.068 4.029,-10.998 11.416,9.366 26.007,14.997 41.891,14.997 36.476,0 66.151,-29.675 66.151,-66.151 0,-36.476 -29.675,-66.151 -66.151,-66.151 -36.476,0 -66.15,29.675 -66.15,66.151 0,3.553 0.29,7.039 0.832,10.442 -3.605,-1.269 -7.47,-1.979 -11.496,-2.03 -0.3,-2.764 -0.464,-5.568 -0.464,-8.412 0,-42.68 34.598,-77.279 77.278,-77.279 42.681,0 77.279,34.599 77.279,77.279 C 77.279,-34.599 42.681,0 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path86"
+             inkscape:connector-curvature="0" />
+        </g>
+        <path
+           d="m 3576.645,1964.291 -12.77,0 0,60.096 12.77,0 0,-60.096 z m -13.53,76.016 c 0,2.282 0.625,4.039 1.875,5.271 1.25,1.23 3.033,1.847 5.352,1.847 2.245,0 3.993,-0.617 5.243,-1.847 1.25,-1.232 1.874,-2.989 1.874,-5.271 0,-2.173 -0.624,-3.885 -1.874,-5.135 -1.25,-1.25 -2.998,-1.874 -5.243,-1.874 -2.319,0 -4.102,0.624 -5.352,1.874 -1.25,1.25 -1.875,2.962 -1.875,5.135"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           id="path88"
+           inkscape:connector-curvature="0" />
+        <g
+           id="g90"
+           transform="translate(3510.3733,2045.4877)">
+          <path
+             d="m 0,0 c -0.348,-6.542 -5.815,-7.142 -5.815,-7.142 -1.214,-2.91 -3.873,-4.963 -6.996,-5.402 -0.033,7.214 -0.004,13.178 -0.004,13.178 2.809,-0.426 5.331,-1.963 6.995,-4.268 0.735,0.041 1.611,0 1.611,0 0,0 2.493,7.109 -2.864,12.154 -5.359,5.045 -15.686,5.048 -19.551,0 -2.815,-3.381 -3.688,-7.978 -2.305,-12.154 0.408,-0.075 0.827,-0.075 1.236,0 0,0 2.793,4.043 7.018,4.268 l 0,-13.178 c -3.047,0.623 -5.636,2.616 -7.018,5.402 -3.417,0.68 -5.892,3.659 -5.931,7.142 0.036,10.442 7.894,16.419 16.86,16.419 C -7.797,16.419 0.656,9.565 0,0 m -16.794,29.088 c -14.995,0 -27.15,-12.156 -27.15,-27.151 0,-14.995 12.155,-27.15 27.15,-27.15 14.995,0 27.15,12.155 27.15,27.15 0,14.995 -12.155,27.151 -27.15,27.151"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path92"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

legoresources/musicicons/mechanical.svg

@@ -0,0 +1,125 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="70mm"
+   height="70mm"
+   viewBox="0 0 248.0315 248.0315"
+   id="svg4488"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="mechanical.svg"
+   inkscape:export-filename="/Users/sammysam/Work/pxt-ev3/libs/music/jres/icons/mechanical-icon.png"
+   inkscape:export-xdpi="34.830002"
+   inkscape:export-ydpi="34.830002">
+  <defs
+     id="defs4490">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath98">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path100"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath326">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path328"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#2718ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="-376.32914"
+     inkscape:cy="-19.033229"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1676"
+     inkscape:window-height="1005"
+     inkscape:window-x="4"
+     inkscape:window-y="1"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4493">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-277.04342,-265.29748)">
+    <g
+       transform="matrix(1.25,0,0,-1.25,-3494.8509,2934.6633)"
+       id="g322">
+      <g
+         id="g324"
+         clip-path="url(#clipPath326)">
+        <g
+           id="g330"
+           transform="translate(3172.885,2015.1815)">
+          <path
+             d="m 0,0 c -0.015,9.108 -7.431,16.503 -16.497,16.449 -9.134,-0.054 -16.439,-7.401 -16.43,-16.522 0.01,-9.083 7.458,-16.509 16.502,-16.451 C -7.286,-16.467 0.015,-9.122 0,0 m -41.665,42.966 c 2.645,-2.554 5.268,-5.016 7.798,-7.568 0.76,-0.768 1.393,-0.857 2.364,-0.499 2.153,0.795 4.344,1.492 6.539,2.168 0.766,0.235 1.083,0.618 1.199,1.432 0.48,3.347 1.047,6.681 1.59,10.019 0.049,0.296 0.156,0.582 0.26,0.958 l 10.356,0 c 0.61,-3.466 1.261,-6.951 1.817,-10.452 0.176,-1.111 0.577,-1.709 1.746,-2.007 2.18,-0.557 4.314,-1.298 6.444,-2.033 0.759,-0.262 1.245,-0.156 1.808,0.436 2.541,2.67 5.133,5.293 7.761,7.988 2.97,-2.131 5.748,-4.121 8.631,-6.189 -1.228,-2.515 -2.238,-5.12 -3.702,-7.438 -1.63,-2.578 -1.541,-4.643 0.655,-6.771 0.952,-0.924 1.681,-2.101 2.399,-3.235 0.537,-0.85 1.125,-1.117 2.132,-0.939 2.988,0.529 6.009,0.879 8.988,1.451 1.334,0.255 1.999,0.1 2.401,-1.363 0.756,-2.751 1.755,-5.435 2.697,-8.277 C 30.147,9.545 28.095,8.451 26.042,7.358 24.894,6.748 23.769,6.085 22.587,5.547 21.728,5.155 21.38,4.652 21.421,3.667 c 0.096,-2.341 0.104,-4.688 0.046,-7.03 -0.023,-0.884 0.305,-1.3 1.055,-1.673 2.95,-1.467 5.852,-3.029 8.808,-4.482 0.849,-0.418 0.982,-0.827 0.682,-1.705 -0.977,-2.865 -1.853,-5.764 -2.804,-8.768 -2.187,0.294 -4.322,0.578 -6.457,0.869 -1.16,0.158 -2.364,0.179 -3.467,0.524 -1.737,0.544 -2.692,-0.13 -3.569,-1.563 -1.04,-1.697 -2.27,-3.282 -3.475,-4.872 -0.478,-0.631 -0.543,-1.113 -0.159,-1.847 1.708,-3.264 3.336,-6.568 5.051,-9.971 -2.756,-2.031 -5.506,-4.058 -8.372,-6.171 -0.64,0.605 -1.263,1.187 -1.876,1.778 -2.062,1.99 -4.144,3.959 -6.162,5.991 -0.577,0.582 -1.073,0.67 -1.817,0.406 -2.245,-0.799 -4.5,-1.573 -6.78,-2.262 -0.83,-0.251 -1.176,-0.667 -1.301,-1.498 -0.49,-3.259 -1.078,-6.502 -1.539,-9.765 -0.129,-0.911 -0.395,-1.262 -1.358,-1.244 -3.071,0.056 -6.143,0.021 -9.281,0.021 -0.647,3.653 -1.316,7.225 -1.886,10.813 -0.145,0.91 -0.507,1.339 -1.376,1.592 -2.247,0.651 -4.478,1.361 -6.691,2.12 -0.798,0.274 -1.315,0.182 -1.927,-0.45 -2.265,-2.338 -4.609,-4.6 -6.903,-6.909 -0.302,-0.304 -0.493,-0.72 -0.739,-1.091 -3.07,2.2 -5.852,4.192 -8.693,6.228 1.62,3.326 3.176,6.611 4.824,9.849 0.439,0.863 0.379,1.455 -0.207,2.205 -1.442,1.845 -2.813,3.747 -4.176,5.653 -0.42,0.588 -0.824,0.84 -1.607,0.706 -3.204,-0.551 -6.431,-0.975 -9.634,-1.531 -1.064,-0.184 -1.631,-0.073 -1.977,1.116 -0.832,2.861 -1.833,5.673 -2.793,8.585 3.25,1.726 6.402,3.45 9.605,5.072 0.956,0.484 1.27,1.07 1.226,2.114 -0.095,2.254 -0.1,4.514 -0.059,6.77 0.015,0.857 -0.26,1.318 -1.037,1.701 -2.914,1.44 -5.792,2.954 -8.682,4.444 -0.378,0.194 -0.746,0.407 -1.187,0.65 1.054,3.314 2.088,6.56 3.148,9.888 2.963,-0.413 5.875,-0.632 8.693,-1.268 2.465,-0.556 4.17,-0.206 5.377,2.212 0.727,1.457 1.843,2.729 2.855,4.028 0.522,0.671 0.576,1.191 0.166,1.971 -1.692,3.222 -3.297,6.49 -5.022,9.914 2.771,2.04 5.543,4.082 8.391,6.179"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path332"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g334"
+           transform="translate(3123.2981,2066.4429)">
+          <path
+             d="m 0,0 c 0.012,0.702 -0.113,1.092 -0.93,1.227 -1.837,0.301 -3.648,0.755 -5.48,1.099 -0.743,0.139 -1.209,0.426 -1.477,1.202 -0.466,1.349 -1.021,2.674 -1.644,3.958 -0.447,0.922 -0.412,1.637 0.209,2.494 1.211,1.67 2.291,3.436 3.333,5.02 -1.964,1.965 -3.797,3.8 -5.709,5.714 -1.747,-1.15 -3.569,-2.396 -5.448,-3.545 -0.4,-0.245 -1.077,-0.317 -1.518,-0.162 -1.591,0.563 -3.158,1.209 -4.683,1.932 -0.416,0.197 -0.823,0.733 -0.936,1.187 -0.471,1.892 -0.788,3.821 -1.262,5.711 -0.086,0.343 -0.63,0.8 -0.976,0.812 -2.081,0.077 -4.166,0.014 -6.249,0.052 -0.695,0.012 -0.988,-0.208 -1.112,-0.914 -0.008,-0.046 -0.018,-0.092 -0.026,-0.137 1.382,-3.824 2.138,-7.947 2.138,-12.248 0,-1.506 -0.103,-2.988 -0.283,-4.445 0.821,0.174 1.668,0.27 2.536,0.265 6.669,-0.034 12.076,-5.476 12.049,-12.128 -0.026,-6.581 -5.423,-11.963 -12.04,-12.011 -4.287,-0.03 -8.099,2.271 -10.258,5.697 -3.33,-4.121 -7.546,-7.496 -12.364,-9.827 -0.41,-0.635 -0.813,-1.261 -1.206,-1.857 1.949,-1.957 3.806,-3.822 5.715,-5.738 1.674,1.098 3.466,2.239 5.216,3.44 0.634,0.435 1.167,0.558 1.904,0.213 1.41,-0.662 2.853,-1.272 4.323,-1.782 0.783,-0.271 1.059,-0.748 1.198,-1.481 0.34,-1.787 0.773,-3.559 1.073,-5.353 0.134,-0.798 0.413,-1.095 1.251,-1.07 1.994,0.061 3.992,0.046 5.987,0.006 0.734,-0.015 1.065,0.183 1.2,0.966 0.332,1.92 0.743,3.829 1.211,5.721 0.102,0.415 0.496,0.899 0.883,1.08 1.49,0.695 3.011,1.344 4.566,1.871 0.515,0.174 1.284,0.118 1.743,-0.157 1.856,-1.109 3.638,-2.345 5.349,-3.469 1.92,1.922 3.782,3.785 5.715,5.719 -0.281,0.431 -0.644,0.965 -0.989,1.512 -0.989,1.571 -2.646,3.096 -2.771,4.735 -0.129,1.705 1.178,3.544 1.964,5.275 0.206,0.454 0.759,0.926 1.239,1.05 1.845,0.473 3.717,0.853 5.596,1.175 0.777,0.133 0.982,0.465 0.966,1.203 C -0.039,-3.993 -0.033,-1.996 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path336"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g338"
+           transform="translate(3076.2131,2015.0848)">
+          <path
+             d="m 0,0 c -6.57,0.075 -12.063,-5.21 -12.16,-11.701 -0.104,-6.837 5.139,-12.289 11.891,-12.366 6.706,-0.077 12.145,5.208 12.249,11.901 C 12.084,-5.543 6.701,-0.077 0,0 m -8.186,-41.016 c -2.477,1.059 -4.892,2.091 -7.348,3.141 0.445,2.224 0.923,4.335 1.258,6.468 0.084,0.529 -0.135,1.263 -0.485,1.673 -1.012,1.185 -2.19,2.228 -3.247,3.378 -0.521,0.567 -1,0.762 -1.803,0.588 -2.109,-0.457 -4.249,-0.778 -6.442,-1.165 -0.938,2.315 -1.877,4.549 -2.72,6.817 -0.1,0.269 0.218,0.87 0.512,1.08 1.519,1.081 3.07,2.121 4.658,3.099 0.722,0.445 0.976,0.966 0.945,1.8 -0.07,1.862 0.531,4.019 -0.223,5.507 -0.727,1.435 -2.813,2.182 -4.303,3.231 -0.53,0.372 -1.062,0.741 -1.692,1.18 0.971,2.291 1.899,4.564 2.923,6.794 0.117,0.255 0.788,0.43 1.154,0.366 1.836,-0.316 3.646,-0.786 5.486,-1.064 0.539,-0.082 1.283,0.128 1.696,0.48 1.22,1.039 2.376,2.168 3.44,3.366 0.356,0.401 0.566,1.142 0.492,1.678 -0.29,2.101 -0.721,4.182 -1.129,6.433 1.219,0.498 2.442,0.999 3.667,1.496 1.203,0.489 2.409,0.974 3.747,1.515 0.911,-1.364 1.932,-2.661 2.693,-4.097 0.91,-1.718 2.101,-2.647 4.101,-2.25 0.083,0.017 0.177,0.014 0.259,-0.004 2.957,-0.668 4.913,0.512 6.201,3.183 0.501,1.039 1.309,1.93 2.059,3.006 2.285,-0.975 4.558,-1.905 6.78,-2.943 0.267,-0.125 0.422,-0.864 0.353,-1.271 -0.312,-1.836 -0.77,-3.648 -1.068,-5.487 -0.074,-0.461 0.123,-1.08 0.413,-1.461 0.546,-0.721 1.367,-1.244 1.867,-1.987 1.426,-2.123 3.281,-2.449 5.58,-1.692 1.061,0.35 2.202,0.507 3.32,0.605 0.364,0.032 0.976,-0.306 1.121,-0.633 0.846,-1.898 1.588,-3.843 2.361,-5.774 0.096,-0.238 0.169,-0.484 0.299,-0.859 -1.784,-1.189 -3.558,-2.413 -5.381,-3.563 -0.659,-0.416 -0.951,-0.869 -0.925,-1.667 0.05,-1.561 0.032,-3.127 -0.045,-4.687 -0.039,-0.796 0.242,-1.264 0.897,-1.69 1.527,-0.993 2.986,-2.089 4.509,-3.09 0.603,-0.397 0.81,-0.733 0.476,-1.464 -0.953,-2.088 -1.816,-4.217 -2.777,-6.478 -2.02,0.404 -4.057,0.754 -6.063,1.236 -1.003,0.241 -1.706,0.07 -2.405,-0.706 -0.957,-1.062 -2.095,-1.963 -3.024,-3.047 -0.383,-0.446 -0.644,-1.215 -0.574,-1.791 0.218,-1.804 0.601,-3.59 0.959,-5.375 0.15,-0.751 -0.01,-1.175 -0.8,-1.463 -1.912,-0.697 -3.773,-1.535 -5.69,-2.223 -0.329,-0.118 -1.006,0.093 -1.212,0.377 -1.119,1.545 -2.092,3.195 -3.223,4.729 -0.323,0.438 -0.988,0.821 -1.527,0.867 -1.553,0.13 -3.123,0.036 -4.684,0.111 -0.784,0.038 -1.269,-0.209 -1.705,-0.873 -1.188,-1.807 -2.454,-3.563 -3.731,-5.4"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path340"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g342"
+           transform="translate(3072.2981,2077.9072)">
+          <path
+             d="m 0,0 c -0.348,-6.542 -5.816,-7.142 -5.816,-7.142 -1.214,-2.91 -3.873,-4.962 -6.996,-5.401 -0.033,7.213 -0.004,13.177 -0.004,13.177 2.809,-0.426 5.331,-1.963 6.995,-4.268 0.735,0.041 1.611,0 1.611,0 0,0 2.493,7.109 -2.864,12.154 -5.359,5.045 -15.686,5.048 -19.551,0 -2.815,-3.38 -3.687,-7.977 -2.305,-12.154 0.408,-0.075 0.828,-0.075 1.236,0 0,0 2.794,4.043 7.018,4.268 l 0,-13.177 c -3.047,0.623 -5.636,2.615 -7.018,5.401 -3.417,0.68 -5.892,3.66 -5.931,7.142 0.036,10.442 7.894,16.418 16.86,16.418 C -7.798,16.418 0.655,9.564 0,0 m -16.795,29.088 c -14.995,0 -27.15,-12.156 -27.15,-27.151 0,-14.994 12.155,-27.15 27.15,-27.15 14.995,0 27.15,12.156 27.15,27.15 0,14.995 -12.155,27.151 -27.15,27.151"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path344"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

legoresources/musicicons/movements.svg

@@ -0,0 +1,124 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="70mm"
+   height="70mm"
+   viewBox="0 0 248.0315 248.0315"
+   id="svg4488"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="movements.svg"
+   inkscape:export-filename="/Users/sammysam/Work/pxt-ev3/libs/music/jres/icons/movements-icon.png"
+   inkscape:export-xdpi="34.830002"
+   inkscape:export-ydpi="34.830002">
+  <defs
+     id="defs4490">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath98">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path100"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath326">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path328"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath306">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path308"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#2718ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="-376.32914"
+     inkscape:cy="-19.033229"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1676"
+     inkscape:window-height="1005"
+     inkscape:window-x="4"
+     inkscape:window-y="1"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4493">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-277.04342,-265.29748)">
+    <g
+       transform="matrix(1.25,0,0,-1.25,-3764.4453,2887.4891)"
+       id="g302">
+      <g
+         id="g304"
+         clip-path="url(#clipPath306)">
+        <g
+           id="g310"
+           transform="translate(3352.3049,1999.0599)">
+          <path
+             d="m 0,0 -37.323,42.991 c 0.236,-1.668 0.366,-3.37 0.366,-5.103 0,-7.118 -2.073,-13.747 -5.636,-19.335 l 21.586,-24.864 -40.113,-42.94 c -3.77,-4.035 -3.555,-10.363 0.481,-14.134 1.928,-1.801 4.379,-2.692 6.825,-2.692 2.673,0 5.34,1.065 7.309,3.174 l 46.262,49.521 C 3.251,-9.642 3.356,-3.865 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path312"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g314"
+           transform="translate(3296.1165,2035.0106)">
+          <path
+             d="m 0,0 c -0.348,-6.542 -5.815,-7.142 -5.815,-7.142 -1.214,-2.91 -3.873,-4.963 -6.996,-5.402 -0.033,7.214 -0.004,13.178 -0.004,13.178 2.809,-0.426 5.331,-1.963 6.995,-4.268 0.735,0.041 1.611,0 1.611,0 0,0 2.493,7.109 -2.864,12.154 -5.359,5.045 -15.686,5.048 -19.551,0 -2.815,-3.381 -3.688,-7.978 -2.305,-12.154 0.408,-0.075 0.827,-0.075 1.236,0 0,0 2.793,4.043 7.018,4.268 l 0,-13.178 c -3.047,0.623 -5.636,2.616 -7.018,5.402 -3.417,0.68 -5.892,3.659 -5.931,7.142 0.036,10.442 7.894,16.418 16.86,16.418 C -7.797,16.418 0.656,9.564 0,0 m -16.794,29.088 c -14.995,0 -27.15,-12.156 -27.15,-27.151 0,-14.995 12.155,-27.15 27.15,-27.15 14.995,0 27.15,12.155 27.15,27.15 0,14.995 -12.155,27.151 -27.15,27.151"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path316"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g318"
+           transform="translate(3356.3713,1932.9828)">
+          <path
+             d="m 0,0 c -2.445,0 -4.896,0.892 -6.824,2.692 -4.036,3.771 -4.251,10.099 -0.482,14.134 l 40.114,42.941 -40.976,47.198 c -3.621,4.17 -3.176,10.486 0.995,14.106 4.17,3.622 10.486,3.178 14.107,-0.995 l 46.88,-53.999 c 3.357,-3.865 3.251,-9.641 -0.243,-13.382 L 7.31,3.174 C 5.341,1.065 2.674,0 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path320"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

legoresources/musicicons/numbers.svg

@@ -0,0 +1,161 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="70mm"
+   height="70mm"
+   viewBox="0 0 248.0315 248.0315"
+   id="svg4488"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="numbers.svg"
+   inkscape:export-filename="/Users/sammysam/Work/pxt-ev3/libs/music/jres/icons/numbers-icon.png"
+   inkscape:export-xdpi="34.830002"
+   inkscape:export-ydpi="34.830002">
+  <defs
+     id="defs4490">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath98">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path100"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath122">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path124"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath138">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path140"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath138-5">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path140-3"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#2718ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="-89.900569"
+     inkscape:cy="152.39534"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4178"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1676"
+     inkscape:window-height="1005"
+     inkscape:window-x="-9"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata4493">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-277.04342,-265.29748)">
+    <g
+       transform="matrix(1.25,0,0,-1.25,-3827.4453,2281.0789)"
+       id="g134">
+      <g
+         id="g136"
+         clip-path="url(#clipPath138)">
+        <g
+           id="g142"
+           transform="matrix(0.95667644,0,0,0.95667644,3511.7806,1622.5188)">
+          <g
+             transform="scale(1,-1)"
+             style="font-style:normal;font-weight:normal;font-size:33.15932465px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             id="text4167" />
+        </g>
+        <g
+           id="g4178"
+           transform="translate(0.33476913,-24.377094)">
+          <g
+             transform="translate(1967.0046,-457.69592)"
+             id="g134-7">
+            <g
+               id="g136-0"
+               clip-path="url(#clipPath138-5)">
+              <g
+                 id="g142-0"
+                 transform="translate(1451.6599,1974.7396)">
+                <path
+                   d="m 0,0 -59.338,0 0,12.483 21.308,21.541 c 6.309,6.463 10.431,10.945 12.367,13.441 1.934,2.497 3.328,4.809 4.181,6.938 0.851,2.129 1.277,4.335 1.277,6.619 0,3.406 -0.94,5.941 -2.816,7.606 -1.878,1.664 -4.384,2.497 -7.519,2.497 -3.291,0 -6.484,-0.755 -9.58,-2.264 -3.097,-1.51 -6.329,-3.658 -9.696,-6.445 l -9.755,11.554 c 4.181,3.56 7.645,6.077 10.393,7.548 2.748,1.47 5.748,2.603 9,3.397 3.251,0.793 6.889,1.19 10.915,1.19 5.303,0 9.987,-0.968 14.051,-2.903 4.065,-1.936 7.218,-4.645 9.464,-8.129 2.245,-3.483 3.368,-7.471 3.368,-11.96 0,-3.91 -0.688,-7.577 -2.061,-11.003 -1.375,-3.425 -3.504,-6.938 -6.387,-10.538 -2.885,-3.6 -7.965,-8.729 -15.241,-15.386 l -10.916,-10.277 0,-0.813 L 0,15.096 0,0 Z"
+                   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                   id="path144"
+                   inkscape:connector-curvature="0" />
+              </g>
+              <g
+                 id="g146"
+                 transform="translate(1376.5061,2014.3344)">
+                <path
+                   d="m 0,0 c -5.642,-7.604 -14.242,-12.871 -24.098,-14.121 l -9.612,-7.652 8.651,-10.799 9.755,7.838 c 1.161,0.929 3.231,2.883 6.212,5.864 l -0.29,-8.825 -0.174,-8.071 0,-49.12 17.941,0 L 8.385,0 0,0 Z"
+                   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                   id="path148"
+                   inkscape:connector-curvature="0" />
+              </g>
+              <g
+                 id="g150"
+                 transform="translate(1507.6936,1995.3485)">
+                <path
+                   d="m 0,0 c 0,-5.303 -1.606,-9.813 -4.819,-13.528 -3.213,-3.716 -7.722,-6.271 -13.528,-7.664 l 0,-0.349 c 6.851,-0.852 12.037,-2.932 15.56,-6.241 3.522,-3.31 5.284,-7.771 5.284,-13.384 0,-8.167 -2.961,-14.525 -8.884,-19.073 -5.922,-4.548 -14.38,-6.822 -25.373,-6.822 -9.212,0 -17.38,1.528 -24.501,4.587 l 0,15.27 c 3.289,-1.665 6.909,-3.019 10.857,-4.064 3.948,-1.045 7.858,-1.568 11.728,-1.568 5.923,0 10.297,1.006 13.122,3.019 2.825,2.013 4.239,5.244 4.239,9.696 0,3.987 -1.626,6.812 -4.877,8.477 -3.252,1.665 -8.439,2.497 -15.561,2.497 l -6.445,0 0,13.761 6.561,0 c 6.58,0 11.389,0.86 14.429,2.583 3.038,1.722 4.558,4.674 4.558,8.855 0,6.425 -4.027,9.638 -12.078,9.638 -2.786,0 -5.622,-0.464 -8.505,-1.394 -2.884,-0.928 -6.087,-2.536 -9.609,-4.818 l -8.304,12.366 c 7.742,5.574 16.974,8.361 27.696,8.361 8.786,0 15.725,-1.781 20.815,-5.341 C -2.545,11.302 0,6.347 0,0"
+                   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                   id="path152"
+                   inkscape:connector-curvature="0" />
+              </g>
+              <g
+                 id="g154"
+                 transform="translate(1364.6829,2033.5956)">
+                <path
+                   d="m 0,0 c -0.348,-6.542 -5.816,-7.142 -5.816,-7.142 -1.214,-2.91 -3.873,-4.962 -6.996,-5.401 -0.032,7.213 -0.004,13.177 -0.004,13.177 2.81,-0.426 5.331,-1.963 6.996,-4.268 0.734,0.041 1.611,0 1.611,0 0,0 2.493,7.109 -2.865,12.154 -5.358,5.045 -15.685,5.048 -19.551,0 -2.815,-3.38 -3.687,-7.977 -2.304,-12.154 0.408,-0.075 0.827,-0.075 1.235,0 0,0 2.794,4.043 7.019,4.268 l 0,-13.177 c -3.047,0.623 -5.637,2.615 -7.019,5.401 -3.417,0.68 -5.891,3.66 -5.931,7.142 0.037,10.442 7.894,16.419 16.86,16.419 C -7.798,16.419 0.656,9.564 0,0 m -16.794,29.088 c -14.995,0 -27.151,-12.156 -27.151,-27.151 0,-14.994 12.156,-27.15 27.151,-27.15 14.994,0 27.15,12.156 27.15,27.15 0,14.995 -12.156,27.151 -27.15,27.151"
+                   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                   id="path156"
+                   inkscape:connector-curvature="0" />
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

legoresources/musicicons/system.svg

@@ -0,0 +1,194 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="70mm"
+   height="70mm"
+   viewBox="0 0 248.0315 248.0315"
+   id="svg4488"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="system.svg"
+   inkscape:export-filename="/Users/sammysam/Work/pxt-ev3/libs/music/jres/icons/system-icon.png"
+   inkscape:export-xdpi="34.830002"
+   inkscape:export-ydpi="34.830002">
+  <defs
+     id="defs4490">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath98">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path100"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath326">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path328"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath306">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path308"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath80">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path82"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath16">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path18"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#2718ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="-25.135906"
+     inkscape:cy="41.575924"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1676"
+     inkscape:window-height="1005"
+     inkscape:window-x="4"
+     inkscape:window-y="1"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4493">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-277.04342,-265.29748)">
+    <g
+       transform="matrix(1.1422808,0,0,-1.1422808,-2887.5282,2694.7089)"
+       id="g12">
+      <g
+         id="g14"
+         clip-path="url(#clipPath16)">
+        <g
+           id="g20"
+           transform="translate(2922.0559,2096.2036)">
+          <path
+             d="m 0,0 -83.319,0 c -3.05,0 -5.835,-1.163 -7.958,-3.054 5.003,-6.186 8.004,-14.057 8.004,-22.633 0,-9.197 -3.452,-17.585 -9.123,-23.951 2.204,-2.556 5.457,-4.188 9.077,-4.188 l 83.319,0 c 6.6,0 12,5.4 12,12 L 12,-12 C 12,-5.4 6.6,0 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path22"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g24"
+           transform="translate(2973.0618,1938.8104)">
+          <path
+             d="m 0,0 -24.187,0 c -6.6,0 -12,5.4 -12,12 l 0,24.187 c 0,6.6 5.4,12 12,12 l 24.187,0 c 6.601,0 12,-5.4 12,-12 L 12,12 C 12,5.4 6.601,0 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path26"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g28"
+           transform="translate(2892.4895,1938.8104)">
+          <path
+             d="m 0,0 -24.187,0 c -6.6,0 -12.001,5.4 -12.001,12 l 0,24.187 c 0,6.6 5.401,12 12.001,12 l 24.187,0 c 6.6,0 12,-5.4 12,-12 L 12,12 C 12,5.4 6.6,0 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path30"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g32"
+           transform="translate(2809.0579,1938.8104)">
+          <path
+             d="m 0,0 -24.187,0 c -6.6,0 -12.001,5.4 -12.001,12 l 0,24.187 c 0,6.6 5.401,12 12.001,12 l 24.187,0 c 6.6,0 12,-5.4 12,-12 L 12,12 C 12,5.4 6.6,0 0,0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path34"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g36"
+           transform="translate(2880.3958,2055.9263)">
+          <path
+             d="M 0,0 0,-83.701"
+             style="fill:none;stroke:#ffffff;stroke-width:7;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path38"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g40"
+           transform="translate(2962.3206,2019.2631)">
+          <path
+             d="M 0,0 0,-52.091"
+             style="fill:none;stroke:#ffffff;stroke-width:7;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path42"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g44"
+           transform="translate(2796.9641,2019.2631)">
+          <path
+             d="M 0,0 0,-52.091"
+             style="fill:none;stroke:#ffffff;stroke-width:7;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path46"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g48"
+           transform="translate(2796.9641,2016.475)">
+          <path
+             d="M 0,0 166.863,0"
+             style="fill:none;stroke:#ffffff;stroke-width:7;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path50"
+             inkscape:connector-curvature="0" />
+        </g>
+        <g
+           id="g52"
+           transform="translate(2819.552,2068.5796)">
+          <path
+             d="m 0,0 c -0.348,-6.542 -5.815,-7.142 -5.815,-7.142 -1.215,-2.91 -3.873,-4.962 -6.996,-5.401 -0.033,7.213 -0.004,13.177 -0.004,13.177 2.809,-0.426 5.331,-1.963 6.995,-4.268 0.734,0.041 1.611,0 1.611,0 0,0 2.493,7.109 -2.865,12.154 -5.358,5.045 -15.685,5.048 -19.55,0 -2.816,-3.38 -3.688,-7.977 -2.305,-12.154 0.408,-0.075 0.827,-0.075 1.235,0 0,0 2.794,4.043 7.019,4.268 l 0,-13.177 c -3.047,0.623 -5.637,2.615 -7.019,5.401 -3.416,0.68 -5.891,3.66 -5.93,7.142 0.036,10.442 7.894,16.418 16.859,16.418 C -7.798,16.418 0.656,9.564 0,0 m -16.794,29.088 c -14.995,0 -27.15,-12.156 -27.15,-27.151 0,-14.994 12.155,-27.15 27.15,-27.15 14.994,0 27.15,12.156 27.15,27.15 0,14.995 -12.156,27.151 -27.15,27.151"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path54"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

libs/color-sensor/color.ts

@@ -185,7 +185,7 @@ namespace sensors {
          * @param handler the code to run when detected
          */
         //% help=sensors/color-sensor/on-light-detected
-        //% block="on **color sensor** %this|detected %mode|%condition"
+        //% block="on **color sensor** %this|%mode|%condition"
         //% blockId=colorOnLightDetected
         //% parts="colorsensor"
         //% blockNamespace=sensors
@@ -202,7 +202,7 @@ namespace sensors {
          * @param color the color to detect
          */
         //% help=sensors/color-sensor/pause-until-light-detected
-        //% block="pause until **color sensor** %this|detected %mode|%condition"
+        //% block="pause until **color sensor** %this|%mode|%condition"
         //% blockId=colorPauseUntilLightDetected
         //% parts="colorsensor"
         //% blockNamespace=sensors

libs/music/icons.jres

@@ -0,0 +1,33 @@
+{
+  "*": {
+    "namespace": "icons",
+    "dataEncoding": "base64"
+  },
+  "animals": {
+    "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAFWwAABVsBgZCHQwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAf2SURBVHic7Z19rB1FGYd/bz9oqdiKxGppoYVqaigRKArWj1hJilpjQBIoJmgICpqSeDUSgqYaVBIl+IeBikqNxGiqQNQIiai1NRaptmKwFa2klko/aKUR6OelH9zHP2Yxp8vsOXvOzJzd07tPcnLa3Zl3fjPv7NnZ2Zn3Sg0NDQ0NDQ0NDQ0NDQ0NowlLXQAwXtICSfMlTcs++yXtlrRZ0i/NbEdqHaMO4AxgOfA87RkB/gxcBSTvECc8wDjgNmC4Q8P7WA+8peo6tAMYA3wWeBT4XNV6jgOYDDzUQ8O3cgC4ouq6+AAmAg+0aB0BzqlalyQJOAV4PLDxWyu2OLHeTwIPAjcCp5ZIPwlY6dG6JKXOUgAG3Bep8V/mEPC2hJqfbilrH/ANYFZB2unAIwU67w7REeWmB3xC0vI2SQ5KWiPpL5L2SJosaZakSyWd0Sbfk5LONbNjMXS2AuyS9Ibc4RFJD2efJyWNlfReSddLem2BqT+Y2btj6ysN7tLcUdA7hoGlwGsK8hrwIWBjmyvhU4l0ry13IXbkuRT6uqnIkgJhu4DzszSTgCtwo6NvA18FLgNelZ2fCPygwM42EgxPgXsiOQBgemx93VTktx5BLwLzsvPvB3YWCP8vcBNuaDcG+HlBuosS6B4Ka/PjeE9sfWUrMQU44hF0e3Z+HnC4RAVW4H6OpgJ7PedvS6B9fo+N7ePaXnWMCazHmySNzx1D0l3Zv78j6aQSdj4i6Xoze1bSvZ7zKcbaj0k6FMnW2b1mDHXANM+xDWa2A/eA0s0wcij7/pXn3OldK+uAmR2VtC6Sucoc4HuA2Zp9X9ilrXOAV0vaWbKcGPw+kp2eO0ioA/Z4jg1n35Oy771yvTs/Vn5I7jlgZcux8XJj8TLlxGB1JDvbItnpDuA8zw1pU3ZDXQA8A7wxSzs7l+7+7LjhhqUHs39/zGPzvkT6T8LNPYVwjGy43XeAkwsqcCMwnpY5liIHtJyfgXte+JvH3i0J67A60AF3hpQf9BNkZsOSfuM5dZekOyWdVsYO7kHr7ZLWSjrXk+QXvWoswR8D8m6WlKxzlAK4uk3veAqYnKUrvAKAa9rY2JhY/5UBvf+m0PJDb8KS9ICkJwrOnSVpJdl9wAdwlaR72tj/YoC2MrwUkPfhaCpCABZ16CmHgTW5Y1uBDR3yremD9qI5qDJMTa2vNMAdARXxsRtoN1Udqvds4O5AjTNDdYyLUZmMW+SmJi6LYOuApA+b2fYItgTMkHRB9jk/+5wVwfSbJT0dwU4cgLHA1wN71Xag26fovI65wGeA+yl+VxGDakdARQCLgX93WZljwPeB1/VY5jTc1Has99Jl+FnstosGMAH4NLAO95K9iD3AvYBv/F+mnKm4q+5Q4sb2EfwT2ZeFUMDpcg9a0yW9Xm4aeKekf0n6k5l1PRQEJkj6stw808R4artmipnt6zXzQK5Ew829/FD+p+Z+M9vMnuo1c4wHsb4CXCc3j1+HxpekoBUbA+UAYEjS91TuLVs/OCppV4iBgXEA8DVJ31S9fjbXZ2/WemYgHIBb+FXHMfdPQg3UqTd5ARbITXnnX/5XzU5Jc8zsYIiRWl8BuBV1K1S/xh+RtCS08aWaO0DSHfKvvKiapWb2YNUikoJ7p9zuCboqfOuWeqa29wBgvbpbV9QPVklaZGZHYhmspQOASyX9umodOf4h6WIzOxDTaF3vAUurFpBjRNINsRtfqqEDcKuqq9vw4GeZmT2awnDtHCDpo1ULyHFY0u2pjNfKAcA4uZXSdeJHZvZMKuO1coCkhXLvC+rEj1Mar5sDrqlaQI79kh5JWUBtHACMlbSoah051sUc8/uojQMkzZPk3U1ZIZtSF1AnByyoWoCHLakLqJMDLqlagIf9qQuohQNwMYXeVbUOD8Odk4RRCwdIukjSKVWL8JD8PUTMtaEhLOxzeS/I7cZEbtpjRkG65IOCujggaWiaHI9Jep+ZPSe5fWKSlskF5MhTaofPQANc0seXKXtxK6XzGk4GXvCkX5G6/nW4B6TeAdPK530BArO9bus96eekFlSpA3BRsRb0qbi1cqETivCN+eeS7XFLRWUOwO0uCYo21QWH5WJR+DaBv8xmz7EJkj6QRlKFAKfSeX9YTG4toemCgryP4+apTgxw6/nX9a3p4e+4peyddFmW1sdQp/wDAXAhsKVfLQ+8BLyzC32+MAngdnmWtlM7cCEtv0K54E0x+SvwDmBSZ5X/vwqKoiPuoS4xQsuCC0P2cVzQjio5irvnfIsOPRkXs2J3gZ3tQD7SYv3ANfxi4Il+tG4PXNtB/3m4eHY+lsVsq6jDUNw21aslbZRbuj23Q5YRSb+T2+v1BbmFuC/G1FRA2yB7ZrZBbk/bPz2nZ8UUEmUuCLea4TpJN0uaXSLLf+Riwy3P76/CbegbkvRBxQ9VdkjumaDjKgcz2wzMz3Re3nKqXotygYspN6YfwYW4vBI3ATYw4EZvXwJuoE4h9nGhH/d1aPjnge8CnX6OGroBOA14tk1vX42LJTRQvX1gAG4uaPxNwFur1nfCA/zU0/grKQjU3RAZXvnHDPYBU6rWNWiEPAdszf1/i5ntDRHT0AW4qOitHAHOrFrXqAE3cbUq54RVQB1ec44OgJm8MjDTrVXrGlUAZ3L8H3EYISCe/mgjeC7IzLYBC+WWFl4uaaakOcC4FH98p6GhoaGhoaGhoaGhoaGhYZD5H/yQ1Oxwb1bHAAAAAElFTkSuQmCC"
+  },
+  "colors": {
+    "icon": "data:image/png;base64,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"
+  },
+  "communication": {
+    "icon": "data:image/png;base64,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"
+  },
+  "expressions": {
+    "icon": "data:image/png;base64,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"
+  },
+  "information": {
+    "icon": "data:image/png;base64,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"
+  },
+  "mechanical": {
+    "icon": "data:image/png;base64,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"
+  },
+  "movements": {
+    "icon": "data:image/png;base64,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"
+  },
+  "numbers": {
+    "icon": "data:image/png;base64,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"
+  },
+  "system": {
+    "icon": "data:image/png;base64,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"
+  }
+}

libs/music/music.cpp

@@ -164,7 +164,7 @@ void playTone(int frequency, int ms) {
 }
 
 /**
-* Play a tone through the speaker for some amount of time.
+* Stop all sounds.
 */
 //% help=music/stop-all-sounds
 //% blockId=music_stop_all_sounds block="stop all sounds"

libs/music/pxt.json

@@ -9,6 +9,7 @@
         "melodies.ts",
         "music.ts",
         "piano.ts",
+        "icons.jres",
         "sounds.jres",
         "sounds.ts",
         "ns.ts"

libs/music/shims.d.ts

@@ -26,7 +26,7 @@ declare namespace music {
     function playTone(frequency: int32, ms: int32): void;
 
     /**
-     * Play a tone through the speaker for some amount of time.
+     * Stop all sounds.
      */
     //% help=music/stop-all-sounds
     //% blockId=music_stop_all_sounds block="stop all sounds"

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "0.1.29",
+  "version": "0.2.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -10,12 +10,6 @@
       "integrity": "sha1-J3wmM9z1qAgDvXGHEMK4VyWWYoU=",
       "dev": true
     },
-    "@types/jquery": {
-      "version": "3.2.16",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.2.16.tgz",
-      "integrity": "sha1-BEGcQEoxlDUOfT8zmpDnLIjbMRE=",
-      "dev": true
-    },
     "@types/marked": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@types/marked/-/marked-0.3.0.tgz",
@@ -48,6 +42,22 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
       "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c="
     },
+    "acorn-node": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.3.0.tgz",
+      "integrity": "sha512-efP54n3d1aLfjL2UMdaXa6DsswwzJeI5rqhbFvXMrKiJ6eJFpf+7R0zN7t8IC+XKn2YOAFAv6xbBNgHUkoHWLw==",
+      "requires": {
+        "acorn": "5.5.3",
+        "xtend": "4.0.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "5.5.3",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz",
+          "integrity": "sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ=="
+        }
+      }
+    },
     "ajv": {
       "version": "5.5.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
@@ -403,7 +413,6 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true,
       "optional": true
     },
     "asn1": {
@@ -465,7 +474,7 @@
       "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
       "requires": {
         "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000784",
+        "caniuse-db": "1.0.30000833",
         "normalize-range": "0.1.2",
         "num2fraction": "1.2.2",
         "postcss": "5.2.18",
@@ -584,35 +593,36 @@
       }
     },
     "browserify": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/browserify/-/browserify-13.3.0.tgz",
-      "integrity": "sha1-tanJAgJD8McORnW+yCI7xifkFc4=",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/browserify/-/browserify-16.2.0.tgz",
+      "integrity": "sha512-yotdAkp/ZbgDesHQBYU37zjc29JDH4iXT8hjzM1fdUVWogjARX0S1cKeX24Ci6zZ+jG+ADmCTRt6xvtmJnI+BQ==",
       "requires": {
         "JSONStream": "1.3.2",
         "assert": "1.4.1",
         "browser-pack": "6.0.2",
         "browser-resolve": "1.11.2",
-        "browserify-zlib": "0.1.4",
-        "buffer": "4.9.1",
+        "browserify-zlib": "0.2.0",
+        "buffer": "5.1.0",
         "cached-path-relative": "1.0.1",
-        "concat-stream": "1.5.2",
+        "concat-stream": "1.6.2",
         "console-browserify": "1.1.0",
         "constants-browserify": "1.0.0",
         "crypto-browserify": "3.12.0",
         "defined": "1.0.0",
         "deps-sort": "2.0.0",
-        "domain-browser": "1.1.7",
+        "domain-browser": "1.2.0",
         "duplexer2": "0.1.4",
-        "events": "1.1.1",
+        "events": "2.0.0",
         "glob": "7.1.2",
         "has": "1.0.1",
         "htmlescape": "1.1.1",
-        "https-browserify": "0.0.1",
+        "https-browserify": "1.0.0",
         "inherits": "2.0.3",
         "insert-module-globals": "7.0.1",
         "labeled-stream-splicer": "2.0.0",
-        "module-deps": "4.1.1",
-        "os-browserify": "0.1.2",
+        "mkdirp": "0.5.1",
+        "module-deps": "6.0.2",
+        "os-browserify": "0.3.0",
         "parents": "1.0.1",
         "path-browserify": "0.0.0",
         "process": "0.11.10",
@@ -625,16 +635,37 @@
         "shell-quote": "1.6.1",
         "stream-browserify": "2.0.1",
         "stream-http": "2.7.2",
-        "string_decoder": "0.10.31",
+        "string_decoder": "1.1.1",
         "subarg": "1.0.0",
         "syntax-error": "1.3.0",
         "through2": "2.0.3",
         "timers-browserify": "1.4.2",
-        "tty-browserify": "0.0.0",
+        "tty-browserify": "0.0.1",
         "url": "0.11.0",
         "util": "0.10.3",
-        "vm-browserify": "0.0.4",
+        "vm-browserify": "1.0.1",
         "xtend": "4.0.1"
+      },
+      "dependencies": {
+        "concat-stream": {
+          "version": "1.6.2",
+          "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+          "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+          "requires": {
+            "buffer-from": "1.0.0",
+            "inherits": "2.0.3",
+            "readable-stream": "2.3.3",
+            "typedarray": "0.0.6"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
       }
     },
     "browserify-aes": {
@@ -694,11 +725,11 @@
       }
     },
     "browserify-zlib": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz",
-      "integrity": "sha1-uzX4pRn2AOD6a4SFJByXnQFB+y0=",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
       "requires": {
-        "pako": "0.2.9"
+        "pako": "1.0.6"
       }
     },
     "browserslist": {
@@ -706,20 +737,24 @@
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
       "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
       "requires": {
-        "caniuse-db": "1.0.30000784",
-        "electron-to-chromium": "1.3.30"
+        "caniuse-db": "1.0.30000833",
+        "electron-to-chromium": "1.3.45"
       }
     },
     "buffer": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
-      "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.1.0.tgz",
+      "integrity": "sha512-YkIRgwsZwJWTnyQrsBTWefizHh+8GYj3kbL1BTiAQ/9pwpino0G7B2gp5tx/FUBqUlvtxV85KNR3mwfAtv15Yw==",
       "requires": {
         "base64-js": "1.2.1",
-        "ieee754": "1.1.8",
-        "isarray": "1.0.0"
+        "ieee754": "1.1.8"
       }
     },
+    "buffer-from": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.0.0.tgz",
+      "integrity": "sha512-83apNb8KK0Se60UE1+4Ukbe3HbfELJ6UlI4ldtOGs7So4KD26orJM8hIY9lxdzP+UpItH1Yh/Y8GUvNFWFFRxA=="
+    },
     "buffer-xor": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
@@ -757,7 +792,7 @@
       "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=",
       "requires": {
         "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000784",
+        "caniuse-db": "1.0.30000833",
         "lodash.memoize": "4.1.2",
         "lodash.uniq": "4.5.0"
       },
@@ -770,9 +805,9 @@
       }
     },
     "caniuse-db": {
-      "version": "1.0.30000784",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000784.tgz",
-      "integrity": "sha1-G+lQEtlInHcZB0+BruV9vf/mNhs="
+      "version": "1.0.30000833",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000833.tgz",
+      "integrity": "sha1-K9e+cqQBZY0svLj012AN7r6xxnY="
     },
     "caseless": {
       "version": "0.12.0",
@@ -1258,19 +1293,13 @@
       }
     },
     "detective": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-4.7.1.tgz",
-      "integrity": "sha512-H6PmeeUcZloWtdt4DAkFyzFL94arpHr3NOwwmVILFiy+9Qd4JTxxXrzfyGk/lmct2qVGBwTSwSXagqu2BxmWig==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.1.0.tgz",
+      "integrity": "sha512-TFHMqfOvxlgrfVzTEkNBSh9SvSNX/HfF4OFI2QFGCyPm02EsyILqnUeb5P6q7JZ3SFNTBL5t2sePRgrN4epUWQ==",
       "requires": {
-        "acorn": "5.3.0",
-        "defined": "1.0.0"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.3.0.tgz",
-          "integrity": "sha512-Yej+zOJ1Dm/IMZzzj78OntP/r3zHEaKcyNoU2lAaxPtrseM6rF0xwqoz5Q5ysAiED9hTjI2hgtvLXitlCN1/Ug=="
-        }
+        "acorn-node": "1.3.0",
+        "defined": "1.0.0",
+        "minimist": "1.2.0"
       }
     },
     "diffie-hellman": {
@@ -1284,9 +1313,9 @@
       }
     },
     "domain-browser": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.7.tgz",
-      "integrity": "sha1-hnqksJP6oF8d4IwG9NeyH9+GmLw="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
+      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
     },
     "duplexer2": {
       "version": "0.1.4",
@@ -1305,18 +1334,10 @@
         "jsbn": "0.1.1"
       }
     },
-    "electron-releases": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/electron-releases/-/electron-releases-2.1.0.tgz",
-      "integrity": "sha512-cyKFD1bTE/UgULXfaueIN1k5EPFzs+FRc/rvCY5tIynefAPqopQEgjr0EzY+U3Dqrk/G4m9tXSPuZ77v6dL/Rw=="
-    },
     "electron-to-chromium": {
-      "version": "1.3.30",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.30.tgz",
-      "integrity": "sha512-zx1Prv7kYLfc4OA60FhxGbSo4qrEjgSzpo1/37i7l9ltXPYOoQBtjQxY9KmsgfHnBxHlBGXwLlsbt/gub1w5lw==",
-      "requires": {
-        "electron-releases": "2.1.0"
-      }
+      "version": "1.3.45",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.45.tgz",
+      "integrity": "sha1-RYrBscXHYM6IEaFtK/vZfsMLr7g="
     },
     "elliptic": {
       "version": "6.4.0",
@@ -1344,7 +1365,6 @@
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.6.tgz",
       "integrity": "sha512-IsORQDpaaSwcDP4ZZnHxgE85werpo34VYn1Ud3mq+eUsF593faR8oCZNXrROVkpFu2TsbrNhHin0aUrTsQ9vNw==",
-      "dev": true,
       "optional": true,
       "requires": {
         "prr": "1.0.1"
@@ -1366,9 +1386,9 @@
       "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE="
     },
     "events": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
-      "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-2.0.0.tgz",
+      "integrity": "sha512-r/M5YkNg9zwI8QbSf7tsDWWJvO3PGwZXyG7GpFAxtMASnHL2eblFd7iHiGPtyGKKFPZ59S63NeX10Ws6WqGDcg=="
     },
     "evp_bytestokey": {
       "version": "1.0.3",
@@ -1492,11 +1512,6 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
-    "fuse.js": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-2.6.1.tgz",
-      "integrity": "sha1-0RjgD5qFn3s1TtT3dAIUJJ4ypXo="
-    },
     "gauge": {
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
@@ -1542,8 +1557,7 @@
     "graceful-fs": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-      "dev": true
+      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
     },
     "handlebars": {
       "version": "4.0.11",
@@ -1657,11 +1671,6 @@
         "sntp": "2.1.0"
       }
     },
-    "highlight.js": {
-      "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
-      "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4="
-    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -1703,9 +1712,9 @@
       }
     },
     "https-browserify": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-0.0.1.tgz",
-      "integrity": "sha1-P5E2XKvmC3ftDruiS0VOPgnZWoI="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
+      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
     "ieee754": {
       "version": "1.1.8",
@@ -1716,7 +1725,6 @@
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
       "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
-      "dev": true,
       "optional": true
     },
     "indexes-of": {
@@ -1724,11 +1732,6 @@
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
       "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
     },
-    "indexof": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
-      "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
-    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -1910,13 +1913,12 @@
     "jquery": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz",
-      "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c=",
-      "dev": true
+      "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c="
     },
     "js-base64": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.0.tgz",
-      "integrity": "sha512-Wehd+7Pf9tFvGb+ydPm9TjYjV8X1YHOVyG8QyELZxEMqOhemVwGRmoG8iQ/soqI3n8v4xn59zaLxiCJiaaRzKA=="
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
+      "integrity": "sha512-H7ErYLM34CvDMto3GbD6xD0JLUGYXR3QTcH6B/tr4Hi/QpSThnCsIp+Sy5FRTw3B0d6py4HcNkW7nO/wdtGWEw=="
     },
     "js-yaml": {
       "version": "3.7.0",
@@ -1977,6 +1979,24 @@
         "verror": "1.10.0"
       }
     },
+    "keytar": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/keytar/-/keytar-4.2.1.tgz",
+      "integrity": "sha1-igamV3/fY3PgqmsRInfmPex3/RI=",
+      "optional": true,
+      "requires": {
+        "nan": "2.8.0",
+        "prebuild-install": "2.4.1"
+      },
+      "dependencies": {
+        "nan": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/nan/-/nan-2.8.0.tgz",
+          "integrity": "sha1-7XFfP+neArV6XmJS2QqWZ14fCFo=",
+          "optional": true
+        }
+      }
+    },
     "kind-of": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@@ -2018,7 +2038,6 @@
       "version": "2.7.3",
       "resolved": "https://registry.npmjs.org/less/-/less-2.7.3.tgz",
       "integrity": "sha512-KPdIJKWcEAb02TuJtaLrhue0krtRLoRoo7x6BNJIBelO00t/CCdJQUnHW5V34OnHMWzIktSalJxRO+FvytQlCQ==",
-      "dev": true,
       "requires": {
         "errno": "0.1.6",
         "graceful-fs": "4.1.11",
@@ -2034,7 +2053,6 @@
           "version": "4.11.8",
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
           "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
-          "dev": true,
           "optional": true,
           "requires": {
             "co": "4.6.0",
@@ -2045,21 +2063,18 @@
           "version": "0.2.0",
           "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
           "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
-          "dev": true,
           "optional": true
         },
         "aws-sign2": {
           "version": "0.6.0",
           "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
           "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
-          "dev": true,
           "optional": true
         },
         "boom": {
           "version": "2.10.1",
           "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
           "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
-          "dev": true,
           "requires": {
             "hoek": "2.16.3"
           }
@@ -2068,7 +2083,6 @@
           "version": "2.0.5",
           "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
           "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
-          "dev": true,
           "optional": true,
           "requires": {
             "boom": "2.10.1"
@@ -2078,7 +2092,6 @@
           "version": "2.1.4",
           "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
           "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
-          "dev": true,
           "optional": true,
           "requires": {
             "asynckit": "0.4.0",
@@ -2090,14 +2103,12 @@
           "version": "1.0.5",
           "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
           "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=",
-          "dev": true,
           "optional": true
         },
         "har-validator": {
           "version": "4.2.1",
           "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
           "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
-          "dev": true,
           "optional": true,
           "requires": {
             "ajv": "4.11.8",
@@ -2108,7 +2119,6 @@
           "version": "3.1.3",
           "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
           "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
-          "dev": true,
           "optional": true,
           "requires": {
             "boom": "2.10.1",
@@ -2120,14 +2130,12 @@
         "hoek": {
           "version": "2.16.3",
           "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
-          "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
-          "dev": true
+          "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0="
         },
         "http-signature": {
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
           "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
-          "dev": true,
           "optional": true,
           "requires": {
             "assert-plus": "0.2.0",
@@ -2139,7 +2147,6 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
           "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
-          "dev": true,
           "optional": true,
           "requires": {
             "jsonify": "0.0.0"
@@ -2149,21 +2156,18 @@
           "version": "0.2.0",
           "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
           "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=",
-          "dev": true,
           "optional": true
         },
         "qs": {
           "version": "6.4.0",
           "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
           "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=",
-          "dev": true,
           "optional": true
         },
         "request": {
           "version": "2.81.0",
           "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz",
           "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
-          "dev": true,
           "optional": true,
           "requires": {
             "aws-sign2": "0.6.0",
@@ -2194,7 +2198,6 @@
           "version": "1.0.9",
           "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
           "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
-          "dev": true,
           "optional": true,
           "requires": {
             "hoek": "2.16.3"
@@ -2275,9 +2278,9 @@
       }
     },
     "marked": {
-      "version": "0.3.12",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.12.tgz",
-      "integrity": "sha512-k4NaW+vS7ytQn6MgJn3fYpQt20/mOgYM5Ft9BYMfQJDz2QT6yEeS9XJ8k2Nw8JTeWK/znPPW2n3UJGzyYEiMoA=="
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz",
+      "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg=="
     },
     "math-expression-evaluator": {
       "version": "1.2.17",
@@ -2323,7 +2326,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
       "optional": true
     },
     "mime-db": {
@@ -2394,16 +2396,16 @@
       }
     },
     "module-deps": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/module-deps/-/module-deps-4.1.1.tgz",
-      "integrity": "sha1-IyFYM/HaE/1gbMuAh7RIUty4If0=",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/module-deps/-/module-deps-6.0.2.tgz",
+      "integrity": "sha512-KWBI3009iRnHjRlxRhe8nJ6kdeBTg4sMi5N6AZgg5f1/v5S7EBCRBOY854I4P5Anl4kx6AJH+4bBBC2Gi3nkvg==",
       "requires": {
         "JSONStream": "1.3.2",
         "browser-resolve": "1.11.2",
         "cached-path-relative": "1.0.1",
-        "concat-stream": "1.5.2",
+        "concat-stream": "1.6.2",
         "defined": "1.0.0",
-        "detective": "4.7.1",
+        "detective": "5.1.0",
         "duplexer2": "0.1.4",
         "inherits": "2.0.3",
         "parents": "1.0.1",
@@ -2413,6 +2415,19 @@
         "subarg": "1.0.0",
         "through2": "2.0.3",
         "xtend": "4.0.1"
+      },
+      "dependencies": {
+        "concat-stream": {
+          "version": "1.6.2",
+          "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+          "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+          "requires": {
+            "buffer-from": "1.0.0",
+            "inherits": "2.0.3",
+            "readable-stream": "2.3.3",
+            "typedarray": "0.0.6"
+          }
+        }
       }
     },
     "ms": {
@@ -2653,9 +2668,9 @@
       }
     },
     "os-browserify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.1.2.tgz",
-      "integrity": "sha1-ScoCk+CxlZCl9d4Qx/JlphfY/lQ="
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
+      "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
     },
     "os-homedir": {
       "version": "1.0.2",
@@ -2679,9 +2694,9 @@
       }
     },
     "pako": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
-      "integrity": "sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU="
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz",
+      "integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg=="
     },
     "parents": {
       "version": "1.0.1",
@@ -2757,7 +2772,7 @@
       "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
       "requires": {
         "chalk": "1.1.3",
-        "js-base64": "2.4.0",
+        "js-base64": "2.4.3",
         "source-map": "0.5.7",
         "supports-color": "3.2.3"
       }
@@ -3065,7 +3080,6 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
       "integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
-      "dev": true,
       "optional": true,
       "requires": {
         "asap": "2.0.6"
@@ -3241,7 +3255,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
       "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-      "dev": true,
       "optional": true
     },
     "public-encrypt": {
@@ -3271,37 +3284,35 @@
       "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
     },
     "pxt-common-packages": {
-      "version": "0.20.38",
-      "resolved": "https://registry.npmjs.org/pxt-common-packages/-/pxt-common-packages-0.20.38.tgz",
-      "integrity": "sha512-jtJrd9XwX9T/bOC/9uZyPB4SdvDfhxbnl8c8Gzyy+HiGbW1SMcABgTevJFpLli/ifszl+R+9ZLspFGle84jXkA==",
+      "version": "0.22.2",
+      "resolved": "https://registry.npmjs.org/pxt-common-packages/-/pxt-common-packages-0.22.2.tgz",
+      "integrity": "sha512-bndrU1Aqig0O504QuaQYICrSQfQF7QFBoOArl0hdY7NWfq2yNJu8CHoW2oKJm+r+LTz150D4XuHjCIGLEv2MBQ==",
       "requires": {
-        "autoprefixer": "6.7.7",
-        "pxt-core": "3.8.13",
-        "rtlcss": "2.2.1"
+        "pxt-core": "3.12.18"
       }
     },
     "pxt-core": {
-      "version": "3.8.13",
-      "resolved": "https://registry.npmjs.org/pxt-core/-/pxt-core-3.8.13.tgz",
-      "integrity": "sha512-F7+P5X/TB6SXtXIkEujHccAxcbMCAKyUqT/VgaQBi2vRo3YdH1IswsMSgXDKG0H12sWOVL297TLdQSiBOuIvXA==",
+      "version": "3.12.18",
+      "resolved": "https://registry.npmjs.org/pxt-core/-/pxt-core-3.12.18.tgz",
+      "integrity": "sha512-Dd1XHjMjSR6gqf8B2LB7mtppD+VI49wckd/jCK8dHZcjb7RbngqTnfjOuHcDbXfSrvDrGFNzBhYvYaLf70AV7g==",
       "requires": {
         "bluebird": "3.5.1",
-        "browserify": "13.3.0",
+        "browserify": "16.2.0",
         "cssnano": "3.10.0",
         "faye-websocket": "0.11.1",
-        "fuse.js": "2.6.1",
-        "highlight.js": "9.12.0",
         "keytar": "4.2.1",
+        "less": "2.7.3",
         "lzma": "2.3.2",
-        "marked": "0.3.12",
+        "marked": "0.3.19",
         "node-hid": "0.5.7",
         "pngjs": "3.3.2",
         "postcss": "6.0.21",
-        "request": "2.83.0",
+        "request": "2.85.0",
         "rimraf": "2.5.4",
         "rtlcss": "2.2.1",
+        "semantic-ui-less": "2.2.14",
         "serialport": "6.0.5",
-        "uglify-js": "3.3.5"
+        "uglify-js": "3.3.21"
       },
       "dependencies": {
         "ansi-styles": {
@@ -3313,13 +3324,13 @@
           }
         },
         "chalk": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
-          "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==",
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
+          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
           "requires": {
             "ansi-styles": "3.2.1",
             "escape-string-regexp": "1.0.5",
-            "supports-color": "5.3.0"
+            "supports-color": "5.4.0"
           }
         },
         "has-flag": {
@@ -3327,30 +3338,43 @@
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
           "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
         },
-        "keytar": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/keytar/-/keytar-4.2.1.tgz",
-          "integrity": "sha1-igamV3/fY3PgqmsRInfmPex3/RI=",
-          "optional": true,
-          "requires": {
-            "nan": "2.8.0",
-            "prebuild-install": "2.4.1"
-          }
-        },
-        "nan": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/nan/-/nan-2.8.0.tgz",
-          "integrity": "sha1-7XFfP+neArV6XmJS2QqWZ14fCFo=",
-          "optional": true
-        },
         "postcss": {
           "version": "6.0.21",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.21.tgz",
           "integrity": "sha512-y/bKfbQz2Nn/QBC08bwvYUxEFOVGfPIUOTsJ2CK5inzlXW9SdYR1x4pEsG9blRAF/PX+wRNdOah+gx/hv4q7dw==",
           "requires": {
-            "chalk": "2.3.2",
+            "chalk": "2.4.1",
             "source-map": "0.6.1",
-            "supports-color": "5.3.0"
+            "supports-color": "5.4.0"
+          }
+        },
+        "request": {
+          "version": "2.85.0",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.85.0.tgz",
+          "integrity": "sha512-8H7Ehijd4js+s6wuVPLjwORxD4zeuyjYugprdOXlPSqaApmL/QOy+EB/beICHVCHkGMKNh5rvihb5ov+IDw4mg==",
+          "requires": {
+            "aws-sign2": "0.7.0",
+            "aws4": "1.6.0",
+            "caseless": "0.12.0",
+            "combined-stream": "1.0.5",
+            "extend": "3.0.1",
+            "forever-agent": "0.6.1",
+            "form-data": "2.3.1",
+            "har-validator": "5.0.3",
+            "hawk": "6.0.2",
+            "http-signature": "1.2.0",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.17",
+            "oauth-sign": "0.8.2",
+            "performance-now": "2.1.0",
+            "qs": "6.5.1",
+            "safe-buffer": "5.1.1",
+            "stringstream": "0.0.5",
+            "tough-cookie": "2.3.3",
+            "tunnel-agent": "0.6.0",
+            "uuid": "3.1.0"
           }
         },
         "source-map": {
@@ -3359,9 +3383,9 @@
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "supports-color": {
-          "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz",
-          "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==",
+          "version": "5.4.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
+          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
           "requires": {
             "has-flag": "3.0.0"
           }
@@ -3583,6 +3607,7 @@
       "version": "2.83.0",
       "resolved": "https://registry.npmjs.org/request/-/request-2.83.0.tgz",
       "integrity": "sha512-lR3gD69osqm6EYLk9wB/G1W/laGWjzH90t1vEa2xuxHD5KUrSzp9pUSfTm+YC5Nxt2T8nMPEvKlhbQayU7bgFw==",
+      "dev": true,
       "requires": {
         "aws-sign2": "0.7.0",
         "aws4": "1.6.0",
@@ -3648,54 +3673,44 @@
       "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.2.1.tgz",
       "integrity": "sha512-JjQ5DlrmwiItAjlmhoxrJq5ihgZcE0wMFxt7S17bIrt4Lw0WwKKFk+viRhvodB/0falyG/5fiO043ZDh6/aqTw==",
       "requires": {
-        "chalk": "2.3.0",
+        "chalk": "2.4.1",
         "findup": "0.1.5",
         "mkdirp": "0.5.1",
-        "postcss": "6.0.15",
+        "postcss": "6.0.22",
         "strip-json-comments": "2.0.1"
       },
       "dependencies": {
         "ansi-styles": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
-          "integrity": "sha1-wVm41b4PnlpvNG2rlPFs4CIWG4g=",
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
           "requires": {
             "color-convert": "1.9.1"
           }
         },
         "chalk": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
-          "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
+          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
           "requires": {
-            "ansi-styles": "3.2.0",
+            "ansi-styles": "3.2.1",
             "escape-string-regexp": "1.0.5",
-            "supports-color": "4.5.0"
+            "supports-color": "5.4.0"
           }
         },
         "has-flag": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
-          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
         },
         "postcss": {
-          "version": "6.0.15",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.15.tgz",
-          "integrity": "sha512-v/SpyMzLbtkmh45zUdaqLAaqXqzPdSrw8p4cQVO0/w6YiYfpj4k+Wkzhn68qk9br+H+0qfddhdPEVnbmBPfXVQ==",
+          "version": "6.0.22",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.22.tgz",
+          "integrity": "sha512-Toc9lLoUASwGqxBSJGTVcOQiDqjK+Z2XlWBg+IgYwQMY9vA2f7iMpXVc1GpPcfTSyM5lkxNo0oDwDRO+wm7XHA==",
           "requires": {
-            "chalk": "2.3.0",
+            "chalk": "2.4.1",
             "source-map": "0.6.1",
-            "supports-color": "5.1.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "5.1.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.1.0.tgz",
-              "integrity": "sha512-Ry0AwkoKjDpVKK4sV4h6o3UJmNRbjYm2uXhwfj3J56lMVdvnUNqzQVRztOOMGQ++w1K/TjNDFvpJk0F/LoeBCQ==",
-              "requires": {
-                "has-flag": "2.0.0"
-              }
-            }
+            "supports-color": "5.4.0"
           }
         },
         "source-map": {
@@ -3704,11 +3719,11 @@
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "supports-color": {
-          "version": "4.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
-          "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+          "version": "5.4.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
+          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
           "requires": {
-            "has-flag": "2.0.0"
+            "has-flag": "3.0.0"
           }
         }
       }
@@ -3727,7 +3742,6 @@
       "version": "2.2.14",
       "resolved": "https://registry.npmjs.org/semantic-ui-less/-/semantic-ui-less-2.2.14.tgz",
       "integrity": "sha512-JLkTqjOtct+OwM/JRv0SH76gCC0eE98xp5G4D29e9VbJ66QjWD3nB3waB7drpaMUFXo/YbKcyNOJBgMamcJI0Q==",
-      "dev": true,
       "requires": {
         "jquery": "3.2.1"
       }
@@ -4363,9 +4377,9 @@
       }
     },
     "tty-browserify": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
-      "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz",
+      "integrity": "sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw=="
     },
     "tunnel-agent": {
       "version": "0.6.0",
@@ -4393,18 +4407,18 @@
       "dev": true
     },
     "uglify-js": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.5.tgz",
-      "integrity": "sha512-ZebM2kgBL/UI9rKeAbsS2J0UPPv7SBy5hJNZml/YxB1zC6JK8IztcPs+cxilE4pu0li6vadVSFqiO7xFTKuSrg==",
+      "version": "3.3.21",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.21.tgz",
+      "integrity": "sha512-uy82472lH8tshK3jS3c5IFb5MmNKd/5qyBd0ih8sM42L3jWvxnE339U9gZU1zufnLVs98Stib9twq8dLm2XYCA==",
       "requires": {
-        "commander": "2.12.2",
+        "commander": "2.15.1",
         "source-map": "0.6.1"
       },
       "dependencies": {
         "commander": {
-          "version": "2.12.2",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.12.2.tgz",
-          "integrity": "sha512-BFnaq5ZOGcDN7FlrtBT4xxkgIToalIIxwjxLWVJ8bGTpe1LroqMiqQXdA7ygc7CRvaYS+9zfPGFnJqFSayx+AA=="
+          "version": "2.15.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
+          "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag=="
         },
         "source-map": {
           "version": "0.6.1",
@@ -4547,12 +4561,9 @@
       }
     },
     "vm-browserify": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
-      "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=",
-      "requires": {
-        "indexof": "0.0.1"
-      }
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.0.1.tgz",
+      "integrity": "sha512-EqzLchIMYLBjRPoqVsEkZOa/4Vr2RfOWbd58F+I/Gj79AYTrsseMunxbbSkbYfrqZaXSuPBBXNSOhtJgg0PpmA=="
     },
     "warning-symbol": {
       "version": "0.1.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "0.1.29",
+  "version": "0.2.3",
   "description": "LEGO MINDSTORMS EV3 for Microsoft MakeCode",
   "private": true,
   "keywords": [
@@ -30,23 +30,17 @@
     "docs/*/*.md",
     "docs/*/*/*.md"
   ],
-  "main": "built/pxtrequire.js",
-  "typings": "built/pxtrequire.d.ts",
   "devDependencies": {
     "typescript": "2.6.1",
-    "rtlcss": "^2.1.2",
-    "autoprefixer": "^6.7.6",
-    "less": "2.7.3",
     "semantic-ui-less": "2.2.14",
     "@types/bluebird": "2.0.33",
-    "@types/jquery": "3.2.16",
     "@types/marked": "0.3.0",
     "@types/node": "8.0.53",
     "webfonts-generator": "^0.4.0"
   },
   "dependencies": {
-    "pxt-common-packages": "0.21.9",
-    "pxt-core": "3.12.4"
+    "pxt-common-packages": "0.22.7",
+    "pxt-core": "3.13.30"
   },
   "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",
@@ -99,6 +98,8 @@
         "betaUrl": "https://makecode.legoeducation.com/about",
         "driveDisplayName": "EV3",
         "boardName": "LEGO® MINDSTORMS® Education EV3",
+        "copyrightText": "LEGO, the LEGO logo, MINDSTORMS and the MINDSTORMS EV3 logo are trademarks and/ or copyrights of the LEGO Group. ©2018 The LEGO Group. All rights reserved.",
+        "crowdinProject": "kindscript",
         "selectLanguage": true,
         "availableLocales": [
             "en"
@@ -107,11 +108,11 @@
         "docMenu": [
             {
                 "name": "Support",
-                "path": "http://service.lego.com"
+                "path": "https://www.lego.com/service/"
             },
             {
-                "name": "Upgrade Firmware",
-                "path": "https://ev3manager.education.lego.com/"
+                "name": "Troubleshoot",
+                "path": "/troubleshoot"
             },
             {
                 "name": "Blocks",
@@ -162,11 +163,16 @@
             "variables": "\uf111",
             "text": "\uf110",
             "functions": "\uf108",
-            "arrays": "\uf109"
+            "arrays": "\uf109",
+            "search": "\uf11a",
+            "addpackage": "\uf105",
+            "advancedcollapsed": "\uf113",
+            "advancedexpanded": "\uf114"
         },
         "monacoColors": {
             "editor.background": "#f9f9f9"
-        }
+        },
+        "fileNameExclusiveFilter": "[^a-zA-Z]"
     },
     "ignoreDocsErrors": true
 }

sim/state/motornode.ts

@@ -17,7 +17,8 @@ namespace pxsim {
         private speedCmdTime: number;
         private _synchedMotor: MotorNode; // non-null if synchronized
 
-        private manualSpeed: number = undefined;
+        private manualReferenceAngle: number = undefined;
+        private manualAngle: number = undefined;
 
         constructor(port: number, large: boolean) {
             super(port);
@@ -103,14 +104,18 @@ namespace pxsim {
         }
 
         manualMotorDown() {
+            this.manualReferenceAngle = this.angle;
+            this.manualAngle = 0;
         }
 
-        manualMotorMove(speed: number) {
-            this.manualSpeed = speed;
+        // position: 0, 360
+        manualMotorAngle(angle: number) {
+            this.manualAngle = angle;
         }
 
         manualMotorUp() {
-            this.manualSpeed = undefined;
+            delete this.manualReferenceAngle;
+            delete this.manualAngle;
         }
 
         updateState(elapsed: number) {
@@ -126,7 +131,7 @@ namespace pxsim {
         }
 
         private updateStateStep(elapsed: number) {
-            if (!this.manualSpeed) {
+            if (this.manualAngle === undefined) {
                 // compute new speed
                 switch (this.speedCmd) {
                     case DAL.opOutputSpeed:
@@ -202,7 +207,11 @@ namespace pxsim {
                 }
             }
             else {
-                this.speed = this.manualSpeed;
+                // the user is holding the handle - so position is the angle
+                this.speed = 0;
+                // rotate by the desired angle change
+                this.angle = this.manualReferenceAngle + this.manualAngle;
+                this.setChangedState();
             }
             this.speed = Math.round(this.speed); // integer only
 
@@ -217,7 +226,8 @@ namespace pxsim {
 
             // if the motor was stopped or there are no speed commands,
             // let it coast to speed 0
-            if (this.speed && !(this.started || this.speedCmd)) {
+            if ((this.manualReferenceAngle === undefined)
+                && this.speed && !(this.started || this.speedCmd)) {
                 // decay speed 5% per tick
                 this.speed = Math.round(Math.max(0, Math.abs(this.speed) - 10) * sign(this.speed));
             }

sim/tsconfig.json

@@ -9,7 +9,7 @@
         "newLine": "LF",
         "sourceMap": false,
         "lib": ["dom", "dom.iterable", "scripthost", "es6"],
-        "types": ["jquery", "bluebird"],
+        "types": ["bluebird"],
         "typeRoots": ["../node_modules/@types"]
     }
 }

sim/visuals/board.ts

@@ -49,14 +49,14 @@ namespace pxsim.visuals {
             font-size:16px;
         }
         .sim-text.large {
-            font-size:30px;
+            font-size:20px;
         }
         .sim-text.number {
             font-family: Courier, Lato, Work Sans, PT Serif, Source Serif Pro;
             /*font-weight: bold;*/
         }
         .sim-text.inverted {
-            fill:#5A5A5A;
+            fill: #5A5A5A; /*#F12B21;*/
         }
 
         .no-drag, .sim-text, .sim-text-pin {
@@ -74,6 +74,10 @@ namespace pxsim.visuals {
             stroke: #000;
             cursor: pointer;
         }
+        .sim-color-selected {
+            stroke-width: 1px !important;
+            stroke: #A8AAA8 !important;
+        }
         .sim-color-wheel-half:hover {
             stroke-width: 1;
             stroke: #000;
@@ -97,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 => {
@@ -108,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 {
@@ -136,6 +152,8 @@ namespace pxsim.visuals {
 
         private cachedControlNodes: { [index: string]: View[] } = {};
         private cachedDisplayViews: { [index: string]: LayoutElement[] } = {};
+        private cachedCloseIcons: { [index: string]: View } = {};
+        private cachedBackgroundViews: { [index: string]: View } = {};
 
         private screenCanvas: HTMLCanvasElement;
         private screenCanvasCtx: CanvasRenderingContext2D;
@@ -298,8 +316,22 @@ namespace pxsim.visuals {
             return undefined;
         }
 
-        private getCloseIconView() {
-            return new CloseIconControl(this.element, this.defs, new PortNode(-1), -1);
+        private getCloseIconView(port: number) {
+            if (this.cachedCloseIcons[port]) {
+                return this.cachedCloseIcons[port];
+            }
+            const closeIcon = new CloseIconControl(this.element, this.defs, new PortNode(-1), -1);
+            this.cachedCloseIcons[port] = closeIcon;
+            return closeIcon;
+        }
+
+        private getBackgroundView(port: number) {
+            if (this.cachedBackgroundViews[port]) {
+                return this.cachedBackgroundViews[port];
+            }
+            const backgroundView = new BackgroundViewControl(this.element, this.defs, new PortNode(-1), -1);
+            this.cachedBackgroundViews[port] = backgroundView;
+            return backgroundView;
         }
 
         private buildDom() {
@@ -314,12 +346,12 @@ 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);
             EV3View.isPreviousBrickLandscape() ? this.layoutView.setlectBrick() : this.layoutView.unselectBrick();
-            
+
             this.resize();
 
             // Add Screen canvas to board
@@ -392,29 +424,29 @@ namespace pxsim.visuals {
             this.layoutView.getLandscapeBrick().kill();
 
             // Save previous inputs for the next cycle
-            EV3View.previousSelectedInputs = ev3board().getInputNodes().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1)
-            EV3View.previousSeletedOutputs = ev3board().getMotors().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1);
+            EV3View.previousSelectedInputs = {};
+            ev3board().getInputNodes().forEach((node, index) =>
+                EV3View.previousSelectedInputs[index] = (this.getDisplayViewForNode(node.id, index).getSelected()));
+            EV3View.previousSeletedOutputs = {};
+            ev3board().getMotors().forEach((node, index) =>
+                EV3View.previousSeletedOutputs[index] = (this.getDisplayViewForNode(node.id, index).getSelected()));
             EV3View.previousBrickLandscape = this.layoutView.isBrickLandscape();
         }
 
-        private static previousSelectedInputs: number[];
-        private static previousSeletedOutputs: number[];
+        private static previousSelectedInputs: pxt.Map<boolean> = {};
+        private static previousSeletedOutputs: pxt.Map<boolean> = {};
         private static previousBrickLandscape: boolean;
 
-        private static isPreviousInputSelected(index: number, id: number) {
-            if (EV3View.previousSelectedInputs && EV3View.previousSelectedInputs[index] == id) {
-                EV3View.previousSelectedInputs[index] = undefined;
-                return true;
-            }
-            return false;
+        private static isPreviousInputSelected(index: number) {
+            const previousInput = EV3View.previousSelectedInputs[index];
+            delete EV3View.previousSelectedInputs[index];
+            return previousInput;
         }
 
-        private static isPreviousOutputSelected(index: number, id: number) {
-            if (EV3View.previousSeletedOutputs && EV3View.previousSeletedOutputs[index] == id) {
-                EV3View.previousSeletedOutputs[index] = undefined;
-                return true;
-            }
-            return false;
+        private static isPreviousOutputSelected(index: number) {
+            const previousOutput = EV3View.previousSeletedOutputs[index];
+            delete EV3View.previousSeletedOutputs[index];
+            return previousOutput;
         }
 
         private static isPreviousBrickLandscape() {
@@ -463,11 +495,13 @@ namespace pxsim.visuals {
                 const view = this.getDisplayViewForNode(node.id, index);
                 if (!node.didChange() && !view.didChange()) return;
                 if (view) {
-                    const isSelected = EV3View.isPreviousInputSelected(index, node.id) || view.getSelected();
-                    if (isSelected && !view.getSelected()) view.setSelected(true);
+                    const previousSelected = EV3View.isPreviousInputSelected(index);
+                    const isSelected = previousSelected != undefined ? previousSelected : view.getSelected();
+                    view.setSelected(isSelected);
                     const control = isSelected ? this.getControlForNode(node.id, index, !node.modeChange()) : undefined;
-                    const closeIcon = control && view.hasClose() ? this.getCloseIconView() : undefined;
-                    this.layoutView.setInput(index, view, control, closeIcon);
+                    const closeIcon = control ? this.getCloseIconView(index + 10) : undefined;
+                    const backgroundView = control && view.hasBackground() ? this.getBackgroundView(index + 10) : undefined;
+                    this.layoutView.setInput(index, view, control, closeIcon, backgroundView);
                     view.updateState();
                     if (control) control.updateState();
                 }
@@ -485,11 +519,13 @@ namespace pxsim.visuals {
                 const view = this.getDisplayViewForNode(node.id, index);
                 if (!node.didChange() && !view.didChange()) return;
                 if (view) {
-                    const isSelected = EV3View.isPreviousOutputSelected(index, node.id) || view.getSelected();
-                    if (isSelected && !view.getSelected()) view.setSelected(true);
+                    const previousSelected = EV3View.isPreviousOutputSelected(index);
+                    const isSelected = previousSelected != undefined ? previousSelected : view.getSelected();
+                    view.setSelected(isSelected);
                     const control = isSelected ? this.getControlForNode(node.id, index) : undefined;
-                    const closeIcon = control ? this.getCloseIconView() : undefined;
-                    this.layoutView.setOutput(index, view, control, closeIcon);
+                    const closeIcon = control ? this.getCloseIconView(index) : undefined;
+                    const backgroundView = control && view.hasBackground() ? this.getBackgroundView(index) : undefined;
+                    this.layoutView.setOutput(index, view, control, closeIcon, backgroundView);
                     view.updateState();
                     if (control) control.updateState();
                 }

sim/visuals/controlView.ts

@@ -2,8 +2,8 @@
 
 namespace pxsim.visuals {
 
-    export const CONTROL_WIDTH = 87.5;
-    export const CONTROL_HEIGHT = 175;
+    export const CONTROL_WIDTH = 76.84;
+    export const CONTROL_HEIGHT = 112.72;
 
     export const CONTROL_TEXT_COLOR = '#000';
 
@@ -43,28 +43,29 @@ namespace pxsim.visuals {
             return this.content;
         }
 
-        public resize(width: number, height: number) {
+        public resize(width: number, height: number, strict?: boolean) {
             super.resize(width, height);
-            this.updateDimensions(width, height);
+            this.updateDimensions(width, height, strict);
         }
 
-        private updateDimensions(width: number, height: number) {
+        private updateDimensions(width: number, height: number, strict?: boolean) {
             if (this.content) {
                 const currentWidth = this.getInnerWidth();
                 const currentHeight = this.getInnerHeight();
                 const newHeight = currentHeight / currentWidth * width;
                 const newWidth = currentWidth / currentHeight * height;
-                if (newHeight > height) {
+                if (strict) {
+                    this.content.setAttribute('width', `${width}`);
+                    this.content.setAttribute('height', `${height}`);
+                } else if (newHeight > height) {
                     // scale width instead
                     this.content.setAttribute('width', `${newWidth}`);
                     this.content.setAttribute('height', `${height}`);
-                    // translate to the middle (width)
-                    this.translate(width / 2 - newWidth / 2, 0);
+                    this.width = newWidth;
                 } else {
                     this.content.setAttribute('width', `${width}`);
                     this.content.setAttribute('height', `${newHeight}`);
-                    // translate to the middle (height)
-                    this.translate(0, height / 2 - newHeight / 2);
+                    this.height = newHeight;
                 }
             }
         }

sim/visuals/controls/backgroundView.ts

@@ -0,0 +1,42 @@
+
+
+namespace pxsim.visuals {
+
+    export class BackgroundViewControl extends ControlView<PortNode> {
+        private backgroundGroup: SVGGElement;
+        private backgroundRect: SVGRectElement;
+
+        getInnerView() {
+            this.backgroundGroup = svg.elt("g") as SVGGElement;
+            this.backgroundRect = pxsim.svg.child(this.backgroundGroup,
+                "rect", {
+                    'x': 0, 'y': 0,
+                    'width': '100%',
+                    'height': '100%',
+                    'style': `fill: ${this.theme.backgroundViewColor};stroke: #A8A9A8; stroke-width: 3px; stroke-opacity: 0.2`
+                }) as SVGRectElement;
+            return this.backgroundGroup;
+        }
+
+        buildDom(): SVGElement {
+            this.content = svg.elt("svg", { width: "100%", height: "100%"}) as SVGSVGElement;
+            this.content.appendChild(this.getInnerView());
+            return this.content;
+        }
+
+        public resize(width: number, height: number, strict?: boolean) {
+            super.resize(width, height, strict);
+            this.backgroundRect.setAttribute('stroke-dasharray', `${height + width + height} 1000`);
+            this.backgroundRect.setAttribute('stroke-dashoffset', `-${width}`);
+        }
+
+        getInnerWidth(): number {
+            return 76.84;
+        }
+
+        getInnerHeight(): number {
+            return 173.86;
+        }
+    }
+
+}

sim/visuals/controls/closeIcon.ts

@@ -9,7 +9,7 @@ namespace pxsim.visuals {
             this.closeGroup = svg.elt("g") as SVGGElement;
             this.closeGroup.style.cursor = 'pointer';
             const circleCloseWrapper = pxsim.svg.child(this.closeGroup, "g");
-            pxsim.svg.child(circleCloseWrapper, "circle", { 'cx': "16", 'cy': "16", 'r': "16", 'style': "fill: #fff" });
+            pxsim.svg.child(circleCloseWrapper, "circle", { 'cx': "16", 'cy': "16", 'r': "16", 'style': "fill: transparent;" });
             pxsim.svg.child(circleCloseWrapper, "circle", { 'cx': "16", 'cy': "16", 'r': "15", 'style': "fill: none;stroke: #a8aaa8;stroke-width: 2px" });
             pxsim.svg.child(this.closeGroup, "rect", { 'x': "10", 'y': "16", 'width': "18", 'height': "2", 'transform': "translate(-9.46 17.41) rotate(-45)", 'style': "fill: #a8aaa8" });
             pxsim.svg.child(this.closeGroup, "rect", { 'x': "18", 'y': "8", 'width': "2", 'height': "18", 'transform': "translate(-9.46 17.41) rotate(-45)", 'style': "fill: #a8aaa8" });
@@ -18,15 +18,11 @@ namespace pxsim.visuals {
         }
 
         buildDom(): SVGElement {
-            this.content = svg.elt("svg", { width: "100%", height: "100%"}) as SVGSVGElement;
+            this.content = svg.elt("svg", { width: "100%", height: "100%", viewBox:"0 0 32 32"}) as SVGSVGElement;
             this.content.appendChild(this.getInnerView());
             return this.content;
         }
 
-        public resize(width: number, height: number) {
-            super.resize(width, height);
-        }
-
         public getInnerHeight() {
             return 32;
         }

sim/visuals/controls/colorGrid.ts

@@ -5,28 +5,36 @@ namespace pxsim.visuals {
     export class ColorGridControl extends ControlView<ColorSensorNode> {
         private group: SVGGElement;
 
+        private static colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey', 'white'];
+        private static colorValue = [5, 4, 2, 3, 1, 7, 6];
+
+        private colorDivs: Element[] = [];
+
         getInnerView() {
             this.group = svg.elt("g") as SVGGElement;
             this.group.setAttribute("transform", `translate(2, 2.5) scale(0.6)`)
 
-            const colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey'];
             const colors = ['#f12a21', '#ffd01b', '#006db3', '#00934b', '#000', '#6c2d00'];
-            const colorValue = [5, 4, 2, 3, 1, 7];
+            const colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey'];
 
             let cy = -4;
             for (let c = 0; c < colorIds.length; c++) {
                 const cx = c % 2 == 0 ? 2.2 : 7.5;
                 if (c % 2 == 0) cy += 5;
                 if (colorIds[c]) {
-                    const circle = pxsim.svg.child(this.group, "circle", { 'class': 'sim-color-grid-circle', 'cx': cx, 'cy': cy, 'r': '2', 'style': `fill: ${colors[c]}` });
+                    const circle = pxsim.svg.child(this.group, "circle", { 
+                        'class': `sim-color-grid-circle sim-color-grid-${colorIds[c]}`,
+                        'cx': cx, 'cy': cy, 'r': '2', 'style': `fill: ${colors[c]}` });
+                    this.colorDivs.push(circle);
                     pointerEvents.down.forEach(evid => circle.addEventListener(evid, ev => {
-                        this.setColor(colorValue[c]);
+                        this.setColor(ColorGridControl.colorValue[c]);
                     }));
                 }
             }
 
             const whiteCircleWrapper = pxsim.svg.child(this.group, "g", { 'id': 'white-cirlce-wrapper' });
-            pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` });
+            const circle = pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle sim-color-grid-white', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` });
+            this.colorDivs.push(circle);
             pxsim.svg.child(whiteCircleWrapper, "circle", { 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: none;stroke: #94989b;stroke-width: 0.1px` });
             pointerEvents.down.forEach(evid => whiteCircleWrapper.addEventListener(evid, ev => {
                 this.setColor(6);
@@ -42,9 +50,34 @@ namespace pxsim.visuals {
             return 15;
         }
 
+        public updateState() {
+            if (!this.visible) {
+                return;
+            }
+            const node = this.state;
+            const color = node.getValue();
+
+            for (let c = 0; c < ColorGridControl.colorValue.length; c++) {
+                const colorId = ColorGridControl.colorIds[c];
+                const colorValue = ColorGridControl.colorValue[c];
+                const colorDiv = this.colorDivs[c] as HTMLElement;
+
+                if (colorValue == color) {
+                    pxsim.U.addClass(colorDiv, 'sim-color-selected');
+                } else {
+                    pxsim.U.removeClass(colorDiv, 'sim-color-selected');
+                }
+            }
+        }
+
         private setColor(color: number) {
             const state = this.state;
-            state.setColor(color);
+            const currentColor = state.getValue();
+            if (currentColor == color) {
+                state.setColor(0);
+            } else {
+                state.setColor(color);
+            }
         }
     }
 }

sim/visuals/controls/colorWheel.ts

@@ -15,7 +15,7 @@ namespace pxsim.visuals {
         }
 
         private getReporterHeight() {
-            return 58;
+            return 38;
         }
 
         private getSliderWidth() {
@@ -23,10 +23,10 @@ namespace pxsim.visuals {
         }
 
         private getSliderHeight() {
-            return 111;
+            return 131;
         }
 
-        private getMax() {
+        private getMaxValue() {
             return 100;
         }
 
@@ -36,9 +36,9 @@ namespace pxsim.visuals {
             }
             const node = this.state;
             const percentage = node.getValue();
-            const inversePercentage = this.getMax() - percentage;
+            const inversePercentage = this.getMaxValue() - percentage;
             svg.setGradientValue(this.colorGradient, inversePercentage + "%");
-            this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}`;
+            this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}%`;
         }
 
         updateColorLevel(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
@@ -47,7 +47,7 @@ namespace pxsim.visuals {
             const height = bBox.height;
             let t = Math.max(0, Math.min(1, (height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height));
             const state = this.state;
-            state.setColor(t * this.getMax());
+            state.setColor(t * this.getMaxValue());
         }
 
         getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
@@ -60,7 +60,7 @@ namespace pxsim.visuals {
             svg.setGradientColors(this.colorGradient, "black", "yellow");
 
             const reporterGroup = pxsim.svg.child(this.group, "g");
-            reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 50)`);
+            reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 20)`);
             this.reporter = pxsim.svg.child(reporterGroup, "text", { 'text-anchor': 'middle', 'x': 0, 'y': '0', 'class': 'sim-text number large inverted' }) as SVGTextElement;
 
             const sliderGroup = pxsim.svg.child(this.group, "g");
@@ -93,9 +93,6 @@ namespace pxsim.visuals {
             }, () => {
                 captured = false;
                 rect.setAttribute('cursor', '-webkit-grab');
-            }, () => {
-                captured = false;
-                rect.setAttribute('cursor', '-webkit-grab');
             })
 
             return this.group;

sim/visuals/controls/distanceSlider.ts

@@ -7,11 +7,59 @@ namespace pxsim.visuals {
         private gradient: SVGLinearGradientElement;
         private slider: SVGGElement;
 
+        private rect: SVGRectElement;
+
         private reporter: SVGTextElement;
 
         private static SLIDER_HANDLE_HEIGHT = 26;
         private static SLIDER_SIDE_PADDING = 6;
 
+        getInnerWidth() {
+            return 111;
+        }
+
+        getInnerHeight() {
+            return 192;
+        }
+
+        private getReporterHeight() {
+            return 38;
+        }
+
+        private getSliderWidth() {
+            return 62;
+        }
+
+        private getSliderHeight() {
+            return 131;
+        }
+
+        private getMaxValue() {
+            return 250; // cm
+        }
+
+        updateState() {
+            if (!this.visible) {
+                return;
+            }
+            const node = this.state;
+            const percentage = node.getValue() / 10; /* convert back to cm */
+            const y = this.getSliderHeight() * percentage / this.getMaxValue();
+            this.slider.setAttribute("transform", `translate(0, ${y - DistanceSliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
+            // Update reporter text
+            this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}cm`;
+        }
+
+        updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
+            let cur = svg.cursorPoint(pt, parent, ev);
+            const bBox = this.rect.getBoundingClientRect();
+            const height = bBox.height;
+            let t = Math.max(0, Math.min(1, (height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height));
+
+            const state = this.state;
+            state.setDistance((1 - t) * (this.getMaxValue()));
+        }
+
         getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
             let gid = "gradient-slider-" + this.getPort();
             this.group = svg.elt("g") as SVGGElement;
@@ -28,13 +76,14 @@ namespace pxsim.visuals {
             this.group = svg.elt("g") as SVGGElement;
 
             const reporterGroup = pxsim.svg.child(this.group, "g");
-            reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 42)`);
+            reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 20)`);
             this.reporter = pxsim.svg.child(reporterGroup, "text", { 'text-anchor': 'middle', 'x': 0, 'y': '0', 'class': 'sim-text number large inverted' }) as SVGTextElement;
 
             const sliderGroup = pxsim.svg.child(this.group, "g");
-            sliderGroup.setAttribute("transform", `translate(${this.getWidth() / 2 - this.getSliderWidth() / 2}, ${this.getReporterHeight()})`)
+            sliderGroup.setAttribute("transform", `translate(${this.getInnerWidth() / 2 - this.getSliderWidth() / 2}, ${this.getReporterHeight()})`)
 
             const rect = pxsim.svg.child(sliderGroup, "rect", { 'x': DistanceSliderControl.SLIDER_SIDE_PADDING, 'y': 2, 'width': this.getSliderWidth() - DistanceSliderControl.SLIDER_SIDE_PADDING * 2, 'height': this.getSliderHeight(), 'style': `fill: url(#${gid})` });
+            this.rect = rect as SVGRectElement;
 
             this.slider = pxsim.svg.child(sliderGroup, "g", { "transform": "translate(0,0)" }) as SVGGElement;
             const sliderInner = pxsim.svg.child(this.slider, "g");
@@ -48,7 +97,7 @@ namespace pxsim.visuals {
                 height: this.getInnerHeight(),
                 opacity: 0,
                 cursor: '-webkit-grab'
-            })
+            }) as SVGRectElement;
 
             let pt = parent.createSVGPoint();
             let captured = false;
@@ -67,64 +116,11 @@ namespace pxsim.visuals {
             }, () => {
                 captured = false;
                 dragSurface.setAttribute('cursor', '-webkit-grab');
-            }, () => {
-                captured = false;
-                dragSurface.setAttribute('cursor', '-webkit-grab');
             })
 
             return this.group;
         }
 
-        getInnerHeight() {
-            return 192;
-        }
-
-        getInnerWidth() {
-            return 111;
-        }
-
-        private getReporterHeight() {
-            return 50;
-        }
-
-        private getSliderHeight() {
-            return 110;
-        }
-
-        private getSliderWidth() {
-            return 62;
-        }
-
-        updateState() {
-            if (!this.visible) {
-                return;
-            }
-            const node = this.state;
-            const percentage = node.getValue() / 10; /* convert back to cm */
-            const y = this.getSliderHeight() * percentage / this.getMax();
-            this.slider.setAttribute("transform", `translate(0, ${y - DistanceSliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
-            // Update reporter text
-            this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}`;
-        }
-
-        private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
-            let cur = svg.cursorPoint(pt, parent, ev);
-            const height = this.getSliderHeight();
-            const bBox = this.content.getBoundingClientRect();
-            let t = Math.max(0, Math.min(1, (DistanceSliderControl.SLIDER_HANDLE_HEIGHT + height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height))
-
-            const state = this.state;
-            state.setDistance((1 - t) * (this.getMax()));
-        }
-
-        private getMin() {
-            return 0;
-        }
-
-        private getMax() {
-            return 250; //cm
-        }
-
         private getGradientDefinition(): LinearGradientDefinition {
             return {
                 stops: [

sim/visuals/controls/motorSlider.ts

@@ -13,7 +13,7 @@ namespace pxsim.visuals {
 
         private static SLIDER_RADIUS = 100;
 
-        private internalSpeed: number = 0;
+        private internalAngle: number = 0;
 
         getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
             this.group = svg.elt("g") as SVGGElement;
@@ -66,9 +66,6 @@ namespace pxsim.visuals {
             }, () => {
                 captured = false;
                 this.handleSliderUp();
-            }, () => {
-                captured = false;
-                this.handleSliderUp();
             })
 
             return this.group;
@@ -105,9 +102,9 @@ namespace pxsim.visuals {
             } else if (dx >= 0 && dy <= 0) {
                 deg = 90 - deg;
             }
-            const value = Math.abs(Math.ceil((deg % 360) / 360 * this.getMax()));
+            const value = Math.abs(Math.ceil((deg % 360)));
 
-            this.internalSpeed = value;
+            this.internalAngle = value;
             this.updateDial();
 
             this.prevVal = deg;
@@ -122,7 +119,7 @@ namespace pxsim.visuals {
         private handleSliderMove() {
             this.dial.setAttribute('cursor', '-webkit-grabbing');
             const state = this.state;
-            state.manualMotorMove(this.internalSpeed);
+            state.manualMotorAngle(this.internalAngle);
         }
 
         private handleSliderUp() {
@@ -130,19 +127,18 @@ namespace pxsim.visuals {
             const state = this.state;
             state.manualMotorUp();
 
-            this.internalSpeed = 0;
+            this.internalAngle = 0;
             this.updateDial();
         }
 
         private updateDial() {
-            let speed = this.internalSpeed;
+            let angle = this.internalAngle;
 
             // Update dial position
-            const deg = speed / this.getMax() * 360; // degrees
             const radius = MotorSliderControl.SLIDER_RADIUS;
             const dialRadius = 5;
-            const x = Math.ceil((radius - dialRadius) * Math.sin(deg * Math.PI / 180)) + radius;
-            const y = Math.ceil((radius - dialRadius) * -Math.cos(deg * Math.PI / 180)) + radius;
+            const x = Math.ceil((radius - dialRadius) * Math.sin(angle * Math.PI / 180)) + radius;
+            const y = Math.ceil((radius - dialRadius) * -Math.cos(angle * Math.PI / 180)) + radius;
             this.dial.setAttribute('transform', `translate(${x}, ${y})`);
         }
 
@@ -151,18 +147,10 @@ namespace pxsim.visuals {
                 return;
             }
             const node = this.state;
-            const speed = node.getSpeed();
+            const angle = node.getAngle() % 360;
 
             // Update reporter
-            this.reporter.textContent = `${speed}`;
-        }
-
-        private getMin() {
-            return 0;
-        }
-
-        private getMax() {
-            return 100;
+            this.reporter.textContent = `${angle}°`;
         }
     }
 

sim/visuals/controls/proximitySlider.ts

@@ -7,11 +7,60 @@ namespace pxsim.visuals {
         private gradient: SVGLinearGradientElement;
         private slider: SVGGElement;
 
+        private rect: SVGRectElement;
+
         private reporter: SVGTextElement;
 
         private static SLIDER_HANDLE_HEIGHT = 26;
         private static SLIDER_SIDE_PADDING = 6;
 
+        getInnerWidth() {
+            return 111;
+        }
+
+        getInnerHeight() {
+            return 192;
+        }
+
+        private getReporterHeight() {
+            return 38;
+        }
+
+        private getSliderWidth() {
+            return 62;
+        }
+
+        private getSliderHeight() {
+            return 131;
+        }
+
+        private getMaxValue() {
+            return 100;
+        }
+
+        updateState() {
+            if (!this.visible) {
+                return;
+            }
+            const node = this.state;
+            const percentage = node.getValue(); 
+            const y = this.getSliderHeight() * percentage / this.getMaxValue();
+            this.slider.setAttribute("transform", `translate(0, ${y - ProximitySliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
+            // Update reporter text
+            this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}`;
+        }
+
+        private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
+            let cur = svg.cursorPoint(pt, parent, ev);
+            const bBox = this.rect.getBoundingClientRect();
+            const height = bBox.height;
+            let t = Math.max(0, Math.min(1, (height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height));
+
+            const state = this.state;
+            const v = Math.floor((1 - t) * (this.getMaxValue()));
+            state.setPromixity(v);
+        }
+
         getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
             let gid = "gradient-slider-" + this.getId();
             this.group = svg.elt("g") as SVGGElement;
@@ -27,13 +76,14 @@ namespace pxsim.visuals {
             this.group = svg.elt("g") as SVGGElement;
 
             const reporterGroup = pxsim.svg.child(this.group, "g");
-            reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 42)`);
+            reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 20)`);
             this.reporter = pxsim.svg.child(reporterGroup, "text", { 'text-anchor': 'middle', 'x': 0, 'y': '0', 'class': 'sim-text number large inverted' }) as SVGTextElement;
 
             const sliderGroup = pxsim.svg.child(this.group, "g");
-            sliderGroup.setAttribute("transform", `translate(${this.getWidth() / 2 - this.getSliderWidth() / 2}, ${this.getReporterHeight()})`)
+            sliderGroup.setAttribute("transform", `translate(${this.getInnerWidth() / 2 - this.getSliderWidth() / 2}, ${this.getReporterHeight()})`)
 
             const rect = pxsim.svg.child(sliderGroup, "rect", { 'x': ProximitySliderControl.SLIDER_SIDE_PADDING, 'y': 2, 'width': this.getSliderWidth() - ProximitySliderControl.SLIDER_SIDE_PADDING * 2, 'height': this.getSliderHeight(), 'style': `fill: url(#${gid})` });
+            this.rect = rect as SVGRectElement;
 
             this.slider = pxsim.svg.child(sliderGroup, "g", { "transform": "translate(0,0)" }) as SVGGElement;
             const sliderInner = pxsim.svg.child(this.slider, "g");
@@ -66,65 +116,11 @@ namespace pxsim.visuals {
             }, () => {
                 captured = false;
                 dragSurface.setAttribute('cursor', '-webkit-grab');
-            }, () => {
-                captured = false;
-                dragSurface.setAttribute('cursor', '-webkit-grab');
             })
 
             return this.group;
         }
 
-        getInnerHeight() {
-            return 192;
-        }
-
-        getInnerWidth() {
-            return 111;
-        }
-
-        private getReporterHeight() {
-            return 50;
-        }
-
-        private getSliderHeight() {
-            return 110;
-        }
-
-        private getSliderWidth() {
-            return 62;
-        }
-
-        updateState() {
-            if (!this.visible) {
-                return;
-            }
-            const node = this.state;
-            const percentage = node.getValue(); 
-            const y = this.getSliderHeight() * percentage / this.getMax();
-            this.slider.setAttribute("transform", `translate(0, ${y - ProximitySliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
-            // Update reporter text
-            this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}`;
-        }
-
-        private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
-            let cur = svg.cursorPoint(pt, parent, ev);
-            const height = this.getSliderHeight();
-            const bBox = this.content.getBoundingClientRect();
-            let t = Math.max(0, Math.min(1, (ProximitySliderControl.SLIDER_HANDLE_HEIGHT + height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height))
-
-            const state = this.state;
-            const v = Math.floor((1 - t) * (this.getMax()));
-            state.setPromixity(v);
-        }
-
-        private getMin() {
-            return 0;
-        }
-
-        private getMax() {
-            return 100;
-        }
-
         private getGradientDefinition(): LinearGradientDefinition {
             return {
                 stops: [

sim/visuals/controls/rotationSlider.ts

@@ -13,10 +13,10 @@ namespace pxsim.visuals {
             this.group = svg.elt("g") as SVGGElement;
 
             const sliderGroup = pxsim.svg.child(this.group, "g");
-            sliderGroup.setAttribute("transform", `translate(5, ${10 + this.getTopPadding()})`)
+            sliderGroup.setAttribute("transform", `translate(10,0)`);
 
             const rotationLine = pxsim.svg.child(sliderGroup, "g");
-            pxsim.svg.child(rotationLine, "path", { 'transform': 'translate(5.11 -31.1)', 'd': 'M68.71,99.5l6.1-8S61.3,79.91,42.69,78.35,12,83.14,6.49,85.63a48.69,48.69,0,0,0-9.6,5.89L3.16,99.3S19.27,87.7,37.51,87.94,68.71,99.5,68.71,99.5Z', 'style': 'fill: #626262' });
+            pxsim.svg.child(rotationLine, "path", { 'transform': 'translate(7.11 -31.1)', 'd': 'M68.71,99.5l6.1-8S61.3,79.91,42.69,78.35,12,83.14,6.49,85.63a48.69,48.69,0,0,0-9.6,5.89L3.16,99.3S19.27,87.7,37.51,87.94,68.71,99.5,68.71,99.5Z', 'style': 'fill: #626262' });
 
             this.slider = pxsim.svg.child(sliderGroup, "g") as SVGGElement;
             const handleInner = pxsim.svg.child(sliderGroup, "g");
@@ -47,15 +47,13 @@ namespace pxsim.visuals {
                 }
             }, () => {
                 captured = false;
-            }, () => {
-                captured = false;
             })
 
             return this.group;
         }
 
-        private getTopPadding() {
-            return this.getInnerHeight() / 4;
+        getInnerWidth() {
+            return RotationSliderControl.SLIDER_WIDTH * 1.5;
         }
 
         updateState() {

sim/visuals/layoutView.ts

@@ -12,6 +12,9 @@ namespace pxsim.visuals {
     export const MODULE_INNER_PADDING_RATIO = 1 / 35;
 
     export const MAX_MODULE_WIDTH = 100;
+    export const MIN_MODULE_HEIGHT = 40;
+
+    export const CLOSE_ICON_GAP_MULTIPLIER = 0.3;
 
     export interface LayoutElement extends View {
         getId(): number;
@@ -33,6 +36,9 @@ namespace pxsim.visuals {
         private inputCloseIcons: View[] = [];
         private outputCloseIcons: View[] = [];
 
+        private inputBackgroundViews: View[] = [];
+        private outputBackgroundViews: View[] = [];
+
         private inputWires: WireView[] = [];
         private outputWires: WireView[] = [];
 
@@ -73,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);
@@ -119,7 +125,7 @@ namespace pxsim.visuals {
             else this.setlectBrick();
         }
 
-        public setInput(port: number, view: LayoutElement, control?: View, closeIcon?: View) {
+        public setInput(port: number, view: LayoutElement, control?: View, closeIcon?: View, backgroundView?: View) {
             if (this.inputs[port] != view || this.inputControls[port] != control) {
                 if (this.inputs[port]) {
                     // Remove current input
@@ -131,10 +137,12 @@ namespace pxsim.visuals {
                 }
                 this.inputControls[port] = control;
                 this.inputCloseIcons[port] = closeIcon;
+                this.inputBackgroundViews[port] = backgroundView;
 
                 this.inputContainers[port].clear();
-                this.inputContainers[port].addView(view);
 
+                if (control && backgroundView) this.inputContainers[port].addView(backgroundView);
+                this.inputContainers[port].addView(view);
                 if (control) this.inputContainers[port].addView(control);
 
                 if (view.hasClick()) view.registerClick((ev: any) => {
@@ -155,7 +163,7 @@ namespace pxsim.visuals {
             this.position();
         }
 
-        public setOutput(port: number, view: LayoutElement, control?: View, closeIcon?: View) {
+        public setOutput(port: number, view: LayoutElement, control?: View, closeIcon?: View, backgroundView?: View) {
             if (this.outputs[port] != view || this.outputControls[port] != control) {
                 if (this.outputs[port]) {
                     // Remove current output
@@ -167,10 +175,12 @@ namespace pxsim.visuals {
                 }
                 this.outputControls[port] = control;
                 this.outputCloseIcons[port] = closeIcon;
+                this.outputBackgroundViews[port] = backgroundView;
 
                 this.outputContainers[port].clear();
-                this.outputContainers[port].addView(view);
 
+                if (control && backgroundView) this.outputContainers[port].addView(backgroundView);
+                this.outputContainers[port].addView(view);
                 if (control) this.outputContainers[port].addView(control);
 
                 if (view.hasClick()) view.registerClick((ev: any) => {
@@ -202,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
@@ -243,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);
             })
@@ -277,35 +293,48 @@ namespace pxsim.visuals {
 
             const modulePadding = this.getModulePadding();
             const moduleSpacing = contentWidth / 4;
-            const moduleWidth = this.getInnerModuleWidth();
             let currentX = this.getModulePadding();
             let currentY = 0;
             this.outputs.forEach((n, i) => {
-                this.outputContainers[i].translate(currentX, currentY);
+                this.outputContainers[i].translate(currentX + (this.getAbosluteModuleWidth() - this.getInnerModuleWidth()) / 2, currentY);
                 if (this.outputs[i]) {
                     const view = this.outputs[i];
                     const outputPadding = this.getInnerModuleWidth() * view.getPaddingRatio();
-                    const desiredOutputWidth = this.getInnerModuleWidth() - outputPadding * 2;
-                    const outputWidth = Math.min(desiredOutputWidth, MAX_MODULE_WIDTH);
                     const outputHeight = this.getModuleHeight();
+                    const outputWidth = this.getInnerModuleWidth();
 
                     // Translate and resize view
-                    view.resize(outputWidth, outputHeight);
-                    const viewHeight = view.getInnerHeight() / view.getInnerWidth() * outputWidth;
-                    view.translate(outputPadding + ((desiredOutputWidth - outputWidth) / 2), outputHeight - viewHeight, true);
+                    view.resize(outputWidth - outputPadding * 2, outputHeight);
+                    // const viewHeight = view.getInnerHeight() / view.getInnerWidth() * outputWidth;
+                    // view.translate(outputPadding + ((desiredOutputWidth - outputWidth) / 2), outputHeight - viewHeight, true);
+                    const viewHeight = view.getActualHeight();
+                    view.translate(outputPadding, outputHeight - viewHeight, true);
 
                     // Resize control
                     const control = this.outputControls[i];
                     if (control) {
-                        control.resize(this.getInnerModuleWidth(), outputHeight);
+                        const controlWidth = outputWidth;
+                        const closeIconOffset = (this.getCloseIconSize() * (1 + CLOSE_ICON_GAP_MULTIPLIER));
+                        const controlHeight = outputHeight - closeIconOffset;
+                        control.resize(controlWidth, controlHeight);
+                        control.translate((controlWidth - control.getActualWidth()) / 2,
+                            closeIconOffset + ((controlHeight - control.getActualHeight()) / 2), true)
 
-                        // Translate close icon
+                        // Translate and resize close icon
                         const closeIcon = this.outputCloseIcons[i];
                         if (closeIcon) {
-                            const closeIconWidth = closeIcon.getWidth();
-                            closeIcon.translate(this.getInnerModuleWidth() / 2 - closeIconWidth / 2, 0);
+                            const closeIconSize = this.getCloseIconSize();
+                            closeIcon.resize(closeIconSize, closeIconSize);
+                            closeIcon.translate((outputWidth - closeIcon.getActualWidth()) / 2, (CLOSE_ICON_GAP_MULTIPLIER * closeIcon.getActualHeight()), true);
                         }
                     }
+
+                    // Resize background
+                    const backgroundView = this.inputBackgroundViews[i];
+                    if (backgroundView) {
+                        backgroundView.resize(this.getInnerModuleWidth(), outputHeight);
+                        backgroundView.translate(0, 0, true)
+                }
                 }
                 currentX += moduleSpacing;
             })
@@ -341,30 +370,41 @@ namespace pxsim.visuals {
             currentY += brickHeight + this.getWiringHeight();
 
             this.inputs.forEach((n, i) => {
-                this.inputContainers[i].translate(currentX, currentY);
+                this.inputContainers[i].translate(currentX + (this.getAbosluteModuleWidth() - this.getInnerModuleWidth()) / 2, currentY);
                 if (this.inputs[i]) {
                     const view = this.inputs[i];
                     const inputPadding = this.getInnerModuleWidth() * view.getPaddingRatio();
-                    const desiredInputWidth = this.getInnerModuleWidth() - inputPadding * 2;
-                    const inputWidth = Math.min(desiredInputWidth, MAX_MODULE_WIDTH);
                     const inputHeight = this.getModuleHeight();
+                    const inputWidth = this.getInnerModuleWidth();
 
                     // Translate and resize view
-                    view.resize(inputWidth, inputHeight);
-                    view.translate(inputPadding + ((desiredInputWidth - inputWidth) / 2), 0, true);
+                    view.resize(inputWidth - inputPadding * 2, inputHeight);
+                    const viewHeight = Math.max(view.getActualHeight(), MIN_MODULE_HEIGHT);
+                    view.translate(inputPadding, 0, true);
 
                     // Resize control
                     const control = this.inputControls[i];
                     if (control) {
-                        control.resize(this.getInnerModuleWidth(), inputHeight);
+                        const controlWidth = inputWidth;
+                        const controlHeight = inputHeight - viewHeight - (this.getCloseIconSize() * (1 + CLOSE_ICON_GAP_MULTIPLIER));
+                        control.resize(controlWidth, controlHeight);
+                        control.translate((controlWidth - control.getActualWidth()) / 2,
+                            viewHeight + ((controlHeight - control.getActualHeight()) / 2), true)
 
                         // Translate and resize close icon
                         const closeIcon = this.inputCloseIcons[i];
                         if (closeIcon) {
-                            const closeIconWidth = closeIcon.getWidth();
-                            const closeIconHeight = closeIcon.getHeight();
-                            closeIcon.translate(this.getInnerModuleWidth() / 2 - closeIconWidth / 2, this.getModuleHeight() - closeIconHeight);
+                            const closeIconSize = this.getCloseIconSize();
+                            closeIcon.resize(closeIconSize, closeIconSize);
+                            closeIcon.translate((inputWidth - closeIcon.getActualWidth()) / 2, inputHeight - ((1 + CLOSE_ICON_GAP_MULTIPLIER) * closeIcon.getActualHeight()), true);
                         }
+                        }
+
+                    // Resize background
+                    const backgroundView = this.inputBackgroundViews[i];
+                    if (backgroundView) {
+                        backgroundView.resize(this.getInnerModuleWidth(), inputHeight, true);
+                        backgroundView.translate(0, 0, true)
                     }
                 }
                 currentX += moduleSpacing;
@@ -394,7 +434,7 @@ namespace pxsim.visuals {
 
         public getModuleBounds() {
             return {
-                width: this.width / 4,
+                width: Math.min(this.getAbosluteModuleWidth(), MAX_MODULE_WIDTH),
                 height: this.getModuleHeight()
             }
         }
@@ -407,8 +447,16 @@ namespace pxsim.visuals {
             return this.getModuleBounds().width - (this.getModulePadding() * 2);
         }
 
+        public getAbosluteModuleWidth() {
+            return this.width / 4;
+        }
+
         public getModuleHeight() {
             return this.height * MODULE_HEIGHT_RATIO;
         }
+
+        public getCloseIconSize() {
+            return this.getInnerModuleWidth() / 4;
+        }
     }
 }

sim/visuals/nodes/colorSensorView.ts

@@ -5,6 +5,8 @@ namespace pxsim.visuals {
 
         private control: ColorGridControl;
 
+        private static sensor_hole_id = 'color_sensor_white_big';
+
         constructor(port: number) {
             super(COLOR_SENSOR_SVG, "color", NodeType.ColorSensor, port);
         }
@@ -19,7 +21,25 @@ namespace pxsim.visuals {
 
         public updateState() {
             super.updateState();
-            // TODO: show different color modes
+
+            const colorState = ev3board().getInputNodes()[this.port];
+            if (!colorState) return;
+            const mode = colorState.getMode();
+
+            switch (mode) {
+                case ColorSensorMode.Colors: this.updateSensorLightVisual('#0062DD'); return; // blue
+                case ColorSensorMode.Reflected: this.updateSensorLightVisual('#F86262'); return; // red
+                case ColorSensorMode.Ambient: this.updateSensorLightVisual('#67C3E2'); return; // light blue
+            }
+            this.updateSensorLightVisual('#ffffff');
+        }
+
+        private updateSensorLightVisual(color: string) {
+            const sensorHole = this.content.getElementById(this.normalizeId(ColorSensorView.sensor_hole_id)) as SVGCircleElement;
+            sensorHole.style.stroke = color;
+            if (color != '#ffffff') {
+                sensorHole.style.strokeWidth = '2px';
+            }
         }
     }
 }

sim/visuals/nodes/moduleView.ts

@@ -107,7 +107,7 @@ namespace pxsim.visuals {
         public attachEvents() {
         }
 
-        public resize(width: number, height: number) {
+        public resize(width: number, height: number, strict?: boolean) {
             super.resize(width, height);
             this.updateDimensions(width, height);
         }
@@ -120,6 +120,7 @@ namespace pxsim.visuals {
                 const newWidth = currentWidth / currentHeight * height;
                 this.content.setAttribute('width', `${width}`);
                 this.content.setAttribute('height', `${newHeight}`);
+                this.height = newHeight;
             }
         }
 
@@ -138,16 +139,22 @@ namespace pxsim.visuals {
 
         protected updateOpacity() {
             if (this.rendered) {
-                const opacity = this.selected ? 0.2 : 1;
+                const opacity = this.selected && this.fadeWhenSelected() ? 0.2 : 1;
                 if (this.hasClick() && this.opacity != opacity) {
                     this.opacity = opacity;
                     this.setOpacity(this.opacity);
+                }
+                if (this.hasClick()) {
                     if (this.selected) this.content.style.cursor = "";
                     else this.content.style.cursor = "pointer";
                 }
             }
         }
 
+        protected fadeWhenSelected() {
+            return true;
+        }
+
         protected setOpacity(opacity: number) {
             this.element.setAttribute("opacity", `${opacity}`);
         }

sim/visuals/nodes/sensorView.ts

@@ -6,14 +6,16 @@ namespace pxsim.visuals {
 
         constructor(xml: string, prefix: string, id: NodeType, port: NodeType) {
             super(xml, prefix, id, port);
+            // Shown by default
+            this.selected = true;
         }
 
-        public getSelected() {
-            return true;
-        }
-
-        public hasClose() {
+        protected fadeWhenSelected() {
             return false;
         }
+
+        public hasBackground() {
+            return true;
+        }
     }
 }