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

<script>
  RED.nodes.registerType("measurement", {
    category: "EVOLV",
    color: "#a9daee", // color for the node based on the S88 schema
    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 },
      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 () {
      return (this.positionIcon || "") + " " + (this.assetType || "Measurement");
    },
    
    oneditprepare: function() {
        const waitForMenuData = () => {
            if (window.EVOLV?.nodes?.measurement?.initEditor) {
                window.EVOLV.nodes.measurement.initEditor(this);
            } else {
                setTimeout(waitForMenuData, 50);
            }
        };
        // Wait for the menu data to be ready before initializing the editor
        waitForMenuData();
      
        // THIS IS NODE SPECIFIC --------------- Initialize the dropdowns and other specific UI elements -------------- this should be derived from the config in the future (make config based menu)
        // Populate smoothing methods dropdown
        const smoothMethodSelect = document.getElementById('node-input-smooth_method');
        const options = window.EVOLV?.nodes?.measurement?.config?.smoothing?.smoothMethod?.rules?.values || [];

        // Clear existing options
        smoothMethodSelect.innerHTML = '';
        
        // Add empty option
        const emptyOption = document.createElement('option');
        emptyOption.value = '';
        emptyOption.textContent = 'Select method...';
        smoothMethodSelect.appendChild(emptyOption);
        
        // Add smoothing method options
        options.forEach(option => {
        const optionElement = document.createElement('option');
        optionElement.value = option.value;
        optionElement.textContent = option.value;
        optionElement.title = option.description; // Add tooltip with full description
        smoothMethodSelect.appendChild(optionElement);
        });
        
        // Set current value if it exists
        if (this.smooth_method) {
        smoothMethodSelect.value = this.smooth_method;
        }

        // --- Scale rows toggle ---
      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';
      }

      // wire and initialize
      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);
      }

      // Save basic properties
      ["smooth_method", "mode", "channels"].forEach(
        (field) => (node[field] = document.getElementById(`node-input-${field}`).value || "")
      );

      // Save numeric and boolean properties
      ["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)
      );

      // Validation checks
      if (node.scaling && (isNaN(node.i_min) || isNaN(node.i_max))) {
        RED.notify("Scaling enabled, but input range is incomplete!", "error");
      }

    },
  });
</script>

<!-- Main UI -->

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

  <!-- Input mode -->
  <div class="form-row">
    <label for="node-input-mode"><i class="fa fa-exchange"></i> Input 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="row-input-channels">
    <label for="node-input-channels"><i class="fa fa-list"></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>
    <div class="form-tips">Digital mode only. One entry per payload key. See README for schema.</div>
  </div>

  <hr>

  <!-- Scaling Checkbox -->
  <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 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>

  <!-- Output / Process Min/Max -->
  <div class="form-row">
    <label for="node-input-o_min"><i class="fa fa-tag"></i> Process Min</label>
    <input type="number" id="node-input-o_min" placeholder="0" />
  </div>
  <div class="form-row">
    <label for="node-input-o_max"><i class="fa fa-tag"></i> Process Max</label>
    <input type="number" id="node-input-o_max" placeholder="1" />
  </div>

  <!-- Simulator Checkbox -->
  <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>Activate internal simulation?</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>

  <hr>
  <h3>Output Formats</h3>
  <div class="form-row">
    <label for="node-input-processOutputFormat"><i class="fa fa-random"></i> Process Output</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 Output</label>
    <select id="node-input-dbaseOutputFormat" style="width:60%;">
      <option value="influxdb">influxdb</option>
      <option value="json">json</option>
      <option value="csv">csv</option>
    </select>
  </div>

  <!-- Optional Extended Fields: supplier, cat, type, model, unit -->
  <!-- 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>


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