Add tf2 electron demo

README.md

@@ -8,13 +8,7 @@
 
 \* rclnodejs development and maintenance is limited to the ROS 2 LTS releases and the Rolling development branch
 
-**rclnodejs** is a Node.js client library for the Robot Operating System
-([ROS 2](https://www.ros.org/)). It provides tooling and comprehensive
-JavaScript and TypeScript APIs for developing ROS 2 solutions capable of
-interoperating with ROS 2 nodes implemented in other languages such as
-C++ and Python.
-
-Here's an example for creating a ROS 2 node that publishes a string message in a few lines of JavaScript.
+**rclnodejs** is a Node.js client library for [ROS 2](https://www.ros.org/) that provides comprehensive JavaScript and TypeScript APIs for developing ROS 2 solutions.
 
 ```JavaScript
 const rclnodejs = require('rclnodejs');
@@ -31,11 +25,9 @@ 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)
+- [ROS2 Interface Message Generation](#ros2-interface-message-generation)
 - [Efficient Usage Tips](./docs/EFFICIENCY.md)
 - [FAQ and Known Issues](./docs/FAQ.md)
 - [Building from Scratch](./docs/BUILDING.md)
@@ -45,42 +37,24 @@ rclnodejs.init().then(() => {
 
 ### Prerequisites
 
-Before installing `rclnodejs` please ensure the following software is installed and configured on your system:
-
-- [Nodejs](https://nodejs.org/en/) version >= 16.13.0.
-
-- [ROS 2 SDK](https://docs.ros.org/en/jazzy/Installation.html) for details.
-  **DON'T FORGET TO [SOURCE THE ROS 2 SETUP FILE](https://docs.ros.org/en/jazzy/Tutorials/Beginner-CLI-Tools/Configuring-ROS2-Environment.html#source-the-setup-files)**
+- [Node.js](https://nodejs.org/en/) version >= 16.13.0
+- [ROS 2 SDK](https://docs.ros.org/en/jazzy/Installation.html) - **Don't forget to [source the setup file](https://docs.ros.org/en/jazzy/Tutorials/Beginner-CLI-Tools/Configuring-ROS2-Environment.html#source-the-setup-files)**
 
-### Installing rclnodejs
-
-Install the rclnodejs version that is compatible with your version of ROS 2 (see table below).
-
-For the most current version of rclnodejs run:
+### Install rclnodejs
 
 ```bash
 npm i rclnodejs
 ```
 
-To install a specific version of rclnodejs use:
-
-```bash
-npm i [email protected]
-```
-
 - **Note:** to install rclnodejs from GitHub: add `"rclnodejs":"RobotWebTools/rclnodejs#<branch>"` to your `package.json` dependency section.
 
+Try the [examples](https://github.com/RobotWebTools/rclnodejs/tree/develop/example) to get started.
+
 ## 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:
@@ -94,26 +68,31 @@ Commands:
 
 ## API Documentation
 
-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`.
+API documentation is available [online](https://robotwebtools.github.io/rclnodejs/docs/index.html) or generate locally with `npm run docs`.
 
-## Using rclnodejs with TypeScript
+## Electron-based Visualization
+
+Create rich, interactive desktop applications using Electron and web technologies like Three.js. Build 3D visualizations, monitoring dashboards, and control interfaces that run on Windows, macOS, and Linux.
 
-`rclnodejs` API can be used in TypeScript projects. You can find the TypeScript declaration files (\*.d.ts) in the `types/` folder.
+Try the `electron_demo/turtle_tf2` demo for real-time coordinate frame visualization with dynamic transforms and keyboard-controlled turtle movement. More examples in [electron_demo](https://github.com/RobotWebTools/rclnodejs/tree/develop/electron_demo).
 
-Your `tsconfig.json` file should include the following compiler options:
+![demo screenshot](./electron_demo/turtle_tf2/turtle-tf2-demo.png)
+
+## Using rclnodejs with TypeScript
+
+TypeScript declaration files are included in the `types/` folder. Configure your `tsconfig.json`:
 
 ```jsonc
 {
   "compilerOptions": {
     "module": "commonjs",
     "moduleResolution": "node",
-    "target": "es6",
-    // your additional options here
+    "target": "es2020",
   },
 }
 ```
 
-Here's a short `rclnodejs` TypeScript example:
+TypeScript example:
 
 ```typescript
 import * as rclnodejs from 'rclnodejs';
@@ -125,53 +104,34 @@ 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.
+See [TypeScript demos](https://github.com/RobotWebTools/rclnodejs/tree/develop/ts_demo) for more examples.
 
-## ROS2 Interface Message Generation (important)
+## ROS2 Interface Message Generation
 
-ROS components communicate by sending and receiving messages described
-by the interface definition language (IDL). ROS client libraries such as
-rclnodejs are responsible for converting these IDL message descriptions
-into source code of their target language. For this, rclnodejs provides
-the npm binary`generate-ros-messages` script that reads the IDL
-message files of a ROS environment and generates corresponding JavaScript
-message interface files. Additionally, the tool generates the TypeScript
-`interface.d.ts` file containing declarations for each IDL message file.
+ROS client libraries convert IDL message descriptions into target language source code. rclnodejs provides the `generate-ros-messages` script to generate JavaScript message interface files and TypeScript declarations.
 
-Learn more about ROS interfaces and IDL [here](https://docs.ros.org/en/jazzy/Concepts/Basic/About-Interfaces.html).
+Example usage:
 
-In the following example rclnodejs loads a generated JavaScript message file corresponding to the ROS `std_msgs/msg/String' definition.
-
-```
+```javascript
 import * as rclnodejs from 'rclnodejs';
 let stringMsgObject = rclnodejs.createMessageObject('std_msgs/msg/String');
 stringMsgObject.data = 'hello world';
 ```
 
-### Maintaining Generated JavaScript Message Files
-
-Message files are generated as a post-install step of the rclnodejs
-installation process. Thereafter, you will need to manually run the
-rclnodejs message generation script when new ROS message packages are installed
-for which your ROS2-nodejs project has a dependency.
+### Running Message Generation
 
-### Running `generate-ros-messages` Utility
+Run the message generation script when new ROS packages are installed:
 
-To run the `generate-ros-messages` script from your Nodejs package, use the `npx` utility included in your Nodejs installation.
-
-```
+```bash
 npx generate-ros-messages
 ```
 
-The newly generated JavaScript files can be found at
-`<yourproject>/node_modules/rclnodejs/generated/`.
+Generated files are located at `<yourproject>/node_modules/rclnodejs/generated/`.
 
 ### IDL Message Generation
 
 In addition to the standard ROS2 message generation (`.msg`, `.srv`, and `.action`), rclnodejs provides advanced support for generating JavaScript message files directly from IDL (Interface Definition Language) files. This feature is particularly useful when working with custom IDL files or when you need more control over the message generation process.
 
-#### Running `generate-messages-idl`
-
 To generate messages from IDL files, use the `generate-messages-idl` npm script:
 
 ```bash
@@ -180,42 +140,9 @@ npm run generate-messages-idl
 
 ## Contributing
 
-Please read the [Contributing Guide]() before making a pull request.
-
-Thank you to all the [people](CONTRIBUTORS.md) who already contributed to rclnodejs!
-
-<div>
-<a href="https://github.com/wayneparrott">
-  <img src="https://github.com/wayneparrott.png" width="30">
-</a>
-<a href="https://github.com/koonpeng">
-  <img src="https://github.com/koonpeng.png" width="30">
-</a>
-<a href="https://github.com/mattrichard">
-  <img src="https://github.com/mattrichard.png" width="30">
-</a>
-<a href="https://github.com/felixdivo">
-  <img src="https://github.com/felixdivo.png" width="30">
-</a>
-<a href="https://github.com/martins-mozeiko">
-  <img src="https://github.com/martins-mozeiko.png" width="30">
-</a>
-<a href="https://github.com/amikhalev">
-  <img src="https://github.com/amikhalev.png" width="30">
-</a>
-<a href="https://github.com/kenny-y">
-  <img src="https://github.com/kenny-y.png" width="30">
-</a>
-<a href="https://github.com/qiuzhong">
-  <img src="https://github.com/qiuzhong.png" width="30">
-</a>
-<a href="https://github.com/minggangw">
-  <img src="https://github.com/minggangw.png" width="30">
-</a>
-<a href="https://github.com/hanyia">
-  <img src="https://github.com/hanyia.png" width="30">
-</a>
-</div>
+Please read the [Contributing Guide](./docs/CONTRIBUTING.md) before making a pull request.
+
+Thanks to all [contributors](CONTRIBUTORS.md)!
 
 ## License