0.4.3

* Images of micro:bit attached t ostuff

* Cropped and enhanced USB images

* Define paths for USB images

* Added new matching criteria for images

* Help URL

* Add paths for all images

* Cropped images so they look better on dialog

* Add link to uploader

docfiles/meta.html

@@ -19,10 +19,3 @@
 <link rel="shortcut icon" href="@appLogo@">
 <meta name="theme-color" content="@accentColor@">
 
-<style>
-    #root .avatar .avatar-image {
-        background-image: url(https://az851932.vo.msecnd.net/pub/jovrytni/microbit.simplified.svg);
-        background-size: contain;
-        background-repeat: no-repeat;
-    }
-</style>

docfiles/tracking.html

@@ -0,0 +1,13 @@
+<script type="text/javascript">
+    var appInsights=window.appInsights||function(config){
+    function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;for(s.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t
+    }({ 
+        instrumentationKey:"e9ae05ca-350b-427a-9775-3ba3f6efabce"
+    });window.appInsights=appInsights;
+</script>
+<script type="text/javascript">
+    (function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
+    for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);
+
+    mixpanel.init("762fef19c053a0ea4cec43d2fecae76e");
+</script>

docs/device/usb.md

@@ -149,6 +149,10 @@ By copying the script onto the `MICROBIT` drive, you have programmed it into the
 flash memory on the micro:bit, which means even after you unplug the micro:bit,
 your program will still run if the micro:bit is powered by battery.
 
+If you want to save time, you can use the [micro:bit uploader](/uploader) to
+automatically deploy hex files to your micro:bit. It works on Windows and is
+compatible with any browser.
+
 ## Troubleshooting
 
 You can’t drag and drop more than one hex file at once onto your micro:bit. If

docs/projects/radio-challenges.md

@@ -58,7 +58,9 @@ After running this simulation several seconds by moving the micro:bit side to si
 ![](/static/mb/acc2.png)
 
 ### ~
-Finally, you must open the Excel CSV file by clicking on the data.xls file that was downloaded to Downloads Folder. 
+
+Finally, you must open the Excel CSV file by clicking on the `data.csv` file
+that was downloaded to Downloads Folder. 
 
 ![](/static/mb/data3.png)
 
@@ -93,4 +95,4 @@ NEXT: The Watch
 
 ```package
 microbit-radio
-```
+```

docs/raspberry-pi.md

@@ -0,0 +1,29 @@
+# Raspberry Pi and Raspbian
+
+It is possible to run the web editor or [command line interface](/cli) from Raspbian on Raspberry Pi 2 or 3.
+
+## Web editor
+
+The web editor requires to install IceWeasel (Firefox) as the built-in browser cannot handle it.
+
+```
+sudo apt-get install iceweasel
+```
+
+Once installed simply navigate to https://codethemicrobit.com or type
+
+```
+firefox https://codethemicrobit.com
+``` 
+
+## Command line
+
+The PXT command line also works on Raspbian and allows to run a local server and/or edit programs from any text editor.
+
+* Node.JS 6.0 needs installed
+
+To install all the tools, 
+
+```
+curl -s https://raw.githubusercontent.com/Microsoft/pxt-rpi/master/install.sh | sh -
+```

libs/microbit-bluetooth/_locales/microbit-bluetooth-jsdoc-strings.json

@@ -1,5 +1,4 @@
 {
-  "bluetooth": "Support for additional Bluetooth services.",
   "bluetooth.onBluetoothConnected": "Register code to run when the micro:bit is connected to over Bluetooth",
   "bluetooth.onBluetoothConnected|param|body": "Code to run when a Bluetooth connection is established",
   "bluetooth.onBluetoothDisconnected": "Register code to run when a bluetooth connection to the micro:bit is lost",
@@ -10,6 +9,7 @@
   "bluetooth.startLEDService": "Starts the Bluetooth LED service",
   "bluetooth.startMagnetometerService": "Starts the Bluetooth magnetometer service",
   "bluetooth.startTemperatureService": "Starts the Bluetooth temperature service",
+  "bluetooth.startUartService": "Starts the Bluetooth UART service",
   "bluetooth.uartRead": "Reads from the Bluetooth UART service buffer, returning its contents when the specified delimiter character is encountered.",
   "bluetooth.uartWrite": "Writes to the Bluetooth UART service buffer. From there the data is transmitted over Bluetooth to a connected device."
 }

libs/microbit-bluetooth/_locales/microbit-bluetooth-strings.json

@@ -7,6 +7,7 @@
   "bluetooth.startLEDService|block": "bluetooth led service",
   "bluetooth.startMagnetometerService|block": "bluetooth magnetometer service",
   "bluetooth.startTemperatureService|block": "bluetooth temperature service",
+  "bluetooth.startUartService|block": "bluetooth uart service",
   "bluetooth.uartRead|block": "bluetooth uart read %del=bluetooth_uart_delimiter_conv",
   "bluetooth.uartWrite|block": "bluetooth uart write %data",
   "bluetooth|block": "bluetooth"

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

@@ -22,6 +22,8 @@
   "control": "Runtime and event utilities.",
   "control.inBackground": "Schedules code that run in the background.",
   "control.reset": "Resets the BBC micro:bit.",
+  "control.waitMicros": "Blocks the current fiber for the given microseconds",
+  "control.waitMicros|param|micros": "number of micro-seconds to wait. eg: 4",
   "game": "A single-LED sprite game engine",
   "game.addScore": "Adds points to the current score",
   "game.addScore|param|points": "amount of points to change, eg: 1",
@@ -52,9 +54,12 @@
   "input.onLogoDown|param|body": "TODO",
   "input.onLogoUp": "Attaches code to run when the logo is oriented upwards and the board is vertical.",
   "input.onLogoUp|param|body": "TODO",
-  "input.onPinPressed": "Do something when a pin(``P0``, ``P1`` or both ``P2``) is pressed.",
-  "input.onPinPressed|param|body": "TODO",
-  "input.onPinPressed|param|name": "TODO",
+  "input.onPinPressed": "Do something when a pin is pressed.",
+  "input.onPinPressed|param|body": "the code to run when the pin is pressed",
+  "input.onPinPressed|param|name": "the pin that needs to be pressed",
+  "input.onPinReleased": "Do something when a pin is released.",
+  "input.onPinReleased|param|body": "the code to run when the pin is released",
+  "input.onPinReleased|param|name": "the pin that needs to be released",
   "input.onScreenDown": "Attaches code to run when the screen is facing down.",
   "input.onScreenDown|param|body": "TODO",
   "input.onScreenUp": "Attaches code to run when the screen is facing up.",
@@ -152,6 +157,8 @@
   "pins.setPull": "Configures the pull of this pin.",
   "pins.setPull|param|name": "pin to set the pull mode on",
   "pins.setPull|param|pull": "one of the mbed pull configurations: PullUp, PullDown, PullNone ",
+  "pins.spiWrite": "Write to the SPI slave and return the response",
+  "pins.spiWrite|param|value": "Data to be sent to the SPI slave",
   "serial": "Reading and writing data over a serial connection.",
   "serial.readLine": "Reads a line of text from the serial port.",
   "serial.redirect": "Dynamically configuring the serial instance to use pins other than USBTX and USBRX.",

libs/microbit/_locales/microbit-strings.json

@@ -12,6 +12,7 @@
   "basic|block": "basic",
   "control.inBackground|block": "run in background",
   "control.reset|block": "reset",
+  "control.waitMicros|block": "wait (µs)%micros",
   "control|block": "control",
   "game.addScore|block": "change score by|%points",
   "game.gameOver|block": "game over",
@@ -28,7 +29,8 @@
   "input.magneticForce|block": "magnetic force (µT)|%NAME",
   "input.onButtonPressed|block": "on button|%NAME|pressed",
   "input.onGesture|block": "on |%NAME",
-  "input.onPinPressed|block": "on pin|%NAME|pressed",
+  "input.onPinPressed|block": "on pin %NAME|pressed",
+  "input.onPinReleased|block": "on pin %NAME|released",
   "input.pinIsPressed|block": "pin %NAME|is pressed",
   "input.rotation|block": "rotation (°)|%NAME",
   "input.runningTime|block": "running time (ms)",
@@ -41,6 +43,7 @@
   "led.point|block": "point|x %x|y %y",
   "led.setBrightness|block": "set brightness %value",
   "led.stopAnimation|block": "stop animation",
+  "led.toggle|block": "toggle|x %x|y %y",
   "led.unplot|block": "unplot|x %x|y %y",
   "led|block": "led",
   "music.beat|block": "%fraction|beat",
@@ -65,6 +68,7 @@
   "pins.servoSetPulse|block": "servo set pulse|pin %value|to (µs) %micros",
   "pins.servoWritePin|block": "servo write|pin %name|to %value",
   "pins.setPull|block": "set pull|pin %pin|to %pull",
+  "pins.spiWrite|block": "spi write %value",
   "pins|block": "pins",
   "serial.readLine|block": "serial read line",
   "serial.redirect|block": "serial redirect to|TX %tx|RX %rx|at baud rate %rate",

libs/microbit/control.ts

@@ -42,6 +42,5 @@ namespace control {
      * Display warning in the simulator.
      */
     //% shim=pxtrt::runtimeWarning
-    export function runtimeWarning(message: string) {
-    }
+    export function runtimeWarning(message: string) { }
 }

libs/microbit/core.cpp

@@ -166,6 +166,7 @@ namespace Array_ {
     int removeElement(RefCollection *c, uint32_t x) { return c->removeElement(x); }
 }
 
+
 // Import some stuff directly
 namespace pxt {
   //%
@@ -181,10 +182,12 @@ namespace pxt {
   //%
   Action mkAction(int reflen, int totallen, int startptr);
   //%
-  RefRecord* mkRecord(int reflen, int totallen);
-  //%
   RefRecord* mkClassInstance(int offset);
   //%
+  void RefRecord_destroy(RefRecord *r);
+  //%
+  void RefRecord_print(RefRecord *r);
+  //%
   void debugMemLeaks();
   //%
   int incr(uint32_t e);
@@ -308,6 +311,72 @@ namespace pxtrt {
     }
   }
 
+  //%
+  RefMap *mkMap() {
+    return new RefMap();
+  }
+
+  //%
+  uint32_t mapGet(RefMap *map, uint32_t key) {
+    int i = map->findIdx(key);
+    if (i < 0) {
+      map->unref();
+      return 0;
+    }
+    uint32_t r = map->data[i].val;
+    map->unref();
+    return r;
+  }
+
+  //%
+  uint32_t mapGetRef(RefMap *map, uint32_t key) {
+    int i = map->findIdx(key);
+    if (i < 0) {
+      map->unref();
+      return 0;
+    }
+    uint32_t r = incr(map->data[i].val);
+    map->unref();
+    return r;
+  }
+
+  //%
+  void mapSet(RefMap *map, uint32_t key, uint32_t val) {
+    int i = map->findIdx(key);
+    if (i < 0) {
+      map->data.push_back({
+        key << 1,
+        val
+      });
+    } else {
+      if (map->data[i].key & 1) {
+        decr(map->data[i].val);
+        map->data[i].key = key << 1;
+      }
+      map->data[i].val = val;
+    }
+    map->unref();
+  }
+
+  //%
+  void mapSetRef(RefMap *map, uint32_t key, uint32_t val) {
+    int i = map->findIdx(key);
+    if (i < 0) {
+      map->data.push_back({
+        (key << 1) | 1,
+        val
+      });
+    } else {
+      if (map->data[i].key & 1) {
+        decr(map->data[i].val);
+      } else {
+        map->data[i].key = (key << 1) | 1;
+      }
+      map->data[i].val = val;
+    }
+    map->unref();      
+  }
+
   //
   // Debugger
   //

libs/microbit/pxtparts.json

@@ -1,78 +1,126 @@
 { 
-    "ledmatrix": {
-        "visual": "ledmatrix",
-        "breadboardColumnsNeeded": 8,
-        "breadboardStartRow": "h",
-        "pinAllocation": {
-            "type": "auto",
-            "gpioPinsNeeded": [5, 5]
+     "buttonpair": {
+        "simulationBehavior": "buttonpair",
+        "visual": {
+            "builtIn": "buttonpair",
+            "width": 75,
+            "height": 45,
+            "pinDistance": 15,
+            "pinLocations": [
+                {"x": 0, "y": 0},
+                {"x": 30, "y": 45},
+                {"x": 45, "y": 0},
+                {"x": 75, "y": 45}
+            ]
         },
-        "assemblyStep": 0,
-        "wires": [
-            {"start": ["breadboard", "j", 0], "end": ["GPIO", 5], "color": "purple", "assemblyStep": 1},
-            {"start": ["breadboard", "j", 1], "end": ["GPIO", 6], "color": "purple", "assemblyStep": 1},
-            {"start": ["breadboard", "j", 2], "end": ["GPIO", 7], "color": "purple", "assemblyStep": 1},
-            {"start": ["breadboard", "j", 3], "end": ["GPIO", 8], "color": "purple", "assemblyStep": 1},
-            {"start": ["breadboard", "a", 7], "end": ["GPIO", 9], "color": "purple", "assemblyStep": 1},
-            {"start": ["breadboard", "a", 0], "end": ["GPIO", 0], "color": "green", "assemblyStep": 2},
-            {"start": ["breadboard", "a", 1], "end": ["GPIO", 1], "color": "green", "assemblyStep": 2},
-            {"start": ["breadboard", "a", 2], "end": ["GPIO", 2], "color": "green", "assemblyStep": 2},
-            {"start": ["breadboard", "a", 3], "end": ["GPIO", 3], "color": "green", "assemblyStep": 2},
-            {"start": ["breadboard", "j", 4], "end": ["GPIO", 4], "color": "green", "assemblyStep": 2}
-        ]
-    },
-    "buttonpair": {
-        "visual": "buttonpair",
-        "breadboardColumnsNeeded": 6,
-        "breadboardStartRow": "f",
-        "pinAllocation": {
-            "type": "predefined",
-            "pins": ["P13", "P12"]
+        "numberOfPins": 4,
+        "pinDefinitions": [
+            {"target": "P14", "style": "male", "orientation": "-Z"},
+            {"target": "ground", "style": "male", "orientation": "-Z"},
+            {"target": "P15", "style": "male", "orientation": "-Z"},
+            {"target": "ground", "style": "male", "orientation": "-Z"}
+        ],
+        "instantiation": {
+            "kind": "singleton"
         },
-        "assemblyStep": 0,
-        "wires": [
-            {"start": ["breadboard", "j", 0], "end": ["GPIO", 0], "color": "yellow", "assemblyStep": 1},
-            {"start": ["breadboard", "a", 2], "end": "ground", "color": "blue", "assemblyStep": 1},
-            {"start": ["breadboard", "j", 3], "end": ["GPIO", 1], "color": "orange", "assemblyStep": 2},
-            {"start": ["breadboard", "a", 5], "end": "ground", "color": "blue", "assemblyStep": 2}
+        "assembly": [
+            {"part": true},
+            {"pinIndices": [0, 1]},
+            {"pinIndices": [2, 3]}
         ]
     },
     "neopixel": {
-        "visual": "neopixel",
-        "breadboardColumnsNeeded": 5,
-        "breadboardStartRow": "h",
-        "pinAllocation": {
-            "type": "factoryfunction",
-            "functionName": "neopixel.create",
-            "pinArgPositions": [0],
-            "otherArgPositions": [1]
+        "simulationBehavior": "neopixel",
+        "visual": {
+            "builtIn": "neopixel",
+            "width": 58,
+            "height": 113,
+            "pinDistance": 9,
+            "pinLocations": [
+                {"x": 10, "y": 0},
+                {"x": 19, "y": 0},
+                {"x": 28, "y": 0}
+            ]
         },
-        "assemblyStep": 0,
-        "wires": [
-            {"start": ["breadboard", "j", 1], "end": "ground", "color": "blue", "assemblyStep": 1},
-            {"start": ["breadboard", "j", 2], "end": "threeVolt", "color": "red", "assemblyStep": 2},
-            {"start": ["breadboard", "j", 3], "end": ["GPIO", 0], "color": "green", "assemblyStep": 2}
+        "numberOfPins": 3,
+        "pinDefinitions": [
+            {"target": {"pinInstantiationIdx": 0}, "style": "solder", "orientation": "+Z"},
+            {"target": "threeVolt", "style": "solder", "orientation": "+Z"},
+            {"target": "ground", "style": "solder", "orientation": "+Z"}
+        ],
+        "instantiation": {
+            "kind": "function",
+            "fullyQualifiedName": "neopixel.create",
+            "argumentRoles": [
+                {"pinInstantiationIdx": 0, "partParameter": "pin"},
+                {"partParameter": "mode"}
+            ]
+        },
+        "assembly": [
+            {"part": true, "pinIndices": [2]},
+            {"pinIndices": [0, 1]}
+        ]
+    },
+    "ledmatrix": {
+        "visual": {
+            "builtIn": "ledmatrix",
+            "width": 105,
+            "height": 105,
+            "pinDistance": 15,
+            "pinLocations": [
+                {"x": 0, "y": 0},
+                {"x": 15, "y": 0},
+                {"x": 30, "y": 0},
+                {"x": 45, "y": 0},
+                {"x": 105, "y": 105},
+                {"x": 0, "y": 105},
+                {"x": 15, "y": 105},
+                {"x": 30, "y": 105},
+                {"x": 45, "y": 105},
+                {"x": 60, "y": 0}
+            ]
+        },
+        "simulationBehavior": "ledmatrix",
+        "numberOfPins": 10,
+        "instantiation": {"kind": "singleton"},
+        "pinDefinitions": [
+            {"target": "P6", "style": "male", "orientation": "-Z", "colorGroup": 0},
+            {"target": "P7", "style": "male", "orientation": "-Z", "colorGroup": 0},
+            {"target": "P8", "style": "male", "orientation": "-Z", "colorGroup": 0},
+            {"target": "P9", "style": "male", "orientation": "-Z", "colorGroup": 0},
+            {"target": "P10", "style": "male", "orientation": "-Z", "colorGroup": 0},
+            {"target": "P12", "style": "male", "orientation": "-Z", "colorGroup": 1},
+            {"target": "P13", "style": "male", "orientation": "-Z", "colorGroup": 1},
+            {"target": "P16", "style": "male", "orientation": "-Z", "colorGroup": 1},
+            {"target": "P19", "style": "male", "orientation": "-Z", "colorGroup": 1},
+            {"target": "P20", "style": "male", "orientation": "-Z", "colorGroup": 1}
+        ],
+        "assembly": [
+            {"part": true},
+            {"pinIndices": [0, 1, 2, 3, 4]},
+            {"pinIndices": [5, 6, 7, 8, 9]}
         ]
     },
     "speaker": {
+        "numberOfPins": 2,
         "visual": {
             "image": "/parts/speaker.svg",
             "width": 500,
             "height": 500,
-            "firstPin": [180, 135],
-            "pinDist": 70,
-            "extraColumnOffset": 1
+            "pinDistance": 70,
+            "pinLocations": [
+                {"x": 180, "y": 135},
+                {"x": 320, "y": 135}
+            ]
         },
-        "breadboardColumnsNeeded": 5,
-        "breadboardStartRow": "f",
-        "pinAllocation": {
-            "type": "auto",
-            "gpioPinsNeeded": 1
-        },
-        "assemblyStep": 0,
-        "wires": [
-            {"start": ["breadboard", "j", 1], "end": ["GPIO", 0], "color": "#ff80fa", "assemblyStep": 1},
-            {"start": ["breadboard", "j", 3], "end": "ground", "color": "blue", "assemblyStep": 1}
+        "pinDefinitions": [
+            {"target": "P0", "style": "male", "orientation": "-Z"},
+            {"target": "ground", "style": "male", "orientation": "-Z"}
+        ],
+        "instantiation": {"kind": "singleton"},
+        "assembly": [
+            {"part": true, "pinIndices": [0]},
+            {"pinIndices": [1]}
         ]
     }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-microbit",
-  "version": "0.3.78",
+  "version": "0.4.3",
   "description": "micro:bit target for PXT",
   "keywords": [
     "JavaScript",
@@ -29,6 +29,6 @@
     "typescript": "^1.8.7"
   },
   "dependencies": {
-    "pxt-core": "0.3.92"
+    "pxt-core": "0.4.3"
   }
 }

pxtarget.json

@@ -75,7 +75,9 @@
     },
     "simulator": {
         "autoRun": true,
+        "streams": true,
         "aspectRatio": 1.22,
+        "parts": true,
         "partsAspectRatio": 0.69,
         "builtinParts": {
             "accelerometer": true,
@@ -91,7 +93,7 @@
         "yottaTarget": "bbc-microbit-classic-gcc",
         "yottaCorePackage": "pxt-microbit-core",
         "githubCorePackage": "microsoft/pxt-microbit-core",
-        "gittag": "v0.4.2",
+        "gittag": "v0.5.0",
         "serviceId": "ws"
     },
     "serial": {
@@ -113,6 +115,7 @@
         "embedUrl": "https://codethemicrobit.com/",
         "privacyUrl": "https://go.microsoft.com/fwlink/?LinkId=521839",
         "termsOfUseUrl": "https://go.microsoft.com/fwlink/?LinkID=206977",
+        "githubUrl": "https://github.com/Microsoft/pxt-microbit",
         "boardName": "BBC micro:bit",
         "docMenu": [
             {
@@ -140,10 +143,73 @@
                 "path": "/device"
             }
         ],
-        "sideDoc": "getting-started"
+        "sideDoc": "getting-started",
+        "usbDocs": "/device/usb",
+        "usbHelp": [
+            {
+                "name": "connection",
+                "os": "*",
+                "browser": "*",
+                "path": "/static/mb/device/usb-generic.jpg"
+            },
+            {
+                "name": "connection",
+                "os": "mac",
+                "browser": "*",
+                "path": "/static/mb/device/usb-mac.jpg"
+            },
+            {
+                "name": "save",
+                "os": "windows",
+                "browser": "firefox",
+                "path": "/static/mb/device/usb-windows-firefox-1.png"
+            },
+            {
+                "name": "save",
+                "os": "mac",
+                "browser": "firefox",
+                "path": "/static/mb/device/usb-osx-firefox-1.png"
+            },
+            {
+                "name": "save",
+                "os": "mac",
+                "browser": "chrome",
+                "path": "/static/mb/device/usb-osx-chrome.png"
+            },
+            {
+                "name": "save",
+                "os": "windows",
+                "browser": "edge",
+                "path": "/static/mb/device/usb-windows-edge-1.png"
+            },
+            {
+                "name": "save",
+                "os": "windows",
+                "browser": "ie",
+                "path": "/static/mb/device/usb-windows-ie11-1.png"
+            },
+            {
+                "name": "save",
+                "os": "windows",
+                "browser": "chrome",
+                "path": "/static/mb/device/usb-windows-chrome.png"
+            },
+            {
+                "name": "copy",
+                "os": "mac",
+                "browser": "*",
+                "path": "/static/mb/device/usb-osx-dnd.png"
+            },
+            {
+                "name": "copy",
+                "os": "windows",
+                "browser": "*",
+                "path": "/static/mb/device/usb-windows-sendto.jpg"
+            }
+        ]
     },
     "analytics": {
         "userVoiceApiKey": "WEkkIGaj1WtJnSUF59iwaA",
         "userVoiceForumId": 402381
     }
-}
+}

sim/allocator.ts

@@ -1,556 +0,0 @@
-
-namespace pxsim {
-    export interface AllocatorOpts {
-        boardDef: BoardDefinition,
-        cmpDefs: Map<PartDefinition>,
-        fnArgs: any,
-        getBBCoord: (loc: BBRowCol) => visuals.Coord,
-        cmpList: string[]
-    };
-    export interface AllocatorResult {
-        powerWires: WireInst[],
-        components: CmpAndWireInst[]
-    }
-
-    export interface CmpAndWireInst {
-        component: CmpInst,
-        wires: WireInst[]
-    }
-    export interface CmpInst {
-        name: string,
-        breadboardStartColumn: number,
-        breadboardStartRow: string,
-        assemblyStep: number,
-        visual: string | PartVisualDefinition,
-        microbitPins: string[],
-        otherArgs?: string[],
-    }
-    export interface WireInst {
-        start: Loc,
-        end: Loc,
-        color: string,
-        assemblyStep: number
-    };
-    interface PartialCmpAlloc {
-        name: string,
-        def: PartDefinition,
-        pinsAssigned: string[],
-        pinsNeeded: number | number[],
-        breadboardColumnsNeeded: number,
-        otherArgs?: string[],
-    }
-
-    interface AllocLocOpts {
-        nearestBBPin?: BBRowCol,
-        startColumn?: number,
-        cmpGPIOPins?: string[],
-    };
-    interface AllocWireOpts {
-        startColumn: number,
-        cmpGPIOPins: string[],
-    }
-    interface AllocBlock {
-        cmpIdx: number,
-        cmpBlkIdx: number,
-        gpioNeeded: number,
-        gpioAssigned: string[]
-    }
-    interface PowerUsage {
-        topGround: boolean,
-        topThreeVolt: boolean,
-        bottomGround: boolean,
-        bottomThreeVolt: boolean,
-        singleGround: boolean,
-        singleThreeVolt: boolean,
-    }
-    function isOnBreadboardBottom(location: WireLocationDefinition) {
-        let isBot = false;
-        if (location[0] === "breadboard") {
-            let row = <string>location[1];
-            isBot = 0 <= ["a", "b", "c", "d", "e"].indexOf(row);
-        }
-        return isBot;
-    }
-    const arrCount = (a: boolean[]) => a.reduce((p, n) => p + (n ? 1 : 0), 0);
-    const arrAny = (a: boolean[]) => arrCount(a) > 0;
-    function computePowerUsage(wireDef: WireDefinition): PowerUsage {
-        let ends = [wireDef.start, wireDef.end];
-        let endIsGround = ends.map(e => e === "ground");
-        let endIsThreeVolt = ends.map(e => e === "threeVolt");
-        let endIsBot = ends.map(e => isOnBreadboardBottom(e));
-        let hasGround = arrAny(endIsGround);
-        let hasThreeVolt = arrAny(endIsThreeVolt);
-        let hasBot = arrAny(endIsBot);
-        return {
-            topGround: hasGround && !hasBot,
-            topThreeVolt: hasThreeVolt && !hasBot,
-            bottomGround: hasGround && hasBot,
-            bottomThreeVolt: hasThreeVolt && hasBot,
-            singleGround: hasGround,
-            singleThreeVolt: hasThreeVolt
-        };
-    }
-    function mergePowerUsage(powerUsages: PowerUsage[]) {
-        let finalPowerUsage = powerUsages.reduce((p, n) => ({
-                topGround: p.topGround || n.topGround,
-                topThreeVolt: p.topThreeVolt || n.topThreeVolt,
-                bottomGround: p.bottomGround || n.bottomGround,
-                bottomThreeVolt: p.bottomThreeVolt || n.bottomThreeVolt,
-                singleGround: n.singleGround ? p.singleGround === null : p.singleGround,
-                singleThreeVolt: n.singleThreeVolt ? p.singleThreeVolt === null : p.singleThreeVolt,
-            }), {
-                topGround: false,
-                topThreeVolt: false,
-                bottomGround: false,
-                bottomThreeVolt: false,
-                singleGround: null,
-                singleThreeVolt: null,
-            });
-        if (finalPowerUsage.singleGround)
-            finalPowerUsage.topGround = finalPowerUsage.bottomGround = false;
-        if (finalPowerUsage.singleThreeVolt)
-            finalPowerUsage.topThreeVolt = finalPowerUsage.bottomThreeVolt = false;
-        return finalPowerUsage;
-    }
-    function copyDoubleArray(a: string[][]) {
-         return a.map(b => b.map(p => p));
-    }
-    function readPin(arg: string): string {
-        U.assert(!!arg, "Invalid pin: " + arg);
-        let pin = arg.split("DigitalPin.")[1];
-        return pin;
-    }
-    function mkReverseMap(map: {[key: string]: string}) {
-        let origKeys: string[] = [];
-        let origVals: string[] = [];
-        for (let key in map) {
-            origKeys.push(key);
-            origVals.push(map[key]);
-        }
-        let newMap: {[key: string]: string} = {};
-        for (let i = 0; i < origKeys.length; i++) {
-            let newKey = origVals[i];
-            let newVal = origKeys[i];
-            newMap[newKey] = newVal;
-        }
-        return newMap;
-    }
-    class Allocator {
-        private opts: AllocatorOpts;
-        private availablePowerPins = {
-            top: {
-                threeVolt: mkRange(26, 51).map(n => <BBRowCol>["+", `${n}`]),
-                ground: mkRange(26, 51).map(n => <BBRowCol>["-", `${n}`]),
-            },
-            bottom: {
-                threeVolt: mkRange(1, 26).map(n => <BBRowCol>["+", `${n}`]),
-                ground: mkRange(1, 26).map(n => <BBRowCol>["-", `${n}`]),
-            },
-        };
-        private powerUsage: PowerUsage;
-
-        constructor(opts: AllocatorOpts) {
-            this.opts = opts;
-        }
-
-        private allocateLocation(location: WireLocationDefinition, opts: AllocLocOpts): Loc {
-            if (location === "ground" || location === "threeVolt") {
-                //special case if there is only a single ground or three volt pin in the whole build
-                if (location === "ground" && this.powerUsage.singleGround) {
-                    let boardGroundPin = this.getBoardGroundPin();
-                    return {type: "dalboard", pin: boardGroundPin};
-                } else if (location === "threeVolt" && this.powerUsage.singleThreeVolt) {
-                    let boardThreeVoltPin = this.getBoardThreeVoltPin();
-                    return {type: "dalboard", pin: boardThreeVoltPin};
-                }
-
-                U.assert(!!opts.nearestBBPin);
-                let nearestCoord = this.opts.getBBCoord(opts.nearestBBPin);
-                let firstTopAndBot = [
-                    this.availablePowerPins.top.ground[0] || this.availablePowerPins.top.threeVolt[0],
-                    this.availablePowerPins.bottom.ground[0] || this.availablePowerPins.bottom.threeVolt[0]
-                ].map(loc => {
-                    return this.opts.getBBCoord(loc);
-                });
-                if (!firstTopAndBot[0] || !firstTopAndBot[1]) {
-                    console.debug(`No more available "${location}" locations!`);
-                    //TODO
-                }
-                let nearTop = visuals.findClosestCoordIdx(nearestCoord, firstTopAndBot) == 0;
-                let barPins: BBRowCol[];
-                if (nearTop) {
-                    if (location === "ground") {
-                        barPins = this.availablePowerPins.top.ground;
-                    } else if (location === "threeVolt") {
-                        barPins = this.availablePowerPins.top.threeVolt;
-                    }
-                } else {
-                    if (location === "ground") {
-                        barPins = this.availablePowerPins.bottom.ground;
-                    } else if (location === "threeVolt") {
-                        barPins = this.availablePowerPins.bottom.threeVolt;
-                    }
-                }
-                let pinCoords = barPins.map(rowCol => {
-                    return this.opts.getBBCoord(rowCol);
-                });
-                let closestPinIdx = visuals.findClosestCoordIdx(nearestCoord, pinCoords);
-                let pin = barPins[closestPinIdx];
-                if (nearTop) {
-                    this.availablePowerPins.top.ground.splice(closestPinIdx, 1);
-                    this.availablePowerPins.top.threeVolt.splice(closestPinIdx, 1);
-                } else {
-                    this.availablePowerPins.bottom.ground.splice(closestPinIdx, 1);
-                    this.availablePowerPins.bottom.threeVolt.splice(closestPinIdx, 1);
-                }
-                return {type: "breadboard", rowCol: pin};
-            } else if (location[0] === "breadboard") {
-                U.assert(!!opts.startColumn);
-                let row = <string>location[1];
-                let col = (<number>location[2] + opts.startColumn).toString();
-                return {type: "breadboard", rowCol: [row, col]}
-            } else if (location[0] === "GPIO") {
-                U.assert(!!opts.cmpGPIOPins);
-                let idx = <number>location[1];
-                let pin = opts.cmpGPIOPins[idx];
-                return {type: "dalboard", pin: pin};
-            } else if (location === "MOSI" || location === "MISO" || location === "SCK") {
-                if (!this.opts.boardDef.spiPins)
-                    console.debug("No SPI pin mappings found!");
-                let pin = (<any>this.opts.boardDef.spiPins)[location as string] as string;
-                return {type: "dalboard", pin: pin};
-            } else if (location === "SDA" || location === "SCL") {
-                if (!this.opts.boardDef.i2cPins)
-                    console.debug("No I2C pin mappings found!");
-                let pin = (<any>this.opts.boardDef.i2cPins)[location as string] as string;
-                return {type: "dalboard", pin: pin};
-            } else {
-                //TODO
-                U.assert(false);
-                return null;
-            }
-        }
-        private getBoardGroundPin() {
-            let boardGround = this.opts.boardDef.groundPins[0] || null;
-            if (!boardGround) {
-                console.log("No available ground pin on board!");
-                //TODO
-            }
-            return boardGround;
-        }
-        private getBoardThreeVoltPin() {
-            let threeVoltPin = this.opts.boardDef.threeVoltPins[0] || null;
-            if (!threeVoltPin) {
-                console.log("No available 3.3V pin on board!");
-                //TODO
-            }
-            return threeVoltPin;
-        }
-        private allocatePowerWires(powerUsage: PowerUsage): WireInst[] {
-            let boardGroundPin = this.getBoardGroundPin();
-            let threeVoltPin = this.getBoardThreeVoltPin();
-            let topLeft: BBRowCol = ["-", "26"];
-            let botLeft: BBRowCol = ["-", "1"];
-            let topRight: BBRowCol = ["-", "50"];
-            let botRight: BBRowCol = ["-", "25"];
-            let top: BBRowCol, bot: BBRowCol;
-            if (this.opts.boardDef.attachPowerOnRight) {
-                top = topRight;
-                bot = botRight;
-            } else {
-                top = topLeft;
-                bot = botLeft;
-            }
-            const GROUND_COLOR = "blue";
-            const POWER_COLOR = "red";
-            const wires: WireInst[] = [];
-            let groundStep = 0;
-            let threeVoltStep = (powerUsage.bottomGround || powerUsage.topGround) ? 1 : 0;
-            if (powerUsage.bottomGround && powerUsage.topGround) {
-                //bb top - <==> bb bot -
-                wires.push({
-                    start: this.allocateLocation("ground", {nearestBBPin: top}),
-                    end: this.allocateLocation("ground", {nearestBBPin: bot}),
-                    color: GROUND_COLOR, assemblyStep: groundStep
-                });
-            }
-            if (powerUsage.topGround) {
-                //board - <==> bb top -
-                wires.push({
-                    start: this.allocateLocation("ground", {nearestBBPin: top}),
-                    end: {type: "dalboard", pin: boardGroundPin},
-                    color: GROUND_COLOR, assemblyStep: groundStep
-                });
-            } else if (powerUsage.bottomGround) {
-                //board - <==> bb bot -
-                wires.push({
-                    start: this.allocateLocation("ground", {nearestBBPin: bot}),
-                    end: {type: "dalboard", pin: boardGroundPin},
-                    color: GROUND_COLOR, assemblyStep: groundStep
-                });
-            }
-            if (powerUsage.bottomThreeVolt && powerUsage.bottomGround) {
-                //bb top + <==> bb bot +
-                wires.push({
-                    start: this.allocateLocation("threeVolt", {nearestBBPin: top}),
-                    end: this.allocateLocation("threeVolt", {nearestBBPin: bot}),
-                    color: POWER_COLOR, assemblyStep: threeVoltStep
-                });
-            }
-            if (powerUsage.topThreeVolt) {
-                //board + <==> bb top +
-                wires.push({
-                    start: this.allocateLocation("threeVolt", {nearestBBPin: top}),
-                    end: {type: "dalboard", pin: threeVoltPin},
-                    color: POWER_COLOR, assemblyStep: threeVoltStep
-                });
-            } else if (powerUsage.bottomThreeVolt) {
-                //board + <==> bb bot +
-                wires.push({
-                    start: this.allocateLocation("threeVolt", {nearestBBPin: bot}),
-                    end: {type: "dalboard", pin: threeVoltPin},
-                    color: POWER_COLOR, assemblyStep: threeVoltStep
-                });
-            }
-            return wires;
-        }
-        private allocateWire(wireDef: WireDefinition, opts: AllocWireOpts): WireInst {
-            let ends = [wireDef.start, wireDef.end];
-            let endIsPower = ends.map(e => e === "ground" || e === "threeVolt");
-            //allocate non-power first so we know the nearest pin for the power end
-            let endInsts = ends.map((e, idx) => !endIsPower[idx] ? this.allocateLocation(e, opts) : null)
-            //allocate power pins closest to the other end of the wire
-            endInsts = endInsts.map((e, idx) => {
-                if (e)
-                    return e;
-                let locInst = <BBLoc>endInsts[1 - idx]; // non-power end
-                let l = this.allocateLocation(ends[idx], {
-                    nearestBBPin: locInst.rowCol,
-                    startColumn: opts.startColumn,
-                    cmpGPIOPins: opts.cmpGPIOPins,
-                });
-                return l;
-            });
-            return {start: endInsts[0], end: endInsts[1], color: wireDef.color, assemblyStep: wireDef.assemblyStep};
-        }
-        private allocatePartialCmps(): PartialCmpAlloc[] {
-            let cmpNmAndDefs = this.opts.cmpList.map(cmpName => <[string, PartDefinition]>[cmpName, this.opts.cmpDefs[cmpName]]).filter(d => !!d[1]);
-            let cmpNmsList = cmpNmAndDefs.map(p => p[0]);
-            let cmpDefsList = cmpNmAndDefs.map(p => p[1]);
-            let partialCmps: PartialCmpAlloc[] = [];
-            cmpDefsList.forEach((def, idx) => {
-                let nm = cmpNmsList[idx];
-                if (def.pinAllocation.type === "predefined") {
-                    let mbPins = (<PredefinedPinAlloc>def.pinAllocation).pins;
-                    let pinsAssigned = mbPins.map(p => this.opts.boardDef.gpioPinMap[p]);
-                    partialCmps.push({
-                        name: nm,
-                        def: def,
-                        pinsAssigned: pinsAssigned,
-                        pinsNeeded: 0,
-                        breadboardColumnsNeeded: def.breadboardColumnsNeeded,
-                    });
-                } else if (def.pinAllocation.type === "factoryfunction") {
-                    let fnPinAlloc = (<FactoryFunctionPinAlloc>def.pinAllocation);
-                    let fnNm = fnPinAlloc.functionName;
-                    let fnsAndArgs = <string[]>this.opts.fnArgs[fnNm];
-                    let success = false;
-                    if (fnsAndArgs && fnsAndArgs.length) {
-                        let pinArgPoses = fnPinAlloc.pinArgPositions;
-                        let otherArgPoses = fnPinAlloc.otherArgPositions || [];
-                        fnsAndArgs.forEach(fnArgsStr => {
-                            let fnArgsSplit = fnArgsStr.split(",");
-                            let pinArgs: string[] = [];
-                            pinArgPoses.forEach(i => {
-                                pinArgs.push(fnArgsSplit[i]);
-                            });
-                            let mbPins = pinArgs.map(arg => readPin(arg));
-                            let otherArgs: string[] = [];
-                            otherArgPoses.forEach(i => {
-                                otherArgs.push(fnArgsSplit[i]);
-                            });
-                            let pinsAssigned = mbPins.map(p => this.opts.boardDef.gpioPinMap[p]);
-                            partialCmps.push({
-                                name: nm,
-                                def: def,
-                                pinsAssigned: pinsAssigned,
-                                pinsNeeded: 0,
-                                breadboardColumnsNeeded: def.breadboardColumnsNeeded,
-                                otherArgs: otherArgs.length ? otherArgs : null,
-                            });
-                        });
-                    } else {
-                        // failed to find pin allocation from callsites
-                        console.debug("Failed to read pin(s) from callsite for: " + fnNm);
-                        let pinsNeeded = fnPinAlloc.pinArgPositions.length;
-                        partialCmps.push({
-                            name: nm,
-                            def: def,
-                            pinsAssigned: [],
-                            pinsNeeded: pinsNeeded,
-                            breadboardColumnsNeeded: def.breadboardColumnsNeeded,
-                        });
-                    }
-                } else if (def.pinAllocation.type === "auto") {
-                    let pinsNeeded = (<AutoPinAlloc>def.pinAllocation).gpioPinsNeeded;
-                    partialCmps.push({
-                        name: nm,
-                        def: def,
-                        pinsAssigned: [],
-                        pinsNeeded: pinsNeeded,
-                        breadboardColumnsNeeded: def.breadboardColumnsNeeded,
-                    });
-                }
-            });
-            return partialCmps;
-        }
-        private allocateGPIOPins(partialCmps: PartialCmpAlloc[]): string[][] {
-            let availableGPIOBlocks = copyDoubleArray(this.opts.boardDef.gpioPinBlocks);
-            let sortAvailableGPIOBlocks = () => availableGPIOBlocks.sort((a, b) => a.length - b.length); //smallest blocks first
-            // determine blocks needed
-            let blockAssignments: AllocBlock[] = [];
-            let preassignedPins: string[] = [];
-            partialCmps.forEach((cmp, idx) => {
-                if (cmp.pinsAssigned && cmp.pinsAssigned.length) {
-                    //already assigned
-                    blockAssignments.push({cmpIdx: idx, cmpBlkIdx: 0, gpioNeeded: 0, gpioAssigned: cmp.pinsAssigned});
-                    preassignedPins = preassignedPins.concat(cmp.pinsAssigned);
-                } else if (cmp.pinsNeeded) {
-                    if (typeof cmp.pinsNeeded === "number") {
-                        //individual pins
-                        for (let i = 0; i < cmp.pinsNeeded; i++) {
-                            blockAssignments.push(
-                                {cmpIdx: idx, cmpBlkIdx: 0, gpioNeeded: 1, gpioAssigned: []});
-                        }
-                    } else {
-                        //blocks of pins
-                        let blocks = <number[]>cmp.pinsNeeded;
-                        blocks.forEach((numNeeded, blkIdx) => {
-                            blockAssignments.push(
-                                {cmpIdx: idx, cmpBlkIdx: blkIdx, gpioNeeded: numNeeded, gpioAssigned: []});
-                        });
-                    }
-                }
-            });
-            // remove assigned blocks
-            availableGPIOBlocks.forEach(blks => {
-                for (let i = blks.length - 1; 0 <= i; i--) {
-                    let pin = blks[i];
-                    if (0 <= preassignedPins.indexOf(pin)) {
-                        blks.splice(i, 1);
-                    }
-                }
-            });
-            // sort by size of blocks
-            let sortBlockAssignments = () => blockAssignments.sort((a, b) => b.gpioNeeded - a.gpioNeeded); //largest blocks first
-            // allocate each block
-            if (0 < blockAssignments.length && 0 < availableGPIOBlocks.length) {
-                do {
-                    sortBlockAssignments();
-                    sortAvailableGPIOBlocks();
-                    let assignment = blockAssignments[0];
-                    let smallestAvailableBlockThatFits: string[];
-                    for (let j = 0; j < availableGPIOBlocks.length; j++) {
-                        smallestAvailableBlockThatFits = availableGPIOBlocks[j];
-                        if (assignment.gpioNeeded <= availableGPIOBlocks[j].length) {
-                            break;
-                        }
-                    }
-                    if (!smallestAvailableBlockThatFits || smallestAvailableBlockThatFits.length <= 0) {
-                        break; // out of pins
-                    }
-                    while (0 < assignment.gpioNeeded && 0 < smallestAvailableBlockThatFits.length) {
-                        assignment.gpioNeeded--;
-                        let pin = smallestAvailableBlockThatFits[0];
-                        smallestAvailableBlockThatFits.splice(0, 1);
-                        assignment.gpioAssigned.push(pin);
-                    }
-                    sortBlockAssignments();
-                } while (0 < blockAssignments[0].gpioNeeded);
-            }
-            if (0 < blockAssignments.length && 0 < blockAssignments[0].gpioNeeded) {
-                console.debug("Not enough GPIO pins!");
-                return null;
-            }
-            let cmpGPIOPinBlocks: string[][][] = partialCmps.map((def, cmpIdx) => {
-                if (!def)
-                    return null;
-                let assignments = blockAssignments.filter(a => a.cmpIdx === cmpIdx);
-                let gpioPins: string[][] = [];
-                for (let i = 0; i < assignments.length; i++) {
-                    let a = assignments[i];
-                    let blk = gpioPins[a.cmpBlkIdx] || (gpioPins[a.cmpBlkIdx] = []);
-                    a.gpioAssigned.forEach(p => blk.push(p));
-                }
-                return gpioPins;
-            });
-            let cmpGPIOPins = cmpGPIOPinBlocks.map(blks => blks.reduce((p, n) => p.concat(n), []));
-            return cmpGPIOPins;
-        }
-        private allocateColumns(partialCmps: PartialCmpAlloc[]): number[] {
-            let componentsCount = partialCmps.length;
-            let totalAvailableSpace = 30; //TODO allow multiple breadboards
-            let totalSpaceNeeded = partialCmps.map(d => d.breadboardColumnsNeeded).reduce((p, n) => p + n, 0);
-            let extraSpace = totalAvailableSpace - totalSpaceNeeded;
-            if (extraSpace <= 0) {
-                console.log("Not enough breadboard space!");
-                //TODO
-            }
-            let padding = Math.floor(extraSpace / (componentsCount - 1 + 2));
-            let componentSpacing = padding; //Math.floor(extraSpace/(componentsCount-1));
-            let totalCmpPadding = extraSpace - componentSpacing * (componentsCount - 1);
-            let leftPadding = Math.floor(totalCmpPadding / 2);
-            let rightPadding = Math.ceil(totalCmpPadding / 2);
-            let nextAvailableCol = 1 + leftPadding;
-            let cmpStartCol = partialCmps.map(cmp => {
-                let col = nextAvailableCol;
-                nextAvailableCol += cmp.breadboardColumnsNeeded + componentSpacing;
-                return col;
-            });
-            return cmpStartCol;
-        }
-        private allocateComponent(partialCmp: PartialCmpAlloc, startColumn: number, microbitPins: string[]): CmpInst {
-            return {
-                name: partialCmp.name,
-                breadboardStartColumn: startColumn,
-                breadboardStartRow: partialCmp.def.breadboardStartRow,
-                assemblyStep: partialCmp.def.assemblyStep,
-                visual: partialCmp.def.visual,
-                microbitPins: microbitPins,
-                otherArgs: partialCmp.otherArgs,
-            };
-        }
-        public allocateAll(): AllocatorResult {
-            let cmpList = this.opts.cmpList;
-            let basicWires: WireInst[] = [];
-            let cmpsAndWires: CmpAndWireInst[] = [];
-            if (cmpList.length > 0) {
-                let partialCmps = this.allocatePartialCmps();
-                let allWireDefs = partialCmps.map(p => p.def.wires).reduce((p, n) => p.concat(n), []);
-                let allPowerUsage = allWireDefs.map(w => computePowerUsage(w));
-                this.powerUsage = mergePowerUsage(allPowerUsage);
-                basicWires = this.allocatePowerWires(this.powerUsage);
-                let cmpGPIOPins = this.allocateGPIOPins(partialCmps);
-                let reverseMap = mkReverseMap(this.opts.boardDef.gpioPinMap);
-                let cmpMicrobitPins = cmpGPIOPins.map(pins => pins.map(p => reverseMap[p]));
-                let cmpStartCol = this.allocateColumns(partialCmps);
-                let cmps = partialCmps.map((c, idx) => this.allocateComponent(c, cmpStartCol[idx], cmpMicrobitPins[idx]));
-                let wires = partialCmps.map((c, idx) => c.def.wires.map(d => this.allocateWire(d, {
-                    cmpGPIOPins: cmpGPIOPins[idx],
-                    startColumn: cmpStartCol[idx],
-                })));
-                cmpsAndWires = cmps.map((c, idx) => {
-                    return {component: c, wires: wires[idx]}
-                });
-            }
-            return {
-                powerWires: basicWires,
-                components: cmpsAndWires
-            };
-        }
-    }
-
-    export function allocateDefinitions(opts: AllocatorOpts): AllocatorResult {
-        return new Allocator(opts).allocateAll();
-    }
-}

sim/dalboard.ts

@@ -5,7 +5,7 @@ namespace pxsim {
         id: string;
 
         // the bus
-        bus: EventBus;
+        bus: pxsim.EventBus;
 
         // state & update logic for component services
         ledMatrixState: LedMatrixState;
@@ -25,11 +25,17 @@ namespace pxsim {
         constructor() {
             super()
             this.id = "b" + Math_.random(2147483647);
-            this.bus = new EventBus(runtime);
+            this.bus = new pxsim.EventBus(runtime);
 
             // components
             this.ledMatrixState = new LedMatrixState(runtime);
-            this.buttonPairState = new ButtonPairState();
+            this.buttonPairState = new ButtonPairState({
+                ID_BUTTON_A: DAL.MICROBIT_ID_BUTTON_A,
+                ID_BUTTON_B: DAL.MICROBIT_ID_BUTTON_B,
+                ID_BUTTON_AB: DAL.MICROBIT_ID_BUTTON_AB,
+                BUTTON_EVT_UP: DAL.MICROBIT_BUTTON_EVT_UP,
+                BUTTON_EVT_CLICK: DAL.MICROBIT_BUTTON_EVT_CLICK
+            });
             this.edgeConnectorState = new EdgeConnectorState();
             this.radioState = new RadioState(runtime);
             this.accelerometerState = new AccelerometerState(runtime);
@@ -84,8 +90,8 @@ namespace pxsim {
             let viewHost = new visuals.BoardHost({
                 state: this,
                 boardDef: boardDef,
-                cmpsList: cmpsList,
-                cmpDefs: cmpDefs,
+                partsList: cmpsList,
+                partDefs: cmpDefs,
                 fnArgs: fnArgs,
                 maxWidth: "100%",
                 maxHeight: "100%",
@@ -97,4 +103,37 @@ namespace pxsim {
             return Promise.resolve();
         }
     }
+
+    export function initRuntimeWithDalBoard() {
+        U.assert(!runtime.board);
+        let b = new DalBoard();
+        runtime.board = b;
+        runtime.postError = (e) => {
+            led.setBrightness(255);
+            let img = board().ledMatrixState.image;
+            img.clear();
+            img.set(0, 4, 255);
+            img.set(1, 3, 255);
+            img.set(2, 3, 255);
+            img.set(3, 3, 255);
+            img.set(4, 4, 255);
+            img.set(0, 0, 255);
+            img.set(1, 0, 255);
+            img.set(0, 1, 255);
+            img.set(1, 1, 255);
+            img.set(3, 0, 255);
+            img.set(4, 0, 255);
+            img.set(3, 1, 255);
+            img.set(4, 1, 255);
+            runtime.updateDisplay();
+        }
+    }
+
+    if (!pxsim.initCurrentRuntime) {
+        pxsim.initCurrentRuntime = initRuntimeWithDalBoard;
+    }    
+
+    export function board() {
+        return runtime.board as DalBoard;
+    } 
 }

sim/definitions.ts

@@ -53,7 +53,7 @@ namespace pxsim {
         marginWhenBreadboarding: [0, 0, 80, 0],
     }
 
-    export const builtinComponentSimVisual: Map<() => visuals.IBoardComponent<any>> = {
+    export const builtinComponentSimVisual: Map<() => visuals.IBoardPart<any>> = {
         "buttonpair": () => new visuals.ButtonPairView(),
         "ledmatrix": () => new visuals.LedMatrixView(),
         "neopixel": () => new visuals.NeoPixelView(),

sim/instructions.ts

@@ -1,9 +1,6 @@
-/// <reference path="../../node_modules/pxt-core/typings/bluebird/bluebird.d.ts"/>
-/// <reference path="../../node_modules/pxt-core/built/pxtsim.d.ts"/>
-/// <reference path="../../node_modules/pxt-core/built/pxtrunner.d.ts"/>
-/// <reference path="../../libs/microbit/dal.d.ts"/>
-/// <reference path="../visuals/genericboard.ts"/>
-/// <reference path="../visuals/wiring.ts"/>
+/// <reference path="../node_modules/pxt-core/typings/bluebird/bluebird.d.ts"/>
+/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
+/// <reference path="../node_modules/pxt-core/built/pxtrunner.d.ts"/>
 
 //HACK: allows instructions.html to access pxtblocks without requiring simulator.html to import blocks as well
 if (!(<any>window).pxt) (<any>window).pxt = {};
@@ -20,7 +17,7 @@ namespace pxsim.instructions {
     const LBL_LEFT_PAD = 5;
     const REQ_WIRE_HEIGHT = 45;
     const REQ_CMP_HEIGHT = 55;
-    const REQ_CMP_SCALE = 0.5 * 4;
+    const REQ_CMP_SCALE = 0.5 * 3;
     type Orientation = "landscape" | "portrait";
     const ORIENTATION: Orientation = "portrait";
     const PPI = 96.0;
@@ -59,7 +56,7 @@ namespace pxsim.instructions {
                 border-color: ${BORDER_COLOR};
                 border-style: solid;
                 border-radius: ${BORDER_RADIUS}px;
-                display: block;
+                display: inline-block;
                 width: ${PANEL_WIDTH}px;
                 height: ${PANEL_HEIGHT}px;
                 position: relative;
@@ -284,18 +281,18 @@ namespace pxsim.instructions {
         div.appendChild(svgEl);
         return div;
     }
-    function mkCmpDiv(cmp: "wire" | string | PartVisualDefinition, opts: mkCmpDivOpts): HTMLElement {
+    function mkCmpDiv(cmp: "wire" | PartVisualDefinition, opts: mkCmpDivOpts): HTMLElement {
         let el: visuals.SVGElAndSize;
         if (cmp == "wire") {
-            //TODO: support non-croc wire parts
             el = visuals.mkWirePart([0, 0], opts.wireClr || "red", opts.crocClips);
-        } else if (typeof cmp == "string") {
-            let builtinVis = <string>cmp;
-            let cnstr = builtinComponentPartVisual[builtinVis];
-            el = cnstr([0, 0]);
         } else {
             let partVis = <PartVisualDefinition>cmp;
-            el = visuals.mkGenericPartSVG(partVis);
+            if (typeof partVis.builtIn == "string") {
+                let cnstr = builtinComponentPartVisual[partVis.builtIn];
+                el = cnstr([0, 0]);
+            } else {
+                el = visuals.mkGenericPartSVG(partVis);
+            }
         }
         return wrapSvg(el, opts);
     }
@@ -305,40 +302,33 @@ namespace pxsim.instructions {
         fnArgs: any,
         allAlloc: AllocatorResult,
         stepToWires: WireInst[][],
-        stepToCmps: CmpInst[][]
+        stepToCmps: PartInst[][]
         allWires: WireInst[],
-        allCmps: CmpInst[],
+        allCmps: PartInst[],
         lastStep: number,
         colorToWires: Map<WireInst[]>,
         allWireColors: string[],
     };
     function mkBoardProps(allocOpts: AllocatorOpts): BoardProps {
         let allocRes = allocateDefinitions(allocOpts);
-        let {powerWires, components} = allocRes;
         let stepToWires: WireInst[][] = [];
-        let stepToCmps: CmpInst[][] = [];
-        powerWires.forEach(w => {
-            let step = w.assemblyStep + 1;
-            (stepToWires[step] || (stepToWires[step] = [])).push(w)
-        });
-        let getMaxStep = (ns: { assemblyStep: number }[]) => ns.reduce((m, n) => Math.max(m, n.assemblyStep), 0);
-        let stepOffset = powerWires.length > 0 ? getMaxStep(powerWires) + 2 : 1;
-        components.forEach(cAndWs => {
-            let {component, wires} = cAndWs;
-            let cStep = component.assemblyStep + stepOffset;
-            let arr = stepToCmps[cStep] || (stepToCmps[cStep] = []);
-            arr.push(component);
-            let wSteps = wires.map(w => w.assemblyStep + stepOffset);
-            wires.forEach((w, i) => {
-                let wStep = wSteps[i];
-                let arr = stepToWires[wStep] || (stepToWires[wStep] = []);
-                arr.push(w);
+        let stepToCmps: PartInst[][] = [];
+        let stepOffset = 0;
+        allocRes.partsAndWires.forEach(cAndWs => {
+            let part = cAndWs.part;
+            let wires = cAndWs.wires;
+            cAndWs.assembly.forEach((step, idx) => {
+                if (step.part && part)
+                    stepToCmps[stepOffset + idx] = [part]
+                if (step.wireIndices && step.wireIndices.length > 0 && wires)
+                    stepToWires[stepOffset + idx] = step.wireIndices.map(i => wires[i])
             })
-            stepOffset = Math.max(cStep, wSteps.reduce((m, n) => Math.max(m, n), 0)) + 1;
+            stepOffset += cAndWs.assembly.length;
         });
-        let lastStep = stepOffset - 1;
-        let allCmps = components.map(p => p.component);
-        let allWires = powerWires.concat(components.map(p => p.wires).reduce((p, n) => p.concat(n), []));
+        let numSteps = stepOffset;
+        let lastStep = numSteps - 1;
+        let allCmps = allocRes.partsAndWires.map(r => r.part).filter(p => !!p);
+        let allWires = allocRes.partsAndWires.map(r => r.wires || []).reduce((p, n) => p.concat(n), []);
         let colorToWires: Map<WireInst[]> = {}
         let allWireColors: string[] = [];
         allWires.forEach(w => {
@@ -350,7 +340,7 @@ namespace pxsim.instructions {
         });
         return {
             boardDef: allocOpts.boardDef,
-            cmpDefs: allocOpts.cmpDefs,
+            cmpDefs: allocOpts.partDefs,
             fnArgs: allocOpts.fnArgs,
             allAlloc: allocRes,
             stepToWires: stepToWires,
@@ -368,7 +358,7 @@ namespace pxsim.instructions {
             state: state,
             boardDef: boardDef,
             forceBreadboard: true,
-            cmpDefs: cmpDefs,
+            partDefs: cmpDefs,
             maxWidth: `${width}px`,
             fnArgs: fnArgs,
             wireframe: buildMode,
@@ -397,6 +387,19 @@ namespace pxsim.instructions {
         }
 
         for (let i = 0; i <= step; i++) {
+            let cmps = props.stepToCmps[i];
+            if (cmps) {
+                cmps.forEach(partInst => {
+                    let cmp = board.addPart(partInst)
+                    //last step
+                    if (i === step) {
+                        //highlight locations pins
+                        partInst.breadboardConnections.forEach(bbLoc => board.highlightBreadboardPin(bbLoc));
+                        svg.addClass(cmp.element, "notgrayed");
+                    }
+                });
+            }
+
             let wires = props.stepToWires[i];
             if (wires) {
                 wires.forEach(w => {
@@ -405,13 +408,12 @@ namespace pxsim.instructions {
                     if (i === step) {
                         //location highlights
                         if (w.start.type == "breadboard") {
-                            let lbls = board.highlightBreadboardPin((<BBLoc>w.start).rowCol);
+                            let lbls = board.highlightBreadboardPin((<BBLoc>w.start));
                         } else {
                             board.highlightBoardPin((<BoardLoc>w.start).pin);
                         }
                         if (w.end.type == "breadboard") {
-                            let [row, col] = (<BBLoc>w.end).rowCol;
-                            let lbls = board.highlightBreadboardPin((<BBLoc>w.end).rowCol);
+                            let lbls = board.highlightBreadboardPin((<BBLoc>w.end));
                         } else {
                             board.highlightBoardPin((<BoardLoc>w.end).pin);
                         }
@@ -420,24 +422,6 @@ namespace pxsim.instructions {
                     }
                 });
             }
-            let cmps = props.stepToCmps[i];
-            if (cmps) {
-                cmps.forEach(cmpInst => {
-                    let cmp = board.addComponent(cmpInst)
-                    let colOffset = (<any>cmpInst.visual).breadboardStartColIdx || 0;
-                    let rowCol: BBRowCol = [`${cmpInst.breadboardStartRow}`, `${colOffset + cmpInst.breadboardStartColumn}`];
-                    //last step
-                    if (i === step) {
-                        board.highlightBreadboardPin(rowCol);
-                        if (cmpInst.visual === "buttonpair") {
-                            //TODO: don't specialize this
-                            let rowCol2: BBRowCol = [`${cmpInst.breadboardStartRow}`, `${cmpInst.breadboardStartColumn + 3}`];
-                            board.highlightBreadboardPin(rowCol2);
-                        }
-                        svg.addClass(cmp.element, "notgrayed");
-                    }
-                });
-            }
         }
     }
     function mkPanel() {
@@ -463,7 +447,7 @@ namespace pxsim.instructions {
         cmps.forEach(c => {
             let quant = 1;
             // TODO: don't special case this
-            if (c.visual === "buttonpair") {
+            if (c.visual.builtIn === "buttonpair") {
                 quant = 2;
             }
             let cmp = mkCmpDiv(c.visual, {
@@ -516,7 +500,7 @@ namespace pxsim.instructions {
         let wires = (props.stepToWires[step] || []);
         let mkLabel = (loc: Loc) => {
             if (loc.type === "breadboard") {
-                let [row, col] = (<BBLoc>loc).rowCol;
+                let {row, col} = (<BBLoc>loc);
                 return `(${row},${col})`
             } else
                 return (<BoardLoc>loc).pin;
@@ -536,17 +520,23 @@ namespace pxsim.instructions {
         });
         let cmps = (props.stepToCmps[step] || []);
         cmps.forEach(c => {
-            let l: BBRowCol = [`${c.breadboardStartRow}`, `${c.breadboardStartColumn}`];
-            let locs = [l];
-            if (c.visual === "buttonpair") {
+            let locs: BBLoc[];
+            if (c.visual.builtIn === "buttonpair") {
                 //TODO: don't special case this
-                let l2: BBRowCol = [`${c.breadboardStartRow}`, `${c.breadboardStartColumn + 3}`];
-                locs.push(l2);
+                locs = [c.breadboardConnections[0], c.breadboardConnections[2]]
+            } else {
+                locs = [c.breadboardConnections[0]];
             }
             locs.forEach((l, i) => {
-                let [row, col] = l;
+                let topLbl: string;
+                if (l) {
+                    let {row, col} = l;
+                    topLbl = `(${row},${col})`;
+                } else {
+                    topLbl = "";
+                }
                 let cmp = mkCmpDiv(c.visual, {
-                    top: `(${row},${col})`,
+                    top: topLbl,
                     topSize: LOC_LBL_SIZE,
                     cmpHeight: REQ_CMP_HEIGHT,
                     cmpScale: REQ_CMP_SCALE
@@ -656,8 +646,8 @@ ${tsPackage}
         activeComponents.sort();
         let props = mkBoardProps({
             boardDef: boardDef,
-            cmpDefs: cmpDefs,
-            cmpList: activeComponents,
+            partDefs: cmpDefs,
+            partsList: activeComponents,
             fnArgs: fnArgs,
             getBBCoord: dummyBreadboard.getCoord.bind(dummyBreadboard)
         });

sim/microbit.ts

@@ -226,18 +226,6 @@ namespace pxsim.visuals {
         wireframe?: boolean;
     }
 
-    const pointerEvents = !!(window as any).PointerEvent ? {
-        up: "pointerup",
-        down: "pointerdown",
-        move: "pointermove",
-        leave: "pointerleave"
-    } : {
-            up: "mouseup",
-            down: "mousedown",
-            move: "mousemove",
-            leave: "mouseleave"
-        };
-
     export class MicrobitBoardSvg implements BoardView {
         public element: SVGSVGElement;
         private style: SVGStyleElement;

sim/simlib.ts

@@ -1,261 +0,0 @@
-/// <reference path="../node_modules/pxt-core/typings/bluebird/bluebird.d.ts"/>
-/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
-/// <reference path="../libs/microbit/dal.d.ts"/>
-
-namespace pxsim {
-    export type BBRowCol = [/*row*/string, /*column*/string];
-    export type BoardPin = string;
-    export interface BBLoc { type: "breadboard", rowCol: BBRowCol };
-    export interface BoardLoc { type: "dalboard", pin: BoardPin };
-    export type Loc = BBLoc | BoardLoc;
-
-    export function initRuntimeWithDalBoard() {
-        U.assert(!runtime.board);
-        let b = new DalBoard();
-        runtime.board = b;
-        runtime.postError = (e) => {
-            led.setBrightness(255);
-            let img = board().ledMatrixState.image;
-            img.clear();
-            img.set(0, 4, 255);
-            img.set(1, 3, 255);
-            img.set(2, 3, 255);
-            img.set(3, 3, 255);
-            img.set(4, 4, 255);
-            img.set(0, 0, 255);
-            img.set(1, 0, 255);
-            img.set(0, 1, 255);
-            img.set(1, 1, 255);
-            img.set(3, 0, 255);
-            img.set(4, 0, 255);
-            img.set(3, 1, 255);
-            img.set(4, 1, 255);
-            runtime.updateDisplay();
-        }
-    }
-    if (!pxsim.initCurrentRuntime) {
-        pxsim.initCurrentRuntime = initRuntimeWithDalBoard;
-    }
-
-    export function board() {
-        return runtime.board as DalBoard;
-    }
-
-    export function mkRange(a: number, b: number): number[] {
-        let res: number[] = [];
-        for (; a < b; a++)
-            res.push(a);
-        return res;
-    }
-
-    export function parseQueryString(): (key: string) => string {
-        let qs = window.location.search.substring(1);
-        let getQsVal = (key: string) => decodeURIComponent((qs.split(`${key}=`)[1] || "").split("&")[0] || ""); //.replace(/\+/g, " ");
-        return getQsVal;
-    }
-}
-
-namespace pxsim.visuals {
-    export interface IPointerEvents {
-        up: string,
-        down: string,
-        move: string,
-        leave: string
-    }
-
-    export const pointerEvents: IPointerEvents = !!(window as any).PointerEvent ? {
-        up: "pointerup",
-        down: "pointerdown",
-        move: "pointermove",
-        leave: "pointerleave"
-    } : {
-            up: "mouseup",
-            down: "mousedown",
-            move: "mousemove",
-            leave: "mouseleave"
-        };
-
-    export function translateEl(el: SVGElement, xy: [number, number]) {
-        //TODO append translation instead of replacing the full transform
-        svg.hydrate(el, { transform: `translate(${xy[0]} ${xy[1]})` });
-    }
-
-    export interface ComposeOpts {
-        el1: SVGAndSize<SVGSVGElement>,
-        scaleUnit1: number,
-        el2: SVGAndSize<SVGSVGElement>,
-        scaleUnit2: number,
-        margin: [number, number, number, number],
-        middleMargin: number,
-        maxWidth?: string,
-        maxHeight?: string,
-    }
-    export interface ComposeResult {
-        host: SVGSVGElement,
-        scaleUnit: number,
-        under: SVGGElement,
-        over: SVGGElement,
-        edges: number[],
-        toHostCoord1: (xy: Coord) => Coord,
-        toHostCoord2: (xy: Coord) => Coord,
-    }
-    export function composeSVG(opts: ComposeOpts): ComposeResult {
-        let [a, b] = [opts.el1, opts.el2];
-        U.assert(a.x == 0 && a.y == 0 && b.x == 0 && b.y == 0, "el1 and el2 x,y offsets not supported");
-        let setXY = (e: SVGSVGElement, x: number, y: number) => svg.hydrate(e, { x: x, y: y });
-        let setWH = (e: SVGSVGElement, w: string, h: string) => {
-            if (w)
-                svg.hydrate(e, { width: w });
-            if (h)
-                svg.hydrate(e, { height: h });
-        }
-        let setWHpx = (e: SVGSVGElement, w: number, h: number) => svg.hydrate(e, { width: `${w}px`, height: `${h}px` });
-        let scaleUnit = opts.scaleUnit2;
-        let aScalar = opts.scaleUnit2 / opts.scaleUnit1;
-        let bScalar = 1.0;
-        let aw = a.w * aScalar;
-        let ah = a.h * aScalar;
-        setWHpx(a.el, aw, ah);
-        let bw = b.w * bScalar;
-        let bh = b.h * bScalar;
-        setWHpx(b.el, bw, bh);
-        let [mt, mr, mb, ml] = opts.margin;
-        let mm = opts.middleMargin;
-        let innerW = Math.max(aw, bw);
-        let ax = mr + (innerW - aw) / 2.0;
-        let ay = mt;
-        setXY(a.el, ax, ay);
-        let bx = mr + (innerW - bw) / 2.0;
-        let by = ay + ah + mm;
-        setXY(b.el, bx, by);
-        let edges = [ay, ay + ah, by, by + bh];
-        let w = mr + innerW + ml;
-        let h = mt + ah + mm + bh + mb;
-        let host = <SVGSVGElement>svg.elt("svg", {
-            "version": "1.0",
-            "viewBox": `0 0 ${w} ${h}`,
-            "class": `sim-bb`,
-        });
-        setWH(host, opts.maxWidth, opts.maxHeight);
-        setXY(host, 0, 0);
-        let under = <SVGGElement>svg.child(host, "g");
-        host.appendChild(a.el);
-        host.appendChild(b.el);
-        let over = <SVGGElement>svg.child(host, "g");
-        let toHostCoord1 = (xy: Coord): Coord => {
-            let [x, y] = xy;
-            return [x * aScalar + ax, y * aScalar + ay];
-        };
-        let toHostCoord2 = (xy: Coord): Coord => {
-            let [x, y] = xy;
-            return [x * bScalar + bx, y * bScalar + by];
-        };
-        return {
-            under: under,
-            over: over,
-            host: host,
-            edges: edges,
-            scaleUnit: scaleUnit,
-            toHostCoord1: toHostCoord1,
-            toHostCoord2: toHostCoord2,
-        };
-    }
-
-    export function mkScaleFn(originUnit: number, targetUnit: number): (n: number) => number {
-        return (n: number) => n * (targetUnit / originUnit);
-    }
-    export interface MkImageOpts {
-        image: string,
-        width: number,
-        height: number,
-        imageUnitDist: number,
-        targetUnitDist: number
-    }
-    export function mkImageSVG(opts: MkImageOpts): SVGAndSize<SVGImageElement> {
-        let scaleFn = mkScaleFn(opts.imageUnitDist, opts.targetUnitDist);
-        let w = scaleFn(opts.width);
-        let h = scaleFn(opts.height);
-        let img = <SVGImageElement>svg.elt("image", {
-            width: w,
-            height: h,
-            "href": `${opts.image}`
-        });
-        return { el: img, w: w, h: h, x: 0, y: 0 };
-    }
-
-    export type Coord = [number, number];
-    export function findDistSqrd(a: Coord, b: Coord): number {
-        let x = a[0] - b[0];
-        let y = a[1] - b[1];
-        return x * x + y * y;
-    }
-    export function findClosestCoordIdx(a: Coord, bs: Coord[]): number {
-        let dists = bs.map(b => findDistSqrd(a, b));
-        let minIdx = dists.reduce((prevIdx, currDist, currIdx, arr) => {
-            return currDist < arr[prevIdx] ? currIdx : prevIdx;
-        }, 0);
-        return minIdx;
-    }
-
-    export interface IBoardComponent<T> {
-        style: string,
-        element: SVGElement,
-        defs: SVGElement[],
-        init(bus: EventBus, state: T, svgEl: SVGSVGElement, gpioPins: string[], otherArgs: string[]): void, //NOTE: constructors not supported in interfaces
-        moveToCoord(xy: Coord): void,
-        updateState(): void,
-        updateTheme(): void,
-    }
-
-    export function mkTxt(cx: number, cy: number, size: number, rot: number, txt: string, txtXOffFactor?: number, txtYOffFactor?: number): SVGTextElement {
-        let el = <SVGTextElement>svg.elt("text")
-        //HACK: these constants (txtXOffFactor, txtYOffFactor) tweak the way this algorithm knows how to center the text
-        txtXOffFactor = txtXOffFactor || -0.33333;
-        txtYOffFactor = txtYOffFactor || 0.3;
-        const xOff = txtXOffFactor * size * txt.length;
-        const yOff = txtYOffFactor * size;
-        svg.hydrate(el, {
-            style: `font-size:${size}px;`,
-            transform: `translate(${cx} ${cy}) rotate(${rot}) translate(${xOff} ${yOff})`
-        });
-        svg.addClass(el, "noselect");
-        el.textContent = txt;
-        return el;
-    }
-
-    export type WireColor =
-        "black" | "white" | "gray" | "purple" | "blue" | "green" | "yellow" | "orange" | "red" | "brown";
-    export const WIRE_COLOR_MAP: Map<string> = {
-        black: "#514f4d",
-        white: "#fcfdfc",
-        gray: "#acabab",
-        purple: "#a772a1",
-        blue: "#01a6e8",
-        green: "#3cce73",
-        yellow: "#ece600",
-        orange: "#fdb262",
-        red: "#f44f43",
-        brown: "#c89764",
-    }
-    export function mapWireColor(clr: WireColor | string): string {
-        return WIRE_COLOR_MAP[clr] || clr;
-    }
-
-    export interface SVGAndSize<T extends SVGElement> {
-        el: T,
-        y: number,
-        x: number,
-        w: number,
-        h: number
-    };
-    export type SVGElAndSize = SVGAndSize<SVGElement>;
-
-    export const PIN_DIST = 15;
-
-    export interface BoardView {
-        getView(): SVGAndSize<SVGSVGElement>;
-        getCoord(pinNm: string): Coord;
-        getPinDist(): number;
-        highlightPin(pinNm: string): void;
-    }
-}

sim/state/buttonpair.ts

@@ -1,7 +1,7 @@
 namespace pxsim.input {
     export function onButtonPressed(button: number, handler: RefAction): void {
         let b = board().buttonPairState;
-        if (button == DAL.MICROBIT_ID_BUTTON_AB && !b.usesButtonAB) {
+        if (button == b.props.ID_BUTTON_AB && !b.usesButtonAB) {
             b.usesButtonAB = true;
             runtime.queueDisplayUpdate();
         }
@@ -10,32 +10,12 @@ namespace pxsim.input {
 
     export function buttonIsPressed(button: number): boolean {
         let b = board().buttonPairState;
-        if (button == DAL.MICROBIT_ID_BUTTON_AB && !b.usesButtonAB) {
+        if (button == b.abBtn.id && !b.usesButtonAB) {
             b.usesButtonAB = true;
             runtime.queueDisplayUpdate();
         }
-        if (button == DAL.MICROBIT_ID_BUTTON_A) return b.aBtn.pressed;
-        if (button == DAL.MICROBIT_ID_BUTTON_B) return b.bBtn.pressed;
+        if (button == b.aBtn.id) return b.aBtn.pressed;
+        if (button == b.bBtn.id) return b.bBtn.pressed;
         return b.abBtn.pressed || (b.aBtn.pressed && b.bBtn.pressed);
     }
 }
-
-namespace pxsim {
-    export class Button {
-        constructor(public id: number) { }
-        pressed: boolean;
-    }
-
-    export class ButtonPairState {
-        usesButtonAB: boolean = false;
-        aBtn: Button;
-        bBtn: Button;
-        abBtn: Button;
-
-        constructor() {
-            this.aBtn = new Button(DAL.MICROBIT_ID_BUTTON_A);
-            this.bBtn = new Button(DAL.MICROBIT_ID_BUTTON_B);
-            this.abBtn = new Button(DAL.MICROBIT_ID_BUTTON_AB);
-        }
-    }
-}

sim/state/compass.ts

@@ -12,11 +12,4 @@ namespace pxsim.input {
         // TODO
         return 0;
     }
-}
-
-namespace pxsim {
-    export class CompassState {
-        usesHeading = false;
-        heading = 90;
-    }
 }

sim/state/ledmatrix.ts

@@ -116,72 +116,6 @@ namespace pxsim {
         }
         return font;
     }
-
-    export interface AnimationOptions {
-        interval: number;
-        // false means last frame
-        frame: () => boolean;
-        whenDone?: (cancelled: boolean) => void;
-    }
-
-    export class AnimationQueue {
-        private queue: AnimationOptions[] = [];
-        private process: () => void;
-
-        constructor(private runtime: Runtime) {
-            this.process = () => {
-                let top = this.queue[0]
-                if (!top) return
-                if (this.runtime.dead) return
-                runtime = this.runtime
-                let res = top.frame()
-                runtime.queueDisplayUpdate()
-                runtime.maybeUpdateDisplay()
-                if (res === false) {
-                    this.queue.shift();
-                    // if there is already something in the queue, start processing
-                    if (this.queue[0])
-                        setTimeout(this.process, this.queue[0].interval)
-                    // this may push additional stuff
-                    top.whenDone(false);
-                } else {
-                    setTimeout(this.process, top.interval)
-                }
-            }
-        }
-
-        public cancelAll() {
-            let q = this.queue
-            this.queue = []
-            for (let a of q) {
-                a.whenDone(true)
-            }
-        }
-
-        public cancelCurrent() {
-            let top = this.queue[0]
-            if (top) {
-                this.queue.shift();
-                top.whenDone(true);
-            }
-        }
-
-        public enqueue(anim: AnimationOptions) {
-            if (!anim.whenDone) anim.whenDone = () => { };
-            this.queue.push(anim)
-            // we start processing when the queue goes from 0 to 1
-            if (this.queue.length == 1)
-                this.process()
-        }
-
-        public executeAsync(anim: AnimationOptions) {
-            U.assert(!anim.whenDone)
-            return new Promise<boolean>((resolve, reject) => {
-                anim.whenDone = resolve
-                this.enqueue(anim)
-            })
-        }
-    }
 }
 
 namespace pxsim.images {

sim/state/lightsensor.ts

@@ -1,10 +1,3 @@
-namespace pxsim {
-    export class LightSensorState {
-        usesLightLevel = false;
-        lightLevel = 128;
-    }
-}
-
 namespace pxsim.input {
     export function lightLevel(): number {
         let b = board().lightSensorState;

sim/state/misc.ts

@@ -22,80 +22,9 @@ namespace pxsim {
         throw new Error("PANIC " + code)
     }
 
-    export namespace AudioContextManager {
-        let _context: any; // AudioContext
-        let _vco: any; // OscillatorNode;
-        let _vca: any; // GainNode;
-
-        function context(): any {
-            if (!_context) _context = freshContext();
-            return _context;
-        }
-
-        function freshContext(): any {
-            (<any>window).AudioContext = (<any>window).AudioContext || (<any>window).webkitAudioContext;
-            if ((<any>window).AudioContext) {
-                try {
-                    // this call my crash.
-                    // SyntaxError: audio resources unavailable for AudioContext construction
-                    return new (<any>window).AudioContext();
-                } catch (e) { }
-            }
-            return undefined;
-        }
-
-        export function stop() {
-            if (_vca) _vca.gain.value = 0;
-        }
-
-        export function tone(frequency: number, gain: number) {
-            if (frequency <= 0) return;
-            let ctx = context();
-            if (!ctx) return;
-
-            gain = Math.max(0, Math.min(1, gain));
-            if (!_vco) {
-                try {
-                    _vco = ctx.createOscillator();
-                    _vca = ctx.createGain();
-                    _vco.connect(_vca);
-                    _vca.connect(ctx.destination);
-                    _vca.gain.value = gain;
-                    _vco.start(0);
-                } catch (e) {
-                    _vco = undefined;
-                    _vca = undefined;
-                    return;
-                }
-            }
-
-            _vco.frequency.value = frequency;
-            _vca.gain.value = gain;
-        }
-    }
-
     export interface RuntimeOptions {
         theme: string;
     }
-
-    export class EventBus {
-        private queues: Map<EventQueue<number>> = {};
-
-        constructor(private runtime: Runtime) { }
-
-        listen(id: number, evid: number, handler: RefAction) {
-            let k = id + ":" + evid;
-            let queue = this.queues[k];
-            if (!queue) queue = this.queues[k] = new EventQueue<number>(this.runtime);
-            queue.handler = handler;
-        }
-
-        queue(id: number, evid: number, value: number = 0) {
-            let k = id + ":" + evid;
-            let queue = this.queues[k];
-            if (queue) queue.push(value);
-        }
-    }
 }
 
 namespace pxsim.basic {

sim/visuals/boardhost.ts

@@ -2,8 +2,8 @@ namespace pxsim.visuals {
     export interface BoardHostOpts {
         state: DalBoard,
         boardDef: BoardDefinition,
-        cmpsList?: string[],
-        cmpDefs: Map<PartDefinition>,
+        partsList?: string[],
+        partDefs: Map<PartDefinition>,
         fnArgs: any,
         forceBreadboard?: boolean,
         maxWidth?: string,
@@ -11,13 +11,15 @@ namespace pxsim.visuals {
         wireframe?: boolean
     }
     export class BoardHost {
-        private components: IBoardComponent<any>[] = [];
+        private parts: IBoardPart<any>[] = [];
         private wireFactory: WireFactory;
         private breadboard: Breadboard;
         private fromBBCoord: (xy: Coord) => Coord;
         private fromMBCoord: (xy: Coord) => Coord;
         private boardView: BoardView;
         private view: SVGSVGElement;
+        private partGroup: SVGGElement;
+        private partOverGroup: SVGGElement;
         private style: SVGStyleElement;
         private defs: SVGDefsElement;
         private state: DalBoard;
@@ -26,7 +28,7 @@ namespace pxsim.visuals {
         constructor(opts: BoardHostOpts) {
             this.state = opts.state;
             let onboardCmps = opts.boardDef.onboardComponents || [];
-            let activeComponents = (opts.cmpsList || []).filter(c => onboardCmps.indexOf(c) < 0);
+            let activeComponents = (opts.partsList || []).filter(c => onboardCmps.indexOf(c) < 0);
             activeComponents.sort();
             this.useCrocClips = opts.boardDef.useCrocClips;
 
@@ -68,6 +70,8 @@ namespace pxsim.visuals {
                 this.fromMBCoord = composition.toHostCoord1;
                 this.fromBBCoord = composition.toHostCoord2;
                 let pinDist = composition.scaleUnit;
+                this.partGroup = over;
+                this.partOverGroup = <SVGGElement>svg.child(this.view, "g");
 
                 this.style = <SVGStyleElement>svg.child(this.view, "style", {});
                 this.defs = <SVGDefsElement>svg.child(this.view, "defs", {});
@@ -76,16 +80,18 @@ namespace pxsim.visuals {
 
                 let allocRes = allocateDefinitions({
                     boardDef: opts.boardDef,
-                    cmpDefs: opts.cmpDefs,
+                    partDefs: opts.partDefs,
                     fnArgs: opts.fnArgs,
                     getBBCoord: this.breadboard.getCoord.bind(this.breadboard),
-                    cmpList: activeComponents,
+                    partsList: activeComponents,
                 });
 
                 this.addAll(allocRes);
             } else {
                 let el = this.boardView.getView().el;
                 this.view = el;
+                this.partGroup = <SVGGElement>svg.child(this.view, "g");
+                this.partOverGroup = <SVGGElement>svg.child(this.view, "g");
                 if (opts.maxWidth)
                     svg.hydrate(this.view, { width: opts.maxWidth });
                 if (opts.maxHeight)
@@ -99,7 +105,7 @@ namespace pxsim.visuals {
             this.boardView.highlightPin(pinNm);
         }
 
-        public highlightBreadboardPin(rowCol: BBRowCol) {
+        public highlightBreadboardPin(rowCol: BBLoc) {
             this.breadboard.highlightLoc(rowCol);
         }
 
@@ -120,10 +126,10 @@ namespace pxsim.visuals {
         }
 
         private updateState() {
-            this.components.forEach(c => c.updateState());
+            this.parts.forEach(c => c.updateState());
         }
 
-        private getBBCoord(rowCol: BBRowCol) {
+        private getBBCoord(rowCol: BBLoc) {
             let bbCoord = this.breadboard.getCoord(rowCol);
             return this.fromBBCoord(bbCoord);
         }
@@ -134,7 +140,7 @@ namespace pxsim.visuals {
         public getLocCoord(loc: Loc): Coord {
             let coord: Coord;
             if (loc.type === "breadboard") {
-                let rowCol = (<BBLoc>loc).rowCol;
+                let rowCol = (<BBLoc>loc);
                 coord = this.getBBCoord(rowCol);
             } else {
                 let pinNm = (<BoardLoc>loc).pin;
@@ -147,47 +153,62 @@ namespace pxsim.visuals {
             return coord;
         }
 
-        public addComponent(cmpDesc: CmpInst): IBoardComponent<any> {
-            let cmp: IBoardComponent<any> = null;
+        public addPart(partInst: PartInst): IBoardPart<any> {
+            let part: IBoardPart<any> = null;
             let colOffset = 0;
-            if (typeof cmpDesc.visual === "string") {
-                let builtinVisual = cmpDesc.visual as string;
-                let cnstr = builtinComponentSimVisual[builtinVisual];
-                let stateFn = builtinComponentSimState[builtinVisual];
-                cmp = cnstr();
-                cmp.init(this.state.bus, stateFn(this.state), this.view, cmpDesc.microbitPins, cmpDesc.otherArgs);
+            if (partInst.simulationBehavior) {
+                //TODO: seperate simulation behavior from builtin visual
+                let builtinBehavior = partInst.simulationBehavior;
+                let cnstr = builtinComponentSimVisual[builtinBehavior];
+                let stateFn = builtinComponentSimState[builtinBehavior];
+                part = cnstr();
+                part.init(this.state.bus, stateFn(this.state), this.view, partInst.params);
             } else {
-                let vis = cmpDesc.visual as PartVisualDefinition;
-                cmp = new GenericPart(vis);
-                colOffset = vis.extraColumnOffset || 0;
+                let vis = partInst.visual as PartVisualDefinition;
+                part = new GenericPart(vis);
             }
-            this.components.push(cmp);
-            this.view.appendChild(cmp.element);
-            if (cmp.defs)
-                cmp.defs.forEach(d => this.defs.appendChild(d));
-            this.style.textContent += cmp.style || "";
-            let rowCol = <BBRowCol>[`${cmpDesc.breadboardStartRow}`, `${colOffset + cmpDesc.breadboardStartColumn}`];
+            this.parts.push(part);
+            this.partGroup.appendChild(part.element);
+            if (part.overElement)
+                this.partOverGroup.appendChild(part.overElement);
+            if (part.defs)
+                part.defs.forEach(d => this.defs.appendChild(d));
+            this.style.textContent += part.style || "";
+            let colIdx = partInst.startColumnIdx;
+            let rowIdx = partInst.startRowIdx;
+            let row = getRowName(rowIdx);
+            let col = getColumnName(colIdx);
+            let xOffset = partInst.bbFit.xOffset / partInst.visual.pinDistance;
+            let yOffset = partInst.bbFit.yOffset  / partInst.visual.pinDistance;
+            let rowCol = <BBLoc>{
+                type: "breadboard",
+                row: row,
+                col: col,
+                xOffset: xOffset,
+                yOffset: yOffset
+            };
             let coord = this.getBBCoord(rowCol);
-            cmp.moveToCoord(coord);
+            part.moveToCoord(coord);
             let getCmpClass = (type: string) => `sim-${type}-cmp`;
-            let cls = getCmpClass(name);
-            svg.addClass(cmp.element, cls);
-            svg.addClass(cmp.element, "sim-cmp");
-            cmp.updateTheme();
-            cmp.updateState();
-            return cmp;
+            let cls = getCmpClass(partInst.name);
+            svg.addClass(part.element, cls);
+            svg.addClass(part.element, "sim-cmp");
+            part.updateTheme();
+            part.updateState();
+            return part;
         }
         public addWire(inst: WireInst): Wire {
             return this.wireFactory.addWire(inst.start, inst.end, inst.color, this.useCrocClips);
         }
-        public addAll(basicWiresAndCmpsAndWires: AllocatorResult) {
-            let {powerWires, components} = basicWiresAndCmpsAndWires;
-            powerWires.forEach(w => this.addWire(w));
-            components.forEach((cAndWs, idx) => {
-                let {component, wires} = cAndWs;
-                wires.forEach(w => this.addWire(w));
-                this.addComponent(component);
-            });
+        public addAll(allocRes: AllocatorResult) {
+            allocRes.partsAndWires.forEach(pAndWs => {
+                let part = pAndWs.part;
+                if (part)
+                    this.addPart(part)
+                let wires = pAndWs.wires;
+                if (wires)
+                    wires.forEach(w => this.addWire(w));
+            })
         }
     }
 }

sim/visuals/breadboard.ts

@@ -1,649 +0,0 @@
-namespace pxsim.visuals {
-    // The distance between the center of two pins. This is the constant on which everything else is based.
-    const PIN_DIST = 15;
-    // CSS styling for the breadboard
-    const BLUE = "#1AA5D7";
-    const RED = "#DD4BA0";
-    const BREADBOARD_CSS = `
-        /* bread board */
-        .sim-bb-background {
-            fill:#E0E0E0;
-        }
-        .sim-bb-pin {
-            fill:#999;
-        }
-        .sim-bb-pin-hover {
-            visibility: hidden;
-            pointer-events: all;
-            stroke-width: ${PIN_DIST / 2}px;
-            stroke: transparent;
-            fill: #777;
-        }
-        .sim-bb-pin-hover:hover {
-            visibility: visible;
-            fill:#444;
-        }
-        .sim-bb-group-wire {
-            stroke: #999;
-            stroke-width: ${PIN_DIST / 4}px;
-            visibility: hidden;
-        }
-        .sim-bb-pin-group {
-            pointer-events: all;
-        }
-        .sim-bb-label,
-        .sim-bb-label-hover {
-            font-family:"Lucida Console", Monaco, monospace;
-            fill:#555;
-            pointer-events: all;
-            stroke-width: 0;
-            cursor: default;
-        }
-        .sim-bb-label-hover {
-            visibility: hidden;
-            fill:#000;
-            font-weight: bold;
-        }
-        .sim-bb-bar {
-            stroke-width: 0;
-        }
-        .sim-bb-blue {
-            fill:${BLUE};
-            stroke:${BLUE}
-        }
-        .sim-bb-red {
-            fill:${RED};
-            stroke:${RED};
-        }
-        .sim-bb-pin-group:hover .sim-bb-pin-hover,
-        .sim-bb-pin-group:hover .sim-bb-group-wire,
-        .sim-bb-pin-group:hover .sim-bb-label-hover {
-            visibility: visible;
-        }
-        .sim-bb-pin-group:hover .sim-bb-label {
-            visibility: hidden;
-        }
-        /* outline mode */
-        .sim-bb-outline .sim-bb-background {
-            stroke-width: ${PIN_DIST / 7}px;
-            fill: #FFF;
-            stroke: #000;
-        }
-        .sim-bb-outline .sim-bb-mid-channel {
-            fill: #FFF;
-            stroke: #888;
-            stroke-width: 1px;
-        }
-        /* grayed out */
-        .grayed .sim-bb-red,
-        .grayed .sim-bb-blue {
-            fill: #BBB;
-        }
-        .grayed .sim-bb-pin {
-            fill: #BBB;
-        }
-        .grayed .sim-bb-label {
-            fill: #BBB;
-        }
-        .grayed .sim-bb-background {
-            stroke: #BBB;
-        }
-        .grayed .sim-bb-group-wire {
-            stroke: #DDD;
-        }
-        /* highlighted */
-        .sim-bb-label.highlight {
-            visibility: hidden;
-        }
-        .sim-bb-label-hover.highlight {
-            visibility: visible;
-        }
-        .sim-bb-blue.highlight {
-            fill:${BLUE};
-        }
-        .sim-bb-red.highlight {
-            fill:${RED};
-        }
-        `
-    // Pin rows and coluns
-    const MID_ROWS = 10;
-    const MID_ROW_GAPS = [4, 4];
-    const MID_ROW_AND_GAPS = MID_ROWS + MID_ROW_GAPS.length;
-    const MID_COLS = 30;
-    const BAR_ROWS = 2;
-    const BAR_COLS = 25;
-    const POWER_ROWS = BAR_ROWS * 2;
-    const POWER_COLS = BAR_COLS * 2;
-    const BAR_COL_GAPS = [4, 9, 14, 19];
-    const BAR_COL_AND_GAPS = BAR_COLS + BAR_COL_GAPS.length;
-    // Essential dimensions
-    const WIDTH = PIN_DIST * (MID_COLS + 3);
-    const HEIGHT = PIN_DIST * (MID_ROW_AND_GAPS + POWER_ROWS + 5.5);
-    const MID_RATIO = 2.0 / 3.0;
-    const BAR_RATIO = (1.0 - MID_RATIO) * 0.5;
-    const MID_HEIGHT = HEIGHT * MID_RATIO;
-    const BAR_HEIGHT = HEIGHT * BAR_RATIO;
-    // Pin grids
-    const MID_GRID_WIDTH = (MID_COLS - 1) * PIN_DIST;
-    const MID_GRID_HEIGHT = (MID_ROW_AND_GAPS - 1) * PIN_DIST;
-    const MID_GRID_X = (WIDTH - MID_GRID_WIDTH) / 2.0;
-    const MID_GRID_Y = BAR_HEIGHT + (MID_HEIGHT - MID_GRID_HEIGHT) / 2.0;
-    const BAR_GRID_HEIGHT = (BAR_ROWS - 1) * PIN_DIST;
-    const BAR_GRID_WIDTH = (BAR_COL_AND_GAPS - 1) * PIN_DIST;
-    const BAR_TOP_GRID_X = (WIDTH - BAR_GRID_WIDTH) / 2.0;
-    const BAR_TOP_GRID_Y = (BAR_HEIGHT - BAR_GRID_HEIGHT) / 2.0;
-    const BAR_BOT_GRID_X = BAR_TOP_GRID_X;
-    const BAR_BOT_GRID_Y = BAR_TOP_GRID_Y + BAR_HEIGHT + MID_HEIGHT;
-    // Individual pins
-    const PIN_HOVER_SCALAR = 1.3;
-    const PIN_WIDTH = PIN_DIST / 2.5;
-    const PIN_ROUNDING = PIN_DIST / 7.5;
-    // Labels
-    const PIN_LBL_SIZE = PIN_DIST * 0.7;
-    const PIN_LBL_HOVER_SCALAR = 1.3;
-    const PLUS_LBL_SIZE = PIN_DIST * 1.7;
-    const MINUS_LBL_SIZE = PIN_DIST * 2;
-    const POWER_LBL_OFFSET = PIN_DIST * 0.8;
-    const MINUS_LBL_EXTRA_OFFSET = PIN_DIST * 0.07;
-    const LBL_ROTATION = -90;
-    // Channels
-    const CHANNEL_HEIGHT = PIN_DIST * 1.0;
-    const SMALL_CHANNEL_HEIGHT = PIN_DIST * 0.05;
-    // Background
-    const BACKGROUND_ROUNDING = PIN_DIST * 0.3;
-
-    export interface GridPin {
-        el: SVGElement,
-        hoverEl: SVGElement,
-        cx: number,
-        cy: number,
-        row: string,
-        col: string,
-        group?: string
-    };
-    export interface GridOptions {
-        xOffset?: number,
-        yOffset?: number,
-        rowCount: number,
-        colCount: number,
-        rowStartIdx?: number,
-        colStartIdx?: number,
-        pinDist: number,
-        mkPin: () => SVGElAndSize,
-        mkHoverPin: () => SVGElAndSize,
-        getRowName: (rowIdx: number) => string,
-        getColName: (colIdx: number) => string,
-        getGroupName?: (rowIdx: number, colIdx: number) => string,
-        rowIdxsWithGap?: number[],
-        colIdxsWithGap?: number[],
-    };
-    export interface GridResult {
-        g: SVGGElement,
-        allPins: GridPin[],
-    }
-    export function mkGrid(opts: GridOptions): GridResult {
-        let xOff = opts.xOffset || 0;
-        let yOff = opts.yOffset || 0;
-        let allPins: GridPin[] = [];
-        let grid = <SVGGElement>svg.elt("g");
-        let colIdxOffset = opts.colStartIdx || 0;
-        let rowIdxOffset = opts.rowStartIdx || 0;
-        let copyArr = <T>(arr: T[]): T[] => arr ? arr.slice(0, arr.length) : [];
-        let removeAll = <T>(arr: T[], e: T): number => {
-            let res = 0;
-            let idx: number;
-            while (0 <= (idx = arr.indexOf(e))) {
-                arr.splice(idx, 1);
-                res += 1;
-            }
-            return res;
-        };
-        let rowGaps = 0;
-        let rowIdxsWithGap = copyArr(opts.rowIdxsWithGap)
-        for (let i = 0; i < opts.rowCount; i++) {
-            let colGaps = 0;
-            let colIdxsWithGap = copyArr(opts.colIdxsWithGap)
-            let cy = yOff + i * opts.pinDist + rowGaps * opts.pinDist;
-            let rowIdx = i + rowIdxOffset;
-            for (let j = 0; j < opts.colCount; j++) {
-                let cx = xOff + j * opts.pinDist + colGaps * opts.pinDist;
-                let colIdx = j + colIdxOffset;
-                const addEl = (pin: SVGElAndSize) => {
-                    let pinX = cx - pin.w * 0.5;
-                    let pinY = cy - pin.h * 0.5;
-                    svg.hydrate(pin.el, {x: pinX, y: pinY});
-                    grid.appendChild(pin.el);
-                    return pin.el;
-                }
-                let el = addEl(opts.mkPin());
-                let hoverEl = addEl(opts.mkHoverPin());
-                let row = opts.getRowName(rowIdx);
-                let col = opts.getColName(colIdx);
-                let group = opts.getGroupName ? opts.getGroupName(rowIdx, colIdx) : null;
-                let gridPin: GridPin = {el: el, hoverEl: hoverEl, cx: cx, cy: cy, row: row, col: col, group: group};
-                allPins.push(gridPin);
-                //column gaps
-                colGaps += removeAll(colIdxsWithGap, colIdx);
-            }
-            //row gaps
-            rowGaps += removeAll(rowIdxsWithGap, rowIdx);
-        }
-        return {g: grid, allPins: allPins};
-    }
-    function mkBBPin(): SVGElAndSize {
-        let el = svg.elt("rect");
-        let width = PIN_WIDTH;
-        svg.hydrate(el, {
-            class: "sim-bb-pin",
-            rx: PIN_ROUNDING,
-            ry: PIN_ROUNDING,
-            width: width,
-            height: width
-        });
-        return {el: el, w: width, h: width, x: 0, y: 0};
-    }
-    function mkBBHoverPin(): SVGElAndSize {
-        let el = svg.elt("rect");
-        let width = PIN_WIDTH * PIN_HOVER_SCALAR;
-        svg.hydrate(el, {
-            class: "sim-bb-pin-hover",
-            rx: PIN_ROUNDING,
-            ry: PIN_ROUNDING,
-            width: width,
-            height: width,
-        });
-        return {el: el, w: width, h: width, x: 0, y: 0};
-    }
-    export interface GridLabel {
-        el: SVGTextElement,
-        hoverEl: SVGTextElement,
-        txt: string,
-        group?: string,
-    };
-    function mkBBLabel(cx: number, cy: number, size: number, rotation: number, txt: string, group: string, extraClasses?: string[]): GridLabel {
-        //lbl
-        let el = mkTxt(cx, cy, size, rotation, txt);
-        svg.addClass(el, "sim-bb-label");
-        if (extraClasses)
-            extraClasses.forEach(c => svg.addClass(el, c));
-
-        //hover lbl
-        let hoverEl = mkTxt(cx, cy, size * PIN_LBL_HOVER_SCALAR, rotation, txt);
-        svg.addClass(hoverEl, "sim-bb-label-hover");
-        if (extraClasses)
-            extraClasses.forEach(c => svg.addClass(hoverEl, c));
-
-        let lbl = {el: el, hoverEl: hoverEl, txt: txt, group: group};
-        return lbl;
-    }
-    interface BBBar {
-        el: SVGRectElement,
-        group?: string
-    };
-
-    export interface BreadboardOpts {
-        wireframe?: boolean,
-    }
-    export class Breadboard {
-        public bb: SVGSVGElement;
-        private styleEl: SVGStyleElement;
-        private defs: SVGDefsElement;
-
-        //truth
-        private allPins: GridPin[] = [];
-        private allLabels: GridLabel[] = [];
-        private allPowerBars: BBBar[] = [];
-        //quick lookup caches
-        private rowColToPin: Map<Map<GridPin>> = {};
-        private rowColToLbls: Map<Map<GridLabel[]>> = {};
-
-        constructor(opts: BreadboardOpts) {
-            this.buildDom();
-
-            if (opts.wireframe)
-                svg.addClass(this.bb, "sim-bb-outline");
-        }
-
-        public updateLocation(x: number, y: number) {
-            svg.hydrate(this.bb, {
-                x: `${x}px`,
-                y: `${y}px`,
-            });
-        }
-
-        public getPin(row: string, col: string): GridPin {
-            let colToPin = this.rowColToPin[row];
-            if (!colToPin)
-                return null;
-            let pin = colToPin[col];
-            if (!pin)
-                return null;
-            return pin;
-        }
-        public getCoord(rowCol: BBRowCol): Coord {
-            let [row, col] = rowCol;
-            let pin = this.getPin(row, col);
-            if (!pin)
-                return null;
-            return [pin.cx, pin.cy];
-        }
-
-        public getPinDist() {
-            return PIN_DIST;
-        }
-
-        private buildDom() {
-            this.bb = <SVGSVGElement>svg.elt("svg", {
-                "version": "1.0",
-                "viewBox": `0 0 ${WIDTH} ${HEIGHT}`,
-                "class": `sim-bb`,
-                "width": WIDTH + "px",
-                "height": HEIGHT + "px",
-            });
-            this.styleEl = <SVGStyleElement>svg.child(this.bb, "style", {});
-            this.styleEl.textContent += BREADBOARD_CSS;
-            this.defs = <SVGDefsElement>svg.child(this.bb, "defs", {});
-
-            //background
-            svg.child(this.bb, "rect", { class: "sim-bb-background", width: WIDTH, height: HEIGHT, rx: BACKGROUND_ROUNDING, ry: BACKGROUND_ROUNDING});
-
-            //mid channel
-            let channelGid = "sim-bb-channel-grad";
-            let channelGrad = <SVGLinearGradientElement>svg.elt("linearGradient")
-            svg.hydrate(channelGrad, { id: channelGid, x1: "0%", y1: "0%", x2: "0%", y2: "100%" });
-            this.defs.appendChild(channelGrad);
-            let channelDark = "#AAA";
-            let channelLight = "#CCC";
-            let stop1 = svg.child(channelGrad, "stop", { offset: "0%", style: `stop-color: ${channelDark};` })
-            let stop2 = svg.child(channelGrad, "stop", { offset: "20%", style: `stop-color: ${channelLight};` })
-            let stop3 = svg.child(channelGrad, "stop", { offset: "80%", style: `stop-color: ${channelLight};` })
-            let stop4 = svg.child(channelGrad, "stop", { offset: "100%", style: `stop-color: ${channelDark};` })
-
-            const mkChannel = (cy: number, h: number, cls?: string) => {
-                let channel = svg.child(this.bb, "rect", { class: `sim-bb-channel ${cls || ""}`, y: cy - h / 2, width: WIDTH, height: h});
-                channel.setAttribute("fill", `url(#${channelGid})`);
-                return channel;
-            }
-
-            mkChannel(BAR_HEIGHT + MID_HEIGHT / 2, CHANNEL_HEIGHT, "sim-bb-mid-channel");
-            mkChannel(BAR_HEIGHT, SMALL_CHANNEL_HEIGHT);
-            mkChannel(BAR_HEIGHT + MID_HEIGHT, SMALL_CHANNEL_HEIGHT);
-
-            //-----pins
-            const getMidTopOrBot = (rowIdx: number) => rowIdx < MID_ROWS / 2.0 ? "b" : "t";
-            const getBarTopOrBot = (colIdx: number) => colIdx < POWER_COLS / 2.0 ? "b" : "t";
-            const alphabet = "abcdefghij".split("").reverse();
-            const getColName = (colIdx: number) => `${colIdx + 1}`;
-            const getMidRowName = (rowIdx: number) => alphabet[rowIdx];
-            const getMidGroupName = (rowIdx: number, colIdx: number) => {
-                let botOrTop = getMidTopOrBot(rowIdx);
-                let colNm = getColName(colIdx);
-                return `${botOrTop}${colNm}`;
-            };
-            const getBarRowName = (rowIdx: number) => rowIdx === 0 ? "-" : "+";
-            const getBarGroupName = (rowIdx: number, colIdx: number) => {
-                let botOrTop = getBarTopOrBot(colIdx);
-                let rowName = getBarRowName(rowIdx);
-                return `${rowName}${botOrTop}`;
-            };
-
-            //mid grid
-            let midGridRes = mkGrid({
-                xOffset: MID_GRID_X,
-                yOffset: MID_GRID_Y,
-                rowCount: MID_ROWS,
-                colCount: MID_COLS,
-                pinDist: PIN_DIST,
-                mkPin: mkBBPin,
-                mkHoverPin: mkBBHoverPin,
-                getRowName: getMidRowName,
-                getColName: getColName,
-                getGroupName: getMidGroupName,
-                rowIdxsWithGap: MID_ROW_GAPS,
-            });
-            let midGridG = midGridRes.g;
-            this.allPins = this.allPins.concat(midGridRes.allPins);
-
-            //bot bar
-            let botBarGridRes = mkGrid({
-                xOffset: BAR_BOT_GRID_X,
-                yOffset: BAR_BOT_GRID_Y,
-                rowCount: BAR_ROWS,
-                colCount: BAR_COLS,
-                pinDist: PIN_DIST,
-                mkPin: mkBBPin,
-                mkHoverPin: mkBBHoverPin,
-                getRowName: getBarRowName,
-                getColName: getColName,
-                getGroupName: getBarGroupName,
-                colIdxsWithGap: BAR_COL_GAPS,
-            });
-            let botBarGridG = botBarGridRes.g;
-            this.allPins = this.allPins.concat(botBarGridRes.allPins);
-
-            //top bar
-            let topBarGridRes = mkGrid({
-                xOffset: BAR_TOP_GRID_X,
-                yOffset: BAR_TOP_GRID_Y,
-                rowCount: BAR_ROWS,
-                colCount: BAR_COLS,
-                colStartIdx: BAR_COLS,
-                pinDist: PIN_DIST,
-                mkPin: mkBBPin,
-                mkHoverPin: mkBBHoverPin,
-                getRowName: getBarRowName,
-                getColName: getColName,
-                getGroupName: getBarGroupName,
-                colIdxsWithGap: BAR_COL_GAPS.map(g => g + BAR_COLS),
-            });
-            let topBarGridG = topBarGridRes.g;
-            this.allPins = this.allPins.concat(topBarGridRes.allPins);
-
-            //tooltip
-            this.allPins.forEach(pin => {
-                let {el, row, col, hoverEl} = pin
-                let title = `(${row},${col})`;
-                svg.hydrate(el, {title: title});
-                svg.hydrate(hoverEl, {title: title});
-            })
-
-            //catalog pins
-            this.allPins.forEach(pin => {
-                let colToPin = this.rowColToPin[pin.row];
-                if (!colToPin)
-                    colToPin = this.rowColToPin[pin.row] = {};
-                colToPin[pin.col] = pin;
-            })
-
-            //-----labels
-            const mkBBLabelAtPin = (row: string, col: string, xOffset: number, yOffset: number, txt: string, group?: string): GridLabel => {
-                let size = PIN_LBL_SIZE;
-                let rotation = LBL_ROTATION;
-                let loc = this.getCoord([row, col]);
-                let [cx, cy] = loc;
-                let t = mkBBLabel(cx + xOffset, cy + yOffset, size, rotation, txt, group);
-                return t;
-            }
-
-            //columns
-            for (let colIdx = 0; colIdx < MID_COLS; colIdx++) {
-                let colNm = getColName(colIdx);
-                //top
-                let rowTIdx = 0;
-                let rowTNm = getMidRowName(rowTIdx);
-                let groupT = getMidGroupName(rowTIdx, colIdx);
-                let lblT = mkBBLabelAtPin(rowTNm, colNm, 0, -PIN_DIST, colNm, groupT);
-                this.allLabels.push(lblT);
-                //bottom
-                let rowBIdx = MID_ROWS - 1;
-                let rowBNm = getMidRowName(rowBIdx);
-                let groupB = getMidGroupName(rowBIdx, colIdx);
-                let lblB = mkBBLabelAtPin(rowBNm, colNm, 0, +PIN_DIST, colNm, groupB);
-                this.allLabels.push(lblB);
-            }
-            //rows
-            for (let rowIdx = 0; rowIdx < MID_ROWS; rowIdx++) {
-                let rowNm = getMidRowName(rowIdx);
-                //top
-                let colTIdx = 0;
-                let colTNm = getColName(colTIdx);
-                let lblT = mkBBLabelAtPin(rowNm, colTNm, -PIN_DIST, 0, rowNm);
-                this.allLabels.push(lblT);
-                //top
-                let colBIdx = MID_COLS - 1;
-                let colBNm = getColName(colBIdx);
-                let lblB = mkBBLabelAtPin(rowNm, colBNm, +PIN_DIST, 0, rowNm);
-                this.allLabels.push(lblB);
-            }
-
-            //+- labels
-            let botPowerLabels = [
-                //BL
-                mkBBLabel(0 + POWER_LBL_OFFSET + MINUS_LBL_EXTRA_OFFSET, BAR_HEIGHT + MID_HEIGHT + POWER_LBL_OFFSET, MINUS_LBL_SIZE, LBL_ROTATION, `-`, getBarGroupName(0, 0), [`sim-bb-blue`]),
-                mkBBLabel(0 + POWER_LBL_OFFSET, BAR_HEIGHT + MID_HEIGHT + BAR_HEIGHT - POWER_LBL_OFFSET, PLUS_LBL_SIZE, LBL_ROTATION, `+`, getBarGroupName(1, 0), [`sim-bb-red`]),
-                //BR
-                mkBBLabel(WIDTH - POWER_LBL_OFFSET + MINUS_LBL_EXTRA_OFFSET, BAR_HEIGHT + MID_HEIGHT + POWER_LBL_OFFSET, MINUS_LBL_SIZE, LBL_ROTATION, `-`, getBarGroupName(0, BAR_COLS - 1), [`sim-bb-blue`]),
-                mkBBLabel(WIDTH - POWER_LBL_OFFSET, BAR_HEIGHT + MID_HEIGHT + BAR_HEIGHT - POWER_LBL_OFFSET, PLUS_LBL_SIZE, LBL_ROTATION, `+`, getBarGroupName(1, BAR_COLS - 1), [`sim-bb-red`]),
-            ];
-            this.allLabels = this.allLabels.concat(botPowerLabels);
-            let topPowerLabels = [
-                //TL
-                mkBBLabel(0 + POWER_LBL_OFFSET + MINUS_LBL_EXTRA_OFFSET, 0 + POWER_LBL_OFFSET, MINUS_LBL_SIZE, LBL_ROTATION, `-`, getBarGroupName(0, BAR_COLS), [`sim-bb-blue`]),
-                mkBBLabel(0 + POWER_LBL_OFFSET, BAR_HEIGHT - POWER_LBL_OFFSET, PLUS_LBL_SIZE, LBL_ROTATION, `+`, getBarGroupName(1, BAR_COLS), [`sim-bb-red`]),
-                //TR
-                mkBBLabel(WIDTH - POWER_LBL_OFFSET + MINUS_LBL_EXTRA_OFFSET, 0 + POWER_LBL_OFFSET, MINUS_LBL_SIZE, LBL_ROTATION, `-`, getBarGroupName(0, POWER_COLS - 1), [`sim-bb-blue`]),
-                mkBBLabel(WIDTH - POWER_LBL_OFFSET, BAR_HEIGHT - POWER_LBL_OFFSET, PLUS_LBL_SIZE, LBL_ROTATION, `+`, getBarGroupName(1, POWER_COLS - 1), [`sim-bb-red`]),
-            ];
-            this.allLabels = this.allLabels.concat(topPowerLabels);
-
-            //catalog lbls
-            let lblNmToLbls: Map<GridLabel[]> = {};
-            this.allLabels.forEach(lbl => {
-                let {el, txt} = lbl;
-                let lbls = lblNmToLbls[txt] = lblNmToLbls[txt] || []
-                lbls.push(lbl);
-            });
-            const isPowerPin = (pin: GridPin) => pin.row === "-" || pin.row === "+";
-            this.allPins.forEach(pin => {
-                let {row, col, group} = pin;
-                let colToLbls = this.rowColToLbls[row] || (this.rowColToLbls[row] = {});
-                let lbls = colToLbls[col] || (colToLbls[col] = []);
-                if (isPowerPin(pin)) {
-                    //power pins
-                    let isBot = Number(col) <= BAR_COLS;
-                    if (isBot)
-                        botPowerLabels.filter(l => l.group == pin.group).forEach(l => lbls.push(l));
-                    else
-                        topPowerLabels.filter(l => l.group == pin.group).forEach(l => lbls.push(l));
-                } else {
-                    //mid pins
-                    let rowLbls = lblNmToLbls[row];
-                    rowLbls.forEach(l => lbls.push(l));
-                    let colLbls = lblNmToLbls[col];
-                    colLbls.forEach(l => lbls.push(l));
-                }
-            })
-
-            //-----blue & red lines
-            const lnLen = BAR_GRID_WIDTH + PIN_DIST * 1.5;
-            const lnThickness = PIN_DIST / 5.0;
-            const lnYOff = PIN_DIST * 0.6;
-            const lnXOff = (lnLen - BAR_GRID_WIDTH) / 2.0;
-            const mkPowerLine = (x: number, y: number, group: string, cls: string): BBBar => {
-                let ln = <SVGRectElement>svg.elt("rect");
-                svg.hydrate(ln, {
-                    class: `sim-bb-bar ${cls}`,
-                    x: x,
-                    y: y - lnThickness / 2.0,
-                    width: lnLen,
-                    height: lnThickness});
-                let bar: BBBar = {el: ln, group: group};
-                return bar;
-            }
-            let barLines = [
-                //top
-                mkPowerLine(BAR_BOT_GRID_X - lnXOff, BAR_BOT_GRID_Y - lnYOff, getBarGroupName(0, POWER_COLS - 1), "sim-bb-blue"),
-                mkPowerLine(BAR_BOT_GRID_X - lnXOff, BAR_BOT_GRID_Y + PIN_DIST + lnYOff, getBarGroupName(1, POWER_COLS - 1), "sim-bb-red"),
-                //bot
-                mkPowerLine(BAR_TOP_GRID_X - lnXOff, BAR_TOP_GRID_Y - lnYOff, getBarGroupName(0, 0), "sim-bb-blue"),
-                mkPowerLine(BAR_TOP_GRID_X - lnXOff, BAR_TOP_GRID_Y + PIN_DIST + lnYOff, getBarGroupName(1, 0), "sim-bb-red"),
-            ];
-            this.allPowerBars = this.allPowerBars.concat(barLines);
-            //attach power bars
-            this.allPowerBars.forEach(b => this.bb.appendChild(b.el));
-
-            //-----electrically connected groups
-            //make groups
-            let allGrpNms = this.allPins.map(p => p.group).filter((g, i, a) => a.indexOf(g) == i);
-            let groups: SVGGElement[] = allGrpNms.map(grpNm => {
-                let g = <SVGGElement>svg.elt("g");
-                return g;
-            });
-            groups.forEach(g => svg.addClass(g, "sim-bb-pin-group"));
-            groups.forEach((g, i) => svg.addClass(g, `group-${allGrpNms[i]}`));
-            let grpNmToGroup: Map<SVGGElement> = {};
-            allGrpNms.forEach((g, i) => grpNmToGroup[g] = groups[i]);
-            //group pins and add connecting wire
-            let grpNmToPins: Map<GridPin[]> = {};
-            this.allPins.forEach((p, i) => {
-                let g = p.group;
-                let pins = grpNmToPins[g] || (grpNmToPins[g] = []);
-                pins.push(p);
-            });
-            //connecting wire
-            allGrpNms.forEach(grpNm => {
-                let pins = grpNmToPins[grpNm];
-                let [xs, ys] = [pins.map(p => p.cx), pins.map(p => p.cy)];
-                let minFn = (arr: number[]) => arr.reduce((a, b) => a < b ? a : b);
-                let maxFn = (arr: number[]) => arr.reduce((a, b) => a > b ? a : b);
-                let [minX, maxX, minY, maxY] = [minFn(xs), maxFn(xs), minFn(ys), maxFn(ys)];
-                let wire = svg.elt("rect");
-                let width = Math.max(maxX - minX, 0.0001/*rects with no width aren't displayed*/);
-                let height =  Math.max(maxY - minY, 0.0001);
-                svg.hydrate(wire, {x: minX, y: minY, width: width, height: height});
-                svg.addClass(wire, "sim-bb-group-wire")
-                let g = grpNmToGroup[grpNm];
-                g.appendChild(wire);
-            });
-            //group pins
-            this.allPins.forEach(p => {
-                let g = grpNmToGroup[p.group];
-                g.appendChild(p.el);
-                g.appendChild(p.hoverEl);
-            })
-            //group lbls
-            let miscLblGroup = <SVGGElement>svg.elt("g");
-            svg.hydrate(miscLblGroup, {class: "sim-bb-group-misc"});
-            groups.push(miscLblGroup);
-            this.allLabels.forEach(l => {
-                if (l.group) {
-                    let g = grpNmToGroup[l.group];
-                    g.appendChild(l.el);
-                    g.appendChild(l.hoverEl);
-                } else {
-                    miscLblGroup.appendChild(l.el);
-                    miscLblGroup.appendChild(l.hoverEl);
-                }
-            })
-
-            //attach to bb
-            groups.forEach(g => this.bb.appendChild(g)); //attach to breadboard
-        }
-
-        public getSVGAndSize(): SVGAndSize<SVGSVGElement> {
-            return {el: this.bb, y: 0, x: 0, w: WIDTH, h: HEIGHT};
-        }
-
-        public highlightLoc(rowCol: BBRowCol) {
-            let [row, col] = rowCol;
-            let pin = this.rowColToPin[row][col];
-            let {cx, cy} = pin;
-            let lbls = this.rowColToLbls[row][col];
-            const highlightLbl = (lbl: GridLabel) => {
-                svg.addClass(lbl.el, "highlight");
-                svg.addClass(lbl.hoverEl, "highlight");
-            };
-            lbls.forEach(highlightLbl);
-        }
-    }
-}

sim/visuals/buttonpair.ts

@@ -1,204 +0,0 @@
-/// <reference path="../../node_modules/pxt-core/typings/bluebird/bluebird.d.ts"/>
-/// <reference path="../../node_modules/pxt-core/built/pxtsim.d.ts"/>
-/// <reference path="../../libs/microbit/dal.d.ts"/>
-
-namespace pxsim.visuals {
-    export function mkBtnSvg(xy: Coord): SVGAndSize<SVGGElement> {
-        let [innerCls, outerCls] = ["sim-button", "sim-button-outer"];
-        const tabSize = PIN_DIST / 2.5;
-        const pegR = PIN_DIST / 5;
-        const btnR = PIN_DIST * .8;
-        const pegMargin = PIN_DIST / 8;
-        const plateR = PIN_DIST / 12;
-
-        const pegOffset = pegMargin + pegR;
-        let [x, y] = xy;
-        const left = x - tabSize / 2;
-        const top = y - tabSize / 2;
-        const plateH = 3 * PIN_DIST - tabSize;
-        const plateW = 2 * PIN_DIST + tabSize;
-        const plateL = left;
-        const plateT = top + tabSize;
-        const btnCX = plateL + plateW / 2;
-        const btnCY = plateT + plateH / 2;
-
-        let btng = <SVGGElement>svg.elt("g");
-        //tabs
-        const mkTab = (x: number, y: number) => {
-            svg.child(btng, "rect", { class: "sim-button-tab", x: x, y: y, width: tabSize, height: tabSize})
-        }
-        mkTab(left, top);
-        mkTab(left + 2 * PIN_DIST, top);
-        mkTab(left, top + 3 * PIN_DIST);
-        mkTab(left + 2 * PIN_DIST, top + 3 * PIN_DIST);
-
-        //plate
-        svg.child(btng, "rect", { class: outerCls, x: plateL, y: plateT, rx: plateR, ry: plateR, width: plateW, height: plateH });
-
-        //pegs
-        const mkPeg = (x: number, y: number) => {
-            svg.child(btng, "circle", { class: "sim-button-nut", cx: x, cy: y, r: pegR });
-        }
-        mkPeg(plateL + pegOffset, plateT + pegOffset)
-        mkPeg(plateL + plateW - pegOffset, plateT + pegOffset)
-        mkPeg(plateL + pegOffset, plateT + plateH - pegOffset)
-        mkPeg(plateL + plateW - pegOffset, plateT + plateH - pegOffset)
-
-        //inner btn
-        let innerBtn = svg.child(btng, "circle", { class: innerCls, cx: btnCX, cy: btnCY, r: btnR });
-
-        //return
-        return { el: btng, y: top, x: left, w: plateW, h: plateH + 2 * tabSize };
-    }
-    export const BUTTON_PAIR_STYLE = `
-            .sim-button {
-                pointer-events: none;
-                fill: #000;
-            }
-            .sim-button-outer:active ~ .sim-button,
-            .sim-button-virtual:active {
-                fill: #FFA500;
-            }
-            .sim-button-outer {
-                cursor: pointer;
-                fill: #979797;
-            }
-            .sim-button-outer:hover {
-                stroke:gray;
-                stroke-width: ${PIN_DIST / 5}px;
-            }
-            .sim-button-nut {
-                fill:#000;
-                pointer-events:none;
-            }
-            .sim-button-nut:hover {
-                stroke:${PIN_DIST / 15}px solid #704A4A;
-            }
-            .sim-button-tab {
-                fill:#FFF;
-                pointer-events:none;
-            }
-            .sim-button-virtual {
-                cursor: pointer;
-                fill: rgba(255, 255, 255, 0.6);
-                stroke: rgba(255, 255, 255, 1);
-                stroke-width: ${PIN_DIST / 5}px;
-            }
-            .sim-button-virtual:hover {
-                stroke: rgba(128, 128, 128, 1);
-            }
-            .sim-text-virtual {
-                fill: #000;
-                pointer-events:none;
-            }
-            `;
-    export class ButtonPairView implements IBoardComponent<ButtonPairState> {
-        public element: SVGElement;
-        public defs: SVGElement[];
-        public style = BUTTON_PAIR_STYLE;
-        private state: ButtonPairState;
-        private bus: EventBus;
-        private aBtn: SVGGElement;
-        private bBtn: SVGGElement;
-        private abBtn: SVGGElement;
-
-        public init(bus: EventBus, state: ButtonPairState) {
-            this.state = state;
-            this.bus = bus;
-            this.defs = [];
-            this.element = this.mkBtns();
-            this.updateState();
-            this.attachEvents();
-        }
-
-        public moveToCoord(xy: Coord) {
-            let btnWidth = PIN_DIST * 3;
-            let [x, y] = xy;
-            translateEl(this.aBtn, [x, y])
-            translateEl(this.bBtn, [x + btnWidth, y])
-            translateEl(this.abBtn, [x + PIN_DIST * 1.5, y + PIN_DIST * 4])
-        }
-
-        public updateState() {
-            let stateBtns = [this.state.aBtn, this.state.bBtn, this.state.abBtn];
-            let svgBtns = [this.aBtn, this.bBtn, this.abBtn];
-
-            if (this.state.usesButtonAB && this.abBtn.style.visibility != "visible") {
-                this.abBtn.style.visibility = "visible";
-            }
-        }
-
-        public updateTheme() {}
-
-        private mkBtns() {
-            this.aBtn = mkBtnSvg([0, 0]).el;
-            this.bBtn = mkBtnSvg([0, 0]).el;
-
-            const mkVirtualBtn = () => {
-                const numPins = 2;
-                const w = PIN_DIST * 2.8;
-                const offset = (w - (numPins * PIN_DIST)) / 2;
-                const corner = PIN_DIST / 2;
-                const cx = 0 - offset + w / 2;
-                const cy = cx;
-                const txtSize = PIN_DIST * 1.3;
-                const x = -offset;
-                const y = -offset;
-                const txtXOff = PIN_DIST / 7;
-                const txtYOff = PIN_DIST / 10;
-
-                let btng = <SVGGElement>svg.elt("g");
-                let btn = svg.child(btng, "rect", { class: "sim-button-virtual", x: x, y: y, rx: corner, ry: corner, width: w, height: w});
-                let btnTxt = mkTxt(cx + txtXOff, cy + txtYOff, txtSize, 0, "A+B");
-                svg.addClass(btnTxt, "sim-text")
-                svg.addClass(btnTxt, "sim-text-virtual");
-                btng.appendChild(btnTxt);
-
-                return btng;
-            }
-
-            this.abBtn = mkVirtualBtn();
-            this.abBtn.style.visibility = "hidden";
-
-            let el = svg.elt("g");
-            svg.addClass(el, "sim-buttonpair")
-            el.appendChild(this.aBtn);
-            el.appendChild(this.bBtn);
-            el.appendChild(this.abBtn);
-
-            return el;
-        }
-
-        private attachEvents() {
-            let btnStates = [this.state.aBtn, this.state.bBtn];
-            let btnSvgs = [this.aBtn, this.bBtn];
-            btnSvgs.forEach((btn, index) => {
-                btn.addEventListener(pointerEvents.down, ev => {
-                    btnStates[index].pressed = true;
-                })
-                btn.addEventListener(pointerEvents.leave, ev => {
-                    btnStates[index].pressed = false;
-                })
-                btn.addEventListener(pointerEvents.up, ev => {
-                    btnStates[index].pressed = false;
-                    this.bus.queue(btnStates[index].id, DAL.MICROBIT_BUTTON_EVT_UP);
-                    this.bus.queue(btnStates[index].id, DAL.MICROBIT_BUTTON_EVT_CLICK);
-                })
-            })
-            let updateBtns = (s: boolean) => {
-                btnStates.forEach(b => b.pressed = s)
-            };
-            this.abBtn.addEventListener(pointerEvents.down, ev => {
-                updateBtns(true);
-            })
-            this.abBtn.addEventListener(pointerEvents.leave, ev => {
-                updateBtns(false);
-            })
-            this.abBtn.addEventListener(pointerEvents.up, ev => {
-                updateBtns(false);
-                this.bus.queue(this.state.abBtn.id, DAL.MICROBIT_BUTTON_EVT_UP);
-                this.bus.queue(this.state.abBtn.id, DAL.MICROBIT_BUTTON_EVT_CLICK);
-            })
-        }
-    }
-}

sim/visuals/genericboard.ts

@@ -1,306 +0,0 @@
-/// <reference path="../../node_modules/pxt-core/typings/bluebird/bluebird.d.ts"/>
-/// <reference path="../../node_modules/pxt-core/built/pxtsim.d.ts"/>
-/// <reference path="../../libs/microbit/dal.d.ts"/>
-
-namespace pxsim.visuals {
-    export const BOARD_SYTLE = `
-        .noselect {
-            -webkit-touch-callout: none; /* iOS Safari */
-            -webkit-user-select: none;   /* Chrome/Safari/Opera */
-            -khtml-user-select: none;    /* Konqueror */
-            -moz-user-select: none;      /* Firefox */
-            -ms-user-select: none;       /* Internet Explorer/Edge */
-            user-select: none;           /* Non-prefixed version, currently
-                                            not supported by any browser */
-        }
-
-        .sim-board-pin {
-            fill:#999;
-            stroke:#000;
-            stroke-width:${PIN_DIST / 3.0}px;
-        }
-        .sim-board-pin-lbl {
-            fill: #333;
-        }
-        .gray-cover {
-            fill:#FFF;
-            opacity: 0.7;
-            stroke-width:0;
-            visibility: hidden;
-        }
-        .sim-board-pin-hover {
-            visibility: hidden;
-            pointer-events: all;
-            stroke-width:${PIN_DIST / 6.0}px;
-        }
-        .sim-board-pin-hover:hover {
-            visibility: visible;
-        }
-        .sim-board-pin-lbl {
-            visibility: hidden;
-        }
-        .sim-board-outline .sim-board-pin-lbl {
-            visibility: visible;
-        }
-        .sim-board-pin-lbl {
-            fill: #555;
-        }
-        .sim-board-pin-lbl-hover {
-            fill: red;
-        }
-        .sim-board-outline .sim-board-pin-lbl-hover {
-            fill: black;
-        }
-        .sim-board-pin-lbl,
-        .sim-board-pin-lbl-hover {
-            font-family:"Lucida Console", Monaco, monospace;
-            pointer-events: all;
-            stroke-width: 0;
-        }
-        .sim-board-pin-lbl-hover {
-            visibility: hidden;
-        }
-        .sim-board-outline .sim-board-pin-hover:hover + .sim-board-pin-lbl,
-        .sim-board-pin-lbl.highlight {
-            visibility: hidden;
-        }
-        .sim-board-outline .sim-board-pin-hover:hover + * + .sim-board-pin-lbl-hover,
-        .sim-board-pin-lbl-hover.highlight {
-            visibility: visible;
-        }
-        /* Graying out */
-        .grayed .sim-board-pin-lbl:not(.highlight) {
-            fill: #AAA;
-        }
-        .grayed .sim-board-pin:not(.highlight) {
-            fill:#BBB;
-            stroke:#777;
-        }
-        .grayed .gray-cover {
-            visibility: inherit;
-        }
-        .grayed .sim-cmp:not(.notgrayed) {
-            opacity: 0.3;
-        }
-        /* Highlighting */
-        .sim-board-pin-lbl.highlight {
-            fill: #000;
-            font-weight: bold;
-        }
-        .sim-board-pin.highlight {
-            fill:#999;
-            stroke:#000;
-        }
-        `;
-    const PIN_LBL_SIZE = PIN_DIST * 0.7;
-    const PIN_LBL_HOVER_SIZE = PIN_LBL_SIZE * 1.5;
-    const SQUARE_PIN_WIDTH = PIN_DIST * 0.66666;
-    const SQUARE_PIN_HOVER_WIDTH = PIN_DIST * 0.66666 + PIN_DIST / 3.0;
-
-    export interface GenericBoardProps {
-        visualDef: BoardImageDefinition;
-        wireframe?: boolean;
-    }
-
-    let nextBoardId = 0;
-    export class GenericBoardSvg implements BoardView {
-        private element: SVGSVGElement;
-        private style: SVGStyleElement;
-        private defs: SVGDefsElement;
-        private g: SVGGElement;
-        private background: SVGElement;
-        private width: number;
-        private height: number;
-        private id: number;
-
-        // pins & labels
-        //(truth)
-        private allPins: GridPin[] = [];
-        private allLabels: GridLabel[] = [];
-        //(cache)
-        private pinNmToLbl: Map<GridLabel> = {};
-        private pinNmToPin: Map<GridPin> = {};
-
-        constructor(public props: GenericBoardProps) {
-            //TODO: handle wireframe mode
-            this.id = nextBoardId++;
-            let visDef = props.visualDef;
-            let imgHref = props.wireframe ? visDef.outlineImage : visDef.image;
-            let boardImgAndSize = mkImageSVG({
-                image: imgHref,
-                width: visDef.width,
-                height: visDef.height,
-                imageUnitDist: visDef.pinDist,
-                targetUnitDist: PIN_DIST
-            });
-            let scaleFn = mkScaleFn(visDef.pinDist, PIN_DIST);
-            this.width = boardImgAndSize.w;
-            this.height = boardImgAndSize.h;
-            let img = boardImgAndSize.el;
-            this.element = <SVGSVGElement>svg.elt("svg");
-            svg.hydrate(this.element, {
-                "version": "1.0",
-                "viewBox": `0 0 ${this.width} ${this.height}`,
-                "class": `sim sim-board-id-${this.id}`,
-                "x": "0px",
-                "y": "0px"
-            });
-            if (props.wireframe)
-                svg.addClass(this.element, "sim-board-outline")
-            this.style = <SVGStyleElement>svg.child(this.element, "style", {});
-            this.style.textContent += BOARD_SYTLE;
-            this.defs = <SVGDefsElement>svg.child(this.element, "defs", {});
-            this.g = <SVGGElement>svg.elt("g");
-            this.element.appendChild(this.g);
-
-            // main board
-            this.g.appendChild(img);
-            this.background = img;
-            svg.hydrate(img, { class: "sim-board" });
-            let backgroundCover = this.mkGrayCover(0, 0, this.width, this.height);
-            this.g.appendChild(backgroundCover);
-
-            // ----- pins
-            const mkSquarePin = (): SVGElAndSize => {
-                let el = svg.elt("rect");
-                let width = SQUARE_PIN_WIDTH;
-                svg.hydrate(el, {
-                    class: "sim-board-pin",
-                    width: width,
-                    height: width,
-                });
-                return {el: el, w: width, h: width, x: 0, y: 0};
-            }
-            const mkSquareHoverPin = (): SVGElAndSize => {
-                let el = svg.elt("rect");
-                let width = SQUARE_PIN_HOVER_WIDTH;
-                svg.hydrate(el, {
-                    class: "sim-board-pin-hover",
-                    width: width,
-                    height: width
-                });
-                return {el: el, w: width, h: width, x: 0, y: 0};
-            }
-            const mkPinBlockGrid = (pinBlock: PinBlockDefinition, blockIdx: number) => {
-                let xOffset = scaleFn(pinBlock.x) + PIN_DIST / 2.0;
-                let yOffset = scaleFn(pinBlock.y) + PIN_DIST / 2.0;
-                let rowCount = 1;
-                let colCount = pinBlock.labels.length;
-                let getColName = (colIdx: number) => pinBlock.labels[colIdx];
-                let getRowName = () => `${blockIdx + 1}`
-                let getGroupName = () => pinBlock.labels.join(" ");
-                let gridRes = mkGrid({
-                    xOffset: xOffset,
-                    yOffset: yOffset,
-                    rowCount: rowCount,
-                    colCount: colCount,
-                    pinDist: PIN_DIST,
-                    mkPin: mkSquarePin,
-                    mkHoverPin: mkSquareHoverPin,
-                    getRowName: getRowName,
-                    getColName: getColName,
-                    getGroupName: getGroupName,
-                });
-                let pins = gridRes.allPins;
-                let pinsG = gridRes.g;
-                svg.addClass(gridRes.g, "sim-board-pin-group");
-                return gridRes;
-            };
-            let pinBlocks = visDef.pinBlocks.map(mkPinBlockGrid);
-            let pinToBlockDef: PinBlockDefinition[] = [];
-            pinBlocks.forEach((blk, blkIdx) => blk.allPins.forEach((p, pIdx) => {
-                this.allPins.push(p);
-                pinToBlockDef.push(visDef.pinBlocks[blkIdx]);
-            }));
-            //tooltip
-            this.allPins.forEach(p => {
-                let tooltip = p.col;
-                svg.hydrate(p.el, {title: tooltip});
-                svg.hydrate(p.hoverEl, {title: tooltip});
-            });
-            //attach pins
-            this.allPins.forEach(p => {
-                this.g.appendChild(p.el);
-                this.g.appendChild(p.hoverEl);
-            });
-            //catalog pins
-            this.allPins.forEach(p => {
-                this.pinNmToPin[p.col] = p;
-            });
-
-            // ----- labels
-            const mkLabelTxtEl = (pinX: number, pinY: number, size: number, txt: string, pos: "above" | "below"): SVGTextElement => {
-                //TODO: extract constants
-                let lblY: number;
-                let lblX: number;
-
-                if (pos === "below") {
-                    let lblLen = size * 0.25 * txt.length;
-                    lblX = pinX;
-                    lblY = pinY + 12 + lblLen;
-                } else {
-                    let lblLen = size * 0.32 * txt.length;
-                    lblX = pinX;
-                    lblY = pinY - 11 - lblLen;
-                }
-                let el = mkTxt(lblX, lblY, size, -90, txt);
-                return el;
-            };
-            const mkLabel = (pinX: number, pinY: number, txt: string, pos: "above" | "below"): GridLabel => {
-                let el = mkLabelTxtEl(pinX, pinY, PIN_LBL_SIZE, txt, pos);
-                svg.addClass(el, "sim-board-pin-lbl");
-                let hoverEl = mkLabelTxtEl(pinX, pinY, PIN_LBL_HOVER_SIZE, txt, pos);
-                svg.addClass(hoverEl, "sim-board-pin-lbl-hover");
-                let label: GridLabel = {el: el, hoverEl: hoverEl, txt: txt};
-                return label;
-            }
-            this.allLabels = this.allPins.map((p, pIdx) => {
-                let blk = pinToBlockDef[pIdx];
-                return mkLabel(p.cx, p.cy, p.col, blk.labelPosition);
-            });
-            //attach labels
-            this.allLabels.forEach(l => {
-                this.g.appendChild(l.el);
-                this.g.appendChild(l.hoverEl);
-            });
-            //catalog labels
-            this.allPins.forEach((pin, pinIdx) => {
-                let lbl = this.allLabels[pinIdx];
-                this.pinNmToLbl[pin.col] = lbl;
-            });
-        }
-
-        public getCoord(pinNm: string): Coord {
-            let pin = this.pinNmToPin[pinNm];
-            if (!pin)
-                return null;
-            return [pin.cx, pin.cy];
-        }
-
-        private mkGrayCover(x: number, y: number, w: number, h: number) {
-            let rect = <SVGRectElement>svg.elt("rect");
-            svg.hydrate(rect, {x: x, y: y, width: w, height: h, class: "gray-cover"});
-            return rect;
-        }
-
-
-        public getView(): SVGAndSize<SVGSVGElement> {
-            return {el: this.element, w: this.width, h: this.height, x: 0, y: 0};
-        }
-
-        public getPinDist() {
-            return PIN_DIST;
-        }
-
-        public highlightPin(pinNm: string) {
-            let lbl = this.pinNmToLbl[pinNm];
-            let pin = this.pinNmToPin[pinNm];
-            if (lbl && pin) {
-                svg.addClass(lbl.el, "highlight");
-                svg.addClass(lbl.hoverEl, "highlight");
-                svg.addClass(pin.el, "highlight");
-                svg.addClass(pin.hoverEl, "highlight");
-            }
-        }
-    }
-}

sim/visuals/genericpart.ts

@@ -1,40 +0,0 @@
-
-namespace pxsim.visuals {
-    export function mkGenericPartSVG(partVisual: PartVisualDefinition): SVGAndSize<SVGImageElement> {
-        let imgAndSize = mkImageSVG({
-            image: partVisual.image,
-            width: partVisual.width,
-            height: partVisual.height,
-            imageUnitDist: partVisual.pinDist,
-            targetUnitDist: PIN_DIST
-        });
-        return imgAndSize;
-    }
-
-    export class GenericPart implements IBoardComponent<any> {
-        public style: string = "";
-        public element: SVGElement;
-        defs: SVGElement[] = [];
-
-        constructor(partVisual: PartVisualDefinition) {
-            let imgAndSize = mkGenericPartSVG(partVisual);
-            let img = imgAndSize.el;
-            let scaleFn = mkScaleFn(partVisual.pinDist, PIN_DIST);
-            let [pinX, pinY] = partVisual.firstPin;
-            let left = -scaleFn(pinX);
-            let top = -scaleFn(pinY);
-            translateEl(img, [left, top]); // So that 0,0 is on the first pin
-            this.element = svg.elt("g");
-            this.element.appendChild(img);
-        }
-
-        moveToCoord(xy: Coord): void {
-            translateEl(this.element, xy);
-        }
-
-        //unused
-        init(bus: EventBus, state: any, svgEl: SVGSVGElement, gpioPins: string[], otherArgs: string[]): void { }
-        updateState(): void { }
-        updateTheme(): void { }
-    }
-}

sim/visuals/ledmatrix.ts

@@ -1,6 +1,5 @@
 /// <reference path="../../node_modules/pxt-core/typings/bluebird/bluebird.d.ts"/>
 /// <reference path="../../node_modules/pxt-core/built/pxtsim.d.ts"/>
-/// <reference path="../../libs/microbit/dal.d.ts"/>
 
 namespace pxsim.visuals {
     export function mkLedMatrixSvg(xy: Coord, rows: number, cols: number):
@@ -68,7 +67,7 @@ namespace pxsim.visuals {
             }
             `
 
-    export class LedMatrixView implements IBoardComponent<LedMatrixState> {
+    export class LedMatrixView implements IBoardPart<LedMatrixState> {
         private background: SVGElement;
         private ledsOuter: SVGElement[];
         private leds: SVGElement[];

sim/visuals/neopixel.ts

@@ -2,8 +2,6 @@
 /// <reference path="../../libs/microbit/dal.d.ts"/>
 /// <reference path="../../libs/microbit/shims.d.ts"/>
 /// <reference path="../../libs/microbit/enums.d.ts"/>
-/// <reference path="../state/neopixel.ts"/>
-/// <reference path="../simlib.ts"/>
 
 //TODO move to utils
 namespace pxsim.visuals {
@@ -102,34 +100,26 @@ namespace pxsim.visuals {
         });
         return { el: img, x: l, y: t, w: w, h: h };
     }
-    export class NeoPixel implements SVGAndSize<SVGCircleElement> {
-        public el: SVGCircleElement;
-        public w: number;
-        public h: number;
-        public x: number;
-        public y: number;
-        public cx: number;
+    export class NeoPixel {
+        public el: SVGElement;
         public cy: number;
 
         constructor(xy: Coord = [0, 0]) {
-            let circle = <SVGCircleElement>svg.elt("circle");
+            let el = <SVGElement>svg.elt("rect");
             let r = PIXEL_RADIUS;
             let [cx, cy] = xy;
-            svg.hydrate(circle, { cx: cx, cy: cy, r: r, class: "sim-neopixel" });
-            this.el = circle;
-            this.w = r * 2;
-            this.h = r * 2;
-            this.x = cx - r;
-            this.y = cy - r;
-            this.cx = cx;
+            let y = cy - r;
+            svg.hydrate(el, { x: "-50%", y: y, width: "100%", height: r * 2, class: "sim-neopixel" });
+            this.el = el;
             this.cy = cy;
         }
 
         public setRgb(rgb: [number, number, number]) {
             let hsl = rgbToHsl(rgb);
             let [h, s, l] = hsl;
-            //We ignore luminosity since it doesn't map well to real-life brightness
-            let fill = `hsl(${h}, ${s}%, 70%)`;
+            // at least 70% luminosity
+            l = Math.max(l, 60);
+            let fill = `hsl(${h}, ${s}%, ${l}%)`;
             this.el.setAttribute("fill", fill);
         }
     }
@@ -200,29 +190,26 @@ namespace pxsim.visuals {
         }
     };
 
-    function gpioPinToPinNumber(gpioPin: string): number {
-        let pinNumStr = gpioPin.split("P")[1];
-        let pinNum = Number(pinNumStr) + 7 /*MICROBIT_ID_IO_P0; TODO: don't hardcode this, import enums.d.ts*/;
+    function digitalPinToPinNumber(gpioPin: string): number {
+        const MICROBIT_ID_IO_P0 = 7; //TODO: don't hardcode this, import enums.d.ts
+        if (gpioPin == "*") {
+            return MICROBIT_ID_IO_P0;
+        }
+        let pinSplit = gpioPin.split("DigitalPin.P");
+        U.assert(pinSplit.length === 2, "Unknown format for pin (for NeoPixel): " + gpioPin);
+        let pinNumStr = pinSplit[1];
+        let pinNum = Number(pinNumStr) + MICROBIT_ID_IO_P0;
         return pinNum
     }
     function parseNeoPixelMode(modeStr: string): NeoPixelMode {
         const modeMap: Map<NeoPixelMode> = {
             "NeoPixelMode.RGB": NeoPixelMode.RGB,
-            "NeoPixelMode.RGBW": NeoPixelMode.RGBW,
-            "*": NeoPixelMode.RGB,
+            "NeoPixelMode.RGBW": NeoPixelMode.RGBW
         };
-        let mode: NeoPixelMode = null;
-        for (let key in modeMap) {
-            if (key == modeStr) {
-                mode = modeMap[key];
-                break;
-            }
-        }
-        U.assert(mode != null, "Unknown NeoPixelMode: " + modeStr);
-        return mode;
+        return modeMap[modeStr] || NeoPixelMode.RGB;
     }
 
-    export class NeoPixelView implements IBoardComponent<NeoPixelState> {
+    export class NeoPixelView implements IBoardPart<NeoPixelState> {
         public style: string = `
             .sim-neopixel-canvas {
             }
@@ -240,6 +227,7 @@ namespace pxsim.visuals {
             }
         `;
         public element: SVGElement;
+        public overElement: SVGElement;
         public defs: SVGElement[];
         private state: NeoPixelState;
         private canvas: NeoPixelCanvas;
@@ -249,22 +237,24 @@ namespace pxsim.visuals {
         private pin: number;
         private mode: NeoPixelMode;
 
-        public init(bus: EventBus, state: NeoPixelState, svgEl: SVGSVGElement, gpioPins: string[], otherArgs: string[]): void {
-            U.assert(otherArgs.length === 1, "NeoPixels assumes a RGB vs RGBW mode is passed to it");
-            let modeStr = otherArgs[0];
+        public init(bus: EventBus, state: NeoPixelState, svgEl: SVGSVGElement, otherParams: Map<string>): void {
+            U.assert(!!otherParams["mode"], "NeoPixels assumes a RGB vs RGBW mode is passed to it");
+            U.assert(!!otherParams["pin"], "NeoPixels assumes a pin is passed to it");
+            let modeStr = otherParams["mode"];
             this.mode = parseNeoPixelMode(modeStr);
             this.state = state;
             this.stripGroup = <SVGGElement>svg.elt("g");
             this.element = this.stripGroup;
-            let pinStr = gpioPins[0];
-            this.pin = gpioPinToPinNumber(pinStr);
+            let pinStr = otherParams["pin"];
+            this.pin = digitalPinToPinNumber(pinStr);
             this.lastLocation = [0, 0];
             let part = mkNeoPixelPart();
             this.part = part;
             this.stripGroup.appendChild(part.el);
             let canvas = new NeoPixelCanvas(this.pin);
             this.canvas = canvas;
-            let canvasG = svg.child(this.stripGroup, "g", { class: "sim-neopixel-canvas-parent" });
+            let canvasG = svg.elt("g", { class: "sim-neopixel-canvas-parent" });
+            this.overElement = canvasG;
             canvasG.appendChild(canvas.canvas);
             this.updateStripLoc();
         }
@@ -276,6 +266,7 @@ namespace pxsim.visuals {
         }
         private updateStripLoc() {
             let [x, y] = this.lastLocation;
+            U.assert(typeof x === "number" && typeof y === "number", "invalid x,y for NeoPixel strip");
             this.canvas.setLoc([x + CANVAS_LEFT, y + CANVAS_TOP]);
             svg.hydrate(this.part.el, { transform: `translate(${x} ${y})` }); //TODO: update part's l,h, etc.
         }

sim/visuals/wiring.ts

@@ -1,470 +0,0 @@
-namespace pxsim.visuals {
-    const WIRE_WIDTH = PIN_DIST / 2.5;
-    const BB_WIRE_SMOOTH = 0.7;
-    const INSTR_WIRE_SMOOTH = 0.8;
-    const WIRE_PART_CURVE_OFF = 15;
-    const WIRE_PART_LENGTH = 100;
-    export const WIRES_CSS = `
-        .sim-bb-wire {
-            fill:none;
-            stroke-linecap: round;
-            stroke-width:${WIRE_WIDTH}px;
-            pointer-events: none;
-        }
-        .sim-bb-wire-end {
-            stroke:#333;
-            fill:#333;
-        }
-        .sim-bb-wire-bare-end {
-            fill: #ccc;
-        }
-        .sim-bb-wire-hover {
-            stroke-width: ${WIRE_WIDTH}px;
-            visibility: hidden;
-            stroke-dasharray: ${PIN_DIST / 10.0},${PIN_DIST / 1.5};
-            /*stroke-opacity: 0.4;*/
-        }
-        .grayed .sim-bb-wire-ends-g:not(.highlight) .sim-bb-wire-end {
-            stroke: #777;
-            fill: #777;
-        }
-        .grayed .sim-bb-wire:not(.highlight) {
-            stroke: #CCC;
-        }
-        .sim-bb-wire-ends-g:hover .sim-bb-wire-end {
-            stroke: red;
-            fill: red;
-        }
-        .sim-bb-wire-ends-g:hover .sim-bb-wire-bare-end {
-            stroke: #FFF;
-            fill: #FFF;
-        }
-        `;
-
-    export interface Wire {
-        endG: SVGGElement;
-        end1: SVGElement;
-        end2: SVGElement;
-        wires: SVGElement[];
-    }
-
-    function cssEncodeColor(color: string): string {
-        //HACK/TODO: do real CSS encoding.
-        return color
-            .replace(/\#/g, "-")
-            .replace(/\(/g, "-")
-            .replace(/\)/g, "-")
-            .replace(/\,/g, "-")
-            .replace(/\./g, "-")
-            .replace(/\s/g, "");
-    }
-    export enum WireEndStyle {
-        BBJumper,
-        OpenJumper,
-        Croc,
-    }
-    export interface WireOpts { //TODO: use throughout
-        color?: string,
-        colorClass?: string,
-        bendFactor?: number,
-    }
-    export function mkWirePart(cp: [number, number], clr: string, croc: boolean = false): visuals.SVGAndSize<SVGGElement> {
-        let g = <SVGGElement>svg.elt("g");
-        let [cx, cy] = cp;
-        let offset = WIRE_PART_CURVE_OFF;
-        let p1: visuals.Coord = [cx - offset, cy - WIRE_PART_LENGTH / 2];
-        let p2: visuals.Coord = [cx + offset, cy + WIRE_PART_LENGTH / 2];
-        clr = visuals.mapWireColor(clr);
-        let e1: SVGElAndSize;
-        if (croc)
-            e1 = mkCrocEnd(p1, true, clr);
-        else
-            e1 = mkOpenJumperEnd(p1, true, clr);
-        let s = mkWirePartSeg(p1, p2, clr);
-        let e2 = mkOpenJumperEnd(p2, false, clr);
-        g.appendChild(s.el);
-        g.appendChild(e1.el);
-        g.appendChild(e2.el);
-        let l = Math.min(e1.x, e2.x);
-        let r = Math.max(e1.x + e1.w, e2.x + e2.w);
-        let t = Math.min(e1.y, e2.y);
-        let b = Math.max(e1.y + e1.h, e2.y + e2.h);
-        return {el: g, x: l, y: t, w: r - l, h: b - t};
-    }
-    function mkCurvedWireSeg(p1: [number, number], p2: [number, number], smooth: number, clrClass: string): SVGPathElement {
-        const coordStr = (xy: [number, number]): string => {return `${xy[0]}, ${xy[1]}`};
-        let [x1, y1] = p1;
-        let [x2, y2] = p2
-        let yLen = (y2 - y1);
-        let c1: [number, number] = [x1, y1 + yLen * smooth];
-        let c2: [number, number] = [x2, y2 - yLen * smooth];
-        let w = <SVGPathElement>svg.mkPath("sim-bb-wire", `M${coordStr(p1)} C${coordStr(c1)} ${coordStr(c2)} ${coordStr(p2)}`);
-        svg.addClass(w, `wire-stroke-${clrClass}`);
-        return w;
-    }
-    function mkWirePartSeg(p1: [number, number], p2: [number, number], clr: string): visuals.SVGAndSize<SVGPathElement> {
-        //TODO: merge with mkCurvedWireSeg
-        const coordStr = (xy: [number, number]): string => {return `${xy[0]}, ${xy[1]}`};
-        let [x1, y1] = p1;
-        let [x2, y2] = p2
-        let yLen = (y2 - y1);
-        let c1: [number, number] = [x1, y1 + yLen * .8];
-        let c2: [number, number] = [x2, y2 - yLen * .8];
-        let e = <SVGPathElement>svg.mkPath("sim-bb-wire", `M${coordStr(p1)} C${coordStr(c1)} ${coordStr(c2)} ${coordStr(p2)}`);
-        (<any>e).style["stroke"] = clr;
-        return {el: e, x: Math.min(x1, x2), y: Math.min(y1, y2), w: Math.abs(x1 - x2), h: Math.abs(y1 - y2)};
-    }
-    function mkWireSeg(p1: [number, number], p2: [number, number], clrClass: string): SVGPathElement {
-        const coordStr = (xy: [number, number]): string => {return `${xy[0]}, ${xy[1]}`};
-        let w = <SVGPathElement>svg.mkPath("sim-bb-wire", `M${coordStr(p1)} L${coordStr(p2)}`);
-        svg.addClass(w, `wire-stroke-${clrClass}`);
-        return w;
-    }
-    function mkBBJumperEnd(p: [number, number], clrClass: string): SVGElement {
-        const endW = PIN_DIST / 4;
-        let w = svg.elt("circle");
-        let x = p[0];
-        let y = p[1];
-        let r = WIRE_WIDTH / 2 + endW / 2;
-        svg.hydrate(w, {cx: x, cy: y, r: r, class: "sim-bb-wire-end"});
-        svg.addClass(w, `wire-fill-${clrClass}`);
-        (<any>w).style["stroke-width"] = `${endW}px`;
-        return w;
-    }
-    function mkOpenJumperEnd(p: [number, number], top: boolean, clr: string): visuals.SVGElAndSize {
-        let k = visuals.PIN_DIST * 0.24;
-        let plasticLength = k * 10;
-        let plasticWidth = k * 2;
-        let metalLength = k * 6;
-        let metalWidth = k;
-        const strokeWidth = visuals.PIN_DIST / 4.0;
-        let [cx, cy] = p;
-        let o = top ? -1 : 1;
-        let g = svg.elt("g")
-
-        let el = svg.elt("rect");
-        let h1 = plasticLength;
-        let w1 = plasticWidth;
-        let x1 = cx - w1 / 2;
-        let y1 = cy - (h1 / 2);
-        svg.hydrate(el, {x: x1, y: y1, width: w1, height: h1, rx: 0.5, ry: 0.5, class: "sim-bb-wire-end"});
-        (<any>el).style["stroke-width"] = `${strokeWidth}px`;
-
-        let el2 = svg.elt("rect");
-        let h2 = metalLength;
-        let w2 = metalWidth;
-        let cy2 = cy + o * (h1 / 2 + h2 / 2);
-        let x2 = cx - w2 / 2;
-        let y2 = cy2 - (h2 / 2);
-        svg.hydrate(el2, {x: x2, y: y2, width: w2, height: h2, class: "sim-bb-wire-bare-end"});
-        (<any>el2).style["fill"] = `#bbb`;
-
-        g.appendChild(el2);
-        g.appendChild(el);
-        return {el: g, x: x1 - strokeWidth, y: Math.min(y1, y2), w: w1 + strokeWidth * 2, h: h1 + h2};
-    }
-    function mkSmallMBPinEnd(p: [number, number], top: boolean, clr: string): visuals.SVGElAndSize {
-        //HACK
-        //TODO: merge with mkOpenJumperEnd()
-        let k = visuals.PIN_DIST * 0.24;
-        let plasticLength = k * 4;
-        let plasticWidth = k * 1.2;
-        let metalLength = k * 10;
-        let metalWidth = k;
-        const strokeWidth = visuals.PIN_DIST / 4.0;
-        let [cx, cy] = p;
-        let yOffset = 10;
-        let o = top ? -1 : 1;
-        let g = svg.elt("g")
-
-        let el = svg.elt("rect");
-        let h1 = plasticLength;
-        let w1 = plasticWidth;
-        let x1 = cx - w1 / 2;
-        let y1 = cy + yOffset - (h1 / 2);
-        svg.hydrate(el, {x: x1, y: y1, width: w1, height: h1, rx: 0.5, ry: 0.5, class: "sim-bb-wire-end"});
-        (<any>el).style["stroke-width"] = `${strokeWidth}px`;
-
-        let el2 = svg.elt("rect");
-        let h2 = metalLength;
-        let w2 = metalWidth;
-        let cy2 = cy + yOffset + o * (h1 / 2 + h2 / 2);
-        let x2 = cx - w2 / 2;
-        let y2 = cy2 - (h2 / 2);
-        svg.hydrate(el2, {x: x2, y: y2, width: w2, height: h2, class: "sim-bb-wire-bare-end"});
-        (<any>el2).style["fill"] = `#bbb`;
-
-        g.appendChild(el2);
-        g.appendChild(el);
-        return {el: g, x: x1 - strokeWidth, y: Math.min(y1, y2), w: w1 + strokeWidth * 2, h: h1 + h2};
-    }
-    function mkCrocEnd(p: [number, number], top: boolean, clr: string): SVGElAndSize {
-        //TODO: merge with mkOpenJumperEnd()
-        let k = visuals.PIN_DIST * 0.24;
-        const plasticWidth = k * 4;
-        const plasticLength = k * 10.0;
-        const metalWidth = k * 3.5;
-        const metalHeight = k * 3.5;
-        const pointScalar = .15;
-        const baseScalar = .3;
-        const taperScalar = .7;
-        const strokeWidth = visuals.PIN_DIST / 4.0;
-        let [cx, cy] = p;
-        let o = top ? -1 : 1;
-        let g = svg.elt("g")
-
-        let el = svg.elt("polygon");
-        let h1 = plasticLength;
-        let w1 = plasticWidth;
-        let x1 = cx - w1 / 2;
-        let y1 = cy - (h1 / 2);
-        let mkPnt = (xy: Coord) => `${xy[0]},${xy[1]}`;
-        let mkPnts = (...xys: Coord[]) => xys.map(xy => mkPnt(xy)).join(" ");
-        const topScalar = top ? pointScalar : baseScalar;
-        const midScalar = top ? taperScalar : (1 - taperScalar);
-        const botScalar = top ? baseScalar : pointScalar;
-        svg.hydrate(el, {
-            points: mkPnts(
-                [x1 + w1 * topScalar, y1], //TL
-                [x1 + w1 * (1 - topScalar), y1], //TR
-                [x1 + w1, y1 + h1 * midScalar], //MR
-                [x1 + w1 * (1 - botScalar), y1 + h1], //BR
-                [x1 + w1 * botScalar, y1 + h1], //BL
-                [x1, y1 + h1 * midScalar]) //ML
-        });
-        svg.hydrate(el, {rx: 0.5, ry: 0.5, class: "sim-bb-wire-end"});
-        (<any>el).style["stroke-width"] = `${strokeWidth}px`;
-
-        let el2 = svg.elt("rect");
-        let h2 = metalWidth;
-        let w2 = metalHeight;
-        let cy2 = cy + o * (h1 / 2 + h2 / 2);
-        let x2 = cx - w2 / 2;
-        let y2 = cy2 - (h2 / 2);
-        svg.hydrate(el2, {x: x2, y: y2, width: w2, height: h2, class: "sim-bb-wire-bare-end"});
-
-        g.appendChild(el2);
-        g.appendChild(el);
-        return {el: g, x: x1 - strokeWidth, y: Math.min(y1, y2), w: w1 + strokeWidth * 2, h: h1 + h2};
-    }
-
-    //TODO: make this stupid class obsolete
-    export class WireFactory {
-        private underboard: SVGGElement;
-        private overboard: SVGGElement;
-        private boardEdges: number[];
-        private getLocCoord: (loc: Loc) => Coord;
-        public styleEl: SVGStyleElement;
-
-        constructor(underboard: SVGGElement, overboard: SVGGElement, boardEdges: number[], styleEl: SVGStyleElement, getLocCoord: (loc: Loc) => Coord) {
-            this.styleEl = styleEl;
-            this.styleEl.textContent += WIRES_CSS;
-            this.underboard = underboard;
-            this.overboard = overboard;
-            this.boardEdges = boardEdges;
-            this.getLocCoord = getLocCoord;
-        }
-
-        private indexOfMin(vs: number[]): number {
-            let minIdx = 0;
-            let min = vs[0];
-            for (let i = 1; i < vs.length; i++) {
-                if (vs[i] < min) {
-                    min = vs[i];
-                    minIdx = i;
-                }
-            }
-            return minIdx;
-        }
-        private closestEdgeIdx(p: [number, number]): number {
-            let dists = this.boardEdges.map(e => Math.abs(p[1] - e));
-            let edgeIdx = this.indexOfMin(dists);
-            return edgeIdx;
-        }
-        private closestEdge(p: [number, number]): number {
-            return this.boardEdges[this.closestEdgeIdx(p)];
-        }
-
-        private nextWireId = 0;
-        private drawWire(pin1: Coord, pin2: Coord, color: string): Wire {
-            let wires: SVGElement[] = [];
-            let g = svg.child(this.overboard, "g", {class: "sim-bb-wire-group"});
-            const closestPointOffBoard = (p: [number, number]): [number, number] => {
-                const offset = PIN_DIST / 2;
-                let e = this.closestEdge(p);
-                let y: number;
-                if (e - p[1] < 0)
-                    y = e - offset;
-                else
-                    y = e + offset;
-                return [p[0], y];
-            }
-            let wireId = this.nextWireId++;
-            let clrClass = cssEncodeColor(color);
-            let end1 = mkBBJumperEnd(pin1, clrClass);
-            let end2 = mkBBJumperEnd(pin2, clrClass);
-            let endG = <SVGGElement>svg.child(g, "g", {class: "sim-bb-wire-ends-g"});
-            endG.appendChild(end1);
-            endG.appendChild(end2);
-            let edgeIdx1 = this.closestEdgeIdx(pin1);
-            let edgeIdx2 = this.closestEdgeIdx(pin2);
-            if (edgeIdx1 == edgeIdx2) {
-                let seg = mkWireSeg(pin1, pin2, clrClass);
-                g.appendChild(seg);
-                wires.push(seg);
-            } else {
-                let offP1 = closestPointOffBoard(pin1);
-                let offP2 = closestPointOffBoard(pin2);
-                let offSeg1 = mkWireSeg(pin1, offP1, clrClass);
-                let offSeg2 = mkWireSeg(pin2, offP2, clrClass);
-                let midSeg: SVGElement;
-                let midSegHover: SVGElement;
-                let isBetweenMiddleTwoEdges = (edgeIdx1 == 1 || edgeIdx1 == 2) && (edgeIdx2 == 1 || edgeIdx2 == 2);
-                if (isBetweenMiddleTwoEdges) {
-                    midSeg = mkCurvedWireSeg(offP1, offP2, BB_WIRE_SMOOTH, clrClass);
-                    midSegHover =  mkCurvedWireSeg(offP1, offP2, BB_WIRE_SMOOTH, clrClass);
-                } else {
-                    midSeg = mkWireSeg(offP1, offP2, clrClass);
-                    midSegHover = mkWireSeg(offP1, offP2, clrClass);
-                }
-                svg.addClass(midSegHover, "sim-bb-wire-hover");
-                g.appendChild(offSeg1);
-                wires.push(offSeg1);
-                g.appendChild(offSeg2);
-                wires.push(offSeg2);
-                this.underboard.appendChild(midSeg);
-                wires.push(midSeg);
-                g.appendChild(midSegHover);
-                wires.push(midSegHover);
-                //set hover mechanism
-                let wireIdClass = `sim-bb-wire-id-${wireId}`;
-                const setId = (e: SVGElement) => svg.addClass(e, wireIdClass);
-                setId(endG);
-                setId(midSegHover);
-                this.styleEl.textContent += `
-                    .${wireIdClass}:hover ~ .${wireIdClass}.sim-bb-wire-hover {
-                        visibility: visible;
-                    }`
-            }
-
-            // wire colors
-            let colorCSS =  `
-                .wire-stroke-${clrClass} {
-                    stroke: ${mapWireColor(color)};
-                }
-                .wire-fill-${clrClass} {
-                    fill: ${mapWireColor(color)};
-                }
-                `
-            this.styleEl.textContent += colorCSS;
-
-            return {endG: endG, end1: end1, end2: end2, wires: wires};
-        }
-        private drawWireWithCrocs(pin1: Coord, pin2: Coord, color: string, smallPin: boolean = false): Wire {
-            //TODO: merge with drawWire()
-            const PIN_Y_OFF = 40;
-            const CROC_Y_OFF = -17;
-            let wires: SVGElement[] = [];
-            let g = svg.child(this.overboard, "g", {class: "sim-bb-wire-group"});
-            const closestPointOffBoard = (p: [number, number]): [number, number] => {
-                const offset = PIN_DIST / 2;
-                let e = this.closestEdge(p);
-                let y: number;
-                if (e - p[1] < 0)
-                    y = e - offset;
-                else
-                    y = e + offset;
-                return [p[0], y];
-            }
-            let wireId = this.nextWireId++;
-            let clrClass = cssEncodeColor(color);
-            let end1 = mkBBJumperEnd(pin1, clrClass);
-            let pin2orig = pin2;
-            let [x2, y2] = pin2;
-            pin2 = [x2, y2 + PIN_Y_OFF];//HACK
-            [x2, y2] = pin2;
-            let endCoord2: Coord = [x2, y2 + CROC_Y_OFF]
-            let end2AndSize: SVGElAndSize;
-            if (smallPin)
-                end2AndSize = mkSmallMBPinEnd(endCoord2, true, color);
-            else
-                end2AndSize = mkCrocEnd(endCoord2, true, color);
-            let end2 = end2AndSize.el;
-            let endG = <SVGGElement>svg.child(g, "g", {class: "sim-bb-wire-ends-g"});
-            endG.appendChild(end1);
-            //endG.appendChild(end2);
-            let edgeIdx1 = this.closestEdgeIdx(pin1);
-            let edgeIdx2 = this.closestEdgeIdx(pin2orig);
-            if (edgeIdx1 == edgeIdx2) {
-                let seg = mkWireSeg(pin1, pin2, clrClass);
-                g.appendChild(seg);
-                wires.push(seg);
-            } else {
-                let offP1 = closestPointOffBoard(pin1);
-                //let offP2 = closestPointOffBoard(pin2orig);
-                let offSeg1 = mkWireSeg(pin1, offP1, clrClass);
-                //let offSeg2 = mkWireSeg(pin2, offP2, clrClass);
-                let midSeg: SVGElement;
-                let midSegHover: SVGElement;
-                let isBetweenMiddleTwoEdges = (edgeIdx1 == 1 || edgeIdx1 == 2) && (edgeIdx2 == 1 || edgeIdx2 == 2);
-                if (isBetweenMiddleTwoEdges) {
-                    midSeg = mkCurvedWireSeg(offP1, pin2, BB_WIRE_SMOOTH, clrClass);
-                    midSegHover =  mkCurvedWireSeg(offP1, pin2, BB_WIRE_SMOOTH, clrClass);
-                } else {
-                    midSeg = mkWireSeg(offP1, pin2, clrClass);
-                    midSegHover = mkWireSeg(offP1, pin2, clrClass);
-                }
-                svg.addClass(midSegHover, "sim-bb-wire-hover");
-                g.appendChild(offSeg1);
-                wires.push(offSeg1);
-                // g.appendChild(offSeg2);
-                // wires.push(offSeg2);
-                this.underboard.appendChild(midSeg);
-                wires.push(midSeg);
-                //g.appendChild(midSegHover);
-                //wires.push(midSegHover);
-                //set hover mechanism
-                let wireIdClass = `sim-bb-wire-id-${wireId}`;
-                const setId = (e: SVGElement) => svg.addClass(e, wireIdClass);
-                setId(endG);
-                setId(midSegHover);
-                this.styleEl.textContent += `
-                    .${wireIdClass}:hover ~ .${wireIdClass}.sim-bb-wire-hover {
-                        visibility: visible;
-                    }`
-            }
-            endG.appendChild(end2);//HACK
-
-            // wire colors
-            let colorCSS =  `
-                .wire-stroke-${clrClass} {
-                    stroke: ${mapWireColor(color)};
-                }
-                .wire-fill-${clrClass} {
-                    fill: ${mapWireColor(color)};
-                }
-                `
-            this.styleEl.textContent += colorCSS;
-
-            return {endG: endG, end1: end1, end2: end2, wires: wires};
-        }
-
-        public addWire(start: Loc, end: Loc, color: string, withCrocs: boolean = false): Wire {
-            let startLoc = this.getLocCoord(start);
-            let endLoc = this.getLocCoord(end);
-            let wireEls: Wire;
-            if (withCrocs && end.type == "dalboard") {
-                let boardPin = (<BoardLoc>end).pin;
-                if (boardPin == "P0" || boardPin == "P1" || boardPin == "P0" || boardPin == "GND" || boardPin == "+3v3" ) {
-                    //HACK
-                    wireEls = this.drawWireWithCrocs(startLoc, endLoc, color);
-                } else {
-                    wireEls = this.drawWireWithCrocs(startLoc, endLoc, color, true);
-                }
-            } else {
-                wireEls = this.drawWire(startLoc, endLoc, color);
-            }
-            return wireEls;
-        }
-    }
-}