From c1691ba0698fa76c8f40e62ec6d74d6f1073e1a0 Mon Sep 17 00:00:00 2001
From: flop <flop@cttue.de>
Date: Wed, 13 May 2026 20:35:03 +0200
Subject: [PATCH] feat(demo): improve currentTime

---
 ts/index.html | 271 +++++++++++++++++++++++++++++---------------------
 1 file changed, 159 insertions(+), 112 deletions(-)
diff --git a/ts/index.html b/ts/index.html
index 30896d1..6fb203a 100644
--- a/ts/index.html
+++ b/ts/index.html
@@ -1,11 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>MonoDisplay Test</title>
   <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
 
     body {
       background: #111;
@@ -49,7 +56,8 @@
       height: 100%;
       display: block;
       image-rendering: pixelated;
-      image-rendering: crisp-edges; /* Firefox */
+      image-rendering: crisp-edges;
+      /* Firefox */
     }
 
     #resolution {
@@ -80,12 +88,25 @@
       transition: background 0.1s, color 0.1s;
     }
 
-    #controls button:hover  { background: #222; color: #bbb; }
-    #controls button.active { background: #1e3a1e; color: #33ff66; border-color: #33ff66; }
+    #controls button:hover {
+      background: #222;
+      color: #bbb;
+    }
 
-    #status { font-size: 11px; color: #444; min-height: 1em; }
+    #controls button.active {
+      background: #1e3a1e;
+      color: #33ff66;
+      border-color: #33ff66;
+    }
+
+    #status {
+      font-size: 11px;
+      color: #444;
+      min-height: 1em;
+    }
   </style>
 </head>
+
 <body>
 
   <h1>MonoDisplay — 160 × 80</h1>
@@ -106,120 +127,146 @@
   <script src="./public/mono-display.js"></script>
 
   <script>
-    (function() {
-    const { MonoDisplayDriver, MonoDisplayFile, ElementType } = window.MonoDisplay;
-
-    const driver = new MonoDisplayDriver("canvas_root", {
-      onColor:  "#EC0",
-      offColor: "#000",
-      fps:      25,
-    });
-
-    const W = 160, H = 80;
-
-    const demos = [
-      {
-        label: "Checkerboard (static)",
-        make() {
-          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();
+    (function () {
+      const { MonoDisplayDriver, MonoDisplayFile, ElementType } = window.MonoDisplay;
+
+      const driver = new MonoDisplayDriver("canvas_root", {
+        onColor: "#EC0",
+        offColor: "#000",
+        fps: 25,
+      });
+
+      const W = 160, H = 80;
+
+      const demos = [
+        {
+          label: "Checkerboard (static)",
+          make() {
+            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();
+          },
         },
-      },
-      {
-        label: "Blink (animation)",
-        make() {
-          return new MonoDisplayFile({
-            elements_always: {
-              flags: { drawFront: true, clearBuffer: true },
-              elements: [{
-                type: ElementType.Animation,
-                width: W, height: H,
-                updateInterval: 12, // every 13 ticks ≈ 500ms per frame at 25fps
-                frames: [
-                  { pixels: new Uint8Array(W * H).fill(1) },
-                  { pixels: new Uint8Array(W * H).fill(0) },
-                ],
-              }],
-            },
-          }).toBuffer();
+        {
+          label: "Blink (animation)",
+          make() {
+            return new MonoDisplayFile({
+              elements_always: {
+                flags: { drawFront: true, clearBuffer: true },
+                elements: [{
+                  type: ElementType.Animation,
+                  width: W, height: H,
+                  updateInterval: 12, // every 13 ticks ≈ 500ms per frame at 25fps
+                  frames: [
+                    { pixels: new Uint8Array(W * H).fill(1) },
+                    { pixels: new Uint8Array(W * H).fill(0) },
+                  ],
+                }],
+              },
+            }).toBuffer();
+          },
         },
-      },
-      {
-        label: "Text (centered)",
-        make() {
-          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();
+        {
+          label: "Text (centered)",
+          make() {
+            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();
+          },
         },
-      },
-      {
-        label: "Scrolltext (left)",
-        make() {
-          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();
+        {
+          label: "Scrolltext (left)",
+          make() {
+            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();
+          },
         },
-      },
-      {
-        label: "Time",
-        make() {
-          return new MonoDisplayFile({
-            elements_always: {
-              flags: { drawFront: true, clearBuffer: true },
-              elements: [{
-                type: ElementType.CurrentTime,
-                xOffset: 0, yOffset: 32,
-                width: W, height: 16,
-                utcOffsetMinutes: 120,
-              }],
-            },
-          }).toBuffer();
+        {
+          label: "Time",
+          make() {
+            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: 120, yOffset: 32,
+                  width: W, height: 16,
+                  utcOffsetMinutes: 120,
+                }],
+              },
+            }).toBuffer();
+          },
         },
-      },
-    ];
-
-    const controls = document.getElementById("controls");
-    let activeBtn = null;
-
-    for (const demo of demos) {
-      const btn = document.createElement("button");
-      btn.textContent = demo.label;
-      btn.onclick = () => {
-        if (activeBtn) activeBtn.classList.remove("active");
-        btn.classList.add("active");
-        activeBtn = btn;
-        driver.load(() => Promise.resolve(demo.make()));
-      };
-      controls.appendChild(btn);
-    }
+      ];
 
-    controls.firstElementChild.click();
+      const controls = document.getElementById("controls");
+      let activeBtn = null;
+
+      for (const demo of demos) {
+        const btn = document.createElement("button");
+        btn.textContent = demo.label;
+        btn.onclick = () => {
+          if (activeBtn) activeBtn.classList.remove("active");
+          btn.classList.add("active");
+          activeBtn = btn;
+          driver.load(() => Promise.resolve(demo.make()));
+        };
+        controls.appendChild(btn);
+      }
+
+      controls.firstElementChild.click();
     })();
   </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
