Skip to content

Commit 4d2c6ed

Browse files
committed
Add tf2 electron demo (#1229)
This PR adds a comprehensive TF2 electron demo that showcases coordinate frame transformations, turtle simulation, and real-time 3D visualization using rclnodejs, Electron, and Three.js. The demo replicates the functionality of the ROS2 `turtle_tf2_py` package in a modern web-based interface. Key changes: - Adds a complete electron demonstration with TF2 coordinate frame visualization - Provides interactive turtle control with keyboard input (WASD keys) - Implements multiple TF2 broadcasters (static, dynamic, fixed frames) with real-time updates - Updates main README to highlight the new electron visualization capabilities Fix: #1230, #1231
1 parent cc7583e commit 4d2c6ed

File tree

9 files changed

+3322
-105
lines changed

9 files changed

+3322
-105
lines changed

README.md

Lines changed: 32 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,7 @@
88

99
\* rclnodejs development and maintenance is limited to the ROS 2 LTS releases and the Rolling development branch
1010

11-
**rclnodejs** is a Node.js client library for the Robot Operating System
12-
([ROS 2](https://www.ros.org/)). It provides tooling and comprehensive
13-
JavaScript and TypeScript APIs for developing ROS 2 solutions capable of
14-
interoperating with ROS 2 nodes implemented in other languages such as
15-
C++ and Python.
16-
17-
Here's an example for creating a ROS 2 node that publishes a string message in a few lines of JavaScript.
11+
**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.
1812

1913
```JavaScript
2014
const rclnodejs = require('rclnodejs');
@@ -31,11 +25,9 @@ rclnodejs.init().then(() => {
3125
- [Installation](#installation)
3226
- [rclnodejs-cli](#rclnodejs-cli)
3327
- [API Documentation](#api-documentation)
28+
- [Electron-based Visualization](#electron-based-visualization)
3429
- [Using TypeScript](#using-rclnodejs-with-typescript)
35-
- [ROS2 Interface Message Generation](#ros2-interface-message-generation-important)
36-
- [Examples](https://github.com/RobotWebTools/rclnodejs/tree/develop/example)
37-
- [Electron Demo](https://github.com/RobotWebTools/rclnodejs/tree/develop/electron_demo)
38-
- [TypeScript Demo](https://github.com/RobotWebTools/rclnodejs/tree/develop/ts_demo)
30+
- [ROS2 Interface Message Generation](#ros2-interface-message-generation)
3931
- [Efficient Usage Tips](./docs/EFFICIENCY.md)
4032
- [FAQ and Known Issues](./docs/FAQ.md)
4133
- [Building from Scratch](./docs/BUILDING.md)
@@ -45,42 +37,24 @@ rclnodejs.init().then(() => {
4537

4638
### Prerequisites
4739

48-
Before installing `rclnodejs` please ensure the following software is installed and configured on your system:
49-
50-
- [Nodejs](https://nodejs.org/en/) version >= 16.13.0.
51-
52-
- [ROS 2 SDK](https://docs.ros.org/en/jazzy/Installation.html) for details.
53-
**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)**
40+
- [Node.js](https://nodejs.org/en/) version >= 16.13.0
41+
- [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)**
5442

55-
### Installing rclnodejs
56-
57-
Install the rclnodejs version that is compatible with your version of ROS 2 (see table below).
58-
59-
For the most current version of rclnodejs run:
43+
### Install rclnodejs
6044

6145
```bash
6246
npm i rclnodejs
6347
```
6448

65-
To install a specific version of rclnodejs use:
66-
67-
```bash
68-
69-
```
70-
7149
- **Note:** to install rclnodejs from GitHub: add `"rclnodejs":"RobotWebTools/rclnodejs#<branch>"` to your `package.json` dependency section.
7250

51+
Try the [examples](https://github.com/RobotWebTools/rclnodejs/tree/develop/example) to get started.
52+
7353
## rclnodejs-cli
7454

7555
[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.
7656

7757
```
78-
_ _ _
79-
_ __ ___| |_ __ ___ __| | ___ (_)___
80-
| '__/ __| | '_ \ / _ \ / _` |/ _ \| / __|
81-
| | | (__| | | | | (_) | (_| | __/| \__ \
82-
|_| \___|_|_| |_|\___/ \__,_|\___|/ |___/
83-
|__/
8458
Usage: rclnodejs [command] [options]
8559
8660
Options:
@@ -94,26 +68,31 @@ Commands:
9468

9569
## API Documentation
9670

97-
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`.
71+
API documentation is available [online](https://robotwebtools.github.io/rclnodejs/docs/index.html) or generate locally with `npm run docs`.
9872

99-
## Using rclnodejs with TypeScript
73+
## Electron-based Visualization
74+
75+
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.
10076

101-
`rclnodejs` API can be used in TypeScript projects. You can find the TypeScript declaration files (\*.d.ts) in the `types/` folder.
77+
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).
10278

103-
Your `tsconfig.json` file should include the following compiler options:
79+
![demo screenshot](./electron_demo/turtle_tf2/turtle-tf2-demo.png)
80+
81+
## Using rclnodejs with TypeScript
82+
83+
TypeScript declaration files are included in the `types/` folder. Configure your `tsconfig.json`:
10484

10585
```jsonc
10686
{
10787
"compilerOptions": {
10888
"module": "commonjs",
10989
"moduleResolution": "node",
110-
"target": "es6",
111-
// your additional options here
90+
"target": "es2020",
11291
},
11392
}
11493
```
11594

116-
Here's a short `rclnodejs` TypeScript example:
95+
TypeScript example:
11796

11897
```typescript
11998
import * as rclnodejs from 'rclnodejs';
@@ -125,53 +104,34 @@ rclnodejs.init().then(() => {
125104
});
126105
```
127106

128-
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.
107+
See [TypeScript demos](https://github.com/RobotWebTools/rclnodejs/tree/develop/ts_demo) for more examples.
129108

130-
## ROS2 Interface Message Generation (important)
109+
## ROS2 Interface Message Generation
131110

132-
ROS components communicate by sending and receiving messages described
133-
by the interface definition language (IDL). ROS client libraries such as
134-
rclnodejs are responsible for converting these IDL message descriptions
135-
into source code of their target language. For this, rclnodejs provides
136-
the npm binary`generate-ros-messages` script that reads the IDL
137-
message files of a ROS environment and generates corresponding JavaScript
138-
message interface files. Additionally, the tool generates the TypeScript
139-
`interface.d.ts` file containing declarations for each IDL message file.
111+
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.
140112

141-
Learn more about ROS interfaces and IDL [here](https://docs.ros.org/en/jazzy/Concepts/Basic/About-Interfaces.html).
113+
Example usage:
142114

143-
In the following example rclnodejs loads a generated JavaScript message file corresponding to the ROS `std_msgs/msg/String' definition.
144-
145-
```
115+
```javascript
146116
import * as rclnodejs from 'rclnodejs';
147117
let stringMsgObject = rclnodejs.createMessageObject('std_msgs/msg/String');
148118
stringMsgObject.data = 'hello world';
149119
```
150120

151-
### Maintaining Generated JavaScript Message Files
152-
153-
Message files are generated as a post-install step of the rclnodejs
154-
installation process. Thereafter, you will need to manually run the
155-
rclnodejs message generation script when new ROS message packages are installed
156-
for which your ROS2-nodejs project has a dependency.
121+
### Running Message Generation
157122

158-
### Running `generate-ros-messages` Utility
123+
Run the message generation script when new ROS packages are installed:
159124

160-
To run the `generate-ros-messages` script from your Nodejs package, use the `npx` utility included in your Nodejs installation.
161-
162-
```
125+
```bash
163126
npx generate-ros-messages
164127
```
165128

166-
The newly generated JavaScript files can be found at
167-
`<yourproject>/node_modules/rclnodejs/generated/`.
129+
Generated files are located at `<yourproject>/node_modules/rclnodejs/generated/`.
168130

169131
### IDL Message Generation
170132

171133
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.
172134

173-
#### Running `generate-messages-idl`
174-
175135
To generate messages from IDL files, use the `generate-messages-idl` npm script:
176136

177137
```bash
@@ -180,42 +140,9 @@ npm run generate-messages-idl
180140

181141
## Contributing
182142

183-
Please read the [Contributing Guide]() before making a pull request.
184-
185-
Thank you to all the [people](CONTRIBUTORS.md) who already contributed to rclnodejs!
186-
187-
<div>
188-
<a href="https://github.com/wayneparrott">
189-
<img src="https://github.com/wayneparrott.png" width="30">
190-
</a>
191-
<a href="https://github.com/koonpeng">
192-
<img src="https://github.com/koonpeng.png" width="30">
193-
</a>
194-
<a href="https://github.com/mattrichard">
195-
<img src="https://github.com/mattrichard.png" width="30">
196-
</a>
197-
<a href="https://github.com/felixdivo">
198-
<img src="https://github.com/felixdivo.png" width="30">
199-
</a>
200-
<a href="https://github.com/martins-mozeiko">
201-
<img src="https://github.com/martins-mozeiko.png" width="30">
202-
</a>
203-
<a href="https://github.com/amikhalev">
204-
<img src="https://github.com/amikhalev.png" width="30">
205-
</a>
206-
<a href="https://github.com/kenny-y">
207-
<img src="https://github.com/kenny-y.png" width="30">
208-
</a>
209-
<a href="https://github.com/qiuzhong">
210-
<img src="https://github.com/qiuzhong.png" width="30">
211-
</a>
212-
<a href="https://github.com/minggangw">
213-
<img src="https://github.com/minggangw.png" width="30">
214-
</a>
215-
<a href="https://github.com/hanyia">
216-
<img src="https://github.com/hanyia.png" width="30">
217-
</a>
218-
</div>
143+
Please read the [Contributing Guide](./docs/CONTRIBUTING.md) before making a pull request.
144+
145+
Thanks to all [contributors](CONTRIBUTORS.md)!
219146

220147
## License
221148

0 commit comments

Comments
 (0)