|
1 | | -# Rclnodejs Electron demo |
| 1 | +# Topics Demo - Electron and rclnodejs |
2 | 2 |
|
3 | | -## Introduction |
| 3 | +A minimal Electron application demonstrating basic ROS2 topic communication using rclnodejs. This demo provides a simple interface for publishing and subscribing to string messages, making it the perfect starting point for learning rclnodejs with Electron. |
4 | 4 |
|
5 | | -This is a minimal rclnodejs demo using Electron. More information about Electron, please check with [Electron documentation](https://electronjs.org/docs/latest/tutorial/quick-start). |
| 5 | + |
6 | 6 |
|
7 | | -The demo includes the following files: |
| 7 | +## 📨 Features |
8 | 8 |
|
9 | | -- `package.json` - Points to the app's main file and lists its details and dependencies. |
10 | | -- `main.js` - Introduces the `rclnodejs` native module, starts the app and creates a browser window to render HTML. This is the app's **main process**. |
11 | | -- `index.html` - Includes a text editor where you can input the the topic to be published. This is the app's **renderer process**. |
12 | | -- `renderer.js` - Communicate with main process to publish a topic and get it through a subscription. |
| 9 | +- **Simple Publisher**: Text input interface for publishing string messages |
| 10 | +- **Real-time Subscriber**: Live display of received messages |
| 11 | +- **Message Counter**: Tracks published and received message counts |
| 12 | +- **Clean UI**: Minimal, user-friendly interface |
| 13 | +- **Educational**: Perfect introduction to ROS2 topics with Electron |
13 | 14 |
|
14 | | -## To run the demo |
| 15 | +### ROS2 Integration |
15 | 16 |
|
16 | | -Before starting, please ensure you have installed [nodejs](https://nodejs.org/en). |
| 17 | +- **Topic**: `ts_demo` (std_msgs/String) |
| 18 | +- **Publisher**: Sends user-input text messages |
| 19 | +- **Subscriber**: Receives and displays messages in real-time |
| 20 | +- **Node Name**: `electron_demo_node` |
17 | 21 |
|
18 | | -1. Clone this repository. |
| 22 | +## 📋 Prerequisites |
19 | 23 |
|
20 | | -```bash |
21 | | -git clone https://github.com/RobotWebTools/rclnodejs.git |
22 | | -``` |
| 24 | +- **Node.js** (>= 16.13.0) - JavaScript runtime |
| 25 | +- **ROS 2** (Humble, Jazzy, or newer) - Robot Operating System 2 |
| 26 | +- **rclnodejs compatible environment** - Linux recommended (tested on Ubuntu/WSL) |
23 | 27 |
|
24 | | -2. Go into the demo. |
| 28 | +## 🛠️ Installation |
25 | 29 |
|
26 | | -```bash |
27 | | -cd rclnodejs/electron_demo |
28 | | -``` |
| 30 | +1. **Navigate to the demo directory**: |
29 | 31 |
|
30 | | -3. [SOURCE THE ROS 2 SETUP FILE](https://docs.ros.org/en/jazzy/Tutorials/Beginner-CLI-Tools/Configuring-ROS2-Environment.html#source-the-setup-files) |
| 32 | + ```bash |
| 33 | + cd rclnodejs/electron_demo/topics |
| 34 | + ``` |
31 | 35 |
|
32 | | -4. Install dependencies |
| 36 | +2. **Source your ROS 2 environment**: |
33 | 37 |
|
34 | | -```bash |
35 | | -npm install |
36 | | -``` |
| 38 | + ```bash |
| 39 | + source /opt/ros/jazzy/setup.bash # or your ROS 2 distro |
| 40 | + ``` |
37 | 41 |
|
38 | | -5. Rebuild rclnodejs for Electron |
| 42 | +3. **Install dependencies**: |
39 | 43 |
|
40 | | -```bash |
41 | | -# Every time you run "npm install", run this: |
42 | | -./node_modules/.bin/electron-rebuild |
43 | | -``` |
| 44 | + ```bash |
| 45 | + npm install |
| 46 | + ``` |
44 | 47 |
|
45 | | -6. Run the app |
| 48 | +4. **Rebuild rclnodejs for Electron**: |
| 49 | + ```bash |
| 50 | + ./node_modules/.bin/electron-rebuild |
| 51 | + ``` |
46 | 52 |
|
47 | | -``` |
| 53 | +## 🚀 Running the Demo |
| 54 | + |
| 55 | +Start the application: |
| 56 | + |
| 57 | +```bash |
48 | 58 | npm start |
49 | 59 | ``` |
50 | 60 |
|
51 | | -If it works, you can see the demo as: |
52 | | - |
| 61 | +The demo window will open with: |
| 62 | + |
| 63 | +- **Text input field** for typing messages to publish |
| 64 | +- **Send button** to publish messages to the `ts_demo` topic |
| 65 | +- **Message display area** showing received messages |
| 66 | +- **Counters** for published and received messages |
| 67 | + |
| 68 | +## 📁 Project Structure |
| 69 | + |
| 70 | +- **`package.json`** - Project configuration and dependencies |
| 71 | +- **`main.js`** - Electron main process with rclnodejs integration |
| 72 | +- **`index.html`** - Application interface and layout |
| 73 | +- **`renderer.js`** - Renderer process handling UI interactions and ROS2 communication |
53 | 74 |
|
54 | | -## Resources for Learning Electron |
| 75 | +## 🔗 Related Resources |
55 | 76 |
|
56 | | -- [electronjs.org/docs](https://electronjs.org/docs) - all of Electron's documentation. |
57 | | -- [Native Node Modules](https://www.electronjs.org/docs/latest/tutorial/using-native-node-modules) - Use a native node module. |
| 77 | +- [Electron Documentation](https://electronjs.org/docs) - Complete Electron framework guide |
| 78 | +- [Native Node Modules](https://www.electronjs.org/docs/latest/tutorial/using-native-node-modules) - Using native modules with Electron |
| 79 | +- [rclnodejs Documentation](../../README.md) - Core rclnodejs API reference |
0 commit comments