diff --git a/README.md b/README.md
index e160f59..6e5369c 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,11 @@
-# Documentation for Projects
+Little projects and notes that don't need their own repo.
+
+
+<a href="https://schmttc.github.io/projects/electronics/">displayModuleImageTester</a>  
+A HTML page designed to help assess the static display capabilites of small display modules, without having to buy one.
+
+
+<a href="https://schmttc.github.io/projects/home_automation/Home%20Assistant%20Water%20Meter/">Home Assistant Water Meter</a>  
+Modifying a modern reedless door sensor to adapt to a home water meter.
+
 
-## <a href="https://schmttc.github.io/projects/Electronics/">Electronics</a>
diff --git a/electronics/README.md b/electronics/README.md
new file mode 100644
index 0000000..cb8ce2a
--- /dev/null
+++ b/electronics/README.md
@@ -0,0 +1,11 @@
+## displayModuleImageTester.html
+<a href="displayModuleImageTester.html">Live Demo</a>
+
+A HTML page designed to help assess the static display capabilites of small display modules, without having to buy one.
+- Load an image, and you can view and compare an approximately scaled output on one or more virtual displays.
+- Accepts the XY pixels, physical dimensions, and can make an attempt to simulate limited colour palletes.
+- Image is cropped to the same number of pixels as the display, then scaled to the physical size
+- The example defaults to a selection of E-Ink and MIPs displays.
+- Coded with GPT-5.5.
+
+<img src="displayModuleImageTester.png" width="400" />
\ No newline at end of file
diff --git a/electronics/displayModuleImageTester.html b/electronics/displayModuleImageTester.html
new file mode 100644
index 0000000..3c3e51f
--- /dev/null
+++ b/electronics/displayModuleImageTester.html
@@ -0,0 +1,847 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Small Display Image Tester</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --bg: #f4f5f1;
+      --ink: #1d2426;
+      --muted: #667174;
+      --line: #cfd7d4;
+      --panel: #ffffff;
+      --accent: #176f83;
+      --accent-strong: #0e4f60;
+      --danger: #aa3d2e;
+      --screen: #171b1d;
+      --shadow: 0 10px 24px rgba(31, 42, 46, 0.11);
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background: var(--bg);
+      color: var(--ink);
+    }
+
+    button,
+    input {
+      font: inherit;
+    }
+
+    .topbar {
+      position: sticky;
+      top: 0;
+      z-index: 5;
+      display: grid;
+      grid-template-columns: auto minmax(320px, 1fr) auto;
+      gap: 18px;
+      align-items: stretch;
+      padding: 14px;
+      border-bottom: 1px solid var(--line);
+      background: rgba(244, 245, 241, 0.96);
+      backdrop-filter: blur(10px);
+    }
+
+    .topbar-toggle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      align-self: start;
+      min-height: 38px;
+      padding: 0 13px;
+      border: 1px solid var(--line);
+      border-radius: 7px;
+      color: var(--ink);
+      background: var(--panel);
+      cursor: pointer;
+      font-weight: 700;
+      white-space: nowrap;
+      box-shadow: var(--shadow);
+    }
+
+    .topbar-toggle:hover {
+      border-color: var(--accent);
+    }
+
+    .topbar.collapsed .loader,
+    .topbar.collapsed .calibration {
+      display: none;
+    }
+
+    .loader {
+      display: grid;
+      grid-template-columns: minmax(170px, 240px) 1fr auto;
+      gap: 10px;
+      align-items: center;
+      min-height: 70px;
+      padding: 10px;
+      border: 1px dashed #9da9a8;
+      border-radius: 8px;
+      background: var(--panel);
+      box-shadow: var(--shadow);
+      transition: border-color 140ms ease, background 140ms ease;
+    }
+
+    .loader.dragging {
+      border-color: var(--accent);
+      background: #eaf6f3;
+    }
+
+    .file-button,
+    .add-button,
+    .url-button,
+    .remove-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 38px;
+      padding: 0 13px;
+      border: 1px solid transparent;
+      border-radius: 7px;
+      cursor: pointer;
+      font-weight: 700;
+      white-space: nowrap;
+    }
+
+    .file-button,
+    .url-button,
+    .add-button {
+      color: white;
+      background: var(--accent);
+    }
+
+    .file-button:hover,
+    .url-button:hover,
+    .add-button:hover {
+      background: var(--accent-strong);
+    }
+
+    .remove-button {
+      width: 38px;
+      padding: 0;
+      color: var(--danger);
+      background: #fff4f1;
+      border-color: #e8b8ad;
+    }
+
+    .drop-copy {
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .drop-copy strong {
+      font-size: 14px;
+    }
+
+    .drop-copy span,
+    .calibration span,
+    .screen-meta {
+      color: var(--muted);
+      font-size: 12px;
+      line-height: 1.35;
+    }
+
+    .url-form {
+      display: grid;
+      grid-template-columns: minmax(160px, 1fr) auto;
+      gap: 8px;
+      min-width: 0;
+    }
+
+    .url-form input,
+    .control input {
+      width: 100%;
+      min-width: 0;
+      min-height: 38px;
+      border: 1px solid var(--line);
+      border-radius: 7px;
+      padding: 0 10px;
+      color: var(--ink);
+      background: #fbfcfa;
+    }
+
+    .calibration {
+      display: grid;
+      grid-template-columns: 50px minmax(170px, 230px) 120px;
+      gap: 12px;
+      align-items: center;
+      padding: 10px;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      background: var(--panel);
+      box-shadow: var(--shadow);
+    }
+
+    .cal-square {
+      width: 50px;
+      height: 50px;
+      border: 2px solid #111;
+      background:
+        linear-gradient(45deg, #111 25%, transparent 25%),
+        linear-gradient(-45deg, #111 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #111 75%),
+        linear-gradient(-45deg, transparent 75%, #111 75%),
+        #fff;
+      background-position: 0 0, 0 25px, 25px -25px, -25px 0;
+      background-size: 50px 50px;
+    }
+
+    .cal-input {
+      display: grid;
+      gap: 5px;
+    }
+
+    .cal-input label {
+      color: #394346;
+      font-size: 12px;
+      font-weight: 700;
+    }
+
+    .cal-input input {
+      width: 100%;
+      min-height: 38px;
+      border: 1px solid var(--line);
+      border-radius: 7px;
+      padding: 0 10px;
+      color: var(--ink);
+      background: #fbfcfa;
+    }
+
+    main {
+      padding: 18px;
+    }
+
+    .screen-grid {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(260px, 1fr));
+      gap: 16px;
+      align-items: start;
+    }
+
+    .screen-card {
+      display: grid;
+      gap: 12px;
+      padding: 14px;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      background: var(--panel);
+      box-shadow: var(--shadow);
+    }
+
+    .screen-header {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .panel-select {
+      display: grid;
+      gap: 5px;
+    }
+
+    .panel-select label {
+      color: #394346;
+      font-size: 12px;
+      font-weight: 700;
+    }
+
+    .panel-select select {
+      width: 100%;
+      min-height: 38px;
+      border: 1px solid var(--line);
+      border-radius: 7px;
+      padding: 0 10px;
+      color: var(--ink);
+      background: #fbfcfa;
+      font: inherit;
+    }
+
+    .screen-title {
+      display: grid;
+      gap: 2px;
+      min-width: 0;
+    }
+
+    .screen-title h2 {
+      margin: 0;
+      font-size: 16px;
+      line-height: 1.2;
+    }
+
+    .title-input {
+      width: 100%;
+      min-width: 0;
+      border: 0;
+      padding: 0;
+      color: var(--ink);
+      background: transparent;
+      font-size: 16px;
+      font-weight: 800;
+      line-height: 1.2;
+    }
+
+    .title-input:focus {
+      outline: 2px solid rgba(23, 111, 131, 0.28);
+      outline-offset: 3px;
+      border-radius: 4px;
+    }
+
+    .controls {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 9px;
+    }
+
+    .control {
+      display: grid;
+      gap: 5px;
+    }
+
+    .control label {
+      color: #394346;
+      font-size: 12px;
+      font-weight: 700;
+    }
+
+    .radio-group {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 7px;
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    .radio-group legend {
+      grid-column: 1 / -1;
+      margin-bottom: 1px;
+      color: #394346;
+      font-size: 12px;
+      font-weight: 700;
+    }
+
+    .radio-option {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      min-height: 30px;
+      padding: 5px 7px;
+      border: 1px solid var(--line);
+      border-radius: 7px;
+      background: #fbfcfa;
+      color: #394346;
+      font-size: 12px;
+      line-height: 1.2;
+    }
+
+    .radio-option input {
+      width: 14px;
+      height: 14px;
+      margin: 0;
+      accent-color: var(--accent);
+    }
+
+    .display-wrap {
+      min-height: 180px;
+      overflow: auto;
+      padding: 14px;
+      border: 1px solid #dbe1df;
+      border-radius: 8px;
+      background:
+        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px),
+        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
+        #eef1ee;
+      background-size: 12px 12px;
+    }
+
+    .display {
+      position: relative;
+      overflow: hidden;
+      width: var(--screen-width);
+      height: var(--screen-height);
+      border: 7px solid var(--screen);
+      border-radius: 6px;
+      background: #0d1112;
+      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 8px 18px rgba(0,0,0,0.18);
+      image-rendering: auto;
+    }
+
+    .display canvas {
+      display: block;
+      width: var(--pixel-width);
+      height: var(--pixel-height);
+      max-width: none;
+      image-rendering: auto;
+      transform: scale(var(--physical-scale-x), var(--physical-scale-y));
+      transform-origin: top left;
+    }
+
+    .empty-state {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      padding: 16px;
+      color: #a7b4b7;
+      text-align: center;
+      font-size: 13px;
+      line-height: 1.35;
+    }
+
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 16px;
+    }
+
+    @media (max-width: 860px) {
+      .topbar,
+      .loader,
+      .url-form,
+      .calibration {
+        grid-template-columns: 1fr;
+      }
+
+      .calibration {
+        justify-items: start;
+      }
+
+      .screen-grid {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      }
+    }
+
+    @media (max-width: 520px) {
+      main {
+        padding: 12px;
+      }
+
+      .topbar {
+        padding: 10px;
+      }
+
+      .controls {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header class="topbar">
+    <button class="topbar-toggle" id="topbarToggle" type="button" aria-expanded="true">Hide controls</button>
+
+    <section class="loader" id="dropZone" aria-label="Image loader">
+      <label class="file-button">
+        Select image
+        <input id="fileInput" type="file" accept="image/*" hidden>
+      </label>
+      <div class="drop-copy">
+        <strong id="imageName">Drop an image here</strong>
+        <span>Use drag and drop, a local file, or an image URL.</span>
+      </div>
+      <form class="url-form" id="urlForm">
+        <input id="urlInput" type="url" placeholder="https://example.com/image.jpg" aria-label="Image URL">
+        <button class="url-button" type="submit">Load URL</button>
+      </form>
+    </section>
+
+    <aside class="calibration" aria-label="Calibration reference">
+      <div class="cal-square" aria-hidden="true"></div>
+      <div>
+        <strong>Calibration</strong>
+        <span>Measure this square on your monitor. The preview sizes use this value plus each display's physical dimensions.</span>
+      </div>
+      <div class="cal-input">
+        <label for="calibrationMm">Measured mm</label>
+        <input id="calibrationMm" type="number" min="1" max="500" step="0.1" value="13">
+      </div>
+    </aside>
+  </header>
+
+  <main>
+    <section class="screen-grid" id="screenGrid" aria-label="Virtual display previews"></section>
+    <div class="actions">
+      <button class="add-button" id="addScreen" type="button">Add screen</button>
+    </div>
+  </main>
+
+  <template id="screenTemplate">
+    <article class="screen-card">
+      <div class="panel-select">
+        <label>Panel</label>
+        <select class="panel-preset-select"></select>
+      </div>
+
+      <div class="screen-header">
+        <div class="screen-title">
+          <input class="title-input" type="text" aria-label="Screen name">
+          <span class="screen-meta"></span>
+        </div>
+        <button class="remove-button" type="button" title="Remove screen" aria-label="Remove screen">x</button>
+      </div>
+
+      <div class="controls">
+        <div class="control">
+          <label>X pixels</label>
+          <input class="width-input" type="number" min="1" max="4096" step="1">
+        </div>
+        <div class="control">
+          <label>Y pixels</label>
+          <input class="height-input" type="number" min="1" max="4096" step="1">
+        </div>
+        <div class="control">
+          <label>X mm</label>
+          <input class="physical-width-input" type="number" min="1" max="1000" step="0.1">
+        </div>
+        <div class="control">
+          <label>Y mm</label>
+          <input class="physical-height-input" type="number" min="1" max="1000" step="0.1">
+        </div>
+      </div>
+
+      <fieldset class="radio-group">
+        <legend>Colour mode</legend>
+        <label class="radio-option">
+          <input type="radio" value="full">
+          Full colour
+        </label>
+        <label class="radio-option">
+          <input type="radio" value="64">
+          64 colour
+        </label>
+        <label class="radio-option">
+          <input type="radio" value="gray16">
+          16 bit greyscale
+        </label>
+        <label class="radio-option">
+          <input type="radio" value="mono">
+          Monochrome
+        </label>
+      </fieldset>
+
+      <div class="display-wrap">
+        <div class="display">
+          <canvas aria-label="Cropped image preview"></canvas>
+          <div class="empty-state"></div>
+        </div>
+      </div>
+    </article>
+  </template>
+
+  <script>
+    const panelPresets = [
+      { key: "gdeq031t10", name: "GDEQ031T10", width: 240, height: 320, physicalWidth: 47, physicalHeight: 63 },
+      { key: "ls032b7dd02", name: "LS032B7DD02", width: 336, height: 536, physicalWidth: 47, physicalHeight: 76 },
+      { key: "jdi-lpm027m128c", name: "JDI-LPM027M128C", width: 240, height: 400, physicalWidth: 35, physicalHeight: 59 },
+      { key: "426-epaper", name: "4.26inch E-Paper", width: 480, height: 800, physicalWidth: 56, physicalHeight: 93 }
+    ];
+
+    const defaultScreens = panelPresets.map((panel) => ({
+      ...panel,
+      panelKey: panel.key,
+      colorMode: "full"
+    }));
+
+    const state = {
+      imageSrc: "",
+      imageEl: null,
+      imageName: "Drop an image here",
+      calibrationMm: 13,
+      screens: defaultScreens.map((screen) => ({ ...screen }))
+    };
+
+    const topbar = document.querySelector(".topbar");
+    const topbarToggle = document.querySelector("#topbarToggle");
+    const dropZone = document.querySelector("#dropZone");
+    const fileInput = document.querySelector("#fileInput");
+    const urlForm = document.querySelector("#urlForm");
+    const urlInput = document.querySelector("#urlInput");
+    const imageName = document.querySelector("#imageName");
+    const calibrationMm = document.querySelector("#calibrationMm");
+    const screenGrid = document.querySelector("#screenGrid");
+    const addScreen = document.querySelector("#addScreen");
+    const template = document.querySelector("#screenTemplate");
+
+    function clampNumber(value, fallback, min, max) {
+      const parsed = Number(value);
+      if (!Number.isFinite(parsed)) return fallback;
+      return Math.min(max, Math.max(min, Math.round(parsed)));
+    }
+
+    function clampFloat(value, fallback, min, max) {
+      const parsed = Number(value);
+      if (!Number.isFinite(parsed)) return fallback;
+      return Math.min(max, Math.max(min, parsed));
+    }
+
+    function loadImage(src, name) {
+      const image = new Image();
+      state.imageName = `Loading ${name || "image"}...`;
+      imageName.textContent = state.imageName;
+      renderScreens();
+
+      image.onload = () => {
+        state.imageSrc = src;
+        state.imageEl = image;
+        state.imageName = name || "Loaded image";
+        imageName.textContent = state.imageName;
+        renderScreens();
+      };
+
+      image.onerror = () => {
+        state.imageSrc = "";
+        state.imageEl = null;
+        state.imageName = "Image could not be loaded";
+        imageName.textContent = state.imageName;
+        renderScreens();
+      };
+
+      image.src = src;
+    }
+
+    function drawCroppedImage(canvas, screen) {
+      const image = state.imageEl;
+      if (!image) return;
+
+      canvas.width = screen.width;
+      canvas.height = screen.height;
+
+      const context = canvas.getContext("2d");
+      const sourceWidth = Math.min(screen.width, image.naturalWidth);
+      const sourceHeight = Math.min(screen.height, image.naturalHeight);
+      const sourceX = Math.max(0, Math.floor((image.naturalWidth - sourceWidth) / 2));
+      const sourceY = Math.max(0, Math.floor((image.naturalHeight - sourceHeight) / 2));
+      const destinationX = Math.floor((screen.width - sourceWidth) / 2);
+      const destinationY = Math.floor((screen.height - sourceHeight) / 2);
+
+      context.clearRect(0, 0, screen.width, screen.height);
+      context.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destinationX, destinationY, sourceWidth, sourceHeight);
+      applyColorMode(context, screen);
+    }
+
+    function applyColorMode(context, screen) {
+      if (screen.colorMode === "full") return;
+
+      const imageData = context.getImageData(0, 0, screen.width, screen.height);
+      const pixels = imageData.data;
+
+      for (let index = 0; index < pixels.length; index += 4) {
+        const red = pixels[index];
+        const green = pixels[index + 1];
+        const blue = pixels[index + 2];
+        const luminance = red * 0.2126 + green * 0.7152 + blue * 0.0722;
+
+        if (screen.colorMode === "64") {
+          pixels[index] = Math.round(red / 85) * 85;
+          pixels[index + 1] = Math.round(green / 85) * 85;
+          pixels[index + 2] = Math.round(blue / 85) * 85;
+        }
+
+        if (screen.colorMode === "gray16") {
+          const gray = Math.round(luminance);
+          pixels[index] = gray;
+          pixels[index + 1] = gray;
+          pixels[index + 2] = gray;
+        }
+
+        if (screen.colorMode === "mono") {
+          const mono = luminance >= 128 ? 255 : 0;
+          pixels[index] = mono;
+          pixels[index + 1] = mono;
+          pixels[index + 2] = mono;
+        }
+      }
+
+      context.putImageData(imageData, 0, 0);
+    }
+
+    function loadFile(file) {
+      if (!file || !file.type.startsWith("image/")) return;
+      loadImage(URL.createObjectURL(file), file.name);
+    }
+
+    function renderScreens() {
+      screenGrid.innerHTML = "";
+      const pxPerMeasuredMm = 50 / state.calibrationMm;
+
+      state.screens.forEach((screen, index) => {
+        const clone = template.content.firstElementChild.cloneNode(true);
+        const panelSelect = clone.querySelector(".panel-preset-select");
+        const titleInput = clone.querySelector(".title-input");
+        const meta = clone.querySelector(".screen-meta");
+        const widthInput = clone.querySelector(".width-input");
+        const heightInput = clone.querySelector(".height-input");
+        const physicalWidthInput = clone.querySelector(".physical-width-input");
+        const physicalHeightInput = clone.querySelector(".physical-height-input");
+        const colorInputs = clone.querySelectorAll(".radio-group input");
+        const display = clone.querySelector(".display");
+        const canvas = clone.querySelector("canvas");
+        const emptyState = clone.querySelector(".empty-state");
+        const removeButton = clone.querySelector(".remove-button");
+        const displayWidth = screen.physicalWidth * pxPerMeasuredMm;
+        const displayHeight = screen.physicalHeight * pxPerMeasuredMm;
+        const physicalScaleX = displayWidth / screen.width;
+        const physicalScaleY = displayHeight / screen.height;
+        const pixelDiagonal = Math.hypot(screen.width, screen.height);
+        const inchDiagonal = Math.hypot(screen.physicalWidth, screen.physicalHeight) / 25.4;
+        const ppi = pixelDiagonal / inchDiagonal;
+
+        panelSelect.innerHTML = "";
+        const customOption = document.createElement("option");
+        customOption.value = "custom";
+        customOption.textContent = "Custom";
+        panelSelect.appendChild(customOption);
+        panelPresets.forEach((panel) => {
+          const option = document.createElement("option");
+          option.value = panel.key;
+          option.textContent = panel.name;
+          panelSelect.appendChild(option);
+        });
+        panelSelect.value = screen.panelKey || "custom";
+
+        titleInput.value = screen.name || `Screen ${index + 1}`;
+        meta.textContent = `${screen.width} x ${screen.height} px, ${screen.physicalWidth} x ${screen.physicalHeight} mm, ${ppi.toFixed(0)} ppi`;
+        widthInput.value = screen.width;
+        heightInput.value = screen.height;
+        physicalWidthInput.value = screen.physicalWidth;
+        physicalHeightInput.value = screen.physicalHeight;
+        colorInputs.forEach((input) => {
+          input.name = `color-mode-${index}`;
+          input.checked = input.value === screen.colorMode;
+          input.addEventListener("change", () => {
+            screen.colorMode = input.value;
+            renderScreens();
+          });
+        });
+
+        display.style.setProperty("--screen-width", `${displayWidth + 14}px`);
+        display.style.setProperty("--screen-height", `${displayHeight + 14}px`);
+        display.style.setProperty("--pixel-width", `${screen.width}px`);
+        display.style.setProperty("--pixel-height", `${screen.height}px`);
+        display.style.setProperty("--physical-scale-x", physicalScaleX);
+        display.style.setProperty("--physical-scale-y", physicalScaleY);
+
+        if (state.imageEl) {
+          drawCroppedImage(canvas, screen);
+          emptyState.hidden = true;
+        } else {
+          canvas.width = screen.width;
+          canvas.height = screen.height;
+          emptyState.hidden = false;
+        }
+
+        panelSelect.addEventListener("change", () => {
+          const selectedPanel = panelPresets.find((panel) => panel.key === panelSelect.value);
+          if (selectedPanel) {
+            Object.assign(screen, {
+              panelKey: selectedPanel.key,
+              name: selectedPanel.name,
+              width: selectedPanel.width,
+              height: selectedPanel.height,
+              physicalWidth: selectedPanel.physicalWidth,
+              physicalHeight: selectedPanel.physicalHeight
+            });
+          } else {
+            screen.panelKey = "custom";
+          }
+          renderScreens();
+        });
+
+        titleInput.addEventListener("change", () => {
+          screen.name = titleInput.value.trim() || `Screen ${index + 1}`;
+          screen.panelKey = "custom";
+          renderScreens();
+        });
+
+        widthInput.addEventListener("change", () => {
+          screen.width = clampNumber(widthInput.value, screen.width, 1, 4096);
+          screen.panelKey = "custom";
+          renderScreens();
+        });
+
+        heightInput.addEventListener("change", () => {
+          screen.height = clampNumber(heightInput.value, screen.height, 1, 4096);
+          screen.panelKey = "custom";
+          renderScreens();
+        });
+
+        physicalWidthInput.addEventListener("change", () => {
+          screen.physicalWidth = clampFloat(physicalWidthInput.value, screen.physicalWidth, 1, 1000);
+          screen.panelKey = "custom";
+          renderScreens();
+        });
+
+        physicalHeightInput.addEventListener("change", () => {
+          screen.physicalHeight = clampFloat(physicalHeightInput.value, screen.physicalHeight, 1, 1000);
+          screen.panelKey = "custom";
+          renderScreens();
+        });
+
+        removeButton.addEventListener("click", () => {
+          state.screens.splice(index, 1);
+          renderScreens();
+        });
+
+        screenGrid.appendChild(clone);
+      });
+    }
+
+    fileInput.addEventListener("change", (event) => {
+      loadFile(event.target.files[0]);
+      fileInput.value = "";
+    });
+
+    dropZone.addEventListener("dragover", (event) => {
+      event.preventDefault();
+      dropZone.classList.add("dragging");
+    });
+
+    dropZone.addEventListener("dragleave", () => {
+      dropZone.classList.remove("dragging");
+    });
+
+    dropZone.addEventListener("drop", (event) => {
+      event.preventDefault();
+      dropZone.classList.remove("dragging");
+      loadFile(event.dataTransfer.files[0]);
+    });
+
+    urlForm.addEventListener("submit", (event) => {
+      event.preventDefault();
+      const url = urlInput.value.trim();
+      if (!url) return;
+      loadImage(url, url.split("/").pop() || "URL image");
+    });
+
+    calibrationMm.addEventListener("change", () => {
+      state.calibrationMm = clampFloat(calibrationMm.value, state.calibrationMm, 1, 500);
+      calibrationMm.value = state.calibrationMm;
+      renderScreens();
+    });
+
+    addScreen.addEventListener("click", () => {
+      state.screens.push({ panelKey: "custom", name: `Screen ${state.screens.length + 1}`, width: 320, height: 240, physicalWidth: 50, physicalHeight: 38, colorMode: "full" });
+      renderScreens();
+    });
+
+    topbarToggle.addEventListener("click", () => {
+      const isCollapsed = topbar.classList.toggle("collapsed");
+      topbarToggle.textContent = isCollapsed ? "Show controls" : "Hide controls";
+      topbarToggle.setAttribute("aria-expanded", String(!isCollapsed));
+    });
+
+    renderScreens();
+  </script>
+</body>
+</html>
diff --git a/electronics/displayModuleImageTester.png b/electronics/displayModuleImageTester.png
new file mode 100644
index 0000000..957163b
Binary files /dev/null and b/electronics/displayModuleImageTester.png differ
diff --git a/Home Automation/Home Assistant Water Meter/1.png b/home_automation/Home Assistant Water Meter/1.png
similarity index 100%
rename from Home Automation/Home Assistant Water Meter/1.png
rename to home_automation/Home Assistant Water Meter/1.png
diff --git a/Home Automation/Home Assistant Water Meter/2.png b/home_automation/Home Assistant Water Meter/2.png
similarity index 100%
rename from Home Automation/Home Assistant Water Meter/2.png
rename to home_automation/Home Assistant Water Meter/2.png
diff --git a/Home Automation/Home Assistant Water Meter/3.png b/home_automation/Home Assistant Water Meter/3.png
similarity index 100%
rename from Home Automation/Home Assistant Water Meter/3.png
rename to home_automation/Home Assistant Water Meter/3.png
diff --git a/Home Automation/Home Assistant Water Meter/4.png b/home_automation/Home Assistant Water Meter/4.png
similarity index 100%
rename from Home Automation/Home Assistant Water Meter/4.png
rename to home_automation/Home Assistant Water Meter/4.png
diff --git a/Home Automation/Home Assistant Water Meter/5.png b/home_automation/Home Assistant Water Meter/5.png
similarity index 100%
rename from Home Automation/Home Assistant Water Meter/5.png
rename to home_automation/Home Assistant Water Meter/5.png
diff --git a/Home Automation/Home Assistant Water Meter/6.png b/home_automation/Home Assistant Water Meter/6.png
similarity index 100%
rename from Home Automation/Home Assistant Water Meter/6.png
rename to home_automation/Home Assistant Water Meter/6.png
diff --git a/Home Automation/Home Assistant Water Meter/7.png b/home_automation/Home Assistant Water Meter/7.png
similarity index 100%
rename from Home Automation/Home Assistant Water Meter/7.png
rename to home_automation/Home Assistant Water Meter/7.png
diff --git a/Home Automation/Home Assistant Water Meter/README.md b/home_automation/Home Assistant Water Meter/README.md
similarity index 94%
rename from Home Automation/Home Assistant Water Meter/README.md
rename to home_automation/Home Assistant Water Meter/README.md
index 644c7d1..f82e5d4 100644
--- a/Home Automation/Home Assistant Water Meter/README.md	
+++ b/home_automation/Home Assistant Water Meter/README.md	
@@ -1,3 +1,5 @@
+# Home Assistant Water Meter
+
 Here’s how I modified a modern reedless door sensor for my home water meter.
 
 **TOC**
@@ -5,7 +7,7 @@ Here’s how I modified a modern reedless door sensor for my home water meter.
 - [Home Assistant Configuration](#home-assistant-configuration)
 
 
-# Modify Zigbee Door/Window Sensor
+## Modify Zigbee Door/Window Sensor
 
 Generic Zigbee door/window sensor:
 
@@ -45,7 +47,7 @@ On my meter the hall sensor is located approx 5mm inside the probe hole.
 ![](./7.png)
 
 
-# Home Assistant Configuration
+## Home Assistant Configuration
 
 - Add the zigbee sensor to Home Assistant as device name ‘WaterMain’
 
diff --git a/Home Automation/Powerpal Monitor/powermon.yaml b/home_automation/Powerpal Monitor/powermon.yaml
similarity index 100%
rename from Home Automation/Powerpal Monitor/powermon.yaml
rename to home_automation/Powerpal Monitor/powermon.yaml
