CTT
/
libmonoformat
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: rework most of the UI

Browse Source
backup
flop 3 weeks ago
parent 5c6a665b45
commit 85ca7dd318
4 changed files with 595 additions and 525 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      ts/index.html
  2. 729
      ts/src/browser.ts
  3. 166
      ts/src/file.ts
  4. 219
      ts/src/types.ts

6
ts/index.html
Unescape View File

@ -68,7 +68,11 @@
<input type="checkbox" id="flag-drawFront" onchange="setSectionFlag('drawFront',this.checked)" />
drawFront
</label>
<label class="flag-check" style="margin-left:8px">
<label class="flag-check" style="margin-left:-8px">
<input type="checkbox" id="flag-drawBack" onchange="setSectionFlag('drawBack',this.checked)" />
drawBack
</label>
<label class="flag-check" style="margin-left:-8px">
<input type="checkbox" id="flag-clearBuffer" onchange="setSectionFlag('clearBuffer',this.checked)" />
clearBuffer
</label>

729
ts/src/browser.ts
Unescape View File

@ -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(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();
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;
}
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();
if (activeElIndex && activeElIndex.secId === secId && activeElIndex.elId === elId) activeElIndex = null;
markDirty(); renderHTML(); triggerPreview();
}
function selectElement(secId, elId) {
activeSec = secId;
activeEl = activeEl && activeEl.secId === secId && activeEl.elId === elId ? null : { secId, elId };
render();
function selectElement(sectionIndex:number, elementIndex:number) {
activeSecIndex = sectionIndex;
activeElIndex = activeElIndex &&
activeElIndex === sectionIndex &&
activeElIndex === elementIndex ?
null : elementIndex;
renderHTML();
}
function changeElType(secId, elId, type) {
const el = getEl(secId, elId); if (!el) return;
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();
markDirty(); renderHTML(); triggerPreview();
}
function setElField(secId, elId, key, val) {
const el = getEl(secId, elId); if (!el) return;
el.fields[key] = val; markDirty(); triggerPreview();
function setElField(sectionIndex:number, elementIndex:number, key:string, val:any) {
const el = getEl(sectionIndex, elementIndex); if (!el) return;
el[key] = val;
markDirty(); triggerPreview();
}
function setElFlag(secId, elId, key, val) {
const el = getEl(secId, elId); if (!el) return;
el.flags[key] = val; markDirty(); triggerPreview();
function setElFlag(sectionIndex:number, elementIndex:number, key:string, val:any) {
const el = getEl(sectionIndex, elementIndex); if (!el) return;
el.flags[key] = val;
markDirty(); 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];
}
},
{
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 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: '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];
}
},
{
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];
}
},
{
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];
}
},
];
markDirty(); triggerPreview();
}
}
// --- 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 },
elements: [{
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) }]
}]
}
}).toBuffer();
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
}
}]);
},
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 },
]
}
}).toBuffer();
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
}
}]);
},
};
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;
return `
<div class="sec-card${isActive ? ' active' : ''}${isOpen ? ' open' : ''}" id="sc-${s.id}">
<div class="sec-hdr${isActive ? ' active' : ''}" onclick="toggleSection('${s.id}')">
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="${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] || [];
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>
</div>
${isActive ? `
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 `
<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>
</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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;') }
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); }

166
ts/src/file.ts
Unescape View File

@ -4,41 +4,68 @@
import { packedSize, packPixels, pad32 } from "./helper";
import { MONOFORMAT_MAGIC_HEADER } from "./parser";
import { ElementType, SectionType, type AnimationElement, type ClippedTextElement, type CurrentTimeElement, type DrawElement, type ElementsAlwaysDescriptor, type HScrollElement, type HScrollTextElement, type Image2DElement, type LineElement, type MonoDisplayFileDescriptor, type ScrollElementFlags, type SectionFlags, type VScrollElement } from "./types";
import {
ElementType,
SectionType,
type MonoFormatAnimation,
type MonoFormatClippedText,
type MonoFormatCurrentTime,
type MonoFormatCustomFont,
type MonoFormatElement,
type MonoFormatElementsAlways,
type MonoFormatElementsTimespan,
type MonoFormatFile,
type MonoFormatHScroll,
type MonoFormatHScrollText,
type MonoFormatImage2D,
type MonoFormatLine,
type MonoFormatScrollElementFlags,
type MonoFormatSection,
type MonoFormatVScroll,
} from "./types";
/**
* Encodes a MonoDisplayFileDescriptor to a valid .bin ArrayBuffer.
*
* elements_always → Section type 1 (ElementsAlways).
* elements_always -> Section type 1 (ElementsAlways).
* Pass a DrawElement[] or { flags, elements }.
* Default flags: drawFront=true, drawBack=false, clearBuffer=false.
*
* PLAN: encode ElementsTimespan sections, CustomFont sections.
*/
export class MonoDisplayFile {
private desc: MonoDisplayFileDescriptor;
export class MonoDisplayFile implements MonoFormatFile {
constructor(public sections: MonoFormatSection[], public version: number = 1) {
constructor(descriptor: MonoDisplayFileDescriptor) {
this.desc = descriptor;
}
toBuffer(): Uint8Array<ArrayBufferLike> {
const sections: Uint8Array[] = [];
// Section 1: elements always
const alwaysDesc = this.desc.elements_always;
if (alwaysDesc) {
const isArray = Array.isArray(alwaysDesc);
const elements = isArray ? alwaysDesc as DrawElement[] : (alwaysDesc as ElementsAlwaysDescriptor).elements;
const flags = isArray ? undefined : (alwaysDesc as ElementsAlwaysDescriptor).flags;
sections.push(this.#encodeElementsSection(SectionType.ElementsAlways, flags, elements));
for (const section of this.sections) {
switch (section.sectionType) {
case SectionType.ElementsAlways:
{
sections.push(this.#encodeElementsAlwaysSection(section));
break;
}
case SectionType.ElementsTimespan:
{
sections.push(this.#encodeElementsTimespanSection(section));
break;
}
case SectionType.CustomFont: {
sections.push(this.#encodeCustomFont(section));
break;
}
}
}
// File header (12 bytes)
const hdrBuf = new ArrayBuffer(12);
const hdrView = new DataView(hdrBuf);
hdrView.setUint32(0, MONOFORMAT_MAGIC_HEADER, true);
hdrView.setUint32(4, 1, true); // version
hdrView.setUint32(4, this.version, true); // version
hdrView.setUint16(8, sections.length, true);
hdrView.setUint16(10, 0, true); // reserved
@ -47,36 +74,85 @@ export class MonoDisplayFile {
// --- section encoders ---
#encodeElementsSection(
type: SectionType.ElementsAlways | SectionType.ElementsTimespan,
flags: SectionFlags | undefined,
elements: DrawElement[],
#encodeElementsAlwaysSection(
section: MonoFormatElementsAlways,
): Uint8Array {
const flagBits =
(flags?.drawFront ?? true ? 0x01 : 0) |
(flags?.drawBack ?? false ? 0x02 : 0) |
(flags?.clearBuffer ?? false ? 0x04 : 0);
(section.flags.drawFront ?? true ? 0x01 : 0) |
(section.flags.drawBack ?? false ? 0x02 : 0) |
(section.flags.clearBuffer ?? false ? 0x04 : 0);
const encodedEls = elements.map(el => this.#encodeElement(el));
const encodedEls = section.elements.map(el => this.#encodeElement(el));
const sectionDataSize = 4 + encodedEls.reduce((s, e) => s + e.byteLength, 0);
// sectionSize (in header) = 4 (header) + sectionDataSize
const sectionSize = 4 + sectionDataSize;
const hdr = new Uint8Array(4 + 4); // section header (4) + section sub-header (4)
const v = new DataView(hdr.buffer);
v.setUint8(0, type);
v.setUint8(0, section.sectionType);
v.setUint8(1, sectionSize & 0xFF);
v.setUint8(2, (sectionSize >> 8) & 0xFF);
v.setUint8(3, (sectionSize >> 16) & 0xFF);
v.setUint16(4, flagBits, true); // flags
v.setUint16(6, section.elements.length, true); // numElements
return this.#concat(hdr, ...encodedEls);
}
#encodeElementsTimespanSection(
section: MonoFormatElementsTimespan,
): Uint8Array {
const flagBits =
(section.flags.drawFront ?? true ? 0x01 : 0) |
(section.flags.drawBack ?? false ? 0x02 : 0) |
(section.flags.clearBuffer ?? false ? 0x04 : 0);
const encodedEls = section.elements.map(el => this.#encodeElement(el));
const sectionDataSize = 4 + encodedEls.reduce((s, e) => s + e.byteLength, 0);
// sectionSize (in header) = 4 (header) + sectionDataSize
const sectionSize = 4 + sectionDataSize;
const hdr = new Uint8Array(4 + 5*4); // section header (4) + section sub-header (4)
const v = new DataView(hdr.buffer);
v.setUint8(0, section.sectionType);
v.setUint8(1, sectionSize & 0xFF);
v.setUint8(2, (sectionSize >> 8) & 0xFF);
v.setUint8(3, (sectionSize >> 16) & 0xFF);
v.setUint16(4, flagBits, true); // flags
v.setUint16(6, elements.length, true); // numElements
v.setUint16(6, section.elements.length, true); // numElements
// section.startTimestamp.valueOf()
const startTimestampLow = 0, startTimestampHigh = 0, endTimestampLow = 0, endTimestampHigh = 0;
v.setUint32(8, startTimestampLow, true); // flags
v.setUint32(12, startTimestampHigh, true); // numElements
v.setUint32(16, endTimestampLow, true); // numElements
v.setUint32(20, endTimestampHigh, true); // numElements
return this.#concat(hdr, ...encodedEls);
}
#encodeCustomFont(
section: MonoFormatCustomFont,
): Uint8Array {
const sectionSize = 4 + section.fontData.length;
const hdr = new Uint8Array(4 + 4); // section header (4) + section sub-header (4)
const v = new DataView(hdr.buffer);
v.setUint8(0, section.sectionType);
v.setUint8(1, sectionSize & 0xFF);
v.setUint8(2, (sectionSize >> 8) & 0xFF);
v.setUint8(3, (sectionSize >> 16) & 0xFF);
v.setUint8(4, section.fontData.length & 0xFF);
v.setUint8(5, (section.fontData.length >> 8) & 0xFF);
v.setUint8(6, (section.fontData.length >> 16) & 0xFF);
v.setUint8(7, 0);
return this.#concat(hdr, section.fontData);
}
// --- element encoders ---
#encodeElement(el: DrawElement): Uint8Array {
#encodeElement(el: MonoFormatElement): Uint8Array {
switch (el.type) {
case ElementType.Image2D: return this.#encodeImage2D(el);
case ElementType.Animation: return this.#encodeAnimation(el);
@ -90,8 +166,8 @@ export class MonoDisplayFile {
}
}
#encodeImage2D(el: Image2DElement): Uint8Array {
const packed = packPixels(el.pixels, el.width, el.height);
#encodeImage2D(el: MonoFormatImage2D): Uint8Array {
const packed = packPixels(el.image.pixels, el.image.width, el.image.height);
const fixed = 12; // bytes before pixel data
const rawSize = fixed + packed.byteLength;
const total = rawSize + pad32(rawSize);
@ -100,14 +176,14 @@ export class MonoDisplayFile {
v.setUint16(0, ElementType.Image2D, true);
v.setUint16(2, el.xOffset ?? 0, true);
v.setUint16(4, el.yOffset ?? 0, true);
v.setUint16(6, el.width, true);
v.setUint16(8, el.height, true);
v.setUint16(6, el.image.width, true);
v.setUint16(8, el.image.height, true);
v.setUint16(10, 0, true); // reserved
out.set(packed, 12);
return out;
}
#encodeAnimation(el: AnimationElement): Uint8Array {
#encodeAnimation(el: MonoFormatAnimation): Uint8Array {
const frameBytes = packedSize(el.width, el.height);
const fixed = 16;
const rawSize = fixed + el.frames.length * frameBytes;
@ -130,7 +206,7 @@ export class MonoDisplayFile {
return out;
}
#encodeScrollFlags(f: ScrollElementFlags | undefined): number {
#encodeScrollFlags(f: MonoFormatScrollElementFlags | undefined): number {
return (
(f?.endless ? 0x01 : 0) |
(f?.invertDirection ? 0x02 : 0) |
@ -139,8 +215,8 @@ export class MonoDisplayFile {
);
}
#encodeHScroll(el: HScrollElement): Uint8Array {
const packed = packPixels(el.pixels, el.contentWidth, el.height);
#encodeHScroll(el: MonoFormatHScroll): Uint8Array {
const packed = packPixels(el.content.pixels, el.contentWidth, el.height);
const fixed = 16;
const rawSize = fixed + packed.byteLength;
const total = rawSize + pad32(rawSize);
@ -159,8 +235,8 @@ export class MonoDisplayFile {
return out;
}
#encodeVScroll(el: VScrollElement): Uint8Array {
const packed = packPixels(el.pixels, el.width, el.contentHeight);
#encodeVScroll(el: MonoFormatVScroll): Uint8Array {
const packed = packPixels(el.content.pixels, el.width, el.contentHeight);
const fixed = 16;
const rawSize = fixed + packed.byteLength;
const total = rawSize + pad32(rawSize);
@ -179,7 +255,7 @@ export class MonoDisplayFile {
return out;
}
#encodeLine(el: LineElement): Uint8Array {
#encodeLine(el: MonoFormatLine): Uint8Array {
// 12 bytes, already 32-bit aligned
const out = new Uint8Array(12);
const v = new DataView(out.buffer);
@ -193,7 +269,7 @@ export class MonoDisplayFile {
return out;
}
#encodeClippedText(el: ClippedTextElement): Uint8Array {
#encodeClippedText(el: MonoFormatClippedText): Uint8Array {
const enc = new TextEncoder().encode(el.text);
const fixed = 14; // 2+2+2+2+2+2+2
const rawSize = fixed + enc.byteLength;
@ -211,7 +287,7 @@ export class MonoDisplayFile {
return out;
}
#encodeHScrollText(el: HScrollTextElement): Uint8Array {
#encodeHScrollText(el: MonoFormatHScrollText): Uint8Array {
const enc = new TextEncoder().encode(el.text);
const fixed = 16; // 2+2+2+2+2+1+1+2+2
const rawSize = fixed + enc.byteLength;
@ -231,7 +307,7 @@ export class MonoDisplayFile {
return out;
}
#encodeCurrentTime(el: CurrentTimeElement): Uint8Array {
#encodeCurrentTime(el: MonoFormatCurrentTime): Uint8Array {
// Fixed 16 bytes, already 32-bit aligned
const out = new Uint8Array(16);
const v = new DataView(out.buffer);
@ -278,6 +354,14 @@ export async function loadBinFile(url: string): Promise<ArrayBuffer> {
* Build a single-element-always .bin buffer containing one Image2D element.
* Convenience for tests; for production use MonoDisplayFile directly.
*/
export function buildBinBuffer(el: Image2DElement): Uint8Array {
return new MonoDisplayFile({ elements_always: [el] }).toBuffer();
export function buildBinBuffer(el: MonoFormatImage2D): Uint8Array {
return new MonoDisplayFile([{
sectionType: SectionType.ElementsAlways,
elements: [el],
flags: {
drawFront: true,
drawBack: true,
clearBuffer: true,
},
}]).toBuffer();
}

219
ts/src/types.ts
Unescape View File

@ -22,6 +22,19 @@ export enum SectionType {
/** U8G2-format custom font used by draw elements in this file */
CustomFont = 32,
}
export type SectionTypeName = keyof typeof SectionType;
export const SectionTypeToString = Object.fromEntries(
(Object.keys(SectionType) as SectionTypeName[])
.filter(k => isNaN(Number(k)))
.map(k => [SectionType[k], k])
) as Record<SectionType, SectionTypeName>;
export const StringToSectionType = Object.fromEntries(
(Object.keys(SectionType) as SectionTypeName[])
.filter(k => isNaN(Number(k)))
.map(k => [k, SectionType[k]])
) as Record<SectionTypeName, SectionType>;
export enum ElementType {
Image2D = 1,
@ -31,15 +44,29 @@ export enum ElementType {
Line = 5,
ClippedText = 16,
HScrollText = 17,
VScrollText = 18,
CurrentTime = 32,
}
export type ElementTypeName = keyof typeof ElementType;
export const ElementTypeToString = Object.fromEntries(
(Object.keys(ElementType) as ElementTypeName[])
.filter(k => isNaN(Number(k)))
.map(k => [ElementType[k], k])
) as Record<ElementType, ElementTypeName>;
export const StringToElementType = Object.fromEntries(
(Object.keys(ElementType) as ElementTypeName[])
.filter(k => isNaN(Number(k)))
.map(k => [k, ElementType[k]])
) as Record<ElementTypeName, ElementType>;
// ---------------------------------------------------------------------------
// Section flags (section types 1 and 2)
// ---------------------------------------------------------------------------
/** Bit-field flags for ElementsAlways / ElementsTimespan sections. */
export interface SectionFlags {
export interface MonoFormatSectionFlags {
/** Bit 0 - render elements onto the front-side buffer. */
drawFront?: boolean;
/** Bit 1 - render elements onto the back-side buffer. */
@ -53,7 +80,7 @@ export interface SectionFlags {
// Scroll element flags (HorizontalScroll / VerticalScroll / HScrollText)
// ---------------------------------------------------------------------------
export interface ScrollElementFlags {
export interface MonoFormatScrollElementFlags {
/** Bit 0 - wrap content endlessly. */
endless?: boolean;
/** Bit 1 - reverse scroll direction. */
@ -69,7 +96,7 @@ export interface ScrollElementFlags {
// CurrentTime element flags
// ---------------------------------------------------------------------------
export interface CurrentTimeFlags {
export interface MonoFormatCurrentTimeFlags {
/** Bit 0 - use 12-hour clock (default 24-hour). */
clock12h?: boolean;
/** Bit 1 - show hours. */
@ -85,7 +112,7 @@ export interface CurrentTimeFlags {
// Line element flags
// ---------------------------------------------------------------------------
export interface LineFlags {
export interface MonoFormatLineFlags {
/** Bit 0 - invert pixel values along the line. */
invertPixels?: boolean;
// Bits 1-7: reserved.
@ -116,174 +143,15 @@ export function customFontOrdinal(fontIndex: FontIndex): number {
return fontIndex - CUSTOM_FONT_BASE;
}
// ---------------------------------------------------------------------------
// User-facing element descriptors (MonoDisplayFile / builder input)
// Pixels are 1 byte/pixel (0 = off, 1 = on) in the API; packed to 1bpp on
// serialisation.
// ---------------------------------------------------------------------------
export interface Image2DElement {
type: ElementType.Image2D;
/** Row-major, 1 byte/pixel (0 = off, 1 = on). Packed to 1bpp on write. */
pixels: Uint8Array;
width: number;
height: number;
xOffset?: number; // default 0
yOffset?: number; // default 0
}
export interface AnimationFrameDescriptor {
/** 1 byte/pixel, same dimensions as the parent AnimationElement. */
pixels: Uint8Array;
}
export interface AnimationElement {
type: ElementType.Animation;
width: number;
height: number;
frames: AnimationFrameDescriptor[];
/**
* Advance frame every (updateInterval + 1) ticks.
* 0 = every tick, 1 = every 2nd tick, ..., 65535 = every 65536th tick.
* Default 0.
*/
updateInterval?: number;
xOffset?: number;
yOffset?: number;
}
export interface HScrollElement {
type: ElementType.HorizontalScroll;
/** Viewport width in pixels. */
width: number;
/** Viewport height in pixels. */
height: number;
/** Scrolling content pixels (contentWidth × height), 1 byte/pixel. */
pixels: Uint8Array;
contentWidth: number;
/**
* Scroll speed byte SS; moves (SS + 1) / 16 pixels per tick.
* Range 0-255. Default 0 (= 1/16 px/tick).
*/
scrollSpeed?: number;
flags?: ScrollElementFlags;
xOffset?: number;
yOffset?: number;
}
export interface VScrollElement {
type: ElementType.VerticalScroll;
/** Viewport width in pixels. */
width: number;
/** Viewport height in pixels. */
height: number;
/** Scrolling content pixels (width × contentHeight), 1 byte/pixel. */
pixels: Uint8Array;
contentHeight: number;
/** Scroll speed byte SS; moves (SS + 1) / 16 pixels per tick. Default 0. */
scrollSpeed?: number;
flags?: ScrollElementFlags;
xOffset?: number;
yOffset?: number;
}
export interface LineElement {
type: ElementType.Line;
xOrigin: number;
yOrigin: number;
xTarget: number;
yTarget: number;
/** Reserved by spec; writers MUST write 0. */
lineStyle?: number;
invertPixels?: boolean; // flags bit 0
}
export interface ClippedTextElement {
type: ElementType.ClippedText;
text: string; // UTF-8
width: number;
height: number;
/** 0-32767 = built-in font; 0x8000+ = custom font in file. Default 0. */
fontIndex?: FontIndex;
xOffset?: number;
yOffset?: number;
}
export interface HScrollTextElement {
type: ElementType.HScrollText;
text: string; // UTF-8
width: number;
height: number;
scrollSpeed?: number; // SS byte, default 0
fontIndex?: FontIndex;
flags?: ScrollElementFlags;
xOffset?: number;
yOffset?: number;
}
export interface CurrentTimeElement {
type: ElementType.CurrentTime;
width: number;
height: number;
/** 0-32767 = built-in font; 0x8000+ = custom font in file. Default 0. */
fontIndex?: FontIndex;
/**
* UTC offset in whole minutes (signed 16-bit integer).
* e.g. UTC+5:30 → 330, UTC-8 → -480.
*/
utcOffsetMinutes?: number;
flags?: CurrentTimeFlags;
xOffset?: number;
yOffset?: number;
}
export type DrawElement =
| Image2DElement
| AnimationElement
| HScrollElement
| VScrollElement
| LineElement
| ClippedTextElement
| HScrollTextElement
| CurrentTimeElement;
// ---------------------------------------------------------------------------
// Section descriptors (MonoDisplayFile / builder input)
// ---------------------------------------------------------------------------
export interface ElementsAlwaysDescriptor {
flags?: SectionFlags;
elements: DrawElement[];
}
export interface ElementsTimespanDescriptor {
flags?: SectionFlags;
elements: DrawElement[];
/** POSIX timestamp (seconds) - section visible when now >= startTimestamp. */
startTimestamp: bigint;
/** POSIX timestamp (seconds) - section visible when now < endTimestamp. */
endTimestamp: bigint;
}
export interface CustomFontDescriptor {
/** Raw U8G2 font data. */
fontData: Uint8Array;
}
/**
* Top-level descriptor passed to MonoDisplayFile.
*
* Sections are written in the order they appear here.
* Custom fonts MUST appear before any element that references them.
*/
export interface MonoDisplayFileDescriptor {
/** Section type 1 - drawn every render tick. */
elements_always?: DrawElement[] | ElementsAlwaysDescriptor;
/** Section type 2 - drawn only within the given timestamp window. */
elements_timespan?: ElementsTimespanDescriptor[];
/** Section type 32 - embedded U8G2 custom fonts. */
custom_fonts?: CustomFontDescriptor[];
}
// ---------------------------------------------------------------------------
// MonoFormat types (MonoDisplayParser output → renderer input)
@ -314,12 +182,6 @@ export interface MonoFormatAnimation {
frames: MonoFormatPixelImage[];
}
export interface MonoFormatScrollFlags {
endless: boolean;
invertDirection: boolean;
padStart: boolean;
padEnd: boolean;
}
export interface MonoFormatHScroll {
type: ElementType.HorizontalScroll;
@ -329,7 +191,7 @@ export interface MonoFormatHScroll {
height: number;
contentWidth: number;
scrollSpeed: number;
flags: MonoFormatScrollFlags;
flags: MonoFormatScrollElementFlags;
content: MonoFormatPixelImage;
}
@ -341,7 +203,7 @@ export interface MonoFormatVScroll {
height: number;
contentHeight: number;
scrollSpeed: number;
flags: MonoFormatScrollFlags;
flags: MonoFormatScrollElementFlags;
content: MonoFormatPixelImage;
}
@ -373,17 +235,10 @@ export interface MonoFormatHScrollText {
height: number;
scrollSpeed: number;
fontIndex: FontIndex;
flags: MonoFormatScrollFlags;
flags: MonoFormatScrollElementFlags;
text: string;
}
export interface MonoFormatCurrentTimeFlags {
clock12h: boolean;
showHours: boolean;
showMinutes: boolean;
showSeconds: boolean;
}
export interface MonoFormatCurrentTime {
type: ElementType.CurrentTime;
xOffset: number;
@ -406,11 +261,7 @@ export type MonoFormatElement =
| MonoFormatHScrollText
| MonoFormatCurrentTime;
export interface MonoFormatSectionFlags {
drawFront: boolean;
drawBack: boolean;
clearBuffer: boolean;
}
export interface MonoFormatElementsAlways {
sectionType: SectionType.ElementsAlways;

Write Preview
Loading…
Cancel
Save