in sim/visuals/board.ts [875:958]
private buildDom() {
this.element = new DOMParser().parseFromString(BOARD_SVG, "image/svg+xml").querySelector("svg") as SVGSVGElement;
svg.hydrate(this.element, {
"version": "1.0",
"viewBox": `0 0 ${MB_WIDTH} ${MB_HEIGHT}`,
"class": "sim",
"x": "0px",
"y": "0px",
"width": MB_WIDTH + "px",
"height": MB_HEIGHT + "px",
});
this.style = <SVGStyleElement>svg.child(this.element, "style", {});
this.style.textContent = MB_STYLE;
this.defs = <SVGDefsElement>svg.child(this.element, "defs", {});
this.g = <SVGGElement>svg.elt("g");
this.element.appendChild(this.g);
// filters
let glow = svg.child(this.defs, "filter", { id: "filterglow", x: "-5%", y: "-5%", width: "120%", height: "120%" });
svg.child(glow, "feGaussianBlur", { stdDeviation: "5", result: "glow" });
let merge = svg.child(glow, "feMerge", {});
for (let i = 0; i < 3; ++i) svg.child(merge, "feMergeNode", { in: "glow" })
let neopixelglow = svg.child(this.defs, "filter", { id: "neopixelglow", x: "-300%", y: "-300%", width: "600%", height: "600%" });
svg.child(neopixelglow, "feGaussianBlur", { stdDeviation: "4.3", result: "coloredBlur" });
let neopixelmerge = svg.child(neopixelglow, "feMerge", {});
svg.child(neopixelmerge, "feMergeNode", { in: "coloredBlur" })
svg.child(neopixelmerge, "feMergeNode", { in: "coloredBlur" })
svg.child(neopixelmerge, "feMergeNode", { in: "SourceGraphic" })
const neopixelState = (board() as any as LightBoard).neopixelState;
if (neopixelState) {
for (let i = 0; i < neopixelState.length; i++) {
// let p_outer = svg.title(this.element.getElementById(`LED${i}_OUTER`) as SVGPathElement, "NeoPixel " + i);
let p_inner = svg.title(this.element.getElementById(`LED${i}`) as SVGPathElement, "NeoPixel " + i);
}
}
const btnids = ["BTN_A", "BTN_B"];
this.buttonsOuter = btnids.map(n => {
let btn = this.element.getElementById(n + "_OUTER") as SVGElement;
let label = "";
if (n === "BTN_A") {
label = "A";
} else {
label = "B";
}
accessibility.makeFocusable(btn);
accessibility.setAria(btn, "button", label);
return btn;
});
this.buttonsOuter.forEach(b => pxsim.U.addClass(b, "sim-button-outer"));
this.buttons = btnids.map(n => this.element.getElementById(n + "_INNER") as SVGElement);
this.buttons.forEach(b => pxsim.U.addClass(b, "sim-button"));
this.pins = pinNames.map((pin, i) => {
const n = pin.name;
let p = this.element.getElementById(n) as SVGElement;
if (p) {
pxsim.U.addClass(p, "sim-pin");
if (pin.tooltip)
svg.hydrate(p, { title: pin.tooltip })
}
return p;
});
this.pinControls = {};
// BTN A+B
const outerBtn = (left: number, top: number, label: string) => {
const button = this.mkBtn(left, top, label);
this.buttonsOuter.push(button.outer);
this.buttons.push(button.inner);
return button;
}
let ab = outerBtn(165, MB_HEIGHT - 15, "A+B");
let abtext = svg.child(ab.outer, "text", { x: 163, y: MB_HEIGHT - 18, class: "sim-text" }) as SVGTextElement;
abtext.textContent = "A+B";
(<any>this.buttonsOuter[2]).style.visibility = "hidden";
(<any>this.buttons[2]).style.visibility = "hidden";
}