Fix keyboard control and serialization issue

Author: minggangw

electron_demo/turtle_tf2/README.md

@@ -192,6 +192,17 @@ world → turtle2
 
 ## Controls
 
+### Keyboard Controls (NEW!)
+
+**Turtle1 Movement**:
+
+- **W** or **↑** (Up Arrow): Move forward
+- **S** or **↓** (Down Arrow): Move backward
+- **A** or **←** (Left Arrow): Turn left
+- **D** or **→** (Right Arrow): Turn right
+
+💡 **Tip**: Click on the 3D visualization area first to ensure keyboard focus, then use the controls above to drive turtle1 around the turtlesim environment.
+
 ### Turtle Management
 
 - **Spawn Turtle1**: Creates turtle1 at position (5.5, 5.5)

electron_demo/turtle_tf2/index.html

@@ -214,6 +214,46 @@
       margin-right: 8px;
     }
 
+    .keyboard-legend {
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 8px;
+      padding: 12px;
+      margin: 8px 0;
+    }
+
+    .key-combo {
+      display: flex;
+      align-items: center;
+      margin: 6px 0;
+      font-size: 13px;
+      color: #555;
+    }
+
+    .key {
+      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+      border: 1px solid #bbb;
+      border-radius: 4px;
+      padding: 4px 8px;
+      margin: 0 4px;
+      font-family: 'Courier New', monospace;
+      font-weight: bold;
+      font-size: 12px;
+      color: #333;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      min-width: 24px;
+      text-align: center;
+    }
+
+    .keyboard-note {
+      background: rgba(255, 193, 7, 0.1);
+      border-left: 3px solid #ffc107;
+      padding: 8px 12px;
+      margin: 8px 0;
+      font-size: 12px;
+      color: #856404;
+      border-radius: 0 4px 4px 0;
+    }
+
     .instructions {
       background: rgba(255, 255, 255, 0.3);
       border-radius: 8px;
@@ -341,6 +381,31 @@
         </div>
       </div>
 
+      <!-- Keyboard Controls -->
+      <div class="controls-section">
+        <div class="section-title">⌨️ Keyboard Controls</div>
+        <div class="control-group">
+          <label class="control-label">Move Turtle1</label>
+          <div class="keyboard-legend">
+            <div class="key-combo">
+              <span class="key">W</span> or <span class="key">↑</span> - Forward
+            </div>
+            <div class="key-combo">
+              <span class="key">S</span> or <span class="key">↓</span> - Backward
+            </div>
+            <div class="key-combo">
+              <span class="key">A</span> or <span class="key">←</span> - Turn Left
+            </div>
+            <div class="key-combo">
+              <span class="key">D</span> or <span class="key">→</span> - Turn Right
+            </div>
+          </div>
+          <div class="keyboard-note">
+            💡 Click on the 3D scene to focus, then use keyboard controls
+          </div>
+        </div>
+      </div>
+
       <!-- Transform Broadcasters -->
       <div class="controls-section">
         <div class="section-title">📡 TF2 Broadcasters</div>

electron_demo/turtle_tf2/main.js

@@ -129,6 +129,13 @@ async function createTurtleTf2Broadcaster() {
   // Create transform broadcaster
   const tfBroadcaster = node.createPublisher('tf2_msgs/msg/TFMessage', '/tf');
 
+  // Create velocity publisher for turtle control
+  const velocityPublisher = node.createPublisher(
+    'geometry_msgs/msg/Twist',
+    '/turtle1/cmd_vel'
+  );
+  turtleTf2Nodes.velocityPublisher = velocityPublisher;
+
   // Subscribe to turtle1 pose
   node.createSubscription('turtlesim_msgs/msg/Pose', '/turtle1/pose', (msg) => {
     const now = node.now();
@@ -171,7 +178,29 @@ async function createTurtleTf2Broadcaster() {
           y: msg.y,
           theta: msg.theta,
         },
-        transform: transform,
+        transform: {
+          header: {
+            stamp: {
+              sec: now.sec,
+              nanosec: now.nanosec,
+            },
+            frame_id: 'world',
+          },
+          child_frame_id: 'turtle1',
+          transform: {
+            translation: {
+              x: msg.x,
+              y: msg.y,
+              z: 0.0,
+            },
+            rotation: {
+              x: 0.0,
+              y: 0.0,
+              z: Math.sin(msg.theta / 2.0),
+              w: Math.cos(msg.theta / 2.0),
+            },
+          },
+        },
       });
     }
   });
@@ -215,7 +244,29 @@ async function createTurtleTf2Broadcaster() {
           y: msg.y,
           theta: msg.theta,
         },
-        transform: transform,
+        transform: {
+          header: {
+            stamp: {
+              sec: now.sec,
+              nanosec: now.nanosec,
+            },
+            frame_id: 'world',
+          },
+          child_frame_id: 'turtle2',
+          transform: {
+            translation: {
+              x: msg.x,
+              y: msg.y,
+              z: 0.0,
+            },
+            rotation: {
+              x: 0.0,
+              y: 0.0,
+              z: Math.sin(msg.theta / 2.0),
+              w: Math.cos(msg.theta / 2.0),
+            },
+          },
+        },
       });
     }
   });
@@ -248,7 +299,34 @@ async function createTurtleTf2Listener() {
       // Process transforms for visualization
       msg.transforms.forEach((transform) => {
         if (mainWindow) {
-          mainWindow.webContents.send('tf-transform-update', transform);
+          // Create a serializable version of the transform
+          const serializableTransform = {
+            header: {
+              stamp: {
+                sec: transform.header.stamp.sec,
+                nanosec: transform.header.stamp.nanosec,
+              },
+              frame_id: transform.header.frame_id,
+            },
+            child_frame_id: transform.child_frame_id,
+            transform: {
+              translation: {
+                x: transform.transform.translation.x,
+                y: transform.transform.translation.y,
+                z: transform.transform.translation.z,
+              },
+              rotation: {
+                x: transform.transform.rotation.x,
+                y: transform.transform.rotation.y,
+                z: transform.transform.rotation.z,
+                w: transform.transform.rotation.w,
+              },
+            },
+          };
+          mainWindow.webContents.send(
+            'tf-transform-update',
+            serializableTransform
+          );
         }
       });
     }
@@ -313,9 +391,10 @@ async function createStaticTurtleTf2Broadcaster() {
   );
 
   // Broadcast a static transform (carrot frame relative to world)
+  const now = node.now();
   const staticTransform = {
     header: {
-      stamp: node.now(),
+      stamp: now,
       frame_id: 'world',
     },
     child_frame_id: 'carrot1_static',
@@ -342,7 +421,34 @@ async function createStaticTurtleTf2Broadcaster() {
   staticTfBroadcaster.publish(staticTfMessage);
 
   if (mainWindow) {
-    mainWindow.webContents.send('static-transform-update', staticTransform);
+    // Create serializable version
+    const serializableStaticTransform = {
+      header: {
+        stamp: {
+          sec: now.sec,
+          nanosec: now.nanosec,
+        },
+        frame_id: 'world',
+      },
+      child_frame_id: 'carrot1_static',
+      transform: {
+        translation: {
+          x: 2.0,
+          y: 3.0,
+          z: 0.0,
+        },
+        rotation: {
+          x: 0.0,
+          y: 0.0,
+          z: 0.0,
+          w: 1.0,
+        },
+      },
+    };
+    mainWindow.webContents.send(
+      'static-transform-update',
+      serializableStaticTransform
+    );
   }
 
   rclnodejs.spin(node);
@@ -389,7 +495,34 @@ async function createDynamicFrameTf2Broadcaster() {
     tfBroadcaster.publish(tfMessage);
 
     if (mainWindow) {
-      mainWindow.webContents.send('dynamic-transform-update', dynamicTransform);
+      // Create serializable version
+      const serializableDynamicTransform = {
+        header: {
+          stamp: {
+            sec: now.sec,
+            nanosec: now.nanosec,
+          },
+          frame_id: 'turtle1',
+        },
+        child_frame_id: 'carrot1_dynamic',
+        transform: {
+          translation: {
+            x: 2.0 * Math.sin(x),
+            y: 2.0 * Math.cos(x),
+            z: 0.0,
+          },
+          rotation: {
+            x: 0.0,
+            y: 0.0,
+            z: 0.0,
+            w: 1.0,
+          },
+        },
+      };
+      mainWindow.webContents.send(
+        'dynamic-transform-update',
+        serializableDynamicTransform
+      );
     }
   });
 
@@ -405,9 +538,10 @@ async function createFixedFrameTf2Broadcaster() {
 
   // Timer to broadcast fixed transform
   const timer = node.createTimer(100, () => {
+    const now = node.now();
     const fixedTransform = {
       header: {
-        stamp: node.now(),
+        stamp: now,
         frame_id: 'turtle1',
       },
       child_frame_id: 'carrot1_fixed',
@@ -433,7 +567,34 @@ async function createFixedFrameTf2Broadcaster() {
     tfBroadcaster.publish(tfMessage);
 
     if (mainWindow) {
-      mainWindow.webContents.send('fixed-transform-update', fixedTransform);
+      // Create serializable version
+      const serializableFixedTransform = {
+        header: {
+          stamp: {
+            sec: now.sec,
+            nanosec: now.nanosec,
+          },
+          frame_id: 'turtle1',
+        },
+        child_frame_id: 'carrot1_fixed',
+        transform: {
+          translation: {
+            x: 0.0,
+            y: 2.0,
+            z: 0.0,
+          },
+          rotation: {
+            x: 0.0,
+            y: 0.0,
+            z: 0.0,
+            w: 1.0,
+          },
+        },
+      };
+      mainWindow.webContents.send(
+        'fixed-transform-update',
+        serializableFixedTransform
+      );
     }
   });
 
@@ -461,6 +622,18 @@ ipcMain.on('spawn-turtle-request', async (event, data) => {
   }
 });
 
+// Handle keyboard turtle control commands
+ipcMain.on('turtle-cmd-vel', (event, data) => {
+  if (turtleTf2Nodes.velocityPublisher) {
+    const velocity = {
+      linear: data.linear,
+      angular: data.angular,
+    };
+    // Send velocity command to turtle1
+    turtleTf2Nodes.velocityPublisher.publish(velocity);
+  }
+});
+
 app.whenReady().then(async () => {
   createWindow();