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>
This commit is contained in:
766
measurement.html
766
measurement.html
@@ -8,8 +8,18 @@
|
||||
| **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 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", {
|
||||
@@ -71,186 +81,9 @@
|
||||
const modeTag = this.mode === 'digital' ? ' [digital]' : '';
|
||||
return (this.positionIcon || "") + " " + (this.assetType || "Measurement") + modeTag;
|
||||
},
|
||||
|
||||
oneditprepare: function() {
|
||||
const node = 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");
|
||||
}
|
||||
}
|
||||
},
|
||||
oneditprepare: function () { window.MeasEditor.oneditprepare.call(this); },
|
||||
oneditsave: function () { window.MeasEditor.oneditsave.call(this); },
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -258,122 +91,515 @@
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<div class="form-row" id="mode-hint" style="margin-left:105px; font-size:12px; color:#666;"></div>
|
||||
|
||||
<!-- ===================== DIGITAL MODE FIELDS ===================== -->
|
||||
<div id="digital-only-fields">
|
||||
<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">One entry per payload key. Each channel has its own type / position / unit / scaling / smoothing / outlier detection. See README for the full schema.</div>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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" />
|
||||
<!-- ============================================================ -->
|
||||
<!-- 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>
|
||||
|
||||
<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" />
|
||||
<!-- ============================================================ -->
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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" />
|
||||
<!-- ============================================================ -->
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<!-- Simulator Checkbox -->
|
||||
<!-- ================================================================ -->
|
||||
<!-- 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-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%;">
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
<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="frost">frost</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 -->
|
||||
<!-- Shared asset/logger/position menus (injected by /measurement/menu.js) -->
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user