@tteja/node-red-dashboard-2-robot-arm 0.3.0

package/nodes/ui-robot-arm.html

@@ -0,0 +1,82 @@
+<script type="text/javascript">
+  RED.nodes.registerType('ui-ur5e-arm', {
+    category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category') || 'dashboard 2',
+    color: '#3D7EA6',
+    defaults: {
+      name: { value: '' },
+      group: { type: 'ui-group', required: true },
+      order: { value: 0 },
+      width: {
+        value: 6,
+        validate: function (v) {
+          const width = v || 0;
+          const currentGroup = $('#node-input-group').val() || this.group;
+          const groupNode = RED.nodes.node(currentGroup);
+          const valid = !groupNode || +width <= +groupNode.width;
+          $('#node-input-size').toggleClass('input-error', !valid);
+          return valid;
+        }
+      },
+      height: { value: 6 },
+      robot: { value: '', required: true }
+    },
+    inputs: 0,
+    outputs: 0,
+    icon: 'font-awesome/fa-cube',
+    paletteLabel: 'ui-ur5e-arm',
+    label: function () {
+      return this.name || 'ui-ur5e-arm';
+    },
+    oneditprepare: function () {
+      $('#node-input-size').elementSizer({
+        width: '#node-input-width',
+        height: '#node-input-height',
+        group: '#node-input-group'
+      });
+      const select = $('#node-input-robot');
+      const current = this.robot;
+      select.empty();
+      select.append($('<option></option>').val('').text('— select robot node —'));
+      RED.nodes.eachNode(function (n) {
+        if (n.type === 'robot-arm') {
+          const label = (n.name || 'robot-arm') + ' [' + n.id + ']';
+          select.append($('<option></option>').val(n.id).text(label));
+        }
+      });
+      select.val(current || '');
+    }
+  });
+</script>
+
+<script type="text/html" data-template-name="ui-ur5e-arm">
+  <div class="form-row">
+    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+    <input type="text" id="node-input-name" placeholder="Name">
+  </div>
+  <div class="form-row">
+    <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+    <input type="text" id="node-input-group">
+  </div>
+  <div class="form-row">
+    <label><i class="fa fa-object-group"></i> Size</label>
+    <input type="hidden" id="node-input-width">
+    <input type="hidden" id="node-input-height">
+    <button class="editor-button" id="node-input-size"></button>
+  </div>
+  <div class="form-row">
+    <label for="node-input-robot"><i class="fa fa-android"></i> Robot</label>
+    <select id="node-input-robot"></select>
+  </div>
+  <div class="form-tips">
+    Embeds the 3D URDF viewer for the selected <b>robot</b> node (same-origin iframe of
+    <code>/robot-arm/view/&lt;id&gt;</code>). Place on the same Dashboard 2 page as
+    <b>ui-ur5e-controller</b>.
+  </div>
+</script>
+
+<script type="text/html" data-help-name="ui-ur5e-arm">
+  <p>Dashboard 2 widget: 3D UR5e viewer bound to a <b>robot-arm</b> palette node.</p>
+  <p>Requires <code>@flowfuse/node-red-dashboard</code>. Standalone HTTP view still works without Dashboard.</p>
+  <h3>More</h3>
+  <p><a href="https://github.com/t-teja/node-red-contrib-robot-arm#readme" target="_blank">Usage guide on GitHub</a></p>
+</script>

package/nodes/ui-robot-arm.js

@@ -0,0 +1,25 @@
+'use strict';
+
+module.exports = function (RED) {
+  function UIRobotArmNode (config) {
+    RED.nodes.createNode(this, config);
+    const node = this;
+    const group = RED.nodes.getNode(config.group);
+
+    const evts = {
+      onAction: true,
+      onInput: function (msg, send, done) {
+        send(msg);
+        if (done) done();
+      }
+    };
+
+    if (group) {
+      group.register(node, config, evts);
+    } else {
+      node.error('No group configured — add ui-ur5e-arm to a Dashboard 2 ui-group');
+    }
+  }
+
+  RED.nodes.registerType('ui-ur5e-arm', UIRobotArmNode);
+};

package/nodes/ui-robot-controller.html

@@ -0,0 +1,81 @@
+<script type="text/javascript">
+  RED.nodes.registerType('ui-ur5e-controller', {
+    category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category') || 'dashboard 2',
+    color: '#5B8C5A',
+    defaults: {
+      name: { value: '' },
+      group: { type: 'ui-group', required: true },
+      order: { value: 0 },
+      width: {
+        value: 4,
+        validate: function (v) {
+          const width = v || 0;
+          const currentGroup = $('#node-input-group').val() || this.group;
+          const groupNode = RED.nodes.node(currentGroup);
+          const valid = !groupNode || +width <= +groupNode.width;
+          $('#node-input-size').toggleClass('input-error', !valid);
+          return valid;
+        }
+      },
+      height: { value: 6 },
+      robot: { value: '', required: true }
+    },
+    inputs: 0,
+    outputs: 0,
+    icon: 'font-awesome/fa-sliders',
+    paletteLabel: 'ui-ur5e-controller',
+    label: function () {
+      return this.name || 'ui-ur5e-controller';
+    },
+    oneditprepare: function () {
+      $('#node-input-size').elementSizer({
+        width: '#node-input-width',
+        height: '#node-input-height',
+        group: '#node-input-group'
+      });
+      const select = $('#node-input-robot');
+      const current = this.robot;
+      select.empty();
+      select.append($('<option></option>').val('').text('— select robot node —'));
+      RED.nodes.eachNode(function (n) {
+        if (n.type === 'robot-arm') {
+          const label = (n.name || 'robot-arm') + ' [' + n.id + ']';
+          select.append($('<option></option>').val(n.id).text(label));
+        }
+      });
+      select.val(current || '');
+    }
+  });
+</script>
+
+<script type="text/html" data-template-name="ui-ur5e-controller">
+  <div class="form-row">
+    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+    <input type="text" id="node-input-name" placeholder="Name">
+  </div>
+  <div class="form-row">
+    <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+    <input type="text" id="node-input-group">
+  </div>
+  <div class="form-row">
+    <label><i class="fa fa-object-group"></i> Size</label>
+    <input type="hidden" id="node-input-width">
+    <input type="hidden" id="node-input-height">
+    <button class="editor-button" id="node-input-size"></button>
+  </div>
+  <div class="form-row">
+    <label for="node-input-robot"><i class="fa fa-android"></i> Robot</label>
+    <select id="node-input-robot"></select>
+  </div>
+  <div class="form-tips">
+    Teach pendant bound to the selected <b>robot</b> node (iframe of
+    <code>/robot-arm/pendant/&lt;id&gt;</code>). Sends joint commands directly to that robot —
+    no separate controller wiring required for Dashboard use.
+  </div>
+</script>
+
+<script type="text/html" data-help-name="ui-ur5e-controller">
+  <p>Dashboard 2 teach-pendant widget bound to a <b>robot-arm</b> node. Soft Freeze is UI-only — not SIL.</p>
+  <h3>More</h3>
+  <p><a href="https://github.com/t-teja/node-red-contrib-robot-arm#readme" target="_blank">Usage guide on GitHub</a></p>
+</script>

package/nodes/ui-robot-controller.js

@@ -0,0 +1,25 @@
+'use strict';
+
+module.exports = function (RED) {
+  function UIRobotControllerNode (config) {
+    RED.nodes.createNode(this, config);
+    const node = this;
+    const group = RED.nodes.getNode(config.group);
+
+    const evts = {
+      onAction: true,
+      onInput: function (msg, send, done) {
+        send(msg);
+        if (done) done();
+      }
+    };
+
+    if (group) {
+      group.register(node, config, evts);
+    } else {
+      node.error('No group configured — add ui-ur5e-controller to a Dashboard 2 ui-group');
+    }
+  }
+
+  RED.nodes.registerType('ui-ur5e-controller', UIRobotControllerNode);
+};

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@tteja/node-red-dashboard-2-robot-arm",
+  "version": "0.3.0",
+  "description": "Node-RED + FlowFuse Dashboard 2 robot arm: realistic UR5e URDF/STL viewer, teach pendant, optional ROS2 rosbridge. Palette: robot-arm, robot-arm-controller, ui-ur5e-arm, ui-ur5e-controller.",
+  "author": "Teja",
+  "license": "MIT",
+  "keywords": [
+    "node-red",
+    "node-red-dashboard-2",
+    "robotics",
+    "urdf",
+    "ros2",
+    "three.js",
+    "robot-arm",
+    "ur5e"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/t-teja/node-red-contrib-robot-arm.git"
+  },
+  "bugs": {
+    "url": "https://github.com/t-teja/node-red-contrib-robot-arm/issues"
+  },
+  "homepage": "https://github.com/t-teja/node-red-contrib-robot-arm#readme",
+  "files": [
+    "nodes/*",
+    "lib/*",
+    "models/**/*",
+    "resources/*",
+    "ui/components/*",
+    "ui/index.js",
+    "examples/*",
+    "docs/*",
+    "LICENSE",
+    "README.md"
+  ],
+  "node-red": {
+    "version": ">=3.0.0",
+    "nodes": {
+      "robot-arm": "nodes/robot.js",
+      "robot-arm-controller": "nodes/controller.js",
+      "ui-ur5e-arm": "nodes/ui-robot-arm.js",
+      "ui-ur5e-controller": "nodes/ui-robot-controller.js"
+    },
+    "examples": {
+      "Inject demo": "examples/01-inject-demo.json",
+      "Controller to robot": "examples/02-controller-to-robot.json",
+      "Rosbridge live": "examples/03-rosbridge-live.json",
+      "Controller and ROS2": "examples/04-controller-and-ros2.json",
+      "Dashboard 2": "examples/05-dashboard2.json"
+    }
+  },
+  "node-red-dashboard-2": {
+    "version": "1.0.0",
+    "widgets": {
+      "ui-ur5e-arm": {
+        "output": "robot-arm-widgets.umd.js",
+        "component": "UIRobotArm"
+      },
+      "ui-ur5e-controller": {
+        "output": "robot-arm-widgets.umd.js",
+        "component": "UIRobotController"
+      }
+    }
+  },
+  "dependencies": {
+    "three": "^0.186.1",
+    "urdf-loader": "^0.13.1",
+    "vue": "^3.3.8",
+    "vuex": "^4.1.0",
+    "ws": "^8.18.0"
+  },
+  "peerDependencies": {
+    "@flowfuse/node-red-dashboard": ">=1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@flowfuse/node-red-dashboard": {
+      "optional": true
+    }
+  },
+  "optionalDependencies": {
+    "@flowfuse/node-red-dashboard": ">=1.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.0.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:dev": "NODE_ENV=development vite build",
+    "test": "node --test test/*.test.js"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/resources/controller.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Teach Pendant</title>
+  <style>
+    :root {
+      --bg: #0f1419; --panel: #1a2332; --border: #2a3548;
+      --text: #e7ecf1; --muted: #8b9bb4; --accent: #3d9a6a; --danger: #c44;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
+      font-family: system-ui, sans-serif; padding: 16px;
+    }
+    h1 { font-size: 18px; margin: 0 0 4px; }
+    .sub { color: var(--muted); font-size: 12px; margin-bottom: 16px; }
+    .panel {
+      background: var(--panel); border: 1px solid var(--border);
+      border-radius: 10px; padding: 14px; max-width: 520px;
+    }
+    .row {
+      display: grid; grid-template-columns: 100px 1fr 64px;
+      gap: 8px; align-items: center; margin-bottom: 10px;
+    }
+    .row label { font-size: 12px; color: var(--muted); }
+    .row input[type=range] { width: 100%; }
+    .row .val { font-variant-numeric: tabular-nums; font-size: 12px; text-align: right; }
+    .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
+    button {
+      border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer;
+      background: #2a3f5f; color: var(--text); font-weight: 600; font-size: 13px;
+    }
+    button.primary { background: var(--accent); color: #062016; }
+    button.danger { background: var(--danger); }
+    button.armed { background: #2d6a4f; }
+    button.disarmed { background: #5c4d1a; }
+    .status { margin-top: 12px; font-size: 12px; color: var(--muted); }
+    .status.frozen { color: #f88; font-weight: 700; }
+  </style>
+</head>
+<body>
+  <h1>Teach Pendant</h1>
+  <div class="sub">robot: __ROBOT__ · unit: __UNIT__ · node __NODE_ID__</div>
+  <div class="panel">
+    <div id="sliders"></div>
+    <div class="actions">
+      <button class="primary" id="btn-home">Home</button>
+      <button class="danger" id="btn-freeze">Freeze</button>
+      <button class="armed" id="btn-arm">Armed</button>
+    </div>
+    <div class="status" id="status">Ready</div>
+  </div>
+  <script>
+    window.__PENDANT__ = {
+      nodeId: '__NODE_ID__',
+      unit: '__UNIT__',
+      robot: '__ROBOT__'
+    };
+  </script>
+  <script src="/robot-arm/static/controller.js"></script>
+</body>
+</html>

package/resources/controller.js

@@ -0,0 +1,114 @@
+(function () {
+  const cfg = window.__PENDANT__ || {};
+  const nodeId = cfg.nodeId;
+  const slidersEl = document.getElementById('sliders');
+  const statusEl = document.getElementById('status');
+  const btnHome = document.getElementById('btn-home');
+  const btnFreeze = document.getElementById('btn-freeze');
+  const btnArm = document.getElementById('btn-arm');
+
+  let meta = null;
+  let frozen = false;
+  let manualArmed = true;
+  let joints = {};
+  let timer = null;
+
+  async function loadMeta() {
+    const r = await fetch(`/robot-arm/api/controller/${encodeURIComponent(nodeId)}/meta`);
+    if (!r.ok) throw new Error('meta ' + r.status);
+    meta = await r.json();
+    joints = Object.assign({}, meta.current || {});
+    frozen = !!meta.frozen;
+    manualArmed = meta.manualArmed !== false;
+    render();
+    updateButtons();
+  }
+
+  function render() {
+    slidersEl.innerHTML = '';
+    (meta.joints || []).forEach((j) => {
+      if (j.name === 'finger_joint_right') return;
+      const row = document.createElement('div');
+      row.className = 'row';
+      const label = document.createElement('label');
+      label.textContent = j.label || j.name;
+      const input = document.createElement('input');
+      input.type = 'range';
+      input.min = j.min;
+      input.max = j.max;
+      input.step = meta.stepSize || 0.01;
+      input.value = joints[j.name] != null ? joints[j.name] : (j.home || 0);
+      const val = document.createElement('div');
+      val.className = 'val';
+      const fmt = (n) => (j.unit === 'm' ? Number(n).toFixed(3) : Number(n).toFixed(3));
+      val.textContent = fmt(input.value);
+      input.addEventListener('input', () => {
+        joints[j.name] = Number(input.value);
+        val.textContent = fmt(input.value);
+        scheduleSend();
+      });
+      row.appendChild(label);
+      row.appendChild(input);
+      row.appendChild(val);
+      slidersEl.appendChild(row);
+    });
+  }
+
+  function updateButtons() {
+    btnFreeze.textContent = frozen ? 'UNFREEZE' : 'Freeze';
+    btnArm.textContent = manualArmed ? 'Armed' : 'Disarmed';
+    btnArm.className = manualArmed ? 'armed' : 'disarmed';
+    statusEl.textContent = frozen ? 'SOFT E-STOP (freeze) — commands still tagged freeze' : 'Ready';
+    statusEl.className = 'status' + (frozen ? ' frozen' : '');
+  }
+
+  async function send(extra) {
+    const body = Object.assign({
+      joints,
+      freeze: frozen,
+      manualArmed,
+      force: !!(extra && extra.force)
+    }, extra || {});
+    try {
+      await fetch(`/robot-arm/api/controller/${encodeURIComponent(nodeId)}/command`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+      });
+    } catch (e) {
+      statusEl.textContent = 'Send failed: ' + e.message;
+    }
+  }
+
+  function scheduleSend() {
+    if (timer) return;
+    timer = setTimeout(() => {
+      timer = null;
+      send();
+    }, 50);
+  }
+
+  btnHome.addEventListener('click', () => {
+    (meta.joints || []).forEach((j) => {
+      joints[j.name] = typeof j.home === 'number' ? j.home : 0;
+    });
+    render();
+    send({ home: true, force: true });
+  });
+
+  btnFreeze.addEventListener('click', () => {
+    frozen = !frozen;
+    updateButtons();
+    send({ freeze: frozen, force: true });
+  });
+
+  btnArm.addEventListener('click', () => {
+    manualArmed = !manualArmed;
+    updateButtons();
+    send({ manualArmed, force: true });
+  });
+
+  loadMeta().catch((e) => {
+    statusEl.textContent = 'Failed to load: ' + e.message;
+  });
+})();

package/resources/pendant.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Teach Pendant</title>
+  <style>
+    :root {
+      --bg: #0f1419; --panel: #1a2332; --border: #2a3548;
+      --text: #e7ecf1; --muted: #8b9bb4; --accent: #3d9a6a; --danger: #c44;
+    }
+    * { box-sizing: border-box; }
+    html, body { margin: 0; height: 100%; }
+    body {
+      background: var(--bg); color: var(--text);
+      font-family: system-ui, sans-serif; padding: 12px;
+    }
+    h1 { font-size: 16px; margin: 0 0 4px; }
+    .sub { color: var(--muted); font-size: 11px; margin-bottom: 12px; }
+    .panel {
+      background: var(--panel); border: 1px solid var(--border);
+      border-radius: 10px; padding: 12px;
+    }
+    .row {
+      display: grid; grid-template-columns: 90px 1fr 56px;
+      gap: 8px; align-items: center; margin-bottom: 8px;
+    }
+    .row label { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
+    .row input[type=range] { width: 100%; }
+    .row .val { font-variant-numeric: tabular-nums; font-size: 11px; text-align: right; }
+    .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
+    button {
+      border: 0; border-radius: 8px; padding: 8px 12px; cursor: pointer;
+      background: #2a3f5f; color: var(--text); font-weight: 600; font-size: 12px;
+    }
+    button.primary { background: var(--accent); color: #062016; }
+    button.danger { background: var(--danger); }
+    button.armed { background: #2d6a4f; }
+    button.disarmed { background: #5c4d1a; }
+    .status { margin-top: 10px; font-size: 11px; color: var(--muted); }
+    .status.frozen { color: #f88; font-weight: 700; }
+  </style>
+</head>
+<body>
+  <h1>Teach Pendant</h1>
+  <div class="sub">robot: __ROBOT__ · unit: __UNIT__ · robot node __NODE_ID__</div>
+  <div class="panel">
+    <div id="sliders"></div>
+    <div class="actions">
+      <button class="primary" id="btn-home">Home</button>
+      <button class="danger" id="btn-freeze">Freeze</button>
+      <button class="armed" id="btn-arm">Armed</button>
+    </div>
+    <div class="status" id="status">Ready</div>
+  </div>
+  <script>
+    window.__PENDANT__ = {
+      mode: 'robot',
+      nodeId: '__NODE_ID__',
+      unit: '__UNIT__',
+      robot: '__ROBOT__'
+    };
+  </script>
+  <script src="/robot-arm/static/pendant.js"></script>
+</body>
+</html>

package/resources/pendant.js

@@ -0,0 +1,129 @@
+(function () {
+  const cfg = window.__PENDANT__ || {};
+  const robotId = cfg.nodeId;
+  const slidersEl = document.getElementById('sliders');
+  const statusEl = document.getElementById('status');
+  const btnHome = document.getElementById('btn-home');
+  const btnFreeze = document.getElementById('btn-freeze');
+  const btnArm = document.getElementById('btn-arm');
+
+  let metaJoints = [];
+  let frozen = false;
+  let manualArmed = true;
+  let joints = {};
+  let unit = cfg.unit || 'rad';
+  let timer = null;
+  let stepSize = 0.01;
+
+  async function loadState() {
+    const r = await fetch(`/robot-arm/api/${encodeURIComponent(robotId)}/state`);
+    if (!r.ok) throw new Error('state ' + r.status);
+    const data = await r.json();
+    metaJoints = (data.jointsMeta || []).filter((j) => j.name !== 'finger_joint_right');
+    unit = data.unit || unit;
+    joints = Object.assign({}, data.joints || {});
+    for (const j of metaJoints) {
+      if (joints[j.name] == null) joints[j.name] = typeof j.home === 'number' ? j.home : 0;
+    }
+    render();
+    updateButtons();
+  }
+
+  function render() {
+    slidersEl.innerHTML = '';
+    metaJoints.forEach((j) => {
+      const row = document.createElement('div');
+      row.className = 'row';
+      const label = document.createElement('label');
+      label.textContent = j.label || j.name;
+      const input = document.createElement('input');
+      input.type = 'range';
+      let min = j.min != null ? j.min : -3.14;
+      let max = j.max != null ? j.max : 3.14;
+      let home = typeof j.home === 'number' ? j.home : 0;
+      if (unit === 'deg' && j.unit !== 'm') {
+        const f = 180 / Math.PI;
+        min *= f; max *= f; home *= f;
+      }
+      input.min = min;
+      input.max = max;
+      input.step = j.unit === 'm' ? 0.001 : stepSize;
+      const cur = joints[j.name] != null ? joints[j.name] : home;
+      input.value = cur;
+      const val = document.createElement('div');
+      val.className = 'val';
+      const fmt = (n) => Number(n).toFixed(j.unit === 'm' ? 3 : 3);
+      val.textContent = fmt(input.value);
+      input.addEventListener('input', () => {
+        joints[j.name] = Number(input.value);
+        val.textContent = fmt(input.value);
+        scheduleSend();
+      });
+      row.appendChild(label);
+      row.appendChild(input);
+      row.appendChild(val);
+      slidersEl.appendChild(row);
+    });
+  }
+
+  function updateButtons() {
+    btnFreeze.textContent = frozen ? 'UNFREEZE' : 'Freeze';
+    btnArm.textContent = manualArmed ? 'Armed' : 'Disarmed';
+    btnArm.className = manualArmed ? 'armed' : 'disarmed';
+    statusEl.textContent = frozen ? 'SOFT E-STOP (freeze) — UI only, not SIL' : 'Ready';
+    statusEl.className = 'status' + (frozen ? ' frozen' : '');
+  }
+
+  async function send(extra) {
+    const body = Object.assign({
+      joints,
+      unit,
+      source: 'pendant',
+      freeze: frozen,
+      manualArmed
+    }, extra || {});
+    try {
+      await fetch(`/robot-arm/api/${encodeURIComponent(robotId)}/joints`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+      });
+    } catch (e) {
+      statusEl.textContent = 'Send failed: ' + e.message;
+    }
+  }
+
+  function scheduleSend() {
+    if (timer) return;
+    timer = setTimeout(() => {
+      timer = null;
+      send();
+    }, 50);
+  }
+
+  btnHome.addEventListener('click', () => {
+    metaJoints.forEach((j) => {
+      let home = typeof j.home === 'number' ? j.home : 0;
+      if (unit === 'deg' && j.unit !== 'm') home = home * 180 / Math.PI;
+      joints[j.name] = home;
+    });
+    render();
+    send({ force: true });
+  });
+
+  btnFreeze.addEventListener('click', () => {
+    frozen = !frozen;
+    updateButtons();
+    send({ freeze: frozen, force: true });
+  });
+
+  btnArm.addEventListener('click', () => {
+    manualArmed = !manualArmed;
+    updateButtons();
+    send({ manualArmed, force: true });
+  });
+
+  loadState().catch((e) => {
+    statusEl.textContent = 'Failed to load: ' + e.message;
+  });
+})();