Address comments

Author: minggangw

README.md

@@ -34,8 +34,6 @@ rclnodejs.init().then(() => {
 - [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)
-- [TypeScript Demo](https://github.com/RobotWebTools/rclnodejs/tree/develop/ts_demo)
 - [Efficient Usage Tips](./docs/EFFICIENCY.md)
 - [FAQ and Known Issues](./docs/FAQ.md)
 - [Building from Scratch](./docs/BUILDING.md)
@@ -70,17 +68,13 @@ npm i [email protected]
 
 - **Note:** to install rclnodejs from GitHub: add `"rclnodejs":"RobotWebTools/rclnodejs#<branch>"` to your `package.json` dependency section.
 
+Please try with [examples](https://github.com/RobotWebTools/rclnodejs/tree/develop/example) once you're good to go.
+
 ## rclnodejs-cli
 
 [rclnodejs-cli](https://github.com/RobotWebTools/rclnodejs-cli/) is a companion project we recently launched to provide a commandline interface to a set of developer tools for working with this `rclnodejs`. You may find `rclnodejs-cli` particularly useful if you plan to create ROS 2 node(s) and launch files for working with multiple node orchestrations.
 
 ```
-           _                 _       _
-  _ __ ___| |_ __   ___   __| | ___ (_)___
- | '__/ __| | '_ \ / _ \ / _` |/ _ \| / __|
- | | | (__| | | | | (_) | (_| |  __/| \__ \
- |_|  \___|_|_| |_|\___/ \__,_|\___|/ |___/
-                                  |__/
 Usage: rclnodejs [command] [options]
 
 Options:
@@ -102,6 +96,8 @@ rclnodejs enables the creation of rich, interactive desktop visualization applic
 
 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.
 
+![demo screenshot](./electron_demo/turtle_tf2/turtle-tf2-demo.png)
+
 ## 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.
@@ -113,7 +109,7 @@ Your `tsconfig.json` file should include the following compiler options:
   "compilerOptions": {
     "module": "commonjs",
     "moduleResolution": "node",
-    "target": "es6",
+    "target": "es2020",
     // your additional options here
   },
 }
@@ -131,7 +127,7 @@ rclnodejs.init().then(() => {
 });
 ```
 
-The benefits of using TypeScript become evident when working with more complex use-cases. ROS messages are defined in the `types/interfaces.d.ts` module. This module is updated as part of the `generate-ros-messages` process described in the next section.
+The benefits of using TypeScript become evident when working with more complex use-cases. ROS messages are defined in the `types/interfaces.d.ts` module. This module is updated as part of the `generate-ros-messages` process described in the next section, see more [demos](https://github.com/RobotWebTools/rclnodejs/tree/develop/ts_demo).
 
 ## ROS2 Interface Message Generation (important)
 

electron_demo/turtle_tf2/README.md

@@ -13,6 +13,8 @@ The turtle_tf2 demo showcases:
 - **3D Visualization**: WebGL-based rendering using Three.js for immersive coordinate frame visualization
 - **Interactive Controls**: Web interface for spawning turtles, controlling motion, and managing transforms
 
+![demo screenshot](./turtle-tf2-demo.gif)
+
 ## Features
 
 ### TF2 Broadcasters
@@ -39,8 +41,8 @@ The turtle_tf2 demo showcases:
 
 ### Control Interface
 
-- **Turtle Spawning**: Create turtle1 and turtle2 instances
-- **Motion Control**: Start/stop turtle movements
+- **Turtle Spawning**: Create turtle2 instance (turtle1 spawns automatically with turtlesim)
+- **Motion Control**: WASD keyboard controls for turtle1 movement
 - **Demo Management**: Initialize and reset demo state
 - **Transform Filtering**: Toggle visibility of different frame types
 
@@ -49,7 +51,7 @@ The turtle_tf2 demo showcases:
 ### System Requirements
 
 - **ROS2**: Humble, Iron, or Rolling distribution
-- **Node.js**: Version 16 or higher
+- **Node.js**: Version 18 or higher (for compatibility with latest Electron)
 - **turtlesim**: ROS2 turtle simulation package
 - **Electron**: For desktop application framework
 
@@ -142,13 +144,12 @@ 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
+   - Click "Spawn Turtle2" to create the second turtle (turtle1 spawns automatically)
    - Use WASD keys to control turtle1 movement
    - Watch turtle2 automatically follow turtle1
    - 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.
+**⚠️ Important**: The dynamic frame (`carrot1_dynamic`) orbits around the static frame (`carrot1_static`) in a circular pattern with a 2-unit radius, regardless of turtle positions.
 
 ## Demo Components
 
@@ -183,7 +184,7 @@ npm start
 - **world**: Global reference frame (origin)
 - **turtle1/turtle2**: Turtle body frames following turtlesim poses
 - **carrot1_static**: Static frame with fixed relationship to world
-- **carrot1_dynamic**: Dynamic frame with time-varying circular motion
+- **carrot1_dynamic**: Dynamic frame with circular motion around carrot1_static (2-unit radius)
 - **carrot1_fixed**: Fixed offset frame relative to turtle1
 
 ### Transform Chain
@@ -259,7 +260,7 @@ You can observe the following behavior by:
 ### Frame Visibility
 
 - **Toggle Static**: Show/hide carrot1_static frame (red sphere, fixed position)
-- **Toggle Dynamic**: Show/hide carrot1_dynamic frame (orange sphere, orbits around turtle1)
+- **Toggle Dynamic**: Show/hide carrot1_dynamic frame (orange sphere, orbits around carrot1_static)
 - **Toggle Fixed**: Show/hide carrot1_fixed frame (purple sphere, fixed offset from turtle1)
 
 **Visual Guide**:
@@ -315,7 +316,7 @@ You can observe the following behavior by:
 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)
+   - Ensure Node.js version is compatible (18 or higher)
    - Try deleting `node_modules` and running `npm install && npm run rebuild` again
 
 7. **"THREE is not defined" or script loading errors**