nutikodu-web: CCM — suvalise varvi salvestus (color picker + suur eelvaade)

dev/nutikodu-web/static/app.js

@@ -1021,6 +1021,26 @@ function initVarvCcmButtons() {
   });
   const fit = document.getElementById("varv-ccm-fit");
   if (fit) fit.addEventListener("click", fitVarvCcm);
+
+  const colEl = document.getElementById("varv-ccm-color");
+  const hexEl = document.getElementById("varv-ccm-hex");
+  const prevEl = document.getElementById("varv-ccm-preview");
+  const capEl = document.getElementById("varv-ccm-capture");
+  const applyColor = (raw) => {
+    const h = String(raw || "").replace("#", "").trim().toUpperCase();
+    if (!/^[0-9A-F]{6}$/.test(h)) return;
+    if (prevEl) prevEl.style.background = "#" + h;
+    if (colEl) colEl.value = "#" + h.toLowerCase();
+    if (hexEl) hexEl.value = h;
+  };
+  if (colEl) colEl.addEventListener("input", () => applyColor(colEl.value));
+  if (hexEl) hexEl.addEventListener("change", () => applyColor(hexEl.value));
+  if (capEl) capEl.addEventListener("click", () => {
+    const h = (hexEl ? hexEl.value : "").replace("#", "").trim().toUpperCase();
+    if (!/^[0-9A-F]{6}$/.test(h)) return;
+    captureVarvRef("c" + h.toLowerCase(), h);
+  });
+
   varvCcmWired = true;
 }
 

dev/nutikodu-web/static/index.html

@@ -164,7 +164,21 @@
           <button type="button" class="btn" data-ref="cyan" data-hex="00FFFF">Tsüaan</button>
           <button type="button" class="btn" data-ref="magenta" data-hex="FF00FF">Magenta</button>
         </div>
-        <div class="varv-power-row">
+        <div class="varv-power-row" style="margin-top:8px">
+          <label class="chk" style="display:inline-flex;align-items:center;gap:8px">
+            <span>Värv:</span>
+            <input type="color" id="varv-ccm-color" value="#00ff00"
+                   style="width:48px;height:32px;border:0;background:none;padding:0" />
+            <input type="text" id="varv-ccm-hex" value="00FF00" maxlength="7"
+                   style="width:96px;padding:6px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text)" />
+          </label>
+          <button type="button" id="varv-ccm-capture" class="btn">Salvesta see värv</button>
+        </div>
+        <div id="varv-ccm-preview"
+             style="width:220px;height:220px;border-radius:12px;border:1px solid var(--border);margin:8px 0;background:#00ff00"></div>
+        <div class="varv-sub">Hoia andurit selle ruudu vastas (ekraan täisheledusel), oota kuni mõõtmine on stabiilne (HELE), siis „Salvesta see värv".</div>
+
+        <div class="varv-power-row" style="margin-top:8px">
           <button type="button" id="varv-ccm-fit" class="btn">Arvuta maatriks</button>
           <span id="varv-ccm-hint" class="varv-sub"></span>
         </div>