0.1.52

* control angle with slider

* called changed state

* remove logging

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/about.md

@@ -17,29 +17,31 @@ brick.buttonEnter.onEvent(ButtonEvent.Bumped, () => {
 })
 ```
 
-The editor work in [most modern browsers](/browsers), work [offline](/offline) once loaded and do not require any installation. 
+The editor works in [most modern browsers](/browsers). It works [offline](/offline) once loaded and doesn't require any installation. Take a look at some of the [features](/about/editor-features) of the editor.
 
 ## Compile and Flash: Your Program!
 
-When you have your code ready, you connect your @boardname@ to a computer via a USB cable 
-so it appears as a mounted drive (named **EV3**). 
+When you have your code ready, you connect your EV3 Brick to a computer with a USB cable so it appears as an attached drive (named **@drivename@**). 
 
 Compilation to machine code from [Blocks](/blocks) or [JavaScript](/javascript) happens in the browser. You save the binary 
-program to a **.uf2** file, which you then copy to the **EV3** drive, which flashes the device with the new program.
+program to a **.uf2** file, which you then copy to the **@drivename@** drive. The process of copying will flash the device with the new program.
 
 ### ~ hint
 
-Not seeing the **EV3** drive? Make sure to upgrade your firmware at https://ev3manager.education.lego.com/.
+Not seeing the **@drivename@** drive? Make sure to upgrade your firmware at https://ev3manager.education.lego.com/. Try these [troubleshooting](/troubleshoot) tips if you still have trouble getting the drive to appear.
 
 ### ~
 
 ## Simulator: Test Your Code
 
-You can run your code using the micro:bit simulator, all within the confines of a web browser. 
-The simulator has support for the LED screen, buttons, as well as compass, accelerometer, and digital I/O pins.
+You can run your code using the @boardname@ simulator, all inside the same browser window. 
+The simulator has support for the EV3 Brick screen, buttons, sensors, and motors.
 
 ```sim
 brick.buttonEnter.onEvent(ButtonEvent.Bumped, () => {
     motors.largeA.run(50)
+    motors.mediumD.run(50)
+    sensors.touch1.pauseUntil(ButtonEvent.Pressed)
+    sensors.ultrasonic4.pauseUntil(UltrasonicSensorEvent.ObjectDetected)
 })
-```
+```

docs/about/editor-features.md

@@ -0,0 +1,72 @@
+# @extends
+
+#### #blocks-images
+
+| |
+|-|
+| ![Blocks Toolbox with Loops shelf open](/static/about/blocks-toolbox.png) |
+| Blocks Toolbox |
+
+#### #home-images
+
+| |
+|-|
+| ![Home button](/static/about/home-button.png) |
+| Home Button |
+
+#### #share-images
+
+| |
+|-|
+| ![Share button](/static/about/share-button.png) |
+| Share Button |
+
+#### #blocksjs-images
+
+| |
+|-|
+| ![Switch from Blocks to JavaScript](/static/about/blocks-to-js.gif) |
+| Switch from Blocks to JavaScript |
+
+#### #help-images
+
+| |
+|-|
+| ![Help button](/static/about/help-button.png) |
+| Help Button |
+
+#### #moresettings-images
+
+| |
+|-|
+| ![More settings button](/static/about/more-settings.png) |
+| More Button |
+
+#### #undoredo-images
+
+| | | |
+|-|-|-|
+| ![Undo button](/static/about/undo-button.png) | | ![Redo button](/static/about/redo-button.png) |
+| Undo Button | | Redo Button |
+
+#### #zoom-images
+
+| | | |
+|-|-|-|
+| ![Zoom in button](/static/about/zoom-in.png) | | ![Zoom out button](/static/about/zoom-out.png) |
+| Zoom In | | Zoom Out |
+
+#### #saveproject-images
+
+| |
+|-|
+| ![Save project field](/static/about/save-project.png) |
+| Save Project |
+
+#### #download-images
+
+| |
+|-|
+| ![Download button](/static/about/download-button.png) |
+| Download Button |
+

docs/index-ref.json

@@ -1,3 +1,3 @@
 {
-    "appref": "v0.1.11"
+    "appref": "v0.1.50"
 }

docs/labview.md

@@ -29,9 +29,9 @@ motors.largeA.stop()
 
 ## Download to the EV3
 
-Before you actually run your program on the @boardname@, you can first try it in the simulator. The MakeCode editor includes a simulator in the browser for you to test your code. You can make changes to your program and check them out it the simulator to make sure your code works the way want. The similator knows when you modify your code and it restarts automatically to run the new code.
+Before you actually run your program on the EV3 Brick, you can first try it in the simulator. The MakeCode editor includes a simulator in the browser for you to test your code. You can make changes to your program and check them out it the simulator to make sure your code works the way want. The similator knows when you modify your code and it restarts automatically to run the new code.
 
-Once you're ready to transfer your program to the @boardname@, click the ``|Download|`` button and follow the instructions.
+Once you're ready to transfer your program to the EV3 Brick, click the ``|Download|`` button and follow the instructions.
 
 ## Single motors
 

docs/lessons/classroom-management.md

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

docs/maker/security-gadget.md

@@ -40,9 +40,16 @@ This activity uses sensor inputs. You may want to try the [Use](/getting-started
 
 ## Contemplate
 
-Follow the steps of the [Maker Design Process](/lessons/classroom-management#design-process) for this lesson:
+Follow the steps of the _Maker Design Process_ for this lesson:
 
-![LEGO Education Maker Design Process](/static/lessons/common/lego-maker-design-process.jpg)
+| | |
+|-|-|
+| ![Paper sheet icon](/static/maker/design-process-icons/define-problem.png) | **Define the Problem** |
+| ![Lightbulb icon](/static/maker/design-process-icons/brainstorming.png) | **Brainstorming** |
+| ![Checkmark icon](/static/maker/design-process-icons/define-criteria.png) | **Define the Design Criteria** |
+| ![Connector icon](/static/maker/design-process-icons/go-make.png) | **Go Make** |
+| ![Redo icon](/static/maker/design-process-icons/review-revise.png) | **Review and Revise Your Solution** |
+| ![Speaker icon](/static/maker/design-process-icons/communicate.png) | **Communicate Your Solution** |
 
 ### Defining the Problem
 
@@ -132,8 +139,3 @@ forever(function () {
 ```
 
 Click **Download** and follow the instructions to get your code onto your EV3 Brick. Press the ``center`` button on the EV3 Brick to run the program.
-
-### Well done!
-
-Click [here](/examples) to try out some more projects!
-

docs/maker/sound-machine.md

@@ -39,9 +39,16 @@ This activity uses motor rotations and sensor inputs. You may want to try the [U
 
 ## Contemplate
 
-Follow the steps of the [Maker Design Process](/lessons/classroom-management#design-process) for this lesson:
+Follow the steps of the _Maker Design Process_ for this lesson:
 
-![LEGO Education Maker Design Process](/static/lessons/common/lego-maker-design-process.jpg)
+| | |
+|-|-|
+| ![Paper sheet icon](/static/maker/design-process-icons/define-problem.png) | **Define the Problem** |
+| ![Lightbulb icon](/static/maker/design-process-icons/brainstorming.png) | **Brainstorming** |
+| ![Checkmark icon](/static/maker/design-process-icons/define-criteria.png) | **Define the Design Criteria** |
+| ![Connector icon](/static/maker/design-process-icons/go-make.png) | **Go Make** |
+| ![Redo icon](/static/maker/design-process-icons/review-revise.png) | **Review and Revise Your Solution** |
+| ![Speaker icon](/static/maker/design-process-icons/communicate.png) | **Communicate Your Solution** |
 
 ### Defining the Problem
 
@@ -156,9 +163,3 @@ forever(function () {
 ```
 
 Click **Download** and follow the instructions to get your code onto your EV3 Brick. Press the ``center`` button on the EV3 Brick to run the program.
-
-### Well done!
-
-Click [here](/examples) to try out some more projects!
-
-

docs/projects.md

@@ -4,6 +4,6 @@ Here are some cool projects that you can build with your @boardname@!
 
 ## Basic
 
-Basic projects to build with your @boardname@.
+Basic projects to build with your EV3 Brick.
 
 Coming soon.

docs/reference/console/send-to-screen.md

@@ -8,7 +8,7 @@ console.sendToScreen();
 
 A "console" is a place for a user to see special messages from a device. It could be  something connected to a serial port, a display that shows text, or even a text file. A console is typically used as a place to send information that is added to a message _log_ (a record of messages that are sent from a device). Your program can send log messages using the [console](/reference/console) functions. The MakeCode editor has a console view that lets you see the console output when your program runs in the simulator.
 
-On the @boardname@, the screen can serve as a console too and you can make your console output go there. Before using the console log functions, set the screen as the console output location.
+On the EV3 Brick, the screen can serve as a console too and you can make your console output go there. Before using the console log functions, set the screen as the console output location.
 
 ## Example
 

docs/reference/motors/stop-all.md

@@ -10,7 +10,7 @@ The motors stops but any motion caused from previously running the motors contin
 
 ## Example
 
-Tank the @boardname@ forward at half speed for 5 seconds and then stop.
+Tank the EV3 Brick forward at half speed for 5 seconds and then stop.
 
 ```blocks
 motors.largeAB.tank(50, 50);

docs/reference/motors/synced/steer.md

@@ -8,7 +8,7 @@ motors.largeAB.steer(0, 0)
 
 A brick driving with two motors can steer itself by changing the speed of one motor compared to the speed of the other. To make a slow turn to the left, you might make the right motor run slightly faster than the left one. To make a fast, or sharp, turn to the right, the left motor could run at least twice as fast as the right one.
 
-The @boardname@ steers by using a percentage value of _follow_ for one of the motors. This means that the motor in the turn direction will rotate slower than the other. It is the _follower_ motor and the other motor is the _drive_ motor. The drive motor runs at a percentage of full speed set in **speed**. The follower motor runs at a percentage of speed of the drive motor. So, it runs at a percentage of a percentage of full speed.
+The EV3 Brick steers by using a percentage value of _follow_ for one of the motors. This means that the motor in the turn direction will rotate slower than the other. It is the _follower_ motor and the other motor is the _drive_ motor. The drive motor runs at a percentage of full speed set in **speed**. The follower motor runs at a percentage of speed of the drive motor. So, it runs at a percentage of a percentage of full speed.
 
 To make the turn happen you give a _turn ratio_ which is a percentage value of steer to the left or right. If you want to steer to the left at 30% of the of the drive motor speed, use the value of `-30` for **turnRatio**. Left turns use negative values and right turns use positive values. A really sharp turn to the right might use a turn ratio value of `80`.
 

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>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

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

@@ -0,0 +1,15 @@
+<?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="904.000000pt" height="904.000000pt" viewBox="0 0 904.000000 904.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,904.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 4520 l0 -4510 4520 0 4520 0 0 4510 0 4510 -4520 0 -4520 0 0
+-4510z"/>
+</g>
+</svg>

docs/static/icons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

docs/troubleshoot.md

@@ -1,10 +1,37 @@
 # Troubleshooting download problems
 
-If your're having trouble getting your code onto the @boardname@, try these steps to see if you can fix the problem.
+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 @boardname@ is connected to your computer, you should see a new drive called **@drivename@** attached.
+When your EV3 Brick is connected to your computer, you should see a new drive called **@drivename@** attached.
 
 On Windows, it looks like this in Explorer:
 
@@ -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 @boardname@ 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. 
 
@@ -104,8 +104,17 @@ forever(function () {
 })
 ```
 
-## Step 8
+## Step 8 @fullscreen
 
-Now, plug your @boardname@ 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 @boardname@ 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!
 
@@ -68,7 +68,7 @@ brick.showString("Press my buttons to make music!", 1)
 
 ## Step 6
 
-Now, plug your @boardname@ 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.
+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.
 
 You can add more ``||brick:on button||`` blocks to the Workspace and create other ``||music:play tone||`` melodies when different buttons are pressed to transform your brick 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
 
@@ -134,6 +134,6 @@ forever(function () {
 
 ## Step 10
 
-Now, plug your @boardname@ 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.
+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.
 
 Attach an Ultrasonic Sensor to Port 4 of your brick. Test your program by putting an object at different distances in front of the Ultrasonic Sensor – an object 50 centimeters or closer should be detected. 

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! 
 
@@ -57,6 +57,6 @@ forever(function () {
 
 ## Step 5
  
-Now, plug your @boardname@ 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.
+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.
 
 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 building instructions for: _Driving Base with Color Sensor Forward_. Test your program by putting a green or red piece of paper or LEGO brick in front of the color sensor.

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.
 
@@ -227,6 +228,6 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 
 ## Step 13
 
-Now, plug your @boardname@ 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.
+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.
 
 Attach a Large motor to Port A, and a Medium motor to Port D. Test your program by pressing the different buttons to see whether the correct motors are running as expected.

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. 
  
@@ -100,6 +100,6 @@ In the ``||music:play sound effect until done||`` block, use the drop-down menu
 
 ## Step 9
 
-Now, plug your @boardname@ 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.
+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.
 
 Attach an Infrared Sensor to Port 1 of your brick. Test your program by putting an object increasingly closer to the Infrared Sensor – your Intruder Alert should trigger when you get too close! 

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.
 
@@ -89,6 +89,6 @@ forever(function () {
 
 ## Step 8
 
-Now, plug your @boardname@ 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.
+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.
 
 Attach a Large motor to Port A, and a Touch sensor to Port 1 on your brick. Test your program by pressing the ENTER button. When the motor starts, press the touch sensor. Does the motor stop as expected?

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.
 
@@ -62,6 +62,6 @@ sensors.touch1.onEvent(ButtonEvent.Released, function () {
 
 ## Step 5
 
-Now, plug your @boardname@ 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.
+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.
 
 Attach a Large motor to Port A, and a Touch sensor to Port 1 on your brick. Test your program by pressing and releasing the touch sensor – does the motor start and stop as expected?

docs/tutorials/wake-up.md

@@ -1,6 +1,6 @@
 # Wake Up!
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Show different moods on your @boardname@.
 
@@ -50,5 +50,5 @@ brick.showMood(moods.love)
 
 ## Step 5
 
-Now, plug your @boardname@ 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.
+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.
  

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)
 ```
 
@@ -160,6 +160,6 @@ brick.showString("Guess what animal?", 0)
 
 ## Step 10
 
-Now, plug your @boardname@ 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.
+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.
 
 Test your program with a friend by pressing the right, left, up, and down buttons on your brick. Have your friend guess what animal it is!

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 () {
@@ -131,6 +131,6 @@ brick.showString("What color?", 1)
 
 ## Step 9
 
-Now, plug your @boardname@ 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.
+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.
 
 Attach a Color Sensor to Port 3 of your brick. Test your program by flashing Red, Green and Yellow colored paper or use LEGO bricks in front of the Color Sensor.

editor/extension.ts

@@ -2,36 +2,10 @@
 /// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
 
 import { deployCoreAsync, initAsync } from "./deploy";
-import { FieldPorts } from "./field_ports";
-import { FieldMotors } from "./field_motors";
-import { FieldSpeed } from "./field_speed";
-import { FieldBrickButtons } from "./field_brickbuttons";
-import { FieldTurnRatio } from "./field_turnratio";
-import { FieldColorEnum } from "./field_color";
 
 pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): Promise<pxt.editor.ExtensionResult> {
     pxt.debug('loading pxt-ev3 target extensions...')
-    updateBlocklyShape();
     const res: pxt.editor.ExtensionResult = {
-        fieldEditors: [{
-            selector: "ports",
-            editor: FieldPorts
-        }, {
-            selector: "motors",
-            editor: FieldMotors
-        }, {
-            selector: "speed",
-            editor: FieldSpeed
-        }, {
-            selector: "brickbuttons",
-            editor: FieldBrickButtons
-        }, {
-            selector: "turnratio",
-            editor: FieldTurnRatio
-        }, {
-            selector: "colorenum",
-            editor: FieldColorEnum
-        }],
         deployCoreAsync,
         showUploadInstructionsAsync: (fn: string, url: string, confirmAsync: (options: any) => Promise<number>) => {
             let resolve: (thenableOrResult?: void | PromiseLike<void>) => void;
@@ -51,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>
@@ -89,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
@@ -115,109 +106,6 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
     return Promise.resolve<pxt.editor.ExtensionResult>(res);
 }
 
-/**
- * Update the shape of Blockly blocks with square corners
- */
-function updateBlocklyShape() {
-
-    /**
-     * Rounded corner radius.
-     * @const
-     */
-    (Blockly.BlockSvg as any).CORNER_RADIUS = 0 * (Blockly.BlockSvg as any).GRID_UNIT;
-
-    /**
-     * Inner space between edge of statement input and notch.
-     * @const
-     */
-    (Blockly.BlockSvg as any).STATEMENT_INPUT_INNER_SPACE = 3 * (Blockly.BlockSvg as any).GRID_UNIT;
-    /**
-     * SVG path for drawing next/previous notch from left to right.
-     * @const
-     */
-    (Blockly.BlockSvg as any).NOTCH_PATH_LEFT = (
-        'l 8,8 ' +
-        'h 16 ' +
-        'l 8,-8 '
-    );
-
-    /**
-     * SVG path for drawing next/previous notch from right to left.
-     * @const
-     */
-    (Blockly.BlockSvg as any).NOTCH_PATH_RIGHT = (
-        'l -8,8 ' +
-        'h -16 ' +
-        'l -8,-8 '
-    );
-
-    /**
-     * SVG start point for drawing the top-left corner.
-     * @const
-     */
-    (Blockly.BlockSvg as any).TOP_LEFT_CORNER_START =
-        'm 0,' + 0;
-
-    /**
-     * SVG path for drawing the rounded top-left corner.
-     * @const
-     */
-    (Blockly.BlockSvg as any).TOP_LEFT_CORNER =
-        'l ' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',0 ';
-
-    /**
-     * SVG path for drawing the rounded top-right corner.
-     * @const
-     */
-    (Blockly.BlockSvg as any).TOP_RIGHT_CORNER =
-        'l ' + 0 + ',' + (Blockly.BlockSvg as any).CORNER_RADIUS;
-
-    /**
-     * SVG path for drawing the rounded bottom-right corner.
-     * @const
-     */
-    (Blockly.BlockSvg as any).BOTTOM_RIGHT_CORNER =
-        'l 0,' + (Blockly.BlockSvg as any).CORNER_RADIUS;
-
-    /**
-     * SVG path for drawing the rounded bottom-left corner.
-     * @const
-     */
-    (Blockly.BlockSvg as any).BOTTOM_LEFT_CORNER =
-        'l -' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',0';
-
-    /**
-     * SVG path for drawing the top-left corner of a statement input.
-     * @const
-     */
-    (Blockly.BlockSvg as any).INNER_TOP_LEFT_CORNER =
-        'l ' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',-' + 0;
-
-    /**
-     * SVG path for drawing the bottom-left corner of a statement input.
-     * Includes the rounded inside corner.
-     * @const
-     */
-    (Blockly.BlockSvg as any).INNER_BOTTOM_LEFT_CORNER =
-        'l ' + 0 + ',' + (Blockly.BlockSvg as any).CORNER_RADIUS * 2 +
-        'l ' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',' + 0;
-
-    /**
-     * Corner radius of the flyout background.
-     * @type {number}
-     * @const
-     */
-    (Blockly as any).Flyout.prototype.CORNER_RADIUS = 0;
-
-    /**
-     * Margin around the edges of the blocks in the flyout.
-     * @type {number}
-     * @const
-     */
-    (Blockly as any).Flyout.prototype.MARGIN = 8;
-
-}
-
 // When require()d from node, bind the global pxt namespace
 // namespace pxt {
 //     export const dummyExport = 1;

fieldeditors/extension.ts

@@ -0,0 +1,149 @@
+/// <reference path="../node_modules/pxt-core/built/pxteditor.d.ts"/>
+/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
+
+import { FieldPorts } from "./field_ports";
+import { FieldMotors } from "./field_motors";
+import { FieldSpeed } from "./field_speed";
+import { FieldBrickButtons } from "./field_brickbuttons";
+import { FieldTurnRatio } from "./field_turnratio";
+import { FieldColorEnum } from "./field_color";
+import { FieldMusic } from "./field_music";
+
+pxt.editor.initFieldExtensionsAsync = function (opts: pxt.editor.FieldExtensionOptions): Promise<pxt.editor.FieldExtensionResult> {
+    pxt.debug('loading pxt-ev3 target extensions...')
+    updateBlocklyShape();
+    const res: pxt.editor.FieldExtensionResult = {
+        fieldEditors: [{
+            selector: "ports",
+            editor: FieldPorts
+        }, {
+            selector: "motors",
+            editor: FieldMotors
+        }, {
+            selector: "speed",
+            editor: FieldSpeed
+        }, {
+            selector: "brickbuttons",
+            editor: FieldBrickButtons
+        }, {
+            selector: "turnratio",
+            editor: FieldTurnRatio
+        }, {
+            selector: "colorenum",
+            editor: FieldColorEnum
+        }, {
+            selector: "music",
+            editor: FieldMusic
+        }]
+    };
+    return Promise.resolve<pxt.editor.FieldExtensionResult>(res);
+}
+
+/**
+ * Update the shape of Blockly blocks with square corners
+ */
+function updateBlocklyShape() {
+
+    /**
+     * Rounded corner radius.
+     * @const
+     */
+    (Blockly.BlockSvg as any).CORNER_RADIUS = 0 * (Blockly.BlockSvg as any).GRID_UNIT;
+
+    /**
+     * Inner space between edge of statement input and notch.
+     * @const
+     */
+    (Blockly.BlockSvg as any).STATEMENT_INPUT_INNER_SPACE = 3 * (Blockly.BlockSvg as any).GRID_UNIT;
+    /**
+     * SVG path for drawing next/previous notch from left to right.
+     * @const
+     */
+    (Blockly.BlockSvg as any).NOTCH_PATH_LEFT = (
+        'l 8,8 ' +
+        'h 16 ' +
+        'l 8,-8 '
+    );
+
+    /**
+     * SVG path for drawing next/previous notch from right to left.
+     * @const
+     */
+    (Blockly.BlockSvg as any).NOTCH_PATH_RIGHT = (
+        'l -8,8 ' +
+        'h -16 ' +
+        'l -8,-8 '
+    );
+
+    /**
+     * SVG start point for drawing the top-left corner.
+     * @const
+     */
+    (Blockly.BlockSvg as any).TOP_LEFT_CORNER_START =
+        'm 0,' + 0;
+
+    /**
+     * SVG path for drawing the rounded top-left corner.
+     * @const
+     */
+    (Blockly.BlockSvg as any).TOP_LEFT_CORNER =
+        'l ' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',0 ';
+
+    /**
+     * SVG path for drawing the rounded top-right corner.
+     * @const
+     */
+    (Blockly.BlockSvg as any).TOP_RIGHT_CORNER =
+        'l ' + 0 + ',' + (Blockly.BlockSvg as any).CORNER_RADIUS;
+
+    /**
+     * SVG path for drawing the rounded bottom-right corner.
+     * @const
+     */
+    (Blockly.BlockSvg as any).BOTTOM_RIGHT_CORNER =
+        'l 0,' + (Blockly.BlockSvg as any).CORNER_RADIUS;
+
+    /**
+     * SVG path for drawing the rounded bottom-left corner.
+     * @const
+     */
+    (Blockly.BlockSvg as any).BOTTOM_LEFT_CORNER =
+        'l -' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',0';
+
+    /**
+     * SVG path for drawing the top-left corner of a statement input.
+     * @const
+     */
+    (Blockly.BlockSvg as any).INNER_TOP_LEFT_CORNER =
+        'l ' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',-' + 0;
+
+    /**
+     * SVG path for drawing the bottom-left corner of a statement input.
+     * Includes the rounded inside corner.
+     * @const
+     */
+    (Blockly.BlockSvg as any).INNER_BOTTOM_LEFT_CORNER =
+        'l ' + 0 + ',' + (Blockly.BlockSvg as any).CORNER_RADIUS * 2 +
+        'l ' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',' + 0;
+
+    /**
+     * Corner radius of the flyout background.
+     * @type {number}
+     * @const
+     */
+    (Blockly as any).Flyout.prototype.CORNER_RADIUS = 0;
+
+    /**
+     * Margin around the edges of the blocks in the flyout.
+     * @type {number}
+     * @const
+     */
+    (Blockly as any).Flyout.prototype.MARGIN = 8;
+
+}
+
+// When require()d from node, bind the global pxt namespace
+// namespace pxt {
+//     export const dummyExport = 1;
+// }
+// eval("if (typeof process === 'object' && process + '' === '[object process]') pxt = global.pxt")

fieldeditors/field_motors.ts

@@ -30,7 +30,7 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
         this.itemWidth_ = 75;
         this.backgroundColour_ = pxtblockly.parseColour(options.colour);
         this.itemColour_ = "rgba(255, 255, 255, 0.6)";
-        this.borderColour_ = Blockly.PXTUtils.fadeColour(this.backgroundColour_, 0.4, false);
+        this.borderColour_ = pxt.toolbox.fadeColor(this.backgroundColour_, 0.4, false);
     }
 
     init() {
@@ -544,7 +544,7 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
     /**
      * Callback for when the drop-down is hidden.
      */
-    protected onHide_ = function () {
+    protected onHide_() {
         Blockly.DropDownDiv.content_.removeAttribute('role');
         Blockly.DropDownDiv.content_.removeAttribute('aria-haspopup');
         Blockly.DropDownDiv.content_.removeAttribute('aria-activedescendant');

fieldeditors/field_music.ts

@@ -0,0 +1,320 @@
+/// <reference path="../node_modules/pxt-core/localtypings/blockly.d.ts"/>
+/// <reference path="../node_modules/pxt-core/built/pxtblocks.d.ts"/>
+/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
+
+export interface FieldMusicOptions extends pxtblockly.FieldImagesOptions {
+    columns?: string;
+    width?: string;
+}
+
+declare const pxtTargetBundle: any;
+
+let soundCache: any;
+let soundIconCache: any;
+
+export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldCustom {
+    public isFieldCustom_ = true;
+
+    private selectedCategory_: string;
+
+    private categoriesCache_: string[];
+
+    constructor(text: string, options: FieldMusicOptions, validator?: Function) {
+        super(text, { sort: true, data: options.data }, validator);
+
+        this.columns_ = parseInt(options.columns) || 4;
+        this.width_ = parseInt(options.width) || 380;
+
+        this.setText = Blockly.FieldDropdown.prototype.setText;
+        this.updateWidth = (Blockly.Field as any).prototype.updateWidth;
+        this.updateTextNode_ = Blockly.Field.prototype.updateTextNode_;
+
+        if (!pxt.BrowserUtils.isIE() && !soundCache) {
+            soundCache = JSON.parse(pxtTargetBundle.bundledpkgs['music']['sounds.jres']);
+        }
+        if (!soundIconCache) {
+            soundIconCache = JSON.parse(pxtTargetBundle.bundledpkgs['music']['icons.jres']);
+        }
+    }
+
+    /**
+     * Create a dropdown menu under the text.
+     * @private
+     */
+    public showEditor_() {
+        // If there is an existing drop-down we own, this is a request to hide the drop-down.
+        if (Blockly.DropDownDiv.hideIfOwner(this)) {
+            return;
+        }
+        // If there is an existing drop-down someone else owns, hide it immediately and clear it.
+        Blockly.DropDownDiv.hideWithoutAnimation();
+        Blockly.DropDownDiv.clearContent();
+        // Populate the drop-down with the icons for this field.
+        let dropdownDiv = Blockly.DropDownDiv.getContentDiv();
+        let contentDiv = document.createElement('div');
+        // Accessibility properties
+        contentDiv.setAttribute('role', 'menu');
+        contentDiv.setAttribute('aria-haspopup', 'true');
+        contentDiv.className = 'blocklyMusicFieldOptions';
+        const options = this.getOptions();
+        options.sort();
+
+        // Create categoies
+        const categories = this.getCategories(options);
+        const selectedCategory = this.parseCategory(this.getText());
+        this.selectedCategory_ = selectedCategory || categories[0];
+
+        let categoriesDiv = document.createElement('div');
+        // Accessibility properties
+        categoriesDiv.setAttribute('role', 'menu');
+        categoriesDiv.setAttribute('aria-haspopup', 'true');
+        categoriesDiv.style.backgroundColor = this.sourceBlock_.getColourTertiary();
+        categoriesDiv.className = 'blocklyMusicFieldCategories';
+
+        this.refreshCategories(categoriesDiv, categories);
+
+        this.refreshOptions(contentDiv, options);
+
+        contentDiv.style.width = (this as any).width_ + 'px';
+        contentDiv.style.cssFloat = 'left';
+
+        dropdownDiv.style.maxHeight = `410px`;
+        dropdownDiv.appendChild(categoriesDiv);
+        dropdownDiv.appendChild(contentDiv);
+
+        Blockly.DropDownDiv.setColour(this.sourceBlock_.getColour(), this.sourceBlock_.getColourTertiary());
+
+        // Calculate positioning based on the field position.
+        let scale = this.sourceBlock_.workspace.scale;
+        let bBox = { width: this.size_.width, height: this.size_.height };
+        bBox.width *= scale;
+        bBox.height *= scale;
+        let position = this.fieldGroup_.getBoundingClientRect();
+        let primaryX = position.left + bBox.width / 2;
+        let primaryY = position.top + bBox.height;
+        let secondaryX = primaryX;
+        let secondaryY = position.top;
+        // Set bounds to workspace; show the drop-down.
+        (Blockly.DropDownDiv as any).setBoundsElement(this.sourceBlock_.workspace.getParentSvg().parentNode);
+        (Blockly.DropDownDiv as any).show(this, primaryX, primaryY, secondaryX, secondaryY,
+            this.onHide_.bind(this));
+
+        // Update colour to look selected.
+        if (this.sourceBlock_.isShadow()) {
+            this.savedPrimary_ = this.sourceBlock_.getColour();
+            this.sourceBlock_.setColour(this.sourceBlock_.getColourTertiary(),
+                this.sourceBlock_.getColourSecondary(), this.sourceBlock_.getColourTertiary());
+        } else if (this.box_) {
+            this.box_.setAttribute('fill', this.sourceBlock_.getColourTertiary());
+        }
+    }
+
+    getCategories(options: any) {
+        if (this.categoriesCache_) return this.categoriesCache_;
+        let categoryMap = {};
+        for (let i = 0, option: any; option = options[i]; i++) {
+            const content = (options[i] as any)[0]; // Human-readable text or image.
+            const category = this.parseCategory(content);
+            categoryMap[category] = true;
+        }
+        this.categoriesCache_ = Object.keys(categoryMap);
+        return this.categoriesCache_;
+    }
+
+    refreshCategories(categoriesDiv: Element, categories: string[]) {
+        // Show category dropdown. 
+        for (let i = 0; i < categories.length; i++) {
+            const category = categories[i];
+
+            let button = document.createElement('button');
+            button.setAttribute('id', ':' + i); // For aria-activedescendant
+            button.setAttribute('role', 'menuitem');
+            button.setAttribute('class', 'blocklyDropdownTag');
+            button.setAttribute('data-value', category);
+
+            let backgroundColor = '#1A9DBC';
+            if (category == this.selectedCategory_) {
+                // This icon is selected, show it in a different colour
+                backgroundColor = '#0c4e5e';
+                button.setAttribute('aria-selected', 'true');
+            }
+            button.style.backgroundColor = backgroundColor;
+            button.style.borderColor = backgroundColor;
+            Blockly.bindEvent_(button, 'click', this, this.categoryClick_);
+            Blockly.bindEvent_(button, 'mouseup', this, this.categoryClick_);
+
+            const textNode = this.createTextNode_(category);
+            textNode.setAttribute('data-value', category);
+            button.appendChild(textNode);
+            categoriesDiv.appendChild(button);
+        }
+    }
+
+    refreshOptions(contentDiv: Element, options: any) {
+
+        // Show options
+        for (let i = 0, option: any; option = options[i]; i++) {
+            let content = (options[i] as any)[0]; // Human-readable text or image.
+            const value = (options[i] as any)[1]; // Language-neutral value.
+
+            // Filter for options in selected category
+            const category = this.parseCategory(content);
+            if (this.selectedCategory_ != category) continue;
+
+            // Icons with the type property placeholder take up space but don't have any functionality
+            // Use for special-case layouts
+            if (content.type == 'placeholder') {
+                let placeholder = document.createElement('span');
+                placeholder.setAttribute('class', 'blocklyDropDownPlaceholder');
+                placeholder.style.width = content.width + 'px';
+                placeholder.style.height = content.height + 'px';
+                contentDiv.appendChild(placeholder);
+                continue;
+            }
+            let button = document.createElement('button');
+            button.setAttribute('id', ':' + i); // For aria-activedescendant
+            button.setAttribute('role', 'menuitem');
+            button.setAttribute('class', 'blocklyDropDownButton');
+            button.title = content;
+            if ((this as any).columns_) {
+                button.style.width = (((this as any).width_ / (this as any).columns_) - 8) + 'px';
+                //button.style.height = ((this.width_ / this.columns_) - 8) + 'px';
+            } else {
+                button.style.width = content.width + 'px';
+                button.style.height = content.height + 'px';
+            }
+            let backgroundColor = this.savedPrimary_ || this.sourceBlock_.getColour();
+            if (value == this.getValue()) {
+                // This icon is selected, show it in a different colour
+                backgroundColor = this.sourceBlock_.getColourTertiary();
+                button.setAttribute('aria-selected', 'true');
+            }
+            button.style.backgroundColor = backgroundColor;
+            button.style.borderColor = this.sourceBlock_.getColourTertiary();
+            Blockly.bindEvent_(button, 'click', this, this.buttonClick_);
+            Blockly.bindEvent_(button, 'mouseup', this, this.buttonClick_);
+            // These are applied manually instead of using the :hover pseudoclass
+            // because Android has a bad long press "helper" menu and green highlight
+            // that we must prevent with ontouchstart preventDefault
+            let that = this;
+            Blockly.bindEvent_(button, 'mousedown', button, function (e) {
+                this.setAttribute('class', 'blocklyDropDownButton blocklyDropDownButtonHover');
+                e.preventDefault();
+            });
+            Blockly.bindEvent_(button, 'mouseenter', button, function () {
+                that.buttonEnter_(value);
+            });
+            Blockly.bindEvent_(button, 'mouseleave', button, function () {
+                that.buttonLeave_();
+            });
+            Blockly.bindEvent_(button, 'mouseover', button, function () {
+                this.setAttribute('class', 'blocklyDropDownButton blocklyDropDownButtonHover');
+                contentDiv.setAttribute('aria-activedescendant', this.id);
+            });
+            Blockly.bindEvent_(button, 'mouseout', button, function () {
+                this.setAttribute('class', 'blocklyDropDownButton');
+                contentDiv.removeAttribute('aria-activedescendant');
+            });
+            let buttonImg = document.createElement('img');
+            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.
+            const textNode = this.createTextNode_(content);
+            button.setAttribute('data-value', value);
+            buttonImg.setAttribute('data-value', value);
+            textNode.setAttribute('data-value', value);
+
+            button.appendChild(buttonImg);
+            button.appendChild(textNode);
+            contentDiv.appendChild(button);
+        }
+    }
+
+    trimOptions_() {
+    }
+
+    protected onHide_() {
+        super.onHide_();
+        Blockly.DropDownDiv.getContentDiv().style.maxHeight = '';
+        this.stopSounds();
+    }
+
+    private createTextNode_(content: string) {
+        const category = this.parseCategory(content);
+        let text = content.substr(content.indexOf(' ') + 1);
+        text = text.length > 15 ? text.substr(0, 12) + "..." : text;
+        const textSpan = document.createElement('span');
+        textSpan.setAttribute('class', 'blocklyDropdownText');
+        textSpan.textContent = text;
+        return textSpan;
+    }
+
+    private parseCategory(content: string) {
+        return content.substr(0, content.indexOf(' '));
+    }
+
+    protected buttonClick_ = function (e: any) {
+        let value = e.target.getAttribute('data-value');
+        this.setValue(value);
+        Blockly.DropDownDiv.hide();
+    };
+
+    private setSelectedCategory(value: string) {
+        this.selectedCategory_ = value;
+    }
+
+    protected categoryClick_ = function (e: any) {
+        let value = e.target.getAttribute('data-value');
+        this.setSelectedCategory(value);
+
+        const options = this.getOptions();
+        options.sort();
+        const categories = this.getCategories(options);
+
+        const dropdownDiv = Blockly.DropDownDiv.getContentDiv();
+        const categoriesDiv = dropdownDiv.childNodes[0] as HTMLElement;
+        const contentDiv = dropdownDiv.childNodes[1] as HTMLDivElement;
+        categoriesDiv.innerHTML = '';
+        contentDiv.innerHTML = '';
+
+        this.refreshCategories(categoriesDiv, categories);
+        this.refreshOptions(contentDiv, options);
+
+        this.stopSounds();
+    }
+
+    /**
+     * Callback for when a button is hovered over inside the drop-down.
+     * Should be bound to the FieldIconMenu.
+     * @param {Event} e DOM event for the mouseover
+     * @private
+     */
+    protected buttonEnter_ = function (value: any) {
+        if (soundCache) {
+            const jresValue = value.substring(value.lastIndexOf('.') + 1);
+            const buf = soundCache[jresValue];
+            if (buf) {
+                const refBuf = {
+                    data: pxt.U.stringToUint8Array(atob(buf))
+                }
+                pxsim.AudioContextManager.playBufferAsync(refBuf as any);
+            }
+        }
+    };
+
+    protected buttonLeave_ = function () {
+        this.stopSounds();
+    };
+
+    private stopSounds() {
+        pxsim.AudioContextManager.stop();
+    }
+
+    private getSoundIcon(category: string) {
+        if (soundIconCache && soundIconCache[category]) {
+            return soundIconCache[category].icon;
+        }
+        return undefined;
+    }
+}

fieldeditors/field_music_icons/music.svg

@@ -0,0 +1 @@
+<svg id="svg41" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path id="menu_icn_music" d="M13.9 12.8c1.7.3 3.3 1.2 4.3 2.6h1s1.5-4.4-1.8-7.5-9.7-3.1-12.1 0c-1.7 2.1-2.3 5-1.4 7.5h.8s1.7-2.5 4.4-2.6C9 17.2 9 21 9 21c-1.9-.4-3.5-1.6-4.4-3.4-2-.4-3.6-2.2-3.6-4.4C1 6.7 5.9 3 11.5 3s10.8 4.3 10.4 10.2c-.2 4.1-3.6 4.4-3.6 4.4-.8 1.8-2.4 3.1-4.3 3.4-.1-4.5-.1-8.2-.1-8.2z" fill="#fff"/></svg>

fieldeditors/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "noImplicitAny": false,
+        "noImplicitReturns": true,
+        "module": "commonjs",
+        "outDir": "../built/fieldeditors",
+        "rootDir": ".",
+        "newLine": "LF",
+        "sourceMap": false,
+        "allowSyntheticDefaultImports": true,
+        "declaration": true
+    }
+}

fieldeditors/wrap.ts

@@ -0,0 +1,285 @@
+namespace pxt.editor {
+    import HF2 = pxt.HF2
+    import U = pxt.U
+
+    function log(msg: string) {
+        pxt.log("EWRAP: " + msg)
+    }
+
+    export interface DirEntry {
+        name: string;
+        md5?: string;
+        size?: number;
+    }
+
+    const runTemplate = "C00882010084XX0060640301606400"
+    const usbMagic = 0x3d3f
+
+    export class Ev3Wrapper {
+        msgs = new U.PromiseBuffer<Uint8Array>()
+        private cmdSeq = U.randomUint32() & 0xffff;
+        private lock = new U.PromiseQueue();
+        isStreaming = false;
+        dataDump = false;
+
+        constructor(public io: pxt.HF2.PacketIO) {
+            io.onData = buf => {
+                buf = buf.slice(0, HF2.read16(buf, 0) + 2)
+                if (HF2.read16(buf, 4) == usbMagic) {
+                    let code = HF2.read16(buf, 6)
+                    let payload = buf.slice(8)
+                    if (code == 1) {
+                        let str = U.uint8ArrayToString(payload)
+                        if (Util.isNodeJS)
+                            console.log("SERIAL: " + str.replace(/\n+$/, ""))
+                        else
+                            window.postMessage({
+                                type: 'serial',
+                                id: 'n/a', // TODO?
+                                data: str
+                            }, "*")
+                    } else
+                        console.log("Magic: " + code + ": " + U.toHex(payload))
+                    return
+                }
+                if (this.dataDump)
+                    log("RECV: " + U.toHex(buf))
+                this.msgs.push(buf)
+            }
+        }
+
+        private allocCore(addSize: number, replyType: number) {
+            let len = 5 + addSize
+            let buf = new Uint8Array(len)
+            HF2.write16(buf, 0, len - 2)  // pktLen
+            HF2.write16(buf, 2, this.cmdSeq++) // msgCount
+            buf[4] = replyType
+            return buf
+        }
+
+        private allocSystem(addSize: number, cmd: number, replyType = 1) {
+            let buf = this.allocCore(addSize + 1, replyType)
+            buf[5] = cmd
+            return buf
+        }
+
+        private allocCustom(code: number, addSize = 0) {
+            let buf = this.allocCore(1 + 2 + addSize, 0)
+            HF2.write16(buf, 4, usbMagic)
+            HF2.write16(buf, 6, code)
+            return buf
+        }
+
+        stopAsync() {
+            return this.isVmAsync()
+                .then(vm => {
+                    if (vm) return Promise.resolve();
+                    log(`stopping PXT app`)
+                    let buf = this.allocCustom(2)
+                    return this.justSendAsync(buf)
+                        .then(() => Promise.delay(500))
+                })
+        }
+
+        dmesgAsync() {
+            log(`asking for DMESG buffer over serial`)
+            let buf = this.allocCustom(3)
+            return this.justSendAsync(buf)
+        }
+
+        runAsync(path: string) {
+            let codeHex = runTemplate.replace("XX", U.toHex(U.stringToUint8Array(path)))
+            let code = U.fromHex(codeHex)
+            let pkt = this.allocCore(2 + code.length, 0)
+            HF2.write16(pkt, 5, 0x0800)
+            U.memcpy(pkt, 7, code)
+            log(`run ${path}`)
+            return this.justSendAsync(pkt)
+        }
+
+        justSendAsync(buf: Uint8Array) {
+            return this.lock.enqueue("talk", () => {
+                this.msgs.drain()
+                if (this.dataDump)
+                    log("SEND: " + U.toHex(buf))
+                return this.io.sendPacketAsync(buf)
+            })
+        }
+
+        talkAsync(buf: Uint8Array, altResponse = 0) {
+            return this.lock.enqueue("talk", () => {
+                this.msgs.drain()
+                if (this.dataDump)
+                    log("TALK: " + U.toHex(buf))
+                return this.io.sendPacketAsync(buf)
+                    .then(() => this.msgs.shiftAsync(1000))
+                    .then(resp => {
+                        if (resp[2] != buf[2] || resp[3] != buf[3])
+                            U.userError("msg count de-sync")
+                        if (buf[4] == 1) {
+                            if (altResponse != -1 && resp[5] != buf[5])
+                                U.userError("cmd de-sync")
+                            if (altResponse != -1 && resp[6] != 0 && resp[6] != altResponse)
+                                U.userError("cmd error: " + resp[6])
+                        }
+                        return resp
+                    })
+            })
+        }
+
+        flashAsync(path: string, file: Uint8Array) {
+            log(`write ${file.length} bytes to ${path}`)
+
+            let handle = -1
+
+            let loopAsync = (pos: number): Promise<void> => {
+                if (pos >= file.length) return Promise.resolve()
+                let size = file.length - pos
+                if (size > 1000) size = 1000
+                let upl = this.allocSystem(1 + size, 0x93, 0x1)
+                upl[6] = handle
+                U.memcpy(upl, 6 + 1, file, pos, size)
+                return this.talkAsync(upl, 8) // 8=EOF
+                    .then(() => loopAsync(pos + size))
+            }
+
+            let begin = this.allocSystem(4 + path.length + 1, 0x92)
+            HF2.write32(begin, 6, file.length) // fileSize
+            U.memcpy(begin, 10, U.stringToUint8Array(path))
+            return this.lock.enqueue("file", () =>
+                this.talkAsync(begin)
+                    .then(resp => {
+                        handle = resp[7]
+                        return loopAsync(0)
+                    }))
+        }
+
+        lsAsync(path: string): Promise<DirEntry[]> {
+            let lsReq = this.allocSystem(2 + path.length + 1, 0x99)
+            HF2.write16(lsReq, 6, 1024) // maxRead
+            U.memcpy(lsReq, 8, U.stringToUint8Array(path))
+
+            return this.talkAsync(lsReq, 8)
+                .then(resp =>
+                    U.uint8ArrayToString(resp.slice(12)).split(/\n/).map(s => {
+                        if (!s) return null as DirEntry
+                        let m = /^([A-F0-9]+) ([A-F0-9]+) ([^\/]*)$/.exec(s)
+                        if (m)
+                            return {
+                                md5: m[1],
+                                size: parseInt(m[2], 16),
+                                name: m[3]
+                            }
+                        else
+                            return {
+                                name: s.replace(/\/$/, "")
+                            }
+                    }).filter(v => !!v))
+        }
+
+        rmAsync(path: string): Promise<void> {
+            log(`rm ${path}`)
+            let rmReq = this.allocSystem(path.length + 1, 0x9c)
+            U.memcpy(rmReq, 6, U.stringToUint8Array(path))
+
+            return this.talkAsync(rmReq, 5)
+                .then(resp => { })
+        }
+
+        isVmAsync(): Promise<boolean> {
+            let path = "/no/such/dir"
+            let mkdirReq = this.allocSystem(path.length + 1, 0x9b)
+            U.memcpy(mkdirReq, 6, U.stringToUint8Array(path))
+            return this.talkAsync(mkdirReq, -1)
+                .then(resp => {
+                    let isVM = resp[6] == 0x05
+                    log(`${isVM ? "PXT app" : "VM"} running`)
+                    return isVM
+                })
+        }
+
+        private streamFileOnceAsync(path: string, cb: (d: Uint8Array) => void) {
+            let fileSize = 0
+            let filePtr = 0
+            let handle = -1
+            let resp = (buf: Uint8Array): Promise<void> => {
+                if (buf[6] == 2) {
+                    // handle not ready - file is missing
+                    this.isStreaming = false
+                    return Promise.resolve()
+                }
+
+                if (buf[6] != 0 && buf[6] != 8)
+                    U.userError("bad response when streaming file: " + buf[6] + " " + U.toHex(buf))
+
+                this.isStreaming = true
+                fileSize = HF2.read32(buf, 7)
+                if (handle == -1) {
+                    handle = buf[11]
+                    log(`stream on, handle=${handle}`)
+                }
+                let data = buf.slice(12)
+                filePtr += data.length
+                if (data.length > 0)
+                    cb(data)
+
+                if (buf[6] == 8) {
+                    // end of file
+                    this.isStreaming = false
+                    return this.rmAsync(path)
+                }
+
+                let contFileReq = this.allocSystem(1 + 2, 0x97)
+                HF2.write16(contFileReq, 7, 1000) // maxRead
+                contFileReq[6] = handle
+                return Promise.delay(data.length > 0 ? 0 : 500)
+                    .then(() => this.talkAsync(contFileReq, -1))
+                    .then(resp)
+            }
+
+            let getFileReq = this.allocSystem(2 + path.length + 1, 0x96)
+            HF2.write16(getFileReq, 6, 1000) // maxRead
+            U.memcpy(getFileReq, 8, U.stringToUint8Array(path))
+            return this.talkAsync(getFileReq, -1).then(resp)
+        }
+
+        streamFileAsync(path: string, cb: (d: Uint8Array) => void) {
+            let loop = (): Promise<void> =>
+                this.lock.enqueue("file", () =>
+                    this.streamFileOnceAsync(path, cb))
+                    .then(() => Promise.delay(500))
+                    .then(loop)
+            return loop()
+        }
+
+
+        downloadFileAsync(path: string, cb: (d: Uint8Array) => void) {
+            return this.lock.enqueue("file", () =>
+                    this.streamFileOnceAsync(path, cb))
+        }
+        
+
+        private initAsync() {
+            return Promise.resolve()
+        }
+
+        private resetState() {
+
+        }
+
+        reconnectAsync(first = false): Promise<void> {
+            this.resetState()
+            if (first) return this.initAsync()
+            log(`reconnect`);
+            return this.io.reconnectAsync()
+                .then(() => this.initAsync())
+        }
+
+        disconnectAsync() {
+            log(`disconnect`);
+            return this.io.disconnectAsync()
+        }
+    }
+
+
+}

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")
                 }
             }
         }

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>