You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1238 lines
38 KiB
1238 lines
38 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<title>MonoDisplay Editor</title>
|
|
<script>!function(){var t=localStorage.getItem('theme');t&&document.documentElement.setAttribute('data-theme',t)}();</script>
|
|
<style>
|
|
:root {
|
|
--bg: #111;
|
|
--bg-bar: #1a1a1a;
|
|
--bg-raised: #161616;
|
|
--bg-hover: #1b1b1b;
|
|
--bg-hover2: #222;
|
|
--bg-sunken: #141414;
|
|
--bg-accent: #141e14;
|
|
--bg-active: #182018;
|
|
--bg-deep: #0f0f0f;
|
|
--bg-input: #0a0a0a;
|
|
--bg-canvas: #000;
|
|
--bg-xhover: #1e1010;
|
|
--bg-overlay: rgba(0,0,0,.6);
|
|
--bd: #2a2a2a;
|
|
--bd-inner: #1e1e1e;
|
|
--bd-deep: #1c1c1c;
|
|
--bd-card: #222;
|
|
--bd-btn: #2d2d2d;
|
|
--bd-type: #252525;
|
|
--bd-active: #2b3d2b;
|
|
--bd-hover: #444;
|
|
--bd-strong: #333;
|
|
--tx: #ccc;
|
|
--tx-hover: #bbb;
|
|
--tx-sub: #888;
|
|
--tx-label: #777;
|
|
--tx-meta: #666;
|
|
--tx-dim: #555;
|
|
--tx-faint: #444;
|
|
--tx-ghost: #333;
|
|
--tx-file: #3a3a3a;
|
|
--tx-empty: #2e2e2e;
|
|
--ac: #33ff66;
|
|
--dirty: #886622
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root:not([data-theme="dark"]) {
|
|
--bg: #f5f5f5;
|
|
--bg-bar: #e8e8e8;
|
|
--bg-raised: #efefef;
|
|
--bg-hover: #e5e5e5;
|
|
--bg-hover2: #e0e0e0;
|
|
--bg-sunken: #ebebeb;
|
|
--bg-accent: #e8f5e8;
|
|
--bg-active: #dff0df;
|
|
--bg-deep: #f0f0f0;
|
|
--bg-input: #fff;
|
|
--bg-canvas: #fff;
|
|
--bg-xhover: #ffe8e8;
|
|
--bg-overlay: rgba(0,0,0,.4);
|
|
--bd: #d0d0d0;
|
|
--bd-inner: #ddd;
|
|
--bd-deep: #e0e0e0;
|
|
--bd-card: #ddd;
|
|
--bd-btn: #ccc;
|
|
--bd-type: #d8d8d8;
|
|
--bd-active: #7dc87d;
|
|
--bd-hover: #bbb;
|
|
--bd-strong: #ccc;
|
|
--tx: #222;
|
|
--tx-hover: #333;
|
|
--tx-sub: #555;
|
|
--tx-label: #666;
|
|
--tx-meta: #777;
|
|
--tx-dim: #888;
|
|
--tx-faint: #999;
|
|
--tx-ghost: #aaa;
|
|
--tx-file: #aaa;
|
|
--tx-empty: #bbb;
|
|
--ac: #1a9940;
|
|
--dirty: #b37a00
|
|
}
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--bg: #f5f5f5;
|
|
--bg-bar: #e8e8e8;
|
|
--bg-raised: #efefef;
|
|
--bg-hover: #e5e5e5;
|
|
--bg-hover2: #e0e0e0;
|
|
--bg-sunken: #ebebeb;
|
|
--bg-accent: #e8f5e8;
|
|
--bg-active: #dff0df;
|
|
--bg-deep: #f0f0f0;
|
|
--bg-input: #fff;
|
|
--bg-canvas: #fff;
|
|
--bg-xhover: #ffe8e8;
|
|
--bg-overlay: rgba(0,0,0,.4);
|
|
--bd: #d0d0d0;
|
|
--bd-inner: #ddd;
|
|
--bd-deep: #e0e0e0;
|
|
--bd-card: #ddd;
|
|
--bd-btn: #ccc;
|
|
--bd-type: #d8d8d8;
|
|
--bd-active: #7dc87d;
|
|
--bd-hover: #bbb;
|
|
--bd-strong: #ccc;
|
|
--tx: #222;
|
|
--tx-hover: #333;
|
|
--tx-sub: #555;
|
|
--tx-label: #666;
|
|
--tx-meta: #777;
|
|
--tx-dim: #888;
|
|
--tx-faint: #999;
|
|
--tx-ghost: #aaa;
|
|
--tx-file: #aaa;
|
|
--tx-empty: #bbb;
|
|
--ac: #1a9940;
|
|
--dirty: #b37a00
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--tx);
|
|
font-family: monospace;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
font-size: 12px
|
|
}
|
|
|
|
#topbar {
|
|
height: 36px;
|
|
background: var(--bg-bar);
|
|
border-bottom: 1px solid var(--bd);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 12px;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
#topbar .app-name {
|
|
color: var(--tx-dim);
|
|
font-size: 11px;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
margin-right: 4px
|
|
}
|
|
|
|
.tb-btn {
|
|
background: var(--bg-raised);
|
|
color: var(--tx-sub);
|
|
border: 1px solid var(--bd-btn);
|
|
border-radius: 3px;
|
|
padding: 3px 10px;
|
|
font-family: monospace;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
white-space: nowrap
|
|
}
|
|
|
|
.tb-btn:hover {
|
|
background: var(--bg-hover2);
|
|
color: var(--tx-hover);
|
|
border-color: var(--bd-hover)
|
|
}
|
|
|
|
.tb-btn svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
stroke: currentColor;
|
|
fill: none;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
#file-input {
|
|
display: none
|
|
}
|
|
|
|
#filename {
|
|
color: var(--tx-file);
|
|
font-size: 11px;
|
|
margin-left: 2px;
|
|
max-width: 200px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap
|
|
}
|
|
|
|
.tb-sep {
|
|
width: 1px;
|
|
height: 18px;
|
|
background: var(--bd)
|
|
}
|
|
|
|
.dirty {
|
|
color: var(--dirty) !important
|
|
}
|
|
|
|
#main {
|
|
flex: 1;
|
|
display: flex;
|
|
min-height: 0
|
|
}
|
|
|
|
#left {
|
|
width: 48%;
|
|
border-right: 1px solid var(--bd-inner);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 14px;
|
|
gap: 10px;
|
|
overflow-y: auto;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
#display-box {
|
|
width: 100%;
|
|
aspect-ratio: 2/1;
|
|
background: var(--bg-canvas);
|
|
border: 1px solid var(--bd);
|
|
border-radius: 3px;
|
|
overflow: hidden
|
|
}
|
|
|
|
#canvas_root {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
image-rendering: pixelated;
|
|
image-rendering: crisp-edges
|
|
}
|
|
|
|
.pv-label {
|
|
font-size: 10px;
|
|
color: var(--tx-ghost);
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase
|
|
}
|
|
|
|
#demo-btns {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
margin-top: 6px
|
|
}
|
|
|
|
#sec-meta {
|
|
background: var(--bg-sunken);
|
|
border: 1px solid var(--bd-inner);
|
|
border-radius: 3px;
|
|
padding: 8px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px
|
|
}
|
|
|
|
.meta-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 11px
|
|
}
|
|
|
|
.meta-row label {
|
|
color: var(--tx-faint);
|
|
min-width: 90px
|
|
}
|
|
|
|
.meta-val {
|
|
color: var(--tx-meta)
|
|
}
|
|
|
|
.green {
|
|
color: var(--ac)
|
|
}
|
|
|
|
.flag-check {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 11px;
|
|
color: var(--tx-dim);
|
|
cursor: pointer
|
|
}
|
|
|
|
.flag-check input {
|
|
accent-color: var(--ac);
|
|
cursor: pointer
|
|
}
|
|
|
|
#right {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow: hidden
|
|
}
|
|
|
|
#right-hdr {
|
|
height: 36px;
|
|
background: var(--bg-sunken);
|
|
border-bottom: 1px solid var(--bd-inner);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
gap: 6px;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
#right-hdr .rh-title {
|
|
flex: 1;
|
|
color: var(--tx-faint);
|
|
font-size: 11px;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase
|
|
}
|
|
|
|
#sections-wrap {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 8px
|
|
}
|
|
|
|
.empty-state {
|
|
color: var(--tx-empty);
|
|
font-size: 11px;
|
|
padding: 28px 16px;
|
|
text-align: center;
|
|
line-height: 2
|
|
}
|
|
|
|
/* section card */
|
|
.sec-card {
|
|
border: 1px solid var(--bd-card);
|
|
border-radius: 3px;
|
|
margin-bottom: 5px;
|
|
overflow: hidden
|
|
}
|
|
|
|
.sec-card.active {
|
|
border-color: var(--bd-active)
|
|
}
|
|
|
|
.sec-hdr {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 6px 8px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
background: var(--bg-raised);
|
|
position: relative
|
|
}
|
|
|
|
.sec-hdr:hover {
|
|
background: var(--bg-hover)
|
|
}
|
|
|
|
.sec-card.active .sec-hdr {
|
|
background: var(--bg-active)
|
|
}
|
|
|
|
.sec-arrow {
|
|
color: var(--tx-ghost);
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
transition: transform .12s;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
.sec-card.open .sec-arrow {
|
|
transform: rotate(90deg)
|
|
}
|
|
|
|
.sec-label {
|
|
flex: 1;
|
|
color: var(--tx-label);
|
|
font-size: 11px
|
|
}
|
|
|
|
.sec-badge {
|
|
font-size: 10px;
|
|
color: var(--ac);
|
|
border: 1px solid var(--bd-active);
|
|
background: var(--bg-accent);
|
|
border-radius: 2px;
|
|
padding: 1px 6px;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
/* red × - section & element */
|
|
.x-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--bd);
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
line-height: 1;
|
|
padding: 2px 5px;
|
|
border-radius: 2px;
|
|
flex-shrink: 0;
|
|
transition: color .1s, background .1s
|
|
}
|
|
|
|
.x-btn:hover {
|
|
color: #ff4444;
|
|
background: var(--bg-xhover)
|
|
}
|
|
|
|
/* element */
|
|
.el-list {
|
|
background: var(--bg-deep);
|
|
border-top: 1px solid var(--bd-deep);
|
|
padding: 6px
|
|
}
|
|
|
|
.el-item {
|
|
border: 1px solid var(--bd-inner);
|
|
border-radius: 3px;
|
|
background: var(--bg-sunken);
|
|
margin-bottom: 4px;
|
|
overflow: hidden
|
|
}
|
|
|
|
.el-item.active {
|
|
border-color: var(--ac)
|
|
}
|
|
|
|
.el-item-hdr {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 8px;
|
|
cursor: pointer
|
|
}
|
|
|
|
.el-item-hdr:hover {
|
|
background: var(--bg-hover)
|
|
}
|
|
|
|
.el-type {
|
|
font-size: 10px;
|
|
color: var(--tx-meta);
|
|
border: 1px solid var(--bd-type);
|
|
border-radius: 2px;
|
|
padding: 1px 6px;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
.el-item.active .el-type {
|
|
color: var(--ac);
|
|
border-color: var(--bd-active)
|
|
}
|
|
|
|
.el-name {
|
|
flex: 1;
|
|
color: var(--tx-dim);
|
|
font-size: 11px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 120px
|
|
}
|
|
|
|
.el-fields {
|
|
padding: 6px 8px 8px;
|
|
border-top: 1px solid var(--bg-bar);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px
|
|
}
|
|
|
|
.fields-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4px 10px
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px
|
|
}
|
|
|
|
.field.full {
|
|
grid-column: 1/-1
|
|
}
|
|
|
|
.field>label {
|
|
font-size: 10px;
|
|
color: var(--tx-faint)
|
|
}
|
|
|
|
.field input[type=text],
|
|
.field input[type=number],
|
|
.field select,
|
|
.field textarea {
|
|
background: var(--bg-input);
|
|
color: var(--tx-sub);
|
|
border: 1px solid var(--bd-card);
|
|
border-radius: 2px;
|
|
padding: 3px 6px;
|
|
font-family: monospace;
|
|
font-size: 11px;
|
|
width: 100%;
|
|
outline: none
|
|
}
|
|
|
|
.field input:focus,
|
|
.field select:focus,
|
|
.field textarea:focus {
|
|
border-color: var(--ac);
|
|
color: var(--tx)
|
|
}
|
|
|
|
.field textarea {
|
|
resize: vertical;
|
|
min-height: 44px;
|
|
line-height: 1.4
|
|
}
|
|
|
|
.field select option {
|
|
background: var(--bg-bar);
|
|
color: var(--tx-ghost)
|
|
}
|
|
|
|
.flags-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
padding: 2px 0
|
|
}
|
|
|
|
.add-el {
|
|
background: transparent;
|
|
color: var(--tx-ghost);
|
|
border: 1px dashed var(--bd-card);
|
|
border-radius: 3px;
|
|
padding: 5px 8px;
|
|
font-family: monospace;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 2px
|
|
}
|
|
|
|
.add-el:hover {
|
|
color: var(--tx-sub);
|
|
border-color: var(--bd-hover)
|
|
}
|
|
|
|
/* confirm dialog */
|
|
#confirm-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--bg-overlay);
|
|
z-index: 100;
|
|
align-items: center;
|
|
justify-content: center
|
|
}
|
|
|
|
#confirm-overlay.show {
|
|
display: flex
|
|
}
|
|
|
|
#confirm-box {
|
|
background: var(--bg-bar);
|
|
border: 1px solid var(--bd-strong);
|
|
border-radius: 4px;
|
|
padding: 20px 24px;
|
|
max-width: 340px;
|
|
width: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px
|
|
}
|
|
|
|
#confirm-msg {
|
|
color: var(--tx-ghost);
|
|
font-size: 12px;
|
|
line-height: 1.6
|
|
}
|
|
|
|
#confirm-btns {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end
|
|
}
|
|
|
|
.cb {
|
|
background: var(--bg-raised);
|
|
color: var(--tx-sub);
|
|
border: 1px solid var(--bd-btn);
|
|
border-radius: 3px;
|
|
padding: 4px 14px;
|
|
font-family: monospace;
|
|
font-size: 11px;
|
|
cursor: pointer
|
|
}
|
|
|
|
.cb:hover {
|
|
background: var(--bg-hover2);
|
|
color: var(--tx-hover)
|
|
}
|
|
|
|
.cb.primary {
|
|
border-color: var(--bd-active);
|
|
color: var(--ac)
|
|
}
|
|
|
|
.cb.primary:hover {
|
|
background: var(--bg-active)
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="topbar">
|
|
<span class="app-name">MonoDisplay</span>
|
|
<div class="tb-sep"></div>
|
|
<button class="tb-btn" onclick="document.getElementById('file-input').click()">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
<polyline points="17 8 12 3 7 8" />
|
|
<line x1="12" y1="3" x2="12" y2="15" />
|
|
</svg>
|
|
Load .bin
|
|
</button>
|
|
<input type="file" id="file-input" accept=".bin" onchange="loadBin(this)" />
|
|
<button class="tb-btn" onclick="exportBin()">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
<polyline points="7 10 12 15 17 10" />
|
|
<line x1="12" y1="15" x2="12" y2="3" />
|
|
</svg>
|
|
Export .bin
|
|
</button>
|
|
<div class="tb-sep"></div>
|
|
<button class="tb-btn" onclick="addSection()">
|
|
<svg viewBox="0 0 24 24">
|
|
<line x1="12" y1="5" x2="12" y2="19" />
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
</svg>
|
|
Add section
|
|
</button>
|
|
<span id="filename">untitled</span>
|
|
<div style="flex:1"></div>
|
|
<div class="tb-sep"></div>
|
|
<button class="tb-btn" id="theme-toggle" onclick="cycleTheme()">⊙ auto</button>
|
|
</div>
|
|
|
|
<div id="main">
|
|
<div id="left">
|
|
<span class="pv-label">preview · 120 × 60</span>
|
|
<div id="display-box">
|
|
<canvas id="canvas_root" width="120" height="60"></canvas>
|
|
</div>
|
|
<span class="pv-label">demos</span>
|
|
<div id="demo-btns"></div>
|
|
<div id="sec-meta">
|
|
<div class="meta-row">
|
|
<label>Selected section</label>
|
|
<span class="meta-val green" id="meta-name">-</span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<label>Elements</label>
|
|
<span class="meta-val" id="meta-count">-</span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<label>Section flags</label>
|
|
<label class="flag-check">
|
|
<input type="checkbox" id="flag-drawFront" onchange="setSectionFlag('drawFront',this.checked)" />
|
|
drawFront
|
|
</label>
|
|
<label class="flag-check" style="margin-left:8px">
|
|
<input type="checkbox" id="flag-clearBuffer" onchange="setSectionFlag('clearBuffer',this.checked)" />
|
|
clearBuffer
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="right">
|
|
<div id="right-hdr">
|
|
<span class="rh-title">sections</span>
|
|
</div>
|
|
<div id="sections-wrap">
|
|
<div class="empty-state">No sections yet.<br />Use <b>Add section</b> to get started.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- confirm dialog -->
|
|
<div id="confirm-overlay">
|
|
<div id="confirm-box">
|
|
<div id="confirm-msg"></div>
|
|
<div id="confirm-btns"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="./public/mono-display.js"></script>
|
|
<script>
|
|
const W = 120, H = 60;
|
|
let sections = [];
|
|
let activeSec = null, activeEl = null;
|
|
let secCounter = 0, elCounter = 0;
|
|
let currentFilename = 'untitled';
|
|
let isDirty = false;
|
|
|
|
// --- Element type definitions ------------------------------------------------
|
|
const EL_TYPES = ['Image2D', 'Animation', 'ClippedText', 'HScrollText', 'CurrentTime'];
|
|
const EL_FIELDS = {
|
|
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 },
|
|
],
|
|
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 },
|
|
],
|
|
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 },
|
|
],
|
|
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 },
|
|
],
|
|
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 },
|
|
],
|
|
};
|
|
const EL_FLAGS = {
|
|
Image2D: [], Animation: [], ClippedText: [],
|
|
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' }],
|
|
};
|
|
|
|
// --- Confirm dialog -----------------------------------------------------------
|
|
function confirm(msg, buttons) {
|
|
// buttons: [{label,primary,action}]
|
|
return new Promise(resolve => {
|
|
const overlay = document.getElementById('confirm-overlay');
|
|
document.getElementById('confirm-msg').textContent = msg;
|
|
const btns = document.getElementById('confirm-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);
|
|
});
|
|
overlay.classList.add('show');
|
|
});
|
|
}
|
|
|
|
// --- Dirty tracking -----------------------------------------------------------
|
|
function markDirty() {
|
|
isDirty = true;
|
|
document.getElementById('filename').classList.add('dirty');
|
|
}
|
|
function markClean() {
|
|
isDirty = false;
|
|
document.getElementById('filename').classList.remove('dirty');
|
|
}
|
|
async function guardDirty() {
|
|
if (!isDirty || !sections.length) return true;
|
|
const action = await confirm(
|
|
'You have unsaved changes. Loading a demo will replace the current editor state.',
|
|
[{ label: 'Cancel', action: false }, { label: 'Load anyway', primary: true, action: true }]
|
|
);
|
|
return action;
|
|
}
|
|
|
|
// --- Helpers -----------------------------------------------------------------
|
|
function newSec() {
|
|
secCounter++;
|
|
return {
|
|
id: 's' + secCounter, name: 'Section ' + secCounter, open: true,
|
|
flags: { drawFront: true, clearBuffer: true }, elements: []
|
|
};
|
|
}
|
|
function newEl(type) {
|
|
elCounter++;
|
|
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 };
|
|
}
|
|
function getSec(id) { return 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(); sections.push(s);
|
|
activeSec = s.id; activeEl = null;
|
|
markDirty(); render(); triggerPreview();
|
|
}
|
|
function removeSection(id) {
|
|
sections = sections.filter(s => s.id !== id);
|
|
if (activeSec === id) { activeSec = sections.length ? sections[sections.length - 1].id : null; activeEl = null; }
|
|
markDirty(); render(); triggerPreview();
|
|
}
|
|
function toggleSection(id) {
|
|
const s = getSec(id); if (!s) return;
|
|
s.open = !s.open; activeSec = id; render(); updateMeta();
|
|
}
|
|
function setSectionFlag(flag, val) {
|
|
if (!activeSec) return;
|
|
const s = getSec(activeSec); if (!s) return;
|
|
s.flags[flag] = val; markDirty(); triggerPreview();
|
|
}
|
|
function addElement(secId) {
|
|
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();
|
|
}
|
|
function removeElement(secId, elId) {
|
|
const s = getSec(secId); 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;
|
|
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();
|
|
}
|
|
|
|
// --- 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: false, 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];
|
|
}
|
|
},
|
|
{
|
|
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];
|
|
}
|
|
},
|
|
];
|
|
|
|
// --- Preview via MonoDisplayFile (same as original demos) --------------------
|
|
const DEMO_PREVIEWS = {
|
|
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();
|
|
},
|
|
Blink() {
|
|
const { MonoDisplayFile, ElementType } = window.MonoDisplay;
|
|
return new MonoDisplayFile({
|
|
elements_always: {
|
|
flags: { drawFront: true, clearBuffer: true },
|
|
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();
|
|
},
|
|
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();
|
|
},
|
|
Scrolltext() {
|
|
const { MonoDisplayFile, ElementType } = window.MonoDisplay;
|
|
return new MonoDisplayFile({
|
|
elements_always: {
|
|
flags: { drawFront: true, clearBuffer: true },
|
|
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();
|
|
},
|
|
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();
|
|
},
|
|
};
|
|
|
|
function initDemos() {
|
|
const wrap = document.getElementById('demo-btns');
|
|
let activeBtn = null;
|
|
DEMO_DEFS.forEach(d => {
|
|
const btn = document.createElement('button');
|
|
btn.className = 'tb-btn'; btn.textContent = d.label;
|
|
btn.onclick = async () => {
|
|
const ok = await guardDirty();
|
|
if (!ok) return;
|
|
// load into editor
|
|
sections = d.build();
|
|
activeSec = sections[0]?.id || null; activeEl = null;
|
|
currentFilename = d.label.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]()));
|
|
if (activeBtn) activeBtn.style.color = '';
|
|
btn.style.color = '#33ff66'; activeBtn = btn;
|
|
};
|
|
wrap.appendChild(btn);
|
|
});
|
|
}
|
|
|
|
// --- Render -------------------------------------------------------------------
|
|
function render() {
|
|
updateMeta();
|
|
const wrap = document.getElementById('sections-wrap');
|
|
if (!sections.length) {
|
|
wrap.innerHTML = '<div class="empty-state">No sections yet.<br/>Use <b>Add section</b> to get started.</div>';
|
|
return;
|
|
}
|
|
wrap.innerHTML = sections.map(s => renderSection(s)).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}')">
|
|
<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>
|
|
</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 ? `
|
|
<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>
|
|
</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('')}
|
|
</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('')}
|
|
</div>
|
|
</div>`: ''}
|
|
</div>`: ''}
|
|
</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 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;
|
|
}
|
|
|
|
// --- Preview ------------------------------------------------------------------
|
|
let previewTimer = null;
|
|
function triggerPreview() {
|
|
clearTimeout(previewTimer);
|
|
previewTimer = setTimeout(() => { try { buildPreview(); } catch (e) { console.warn('preview', e); } }, 150);
|
|
}
|
|
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) : 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()
|
|
));
|
|
}
|
|
|
|
// --- 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 };
|
|
break;
|
|
case 'Animation':
|
|
fields = { xOffset: el.xOffset, yOffset: el.yOffset, width: el.width, height: el.height, updateInterval: el.updateInterval };
|
|
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) {
|
|
const file = input.files[0]; if (!file) return;
|
|
currentFilename = file.name;
|
|
document.getElementById('filename').textContent = file.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);
|
|
sections = parsedToSections(parsed.sections);
|
|
activeSec = sections.length ? sections[0].id : null;
|
|
activeEl = null;
|
|
render();
|
|
} catch (err) {
|
|
console.warn('Could not parse sections from bin:', err);
|
|
}
|
|
};
|
|
reader.readAsArrayBuffer(file);
|
|
input.value = ''; markClean();
|
|
}
|
|
function exportBin() {
|
|
if (!window.MonoDisplay) { alert('MonoDisplay library not loaded.'); return; }
|
|
const { MonoDisplayFile, ElementType } = window.MonoDisplay;
|
|
const s = activeSec ? getSec(activeSec) : 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 a = document.createElement('a');
|
|
a.href = URL.createObjectURL(blob);
|
|
a.download = currentFilename.replace(/\.bin$/, '') + '.bin';
|
|
a.click(); markClean();
|
|
}
|
|
|
|
// --- Theme --------------------------------------------------------------------
|
|
var _THEMES = ['dark', 'light', 'auto'];
|
|
function _getTheme() { return document.documentElement.getAttribute('data-theme') || 'auto'; }
|
|
function _applyTheme(t) {
|
|
if (t === 'auto') { document.documentElement.removeAttribute('data-theme'); localStorage.removeItem('theme'); }
|
|
else { document.documentElement.setAttribute('data-theme', t); localStorage.setItem('theme', t); }
|
|
_updateThemeBtn();
|
|
}
|
|
function cycleTheme() {
|
|
var cur = _getTheme(), idx = _THEMES.indexOf(cur);
|
|
_applyTheme(_THEMES[(idx + 1) % _THEMES.length]);
|
|
}
|
|
function _detectDR() {
|
|
return !!(document.querySelector('meta[name="darkreader"]') ||
|
|
document.querySelector('style[data-darkreader-style]') ||
|
|
document.documentElement.getAttribute('data-darkreader-mode'));
|
|
}
|
|
function _updateThemeBtn() {
|
|
var btn = document.getElementById('theme-toggle');
|
|
if (!btn) return;
|
|
var t = _getTheme(), dr = _detectDR();
|
|
var lbl = { dark: '☾ dark', light: '☀ light', auto: '⊙ auto' };
|
|
btn.textContent = (dr ? 'DR · ' : '') + (lbl[t] || lbl.auto);
|
|
btn.title = dr ? 'DarkReader active - controlling theme' : ('Theme: ' + t + ' (click to cycle)');
|
|
}
|
|
window.addEventListener('DOMContentLoaded', _updateThemeBtn);
|
|
|
|
// --- Init ---------------------------------------------------------------------
|
|
render();
|
|
if (window.MonoDisplay) { initDemos(); }
|
|
else { const iv = setInterval(() => { if (window.MonoDisplay) { clearInterval(iv); initDemos(); } }, 100); }
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|