Merge pull request 'feat: VESC CAN health monitor (Issue #651)' (#666) from sl-jetson/issue-651-vesc-health into main

ui/dashboard.js

@@ -21,6 +21,7 @@ const PANELS = [
   { id: 'events',   watchTopic: '/rosout',                         msgType: 'rcl_interfaces/msg/Log' },
   { id: 'settings', watchTopic: null,                              msgType: null },  // service-based
   { id: 'gimbal',   watchTopic: '/gimbal/state',                   msgType: 'geometry_msgs/Vector3' },
+  { id: 'can',      watchTopic: '/vesc/left/state',               msgType: 'std_msgs/String' },
 ];
 
 // ── State ──────────────────────────────────────────────────────────────────
@@ -180,6 +181,13 @@ function setupTopics() {
   });
   gimbalTopic.subscribe(() => { markPanelLive('gimbal'); });
 
+  // ── VESC left state (for CAN monitor card liveness) ──
+  const vescWatch = new ROSLIB.Topic({
+    ros, name: '/vesc/left/state',
+    messageType: 'std_msgs/String', throttle_rate: 1000,
+  });
+  vescWatch.subscribe(() => { markPanelLive('can'); });
+
   // ── cmd_vel monitor (for gamepad card liveness) ──
   const cmdVelWatch = new ROSLIB.Topic({
     ros, name: '/cmd_vel',

ui/index.html

@@ -193,6 +193,28 @@
       </div>
     </a>
 
+    <a class="panel-card" href="can_monitor_panel.html" data-panel="can">
+      <div class="card-header">
+        <div class="card-icon" style="color:#06b6d4">📡</div>
+        <div>
+          <div class="card-title">CAN MONITOR</div>
+          <div class="card-sub">#681</div>
+        </div>
+        <div class="card-dot" id="dot-can"></div>
+      </div>
+      <div class="card-desc">VESC L/R RPM · current · temps · voltage · IMU pitch/roll/yaw · balance PID · barometer</div>
+      <div class="card-topics">
+        <code>/vesc/left/state</code>
+        <code>/vesc/right/state</code>
+        <code>/saltybot/imu</code>
+        <code>/saltybot/balance_state</code>
+      </div>
+      <div class="card-footer">
+        <span class="card-status" id="status-can">OFFLINE</span>
+        <span class="card-msg" id="msg-can">No data</span>
+      </div>
+    </a>
+
     <a class="panel-card" href="gimbal_panel.html" data-panel="gimbal">
       <div class="card-header">
         <div class="card-icon" style="color:#f97316">🎥</div>