Merge branch 'arduino' into generic-part

sim/definitions.ts

@@ -48,6 +48,7 @@ namespace pxsim {
         width: number,
         height: number,
         pinDist: number,
+        extraColumnOffset?: number,
         firstPin: [number, number],
     }
     export interface PartDefinition {
@@ -167,8 +168,9 @@ namespace pxsim {
                 image: "/static/hardware/speaker.svg",
                 width: 500,
                 height: 500,
-                firstPin: [110, 135],
+                firstPin: [180, 135],
                 pinDist: 70,
+                extraColumnOffset: 1,
             },
             breadboardColumnsNeeded: 5,
             breadboardStartRow: "f",

sim/instructions/instructions.ts

@@ -278,14 +278,18 @@ namespace pxsim.instructions {
         div.appendChild(svgEl);
         return div;
     }
-    function mkCmpDiv(type: "wire" | string, opts: mkCmpDivOpts): HTMLElement {
+    function mkCmpDiv(cmp: "wire" | string | PartVisualDefinition, opts: mkCmpDivOpts): HTMLElement {
         let el: visuals.SVGElAndSize;
-        if (type == "wire") {
+        if (cmp == "wire") {
             //TODO: support non-croc wire parts
             el = visuals.mkWirePart([0, 0], opts.wireClr || "red", true);
-        } else {
+        } else if (typeof cmp == "string") {
-            let cnstr = builtinComponentPartVisual[type];
+            let builtinVis = <string>cmp;
+            let cnstr = builtinComponentPartVisual[builtinVis];
             el = cnstr([0, 0]);
+        } else {
+            let partVis = <PartVisualDefinition> cmp;
+            el = visuals.mkGenericPartSVG(partVis);
         }
         return wrapSvg(el, opts);
     }
@@ -414,7 +418,8 @@ namespace pxsim.instructions {
             if (cmps) {
                 cmps.forEach(cmpInst => {
                     let cmp = board.addComponent(cmpInst)
-                    let rowCol: BBRowCol = [`${cmpInst.breadboardStartRow}`, `${cmpInst.breadboardStartColumn}`];
+                    let colOffset = (<any>cmpInst.visual).breadboardStartColIdx || 0;
+                    let rowCol: BBRowCol = [`${cmpInst.breadboardStartRow}`, `${colOffset + cmpInst.breadboardStartColumn}`];
                     //last step
                     if (i === step) {
                         board.highlightBreadboardPin(rowCol);
@@ -455,18 +460,13 @@ namespace pxsim.instructions {
             if (c.visual === "buttonpair") {
                 quant = 2;
             }
-            if (typeof c.visual === "string") {
+            let cmp = mkCmpDiv(c.visual, {
-                let builtinVisual = <string>c.visual;
+                left: QUANT_LBL(quant),
-                let cmp = mkCmpDiv(builtinVisual, {
+                leftSize: QUANT_LBL_SIZE,
-                    left: QUANT_LBL(quant),
+                cmpScale: PARTS_CMP_SCALE,
-                    leftSize: QUANT_LBL_SIZE,
+            });
-                    cmpScale: PARTS_CMP_SCALE,
+            addClass(cmp, "partslist-cmp");
-                });
+            panel.appendChild(cmp);
-                addClass(cmp, "partslist-cmp");
-                panel.appendChild(cmp);
-            } else {
-                //TODO: handle generic components
-            }
         });
 
         // wires
@@ -537,19 +537,14 @@ namespace pxsim.instructions {
             }
             locs.forEach((l, i) => {
                 let [row, col] = l;
-                if (typeof c.visual === "string") {
+                let cmp = mkCmpDiv(c.visual, {
-                    let builtinVisual = <string>c.visual;
+                    top: `(${row},${col})`,
-                    let cmp = mkCmpDiv(builtinVisual, {
+                    topSize: LOC_LBL_SIZE,
-                        top: `(${row},${col})`,
+                    cmpHeight: REQ_CMP_HEIGHT,
-                        topSize: LOC_LBL_SIZE,
+                    cmpScale: REQ_CMP_SCALE
-                        cmpHeight: REQ_CMP_HEIGHT,
+                })
-                        cmpScale: REQ_CMP_SCALE
+                addClass(cmp, "cmp-div");
-                    })
+                reqsDiv.appendChild(cmp);
-                    addClass(cmp, "cmp-div");
-                    reqsDiv.appendChild(cmp);
-                } else {
-                    //TODO: generic component
-                }
             });
         });
 

sim/visuals/boardhost.ts

@@ -149,6 +149,7 @@ namespace pxsim.visuals {
 
         public addComponent(cmpDesc: CmpInst): IBoardComponent<any> {
             let cmp: IBoardComponent<any> = null;
+            let colOffset = 0;
             if (typeof cmpDesc.visual === "string") {
                 let builtinVisual = cmpDesc.visual as string;
                 let cnstr = builtinComponentSimVisual[builtinVisual];
@@ -158,13 +159,14 @@ namespace pxsim.visuals {
             } else {
                 let vis = cmpDesc.visual as PartVisualDefinition;
                 cmp = new GenericPart(vis);
+                colOffset = vis.extraColumnOffset || 0;
             }
             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 rowCol = <BBRowCol>[`${cmpDesc.breadboardStartRow}`, `${colOffset + cmpDesc.breadboardStartColumn}`];
             let coord = this.getBBCoord(rowCol);
             cmp.moveToCoord(coord);
             let getCmpClass = (type: string) => `sim-${type}-cmp`;

sim/visuals/genericpart.ts

@@ -1,18 +1,23 @@
 
 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 = mkImageSVG({
+            let imgAndSize = mkGenericPartSVG(partVisual);
-                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;