|
|
|
|
@ -1,65 +1,99 @@ |
|
|
|
|
// browser.ts — IIFE-style browser entry point
|
|
|
|
|
// Built by: bun build src/browser.ts --target browser --outfile public/mono-display.js
|
|
|
|
|
// Attaches everything to window.MonoDisplay so inline <script> tags can use it
|
|
|
|
|
// without ES module syntax.
|
|
|
|
|
|
|
|
|
|
import * as MonoDisplay from "./index"; |
|
|
|
|
import { MonoDisplayFile } from "./file"; |
|
|
|
|
import { cycleTheme } from "./themes"; |
|
|
|
|
import type { ElementType } from "./types"; |
|
|
|
|
import { ElementType } from "./types"; |
|
|
|
|
|
|
|
|
|
// Expose on globalThis (= window in browser, globalThis elsewhere)
|
|
|
|
|
(globalThis as typeof globalThis & { MonoDisplay: typeof MonoDisplay }).MonoDisplay = MonoDisplay; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const W = 120, H = 60; |
|
|
|
|
let file = { sections: [] as any[] }; |
|
|
|
|
let activeSec = null, activeEl = null; |
|
|
|
|
let secCounter = 0, elCounter = 0; |
|
|
|
|
let file: MonoDisplayFile = new MonoDisplayFile([]); |
|
|
|
|
let activeSecIndex:number|null = null, activeElIndex:number|null = null; |
|
|
|
|
let currentFilename = 'untitled'; |
|
|
|
|
let isDirty = false; |
|
|
|
|
|
|
|
|
|
// --- Element type definitions ------------------------------------------------
|
|
|
|
|
type ElFieldMeta = { k: string; l: string; t: string; d: any; full?: boolean }; |
|
|
|
|
type ElFlagMeta = { k: string; l: string }; |
|
|
|
|
type ElFieldMeta = { key: string; label: string; type: string; default: any; full?: boolean }; |
|
|
|
|
type ElFlagMeta = { key: string; label: string }; |
|
|
|
|
const EL_FIELDS: Partial<Record<keyof typeof ElementType, ElFieldMeta[]>> = { |
|
|
|
|
Image2D: [ |
|
|
|
|
{ k: 'xOffset', l: 'X offset', t: 'number', d: 0 }, { k: 'yOffset', l: 'Y offset', t: 'number', d: 0 }, |
|
|
|
|
{ k: 'width', l: 'Width', t: 'number', d: W }, { k: 'height', l: 'Height', t: 'number', d: H }, |
|
|
|
|
{ key: 'xOffset', label: 'X offset', type: 'number', default: 0 }, { key: 'yOffset', label: 'Y offset', type: 'number', default: 0 }, |
|
|
|
|
{ key: 'width', label: 'Width', type: 'number', default: W }, { key: 'height', label: 'Height', type: 'number', default: H }, |
|
|
|
|
], |
|
|
|
|
Animation: [ |
|
|
|
|
{ k: 'xOffset', l: 'X offset', t: 'number', d: 0 }, { k: 'yOffset', l: 'Y offset', t: 'number', d: 0 }, |
|
|
|
|
{ k: 'width', l: 'Width', t: 'number', d: W }, { k: 'height', l: 'Height', t: 'number', d: H }, |
|
|
|
|
{ k: 'updateInterval', l: 'Update interval', t: 'number', d: 12 }, |
|
|
|
|
{ key: 'xOffset', label: 'X offset', type: 'number', default: 0 }, { key: 'yOffset', label: 'Y offset', type: 'number', default: 0 }, |
|
|
|
|
{ key: 'width', label: 'Width', type: 'number', default: W }, { key: 'height', label: 'Height', type: 'number', default: H }, |
|
|
|
|
{ key: 'updateInterval', label: 'Update interval', type: 'number', default: 12 }, |
|
|
|
|
{ key: 'frames', label: 'Frames', type: 'list', default: [] }, |
|
|
|
|
], |
|
|
|
|
ClippedText: [ |
|
|
|
|
{ k: 'text', l: 'Text', t: 'text', d: 'Hello, World!', full: true }, |
|
|
|
|
{ k: 'xOffset', l: 'X offset', t: 'number', d: 0 }, { k: 'yOffset', l: 'Y offset', t: 'number', d: 32 }, |
|
|
|
|
{ k: 'width', l: 'Width', t: 'number', d: W }, { k: 'height', l: 'Height', t: 'number', d: 16 }, |
|
|
|
|
{ key: 'text', label: 'Text', type: 'text', default: 'Hello, World!', full: true }, |
|
|
|
|
{ key: 'xOffset', label: 'X offset', type: 'number', default: 0 }, { key: 'yOffset', label: 'Y offset', type: 'number', default: 32 }, |
|
|
|
|
{ key: 'width', label: 'Width', type: 'number', default: W }, { key: 'height', label: 'Height', type: 'number', default: 16 }, |
|
|
|
|
{ key: 'fontIndex', label: 'Font', type: 'font', default: 'Font 0' }, |
|
|
|
|
], |
|
|
|
|
HScrollText: [ |
|
|
|
|
{ k: 'text', l: 'Text', t: 'text', d: 'Scrolling text - ', full: true }, |
|
|
|
|
{ k: 'xOffset', l: 'X offset', t: 'number', d: 0 }, { k: 'yOffset', l: 'Y offset', t: 'number', d: 32 }, |
|
|
|
|
{ k: 'width', l: 'Width', t: 'number', d: W }, { k: 'height', l: 'Height', t: 'number', d: 16 }, |
|
|
|
|
{ k: 'scrollSpeed', l: 'Scroll speed', t: 'number', d: 50 }, |
|
|
|
|
{ key: 'text', label: 'Text', type: 'text', default: 'Scrolling text - ', full: true }, |
|
|
|
|
{ key: 'xOffset', label: 'X offset', type: 'number', default: 0 }, { key: 'yOffset', label: 'Y offset', type: 'number', default: 32 }, |
|
|
|
|
{ key: 'width', label: 'Width', type: 'number', default: W }, { key: 'height', label: 'Height', type: 'number', default: 16 }, |
|
|
|
|
{ key: 'scrollSpeed', label: 'Scroll speed', type: 'number', default: 50 }, |
|
|
|
|
{ key: 'fontIndex', label: 'Font', type: 'font', default: 'Font 0' }, |
|
|
|
|
], |
|
|
|
|
VScrollText: [ |
|
|
|
|
{ key: 'text', label: 'Text', type: 'text', default: 'Scrolling text - ', full: true }, |
|
|
|
|
{ key: 'xOffset', label: 'X offset', type: 'number', default: 0 }, { key: 'yOffset', label: 'Y offset', type: 'number', default: 32 }, |
|
|
|
|
{ key: 'width', label: 'Width', type: 'number', default: W }, { key: 'height', label: 'Height', type: 'number', default: 16 }, |
|
|
|
|
{ key: 'scrollSpeed', label: 'Scroll speed', type: 'number', default: 50 }, |
|
|
|
|
{ key: 'fontIndex', label: 'Font', type: 'font', default: 'Font 0' }, |
|
|
|
|
], |
|
|
|
|
CurrentTime: [ |
|
|
|
|
{ k: 'xOffset', l: 'X offset', t: 'number', d: 0 }, { k: 'yOffset', l: 'Y offset', t: 'number', d: 8 }, |
|
|
|
|
{ k: 'width', l: 'Width', t: 'number', d: W }, { k: 'height', l: 'Height', t: 'number', d: 16 }, |
|
|
|
|
{ k: 'utcOffsetMinutes', l: 'UTC offset (min)', t: 'number', d: 0 }, |
|
|
|
|
{ key: 'xOffset', label: 'X offset', type: 'number', default: 0 }, { key: 'yOffset', label: 'Y offset', type: 'number', default: 8 }, |
|
|
|
|
{ key: 'width', label: 'Width', type: 'number', default: W }, { key: 'height', label: 'Height', type: 'number', default: 16 }, |
|
|
|
|
{ key: 'utcOffsetMinutes', label: 'UTC offset (min)', type: 'number', default: 0 }, |
|
|
|
|
{ key: 'fontIndex', label: 'Font', type: 'font', default: 'Font 0' }, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
const EL_FLAGS: Partial<Record<keyof typeof ElementType, ElFlagMeta[]>> = { |
|
|
|
|
HScrollText: [{ k: 'endless', l: 'Endless' }, { k: 'invertDirection', l: 'Invert direction' }], |
|
|
|
|
CurrentTime: [{ k: 'clock12h', l: '12h mode' }, { k: 'showHours', l: 'Show hours' }, { k: 'showSeconds', l: 'Show seconds' }], |
|
|
|
|
HScrollText: [{ key: 'endless', label: 'Endless' }, { key: 'invertDirection', label: 'Invert direction' }], |
|
|
|
|
CurrentTime: [{ key: 'clock12h', label: '12h mode' }, { key: 'showHours', label: 'Show hours' }, { key: 'showSeconds', label: 'Show seconds' }], |
|
|
|
|
}; |
|
|
|
|
const EL_TYPES = Object.keys(EL_FIELDS); |
|
|
|
|
const EL_TYPES: ElementType[] = Object.keys(EL_FIELDS).map((x: string) => MonoDisplay.StringToElementType[x as MonoDisplay.ElementTypeName]); |
|
|
|
|
|
|
|
|
|
const DEFAULT_FONTS = [ |
|
|
|
|
"Font 1", |
|
|
|
|
"Font 2", |
|
|
|
|
"Font 3", |
|
|
|
|
"Font 4", |
|
|
|
|
"Font 5", |
|
|
|
|
] |
|
|
|
|
|
|
|
|
|
// --- Confirm dialog -----------------------------------------------------------
|
|
|
|
|
function confirm(msg, buttons) { |
|
|
|
|
function confirm(msg: string, buttons: { |
|
|
|
|
primary?: boolean, |
|
|
|
|
label: string, |
|
|
|
|
action: boolean, |
|
|
|
|
}[]) { |
|
|
|
|
// buttons: [{label,primary,action}]
|
|
|
|
|
return new Promise(resolve => { |
|
|
|
|
const overlay = document.getElementById('confirm-overlay'); |
|
|
|
|
document.getElementById('confirm-msg').textContent = msg; |
|
|
|
|
const overlay: HTMLElement | null = document.getElementById('confirm-overlay'); |
|
|
|
|
const confirm = document.getElementById('confirm-msg'); |
|
|
|
|
if(confirm) confirm.textContent = msg; |
|
|
|
|
const btns = document.getElementById('confirm-btns'); |
|
|
|
|
btns.innerHTML = ''; |
|
|
|
|
if(btns) btns.innerHTML = ''; |
|
|
|
|
buttons.forEach(b => { |
|
|
|
|
const el = document.createElement('button'); |
|
|
|
|
el.className = 'cb' + (b.primary ? ' primary' : ''); |
|
|
|
|
el.textContent = b.label; |
|
|
|
|
el.onclick = () => { overlay.classList.remove('show'); resolve(b.action); }; |
|
|
|
|
btns.appendChild(el); |
|
|
|
|
el.onclick = () => { overlay?.classList.remove('show'); resolve(b.action); }; |
|
|
|
|
if(btns) btns.appendChild(el); |
|
|
|
|
}); |
|
|
|
|
overlay.classList.add('show'); |
|
|
|
|
overlay?.classList.add('show'); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -82,209 +116,265 @@ async function guardDirty() { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// --- Helpers -----------------------------------------------------------------
|
|
|
|
|
function getElementId(elementIndex: number): string { |
|
|
|
|
return `Element-${elementIndex}`; |
|
|
|
|
} |
|
|
|
|
function getSectionId(sectionIndex: number): string { |
|
|
|
|
return `Section-${sectionIndex}`; |
|
|
|
|
} |
|
|
|
|
function newSec() { |
|
|
|
|
secCounter++; |
|
|
|
|
return { |
|
|
|
|
id: 's' + secCounter, name: 'Section ' + secCounter, open: true, |
|
|
|
|
flags: { drawFront: true, clearBuffer: true }, elements: [] |
|
|
|
|
sectionType: MonoDisplay.SectionType.ElementsAlways, |
|
|
|
|
elements: [], |
|
|
|
|
flags: {}, |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
function newEl(type) { |
|
|
|
|
elCounter++; |
|
|
|
|
function newEl(type: MonoDisplay.ElementType) { |
|
|
|
|
const fields = {}; |
|
|
|
|
(EL_FIELDS[type] || []).forEach(f => fields[f.k] = f.d); |
|
|
|
|
const flags = {}; |
|
|
|
|
(EL_FLAGS[type] || []).forEach(f => flags[f.k] = false); |
|
|
|
|
return { id: 'e' + elCounter, type, fields, flags }; |
|
|
|
|
return { type, fields, flags }; |
|
|
|
|
} |
|
|
|
|
function getSec(sectionIndex: number | null) { |
|
|
|
|
return file.sections.find((s,index) => index === sectionIndex) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function getEl(sectionIndex: number, elementIndex: number) { |
|
|
|
|
const section = getSec(sectionIndex); |
|
|
|
|
return section && "elements" in section && section.elements.find((e, index) => index == elementIndex) |
|
|
|
|
} |
|
|
|
|
function getSec(id) { return file.sections.find(s => s.id === id) } |
|
|
|
|
function getEl(secId, elId) { const s = getSec(secId); return s && s.elements.find(e => e.id === elId) } |
|
|
|
|
|
|
|
|
|
// --- Mutations ----------------------------------------------------------------
|
|
|
|
|
function addSection() { |
|
|
|
|
const s = newSec(); file.sections.push(s); |
|
|
|
|
activeSec = s.id; activeEl = null; |
|
|
|
|
markDirty(); render(); triggerPreview(); |
|
|
|
|
activeSecIndex = file.sections.length-1; activeElIndex = null; |
|
|
|
|
markDirty(); renderHTML(); triggerPreview(); |
|
|
|
|
} |
|
|
|
|
function removeSection(sectionIndex:number) { |
|
|
|
|
file.sections = file.sections.filter((section, index) => index !== sectionIndex); |
|
|
|
|
if (activeSecIndex === sectionIndex) { |
|
|
|
|
activeSecIndex = file.sections.length ? file.sections.length - 1 : null; |
|
|
|
|
activeElIndex = null; |
|
|
|
|
} |
|
|
|
|
function removeSection(id) { |
|
|
|
|
file.sections = file.sections.filter(s => s.id !== id); |
|
|
|
|
if (activeSec === id) { activeSec = file.sections.length ? file.sections[file.sections.length - 1].id : null; activeEl = null; } |
|
|
|
|
markDirty(); render(); triggerPreview(); |
|
|
|
|
markDirty(); renderHTML(); triggerPreview(); |
|
|
|
|
} |
|
|
|
|
function toggleSection(id) { |
|
|
|
|
const s = getSec(id); if (!s) return; |
|
|
|
|
s.open = !s.open; activeSec = id; render(); updateMeta(); |
|
|
|
|
s.open = !s.open; activeSecIndex = id; renderHTML(); updateMeta(); |
|
|
|
|
} |
|
|
|
|
function setSectionFlag(flag, val) { |
|
|
|
|
if (!activeSec) return; |
|
|
|
|
const s = getSec(activeSec); if (!s) return; |
|
|
|
|
if (!activeSecIndex) return; |
|
|
|
|
const s = getSec(activeSecIndex); if (!s) return; |
|
|
|
|
s.flags[flag] = val; markDirty(); triggerPreview(); |
|
|
|
|
} |
|
|
|
|
function addElement(secId) { |
|
|
|
|
function addElement(sectionIndex:number) { |
|
|
|
|
const s = getSec(secId); if (!s) return; |
|
|
|
|
const el = newEl(EL_TYPES[0]); s.elements.push(el); |
|
|
|
|
activeSec = secId; activeEl = { secId, elId: el.id }; |
|
|
|
|
markDirty(); render(); triggerPreview(); |
|
|
|
|
activeSecIndex = secId; activeElIndex = { secId, elId: el.id }; |
|
|
|
|
markDirty(); renderHTML(); triggerPreview(); |
|
|
|
|
} |
|
|
|
|
function removeElement(secId, elId) { |
|
|
|
|
const s = getSec(secId); if (!s) return; |
|
|
|
|
|
|
|
|
|
function removeElement(sectionIndex:number, elementIndex:number) { |
|
|
|
|
const s = getSec(sectionIndex); if (!s) return; |
|
|
|
|
s.elements = s.elements.filter(e => e.id !== elId); |
|
|
|
|
if (activeEl && activeEl.secId === secId && activeEl.elId === elId) activeEl = null; |
|
|
|
|
markDirty(); render(); triggerPreview(); |
|
|
|
|
} |
|
|
|
|
function selectElement(secId, elId) { |
|
|
|
|
activeSec = secId; |
|
|
|
|
activeEl = activeEl && activeEl.secId === secId && activeEl.elId === elId ? null : { secId, elId }; |
|
|
|
|
render(); |
|
|
|
|
} |
|
|
|
|
function changeElType(secId, elId, type) { |
|
|
|
|
const el = getEl(secId, elId); if (!el) return; |
|
|
|
|
if (activeElIndex && activeElIndex.secId === secId && activeElIndex.elId === elId) activeElIndex = null; |
|
|
|
|
markDirty(); renderHTML(); triggerPreview(); |
|
|
|
|
} |
|
|
|
|
function selectElement(sectionIndex:number, elementIndex:number) { |
|
|
|
|
activeSecIndex = sectionIndex; |
|
|
|
|
activeElIndex = activeElIndex && |
|
|
|
|
activeElIndex === sectionIndex && |
|
|
|
|
activeElIndex === elementIndex ? |
|
|
|
|
null : elementIndex; |
|
|
|
|
renderHTML(); |
|
|
|
|
} |
|
|
|
|
function changeElType(sectionIndex:number, elementIndex:number, typeString: string) { |
|
|
|
|
const el = getEl(sectionIndex, elementIndex); if (!el) return; |
|
|
|
|
const type = MonoDisplay.StringToElementType[typeString as MonoDisplay.ElementTypeName]; |
|
|
|
|
const fresh = newEl(type); |
|
|
|
|
el.type = type; el.fields = fresh.fields; el.flags = fresh.flags; |
|
|
|
|
markDirty(); render(); triggerPreview(); |
|
|
|
|
} |
|
|
|
|
function setElField(secId, elId, key, val) { |
|
|
|
|
const el = getEl(secId, elId); if (!el) return; |
|
|
|
|
el.fields[key] = val; markDirty(); triggerPreview(); |
|
|
|
|
} |
|
|
|
|
function setElFlag(secId, elId, key, val) { |
|
|
|
|
const el = getEl(secId, elId); if (!el) return; |
|
|
|
|
el.flags[key] = val; markDirty(); triggerPreview(); |
|
|
|
|
markDirty(); renderHTML(); triggerPreview(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// --- Load demo into editor state ---------------------------------------------
|
|
|
|
|
const DEMO_DEFS = [ |
|
|
|
|
{ |
|
|
|
|
label: 'Checkerboard', build() { |
|
|
|
|
const s = newSec(); s.name = 'Checkerboard'; |
|
|
|
|
const el = newEl('Image2D'); |
|
|
|
|
s.elements.push(el); |
|
|
|
|
s.flags = { drawFront: true, clearBuffer: false }; |
|
|
|
|
return [s]; |
|
|
|
|
function setElField(sectionIndex:number, elementIndex:number, key:string, val:any) { |
|
|
|
|
const el = getEl(sectionIndex, elementIndex); if (!el) return; |
|
|
|
|
el[key] = val; |
|
|
|
|
markDirty(); triggerPreview(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: 'Blink', build() { |
|
|
|
|
const s = newSec(); s.name = 'Blink'; s.flags = { drawFront: true, clearBuffer: true }; |
|
|
|
|
const el = newEl('Animation'); el.fields.updateInterval = 12; |
|
|
|
|
s.elements.push(el); return [s]; |
|
|
|
|
function setElFlag(sectionIndex:number, elementIndex:number, key:string, val:any) { |
|
|
|
|
const el = getEl(sectionIndex, elementIndex); if (!el) return; |
|
|
|
|
el.flags[key] = val; |
|
|
|
|
markDirty(); triggerPreview(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: 'Text', build() { |
|
|
|
|
const s = newSec(); s.name = 'Text'; s.flags = { drawFront: true, clearBuffer: true }; |
|
|
|
|
const el = newEl('ClippedText'); el.fields.text = 'Hello, World!'; el.fields.yOffset = 32; |
|
|
|
|
s.elements.push(el); return [s]; |
|
|
|
|
function setSectionType(sectionIndex: number, sectionType: string) { |
|
|
|
|
const sec = getSec(sectionIndex); |
|
|
|
|
if (sec) { |
|
|
|
|
sec.sectionType = MonoDisplay.StringToSectionType[sectionType as MonoDisplay.SectionTypeName]; |
|
|
|
|
if (sec.sectionType == MonoDisplay.SectionType.CustomFont) { |
|
|
|
|
sec.fontData = new Uint8Array(); |
|
|
|
|
} else { |
|
|
|
|
sec.elements = []; |
|
|
|
|
sec.flags = {}; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: 'Scrolltext', build() { |
|
|
|
|
const s = newSec(); s.name = 'Scrolltext'; s.flags = { drawFront: true, clearBuffer: true }; |
|
|
|
|
const el = newEl('HScrollText'); |
|
|
|
|
el.fields.text = 'MONO DISPLAY - scrolling ticker - 🚀 '; |
|
|
|
|
el.fields.yOffset = 32; el.fields.scrollSpeed = 50; |
|
|
|
|
el.flags.endless = true; el.flags.invertDirection = false; |
|
|
|
|
s.elements.push(el); return [s]; |
|
|
|
|
markDirty(); triggerPreview(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: 'Time', build() { |
|
|
|
|
const s = newSec(); s.name = 'Time'; s.flags = { drawFront: true, clearBuffer: true }; |
|
|
|
|
const defs = [ |
|
|
|
|
{ flags: {}, yOffset: 8 }, { flags: { clock12h: true }, xOffset: 40, yOffset: 16 }, |
|
|
|
|
{ flags: { clock12h: true, showHours: true }, yOffset: 24 }, |
|
|
|
|
{ flags: { clock12h: true, showHours: false }, xOffset: 40, yOffset: 32 }, |
|
|
|
|
{ flags: { clock12h: true, showSeconds: true }, xOffset: 120, yOffset: 32 }, |
|
|
|
|
]; |
|
|
|
|
defs.forEach(d => { |
|
|
|
|
const el = newEl('CurrentTime'); |
|
|
|
|
Object.assign(el.fields, { utcOffsetMinutes: 120, xOffset: d.xOffset || 0, yOffset: d.yOffset }); |
|
|
|
|
el.flags = d.flags; s.elements.push(el); |
|
|
|
|
}); |
|
|
|
|
return [s]; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
// --- Preview via MonoDisplayFile (same as original demos) --------------------
|
|
|
|
|
const DEMO_PREVIEWS = { |
|
|
|
|
// --- Load demo into editor state ---------------------------------------------
|
|
|
|
|
const DEMO = { |
|
|
|
|
Checkerboard() { |
|
|
|
|
const { MonoDisplayFile, ElementType } = window.MonoDisplay; |
|
|
|
|
const pixels = new Uint8Array(W * H); |
|
|
|
|
for (let y = 0; y < H; y++)for (let x = 0; x < W; x++)pixels[y * W + x] = (x + y) % 2; |
|
|
|
|
return new MonoDisplayFile({ |
|
|
|
|
width: W, height: H, |
|
|
|
|
elements_always: [{ type: ElementType.Image2D, pixels, width: W, height: H }] |
|
|
|
|
}).toBuffer(); |
|
|
|
|
return new MonoDisplayFile( |
|
|
|
|
[{ |
|
|
|
|
sectionType: MonoDisplay.SectionType.ElementsAlways, |
|
|
|
|
elements: [{ |
|
|
|
|
type: ElementType.Image2D, |
|
|
|
|
image: { |
|
|
|
|
pixels, |
|
|
|
|
height: H, |
|
|
|
|
width: W, |
|
|
|
|
}, |
|
|
|
|
xOffset: 0, yOffset: 0, |
|
|
|
|
}], |
|
|
|
|
flags: { |
|
|
|
|
clearBuffer: true, |
|
|
|
|
drawFront: true, |
|
|
|
|
drawBack: true |
|
|
|
|
} |
|
|
|
|
}]); |
|
|
|
|
}, |
|
|
|
|
Blink() { |
|
|
|
|
const { MonoDisplayFile, ElementType } = window.MonoDisplay; |
|
|
|
|
return new MonoDisplayFile({ |
|
|
|
|
elements_always: { |
|
|
|
|
flags: { drawFront: true, clearBuffer: true }, |
|
|
|
|
return new MonoDisplayFile( |
|
|
|
|
[{ |
|
|
|
|
sectionType: MonoDisplay.SectionType.ElementsAlways, |
|
|
|
|
elements:[{ |
|
|
|
|
type: ElementType.Animation, width: W, height: H, updateInterval: 12, |
|
|
|
|
frames: [{ pixels: new Uint8Array(W * H).fill(1) }, { pixels: new Uint8Array(W * H).fill(0) }] |
|
|
|
|
xOffset: 0, |
|
|
|
|
yOffset: 0, |
|
|
|
|
frames: [{ |
|
|
|
|
pixels: new Uint8Array(W * H).fill(1), |
|
|
|
|
width: 0, |
|
|
|
|
height: 0 |
|
|
|
|
}, { |
|
|
|
|
pixels: new Uint8Array(W * H).fill(0), |
|
|
|
|
width: 0, |
|
|
|
|
height: 0 |
|
|
|
|
}] |
|
|
|
|
}], |
|
|
|
|
flags: { |
|
|
|
|
clearBuffer: true, |
|
|
|
|
drawFront: true, |
|
|
|
|
drawBack: true |
|
|
|
|
} |
|
|
|
|
}).toBuffer(); |
|
|
|
|
}]); |
|
|
|
|
}, |
|
|
|
|
Text() { |
|
|
|
|
const { MonoDisplayFile, ElementType } = window.MonoDisplay; |
|
|
|
|
return new MonoDisplayFile({ |
|
|
|
|
elements_always: { |
|
|
|
|
flags: { drawFront: true, clearBuffer: true }, |
|
|
|
|
elements: [{ type: ElementType.ClippedText, text: 'Hello, World!', xOffset: 0, yOffset: 32, width: W, height: 16 }] |
|
|
|
|
} |
|
|
|
|
}).toBuffer(); |
|
|
|
|
return new MonoDisplayFile( |
|
|
|
|
[{ |
|
|
|
|
sectionType: MonoDisplay.SectionType.ElementsAlways, |
|
|
|
|
elements: [{ |
|
|
|
|
type: ElementType.ClippedText, |
|
|
|
|
fontIndex: 0, |
|
|
|
|
text: 'Hello, World!', |
|
|
|
|
xOffset: 0, yOffset: 32, |
|
|
|
|
width: W, height: 16 |
|
|
|
|
}], |
|
|
|
|
flags: { |
|
|
|
|
clearBuffer: true, |
|
|
|
|
drawFront: true, |
|
|
|
|
drawBack: true |
|
|
|
|
} |
|
|
|
|
}]); |
|
|
|
|
}, |
|
|
|
|
Scrolltext() { |
|
|
|
|
const { MonoDisplayFile, ElementType } = window.MonoDisplay; |
|
|
|
|
return new MonoDisplayFile({ |
|
|
|
|
elements_always: { |
|
|
|
|
flags: { drawFront: true, clearBuffer: true }, |
|
|
|
|
return new MonoDisplayFile( |
|
|
|
|
[{ |
|
|
|
|
sectionType: MonoDisplay.SectionType.ElementsAlways, |
|
|
|
|
elements: [{ |
|
|
|
|
type: ElementType.HScrollText, text: 'MONO DISPLAY - scrolling ticker - 🚀 ', |
|
|
|
|
xOffset: 0, yOffset: 32, width: W, height: 16, scrollSpeed: 50, flags: { endless: true, invertDirection: false } |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
}).toBuffer(); |
|
|
|
|
type: ElementType.HScrollText, |
|
|
|
|
fontIndex: 0, |
|
|
|
|
text: 'MONO DISPLAY - scrolling ticker - 🚀 ', |
|
|
|
|
xOffset: 0, yOffset: 32, |
|
|
|
|
width: W, height: 16, |
|
|
|
|
scrollSpeed: 50, |
|
|
|
|
flags: { |
|
|
|
|
endless: true, |
|
|
|
|
invertDirection: false, |
|
|
|
|
padStart: false, |
|
|
|
|
padEnd: false |
|
|
|
|
} |
|
|
|
|
}], |
|
|
|
|
flags: { |
|
|
|
|
clearBuffer: true, |
|
|
|
|
drawFront: true, |
|
|
|
|
drawBack: true |
|
|
|
|
} |
|
|
|
|
}]); |
|
|
|
|
}, |
|
|
|
|
Time() { |
|
|
|
|
const { MonoDisplayFile, ElementType } = window.MonoDisplay; |
|
|
|
|
return new MonoDisplayFile({ |
|
|
|
|
elements_always: { |
|
|
|
|
flags: { drawFront: true, clearBuffer: true }, elements: [ |
|
|
|
|
{ flags: {}, type: ElementType.CurrentTime, xOffset: 0, yOffset: 8, width: W, height: 16, utcOffsetMinutes: 120 }, |
|
|
|
|
{ flags: { clock12h: true }, type: ElementType.CurrentTime, xOffset: 40, yOffset: 16, width: W, height: 16, utcOffsetMinutes: 120 }, |
|
|
|
|
{ flags: { clock12h: true, showHours: true }, type: ElementType.CurrentTime, xOffset: 0, yOffset: 24, width: W, height: 16, utcOffsetMinutes: 120 }, |
|
|
|
|
{ flags: { clock12h: true, showHours: false }, type: ElementType.CurrentTime, xOffset: 40, yOffset: 32, width: W, height: 16, utcOffsetMinutes: 120 }, |
|
|
|
|
{ flags: { clock12h: true, showSeconds: true }, type: ElementType.CurrentTime, xOffset: 80, yOffset: 32, width: W, height: 16, utcOffsetMinutes: 120 }, |
|
|
|
|
] |
|
|
|
|
return new MonoDisplayFile( |
|
|
|
|
[{ |
|
|
|
|
sectionType: MonoDisplay.SectionType.ElementsAlways, |
|
|
|
|
elements: [ |
|
|
|
|
{ |
|
|
|
|
type: ElementType.CurrentTime, |
|
|
|
|
fontIndex: 0, |
|
|
|
|
flags: {}, |
|
|
|
|
xOffset: 0, yOffset: 8, width: W, height: 16, utcOffsetMinutes: 120 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
type: ElementType.CurrentTime, |
|
|
|
|
fontIndex: 0, |
|
|
|
|
flags: { clock12h: true }, |
|
|
|
|
xOffset: 40, yOffset: 16, width: W, height: 16, utcOffsetMinutes: 120 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
type: ElementType.CurrentTime, |
|
|
|
|
fontIndex: 0, |
|
|
|
|
flags: { clock12h: true, showHours: true }, |
|
|
|
|
xOffset: 0, yOffset: 24, width: W, height: 16, utcOffsetMinutes: 120 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
type: ElementType.CurrentTime, |
|
|
|
|
flags: { clock12h: true, showHours: false }, |
|
|
|
|
fontIndex: 0, |
|
|
|
|
xOffset: 40, yOffset: 32, width: W, height: 16, utcOffsetMinutes: 120 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
type: ElementType.CurrentTime, |
|
|
|
|
fontIndex: 0, |
|
|
|
|
flags: { clock12h: true, showSeconds: true }, |
|
|
|
|
xOffset: 80, yOffset: 32, width: W, height: 16, utcOffsetMinutes: 120 |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
flags: { |
|
|
|
|
clearBuffer: true, |
|
|
|
|
drawFront: true, |
|
|
|
|
drawBack: true |
|
|
|
|
} |
|
|
|
|
}).toBuffer(); |
|
|
|
|
}]); |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
function initDemos() { |
|
|
|
|
const wrap = document.getElementById('demo-btns'); |
|
|
|
|
let activeBtn = null; |
|
|
|
|
DEMO_DEFS.forEach(d => { |
|
|
|
|
Object.entries(DEMO).forEach((entry: [demoName:string, demoFileFunc: () => MonoDisplayFile]) => { |
|
|
|
|
const [demoName, demoFileFunc] = entry; |
|
|
|
|
const btn = document.createElement('button'); |
|
|
|
|
btn.className = 'tb-btn'; btn.textContent = d.label; |
|
|
|
|
btn.className = 'tb-btn'; btn.textContent = demoName; |
|
|
|
|
btn.onclick = async () => { |
|
|
|
|
const ok = await guardDirty(); |
|
|
|
|
if (!ok) return; |
|
|
|
|
// load into editor
|
|
|
|
|
file.sections = d.build(); |
|
|
|
|
activeSec = file.sections[0]?.id || null; activeEl = null; |
|
|
|
|
currentFilename = d.label.toLowerCase(); |
|
|
|
|
file = demoFileFunc(); |
|
|
|
|
activeSecIndex = null; |
|
|
|
|
activeElIndex = null; |
|
|
|
|
currentFilename = demoName.toLowerCase(); |
|
|
|
|
document.getElementById('filename').textContent = currentFilename; |
|
|
|
|
markClean(); render(); |
|
|
|
|
// drive preview with full fidelity build
|
|
|
|
|
if (!window._mdDriver) |
|
|
|
|
window._mdDriver = new window.MonoDisplay.MonoDisplayDriver('canvas_root', { onColor: '#EC0', offColor: '#000', fps: 25 }); |
|
|
|
|
window._mdDriver.load(() => Promise.resolve(DEMO_PREVIEWS[d.label]())); |
|
|
|
|
markClean(); renderHTML(); |
|
|
|
|
triggerPreview(); |
|
|
|
|
if (activeBtn) activeBtn.style.color = ''; |
|
|
|
|
btn.style.color = '#33ff66'; activeBtn = btn; |
|
|
|
|
}; |
|
|
|
|
@ -293,90 +383,189 @@ function initDemos() { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// --- Render -------------------------------------------------------------------
|
|
|
|
|
function render() { |
|
|
|
|
function renderHTML() { |
|
|
|
|
updateMeta(); |
|
|
|
|
const wrap = document.getElementById('sections-wrap'); |
|
|
|
|
if (!file.sections.length) { |
|
|
|
|
wrap.innerHTML = '<div class="empty-state">No sections yet.<br/>Use <b>Add section</b> to get started.</div>'; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
wrap.innerHTML = file.sections.map(s => renderSection(s)).join(''); |
|
|
|
|
wrap.innerHTML = file.sections.map((section, index, sections) => renderHTMLSection(index)).join(''); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function renderSection(s) { |
|
|
|
|
const isActive = activeSec === s.id, isOpen = s.open; |
|
|
|
|
function renderHTMLSection(sectionIndex: number) { |
|
|
|
|
const section = file.sections.at(sectionIndex); |
|
|
|
|
if (!section) return ``; |
|
|
|
|
if (activeSecIndex == null && file.sections.length == 1) activeSecIndex = 0; |
|
|
|
|
const isActive = activeSecIndex === sectionIndex, isOpen = true; |
|
|
|
|
const sectionId = getSectionId(sectionIndex); |
|
|
|
|
switch (section.sectionType) { |
|
|
|
|
case MonoDisplay.SectionType.ElementsAlways: |
|
|
|
|
case MonoDisplay.SectionType.ElementsTimespan: |
|
|
|
|
return ` |
|
|
|
|
<div class="sec-card${isActive ? ' active' : ''}${isOpen ? ' open' : ''}" id="${sectionId}"> |
|
|
|
|
<div class="sec-hdr${isActive ? ' active' : ''}" onclick="toggleSection('${sectionId}')"> |
|
|
|
|
<span class="sec-arrow">▶</span> |
|
|
|
|
<span class="sec-label">${MonoDisplay.SectionTypeToString[section.sectionType]}</span> |
|
|
|
|
<span class="sec-badge">${section.elements.length} el</span> |
|
|
|
|
<button class="x-btn" title="Remove section" onclick="event.stopPropagation();removeSection(${sectionIndex})">X</button> |
|
|
|
|
</div> |
|
|
|
|
${isOpen ? ` |
|
|
|
|
<div class="el-list"> |
|
|
|
|
${section.elements.map((el: MonoDisplay.MonoFormatElement, index:number) => renderHTMLElement(sectionIndex, index, el)).join('')} |
|
|
|
|
<button class="add-el" onclick="addElement('${sectionId}')">+ add element</button> |
|
|
|
|
</div>`: ''}
|
|
|
|
|
</div>`;
|
|
|
|
|
case MonoDisplay.SectionType.CustomFont: { |
|
|
|
|
return ` |
|
|
|
|
<div class="sec-card${isActive ? ' active' : ''}${isOpen ? ' open' : ''}" id="sc-${s.id}"> |
|
|
|
|
<div class="sec-hdr${isActive ? ' active' : ''}" onclick="toggleSection('${s.id}')"> |
|
|
|
|
<div class="sec-card${isActive ? ' active' : ''}${isOpen ? ' open' : ''}" id="${sectionId}"> |
|
|
|
|
<div class="sec-hdr${isActive ? ' active' : ''}" onclick="toggleSection('${sectionId}')"> |
|
|
|
|
<span class="sec-arrow">▶</span> |
|
|
|
|
<span class="sec-label">${esc(s.name)}</span> |
|
|
|
|
<span class="sec-badge">${s.elements.length} el</span> |
|
|
|
|
<button class="x-btn" title="Remove section" onclick="event.stopPropagation();removeSection('${s.id}')">×</button> |
|
|
|
|
<span class="sec-label">Custom Font</span> |
|
|
|
|
<span class="sec-badge">1 el</span> |
|
|
|
|
<button class="x-btn" title="Remove section" onclick="event.stopPropagation();removeSection(${sectionIndex})">X</button> |
|
|
|
|
</div> |
|
|
|
|
${isOpen ? ` |
|
|
|
|
<div class="el-list"> |
|
|
|
|
${s.elements.map(el => renderElement(s.id, el)).join('')} |
|
|
|
|
<button class="add-el" onclick="addElement('${s.id}')">+ add element</button> |
|
|
|
|
? |
|
|
|
|
</div>`: ''}
|
|
|
|
|
</div>`;
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function renderElement(secId, el) { |
|
|
|
|
const isActive = activeEl && activeEl.secId === secId && activeEl.elId === el.id; |
|
|
|
|
const fields = EL_FIELDS[el.type] || []; |
|
|
|
|
const flags = EL_FLAGS[el.type] || []; |
|
|
|
|
function renderHTMLElement(sectionIndex: number, elementIndex: number, el: MonoDisplay.MonoFormatElement) { |
|
|
|
|
const section = file.sections.at(sectionIndex); |
|
|
|
|
const currentSectionElements: any[] = section && "elements" in section ? section.elements: []; |
|
|
|
|
if (activeElIndex == null && currentSectionElements.length == 1) activeElIndex = 0; |
|
|
|
|
const isActive = activeElIndex == elementIndex && activeSecIndex == sectionIndex; |
|
|
|
|
const elementId = getElementId(elementIndex); |
|
|
|
|
const sectionId = getSectionId(sectionIndex); |
|
|
|
|
const typeString = MonoDisplay.ElementTypeToString[el.type]; |
|
|
|
|
const fields = EL_FIELDS[typeString] || []; |
|
|
|
|
const flags = EL_FLAGS[typeString] || []; |
|
|
|
|
const getCustomFonts = ():{fontname:string, index:number}[] => { |
|
|
|
|
return file.sections |
|
|
|
|
.filter(section => section.sectionType == MonoDisplay.SectionType.CustomFont) |
|
|
|
|
.map((fontSection, index) => { |
|
|
|
|
return { |
|
|
|
|
fontname: `CustomFont ${index}`, |
|
|
|
|
index: 0x8000 + index, |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
function renderHTMLField(field: ElFieldMeta) { |
|
|
|
|
switch (field.type) { |
|
|
|
|
case 'text': { |
|
|
|
|
return `<textarea
|
|
|
|
|
onchange="setElField(${sectionIndex},${elementIndex},'${field.key}',this.value)" |
|
|
|
|
>${esc(el[field.key] ?? field.default)}</textarea>` |
|
|
|
|
} |
|
|
|
|
case 'font': { |
|
|
|
|
return `<select onchange="setElField(${sectionIndex},${elementIndex},'${field.key}',+this.value)">
|
|
|
|
|
${DEFAULT_FONTS.map((fontname, index) => `<option value="${index}" >${fontname}</option>`).join("")} |
|
|
|
|
${getCustomFonts().map((k:{fontname:string, index:number}) => `<option value="${k.index}" >${k.fontname}</option>`).join("")} |
|
|
|
|
</select> |
|
|
|
|
`;
|
|
|
|
|
} |
|
|
|
|
default: |
|
|
|
|
return `<input type="number"
|
|
|
|
|
value="${el[field.key as string] ?? field.default}" |
|
|
|
|
onchange="setElField(${sectionIndex},${elementIndex},'${field.key}',+this.value)" |
|
|
|
|
/>`; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
function renderHTMLFlag(el: MonoDisplay.MonoFormatElement & {flags: Record<string, any>}, flag: ElFlagMeta | null) { |
|
|
|
|
if (el.flags && flag) |
|
|
|
|
return ` |
|
|
|
|
<div class="el-item${isActive ? ' active' : ''}" id="eli-${el.id}"> |
|
|
|
|
<div class="el-item-hdr" onclick="selectElement('${secId}','${el.id}')"> |
|
|
|
|
<span class="el-type">${el.type}</span> |
|
|
|
|
<span class="el-name">${elSummary(el)}</span> |
|
|
|
|
<button class="x-btn" title="Remove element" onclick="event.stopPropagation();removeElement('${secId}','${el.id}')">×</button> |
|
|
|
|
<label class="flag-check"> |
|
|
|
|
<input type="checkbox" ${el.flags[flag.key] ? 'checked' : ''} |
|
|
|
|
onchange="setElFlag(${sectionIndex},${elementIndex},'${flag.key}',this.checked)" |
|
|
|
|
/> |
|
|
|
|
${flag.label} |
|
|
|
|
</label>`;
|
|
|
|
|
return ``; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const fieldsGrid = fields.map(field => ` |
|
|
|
|
<div class="field${field.full ? ' full' : ''}"> |
|
|
|
|
<label>${field.label}</label> |
|
|
|
|
${renderHTMLField(field)} |
|
|
|
|
</div>`).join('');
|
|
|
|
|
|
|
|
|
|
const flagsGrid = flags.length ? ` |
|
|
|
|
<div class="field full"> |
|
|
|
|
<label>Flags</label> |
|
|
|
|
<div class="flags-row"> |
|
|
|
|
${flags.map(flag => renderHTMLFlag(el, flag)).join('')} |
|
|
|
|
</div> |
|
|
|
|
${isActive ? ` |
|
|
|
|
</div>`: ``;
|
|
|
|
|
|
|
|
|
|
const activeRender = ` |
|
|
|
|
<div class="el-fields"> |
|
|
|
|
<div class="field full"> |
|
|
|
|
<label>Type</label> |
|
|
|
|
<select onchange="changeElType('${secId}','${el.id}',this.value)"> |
|
|
|
|
${EL_TYPES.map(t => `<option value="${t}"${t === el.type ? ' selected' : ''}>${t}</option>`).join('')} |
|
|
|
|
<select onchange="changeElType(${sectionIndex},${elementIndex},this.value)"> |
|
|
|
|
${EL_TYPES.map(t => `<option value="${MonoDisplay.ElementTypeToString[t]}"${t === el.type ? ' selected' : ''}>${MonoDisplay.ElementTypeToString[t]}</option>`).join('')} |
|
|
|
|
</select> |
|
|
|
|
</div> |
|
|
|
|
<div class="fields-grid"> |
|
|
|
|
${fields.map(f => ` |
|
|
|
|
<div class="field${f.full ? ' full' : ''}"> |
|
|
|
|
<label>${f.l}</label> |
|
|
|
|
${f.t === 'text' |
|
|
|
|
? `<textarea onchange="setElField('${secId}','${el.id}','${f.k}',this.value)">${esc(el.fields[f.k] ?? f.d)}</textarea>` |
|
|
|
|
: `<input type="number" value="${el.fields[f.k] ?? f.d}" onchange="setElField('${secId}','${el.id}','${f.k}',+this.value)"/>` |
|
|
|
|
} |
|
|
|
|
</div>`).join('')}
|
|
|
|
|
${fieldsGrid} |
|
|
|
|
</div> |
|
|
|
|
${flags.length ? ` |
|
|
|
|
<div class="field full"> |
|
|
|
|
<label>Flags</label> |
|
|
|
|
<div class="flags-row"> |
|
|
|
|
${flags.map(f => ` |
|
|
|
|
<label class="flag-check"> |
|
|
|
|
<input type="checkbox" ${el.flags[f.k] ? 'checked' : ''} onchange="setElFlag('${secId}','${el.id}','${f.k}',this.checked)"/> |
|
|
|
|
${f.l} |
|
|
|
|
</label>`).join('')}
|
|
|
|
|
${flagsGrid} |
|
|
|
|
</div>`;
|
|
|
|
|
|
|
|
|
|
return ` |
|
|
|
|
<div class="el-item${isActive ? ' active' : ''}" id="${elementId}"> |
|
|
|
|
<div class="el-item-hdr" onclick="selectElement(${sectionIndex},${elementIndex})"> |
|
|
|
|
<span class="el-type">${MonoDisplay.ElementTypeToString[el.type]}</span> |
|
|
|
|
<span class="el-name">${elSummary(el)}</span> |
|
|
|
|
<button class="x-btn" title="Remove element" onclick="event.stopPropagation();removeElement(${sectionIndex},${elementIndex})">X</button> |
|
|
|
|
</div> |
|
|
|
|
</div>`: ''}
|
|
|
|
|
</div>`: ''}
|
|
|
|
|
${isActive ? activeRender : ``} |
|
|
|
|
</div>`;
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function elSummary(el) { |
|
|
|
|
if (el.fields.text) return esc(el.fields.text.slice(0, 24) + (el.fields.text.length > 24 ? '...' : '')); |
|
|
|
|
return `${el.fields.xOffset ?? 0}, ${el.fields.yOffset ?? 0}`; |
|
|
|
|
function elSummary(el: MonoDisplay.MonoFormatElement) { |
|
|
|
|
switch (el.type) { |
|
|
|
|
case ElementType.ClippedText: |
|
|
|
|
case ElementType.HScrollText: |
|
|
|
|
// case ElementType.VScrollText:
|
|
|
|
|
return esc(el.text.slice(0, 24) + (el.text.length > 24 ? '...' : '')); |
|
|
|
|
case ElementType.CurrentTime: |
|
|
|
|
case ElementType.Image2D: |
|
|
|
|
case ElementType.HorizontalScroll: |
|
|
|
|
case ElementType.VerticalScroll: |
|
|
|
|
return `${el.xOffset ?? 0}, ${el.yOffset ?? 0}`; |
|
|
|
|
|
|
|
|
|
case ElementType.Animation: |
|
|
|
|
case ElementType.Line: |
|
|
|
|
return `${el.type.toString()}`; |
|
|
|
|
default: |
|
|
|
|
return "?"; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
function esc(s) { return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"') } |
|
|
|
|
|
|
|
|
|
function updateMeta() { |
|
|
|
|
const s = activeSec ? getSec(activeSec) : null; |
|
|
|
|
document.getElementById('meta-name').textContent = s ? s.name : '-'; |
|
|
|
|
document.getElementById('meta-count').textContent = s ? s.elements.length + ' element(s)' : '-'; |
|
|
|
|
document.getElementById('flag-drawFront').checked = s ? !!s.flags.drawFront : false; |
|
|
|
|
document.getElementById('flag-clearBuffer').checked = s ? !!s.flags.clearBuffer : false; |
|
|
|
|
const section = getSec(activeSecIndex); |
|
|
|
|
const sectionSelection = document.getElementById('meta-name'); |
|
|
|
|
if (sectionSelection) { |
|
|
|
|
if (section) { |
|
|
|
|
const options = Object.entries(MonoDisplay.SectionTypeToString) |
|
|
|
|
.map((element, index) => `<option value=${element[1]}>${element[1]}</option>`) |
|
|
|
|
.join(""); |
|
|
|
|
sectionSelection.innerHTML = `<select id="section-type-selection" onchange="setSectionType(activeSecIndex, this.value)">
|
|
|
|
|
${options} |
|
|
|
|
</select>`;
|
|
|
|
|
} else { |
|
|
|
|
sectionSelection.innerHTML = "-"; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
document.getElementById('meta-count').textContent = section && "elements" in section ? section.elements.length + ' element(s)' : '-'; |
|
|
|
|
document.getElementById('flag-drawFront').checked = section ? !!section.flags.drawFront : false; |
|
|
|
|
document.getElementById('flag-drawBack').checked = section ? !!section.flags.drawBack : false; |
|
|
|
|
document.getElementById('flag-clearBuffer').checked = section ? !!section.flags.clearBuffer : false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// --- Preview ------------------------------------------------------------------
|
|
|
|
|
@ -387,80 +576,27 @@ function triggerPreview() { |
|
|
|
|
} |
|
|
|
|
function buildPreview() { |
|
|
|
|
if (!window.MonoDisplay) return; |
|
|
|
|
const { MonoDisplayDriver, MonoDisplayFile, ElementType } = window.MonoDisplay; |
|
|
|
|
if (!window._mdDriver) |
|
|
|
|
window._mdDriver = new MonoDisplayDriver('canvas_root', { onColor: '#EC0', offColor: '#000', fps: 25 }); |
|
|
|
|
const s = activeSec ? getSec(activeSec) : file.sections[0]; |
|
|
|
|
if (!s || !s.elements.length) { |
|
|
|
|
window._mdDriver.load(() => Promise.resolve(new MonoDisplayFile({ elements_always: [] }).toBuffer())); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
const elDefs = s.elements.map(el => ({ type: ElementType[el.type], ...el.fields, flags: el.flags })).filter(e => e.type != null); |
|
|
|
|
window._mdDriver.load(() => Promise.resolve( |
|
|
|
|
new MonoDisplayFile({ elements_always: { flags: s.flags, elements: elDefs } }).toBuffer() |
|
|
|
|
)); |
|
|
|
|
window._mdDriver = new MonoDisplay.MonoDisplayDriver('canvas_root', { onColor: '#EC0', offColor: '#000', fps: 25 }); |
|
|
|
|
const s = file.sections[activeSecIndex || 0]; |
|
|
|
|
window._mdDriver.load(() => Promise.resolve(file.toBuffer())); |
|
|
|
|
// now update the sections
|
|
|
|
|
renderHTML(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// --- Load / Export ------------------------------------------------------------
|
|
|
|
|
function parsedToSections(parsedSecs) { |
|
|
|
|
const TYPE_MAP = { 1: 'Image2D', 2: 'Animation', 16: 'ClippedText', 17: 'HScrollText', 32: 'CurrentTime' }; |
|
|
|
|
return parsedSecs |
|
|
|
|
.filter(s => s.sectionType === 1 || s.sectionType === 2) |
|
|
|
|
.map(s => { |
|
|
|
|
secCounter++; |
|
|
|
|
const elements = (s.elements || []).map(el => { |
|
|
|
|
const typeName = TYPE_MAP[el.type]; |
|
|
|
|
if (!typeName) return null; |
|
|
|
|
elCounter++; |
|
|
|
|
let fields = {}, flags = {}; |
|
|
|
|
switch (typeName) { |
|
|
|
|
case 'Image2D': |
|
|
|
|
fields = { xOffset: el.xOffset, yOffset: el.yOffset, width: el.image?.width ?? W, height: el.image?.height ?? H, pixels: el.image?.pixels }; |
|
|
|
|
break; |
|
|
|
|
case 'Animation': |
|
|
|
|
fields = { xOffset: el.xOffset, yOffset: el.yOffset, width: el.width, height: el.height, updateInterval: el.updateInterval, frames: el.frames }; |
|
|
|
|
break; |
|
|
|
|
case 'ClippedText': |
|
|
|
|
fields = { text: el.text, xOffset: el.xOffset, yOffset: el.yOffset, width: el.width, height: el.height }; |
|
|
|
|
break; |
|
|
|
|
case 'HScrollText': |
|
|
|
|
fields = { text: el.text, xOffset: el.xOffset, yOffset: el.yOffset, width: el.width, height: el.height, scrollSpeed: el.scrollSpeed }; |
|
|
|
|
flags = { endless: !!el.flags?.endless, invertDirection: !!el.flags?.invertDirection }; |
|
|
|
|
break; |
|
|
|
|
case 'CurrentTime': |
|
|
|
|
fields = { xOffset: el.xOffset, yOffset: el.yOffset, width: el.width, height: el.height, utcOffsetMinutes: el.utcOffsetMinutes }; |
|
|
|
|
flags = { clock12h: !!el.flags?.clock12h, showHours: !!el.flags?.showHours, showSeconds: !!el.flags?.showSeconds }; |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
return { id: 'e' + elCounter, type: typeName, fields, flags }; |
|
|
|
|
}).filter(Boolean); |
|
|
|
|
return { |
|
|
|
|
id: 's' + secCounter, |
|
|
|
|
name: 'Section ' + secCounter, |
|
|
|
|
open: true, |
|
|
|
|
flags: { drawFront: !!s.flags?.drawFront, clearBuffer: !!s.flags?.clearBuffer }, |
|
|
|
|
elements |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function loadBin(input) { |
|
|
|
|
function loadBin(input: { files: any[]; value: string; }) { |
|
|
|
|
const binFile = input.files[0]; if (!binFile) return; |
|
|
|
|
currentFilename = binFile.name; |
|
|
|
|
document.getElementById('filename').textContent = binFile.name; |
|
|
|
|
const reader = new FileReader(); |
|
|
|
|
reader.onload = e => { |
|
|
|
|
const arrayBuf = e.target.result; |
|
|
|
|
const buf = new Uint8Array(arrayBuf); |
|
|
|
|
if (!window._mdDriver && window.MonoDisplay) |
|
|
|
|
window._mdDriver = new window.MonoDisplay.MonoDisplayDriver('canvas_root', { onColor: '#EC0', offColor: '#000', fps: 25 }); |
|
|
|
|
if (window._mdDriver) window._mdDriver.load(() => Promise.resolve(buf)); |
|
|
|
|
try { |
|
|
|
|
const parsed = new window.MonoDisplay.MonoDisplayParser().parse(arrayBuf); |
|
|
|
|
file.sections = parsedToSections(parsed.sections); |
|
|
|
|
activeSec = file.sections.length ? file.sections[0].id : null; |
|
|
|
|
activeEl = null; |
|
|
|
|
render(); |
|
|
|
|
file = new window.MonoDisplay.MonoDisplayParser().parse(arrayBuf); |
|
|
|
|
activeSecIndex = null; |
|
|
|
|
activeElIndex = null; |
|
|
|
|
triggerPreview(); |
|
|
|
|
} catch (err) { |
|
|
|
|
console.warn('Could not parse sections from bin:', err); |
|
|
|
|
} |
|
|
|
|
@ -470,12 +606,7 @@ function loadBin(input) { |
|
|
|
|
} |
|
|
|
|
function exportBin() { |
|
|
|
|
if (!window.MonoDisplay) { alert('MonoDisplay library not loaded.'); return; } |
|
|
|
|
const { MonoDisplayFile, ElementType } = window.MonoDisplay; |
|
|
|
|
const s = activeSec ? getSec(activeSec) : file.sections[0]; |
|
|
|
|
if (!s) { alert('Nothing to export.'); return; } |
|
|
|
|
const elDefs = s.elements.map(el => ({ type: ElementType[el.type], ...el.fields, flags: el.flags })).filter(e => e.type != null); |
|
|
|
|
const buf = new MonoDisplayFile({ elements_always: { flags: s.flags, elements: elDefs } }).toBuffer(); |
|
|
|
|
const blob = new Blob([buf], { type: 'application/octet-stream' }); |
|
|
|
|
const blob = new Blob([file.toBuffer() as any], { type: 'application/octet-stream' }); |
|
|
|
|
const a = document.createElement('a'); |
|
|
|
|
a.href = URL.createObjectURL(blob); |
|
|
|
|
a.download = currentFilename.replace(/\.bin$/, '') + '.bin'; |
|
|
|
|
@ -491,10 +622,10 @@ Object.assign(window, { |
|
|
|
|
loadBin, exportBin, |
|
|
|
|
addSection, removeSection, toggleSection, setSectionFlag, |
|
|
|
|
addElement, removeElement, selectElement, |
|
|
|
|
changeElType, setElField, setElFlag, |
|
|
|
|
changeElType, setElField, setElFlag, setSectionType, |
|
|
|
|
cycleTheme, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
render(); |
|
|
|
|
triggerPreview(); |
|
|
|
|
if (window.MonoDisplay) { initDemos(); } |
|
|
|
|
else { const iv = setInterval(() => { if (window.MonoDisplay) { clearInterval(iv); initDemos(); } }, 100); } |
|
|
|
|
|
flop
3 weeks ago