measurement/measurement.html

<!--
| S88-niveau             | Primair (blokkleur) | Tekstkleur |
| ---------------------- | ------------------- | ---------- |
| **Area**               | `#0f52a5`           | wit        |
| **Process Cell**       | `#0c99d9`           | wit        |
| **Unit**               | `#50a8d9`           | zwart      |
| **Equipment (Module)** | `#86bbdd`           | zwart      |
| **Control Module**     | `#a9daee`           | zwart      |

-->
<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", {
    category: "EVOLV",
    color: "#D4A02E",
    defaults: {

      // Define default properties
      name: { value: "" }, // use asset category as name

      // Input mode: 'analog' (scalar payload, default) or 'digital' (object payload, many channels)
      mode: { value: "analog" },
      channels: { value: "[]" },

      // Define specific properties (analog-mode pipeline defaults)
      scaling: { value: false },
      i_min: { value: 0, required: true },
      i_max: { value: 0, required: true },
      i_offset: { value: 0 },
      o_min: { value: 0, required: true },
      o_max: { value: 1, required: true },
      simulator: { value: false },
      smooth_method: { value: "" },
      count: { value: "10", required: true },
      stabilityThreshold: { value: 0.01 },
      processOutputFormat: { value: "process" },
      dbaseOutputFormat: { value: "influxdb" },

      //define asset properties
      uuid: { value: "" },
      supplier: { value: "" },
      category: { value: "" },
      assetType: { value: "" },
      model: { value: "" },
      unit: { value: "" },
      assetTagNumber: { value: "" },

      //logger properties
      enableLog: { value: false },
      logLevel: { value: "error" },

      //physicalAspect
      positionVsParent: { value: "" },
      positionIcon: { value: "" },
      hasDistance: { value: false },
      distance: { value: 0 },
      distanceUnit: { value: "m" },
      distanceDescription: { value: "" }

    },

    inputs: 1,
    outputs: 3,
    inputLabels: ["Input"],
    outputLabels: ["process", "dbase", "parent"],
    icon: "font-awesome/fa-sliders",

    label: function () {
      const modeTag = this.mode === 'digital' ? ' [digital]' : '';
      return (this.positionIcon || "") + " " + (this.assetType || "Measurement") + modeTag;
    },

    oneditprepare: function () { window.MeasEditor.oneditprepare.call(this); },
    oneditsave:    function () { window.MeasEditor.oneditsave.call(this); },
  });
</script>

<!-- Main UI -->

<script type="text/html" data-template-name="measurement">

  <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> 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" 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-code"></i> Channels (JSON)</label>
        <textarea id="node-input-channels" rows="8" 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>
        <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">

    <!-- ============================================================ -->
    <!-- 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"><i class="fa fa-compress"></i> Scaling</label>
        <input type="checkbox" id="node-input-scaling" style="width:20px; vertical-align:baseline;" />
        <span>Enable linear input scaling</span>
      </div>

      <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>

      <div class="meas-diag" id="meas-scaling-wrap">
        <div class="meas-diag-side" id="meas-scaling-inputs">
          <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="meas-row" data-stroke="#1E8449" data-couples-line="meas-scale-output-axis">
            <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>

        <!--
          ============================================================
          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;" />
        <span>Replace the real input with an internal random-walk source (toggle at runtime via topic <code>simulator</code>).</span>
      </div>
    </div>

    <!-- ============================================================ -->
    <!-- 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-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>
        <option value="csv">csv</option>
      </select>
    </div>
    <div class="form-row">
      <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>
        <option value="json">json</option>
        <option value="csv">csv</option>
      </select>
    </div>
  </div>

  <!-- Shared asset/logger/position menus (injected by /measurement/menu.js) -->
  <div id="asset-fields-placeholder"></div>
  <div id="logger-fields-placeholder"></div>
  <div id="position-fields-placeholder"></div>

</script>


<script type="text/html" data-help-name="measurement">
  <p><b>Measurement</b>: signal conditioning for a sensor or a bundle of sensors. Runs offset → scaling → smoothing → outlier filtering on each incoming value and publishes into the shared <code>MeasurementContainer</code>.</p>

  <h3>Input modes</h3>
  <ul>
    <li><b>analog</b> (default) — <code>msg.payload</code> is a single number (PLC / 4-20 mA style). One pipeline, one output measurement.</li>
    <li><b>digital</b> — <code>msg.payload</code> is an object with many keys (MQTT / JSON IoT). Each key maps to its own <i>channel</i> with independent scaling, smoothing, outlier detection, type, position, unit. One message → N measurements.</li>
  </ul>

  <h3>Topics (<code>msg.topic</code>)</h3>
  <ul>
    <li><code>measurement</code> — main input. analog: number; digital: object keyed by channel names.</li>
    <li><code>simulator</code> — toggle the internal random-walk source.</li>
    <li><code>outlierDetection</code> — toggle the outlier filter.</li>
    <li><code>calibrate</code> — set offset so current output matches <code>Source Min</code> (scaling on) / <code>Process Min</code> (scaling off). Requires a stable window.</li>
  </ul>

  <h3>Output ports</h3>
  <ol>
    <li><b>process</b> — delta-compressed payload. analog: <code>{mAbs, mPercent, totalMinValue, totalMaxValue, totalMinSmooth, totalMaxSmooth}</code>. digital: <code>{channels: { key: {...} }}</code>.</li>
    <li><b>dbase</b> — InfluxDB line-protocol telemetry.</li>
    <li><b>parent</b> — <code>registerChild</code> handshake for the parent equipment node.</li>
  </ol>

  <h3>Analog configuration</h3>
  <ul>
    <li><b>Scaling</b>: enables linear interpolation from <code>[Source Min, Source Max]</code> to <code>[Process Min, Process Max]</code>.</li>
    <li><b>Input Offset</b>: additive bias applied before scaling.</li>
    <li><b>Smoothing</b>: <code>none</code> | <code>mean</code> | <code>min</code> | <code>max</code> | <code>sd</code> | <code>lowPass</code> | <code>highPass</code> | <code>weightedMovingAverage</code> | <code>bandPass</code> | <code>median</code> | <code>kalman</code> | <code>savitzkyGolay</code>.</li>
    <li><b>Window</b>: sample count for the smoothing window.</li>
    <li><b>Outlier detection</b> (via <code>outlierDetection</code> topic toggle): <code>zScore</code>, <code>iqr</code>, <code>modifiedZScore</code>.</li>
  </ul>

  <h3>Digital configuration</h3>
  <p>Populate the <b>Channels (JSON)</b> field with an array. Each entry:</p>
  <pre>{
  "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" },
  "outlierDetection": { "enabled": true, "method": "zScore", "threshold": 3 }
}</pre>
  <p><code>scaling</code>, <code>smoothing</code>, <code>outlierDetection</code> are optional — missing sections fall back to the analog-mode fields above.</p>
  <p>Unknown <code>type</code> values (anything not in <code>pressure/flow/power/temperature/volume/length/mass/energy</code>) are accepted without unit compatibility checks, so user-defined channels like <code>humidity</code>, <code>co2</code>, <code>voc</code> work out of the box.</p>
</script>