Address comments

Author: minggangw

README.md

@@ -31,10 +31,10 @@ rclnodejs.init().then(() => {
 - [Installation](#installation)
 - [rclnodejs-cli](#rclnodejs-cli)
 - [API Documentation](#api-documentation)
+- [Electron-based Visualization](#electron-based-visualization)
 - [Using TypeScript](#using-rclnodejs-with-typescript)
 - [ROS2 Interface Message Generation](#ros2-interface-message-generation-important)
 - [Examples](https://github.com/RobotWebTools/rclnodejs/tree/develop/example)
-- [Electron Demo](https://github.com/RobotWebTools/rclnodejs/tree/develop/electron_demo)
 - [TypeScript Demo](https://github.com/RobotWebTools/rclnodejs/tree/develop/ts_demo)
 - [Efficient Usage Tips](./docs/EFFICIENCY.md)
 - [FAQ and Known Issues](./docs/FAQ.md)
@@ -96,6 +96,12 @@ Commands:
 
 API documentation is generated by `jsdoc` and can be viewed in the `docs/` folder or [online doc](https://robotwebtools.github.io/rclnodejs/docs/index.html). To create a local copy of the documentation run `npm run docs`.
 
+## Electron-based Visualization
+
+rclnodejs enables the creation of rich, interactive desktop visualization applications using Electron and modern web technologies like Three.js. This approach combines the power of ROS 2 with cross-platform GUI capabilities, allowing developers to build sophisticated 3D visualizations, real-time monitoring dashboards, and interactive control interfaces that can run natively on Windows, macOS, and Linux.
+
+To see this in action, try the `electron_demo/turtle_tf2` demo which demonstrates real-time coordinate frame visualization with dynamic transform broadcasting, interactive 3D navigation, and keyboard-controlled turtle movement - providing a hands-on way to understand ROS 2 TF2 concepts through visual feedback. You can find more Electron-based examples and demos in the [electron_demo](https://github.com/RobotWebTools/rclnodejs/tree/develop/electron_demo) directory.
+
 ## Using rclnodejs with TypeScript
 
 `rclnodejs` API can be used in TypeScript projects. You can find the TypeScript declaration files (\*.d.ts) in the `types/` folder.

electron_demo/turtle_tf2/README.md

@@ -141,12 +141,15 @@ npm start
    ```
 
 4. **Use the web interface to**:
+   - Click "Start Demo" to initialize all TF2 broadcasters
+   - Click "Spawn Turtle1" to create turtle1 (required for dynamic frame)
    - Click "Spawn Turtle2" to create the second turtle
    - Use WASD keys to control turtle1 movement
    - Watch turtle2 automatically follow turtle1
-   - Click "Start Demo" to initialize all TF2 broadcasters
    - Use frame toggle buttons to show/hide specific transforms
 
+**⚠️ Important**: The dynamic frame (`carrot1_dynamic`) is only visible when turtle1 exists, as it orbits around turtle1's position in a circular pattern. Make sure to spawn turtle1 first before trying to see the dynamic frame.
+
 ## Demo Components
 
 ### Main Process (main.js)
@@ -255,9 +258,16 @@ You can observe the following behavior by:
 
 ### Frame Visibility
 
-- **Toggle Static**: Show/hide carrot1_static frame
-- **Toggle Dynamic**: Show/hide carrot1_dynamic frame
-- **Toggle Fixed**: Show/hide carrot1_fixed frame
+- **Toggle Static**: Show/hide carrot1_static frame (red sphere, fixed position)
+- **Toggle Dynamic**: Show/hide carrot1_dynamic frame (orange sphere, orbits around turtle1)
+- **Toggle Fixed**: Show/hide carrot1_fixed frame (purple sphere, fixed offset from turtle1)
+
+**Visual Guide**:
+
+- **Static Frame**: Red sphere at fixed world coordinates (2.0, 3.0, 0.0)
+- **Dynamic Frame**: Orange sphere that moves in a circular pattern around the static frame (2-unit radius)
+- **Fixed Frame**: Purple sphere that maintains a constant offset relative to turtle1
+- **Turtle Frames**: Coordinate axes (X=red, Y=green, Z=blue) attached to each turtle
 
 ### 3D Navigation
 
@@ -288,25 +298,33 @@ You can observe the following behavior by:
    - Ensure demo is started: Click "Start Demo" button
    - Check TF2 tree: `ros2 run tf2_tools view_frames`
 
-4. **"3D visualization not loading"**
+4. **"Dynamic frame not visible when toggling"**
+
+   - **Check if the demo is started**: Click "Start Demo" button first to initialize all broadcasters
+   - **Look for an orange sphere near coordinates (2,3)**: The dynamic frame appears as an orange sphere orbiting around the red static frame
+   - **Wait for circular motion**: The dynamic frame moves in a 2-unit radius circle, taking about 6 seconds for a full rotation
+   - **The orange sphere is now bigger**: The dynamic frame has been made 3x larger for better visibility
+   - **Check the transform list**: The dynamic frame should appear in the left panel's transform list with changing coordinates around (2±2, 3±2, 0)
+
+5. **"3D visualization not loading"**
 
    - Check browser console for WebGL errors
    - Ensure hardware acceleration is enabled
    - Try restarting the Electron application
 
-5. **"electron: not found" or native module errors**
+6. **"electron: not found" or native module errors**
 
    - Make sure you ran `npm run rebuild` after `npm install`
    - Ensure Node.js version is compatible (16 or higher)
    - Try deleting `node_modules` and running `npm install && npm run rebuild` again
 
-6. **"THREE is not defined" or script loading errors**
+7. **"THREE is not defined" or script loading errors**
 
    - Ensure Three.js is properly installed: `npm install [email protected]`
    - Check that `node_modules/three/build/three.min.js` exists
    - If issues persist, try reinstalling: `rm -rf node_modules && npm install && npm run rebuild`
 
-7. **WSL (Windows Subsystem for Linux) specific issues**
+8. **WSL (Windows Subsystem for Linux) specific issues**
    - Install audio libraries: `sudo apt install libasound2t64 libasound2-dev`
    - Enable X11 forwarding for GUI: Install VcXsrv or similar X server
    - Some GUI features may be limited in WSL environment

electron_demo/turtle_tf2/main.js

@@ -444,19 +444,28 @@ async function createDynamicFrameTf2Broadcaster() {
   // Timer to broadcast dynamic transform
   const timer = node.createTimer(100, () => {
     const now = node.now();
-    const seconds = now.sec + now.nanosec / 1e9;
-    const x = seconds * Math.PI;
+
+    // Use a more stable time calculation to avoid NaN
+    const timeInSeconds = Date.now() / 1000.0; // Use JavaScript Date for stable timing
+    const angle = timeInSeconds * 0.5; // Slower rotation (0.5 rad/sec instead of π rad/sec)
+
+    console.log(
+      '🕒 Dynamic frame time:',
+      timeInSeconds.toFixed(2),
+      'angle:',
+      angle.toFixed(2)
+    );
 
     const dynamicTransform = {
       header: {
         stamp: now,
-        frame_id: 'turtle1',
+        frame_id: 'carrot1_static',
       },
       child_frame_id: 'carrot1_dynamic',
       transform: {
         translation: {
-          x: 2.0 * Math.sin(x),
-          y: 2.0 * Math.cos(x),
+          x: 2.0 * Math.sin(angle),
+          y: 2.0 * Math.cos(angle),
           z: 0.0,
         },
         rotation: {
@@ -482,13 +491,13 @@ async function createDynamicFrameTf2Broadcaster() {
             sec: now.sec,
             nanosec: now.nanosec,
           },
-          frame_id: 'turtle1',
+          frame_id: 'carrot1_static',
         },
         child_frame_id: 'carrot1_dynamic',
         transform: {
           translation: {
-            x: 2.0 * Math.sin(x),
-            y: 2.0 * Math.cos(x),
+            x: 2.0 * Math.sin(angle),
+            y: 2.0 * Math.cos(angle),
             z: 0.0,
           },
           rotation: {
@@ -499,6 +508,15 @@ async function createDynamicFrameTf2Broadcaster() {
           },
         },
       };
+
+      console.log(
+        '📤 Sending dynamic transform:',
+        'x:',
+        (2.0 * Math.sin(angle)).toFixed(2),
+        'y:',
+        (2.0 * Math.cos(angle)).toFixed(2)
+      );
+
       mainWindow.webContents.send(
         'dynamic-transform-update',
         serializableDynamicTransform

electron_demo/turtle_tf2/renderer.js

@@ -84,6 +84,11 @@ function initializeScene() {
   controls.maxDistance = 50;
   controls.minDistance = 5;
 
+  // Reduce rotation sensitivity for better control
+  controls.rotateSpeed = 0.3; // Default is 1.0, lower = less sensitive
+  controls.panSpeed = 0.5; // Reduce pan sensitivity too
+  controls.zoomSpeed = 0.8; // Slightly reduce zoom sensitivity
+
   // Lighting
   const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
   scene.add(ambientLight);
@@ -311,15 +316,35 @@ function updateFrame(name, transform) {
   if (!frames[name]) {
     // Determine color based on frame name
     let color = 0xffffff;
-    if (name.includes('static')) color = 0xff4444;
-    else if (name.includes('dynamic')) color = 0xffaa00;
-    else if (name.includes('fixed')) color = 0xaa44ff;
+    let scale = 0.5; // Default scale
+
+    if (name.includes('static')) {
+      color = 0xff4444;
+      scale = 1.0; // Bigger for static frame
+    } else if (name.includes('dynamic')) {
+      color = 0xff6600; // Bright orange color
+      scale = 3.0; // MUCH bigger for dynamic frame - very easy to see!
+      console.log('🟠 Creating DYNAMIC FRAME at:', position);
+    } else if (name.includes('fixed')) {
+      color = 0xaa44ff;
+      scale = 1.2; // Bigger for fixed frame
+    }
 
-    createFrame(name, position, rotation, color);
+    createFrame(name, position, rotation, color, scale);
   } else {
     // Update existing frame
     frames[name].position.set(position.x, position.y, position.z);
 
+    // Log dynamic frame updates
+    if (name.includes('dynamic')) {
+      console.log(
+        '🟠 Dynamic frame updated at:',
+        position.x.toFixed(2),
+        position.y.toFixed(2),
+        position.z.toFixed(2)
+      );
+    }
+
     const euler = new THREE.Euler().setFromQuaternion(
       new THREE.Quaternion(rotation.x, rotation.y, rotation.z, rotation.w)
     );
@@ -372,6 +397,13 @@ function setupEventListeners() {
   });
 
   document.getElementById('toggle-dynamic').addEventListener('click', () => {
+    console.log('🔄 Dynamic Frame button clicked!');
+    console.log(
+      '🔍 Current dynamic frame visible:',
+      frames['carrot1_dynamic']
+        ? frames['carrot1_dynamic'].visible
+        : 'not created yet'
+    );
     toggleFrameVisibility('carrot1_dynamic');
   });
 
@@ -413,8 +445,8 @@ function setupKeyboardControls() {
 function sendTurtleCommand() {
   let linear_x = 0;
   let angular_z = 0;
-  const speed = 2.0; // Linear speed
-  const turn_speed = 2.0; // Angular speed
+  const speed = 0.8; // Linear speed - reduced from 2.0 for better control
+  const turn_speed = 0.6; // Angular speed - further reduced from 1.2 for precise rotation control
 
   // Check for forward/backward movement (W/S keys only)
   if (keyState.w) {
@@ -651,8 +683,19 @@ function resetDemo() {
 }
 
 function toggleFrameVisibility(frameName) {
+  console.log('🎯 Toggling frame:', frameName);
   if (frames[frameName]) {
     frames[frameName].visible = !frames[frameName].visible;
+    console.log(
+      '✅ Frame',
+      frameName,
+      'is now',
+      frames[frameName].visible ? 'VISIBLE' : 'HIDDEN'
+    );
+    console.log('📍 Frame position:', frames[frameName].position);
+  } else {
+    console.log('❌ Frame', frameName, 'does not exist yet!');
+    console.log('📋 Available frames:', Object.keys(frames));
   }
 }