namespace pxsim.visuals {
type SVGStylable = any;
const PHOTOCELL_PART_XOFF = -8;
const PHOTOCELL_PART_YOFF = -7;
const PHOTOCELL_PART_WIDTH = 68;
const PHOTOCELL_PART_HEIGHT = 180;
const PHOTOCELL_PART = `
`;
// For the intructions
export function mkPhotoCellPart(xy: Coord = [0, 0]): SVGElAndSize {
let [x, y] = xy;
let l = x + PHOTOCELL_PART_XOFF;
let t = y + PHOTOCELL_PART_YOFF;
let w = PHOTOCELL_PART_WIDTH;
let h = PHOTOCELL_PART_HEIGHT;
let img = svg.elt("image");
svg.hydrate(img, {
class: "sim-led", x: l, y: t, width: w, height: h,
href: svg.toDataUri(PHOTOCELL_PART)
});
return { el: img, x: l, y: t, w: w, h: h };
}
export class PhotoCellView implements IBoardPart {
element: SVGElement;
defs: SVGElement[];
//private led: SVGPathElement;
private text: SVGTSpanElement;
private parsePinString: (s: string) => Pin;
private color: string = "rgb(0,255,0)"; // green color by default
private part: SVGElAndSize;
private bus: EventBus;
public style: string;
private pin: Pin;
private currentValue: number;
private currentMode: PinFlags;
constructor(parsePinString: (s: string) => Pin) {
this.parsePinString = parsePinString;
}
public init(bus: EventBus, state: EdgeConnectorState, svgEl: SVGSVGElement, otherParams: Map): void {
this.pin = this.parsePinString(otherParams["name"] || otherParams["pin"]);
this.bus = bus;
this.initDom();
this.updateState();
}
initDom() {
this.element = svg.elt("g");
const image = new DOMParser().parseFromString(PHOTOCELL_PART, "image/svg+xml").querySelector("svg") as SVGSVGElement;
svg.hydrate(image, {
class: "sim-led", width: PHOTOCELL_PART_WIDTH, height: PHOTOCELL_PART_HEIGHT,
});
//this.led = image.getElementById('LED') as SVGPathElement;
this.text = image.getElementById('tspan4522') as SVGTSpanElement;
this.element.appendChild(image);
// TODO: slider
this.element.onclick = () => {
this.pin.value += 256;
this.pin.value = this.pin.value % 1024;
runtime.queueDisplayUpdate();
}
}
public moveToCoord(xy: Coord) {
translateEl(this.element, [xy[0] + PHOTOCELL_PART_XOFF, xy[1] + PHOTOCELL_PART_YOFF]);
}
public updateTheme() {
}
public updateState() {
if (this.currentValue === this.pin.value && this.currentMode == this.pin.mode)
return;
this.currentValue = this.pin.value;
this.currentMode = this.pin.mode;
this.text.textContent = `~${this.currentValue}`
}
}
}