adds support for generic components
This commit is contained in:
		@@ -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,
 | 
			
		||||
 
 | 
			
		||||
@@ -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);
 | 
			
		||||
                //TODO: support generic parts
 | 
			
		||||
                cmp = 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}`, `${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 {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,16 +1,35 @@
 | 
			
		||||
 | 
			
		||||
namespace pxsim.visuals {
 | 
			
		||||
    export class GenericComponentView implements IBoardComponent<any> {
 | 
			
		||||
        public style: string;
 | 
			
		||||
    export class GenericPart implements IBoardComponent<any> {
 | 
			
		||||
        public style: string = "";
 | 
			
		||||
        public element: SVGElement;
 | 
			
		||||
        defs: SVGElement[];
 | 
			
		||||
        init(bus: EventBus, state: any, svgEl: SVGSVGElement, gpioPins: string[], otherArgs: string[]): void {
 | 
			
		||||
        defs: SVGElement[] = [];
 | 
			
		||||
 | 
			
		||||
        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 {
 | 
			
		||||
        }
 | 
			
		||||
        updateTheme(): void {
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        //unused
 | 
			
		||||
        init(bus: EventBus, state: any, svgEl: SVGSVGElement, gpioPins: string[], otherArgs: string[]): void { }
 | 
			
		||||
        updateState(): void { }
 | 
			
		||||
        updateTheme(): void { }
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
@@ -92,8 +92,7 @@ namespace pxsim.visuals {
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        public moveToCoord(xy: Coord) {
 | 
			
		||||
            let [x, y] = xy;
 | 
			
		||||
            translateEl(this.element, [x, y]);
 | 
			
		||||
            translateEl(this.element, xy);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        public updateTheme() {
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user