namespace pxsim.visuals { // For the intructions export function mkLCDPart(xy: Coord = [0, 0]): SVGElAndSize { let [x, y] = xy; let l = x; let t = y; let w = LCD_PART_WIDTH; let h = LCD_PART_HEIGHT; let img = svg.elt("image"); svg.hydrate(img, { class: "sim-lcd", x: l, y: t, width: w, height: h, href: svg.toDataUri(LCD_PART) }); return { el: img, x: l, y: t, w: w, h: h }; } export class LCDView implements IBoardPart { style: string; element: SVGElement; defs: SVGElement[]; image: SVGSVGElement; private backlight: SVGGElement; private screen: SVGGElement; private part: SVGElAndSize; private bus: EventBus; private state: LCDState; constructor() { } public init(bus: EventBus, state: LCDState, svgEl: SVGSVGElement, otherParams: Map): void { this.state = state this.bus = bus; this.initDom(); this.updateState(); } initDom() { this.element = svg.elt("g"); this.image = new DOMParser().parseFromString(LCD_PART, "image/svg+xml").querySelector("svg") as SVGSVGElement; svg.hydrate(this.image, { class: "sim-lcd", width: LCD_PART_WIDTH, height: LCD_PART_HEIGHT, }); this.screen = this.image.getElementById('ecran') as SVGGElement; this.backlight = this.image.getElementById('backlight') as SVGGElement; this.backlight.style.fill = "#6e7d6e"; this.element.appendChild(this.image); } setChar(column: number, line: number, value: string): void { let _case = this.image.getElementById("case"+line+""+column+"_text") as SVGTextElement; _case.innerHTML = value.charAt(0); } public moveToCoord(xy: Coord) { translateEl(this.element, [xy[0], xy[1]]); } public updateTheme() { } public updateState() { for (let line = 0; line < this.state.lines; line++) { for (let column = 0; column < this.state.columns; column++) { if(!!this.state.text && !!this.state.text[line] && !!this.state.text[line][column]) this.setChar(column, line, this.state.text[line][column]); } } this.backlight.style.fill = this.state.backLightColor; } } const LCD_PART_WIDTH = 322.79001; const LCD_PART_HEIGHT = 129.27348; const LCD_PART = ` `; }