adds support for generic components

sim/definitions.ts

@@ -101,7 +101,7 @@ namespace pxsim {
         groundPins: ["GND"],
         threeVoltPins: ["+3v3"],
         attachPowerOnRight: true,
-        onboardComponents: ["buttonpair", "ledmatrix"],
+        onboardComponents: ["buttonpair", "ledmatrix", "speaker"],
         useCrocClips: true,
         marginWhenBreadboarding: [0, 0, 80, 0],
     }
@@ -294,7 +294,7 @@ namespace pxsim {
                 image: "/static/hardware/speaker.svg",
                 width: 500,
                 height: 500,
-                firstPin: [180, 135],
+                firstPin: [110, 135],
                 pinDist: 70,
             },
             breadboardColumnsNeeded: 5,

sim/visuals/boardhost.ts

@@ -155,25 +155,24 @@ namespace pxsim.visuals {
                 let stateFn = builtinComponentSimState[builtinVisual];
                 cmp = cnstr();
                 cmp.init(this.state.bus, stateFn(this.state), this.view, cmpDesc.microbitPins, cmpDesc.otherArgs);
-                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}`, `${cmpDesc.breadboardStartColumn}`];
-                let coord = this.getBBCoord(rowCol);
-                cmp.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();
             } else {
                 let vis = cmpDesc.visual as PartVisualDefinition;
-                console.log("TODO PART: " + vis.image);
+                cmp = new GenericPart(vis);
-                //TODO: support generic parts
             }
+            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}`, `${cmpDesc.breadboardStartColumn}`];
+            let coord = this.getBBCoord(rowCol);
+            cmp.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;
         }
         public addWire(inst: WireInst): Wire {

sim/visuals/genericpart.ts

@@ -1,16 +1,35 @@
 
 namespace pxsim.visuals {
-    export class GenericComponentView implements IBoardComponent<any> {
+    export class GenericPart implements IBoardComponent<any> {
-        public style: string;
+        public style: string = "";
         public element: SVGElement;
-        defs: SVGElement[];
+        defs: SVGElement[] = [];
-        init(bus: EventBus, state: any, svgEl: SVGSVGElement, gpioPins: string[], otherArgs: string[]): void {
+
+        constructor(partVisual: PartVisualDefinition) {
+            let imgAndSize = mkImageSVG({
+                image: partVisual.image,
+                width: partVisual.width,
+                height: partVisual.height,
+                imageUnitDist: partVisual.pinDist,
+                targetUnitDist: PIN_DIST
+            });
+            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);
         }
-        updateState(): void {
+
-        }
+        //unused
-        updateTheme(): void {
+        init(bus: EventBus, state: any, svgEl: SVGSVGElement, gpioPins: string[], otherArgs: string[]): void { }
-        }
+        updateState(): void { }
+        updateTheme(): void { }
     }
 }

sim/visuals/ledmatrix.ts

@@ -92,8 +92,7 @@ namespace pxsim.visuals {
         }
 
         public moveToCoord(xy: Coord) {
-            let [x, y] = xy;
+            translateEl(this.element, xy);
-            translateEl(this.element, [x, y]);
         }
 
         public updateTheme() {