refactor(measurement): modularize editor JS

Move inline <script> from measurement.html into 8 modules under src/editor/. measurement.js adds the static-file routes that serve them to Node-RED. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-28 09:10:05 +02:00
10 changed files with 1570 additions and 270 deletions
--- a/measurement.html
+++ b/measurement.html
@@ -10,6 +10,16 @@
 -->
 <script src="/measurement/menu.js"></script> <!-- Load the menu script for dynamic dropdowns -->
 <script src="/measurement/configData.js"></script> <!-- Load the config script for node information -->
 <!-- Editor JS modules — see nodes/measurement/src/editor/. Loaded in
     dependency order: index.js (namespace + helpers) → visuals → handlers. -->
 <script src="/measurement/editor/index.js"></script>
 <script src="/measurement/editor/hover-couple.js"></script>
 <script src="/measurement/editor/pipeline-diagram.js"></script>
 <script src="/measurement/editor/scaling-chart.js"></script>
 <script src="/measurement/editor/smoothing-sparkline.js"></script>
 <script src="/measurement/editor/digital-channels.js"></script>
 <script src="/measurement/editor/oneditprepare.js"></script>
 <script src="/measurement/editor/oneditsave.js"></script>
 <script>
  RED.nodes.registerType("measurement", {
@@ -72,185 +82,8 @@
      return (this.positionIcon || "") + " " + (this.assetType || "Measurement") + modeTag;
    },
-    oneditprepare: function() {
+    oneditprepare: function () { window.MeasEditor.oneditprepare.call(this); },
-        const node = this;
+    oneditsave:    function () { window.MeasEditor.oneditsave.call(this); },
        // === Asset / logger / position placeholders (dynamic menus) ===
        // Kick these off FIRST so that any error in the downstream mode
        // logic can never block the shared menus. Historical regression:
        // a ReferenceError in the mode block aborted oneditprepare and
        // stopped the asset menu from rendering at all.
        const waitForMenuData = () => {
            if (window.EVOLV?.nodes?.measurement?.initEditor) {
                window.EVOLV.nodes.measurement.initEditor(node);
            } else {
                setTimeout(waitForMenuData, 50);
            }
        };
        waitForMenuData();
        // IMPORTANT: all DOM references are resolved up front so helper
        // functions called during initial applyMode() don't trip over the
        // Temporal Dead Zone on later `const` declarations.
        const modeSelect   = document.getElementById('node-input-mode');
        const analogBlock  = document.getElementById('analog-only-fields');
        const digitalBlock = document.getElementById('digital-only-fields');
        const modeHint     = document.getElementById('mode-hint');
        const channelsArea = document.getElementById('node-input-channels');
        const channelsHint = document.getElementById('channels-validation');
        // Initialise the mode <select> from the saved node.mode. Legacy
        // nodes (saved before the mode field existed) fall back to
        // 'analog' so they keep behaving exactly like before.
        const initialMode = (node.mode === 'digital' || node.mode === 'analog') ? node.mode : 'analog';
        if (modeSelect) modeSelect.value = initialMode;
        // Populate the channels textarea from the saved node.channels
        // (stored as a raw JSON string; parsing happens server-side).
        if (channelsArea && typeof node.channels === 'string') {
            channelsArea.value = node.channels;
        }
        function validateChannelsJson() {
            if (!channelsHint) return;
            if (!modeSelect || modeSelect.value !== 'digital') {
                channelsHint.textContent = '';
                return;
            }
            const raw = (channelsArea && channelsArea.value || '').trim();
            if (!raw || raw === '[]') {
                channelsHint.innerHTML = '<span style="color:#b45309;">Digital mode with no channels — no measurements will be emitted.</span>';
                return;
            }
            try {
                const parsed = JSON.parse(raw);
                if (!Array.isArray(parsed)) throw new Error('must be an array');
                const missing = parsed
                    .map((c, i) => (c && c.key && c.type ? null : 'entry ' + i + ': missing key or type'))
                    .filter(Boolean);
                if (missing.length) {
                    channelsHint.innerHTML = '<span style="color:#b45309;">' + missing.join('; ') + '</span>';
                } else {
                    channelsHint.innerHTML = '<span style="color:#047857;">' + parsed.length + ' channel(s) defined: ' + parsed.map((c) => c.key).join(', ') + '</span>';
                }
            } catch (e) {
                channelsHint.innerHTML = '<span style="color:#b91c1c;">Invalid JSON: ' + e.message + '</span>';
            }
        }
        function applyMode(mode) {
            const isDigital = mode === 'digital';
            if (analogBlock)  analogBlock.style.display  = isDigital ? 'none' : 'block';
            if (digitalBlock) digitalBlock.style.display = isDigital ? 'block' : 'none';
            if (modeHint) {
                modeHint.textContent = isDigital
                    ? 'msg.payload must be an OBJECT, e.g. {"temperature": 22.5, "humidity": 45}. Define each key below.'
                    : 'msg.payload must be a NUMBER (or numeric string). Configure scaling/smoothing below.';
            }
            validateChannelsJson();
        }
        if (modeSelect) modeSelect.addEventListener('change', (e) => applyMode(e.target.value));
        if (channelsArea) channelsArea.addEventListener('input', validateChannelsJson);
        try { applyMode(initialMode); } catch (e) {
            console.error('measurement: applyMode failed', e);
        }
        // === Smoothing method dropdown (analog only) ===
        const smoothMethodSelect = document.getElementById('node-input-smooth_method');
        const options = window.EVOLV?.nodes?.measurement?.config?.smoothing?.smoothMethod?.rules?.values || [];
        smoothMethodSelect.innerHTML = '';
        const emptyOption = document.createElement('option');
        emptyOption.value = '';
        emptyOption.textContent = 'Select method...';
        smoothMethodSelect.appendChild(emptyOption);
        options.forEach(option => {
            const optionElement = document.createElement('option');
            optionElement.value = option.value;
            optionElement.textContent = option.value;
            optionElement.title = option.description;
            smoothMethodSelect.appendChild(optionElement);
        });
        if (node.smooth_method) smoothMethodSelect.value = node.smooth_method;
        // === Scale rows toggle (analog only) ===
        const chk = document.getElementById('node-input-scaling');
        const rowMin = document.getElementById('row-input-i_min');
        const rowMax = document.getElementById('row-input-i_max');
        function toggleScalingRows() {
            const show = chk.checked;
            rowMin.style.display = show ? 'block' : 'none';
            rowMax.style.display = show ? 'block' : 'none';
        }
        chk.addEventListener('change', toggleScalingRows);
        toggleScalingRows();
        //------------------- END OF CUSTOM config UI ELEMENTS ------------------- //
    },
    oneditsave: function () {
      const node = this;
      // Validate asset properties using the asset menu
      if (window.EVOLV?.nodes?.measurement?.assetMenu?.saveEditor) {
        success = window.EVOLV.nodes.measurement.assetMenu.saveEditor(this);
      }
      // Validate logger properties using the logger menu
      if (window.EVOLV?.nodes?.measurement?.loggerMenu?.saveEditor) {
        success = window.EVOLV.nodes.measurement.loggerMenu.saveEditor(node);
      }
      // save position field
      if (window.EVOLV?.nodes?.measurement?.positionMenu?.saveEditor) {
        window.EVOLV.nodes.measurement.positionMenu.saveEditor(this);
      }
      // Mode is the top-level switch. Always save it first; its value
      // drives which other fields are meaningful.
      node.mode = document.getElementById('node-input-mode').value || 'analog';
      // Channels JSON (digital). We store the raw string and let the
      // server-side nodeClass.js parse it so we can surface parse errors
      // at deploy time instead of silently dropping bad config.
      node.channels = document.getElementById('node-input-channels').value || '[]';
      // Analog smoothing method.
      node.smooth_method = document.getElementById('node-input-smooth_method').value || '';
      // Save checkbox properties (always safe to read regardless of mode;
      // these elements exist in the DOM even when their section is hidden).
      ["scaling", "simulator"].forEach(
        (field) => (node[field] = document.getElementById(`node-input-${field}`).checked)
      );
      ["i_min", "i_max", "i_offset", "o_min", "o_max", "count"].forEach(
        (field) => (node[field] = parseFloat(document.getElementById(`node-input-${field}`).value) || 0)
      );
      // Calibration stability threshold: 0 is a valid (very strict) value, so
      // fall back to the default 0.01 only when the field is empty / NaN.
      const stRaw = document.getElementById('node-input-stabilityThreshold').value;
      const stParsed = parseFloat(stRaw);
      node.stabilityThreshold = Number.isFinite(stParsed) ? stParsed : 0.01;
      // Mode-dependent validation. In digital mode we don't care about
      // scaling completeness (the channels have their own per-channel
      // scaling); in analog mode we still warn about half-filled ranges.
      if (node.mode === 'analog' && node.scaling && (isNaN(node.i_min) || isNaN(node.i_max))) {
        RED.notify("Scaling enabled, but input range is incomplete!", "error");
      }
      if (node.mode === 'digital') {
        try {
          const parsed = JSON.parse(node.channels || '[]');
          if (!Array.isArray(parsed) || parsed.length === 0) {
            RED.notify("Digital mode: no channels defined. The node will emit nothing.", "warning");
          }
        } catch (e) {
          RED.notify("Digital mode: Channels JSON is invalid (" + e.message + ")", "error");
        }
      }
    },
  });
 </script>
@@ -258,98 +91,495 @@
 <script type="text/html" data-template-name="measurement">
-  <!-- Input mode -->
+  <style>
    /* === Section headers ============================================== */
    .meas-section { margin-top: 8px; }
    .meas-section h4 { margin: 14px 0 6px 0; }
    .meas-help {
      font-size: 12px; color: #777; margin: 0 0 8px 0;
    }
    /* === Mode cards =================================================== */
    .meas-mode-cards { display: flex; gap: 10px; margin: 6px 0 8px 0; }
    .meas-mode-card {
      flex: 1; cursor: pointer;
      border: 2px solid #ccc; border-radius: 6px;
      padding: 10px 12px; background: #fff;
      transition: border-color 80ms, background 80ms;
    }
    .meas-mode-card:hover { border-color: #888; background: #fafafa; }
    .meas-mode-card.meas-mode-active {
      border-color: #0c99d9; background: #f0f8ff;
    }
    .meas-mode-card .meas-mode-title {
      font-weight: 600; font-size: 13px; color: #222;
    }
    .meas-mode-card .meas-mode-sub {
      font-size: 11px; color: #666; margin-top: 4px;
    }
    .meas-mode-card .meas-mode-payload {
      font-family: monospace; font-size: 11px; color: #1F4E79;
      margin-top: 4px; background: #f4f8fc; padding: 2px 6px;
      border-radius: 3px; display: inline-block;
    }
    /* === Pipeline diagram ============================================= */
    .meas-pipeline-svg {
      display: block; width: 100%; max-width: 720px;
      background: #fff; border: 1px solid #e5e5e5; border-radius: 4px;
    }
    .meas-stage rect {
      transition: opacity 80ms, stroke-width 80ms;
    }
    .meas-stage-disabled rect { opacity: 0.35; }
    .meas-stage-disabled text { opacity: 0.5; }
    .meas-stage-highlight rect {
      stroke-width: 3 !important; stroke: #0c99d9 !important;
    }
    /* === Two-column diag layout (used by scaling chart) =============== */
    .meas-diag { display: flex; gap: 24px; align-items: flex-start; margin: 0 0 10px 0; flex-wrap: wrap; }
    .meas-diag-side { width: 250px; flex: 0 0 250px; display: flex; flex-direction: column; gap: 5px; }
    .meas-diag-side .meas-row {
      display: grid; grid-template-columns: minmax(0, 1fr) 80px 16px; align-items: center;
      gap: 6px; padding: 4px 6px 4px 10px; border-left: 4px solid #ccc;
      background: #fafafa; border-radius: 3px; font-size: 11px;
      min-width: 0;
    }
    .meas-diag-side .meas-row:hover { background: #f0f0f0; }
    .meas-diag-side .meas-row label { font-weight: 600; margin: 0; line-height: 1.2; }
    .meas-diag-side .meas-row .meas-sub {
      grid-column: 1; font-size: 10px; color: #888; font-weight: 400;
    }
    .meas-diag-side .meas-row input[type=number] {
      width: 100%; height: 22px; box-sizing: border-box; font-size: 11px;
      padding: 1px 4px; margin: 0; border: 1px solid #ccc; border-radius: 3px;
      background: #fff;
    }
    .meas-diag-side .meas-row input[type=number]:focus {
      outline: 1px solid #0c99d9; border-color: #0c99d9;
    }
    .meas-diag-side .meas-row .meas-unit { color: #888; font-size: 10px; }
    .meas-diag-svg-wrap { flex: 1; min-width: 240px; }
    /* Border colour per stage so the side-row matches its SVG stage. */
    .meas-row[data-stroke="#1F4E79"] { border-left-color: #1F4E79; }
    .meas-row[data-stroke="#1E8449"] { border-left-color: #1E8449; }
    .meas-row[data-stroke="#D68910"] { border-left-color: #D68910; }
    .meas-row[data-stroke="#7D3C98"] { border-left-color: #7D3C98; }
    .meas-row[data-stroke="#C0392B"] { border-left-color: #C0392B; }
    /* === Digital channel cards ======================================= */
    .meas-ch-empty {
      font-size: 12px; color: #888; font-style: italic;
      padding: 10px 12px; background: #fafafa; border: 1px dashed #ddd;
      border-radius: 4px;
    }
    .meas-ch-card {
      border: 1px solid #ddd; border-radius: 4px;
      background: #fff; margin-bottom: 6px;
    }
    .meas-ch-head {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) 110px 110px minmax(0, 1fr) 70px 28px;
      gap: 6px; align-items: center;
      padding: 6px 8px;
    }
    .meas-ch-num-badge {
      font-size: 10px; color: #888; font-family: monospace;
      text-align: center;
    }
    .meas-ch-input {
      height: 24px; box-sizing: border-box; font-size: 12px;
      padding: 2px 5px; margin: 0; border: 1px solid #ccc; border-radius: 3px;
      background: #fff; min-width: 0;
    }
    .meas-ch-input:focus { outline: 1px solid #0c99d9; border-color: #0c99d9; }
    .meas-ch-input.meas-ch-err { border-color: #C0392B; background: #fdecea; }
    .meas-ch-num { width: 100%; }
    /* Unit cell wraps either a <select> (canonical type) or a free-text
       <input> (custom type). Type-change swaps the wrapper's contents
       without rerendering the rest of the card. Make the inner element
       fill the grid cell. */
    .meas-ch-unit-cell { min-width: 0; }
    .meas-ch-unit-cell > * { width: 100%; }
    .meas-ch-btn {
      height: 24px; box-sizing: border-box;
      padding: 0 8px; border: 1px solid #ccc; border-radius: 3px;
      background: #f5f5f5; cursor: pointer; font-size: 11px;
    }
    .meas-ch-btn:hover { background: #ececec; }
    .meas-ch-btn-del {
      width: 28px; padding: 0; color: #C0392B; font-weight: bold;
    }
    .meas-ch-btn-del:hover { background: #fdecea; }
    .meas-ch-adv {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
      padding: 8px 10px 10px 44px; border-top: 1px solid #eee;
      background: #fafbfd;
    }
    .meas-ch-sub {
      background: #fff; border: 1px solid #eee; border-radius: 3px;
      padding: 6px 8px;
    }
    .meas-ch-sub-title {
      font-size: 11px; font-weight: 600; color: #444; margin-bottom: 4px;
    }
    .meas-ch-sub-grid {
      display: grid; grid-template-columns: auto 1fr; gap: 4px 6px;
      align-items: center;
    }
    .meas-ch-sub-grid label { font-size: 10px; color: #666; margin: 0; }
    .meas-ch-sub-grid.meas-ch-dim { opacity: 0.4; pointer-events: none; }
    .meas-ch-cb {
      font-size: 11px; font-weight: 600; color: #444;
      display: inline-flex; align-items: center; gap: 4px; margin: 0;
    }
    .meas-ch-actions {
      display: flex; gap: 8px; align-items: center; margin: 8px 0;
    }
    .meas-ch-actions .meas-ch-btn-add {
      background: #1E8449; color: #fff; border-color: #186b3a;
    }
    .meas-ch-actions .meas-ch-btn-add:hover { background: #186b3a; }
  </style>
  <!-- ================================================================ -->
  <!-- INPUT MODE                                                       -->
  <!-- ================================================================ -->
  <div class="meas-section">
    <h4>Input mode</h4>
    <p class="meas-help">Pick how this node should interpret <code>msg.payload</code>. Click a card to switch — the dropdown stays in sync.</p>
    <div class="meas-mode-cards">
      <div class="meas-mode-card" data-mode="analog">
        <div class="meas-mode-title"><i class="fa fa-tachometer"></i> Analog</div>
        <div class="meas-mode-sub">One scalar per message (classic PLC / 4–20 mA).</div>
        <div class="meas-mode-payload">msg.payload = 22.5</div>
      </div>
      <div class="meas-mode-card" data-mode="digital">
        <div class="meas-mode-title"><i class="fa fa-sitemap"></i> Digital</div>
        <div class="meas-mode-sub">Object payload, many channels per message (MQTT / IoT).</div>
        <div class="meas-mode-payload">msg.payload = {"temperature": 22.5, "humidity": 45}</div>
      </div>
    </div>
    <div class="form-row">
-    <label for="node-input-mode"><i class="fa fa-exchange"></i> Input Mode</label>
+      <label for="node-input-mode"><i class="fa fa-exchange"></i> Mode</label>
      <select id="node-input-mode" style="width:60%;">
        <option value="analog">analog — one scalar per msg.payload (classic PLC)</option>
        <option value="digital">digital — object payload with many channel keys (MQTT/IoT)</option>
      </select>
    </div>
    <div class="form-row" id="mode-hint" style="margin-left:105px; font-size:12px; color:#666;"></div>
  </div>
  <!-- ================================================================ -->
  <!-- ANALOG PIPELINE DIAGRAM (top of the analog block)                -->
  <!-- ================================================================ -->
  <div id="meas-pipeline-wrap" class="meas-section">
    <h4>Signal pipeline</h4>
    <p class="meas-help">
      Each incoming value flows through these stages. Stages dim when they're
      switched off below. Hover an input row (offset / scale / smoothing) to
      highlight the matching stage.
    </p>
    <!--
      ============================================================
      PIPELINE FLOW SVG
      ============================================================
      viewBox 720 x 140. Six stages, equal width, horizontal arrows.
      Stage stroke + sub-label are updated by pipelineDiagram.redraw().
      Hover-couple targets the <g class="meas-stage" id="meas-stage-*"> group.
      ============================================================
    -->
    <svg class="meas-pipeline-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 140"
         font-family="Arial,sans-serif" font-size="11">
      <defs>
        <marker id="meas-arrow" viewBox="0 0 10 10" refX="9" refY="5"
                markerWidth="7" markerHeight="7" orient="auto-start-reverse">
          <path d="M 0 0 L 10 5 L 0 10 z" fill="#555" />
        </marker>
      </defs>
      <!-- Six stage boxes at x = 8, 128, 248, 368, 488, 608  (width=104, gap=16) -->
      <g class="meas-stage" id="meas-stage-input">
        <rect x="8"   y="35" width="104" height="70" rx="6" fill="#eef6fb" stroke="#1F4E79" stroke-width="1.5" />
        <text x="60"  y="60" text-anchor="middle" fill="#1F4E79" font-weight="bold">msg.payload</text>
        <text x="60"  y="78" text-anchor="middle" fill="#555" font-size="10">number</text>
        <text x="60"  y="94" text-anchor="middle" fill="#888" font-size="9">topic: measurement</text>
      </g>
      <g class="meas-stage" id="meas-stage-offset">
        <rect x="128" y="35" width="104" height="70" rx="6" fill="#fdf4e7" stroke="#D68910" stroke-width="1.5" />
        <text x="180" y="60" text-anchor="middle" fill="#D68910" font-weight="bold">+ offset</text>
        <text id="meas-stage-offset-sub" x="180" y="78" text-anchor="middle" fill="#555" font-size="10">off</text>
        <text x="180" y="94" text-anchor="middle" fill="#888" font-size="9">additive bias</text>
      </g>
      <g class="meas-stage" id="meas-stage-scale">
        <rect x="248" y="35" width="104" height="70" rx="6" fill="#eafaf1" stroke="#1E8449" stroke-width="1.5" />
        <text x="300" y="60" text-anchor="middle" fill="#1E8449" font-weight="bold">scale</text>
        <text id="meas-stage-scale-sub" x="300" y="78" text-anchor="middle" fill="#555" font-size="10">off</text>
        <text x="300" y="94" text-anchor="middle" fill="#888" font-size="9">[in]→[out]</text>
      </g>
      <g class="meas-stage" id="meas-stage-smooth">
        <rect x="368" y="35" width="104" height="70" rx="6" fill="#eef2fb" stroke="#1F4E79" stroke-width="1.5" />
        <text x="420" y="60" text-anchor="middle" fill="#1F4E79" font-weight="bold">smooth</text>
        <text id="meas-stage-smooth-sub" x="420" y="78" text-anchor="middle" fill="#555" font-size="10">off</text>
        <text x="420" y="94" text-anchor="middle" fill="#888" font-size="9">rolling window</text>
      </g>
      <g class="meas-stage" id="meas-stage-outlier">
        <rect x="488" y="35" width="104" height="70" rx="6" fill="#fdecea" stroke="#C0392B" stroke-width="1.5" />
        <text x="540" y="60" text-anchor="middle" fill="#C0392B" font-weight="bold">outlier</text>
        <text x="540" y="78" text-anchor="middle" fill="#555" font-size="10">runtime toggle</text>
        <text x="540" y="94" text-anchor="middle" fill="#888" font-size="9">topic: outlierDetection</text>
      </g>
      <g class="meas-stage" id="meas-stage-output">
        <rect x="608" y="35" width="104" height="70" rx="6" fill="#f4f4f4" stroke="#333" stroke-width="1.5" />
        <text x="660" y="60" text-anchor="middle" fill="#333" font-weight="bold">output</text>
        <text id="meas-stage-output-sub" x="660" y="78" text-anchor="middle" fill="#555" font-size="10">process / influxdb</text>
        <text x="660" y="94" text-anchor="middle" fill="#888" font-size="9">port 0 / port 1</text>
      </g>
      <!-- Arrows between stages -->
      <line x1="112" y1="70" x2="128" y2="70" stroke="#555" marker-end="url(#meas-arrow)" />
      <line x1="232" y1="70" x2="248" y2="70" stroke="#555" marker-end="url(#meas-arrow)" />
      <line x1="352" y1="70" x2="368" y2="70" stroke="#555" marker-end="url(#meas-arrow)" />
      <line x1="472" y1="70" x2="488" y2="70" stroke="#555" marker-end="url(#meas-arrow)" />
      <line x1="592" y1="70" x2="608" y2="70" stroke="#555" marker-end="url(#meas-arrow)" />
      <!-- Top caption -->
      <text x="360" y="20" text-anchor="middle" fill="#444" font-size="11" font-style="italic">
        analog signal pipeline (digital mode runs one pipeline per channel)
      </text>
      <!-- Hover hint -->
      <text x="360" y="128" text-anchor="middle" fill="#888" font-size="10">
        hover an input row below → its stage highlights
      </text>
    </svg>
  </div>
  <!-- ===================== DIGITAL MODE FIELDS ===================== -->
-  <div id="digital-only-fields">
+  <div id="digital-only-fields" class="meas-section">
    <h4>Digital channels</h4>
    <p class="meas-help">
      Define one entry per key in <code>msg.payload</code>. Each channel has its
      own type, position, unit, and optional scaling / smoothing / outlier
      detection (click <b>▾ more</b> to reveal). The analog settings further
      down are ignored in digital mode.
    </p>
    <!-- Row editor — rendered by src/editor/digital-channels.js. The raw
         textarea below is kept in sync on every edit (it remains the source
         of truth on the node). -->
    <div id="meas-channels-rows"></div>
    <div class="meas-ch-actions">
      <button type="button" id="meas-channels-add" class="meas-ch-btn meas-ch-btn-add">
        + Add channel
      </button>
      <button type="button" id="meas-channels-raw-toggle" class="meas-ch-btn">
        ▾ Show raw JSON
      </button>
    </div>
    <!-- Raw JSON escape-hatch. Hidden by default; toggle button reveals it
         for power-users that want to paste / bulk-edit. Validation below
         (channels-validation) fires on every textarea input event. -->
    <div id="meas-channels-raw" style="display:none;">
      <div class="form-row" id="row-input-channels">
-      <label for="node-input-channels"><i class="fa fa-list"></i> Channels (JSON)</label>
+        <label for="node-input-channels"><i class="fa fa-code"></i> Channels (JSON)</label>
-      <textarea id="node-input-channels" rows="6" style="width:60%; font-family:monospace;" placeholder='[{"key":"temperature","type":"temperature","position":"atEquipment","unit":"C","scaling":{"enabled":false,"inputMin":0,"inputMax":1,"absMin":-50,"absMax":150,"offset":0},"smoothing":{"smoothWindow":5,"smoothMethod":"mean"}}]'></textarea>
+        <textarea id="node-input-channels" rows="8" style="width:60%; font-family:monospace;"
-      <div class="form-tips">One entry per payload key. Each channel has its own type / position / unit / scaling / smoothing / outlier detection. See README for the full schema.</div>
+          placeholder='[{"key":"temperature","type":"temperature","position":"atEquipment","unit":"C","scaling":{"enabled":false,"inputMin":0,"inputMax":1,"absMin":-50,"absMax":150,"offset":0},"smoothing":{"smoothWindow":5,"smoothMethod":"mean"}}]'></textarea>
        <div class="form-tips">The row editor above mirrors edits into this field — usually you won't need to touch it directly.</div>
      </div>
    </div>
    <div class="form-row" id="channels-validation" style="margin-left:105px; font-size:12px;"></div>
  </div>
  <!-- ===================== ANALOG MODE FIELDS ===================== -->
  <div id="analog-only-fields">
-    <hr>
+
-    <!-- Scaling Checkbox -->
+    <!-- ============================================================ -->
    <!-- SCALING                                                       -->
    <!-- ============================================================ -->
    <div class="meas-section">
      <h4>Scaling</h4>
      <p class="meas-help">
        Map the raw input range (e.g. 4–20 mA, 0–3000 counts) to a physical
        process range (e.g. 0–10 bar). Apply an offset first to zero-correct
        the sensor.
      </p>
      <div class="form-row">
-      <label for="node-input-scaling"
+        <label for="node-input-scaling"><i class="fa fa-compress"></i> Scaling</label>
-        ><i class="fa fa-compress"></i> Scaling</label>
+        <input type="checkbox" id="node-input-scaling" style="width:20px; vertical-align:baseline;" />
-      <input type="checkbox" id="node-input-scaling" style="width:20px; vertical-align:baseline;"/>
+        <span>Enable linear input scaling</span>
      <span>Enable input scaling?</span>
      </div>
    <!-- Source Min/Max (only if scaling is true) -->
    <div class="form-row" id="row-input-i_min">
      <label for="node-input-i_min"><i class="fa fa-arrow-down"></i> Source Min</label>
      <input type="number" id="node-input-i_min" placeholder="0" />
    </div>
    <div class="form-row" id="row-input-i_max">
      <label for="node-input-i_max"><i class="fa fa-arrow-up"></i> Source Max</label>
      <input type="number" id="node-input-i_max" placeholder="3000" />
    </div>
    <!-- Offset -->
      <div class="form-row">
        <label for="node-input-i_offset"><i class="fa fa-adjust"></i> Input Offset</label>
        <input type="number" id="node-input-i_offset" placeholder="0" />
        <div class="form-tips">Applied before scaling (additive bias).</div>
      </div>
-    <!-- Output / Process Min/Max -->
+      <div class="meas-diag" id="meas-scaling-wrap">
-    <div class="form-row">
+        <div class="meas-diag-side" id="meas-scaling-inputs">
-      <label for="node-input-o_min"><i class="fa fa-tag"></i> Process Min</label>
+          <div class="meas-row" data-stroke="#1F4E79" data-couples-line="meas-scale-input-axis">
            <div><label>Source Min</label><div class="meas-sub">raw input low</div></div>
            <input type="number" id="node-input-i_min" placeholder="0" />
            <span class="meas-unit">raw</span>
          </div>
          <div class="meas-row" data-stroke="#1F4E79" data-couples-line="meas-scale-input-axis">
            <div><label>Source Max</label><div class="meas-sub">raw input high</div></div>
            <input type="number" id="node-input-i_max" placeholder="3000" />
            <span class="meas-unit">raw</span>
          </div>
          <div class="meas-row" data-stroke="#1E8449" data-couples-line="meas-scale-output-axis">
            <div><label>Process Min</label><div class="meas-sub">scaled output low</div></div>
            <input type="number" id="node-input-o_min" placeholder="0" />
            <span class="meas-unit">eng</span>
          </div>
-    <div class="form-row">
+          <div class="meas-row" data-stroke="#1E8449" data-couples-line="meas-scale-output-axis">
-      <label for="node-input-o_max"><i class="fa fa-tag"></i> Process Max</label>
+            <div><label>Process Max</label><div class="meas-sub">scaled output high</div></div>
            <input type="number" id="node-input-o_max" placeholder="1" />
            <span class="meas-unit">eng</span>
          </div>
        </div>
-    <!-- Simulator Checkbox -->
+        <!--
          ============================================================
          SCALING LINEAR-TRANSFORM CHART
          ============================================================
          viewBox 300 x 180. Axes at left=44, right=286, top=14, bot=156.
          Line endpoints are placed by scalingChart.redraw().
          ============================================================
        -->
        <div class="meas-diag-svg-wrap">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180"
               style="display:block;width:100%;max-width:320px;background:#fff;border:1px solid #e5e5e5;border-radius:4px;"
               font-family="Arial,sans-serif" font-size="10">
            <!-- Plot frame -->
            <rect x="44" y="14" width="242" height="142" fill="#fafcff" stroke="#e5e5e5" />
            <!-- Axes -->
            <line id="meas-scale-input-axis"  x1="44" y1="156" x2="286" y2="156" stroke="#1F4E79" stroke-width="1.5" />
            <line id="meas-scale-output-axis" x1="44" y1="156" x2="44"  y2="14"  stroke="#1E8449" stroke-width="1.5" />
            <!-- Tick labels -->
            <text id="meas-scale-x-min" x="44"  y="170" text-anchor="middle" fill="#1F4E79">0</text>
            <text id="meas-scale-x-max" x="286" y="170" text-anchor="middle" fill="#1F4E79">1</text>
            <text id="meas-scale-y-min" x="40"  y="159" text-anchor="end"    fill="#1E8449">0</text>
            <text id="meas-scale-y-max" x="40"  y="17"  text-anchor="end"    fill="#1E8449">1</text>
            <!-- Axis titles -->
            <text x="165" y="178" text-anchor="middle" fill="#1F4E79" font-style="italic">raw input (Source Min → Source Max)</text>
            <text x="14"  y="85"  text-anchor="middle" fill="#1E8449" font-style="italic" transform="rotate(-90 14 85)">process value (Process Min → Process Max)</text>
            <!-- The transform line -->
            <polyline id="meas-scale-line" fill="none" stroke="#0c99d9" stroke-width="2.5" points="44,156 286,14" />
            <!-- Offset readout -->
            <text id="meas-scale-offset-label" x="165" y="10" text-anchor="middle" fill="#D68910" font-size="10">offset: 0 (no shift)</text>
          </svg>
        </div>
      </div>
    </div>
    <!-- ============================================================ -->
    <!-- SMOOTHING                                                     -->
    <!-- ============================================================ -->
    <div class="meas-section">
      <h4>Smoothing</h4>
      <p class="meas-help">
        Reduce noise on the scaled signal. Each method behaves differently
        — the preview below shows the result on a fixed noisy test signal.
      </p>
      <div class="meas-diag">
        <div class="meas-diag-side">
          <div class="meas-row" data-stroke="#1F4E79" data-couples-line="meas-stage-smooth">
            <div><label>Method</label><div class="meas-sub">none / mean / median / kalman / …</div></div>
            <select id="node-input-smooth_method" style="grid-column: 2 / span 2; width: 100%;"></select>
          </div>
          <div class="meas-row" data-stroke="#1F4E79" data-couples-line="meas-stage-smooth">
            <div><label>Window</label><div class="meas-sub">sample count</div></div>
            <input type="number" id="node-input-count" placeholder="10" />
            <span class="meas-unit">n</span>
          </div>
        </div>
        <!--
          ============================================================
          SMOOTHING SPARKLINE
          ============================================================
          viewBox 390 x 100. Plot range left=10, right=380, top=8, bot=92.
          ============================================================
        -->
        <div class="meas-diag-svg-wrap" id="meas-smooth-wrap">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 110"
               style="display:block;width:100%;max-width:420px;background:#fff;border:1px solid #e5e5e5;border-radius:4px;"
               font-family="Arial,sans-serif" font-size="10">
            <!-- Plot frame -->
            <rect x="10" y="8" width="370" height="84" fill="#fafcff" stroke="#e5e5e5" />
            <!-- Series -->
            <polyline id="meas-smooth-raw"      fill="none" stroke="#aaa"     stroke-width="1"   points="" />
            <polyline id="meas-smooth-smoothed" fill="none" stroke="#1E8449" stroke-width="1.8" points="" />
            <!-- Legend -->
            <line x1="18"  y1="103" x2="36" y2="103" stroke="#aaa" />
            <text x="40" y="106" fill="#888">raw (noisy)</text>
            <line x1="120" y1="103" x2="138" y2="103" stroke="#1E8449" stroke-width="1.8" />
            <text x="142" y="106" fill="#1E8449">smoothed</text>
            <!-- Method/window readout -->
            <text id="meas-smooth-label" x="375" y="106" text-anchor="end" fill="#555" font-style="italic">no smoothing — raw value passed through</text>
          </svg>
        </div>
      </div>
    </div>
    <!-- ============================================================ -->
    <!-- SIMULATION                                                    -->
    <!-- ============================================================ -->
    <div class="meas-section">
      <h4>Simulation</h4>
      <div class="form-row">
        <label for="node-input-simulator"><i class="fa fa-cog"></i> Simulator</label>
-      <input type="checkbox" id="node-input-simulator" style="width:20px; vertical-align:baseline;"/>
+        <input type="checkbox" id="node-input-simulator" style="width:20px; vertical-align:baseline;" />
-      <span>Activate internal simulation?</span>
+        <span>Replace the real input with an internal random-walk source (toggle at runtime via topic <code>simulator</code>).</span>
    </div>
    <!-- Smoothing Method -->
    <div class="form-row">
      <label for="node-input-smooth_method"><i class="fa fa-line-chart"></i> Smoothing</label>
      <select id="node-input-smooth_method" style="width:60%;">
      </select>
    </div>
    <!-- Smoothing Window -->
    <div class="form-row">
      <label for="node-input-count">Window</label>
      <input type="number" id="node-input-count" placeholder="10" style="width:60px;"/>
      <div class="form-tips">Number of samples for smoothing</div>
    </div>
    <!-- Calibration Stability Threshold -->
    <div class="form-row">
      <label for="node-input-stabilityThreshold"><i class="fa fa-balance-scale"></i> Stability Threshold</label>
      <input type="number" id="node-input-stabilityThreshold" placeholder="0.01" step="any" style="width:100px;"/>
      <span style="margin-left:6px; color:#666;">(scaling-units)</span>
      <div class="form-tips">Maximum stdDev of the rolling window for calibrate() and evaluateRepeatability() to accept the buffer as stable. Default 0.01.</div>
      </div>
    </div>
-  <hr>
+    <!-- ============================================================ -->
-  <h3>Output Formats</h3>
+    <!-- CALIBRATION                                                   -->
    <!-- ============================================================ -->
    <div class="meas-section">
      <h4>Calibration</h4>
      <p class="meas-help">
        The <code>calibrate</code> topic shifts the offset so the current
        output matches the configured low end. It only fires when the rolling
        window is "stable enough" — define what that means here.
      </p>
      <div class="form-row">
-    <label for="node-input-processOutputFormat"><i class="fa fa-random"></i> Process Output</label>
+        <label for="node-input-stabilityThreshold"><i class="fa fa-balance-scale"></i> Stability</label>
        <input type="number" id="node-input-stabilityThreshold" placeholder="0.01" step="any" style="width:100px;" />
        <span style="margin-left:6px; color:#666;">scaling-units</span>
        <div class="form-tips">Maximum rolling-window standard deviation that still counts as stable. Default 0.01.</div>
      </div>
    </div>
  </div>
  <!-- ================================================================ -->
  <!-- OUTPUT FORMATS                                                   -->
  <!-- ================================================================ -->
  <div class="meas-section">
    <h4>Output formats</h4>
    <p class="meas-help">
      Process port (0) drives downstream control nodes; database port (1)
      feeds telemetry/historian. Pick the encoding each consumer expects.
    </p>
    <div class="form-row">
      <label for="node-input-processOutputFormat"><i class="fa fa-random"></i> Process port</label>
      <select id="node-input-processOutputFormat" style="width:60%;">
        <option value="process">process</option>
        <option value="json">json</option>
@@ -357,7 +587,7 @@
      </select>
    </div>
    <div class="form-row">
-    <label for="node-input-dbaseOutputFormat"><i class="fa fa-database"></i> Database Output</label>
+      <label for="node-input-dbaseOutputFormat"><i class="fa fa-database"></i> Database port</label>
      <select id="node-input-dbaseOutputFormat" style="width:60%;">
        <option value="influxdb">influxdb</option>
        <option value="frost">frost</option>
@@ -365,15 +595,11 @@
        <option value="csv">csv</option>
      </select>
    </div>
  </div>
-  <!-- Optional Extended Fields: supplier, cat, type, model, unit -->
+  <!-- Shared asset/logger/position menus (injected by /measurement/menu.js) -->
  <!-- Asset fields will be injected here -->
  <div id="asset-fields-placeholder"></div>
  <!-- loglevel checkbox -->
  <div id="logger-fields-placeholder"></div>
  <!-- Position fields will be injected here -->
  <div id="position-fields-placeholder"></div>
 </script>
--- a/measurement.js
+++ b/measurement.js
@@ -1,4 +1,5 @@
 const nameOfNode = 'measurement'; // this is the name of the node, it should match the file name and the node type in Node-RED
 const path = require('path');
 const nodeClass = require('./src/nodeClass.js'); // this is the specific node class
 const { MenuManager, configManager, assetApiConfig } = require('generalFunctions');
 const assetUtils = require('generalFunctions/assetUtils');
@@ -38,6 +39,18 @@ module.exports = function(RED) {
    }
  });
  // Editor JS modules — loaded by measurement.html via <script src=...> tags.
  // Files live in src/editor/. Filename is restricted to a safe charset to
  // prevent path-traversal. Mirror of the pumpingStation pattern.
  RED.httpAdmin.get(`/${nameOfNode}/editor/:file`, (req, res) => {
    const safe = String(req.params.file || '').replace(/[^a-zA-Z0-9._-]/g, '');
    if (!safe.endsWith('.js')) return res.status(400).send('// invalid');
    res.type('application/javascript');
    res.sendFile(path.join(__dirname, 'src', 'editor', safe), (err) => {
      if (err && !res.headersSent) res.status(404).send('// editor module not found');
    });
  });
  RED.httpAdmin.post(`/${nameOfNode}/asset-reg`, async (req, res) => {
    const body = req.body || {};
    const assetPayload = body.asset;
--- a/src/editor/digital-channels.js
+++ b/src/editor/digital-channels.js
@@ -0,0 +1,431 @@
 // Measurement editor — digital-mode channel row editor.
 //
 // Replaces the raw JSON textarea with a repeatable card UI. The textarea
 // remains the source of truth on the node (node.channels is still a JSON
 // string), so server-side parsing in nodeClass.js is untouched.
 //
 // IMPORTANT ARCHITECTURE NOTE:
 // Field edits (typing in key/unit, changing a dropdown, ticking a checkbox)
 // MUST NOT trigger a full rerender. A full rebuild destroys the input you
 // are typing into and the next keystroke is lost (one-letter-then-stop bug).
 // We split the two paths explicitly:
 //   - commitFieldEdit() — state + textarea sync + targeted DOM updates
 //                         (duplicate-key red borders). Use for every per-
 //                         field edit.
 //   - rerenderAll()     — full rebuild. Use only for structural changes:
 //                         add channel, delete channel, expand/collapse,
 //                         raw-JSON toggle, init.
 (function () {
  const ns = window.MeasEditor = window.MeasEditor || {};
  // --- Option sources ---------------------------------------------------
  // Canonical types map 1:1 to MeasurementContainer axes; for those, the
  // conversion machinery in generalFunctions expects unit ∈ a known set.
  // Free-text units would silently break conversion, so the unit field
  // becomes a select for canonical types. Custom types (humidity, co2,
  // voc, …) bypass conversion per the docs, so unit stays free text.
  const TYPE_OPTIONS = [
    'pressure', 'flow', 'power', 'temperature',
    'volume', 'length', 'mass', 'energy',
    'humidity', 'co2', 'voc',
  ];
  const POSITION_OPTIONS = ['upstream', 'atEquipment', 'downstream'];
  const OUTLIER_METHODS  = ['zScore', 'iqr', 'modifiedZScore'];
  // Per-type unit suggestions. The list is curated to the most common units
  // from generalFunctions/src/convert/definitions/<type>.js; users who need
  // exotic units can fall back to raw-JSON view.
  const UNIT_OPTIONS = {
    pressure:    ['Pa', 'kPa', 'MPa', 'hPa', 'bar', 'mbar', 'torr', 'psi'],
    flow:        ['m³/s', 'm³/h', 'L/s', 'L/min', 'gpm'],
    power:       ['W', 'kW', 'MW', 'hp'],
    temperature: ['C', 'K', 'F', 'R'],
    volume:      ['mL', 'L', 'm³', 'gal'],
    length:      ['mm', 'cm', 'm', 'km', 'in', 'ft'],
    mass:        ['mg', 'g', 'kg', 't', 'oz', 'lb'],
    energy:      ['Wh', 'kWh', 'J', 'kJ', 'MJ'],
    // custom types intentionally omitted → unit becomes free text
  };
  const isCanonicalType = (t) => Object.prototype.hasOwnProperty.call(UNIT_OPTIONS, t);
  const getSmoothMethods = () => {
    const arr = window.EVOLV?.nodes?.measurement?.config?.smoothing?.smoothMethod?.rules?.values || [];
    const names = arr.map((o) => o.value);
    return names.length ? names
      : ['none', 'mean', 'min', 'max', 'sd', 'median', 'weightedMovingAverage',
         'lowPass', 'highPass', 'bandPass', 'kalman', 'savitzkyGolay'];
  };
  const newChannel = () => ({
    key: '',
    type: 'pressure',
    position: 'atEquipment',
    unit: UNIT_OPTIONS.pressure[0],
    scaling:          { enabled: false, inputMin: 0, inputMax: 1, absMin: 0, absMax: 100, offset: 0 },
    smoothing:        { smoothWindow: 10, smoothMethod: 'mean' },
    outlierDetection: { enabled: false, method: 'zScore', threshold: 3 },
  });
  const mergeDefaults = (raw) => {
    const d = newChannel();
    return {
      key:      raw.key      ?? '',
      type:     raw.type     ?? d.type,
      position: raw.position ?? d.position,
      unit:     raw.unit     ?? '',
      distance: raw.distance ?? null,
      scaling:          { ...d.scaling,          ...(raw.scaling          || {}) },
      smoothing:        { ...d.smoothing,        ...(raw.smoothing        || {}) },
      outlierDetection: { ...d.outlierDetection, ...(raw.outlierDetection || {}) },
    };
  };
  // --- State ------------------------------------------------------------
  let _channels = [];
  const _expanded = new Set();
  let _jsonMode = false;
  // --- Small DOM helpers ------------------------------------------------
  const el = (tag, attrs = {}, children = []) => {
    const e = document.createElement(tag);
    for (const [k, v] of Object.entries(attrs)) {
      if (v == null) continue;
      if (k === 'class') e.className = v;
      else if (k === 'style' && typeof v === 'object') Object.assign(e.style, v);
      else if (k.startsWith('on') && typeof v === 'function') e.addEventListener(k.slice(2), v);
      else e.setAttribute(k, v);
    }
    for (const c of (Array.isArray(children) ? children : [children])) {
      if (c == null || c === false) continue;
      e.appendChild(typeof c === 'string' || typeof c === 'number'
        ? document.createTextNode(String(c)) : c);
    }
    return e;
  };
  const selectFrom = (opts, value, onChange, extraClass) => {
    const sel = el('select', { class: 'meas-ch-input' + (extraClass ? ' ' + extraClass : '') });
    const optsWithValue = value && !opts.includes(value) ? [...opts, value] : opts;
    for (const o of optsWithValue) sel.appendChild(el('option', { value: o }, o));
    sel.value = value || '';
    sel.addEventListener('change', () => onChange(sel.value));
    return sel;
  };
  const numInput = (value, onChange, opts = {}) => {
    const inp = el('input', {
      type: 'number', class: 'meas-ch-input meas-ch-num',
      step: opts.step ?? 'any',
      placeholder: opts.placeholder ?? '',
      value: (value === '' || value == null || Number.isNaN(value)) ? '' : value,
    });
    inp.addEventListener('input', () => {
      const v = parseFloat(inp.value);
      onChange(Number.isFinite(v) ? v : (opts.allowNull ? null : 0));
    });
    return inp;
  };
  const textInput = (value, onChange, placeholder) => {
    const inp = el('input', { type: 'text', class: 'meas-ch-input', value: value || '', placeholder: placeholder || '' });
    inp.addEventListener('input', () => onChange(inp.value));
    return inp;
  };
  const checkbox = (checked, onChange, labelText) => {
    const cb = el('input', { type: 'checkbox' });
    cb.checked = !!checked;
    cb.addEventListener('change', () => onChange(cb.checked));
    return el('label', { class: 'meas-ch-cb' }, [cb, ' ', labelText]);
  };
  // --- Sync + targeted updates -----------------------------------------
  const serialize = () => JSON.stringify(_channels, null, 2);
  const syncTextarea = () => {
    const ta = document.getElementById('node-input-channels');
    if (!ta) return;
    ta.value = serialize();
    ta.dispatchEvent(new Event('input', { bubbles: true }));
  };
  const refreshKeyValidationClasses = () => {
    const { dupes, blanks } = keyValidation();
    document.querySelectorAll('#meas-channels-rows [data-role="ch-key"]').forEach((inp) => {
      const i = parseInt(inp.dataset.idx, 10);
      const bad = dupes.has(i) || blanks.has(i);
      inp.classList.toggle('meas-ch-err', bad);
    });
  };
  // Single entry point for every per-field edit. Does NOT rerender.
  const commitFieldEdit = () => {
    syncTextarea();
    refreshKeyValidationClasses();
  };
  // --- Validation -------------------------------------------------------
  const keyValidation = () => {
    const seen = new Map();
    const dupes = new Set();
    const blanks = new Set();
    _channels.forEach((c, i) => {
      const k = (c.key || '').trim();
      if (!k) { blanks.add(i); return; }
      if (seen.has(k)) { dupes.add(i); dupes.add(seen.get(k)); }
      else seen.set(k, i);
    });
    return { dupes, blanks };
  };
  // --- Unit cell (type-driven, swapped in-place on type change) --------
  const renderUnitCell = (channel, cardIndex) => {
    const cell = el('div', { class: 'meas-ch-unit-cell', 'data-role': 'ch-unit-cell', 'data-idx': String(cardIndex) });
    if (isCanonicalType(channel.type)) {
      const opts = UNIT_OPTIONS[channel.type];
      const sel = selectFrom(opts, channel.unit || opts[0], (v) => {
        channel.unit = v;
        commitFieldEdit();
      });
      cell.appendChild(sel);
    } else {
      const inp = textInput(channel.unit, (v) => {
        channel.unit = v;
        commitFieldEdit();
      }, 'unit (free text)');
      cell.appendChild(inp);
    }
    return cell;
  };
  // Replace just the unit cell inside one card. No full rerender → focus
  // on the type select is preserved.
  const swapUnitCell = (cardIndex, channel) => {
    const old = document.querySelector(`#meas-channels-rows [data-role="ch-unit-cell"][data-idx="${cardIndex}"]`);
    if (!old) return;
    old.replaceWith(renderUnitCell(channel, cardIndex));
  };
  // --- Render: advanced sub-sections ------------------------------------
  // These call commitFieldEdit() on edits (no rerender). The only
  // exceptions are the enabled-toggle checkboxes: ticking them dims the
  // sub-grid, which requires re-rendering JUST that card. We accept the
  // tiny focus blip on a checkbox click — focus on a checkbox after a
  // click isn't ergonomically important.
  const renderScalingSection = (channel, cardIndex) => {
    const sc = channel.scaling;
    return el('div', { class: 'meas-ch-sub' }, [
      el('div', { class: 'meas-ch-sub-title' }, [
        checkbox(sc.enabled, (v) => { sc.enabled = v; rerenderCard(cardIndex); }, 'Scaling'),
      ]),
      el('div', { class: 'meas-ch-sub-grid' + (sc.enabled ? '' : ' meas-ch-dim') }, [
        el('label', {}, 'input min'),  numInput(sc.inputMin,  (v) => { sc.inputMin = v;  commitFieldEdit(); }),
        el('label', {}, 'input max'),  numInput(sc.inputMax,  (v) => { sc.inputMax = v;  commitFieldEdit(); }),
        el('label', {}, 'output min'), numInput(sc.absMin,    (v) => { sc.absMin = v;    commitFieldEdit(); }),
        el('label', {}, 'output max'), numInput(sc.absMax,    (v) => { sc.absMax = v;    commitFieldEdit(); }),
        el('label', {}, 'offset'),     numInput(sc.offset,    (v) => { sc.offset = v;    commitFieldEdit(); }),
      ]),
    ]);
  };
  const renderSmoothingSection = (channel) => {
    const sm = channel.smoothing;
    return el('div', { class: 'meas-ch-sub' }, [
      el('div', { class: 'meas-ch-sub-title' }, 'Smoothing'),
      el('div', { class: 'meas-ch-sub-grid' }, [
        el('label', {}, 'method'),
        selectFrom(getSmoothMethods(), sm.smoothMethod || 'mean', (v) => { sm.smoothMethod = v; commitFieldEdit(); }),
        el('label', {}, 'window'),
        numInput(sm.smoothWindow, (v) => { sm.smoothWindow = v; commitFieldEdit(); }, { step: 1, placeholder: '10' }),
      ]),
    ]);
  };
  const renderOutlierSection = (channel, cardIndex) => {
    const od = channel.outlierDetection;
    return el('div', { class: 'meas-ch-sub' }, [
      el('div', { class: 'meas-ch-sub-title' }, [
        checkbox(od.enabled, (v) => { od.enabled = v; rerenderCard(cardIndex); }, 'Outlier detection'),
      ]),
      el('div', { class: 'meas-ch-sub-grid' + (od.enabled ? '' : ' meas-ch-dim') }, [
        el('label', {}, 'method'),
        selectFrom(OUTLIER_METHODS, od.method || 'zScore', (v) => { od.method = v; commitFieldEdit(); }),
        el('label', {}, 'threshold'),
        numInput(od.threshold, (v) => { od.threshold = v; commitFieldEdit(); }, { placeholder: '3' }),
      ]),
    ]);
  };
  // --- Render: one card -------------------------------------------------
  const renderCard = (channel, index) => {
    const isExpanded = _expanded.has(index);
    // Key input — tagged with data-role + data-idx so the validation pass
    // can find and re-class it without rebuilding the card.
    const keyInput = textInput(channel.key, (v) => {
      channel.key = v;
      commitFieldEdit();
    }, 'e.g. temperature');
    keyInput.dataset.role = 'ch-key';
    keyInput.dataset.idx = String(index);
    // Type select — on change: update unit (reset to first unit of the new
    // type if previous unit isn't valid there), swap the unit cell in
    // place, and sync. No card rebuild.
    const typeSelect = selectFrom(TYPE_OPTIONS, channel.type, (v) => {
      channel.type = v;
      if (isCanonicalType(v)) {
        const validUnits = UNIT_OPTIONS[v];
        if (!validUnits.includes(channel.unit)) channel.unit = validUnits[0];
      }
      swapUnitCell(index, channel);
      commitFieldEdit();
    }, 'meas-ch-w-110');
    const posSelect = selectFrom(POSITION_OPTIONS, channel.position, (v) => {
      channel.position = v;
      commitFieldEdit();
    }, 'meas-ch-w-110');
    const unitCell = renderUnitCell(channel, index);
    const head = el('div', { class: 'meas-ch-head', 'data-card-idx': String(index) }, [
      el('span', { class: 'meas-ch-num-badge' }, '#' + (index + 1)),
      keyInput, typeSelect, posSelect, unitCell,
      el('button', {
        type: 'button',
        class: 'meas-ch-btn meas-ch-btn-toggle',
        title: isExpanded ? 'Hide advanced' : 'Show advanced (scaling / smoothing / outlier)',
        onclick: () => {
          if (isExpanded) _expanded.delete(index); else _expanded.add(index);
          rerenderAll();
        },
      }, isExpanded ? '▴ less' : '▾ more'),
      el('button', {
        type: 'button',
        class: 'meas-ch-btn meas-ch-btn-del',
        title: 'Remove this channel',
        onclick: () => {
          _channels.splice(index, 1);
          const next = new Set();
          _expanded.forEach((i) => { if (i < index) next.add(i); else if (i > index) next.add(i - 1); });
          _expanded.clear(); next.forEach((i) => _expanded.add(i));
          syncTextarea();
          rerenderAll();
        },
      }, '×'),
    ]);
    const card = el('div', { class: 'meas-ch-card', 'data-card-idx': String(index) }, [head]);
    if (isExpanded) {
      card.appendChild(el('div', { class: 'meas-ch-adv' }, [
        renderScalingSection(channel, index),
        renderSmoothingSection(channel),
        renderOutlierSection(channel, index),
      ]));
    }
    return card;
  };
  // Rebuild a single card in place. Used by the enabled-toggle handlers
  // that need to flip the dim class on a sub-grid.
  const rerenderCard = (index) => {
    const existing = document.querySelector(`#meas-channels-rows .meas-ch-card[data-card-idx="${index}"]`);
    if (!existing) { rerenderAll(); return; }
    const replacement = renderCard(_channels[index], index);
    existing.replaceWith(replacement);
    syncTextarea();
  };
  // --- Render: full list ------------------------------------------------
  const rerenderAll = () => {
    const host = document.getElementById('meas-channels-rows');
    if (!host) return;
    host.innerHTML = '';
    if (_channels.length === 0) {
      host.appendChild(el('div', { class: 'meas-ch-empty' },
        'No channels yet. Click "+ Add channel" to define the first one.'));
    } else {
      _channels.forEach((c, i) => host.appendChild(renderCard(c, i)));
    }
    refreshKeyValidationClasses();
    updateRawToggleButtonLabel();
  };
  const updateRawToggleButtonLabel = () => {
    const btn = document.getElementById('meas-channels-raw-toggle');
    const raw = document.getElementById('meas-channels-raw');
    if (!btn || !raw) return;
    raw.style.display = _jsonMode ? '' : 'none';
    btn.textContent = _jsonMode ? '▴ Hide raw JSON' : '▾ Show raw JSON';
  };
  // --- Public API -------------------------------------------------------
  ns.digitalChannels = {
    init(node) {
      const host = document.getElementById('meas-channels-rows');
      if (!host) return;
      const ta = document.getElementById('node-input-channels');
      const raw = (ta?.value || node?.channels || '[]').trim() || '[]';
      try {
        const parsed = JSON.parse(raw);
        _channels = Array.isArray(parsed) ? parsed.map(mergeDefaults) : [];
      } catch {
        _channels = [];
      }
      const addBtn = document.getElementById('meas-channels-add');
      if (addBtn && !addBtn.dataset.bound) {
        addBtn.dataset.bound = '1';
        addBtn.addEventListener('click', () => {
          _channels.push(newChannel());
          _expanded.add(_channels.length - 1);
          syncTextarea();
          rerenderAll();
        });
      }
      const rawBtn = document.getElementById('meas-channels-raw-toggle');
      if (rawBtn && !rawBtn.dataset.bound) {
        rawBtn.dataset.bound = '1';
        rawBtn.addEventListener('click', () => {
          if (_jsonMode) {
            try {
              const parsed = JSON.parse((ta?.value || '[]').trim() || '[]');
              if (!Array.isArray(parsed)) throw new Error('not an array');
              _channels = parsed.map(mergeDefaults);
            } catch (e) {
              if (typeof RED !== 'undefined' && RED.notify) {
                RED.notify('Channels JSON is invalid: ' + e.message
                  + ' — stay in JSON view to fix.', 'error');
              }
              return;
            }
          }
          _jsonMode = !_jsonMode;
          rerenderAll();
        });
      }
      if (ta && !ta.dataset.boundBlur) {
        ta.dataset.boundBlur = '1';
        ta.addEventListener('blur', () => {
          if (!_jsonMode) return;
          try {
            const parsed = JSON.parse(ta.value.trim() || '[]');
            if (Array.isArray(parsed)) _channels = parsed.map(mergeDefaults);
          } catch {
            /* leave alone */
          }
        });
      }
      syncTextarea();
      rerenderAll();
    },
    commit() { syncTextarea(); },
  };
 })();
--- a/src/editor/hover-couple.js
+++ b/src/editor/hover-couple.js
@@ -0,0 +1,28 @@
 // Measurement editor — hover-coupling between side-panel input rows
 // and SVG elements they describe. Each .meas-row that carries
 // data-couples-line="<svg-element-id>" highlights that SVG element on
 // mouseenter and clears the highlight on mouseleave. Mirrors the
 // pumpingStation pattern so the visual idiom is consistent across nodes.
 (function () {
  const ns = window.MeasEditor = window.MeasEditor || {};
  ns.hoverCouple = {
    init() {
      document.querySelectorAll('.meas-diag-side .meas-row[data-couples-line]').forEach((row) => {
        const targetId = row.getAttribute('data-couples-line');
        const target = document.getElementById(targetId);
        if (!target) return;
        const enter = () => target.classList.add('meas-stage-highlight');
        const leave = () => target.classList.remove('meas-stage-highlight');
        row.addEventListener('mouseenter', enter);
        row.addEventListener('mouseleave', leave);
        const input = row.querySelector('input, select');
        if (input) {
          input.addEventListener('focus', enter);
          input.addEventListener('blur', leave);
        }
      });
    },
  };
 })();
--- a/src/editor/index.js
+++ b/src/editor/index.js
@@ -0,0 +1,42 @@
 // Measurement editor — shared namespace + helpers.
 // Loaded first by measurement.html via /measurement/editor/index.js.
 // Each sibling module attaches additional members to window.MeasEditor.
 (function () {
  const ns = window.MeasEditor = window.MeasEditor || {};
  // Read a numeric value from an input by node-input-<id>; null if blank/NaN.
  ns.fNum = (id) => {
    const v = parseFloat(document.getElementById(`node-input-${id}`)?.value);
    return Number.isFinite(v) ? v : null;
  };
  // Read the value of a select/text input by id; '' if absent.
  ns.fStr = (id) => document.getElementById(`node-input-${id}`)?.value || '';
  // Read a checkbox by id; false if absent.
  ns.fBool = (id) => !!document.getElementById(`node-input-${id}`)?.checked;
  // Set a numeric input by id (no node-input- prefix); blank if not finite.
  ns.setNumberField = (id, val) => {
    const el = document.getElementById(id);
    if (el) el.value = Number.isFinite(val) ? val : '';
  };
  // Add input + change listeners to a list of node-input-* ids.
  ns.bindRedraw = (ids, handler) => {
    ids.forEach((id) => {
      const el = document.getElementById(`node-input-${id}`);
      if (el) {
        el.addEventListener('input', handler);
        el.addEventListener('change', handler);
      }
    });
  };
  // Show/hide an element by id (block when shown).
  ns.toggle = (id, show) => {
    const el = document.getElementById(id);
    if (el) el.style.display = show ? '' : 'none';
  };
 })();
--- a/src/editor/oneditprepare.js
+++ b/src/editor/oneditprepare.js
@@ -0,0 +1,160 @@
 // Measurement editor — oneditprepare. Replaces the inline script that used
 // to live in measurement.html. Initialises form fields, mode toggle,
 // scaling toggle, the smoothing dropdown (populated from configData), and
 // wires the three live previews (pipeline / scaling / smoothing).
 (function () {
  const ns = window.MeasEditor = window.MeasEditor || {};
  ns.oneditprepare = function () {
    const node = this;
    // Kick off shared menu init (asset/logger/position) first so a downstream
    // error never blocks the menus. Historical regression: a ReferenceError
    // in the mode block once aborted oneditprepare and stopped the asset menu
    // from rendering at all.
    const waitForMenuData = () => {
      if (window.EVOLV?.nodes?.measurement?.initEditor) {
        window.EVOLV.nodes.measurement.initEditor(node);
      } else {
        setTimeout(waitForMenuData, 50);
      }
    };
    waitForMenuData();
    // === Resolve DOM up front ===
    const modeSelect    = document.getElementById('node-input-mode');
    const modeCards     = document.querySelectorAll('.meas-mode-card');
    const analogBlock   = document.getElementById('analog-only-fields');
    const digitalBlock  = document.getElementById('digital-only-fields');
    const modeHint      = document.getElementById('mode-hint');
    const channelsArea  = document.getElementById('node-input-channels');
    const channelsHint  = document.getElementById('channels-validation');
    const scalingChk    = document.getElementById('node-input-scaling');
    const scaleRows     = document.getElementById('meas-scaling-inputs');
    // === Initial values ===
    const initialMode = (node.mode === 'digital' || node.mode === 'analog') ? node.mode : 'analog';
    if (modeSelect) modeSelect.value = initialMode;
    if (channelsArea && typeof node.channels === 'string') channelsArea.value = node.channels;
    // === Mode cards (visual two-option picker) ===
    const setActiveCard = (mode) => {
      modeCards.forEach((c) => c.classList.toggle('meas-mode-active', c.dataset.mode === mode));
    };
    const applyMode = (mode) => {
      const isDigital = mode === 'digital';
      if (analogBlock)  analogBlock.style.display  = isDigital ? 'none' : '';
      if (digitalBlock) digitalBlock.style.display = isDigital ? '' : 'none';
      if (modeHint) {
        modeHint.textContent = isDigital
          ? 'msg.payload must be an OBJECT, e.g. {"temperature": 22.5, "humidity": 45}. Define each key below.'
          : 'msg.payload must be a NUMBER (or numeric string). Configure offset / scaling / smoothing below.';
      }
      setActiveCard(mode);
      validateChannelsJson();
      ns.pipelineDiagram?.redraw();
    };
    function validateChannelsJson() {
      if (!channelsHint) return;
      if (!modeSelect || modeSelect.value !== 'digital') { channelsHint.textContent = ''; return; }
      const raw = (channelsArea && channelsArea.value || '').trim();
      if (!raw || raw === '[]') {
        channelsHint.innerHTML = '<span style="color:#b45309;">Digital mode with no channels — no measurements will be emitted.</span>';
        return;
      }
      try {
        const parsed = JSON.parse(raw);
        if (!Array.isArray(parsed)) throw new Error('must be an array');
        const missing = parsed
          .map((c, i) => (c && c.key && c.type ? null : 'entry ' + i + ': missing key or type'))
          .filter(Boolean);
        if (missing.length) {
          channelsHint.innerHTML = '<span style="color:#b45309;">' + missing.join('; ') + '</span>';
        } else {
          channelsHint.innerHTML = '<span style="color:#047857;">' + parsed.length + ' channel(s) defined: ' + parsed.map((c) => c.key).join(', ') + '</span>';
        }
      } catch (e) {
        channelsHint.innerHTML = '<span style="color:#b91c1c;">Invalid JSON: ' + e.message + '</span>';
      }
    }
    if (modeSelect) modeSelect.addEventListener('change', (e) => applyMode(e.target.value));
    modeCards.forEach((card) => {
      card.addEventListener('click', () => {
        const m = card.dataset.mode;
        if (modeSelect) modeSelect.value = m;
        applyMode(m);
      });
    });
    if (channelsArea) channelsArea.addEventListener('input', validateChannelsJson);
    // === Smoothing method dropdown — populated from configData ===
    const smoothMethodSelect = document.getElementById('node-input-smooth_method');
    if (smoothMethodSelect) {
      const options = window.EVOLV?.nodes?.measurement?.config?.smoothing?.smoothMethod?.rules?.values || [];
      smoothMethodSelect.innerHTML = '';
      const emptyOption = document.createElement('option');
      emptyOption.value = '';
      emptyOption.textContent = 'Select method...';
      smoothMethodSelect.appendChild(emptyOption);
      options.forEach((opt) => {
        const o = document.createElement('option');
        o.value = opt.value;
        o.textContent = opt.value;
        o.title = opt.description;
        smoothMethodSelect.appendChild(o);
      });
      if (node.smooth_method) smoothMethodSelect.value = node.smooth_method;
    }
    // === Scaling toggle ===
    const toggleScalingRows = () => {
      const show = !!scalingChk?.checked;
      if (scaleRows) scaleRows.style.display = show ? '' : 'none';
      ns.scalingChart?.redraw();
      ns.pipelineDiagram?.redraw();
    };
    if (scalingChk) scalingChk.addEventListener('change', toggleScalingRows);
    // === Bind redraws ===
    // Pipeline diagram listens to anything that flips a stage on/off or
    // changes a sub-label.
    ns.bindRedraw(
      ['mode', 'scaling', 'i_min', 'i_max', 'i_offset', 'o_min', 'o_max',
       'smooth_method', 'count', 'processOutputFormat', 'dbaseOutputFormat'],
      () => ns.pipelineDiagram?.redraw(),
    );
    // Scaling chart listens to its own four inputs + offset.
    ns.bindRedraw(
      ['scaling', 'i_min', 'i_max', 'i_offset', 'o_min', 'o_max'],
      () => ns.scalingChart?.redraw(),
    );
    // Smoothing sparkline listens to the method dropdown + window.
    ns.bindRedraw(
      ['smooth_method', 'count'],
      () => ns.smoothingSparkline?.redraw(),
    );
    // Initial render once the DOM has settled.
    setTimeout(() => {
      try {
        applyMode(initialMode);
        toggleScalingRows();
        // Build the digital-channel row UI from node.channels. Safe to call
        // even when the user opens the editor in analog mode — the rows
        // host is hidden by applyMode() and init() is a no-op when no host
        // is present.
        ns.digitalChannels?.init(node);
        ns.pipelineDiagram?.redraw();
        ns.scalingChart?.redraw();
        ns.smoothingSparkline?.redraw();
        ns.hoverCouple?.init();
      } catch (e) {
        console.error('measurement editor: initial render failed', e);
      }
    }, 60);
  };
 })();
--- a/src/editor/oneditsave.js
+++ b/src/editor/oneditsave.js
@@ -0,0 +1,69 @@
 // Measurement editor — oneditsave. Validates and persists fields onto the
 // node. Behaviour preserved 1:1 from the previous inline script: mode-aware
 // channel JSON validation, scaling completeness warning, calibration
 // stability threshold default.
 (function () {
  const ns = window.MeasEditor = window.MeasEditor || {};
  ns.oneditsave = function () {
    const node = this;
    // Shared menu sections.
    if (window.EVOLV?.nodes?.measurement?.assetMenu?.saveEditor) {
      window.EVOLV.nodes.measurement.assetMenu.saveEditor(node);
    }
    if (window.EVOLV?.nodes?.measurement?.loggerMenu?.saveEditor) {
      window.EVOLV.nodes.measurement.loggerMenu.saveEditor(node);
    }
    if (window.EVOLV?.nodes?.measurement?.positionMenu?.saveEditor) {
      window.EVOLV.nodes.measurement.positionMenu.saveEditor(node);
    }
    // Mode is the top-level switch.
    node.mode = document.getElementById('node-input-mode')?.value || 'analog';
    // Channels JSON (digital). Stored as a raw string; server-side parses it.
    // Make sure the row editor's in-memory state is flushed into the textarea
    // before we read it — defensive, edits already sync on every change but
    // commit() is idempotent.
    ns.digitalChannels?.commit?.();
    node.channels = document.getElementById('node-input-channels')?.value || '[]';
    // Analog smoothing method.
    node.smooth_method = document.getElementById('node-input-smooth_method')?.value || '';
    // Checkboxes.
    ['scaling', 'simulator'].forEach((field) => {
      const el = document.getElementById(`node-input-${field}`);
      if (el) node[field] = el.checked;
    });
    // Numeric fields (NaN → 0).
    ['i_min', 'i_max', 'i_offset', 'o_min', 'o_max', 'count'].forEach((field) => {
      const el = document.getElementById(`node-input-${field}`);
      if (el) node[field] = parseFloat(el.value) || 0;
    });
    // Calibration stability threshold: 0 is a valid (very strict) value, so
    // fall back to the default 0.01 only when the field is empty / NaN.
    const stRaw = document.getElementById('node-input-stabilityThreshold')?.value;
    const stParsed = parseFloat(stRaw);
    node.stabilityThreshold = Number.isFinite(stParsed) ? stParsed : 0.01;
    // Mode-dependent validation.
    if (node.mode === 'analog' && node.scaling && (isNaN(node.i_min) || isNaN(node.i_max))) {
      RED.notify('Scaling enabled, but input range is incomplete!', 'error');
    }
    if (node.mode === 'digital') {
      try {
        const parsed = JSON.parse(node.channels || '[]');
        if (!Array.isArray(parsed) || parsed.length === 0) {
          RED.notify('Digital mode: no channels defined. The node will emit nothing.', 'warning');
        }
      } catch (e) {
        RED.notify('Digital mode: Channels JSON is invalid (' + e.message + ')', 'error');
      }
    }
  };
 })();
--- a/src/editor/pipeline-diagram.js
+++ b/src/editor/pipeline-diagram.js
@@ -0,0 +1,91 @@
 // Measurement editor — analog signal-pipeline diagram.
 //
 // Renders a horizontal flow:
 //   msg.payload → +offset → scale → smooth → outlier → output (port 0/1)
 //
 // Each stage dims when its feature is disabled (scaling unchecked,
 // smoothMethod === '' or 'none', outlierDetection toggled off). Hover-coupling
 // (via data-couples-line on the side-panel rows) thickens the active stage
 // stroke so the user sees which control affects which stage.
 (function () {
  const ns = window.MeasEditor = window.MeasEditor || {};
  // SVG element IDs that the hover-couple module targets. Kept in one place
  // so the HTML template + hover wiring + redraw all use the same names.
  const STAGE_IDS = {
    input:    'meas-stage-input',
    offset:   'meas-stage-offset',
    scale:    'meas-stage-scale',
    smooth:   'meas-stage-smooth',
    outlier:  'meas-stage-outlier',
    output:   'meas-stage-output',
  };
  const setEnabled = (id, on) => {
    const el = document.getElementById(id);
    if (!el) return;
    el.classList.toggle('meas-stage-disabled', !on);
  };
  const setLabel = (id, text) => {
    const el = document.getElementById(id);
    if (el) el.textContent = text;
  };
  ns.pipelineDiagram = {
    stageIds: STAGE_IDS,
    redraw() {
      const mode = ns.fStr('mode') || 'analog';
      const wrap = document.getElementById('meas-pipeline-wrap');
      if (!wrap) return;
      // The pipeline only describes the analog pipeline. In digital mode
      // each channel has its own pipeline, so we hide the diagram and let
      // the channels block speak for itself.
      wrap.style.display = mode === 'digital' ? 'none' : '';
      if (mode === 'digital') return;
      const scalingOn  = ns.fBool('scaling');
      const offset     = ns.fNum('i_offset');
      const offsetOn   = offset != null && offset !== 0;
      const method     = ns.fStr('smooth_method');
      const smoothingOn = method && method.toLowerCase() !== 'none';
      // Outlier detection has no static UI control on the analog page (it's
      // toggled at runtime via the outlierDetection topic). We still draw
      // its stage as a runtime-only hint so users see the full pipeline.
      setEnabled(STAGE_IDS.offset,  offsetOn);
      setEnabled(STAGE_IDS.scale,   scalingOn);
      setEnabled(STAGE_IDS.smooth,  !!smoothingOn);
      // 'outlier' and 'input'/'output' always rendered enabled.
      // Update sub-labels with the live values so the diagram doubles as a
      // configuration summary.
      if (offsetOn) setLabel('meas-stage-offset-sub', `+${offset}`);
      else          setLabel('meas-stage-offset-sub', 'off');
      if (scalingOn) {
        const iMin = ns.fNum('i_min');
        const iMax = ns.fNum('i_max');
        const oMin = ns.fNum('o_min');
        const oMax = ns.fNum('o_max');
        const lhs = `[${iMin ?? '?'},${iMax ?? '?'}]`;
        const rhs = `[${oMin ?? '?'},${oMax ?? '?'}]`;
        setLabel('meas-stage-scale-sub', `${lhs}→${rhs}`);
      } else {
        setLabel('meas-stage-scale-sub', 'off');
      }
      if (smoothingOn) {
        const win = ns.fNum('count');
        setLabel('meas-stage-smooth-sub', `${method} · win=${win ?? '?'}`);
      } else {
        setLabel('meas-stage-smooth-sub', 'off');
      }
      const procFmt = ns.fStr('processOutputFormat') || 'process';
      const dbFmt   = ns.fStr('dbaseOutputFormat')   || 'influxdb';
      setLabel('meas-stage-output-sub', `${procFmt} / ${dbFmt}`);
    },
  };
 })();
--- a/src/editor/scaling-chart.js
+++ b/src/editor/scaling-chart.js
@@ -0,0 +1,82 @@
 // Measurement editor — scaling line chart.
 //
 // Plots the analog scaling transform: input axis [i_min, i_max] mapped to
 // output axis [o_min, o_max], with the configured i_offset applied before
 // scaling (matching specificClass: v = value + offset, then clamp+lerp).
 //
 // Hidden when scaling is disabled; the static "no scaling" badge in the UI
 // already communicates that state.
 (function () {
  const ns = window.MeasEditor = window.MeasEditor || {};
  // Plot bounds in viewBox coords; matches the inline SVG in measurement.html.
  const VB = { left: 44, right: 286, top: 14, bot: 156 };
  const setAttrs = (el, attrs) => {
    if (!el) return;
    for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
  };
  const fmt = (n) => (Number.isFinite(n) ? (Math.abs(n) >= 100 ? n.toFixed(0) : n.toFixed(2)) : '?');
  ns.scalingChart = {
    redraw() {
      const wrap = document.getElementById('meas-scaling-wrap');
      if (!wrap) return;
      const enabled = ns.fBool('scaling');
      wrap.style.display = enabled ? '' : 'none';
      if (!enabled) return;
      const iMin = ns.fNum('i_min');
      const iMax = ns.fNum('i_max');
      const oMin = ns.fNum('o_min');
      const oMax = ns.fNum('o_max');
      const offset = ns.fNum('i_offset') || 0;
      // Axis tick labels
      setAttrs(document.getElementById('meas-scale-x-min'), { });
      const xMinEl = document.getElementById('meas-scale-x-min');
      const xMaxEl = document.getElementById('meas-scale-x-max');
      const yMinEl = document.getElementById('meas-scale-y-min');
      const yMaxEl = document.getElementById('meas-scale-y-max');
      if (xMinEl) xMinEl.textContent = fmt(iMin);
      if (xMaxEl) xMaxEl.textContent = fmt(iMax);
      if (yMinEl) yMinEl.textContent = fmt(oMin);
      if (yMaxEl) yMaxEl.textContent = fmt(oMax);
      // If the input domain is degenerate we still draw the box but skip
      // the line — same defensive choice _applyScaling makes at runtime.
      if (iMin == null || iMax == null || oMin == null || oMax == null) return;
      if (iMax === iMin) return;
      // Map data → plot pixel.
      const xPx = (val) => VB.left + ((val - iMin) / (iMax - iMin)) * (VB.right - VB.left);
      const yPx = (val) => VB.bot  - ((val - oMin) / (oMax - oMin)) * (VB.bot - VB.top);
      // The scaling clamps input to [iMin, iMax] before lerping. We draw
      // three segments: a flat clamp on the left, the diagonal mapping,
      // and a flat clamp on the right. The offset shifts the input axis,
      // so the diagonal endpoints map at (iMin - offset) and (iMax - offset)
      // in raw-input space, but we plot in offset-applied space (the value
      // that enters _applyScaling) — which is just [iMin, iMax]. So no
      // additional shift is needed inside the plot; we annotate the offset
      // separately.
      const line = document.getElementById('meas-scale-line');
      if (line) {
        const points = [
          `${xPx(iMin)},${yPx(oMin)}`,
          `${xPx(iMax)},${yPx(oMax)}`,
        ].join(' ');
        line.setAttribute('points', points);
      }
      // Offset readout — small label under the chart.
      const offEl = document.getElementById('meas-scale-offset-label');
      if (offEl) {
        if (offset === 0) offEl.textContent = 'offset: 0 (no shift)';
        else offEl.textContent = `offset: +${offset} (applied before scaling)`;
      }
    },
  };
 })();
--- a/src/editor/smoothing-sparkline.js
+++ b/src/editor/smoothing-sparkline.js
@@ -0,0 +1,158 @@
 // Measurement editor — smoothing sparkline.
 //
 // Renders a synthetic noisy signal (gray) and the same signal after the
 // selected smoothing method + window (green) so the user can see what each
 // method does before deploying. The smoothing math here is a small,
 // browser-side mirror of src/channel.js. Drift risk: if you add a method
 // there, add it here (and vice-versa). Keep parameters identical (e.g. the
 // 0.2 lowPass alpha) so the preview matches runtime behaviour.
 (function () {
  const ns = window.MeasEditor = window.MeasEditor || {};
  // Plot box in viewBox coords (matches the inline SVG in measurement.html).
  const VB = { left: 10, right: 380, top: 8, bot: 92 };
  const N = 80; // sample count
  // Deterministic noisy signal: low-freq sine + medium-freq sine + a small
  // pseudo-random component using a fixed seed so the preview never jitters
  // between renders.
  const buildSignal = () => {
    const out = new Array(N);
    let seed = 0xC0FFEE;
    const rand = () => {
      // mulberry32
      seed |= 0; seed = (seed + 0x6D2B79F5) | 0;
      let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
    };
    for (let i = 0; i < N; i++) {
      const base = 0.6 * Math.sin(i * 0.18) + 0.25 * Math.sin(i * 0.55);
      // Inject an outlier at sample 40 so the median/iqr cases look different
      const spike = (i === 40) ? 2.2 : 0;
      const noise = (rand() - 0.5) * 0.7;
      out[i] = base + noise + spike;
    }
    return out;
  };
  // --- Smoothing math (mirror of src/channel.js, kept self-contained) ---
  const mean = (a) => a.reduce((s, v) => s + v, 0) / a.length;
  const median = (a) => {
    const s = [...a].sort((x, y) => x - y);
    const mid = Math.floor(s.length / 2);
    return s.length % 2 ? s[mid] : (s[mid - 1] + s[mid]) / 2;
  };
  const stdDev = (a) => {
    if (a.length <= 1) return 0;
    const m = mean(a);
    return Math.sqrt(a.reduce((s, v) => s + (v - m) ** 2, 0) / (a.length - 1));
  };
  const wma = (a) => {
    let num = 0, den = 0;
    for (let i = 0; i < a.length; i++) { num += a[i] * (i + 1); den += (i + 1); }
    return num / den;
  };
  const lowPass = (a) => {
    let out = a[0];
    for (let i = 1; i < a.length; i++) out = 0.2 * a[i] + 0.8 * out;
    return out;
  };
  const highPass = (a) => {
    const f = [a[0]];
    for (let i = 1; i < a.length; i++) f[i] = 0.8 * (f[i - 1] + a[i] - a[i - 1]);
    return f[f.length - 1];
  };
  const bandPass = (a) => {
    const lp = lowPass(a), hp = highPass(a);
    return a.map((v) => lp + hp - v).pop();
  };
  const kalman = (a) => {
    let e = a[0];
    const gain = 0.1 / (0.1 + 1);
    for (let i = 1; i < a.length; i++) e = e + gain * (a[i] - e);
    return e;
  };
  const savitzkyGolay = (a) => {
    const c = [-3, 12, 17, 12, -3];
    const norm = c.reduce((s, v) => s + v, 0);
    if (a.length < c.length) return a[a.length - 1];
    let s = 0;
    for (let i = 0; i < c.length; i++) s += a[a.length - c.length + i] * c[i];
    return s / norm;
  };
  const applyMethod = (window, method) => {
    const m = (method || '').toLowerCase();
    switch (m) {
      case '':
      case 'none': return window[window.length - 1];
      case 'mean': return mean(window);
      case 'min':  return Math.min(...window);
      case 'max':  return Math.max(...window);
      case 'sd':   return stdDev(window);
      case 'median': return median(window);
      case 'weightedmovingaverage': return wma(window);
      case 'lowpass':  return lowPass(window);
      case 'highpass': return highPass(window);
      case 'bandpass': return bandPass(window);
      case 'kalman':   return kalman(window);
      case 'savitzkygolay': return savitzkyGolay(window);
      default: return window[window.length - 1];
    }
  };
  // --- Render ---
  // Cache the synthetic signal so we don't rebuild it on every keystroke.
  let _signalCache = null;
  const getSignal = () => { _signalCache = _signalCache || buildSignal(); return _signalCache; };
  ns.smoothingSparkline = {
    redraw() {
      const wrap = document.getElementById('meas-smooth-wrap');
      if (!wrap) return;
      const method = ns.fStr('smooth_method');
      const win = Math.max(1, ns.fNum('count') || 1);
      const raw = getSignal();
      const smoothed = new Array(raw.length);
      const buf = [];
      for (let i = 0; i < raw.length; i++) {
        buf.push(raw[i]);
        if (buf.length > win) buf.shift();
        smoothed[i] = applyMethod(buf, method);
      }
      // Compute y range from BOTH series so neither line clips at the edges.
      let yMin = Infinity, yMax = -Infinity;
      for (const v of raw)      { if (v < yMin) yMin = v; if (v > yMax) yMax = v; }
      for (const v of smoothed) { if (v < yMin) yMin = v; if (v > yMax) yMax = v; }
      if (!Number.isFinite(yMin) || !Number.isFinite(yMax) || yMin === yMax) {
        yMin = yMin - 1; yMax = yMax + 1;
      }
      const pad = (yMax - yMin) * 0.08;
      yMin -= pad; yMax += pad;
      const xPx = (i) => VB.left + (i / (N - 1)) * (VB.right - VB.left);
      const yPx = (v) => VB.bot  - ((v - yMin) / (yMax - yMin)) * (VB.bot - VB.top);
      const toPoints = (arr) => arr.map((v, i) => `${xPx(i).toFixed(1)},${yPx(v).toFixed(1)}`).join(' ');
      const rawEl = document.getElementById('meas-smooth-raw');
      const smEl  = document.getElementById('meas-smooth-smoothed');
      if (rawEl) rawEl.setAttribute('points', toPoints(raw));
      if (smEl)  smEl.setAttribute('points', toPoints(smoothed));
      const label = document.getElementById('meas-smooth-label');
      if (label) {
        const m = (method || 'none').toLowerCase();
        if (m === '' || m === 'none') label.textContent = 'no smoothing — raw value passed through';
        else label.textContent = `method: ${method} · window: ${win} samples`;
      }
    },
  };
 })();