rotatingMachine/rotatingMachine.html

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

-->
<!-- Load the dynamic menu & config endpoints -->
<script src="/rotatingMachine/menu.js"></script>
<script src="/rotatingMachine/configData.js"></script>

<script>
  RED.nodes.registerType("rotatingMachine", {
    category: "EVOLV",
    color: "#E89B3A",
        defaults: {
          name: { value: "" },

          // Define specific properties
          speed: { value: 1, required: true },
          startup: { value: 0 },
          warmup: { value: 0 },
          shutdown: { value: 0 },
          cooldown: { value: 0 },
          movementMode : { value: "staticspeed" }, // static or dynamic
          machineCurve : { value: {}},
          processOutputFormat: { value: "process" },
          dbaseOutputFormat: { value: "influxdb" },

          // Asset identifier surface. supplier/category/assetType are
          // derived at runtime via assetResolver.resolveAssetMetadata(model);
          // do NOT add them back here. See src/registry/README.md.
          uuid: { value: "" },
          assetTagNumber: { value: "" },
          model: { value: "" },
          unit: { value: "" },
          curvePressureUnit: { value: "mbar" },
          curveFlowUnit: { value: "" },
          curvePowerUnit: { value: "kW" },
          curveControlUnit: { 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-cog",

    label: function () {
      // No more `this.category` on the node — fall back to model id, then a
      // generic name. supplier/category/type live in the registry now.
      const stem = this.model ? this.model : "Machine";
      return (this.positionIcon || "") + " " + stem;
    },

    oneditprepare: function() {
      const node = this;

      // wait for the menu scripts to load (asset/logger/position injected via menu.js)
      let menuRetries = 0;
      const maxMenuRetries = 100; // 5 seconds at 50ms intervals
      const waitForMenuData = () => {
        if (window.EVOLV?.nodes?.rotatingMachine?.initEditor) {
          window.EVOLV.nodes.rotatingMachine.initEditor(node);
        } else if (++menuRetries < maxMenuRetries) {
          setTimeout(waitForMenuData, 50);
        } else {
          console.warn("rotatingMachine: menu scripts failed to load within 5 seconds");
        }
      };
      waitForMenuData();

      // -----------------------------------------------------------
      // Movement-mode visual cards (replaces the old <select>).
      // Same compact 94×86 card sizing as machineGroupControl.
      // -----------------------------------------------------------
      const modeInput = document.getElementById("node-input-movementMode");
      const cards = document.querySelectorAll(".rm-mode-card");
      const setMode = (val) => {
        if (modeInput) modeInput.value = val;
        cards.forEach((c) => {
          const on = c.dataset.value === val;
          c.classList.toggle("rm-mode-card-on", on);
          c.setAttribute("aria-checked", String(on));
        });
      };
      const initialMode = (node.movementMode === "dynspeed") ? "dynspeed" : "staticspeed";
      setMode(initialMode);
      cards.forEach((card) => {
        card.addEventListener("click", () => setMode(card.dataset.value));
        card.addEventListener("keydown", (e) => {
          if (e.key === " " || e.key === "Enter") { e.preventDefault(); setMode(card.dataset.value); }
        });
      });

      // -----------------------------------------------------------
      // Output-format pickers (shared widget from iconHelpers).
      // Hidden <select>s carry the value; the icon-picker divs are
      // upgraded in place. Same visuals as machineGroupControl.
      // -----------------------------------------------------------
      const helpers = window.EVOLV?.iconHelpers;
      if (helpers && typeof helpers.renderOutputFormatPicker === "function") {
        helpers.renderOutputFormatPicker(
          document.getElementById("node-input-processOutputFormat"),
          document.getElementById("rm-process-output-picker")
        );
        helpers.renderOutputFormatPicker(
          document.getElementById("node-input-dbaseOutputFormat"),
          document.getElementById("rm-dbase-output-picker")
        );
      }

      // -----------------------------------------------------------
      // Circular state-machine diagram (replaces the linear bars).
      // Idle is a small fixed slice at the top; operational is a
      // fixed dominant arc at the bottom; starting+warmingup and
      // stopping+coolingdown each share one of the two side bands
      // proportional to their seconds. Reaction speed shown as a
      // small slope inside the donut hole.
      // -----------------------------------------------------------
      const TL = {
        cx: 170, cy: 130,
        innerR: 46, outerR: 80,
        idleDeg: 30,        // fixed slice at top, the loop-around
        operationalDeg: 100, // fixed dominant arc at the bottom
        sideMinDeg: 28      // each timed phase keeps at least this so labels fit
      };
      TL.sideDeg = (360 - TL.idleDeg - TL.operationalDeg) / 2; // 115° per side

      function p2c(r, deg) {
        const rad = deg * Math.PI / 180;
        return [TL.cx + r * Math.sin(rad), TL.cy - r * Math.cos(rad)];
      }
      function arcPath(rIn, rOut, startDeg, endDeg) {
        const [x1, y1] = p2c(rOut, startDeg);
        const [x2, y2] = p2c(rOut, endDeg);
        const [x3, y3] = p2c(rIn,  endDeg);
        const [x4, y4] = p2c(rIn,  startDeg);
        const largeArc = (endDeg - startDeg) > 180 ? 1 : 0;
        return "M " + x1.toFixed(2) + " " + y1.toFixed(2) +
               " A " + rOut + " " + rOut + " 0 " + largeArc + " 1 " + x2.toFixed(2) + " " + y2.toFixed(2) +
               " L " + x3.toFixed(2) + " " + y3.toFixed(2) +
               " A " + rIn  + " " + rIn  + " 0 " + largeArc + " 0 " + x4.toFixed(2) + " " + y4.toFixed(2) +
               " Z";
      }
      function splitPair(a, b, total, minDeg) {
        let aDeg, bDeg;
        if (a + b === 0) { aDeg = bDeg = total / 2; }
        else { aDeg = total * a / (a + b); bDeg = total - aDeg; }
        if (aDeg < minDeg)      { aDeg = minDeg; bDeg = total - minDeg; }
        else if (bDeg < minDeg) { bDeg = minDeg; aDeg = total - minDeg; }
        return [aDeg, bDeg];
      }

      function redrawTimeline() {
        const speed    = Math.max(0.01, parseFloat(document.getElementById("node-input-speed").value)    || 1);
        const startup  = Math.max(0,    parseFloat(document.getElementById("node-input-startup").value)  || 0);
        const warmup   = Math.max(0,    parseFloat(document.getElementById("node-input-warmup").value)   || 0);
        const shutdown = Math.max(0,    parseFloat(document.getElementById("node-input-shutdown").value) || 0);
        const cooldown = Math.max(0,    parseFloat(document.getElementById("node-input-cooldown").value) || 0);

        const [startingDeg, warmingupDeg]   = splitPair(startup,  warmup,   TL.sideDeg, TL.sideMinDeg);
        const [stoppingDeg, coolingdownDeg] = splitPair(shutdown, cooldown, TL.sideDeg, TL.sideMinDeg);

        // Clockwise from top (0° = idle centre). Wrap idle across ±idleDeg/2.
        const idleHalf = TL.idleDeg / 2;
        const states = [
          { id: "idle",        startDeg: -idleHalf,                                                                   endDeg: idleHalf,                                                                                       label: "idle",         time: null,     above: true  },
          { id: "starting",    startDeg: idleHalf,                                                                    endDeg: idleHalf + startingDeg,                                                                         label: "starting",     time: startup,  above: false },
          { id: "warmingup",   startDeg: idleHalf + startingDeg,                                                      endDeg: idleHalf + startingDeg + warmingupDeg,                                                          label: "\u{1F6E1}︎ warm-up",   time: warmup,   above: false },
          { id: "operational", startDeg: idleHalf + TL.sideDeg,                                                       endDeg: idleHalf + TL.sideDeg + TL.operationalDeg,                                                      label: "operational",  time: null,     above: false },
          { id: "stopping",    startDeg: idleHalf + TL.sideDeg + TL.operationalDeg,                                   endDeg: idleHalf + TL.sideDeg + TL.operationalDeg + stoppingDeg,                                        label: "stopping",     time: shutdown, above: false },
          { id: "coolingdown", startDeg: idleHalf + TL.sideDeg + TL.operationalDeg + stoppingDeg,                     endDeg: idleHalf + TL.sideDeg + TL.operationalDeg + stoppingDeg + coolingdownDeg,                       label: "\u{1F6E1}︎ cool-down", time: cooldown, above: false }
        ];

        const labelR = (TL.innerR + TL.outerR) / 2;
        const titleR = TL.outerR + 22;

        states.forEach((s) => {
          const arc = document.getElementById("rm-tl-" + s.id);
          if (arc) arc.setAttribute("d", arcPath(TL.innerR, TL.outerR, s.startDeg, s.endDeg));

          const midDeg = (s.startDeg + s.endDeg) / 2;
          const normMid = ((midDeg % 360) + 360) % 360;

          // State name OUTSIDE the ring.
          const lbl = document.getElementById("rm-tl-lbl-" + s.id);
          if (lbl) {
            const [lx, ly] = p2c(titleR, midDeg);
            lbl.setAttribute("x", lx.toFixed(2));
            lbl.setAttribute("y", ly.toFixed(2));
            let ta;
            if (Math.abs(normMid) < 12 || Math.abs(normMid - 180) < 12 || normMid > 348) ta = "middle";
            else if (normMid > 0 && normMid < 180) ta = "start";
            else ta = "end";
            lbl.setAttribute("text-anchor", ta);
            const dy = (normMid < 12 || normMid > 348) ? "-4"
                     : (Math.abs(normMid - 180) < 12)  ? "14"
                     : "4";
            lbl.setAttribute("dy", dy);
            lbl.textContent = s.label;
          }

          // Time value INSIDE arc.
          const t = document.getElementById("rm-tl-time-" + s.id);
          if (t) {
            const [tx, ty] = p2c(labelR, midDeg);
            t.setAttribute("x", tx.toFixed(2));
            t.setAttribute("y", ty.toFixed(2));
            t.setAttribute("text-anchor", "middle");
            t.setAttribute("dy", "4");
            t.textContent = (s.time == null) ? "" : (s.time + "s");
          }
        });

        // Reaction-speed value in the donut hole.
        const rampVal = document.getElementById("rm-tl-ramp-value");
        if (rampVal) rampVal.textContent = speed + " %/s";
      }

      // Hover-couple: hover an input row → glow its arc.
      document.querySelectorAll(".rm-row[data-couples]").forEach((row) => {
        const targetId = row.dataset.couples;
        row.addEventListener("mouseenter", () => {
          document.getElementById(targetId)?.classList.add("rm-arc-highlight");
        });
        row.addEventListener("mouseleave", () => {
          document.getElementById(targetId)?.classList.remove("rm-arc-highlight");
        });
      });

      ["speed", "startup", "warmup", "shutdown", "cooldown"].forEach((field) => {
        const el = document.getElementById("node-input-" + field);
        if (el) el.addEventListener("input", redrawTimeline);
      });

      // Size the donut SVG so its top/bottom line up with the side panel:
      // measure the side-panel's computed height and apply it to the SVG.
      // Re-runs on every dialog open (oneditprepare is per-edit).
      function syncSvgHeight() {
        const sidePanel = document.querySelector(".rm-diag-side");
        const svg = document.getElementById("rm-timeline");
        if (!sidePanel || !svg) return;
        const h = sidePanel.getBoundingClientRect().height;
        if (h > 0) svg.style.height = h + "px";
      }

      // First paint (next tick so the dialog is in the DOM).
      // Use requestAnimationFrame chain so the side-panel height is measured
      // AFTER the dialog has actually laid out — getBoundingClientRect on a
      // freshly-created element returns 0 inside the same synchronous tick.
      setTimeout(() => {
        redrawTimeline();
        requestAnimationFrame(() => requestAnimationFrame(syncSvgHeight));
      }, 0);
    },
    oneditsave: function() {
      const node = this;

      // save asset fields
      if (window.EVOLV?.nodes?.rotatingMachine?.assetMenu?.saveEditor) {
        window.EVOLV.nodes.rotatingMachine.assetMenu.saveEditor(this);
      }
      // save logger fields
      if (window.EVOLV?.nodes?.rotatingMachine?.loggerMenu?.saveEditor) {
        window.EVOLV.nodes.rotatingMachine.loggerMenu.saveEditor(this);
      }
      // save position field
      if (window.EVOLV?.nodes?.rotatingMachine?.positionMenu?.saveEditor) {
        window.EVOLV.nodes.rotatingMachine.positionMenu.saveEditor(this);
      }

      ["speed", "startup", "warmup", "shutdown", "cooldown"].forEach((field) => {
        const element = document.getElementById(`node-input-${field}`);
        const value = parseFloat(element?.value) || 0;
        node[field] = value;
      });

      const modeEl = document.getElementById("node-input-movementMode");
      node.movementMode = (modeEl && modeEl.value) ? modeEl.value : "staticspeed";
    }
  });
</script>

<!-- Main UI Template -->
<script type="text/html" data-template-name="rotatingMachine">

  <!-- ============================================================ -->
  <!-- PUMP / ROTATING MACHINE BANNER                                 -->
  <!-- Visual orientation only — no inputs. Shows what the node      -->
  <!-- represents (centrifugal pump with suction + discharge).        -->
  <!-- ============================================================ -->
  <div style="margin: 4px 0 14px 0; background: #fafcff; border: 1px solid #d9e6f2; border-radius: 4px; padding: 8px;">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 200"
         style="display:block;width:100%;"
         font-family="Arial,sans-serif" font-size="11">
      <defs>
        <marker id="rm-arrow-flow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
          <path d="M 0 0 L 10 5 L 0 10 z" fill="#1F4E79"/>
        </marker>
        <marker id="rm-arrow-rot" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 0 L 10 5 L 0 10 z" fill="#0c99d9"/>
        </marker>
      </defs>

      <!-- Title -->
      <text x="300" y="18" text-anchor="middle" fill="#1F4E79" font-size="13" font-weight="bold">Rotating machine — pump / compressor / blower</text>

      <!-- Suction pipe (left → in) -->
      <rect x="20" y="100" width="160" height="38" fill="#dde7f0" stroke="#1F4E79" stroke-width="2"/>
      <line x1="40" y1="119" x2="170" y2="119" stroke="#1F4E79" stroke-width="2" marker-end="url(#rm-arrow-flow)"/>
      <text x="100" y="92"  text-anchor="middle" fill="#1F4E79" font-weight="bold">Suction</text>
      <text x="100" y="156" text-anchor="middle" fill="#777" font-size="10" font-style="italic">upstream / inlet pressure</text>

      <!-- Motor housing (top) + shaft -->
      <rect x="220" y="30" width="44" height="40" rx="3" fill="#7f8c8d" stroke="#333" stroke-width="1.5"/>
      <text x="242" y="55" text-anchor="middle" fill="#fff" font-size="13" font-weight="bold">M</text>
      <line x1="242" y1="70" x2="242" y2="90" stroke="#333" stroke-width="2"/>
      <text x="295" y="50" fill="#555" font-size="10" font-style="italic">motor / drive</text>

      <!-- Volute (pump body) -->
      <circle cx="242" cy="119" r="40" fill="#fff" stroke="#333" stroke-width="2"/>
      <!-- Impeller curves (decorative) -->
      <path d="M 242 95 Q 268 105 268 119 Q 268 133 242 143 Q 216 133 216 119 Q 216 105 242 95" fill="none" stroke="#86bbdd" stroke-width="1.5"/>
      <path d="M 234 100 Q 258 110 258 119 Q 258 128 234 138" fill="none" stroke="#a9daee" stroke-width="1"/>
      <!-- Rotation arrow inside volute -->
      <path d="M 222 109 A 22 22 0 0 1 262 109" fill="none" stroke="#0c99d9" stroke-width="2" marker-end="url(#rm-arrow-rot)"/>
      <text x="242" y="175" text-anchor="middle" fill="#333" font-size="10">impeller</text>

      <!-- Discharge pipe (right → out) -->
      <rect x="304" y="100" width="160" height="38" fill="#dde7f0" stroke="#1F4E79" stroke-width="2"/>
      <line x1="314" y1="119" x2="454" y2="119" stroke="#1F4E79" stroke-width="2" marker-end="url(#rm-arrow-flow)"/>
      <text x="384" y="92"  text-anchor="middle" fill="#1F4E79" font-weight="bold">Discharge</text>
      <text x="384" y="156" text-anchor="middle" fill="#777" font-size="10" font-style="italic">downstream / outlet pressure</text>

      <!-- Hint band right -->
      <text x="484" y="92" fill="#1E8449" font-size="11" font-weight="bold">→ flow Q</text>
      <text x="484" y="108" fill="#1E8449" font-size="10" font-style="italic">m³/h (configurable)</text>
      <text x="484" y="130" fill="#C0392B" font-size="11" font-weight="bold">↑ Δp head</text>
      <text x="484" y="146" fill="#C0392B" font-size="10" font-style="italic">predicted from curve</text>

      <!-- Hint footer -->
      <text x="300" y="194" text-anchor="middle" fill="#777" font-size="10" font-style="italic">
        Flow direction →     Pressure rises across the impeller     Performance follows the Q-H / Q-P curves of the selected asset
      </text>
    </svg>
  </div>

  <!-- ============================================================ -->
  <!-- SEQUENCE & REACTION TIMING                                    -->
  <!-- Side-panel inputs hover-coupled to a timeline of FSM phases.  -->
  <!-- Bar widths grow with the entered seconds. Protected phases   -->
  <!-- (warmingup / coolingdown) carry a 🛡 marker. The reaction-    -->
  <!-- speed value tilts the slope inside the operational bar.      -->
  <!-- ============================================================ -->
  <h4>Sequence &amp; reaction timing</h4>
  <p style="font-size:12px;color:#777;margin:0 0 6px 0;">Each timing input on the left sizes its phase on the timeline. <b>🛡 protected</b> phases (warm-up &amp; cool-down) cannot be aborted by a new command. Hover an input row to highlight the phase it controls.</p>

  <style>
    .rm-diag { display:flex; gap:20px; align-items:flex-start; margin: 0 0 14px 0; }
    .rm-diag-side { width: 230px; flex: 0 0 230px; display:flex; flex-direction:column; gap:6px; }
    /* SVG height is set at runtime by syncSvgHeight() in oneditprepare to
       match the side-panel's computed height exactly. Width follows the
       viewBox aspect ratio. The hard-coded fallback height covers the brief
       window before the first sync runs. */
    .rm-diag-svg { height:195px; width:auto; max-width:100%; display:block; }
    .rm-diag-side .rm-row {
      display:grid; grid-template-columns: minmax(0,1fr) 70px 18px; align-items:center;
      gap:6px; padding:4px 6px 4px 10px; border-left:4px solid #ccc;
      background:#fafafa; border-radius:3px; font-size:11px; cursor:pointer; min-width:0;
    }
    .rm-diag-side .rm-row:hover { background:#f0f0f0; }
    .rm-diag-side .rm-row label { font-weight:600; margin:0; line-height:1.2; }
    .rm-diag-side .rm-row .rm-sub { grid-column:1; font-size:10px; color:#888; font-weight:400; }
    .rm-diag-side .rm-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;
    }
    .rm-diag-side .rm-row input[type=number]:focus { outline:1px solid #0c99d9; border-color:#0c99d9; }
    .rm-diag-side .rm-row .rm-unit { color:#888; font-size:10px; text-align:right; }
    /* Border colours matched to arc fills. */
    .rm-row[data-stroke="#0c99d9"] { border-left-color:#0c99d9; }
    .rm-row[data-stroke="#f39c12"] { border-left-color:#f39c12; }
    .rm-row[data-stroke="#e67e22"] { border-left-color:#e67e22; }
    .rm-row[data-stroke="#0c99d9"] label { color:#0c99d9; }
    .rm-row[data-stroke="#f39c12"] label { color:#b9770e; }
    .rm-row[data-stroke="#e67e22"] label { color:#af601a; }
    /* Highlight class applied to a state's arc path on input-row hover. */
    .rm-arc-highlight { stroke:#1F4E79 !important; stroke-width:3 !important; filter:brightness(1.08); }

    /* Movement-mode cards — same compact 94×86 sizing as machineGroupControl. */
    .rm-mode-cards { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 4px 0; }
    .rm-mode-card {
      width:94px; height:86px; box-sizing:border-box;
      border:2px solid #d0d0d0; border-radius:4px; background:#fafafa;
      padding:4px; cursor:pointer; user-select:none;
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
      transition:border-color 80ms ease-out, background 80ms ease-out;
    }
    .rm-mode-card:hover { border-color:#86bbdd; background:#f5fafd; }
    .rm-mode-card:focus { outline:2px solid #1F4E79; outline-offset:2px; }
    .rm-mode-card-on { border-color:#50a8d9; background:#eaf4fb; }
    .rm-mode-card-svg { width:100%; height:54px; display:flex; align-items:center; justify-content:center; }
    .rm-mode-card-svg svg { width:100%; height:100%; display:block; }
    .rm-mode-card-label { font-size:10px; line-height:1; font-weight:600; color:#333; white-space:nowrap; letter-spacing:0; }
    .rm-mode-card:not(.rm-mode-card-on) .rm-mode-card-label { color:#888; }

    /* Output-format rows mirror the mgc layout: nowrap label, native select
       hidden, icon picker rendered alongside by iconHelpers. */
    .rm-output-row > label { white-space:nowrap; width:130px; }
  </style>

  <div class="rm-diag">
    <!-- LEFT: stacked colour-coded inputs. Hover a row → matching SVG bar highlights. -->
    <div class="rm-diag-side">
      <div class="rm-row" data-stroke="#0c99d9" data-couples="rm-tl-operational">
        <div><label>Reaction speed</label><div class="rm-sub">controller ramp rate (slope inside operational)</div></div>
        <input type="number" id="node-input-speed" min="0.1" step="0.1" />
        <span class="rm-unit">%/s</span>
      </div>
      <div class="rm-row" data-stroke="#f39c12" data-couples="rm-tl-starting">
        <div><label>Startup time</label><div class="rm-sub">idle → starting → warmingup</div></div>
        <input type="number" id="node-input-startup" min="0" step="1" />
        <span class="rm-unit">s</span>
      </div>
      <div class="rm-row" data-stroke="#e67e22" data-couples="rm-tl-warmingup">
        <div><label>Warm-up time 🛡︎</label><div class="rm-sub">protected — cannot be aborted</div></div>
        <input type="number" id="node-input-warmup" min="0" step="1" />
        <span class="rm-unit">s</span>
      </div>
      <div class="rm-row" data-stroke="#f39c12" data-couples="rm-tl-stopping">
        <div><label>Shutdown time</label><div class="rm-sub">operational → stopping → coolingdown</div></div>
        <input type="number" id="node-input-shutdown" min="0" step="1" />
        <span class="rm-unit">s</span>
      </div>
      <div class="rm-row" data-stroke="#e67e22" data-couples="rm-tl-coolingdown">
        <div><label>Cool-down time 🛡︎</label><div class="rm-sub">protected — cannot be aborted</div></div>
        <input type="number" id="node-input-cooldown" min="0" step="1" />
        <span class="rm-unit">s</span>
      </div>
    </div>

    <!-- RIGHT: circular state-machine donut. All arc `d` and label x/y
         values are written by redrawTimeline(). Each state is a wedge of
         the ring; arc angle is proportional to its seconds.
         Idle sits at the top (small fixed slice, the loop-around);
         operational sits at the bottom (fixed dominant arc). -->
    <svg id="rm-timeline" class="rm-diag-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 260"
         style="background:#fff;border:1px solid #e5e5e5;border-radius:4px;"
         preserveAspectRatio="xMidYMid meet"
         font-family="Arial,sans-serif" font-size="11">

      <!-- Title -->
      <text x="170" y="14" text-anchor="middle" fill="#1F4E79" font-size="11" font-weight="bold">State machine — sequence loop</text>

      <!-- State arc wedges. Order in DOM = clockwise from top.
           `d` attribute populated by redrawTimeline(). -->
      <path id="rm-tl-idle"        fill="#bdc3c7" stroke="#7f8c8d" stroke-width="1" />
      <path id="rm-tl-starting"    fill="#f39c12" stroke="#b9770e" stroke-width="1" />
      <path id="rm-tl-warmingup"   fill="#e67e22" stroke="#af601a" stroke-width="1" />
      <path id="rm-tl-operational" fill="#2ecc71" stroke="#239b56" stroke-width="1" />
      <path id="rm-tl-stopping"    fill="#f39c12" stroke="#b9770e" stroke-width="1" />
      <path id="rm-tl-coolingdown" fill="#e67e22" stroke="#af601a" stroke-width="1" />

      <!-- State-name labels OUTSIDE the ring. x/y/text-anchor/dy set in JS. -->
      <text id="rm-tl-lbl-idle"        fill="#555" font-size="11" font-weight="bold"></text>
      <text id="rm-tl-lbl-starting"    fill="#b9770e" font-size="11" font-weight="bold"></text>
      <text id="rm-tl-lbl-warmingup"   fill="#af601a" font-size="11" font-weight="bold"></text>
      <text id="rm-tl-lbl-operational" fill="#239b56" font-size="11" font-weight="bold"></text>
      <text id="rm-tl-lbl-stopping"    fill="#b9770e" font-size="11" font-weight="bold"></text>
      <text id="rm-tl-lbl-coolingdown" fill="#af601a" font-size="11" font-weight="bold"></text>

      <!-- Duration values INSIDE each arc. x/y set in JS. -->
      <text id="rm-tl-time-idle"        fill="#fff" font-size="10" font-weight="bold"></text>
      <text id="rm-tl-time-starting"    fill="#fff" font-size="10" font-weight="bold"></text>
      <text id="rm-tl-time-warmingup"   fill="#fff" font-size="10" font-weight="bold"></text>
      <text id="rm-tl-time-operational" fill="#fff" font-size="10" font-weight="bold"></text>
      <text id="rm-tl-time-stopping"    fill="#fff" font-size="10" font-weight="bold"></text>
      <text id="rm-tl-time-coolingdown" fill="#fff" font-size="10" font-weight="bold"></text>

      <!-- Centre: reaction-speed value (no slope line — donut hole stays clean). -->
      <text x="170" y="125" text-anchor="middle" fill="#1F4E79" font-size="10" font-weight="bold">Reaction speed</text>
      <text id="rm-tl-ramp-value" x="170" y="146" text-anchor="middle" fill="#0c99d9" font-size="16" font-weight="bold">1 %/s</text>
    </svg>
  </div>

  <!-- ============================================================ -->
  <!-- MOVEMENT MODE — visual cards (was a <select>)                  -->
  <!-- Hidden #node-input-movementMode keeps the save path working.   -->
  <!-- ============================================================ -->
  <h4>Movement mode</h4>
  <p style="font-size:12px;color:#777;margin:0 0 6px 0;">How the controller travels between setpoints during <code>accelerating</code> / <code>decelerating</code>.</p>
  <div class="rm-mode-cards" role="radiogroup" aria-label="Movement mode">

    <div class="rm-mode-card" data-value="staticspeed" tabindex="0" role="radio" aria-checked="false" aria-label="Static — constant ramp rate" title="Static — constant ramp rate">
      <div class="rm-mode-card-svg">
        <svg viewBox="0 0 80 58" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <line x1="12" y1="48" x2="70" y2="48" stroke="#888" stroke-width="1.4" stroke-linecap="round"/>
          <line x1="12" y1="48" x2="12" y2="8"  stroke="#888" stroke-width="1.4" stroke-linecap="round"/>
          <line x1="14" y1="46" x2="68" y2="12" stroke="#1F4E79" stroke-width="3" stroke-linecap="round"/>
          <circle cx="14" cy="46" r="2.6" fill="#1F4E79"/>
          <circle cx="68" cy="12" r="2.6" fill="#1F4E79"/>
        </svg>
      </div>
      <div class="rm-mode-card-label">Static</div>
    </div>

    <div class="rm-mode-card" data-value="dynspeed" tabindex="0" role="radio" aria-checked="false" aria-label="Dynamic — ease in/out" title="Dynamic — ease in/out">
      <div class="rm-mode-card-svg">
        <svg viewBox="0 0 80 58" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <line x1="12" y1="48" x2="70" y2="48" stroke="#888" stroke-width="1.4" stroke-linecap="round"/>
          <line x1="12" y1="48" x2="12" y2="8"  stroke="#888" stroke-width="1.4" stroke-linecap="round"/>
          <!-- More pronounced sigmoid: control points pull the mid-section nearly flat
               (y≈29 mid) so the S-shape reads clearly at thumbnail size. -->
          <path d="M 14 46 C 22 46, 26 30, 41 29 C 56 28, 60 12, 68 12" fill="none" stroke="#1F4E79" stroke-width="3" stroke-linecap="round"/>
          <circle cx="14" cy="46" r="2.6" fill="#1F4E79"/>
          <circle cx="68" cy="12" r="2.6" fill="#1F4E79"/>
        </svg>
      </div>
      <div class="rm-mode-card-label">Dynamic</div>
    </div>

  </div>
  <!-- Hidden field — kept for the save path, written by the cards above. -->
  <input type="hidden" id="node-input-movementMode" />

  <!-- ============================================================ -->
  <!-- OUTPUT FORMATS — same shared widget as machineGroupControl.    -->
  <!-- Native selects stay in the DOM (hidden) as save targets; the   -->
  <!-- icon-picker divs are upgraded by iconHelpers.                  -->
  <!-- ============================================================ -->
  <h3>Output Formats</h3>
  <div class="form-row rm-output-row">
    <label for="node-input-processOutputFormat"><i class="fa fa-random"></i> Process Output</label>
    <select id="node-input-processOutputFormat" class="evolv-native-hidden" style="width:60%;">
      <option value="process">process</option>
      <option value="json">json</option>
      <option value="csv">csv</option>
    </select>
    <div id="rm-process-output-picker" class="evolv-icon-picker"
         role="radiogroup" aria-label="Process output format"></div>
  </div>
  <div class="form-row rm-output-row">
    <label for="node-input-dbaseOutputFormat"><i class="fa fa-database"></i> Database Output</label>
    <select id="node-input-dbaseOutputFormat" class="evolv-native-hidden" 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 id="rm-dbase-output-picker" class="evolv-icon-picker"
         role="radiogroup" aria-label="Database output format"></div>
  </div>

  <!-- Asset / Logger / Position menus injected by 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="rotatingMachine">
  <p><b>Rotating Machine</b>: individual pump / compressor / blower control module. Runs a 10-state S88 sequence, predicts flow and power from a supplier curve, and publishes process + telemetry outputs each second.</p>

  <h3>Configuration</h3>
  <ul>
    <li><b>Reaction speed</b>: controller ramp rate (position units / second). E.g. <code>1</code> = 1%/s, so a setpoint of 60% from idle reaches 60% in ~60&nbsp;s. Visualised as the slope inside the <i>operational</i> bar.</li>
    <li><b>Startup / Warm-up / Shutdown / Cool-down</b>: seconds per FSM phase. Warm-up &amp; cool-down are <b>protected</b> — they cannot be aborted by a new command (shown with 🛡 in the timeline).</li>
    <li><b>Movement mode</b>: <code>staticspeed</code> = linear ramp; <code>dynspeed</code> = ease-in/out. Pick a card.</li>
    <li><b>Asset</b> (menu): supplier, category, model (must match a curve in <code>generalFunctions</code>), flow unit (e.g. m³/h), curve units.</li>
    <li><b>Output formats</b>: <code>process</code>/<code>json</code>/<code>csv</code> on port 0; <code>influxdb</code>/<code>json</code>/<code>csv</code> on port 1.</li>
    <li><b>Position</b> (menu): <code>upstream</code> / <code>atEquipment</code> / <code>downstream</code> relative to a parent group/station.</li>
  </ul>

  <h3>Input topics (<code>msg.topic</code>)</h3>
  <ul>
    <li><code>setMode</code> — <code>payload</code> = <code>auto</code> | <code>virtualControl</code> | <code>fysicalControl</code></li>
    <li><code>execSequence</code> — <code>payload</code> = <code>{source, action:"execSequence", parameter: "startup"|"shutdown"|"entermaintenance"|"exitmaintenance"}</code></li>
    <li><code>execMovement</code> — <code>payload</code> = <code>{source, action:"execMovement", setpoint: 0..100}</code> (controller %)</li>
    <li><code>flowMovement</code> — <code>payload</code> = <code>{source, action:"flowMovement", setpoint: &lt;flow in configured unit&gt;}</code></li>
    <li><code>emergencystop</code> — <code>payload</code> = <code>{source, action:"emergencystop"}</code>. Aborts any active movement.</li>
    <li><code>simulateMeasurement</code> — <code>payload</code> = <code>{type:"pressure"|"flow"|"temperature"|"power", position, value, unit}</code>. Injects dashboard-side measurement.</li>
    <li><code>showWorkingCurves</code>, <code>CoG</code> — diagnostics, reply arrives on port 0.</li>
  </ul>

  <h3>Output ports</h3>
  <ol>
    <li><b>process</b> — delta-compressed process payload. Consumers must cache and merge each tick. Keys use 4-segment format <code>type.variant.position.childId</code> (e.g. <code>flow.predicted.downstream.default</code>).</li>
    <li><b>dbase</b> — InfluxDB telemetry.</li>
    <li><b>parent</b> — <code>registerChild</code> handshake for a parent <code>machineGroupControl</code> / <code>pumpingStation</code>.</li>
  </ol>

  <h3>State machine</h3>
  <p>States: <code>idle → starting → warmingup → operational → (accelerating ⇄ decelerating) → operational → stopping → coolingdown → idle</code>. <code>emergencystop → off</code> is reachable from every active state.</p>
  <p>If a <code>shutdown</code> or <code>emergencystop</code> sequence is requested while a setpoint move is in flight (<code>accelerating</code> / <code>decelerating</code>), the move is aborted automatically and the sequence proceeds once the FSM returns to <code>operational</code>.</p>

  <h3>Predictions</h3>
  <p>Flow and power predictions only produce meaningful values once at least one pressure child is reporting (or a <code>simulateMeasurement</code> pressure is injected). Inject BOTH upstream and downstream for best accuracy.</p>
</script>