fix: bugfixes so its clean

cpp/src/monoformat_parseonly.cpp

@@ -946,18 +946,10 @@ std::expected<void, ParseError> handleLine(std::span<std::byte const>& buffer, O
     bool value = !lineFlags.dark;
 
     if (dx == 0) {
-        if (dy < 0) {
-            std::swap(originY, targetY);
-            dy = -dy;
-        }
         for (std::int32_t i = 0; i <= dy; ++i) {
             screen->setPixel(*originX, *originY + i, value);
         }
     } else if (dy == 0) {
-        if (dx < 0) {
-            std::swap(originX, targetX);
-            dx = -dx;
-        }
         for (std::int32_t i = 0; i <= dx; ++i) {
             screen->setPixel(*originX + i, *originY, value);
         }

cpp/src/monoformat_structured.cpp

@@ -1145,32 +1145,18 @@ void LineElement::drawTo(OneBitBufferInterface* imageBuffer, std::size_t animati
     std::int32_t dy = static_cast<std::int32_t>(m_targetY) - static_cast<std::int32_t>(m_originY);
     bool value = true;
 
-    std::uint16_t originX = m_originX;
-    std::uint16_t originY = m_originY;
-    std::uint16_t targetX = m_targetX;
-    std::uint16_t targetY = m_targetY;
-
-
     if (dx == 0) {
-        if (dy < 0) {
-            std::swap(originY, targetY);
-            dy = -dy;
-        }
         for (std::int32_t i = 0; i <= dy; ++i) {
-            imageBuffer->setPixel(originX, originY + i, value);
+            imageBuffer->setPixel(m_originX, m_originY + i, value);
         }
     } else if (dy == 0) {
-        if (dx < 0) {
-            std::swap(originX, targetX);
-            dx = -dx;
-        }
         for (std::int32_t i = 0; i <= dx; ++i) {
-            imageBuffer->setPixel(originX + i, originY, value);
+            imageBuffer->setPixel(m_originX + i, m_originY, value);
         }
     } else {
         for (std::int32_t i = 0; i <= dx; ++i) {
-            std::int32_t x = originX + i;
-            std::int32_t y = i * dy / dx + originY;
+            std::int32_t x = m_originX + i;
+            std::int32_t y = i * dy / dx + m_originY;
             imageBuffer->setPixel(static_cast<std::uint16_t>(x), static_cast<std::uint16_t>(y), value);
         }
     }

php/extract_animation.php

@@ -1,58 +0,0 @@
-<?php
-
-include_once("monoformat_schema.php");
-include_once("monoformat_structured.php");
-
-if (count($argv) != 4) {
-    fwrite(STDERR, "Usage: $argv[0] binfile index outprefix\n");
-    exit(1);
-}
-
-$binfile = $argv[1];
-$index = (int) $argv[2];
-$outprefix = $argv[3];
-
-$file = monoformat\parseFile(file_get_contents($binfile));
-$animations = [];
-foreach ($file->sections as $section) {
-    for ($i = 0; $i < $section->elementCount(); ++$i) {
-        $element = $section->elementAt($i);
-        if ($element->elementType() == monoformat\ElementType::Animation) {
-            array_push($animations, $element);
-        }
-    }
-}
-
-if ($index < 0 || $index >= count($animations)) {
-    $n = count($animations);
-    $nm1 = $n - 1;
-    fwrite(STDERR, "$argv[0]: the animation file contains $n animations, index $index is invalid (must be 0 .. $nm1)\n");
-    exit(2);
-}
-
-$animation = $animations[$index];
-$height = $animation->height();
-$width = $animation->width();
-
-$nFrames = $animation->numberOfFrames();
-for ($f = 0; $f < $nFrames; ++$f) {
-    $outfile = sprintf("%s_%04d.png", $outprefix, $f);
-    print("Writing $outfile...\n");
-    $input = $animation->image($f);
-    $image = imagecreatetruecolor($width, $height);
-    $bg = imagecolorallocate($image, 0, 0, 0);
-    $fg = imagecolorallocate($image, 255, 255, 255);
-    for ($y = 0; $y < $height; ++$y) {
-        for ($x = 0; $x < $width; ++$x) {
-            $i = $y * $width + $x;
-            if ($input[$i]) {
-                imagesetpixel($image, $x, $y, $fg);
-            } else {
-                imagesetpixel($image, $x, $y, $bg);
-            }
-        }
-    }
-    imagepng($image, $outfile);
-}
-
-?>

php/monoformat_structured.php

@@ -26,7 +26,7 @@ function serializePixels(array $pixels): string {
 function unserializePixels(int $n, string $serialized): array {
     $nBytes = intdiv($n + 7, 8);
     if (strlen($serialized) != $nBytes) {
-        $actual = strlen($serialized);
+        $actual = strlen($serializd);
         throw new \ValueError("Could not unserialize a pixel bitmap: the size $actual does not equal the expected $nBytes");
     }
     $result = array_fill(0, $n, false);

php/schedule.php

@@ -1,11 +1,5 @@
 <?php
 
-$roomMapping = [
-];
-
-$passThroughMapping = [
-];
-
 include_once("monoformat_schema.php");
 include_once("monoformat_structured.php");
 
@@ -29,27 +23,8 @@ function replaceTalkInfo($str, $talks) {
     }, $str);
 }
 
-if (isset($_GET["mac"]) and array_key_exists($_GET["mac"], $passThroughMapping)) {
-    $fn = $passThroughMapping[$_GET["mac"]];
-    if (is_dir($fn)) {
-        $d = opendir($fn);
-        $files = [];
-        while (($e = readdir($d)) !== false) {
-            if (str_ends_with($e, ".bin")) {
-                array_push($files, $fn . "/" . $e);
-            }
-        }
-        sort($files);
-        if (!count($files)) {
-            die("No files found");
-        }
-        $n = (time() / 60) % count($files);
-        $fn = $files[$n];
-    }
-    Header("Content-Type: application/octet-stream");
-    readfile($fn);
-    exit(0);
-}
+$roomMapping = [
+];
 
 if (!isset($_GET["mac"]) or !array_key_exists($_GET["mac"], $roomMapping)) {
     /* We didn't find this device in the mapping, so let's just

ts-editor/index.html

@@ -5,12 +5,12 @@
   <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>
-  <link href="style.css" rel="stylesheet" />
-  <link href="mobile.css" rel="stylesheet" />
+  <script>!function(){var t=localStorage.getItem('theme');t&&document.documentElement.setAttribute('data-theme',t)}();</script>
+  <link href="style.css" rel="stylesheet"/>
 </head>
 
 <body>
+
   <div id="topbar">
     <span class="app-name">MonoDisplay</span>
     <div class="tb-sep"></div>
@@ -52,13 +52,10 @@
     <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 · <select onchange="changeDisplayLayout()">
-          <option>120 × 60</option>
-          <option>120 × 40</option>
-        </select></span>
-      </span>
+      <span class="pv-label">preview · 120 × 60</span>
       <div id="display-box">
         <canvas id="canvas_root" width="120" height="60"></canvas>
       </div>
@@ -90,27 +87,25 @@
         </div>
       </div>
     </div>
+
     <div id="right">
       <div id="right-hdr">
         <span class="rh-title">sections</span>
-        <button class="tb-btn" id="mob-add-section" 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>
-        </button>
       </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>
 </body>
 

ts-editor/mobile.css

@@ -1,68 +0,0 @@
-@media (max-width: 640px) {
-  #topbar {
-    overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-width: none;
-    -webkit-overflow-scrolling: touch;
-    gap: 6px;
-    padding: 0 8px;
-  }
-
-  #topbar::-webkit-scrollbar {
-    display: none;
-  }
-
-  #topbar>* {
-    flex-shrink: 0;
-  }
-
-  #topbar .tb-btn {
-    font-size: 0;
-    gap: 0;
-    padding: 3px 8px;
-  }
-
-  #topbar .tb-btn svg {
-    width: 15px;
-    height: 15px;
-  }
-
-  #topbar #theme-toggle {
-    font-size: 11px;
-  }
-
-  #topbar button[onclick="addSection()"] {
-    display: none;
-  }
-
-  #mob-add-section {
-    display: flex;
-  }
-
-  #topbar [style*="flex:1"] {
-    display: none;
-  }
-
-  #main {
-    flex-direction: column;
-    overflow-y: auto;
-  }
-
-  #left,
-  #right {
-    width: 100%;
-    border-right: none;
-    flex-shrink: 0;
-  }
-
-  #left {
-    border-bottom: 1px solid var(--bd-inner);
-    padding: 10px;
-    gap: 8px;
-  }
-
-  #display-box {
-    aspect-ratio: 2/1;
-    width: 100%;
-  }
-}

ts-editor/src/browser.ts

@@ -26,7 +26,7 @@ import {
 } from "libmonoformat";
 
 
-let W = 120, H = 60;
+const W = 120, H = 60;
 
 // --- State -------------------------------------------------------------------
 let file: MonoDisplayFile = new MonoDisplayFile([]);
@@ -185,15 +185,6 @@ async function guardDirty(): Promise<boolean> {
   );
 }
 
-function changeDisplayLayout() {
-  const sel = document.querySelector('.pv-label select') as HTMLSelectElement;
-  const [w, h] = sel.value.split('×').map(s => parseInt(s.trim()));
-  W = w as number;
-  H = h as number;
-  ((window as any)._mdDriver as MonoDisplayDriver).setSize(W, H);
-  ((window as any)._mdDriver as MonoDisplayDriver).load(() => Promise.resolve(file.toBuffer()));
-}
-
 // --- Helpers -----------------------------------------------------------------
 function newSec(): MonoFormatElementsAlways {
   return {
@@ -434,7 +425,7 @@ function triggerPreview() {
 function buildPreview() {
   if (!(window as any)._mdDriver)
     (window as any)._mdDriver = new MonoDisplayDriver("canvas_root", { onColor: "#EC0", offColor: "#000", fps: 25 });
-  changeDisplayLayout();
+  (window as any)._mdDriver.load(() => Promise.resolve(file.toBuffer()));
 }
 
 // --- Load / Export -----------------------------------------------------------
@@ -527,99 +518,82 @@ const PixelCanvas: m.Component<{ img: MonoFormatPixelImage; onpaint: () => void
     vnode.state.drawing = false;
     vnode.state.drawValue = 1;
   },
-  view({ attrs: { img, onpaint }, state: s }) {
-    function pixelFromCoords(canvas: HTMLCanvasElement, clientX: number, clientY: number) {
+  view({ attrs: { img, onpaint }, state }) {
+    function pixelFromEvent(e: MouseEvent): { x: number; y: number } | null {
+      const canvas = e.currentTarget as HTMLCanvasElement;
       const rect = canvas.getBoundingClientRect();
       const scaleX = canvas.width / rect.width;
       const scaleY = canvas.height / rect.height;
-      const x = Math.floor((clientX - rect.left) * scaleX / PIXEL_SCALE);
-      const y = Math.floor((clientY - rect.top) * scaleY / PIXEL_SCALE);
+      const x = Math.floor((e.clientX - rect.left) * scaleX / PIXEL_SCALE);
+      const y = Math.floor((e.clientY - rect.top) * scaleY / PIXEL_SCALE);
       if (x < 0 || x >= img.width || y < 0 || y >= img.height) return null;
       return { x, y };
     }
 
-    function paintAt(canvas: HTMLCanvasElement, clientX: number, clientY: number) {
-      const p = pixelFromCoords(canvas, clientX, clientY);
+    function paint(e: MouseEvent) {
+      const p = pixelFromEvent(e);
       if (!p) return;
-      img.pixels[getPixelIndex(img, p.x, p.y)] = s.drawValue;
+      img.pixels[getPixelIndex(img, p.x, p.y)] = state.drawValue;
       onpaint();
-      drawPixelCanvas(canvas, img);
-    }
-
-    function paint(e: MouseEvent) {
-      paintAt(e.currentTarget as HTMLCanvasElement, e.clientX, e.clientY);
-    }
-
-    function attachTouch(canvas: HTMLCanvasElement) {
-      canvas.addEventListener("touchstart", (e: TouchEvent) => {
-        e.preventDefault();
-        s.drawing = true;
-        const touch = e.changedTouches[0];
-        const p = pixelFromCoords(canvas, touch.clientX, touch.clientY);
-        if (p) s.drawValue = img.pixels[getPixelIndex(img, p.x, p.y)] ? 0 : 1;
-        paintAt(canvas, touch.clientX, touch.clientY);
-      }, { passive: false });
-
-      canvas.addEventListener("touchmove", (e: TouchEvent) => {
-        e.preventDefault();
-        if (!s.drawing) return;
-        const touch = e.changedTouches[0];
-        paintAt(canvas, touch.clientX, touch.clientY);
-      }, { passive: false });
-
-      canvas.addEventListener("touchend", (e) => { e.preventDefault(); s.drawing = false; }, { passive: false });
-      canvas.addEventListener("touchcancel", (e) => { e.preventDefault(); s.drawing = false; }, { passive: false });
+      drawPixelCanvas(e.currentTarget as HTMLCanvasElement, img);
     }
 
     return m("canvas.pixel-editor", {
       width: img.width * PIXEL_SCALE,
       height: img.height * PIXEL_SCALE,
-      oncreate: ({ dom }: m.VnodeDOM) => {
-        const canvas = dom as HTMLCanvasElement;
-        drawPixelCanvas(canvas, img);
-        attachTouch(canvas);
-      },
+      oncreate: ({ dom }: m.VnodeDOM) => drawPixelCanvas(dom as HTMLCanvasElement, img),
       onupdate: ({ dom }: m.VnodeDOM) => drawPixelCanvas(dom as HTMLCanvasElement, img),
-
       onmousedown: (e: MouseEvent) => {
-        s.drawing = true;
-        const p = pixelFromCoords(e.currentTarget as HTMLCanvasElement, e.clientX, e.clientY);
-        if (p) s.drawValue = img.pixels[getPixelIndex(img, p.x, p.y)] ? 0 : 1;
+        state.drawing = true;
+        const p = pixelFromEvent(e);
+        if (p) state.drawValue = img.pixels[getPixelIndex(img, p.x, p.y)] ? 0 : 1;
         paint(e);
       },
-      onmousemove: (e: MouseEvent) => { if (s.drawing) paint(e); },
-      onmouseup: () => { s.drawing = false; },
-      onmouseleave: () => { s.drawing = false; },
-
+      onmousemove: (e: MouseEvent) => { if (state.drawing) paint(e); },
+      onmouseup: () => { state.drawing = false; },
+      onmouseleave: () => { state.drawing = false; },
       ondragover: (e: DragEvent) => {
         e.preventDefault();
         e.dataTransfer!.dropEffect = "copy";
       },
+
       ondrop: (e: DragEvent) => {
         e.preventDefault();
         const file = e.dataTransfer?.files[0];
         if (!file || !file.type.startsWith("image/")) return;
+
         const url = URL.createObjectURL(file);
         const htmlImg = new Image();
         htmlImg.onload = () => {
+          // Draw the dropped image into an offscreen canvas to read pixel data
           const offscreen = document.createElement("canvas");
+          offscreen.width = htmlImg.width;
+          offscreen.height = htmlImg.height;
           const ctx = offscreen.getContext("2d")!;
+          ctx.drawImage(htmlImg, 0, 0);
+
+          const imageData = ctx.getImageData(0, 0, htmlImg.width, htmlImg.height);
+
+          // Convert to your pixel format — adjust this to match your img structure
           const scale = Math.min(1, 120 / htmlImg.width, 60 / htmlImg.height);
           const w = Math.round(htmlImg.width * scale);
           const h = Math.round(htmlImg.height * scale);
+
           offscreen.width = w;
           offscreen.height = h;
-          ctx.drawImage(htmlImg, 0, 0, w, h);
-          const imageData = ctx.getImageData(0, 0, w, h);
+          ctx.drawImage(htmlImg, 0, 0, w, h);  // scales the image down while drawing
           img.width = w;
           img.height = h;
+          // then read imageData from the scaled offscreen canvas as before
           img.pixels = new Uint8Array(w * h).map((_, i) => {
-            const r = imageData.data[i * 4];
-            const g = imageData.data[i * 4 + 1];
-            const b = imageData.data[i * 4 + 2];
-            const a = imageData.data[i * 4 + 3];
+            const r = imageData.data[i * 4] || 0;
+            const g = imageData.data[i * 4 + 1] || 0;
+            const b = imageData.data[i * 4 + 2] || 0;
+            const a = imageData.data[i * 4 + 3] || 0;
+            // transparent = 0, dark pixels = 1, light pixels = 0
             return a > 128 && (r * 299 + g * 587 + b * 114) < 128_000 ? 0 : 1;
           });
+
           URL.revokeObjectURL(url);
           m.redraw();
         };
@@ -942,7 +916,7 @@ async function clearAll() {
 }
 
 // Expose globals referenced by topbar inline handlers
-Object.assign(window, { loadBin, exportBin, addSection, clearAll, cycleTheme, changeDisplayLayout });
+Object.assign(window, { loadBin, exportBin, addSection, clearAll, cycleTheme });
 
 // window.addEventListener("beforeunload", (e) => {
 //   if (isDirty) e.preventDefault();

ts-editor/style.css

@@ -11,7 +11,7 @@
   --bg-input: #0a0a0a;
   --bg-canvas: #000;
   --bg-xhover: #1e1010;
-  --bg-overlay: rgba(0, 0, 0, .6);
+  --bg-overlay: rgba(0,0,0,.6);
   --bd: #2a2a2a;
   --bd-inner: #1e1e1e;
   --bd-deep: #1c1c1c;
@@ -49,7 +49,7 @@
     --bg-input: #fff;
     --bg-canvas: #fff;
     --bg-xhover: #ffe8e8;
-    --bg-overlay: rgba(0, 0, 0, .4);
+    --bg-overlay: rgba(0,0,0,.4);
     --bd: #d0d0d0;
     --bd-inner: #ddd;
     --bd-deep: #e0e0e0;
@@ -87,7 +87,7 @@
   --bg-input: #fff;
   --bg-canvas: #fff;
   --bg-xhover: #ffe8e8;
-  --bg-overlay: rgba(0, 0, 0, .4);
+  --bg-overlay: rgba(0,0,0,.4);
   --bd: #d0d0d0;
   --bd-inner: #ddd;
   --bd-deep: #e0e0e0;
@@ -252,8 +252,7 @@ body {
   gap: 5px;
   margin-top: 6px
 }
-
-#demo-btns>div {
+#demo-btns > div {
   display: contents;
 }
 
@@ -264,20 +263,17 @@ canvas.pixel-editor {
   max-width: 100%;
   border: 1px solid var(--bd-inner);
 }
-
 .anim-editor {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
-
 .anim-frame-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 3px;
   align-items: center;
 }
-
 .anim-frame-tab {
   display: flex;
   align-items: center;
@@ -289,12 +285,10 @@ canvas.pixel-editor {
   font-size: 11px;
   user-select: none;
 }
-
 .anim-frame-tab.active {
   border-color: var(--accent, #EC0);
   color: var(--accent, #EC0);
 }
-
 .x-btn-sm {
   background: none;
   border: none;
@@ -305,10 +299,7 @@ canvas.pixel-editor {
   line-height: 1;
   opacity: 0.6;
 }
-
-.x-btn-sm:hover {
-  opacity: 1;
-}
+.x-btn-sm:hover { opacity: 1; }
 
 #sec-meta {
   background: var(--bg-sunken);
@@ -689,25 +680,3 @@ select.meta-val {
 .cb.primary:hover {
   background: var(--bg-active)
 }
-
-#mob-add-section {
-  display: none;
-}
-
-canvas.pixel-editor {
-  touch-action: none;
-  /* belt-and-suspenders alongside preventDefault */
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.pv-label select {
-  background: var(--bg-input);
-  color: var(--ac);
-  border: 1px solid var(--bd-inner);
-  border-radius: 3px;
-  padding: 1px 14px;
-  font-family: monospace;
-  font-size: 10px;
-  letter-spacing: .1em;
-}

ts/src/driver.ts

@@ -88,11 +88,6 @@ export class MonoDisplayDriver {
     }
   }
 
-  setSize(w: number, h: number) {
-    this.opts.displayHeight = h;
-    this.opts.displayWidth = w;
-  }
-
   stop(): void { this.renderer?.stop(); }
 }