|
| 1 | +# Electron Demos |
| 2 | + |
| 3 | +This directory contains interactive Electron applications that demonstrate various rclnodejs features with rich graphical interfaces. Each demo showcases how to integrate ROS2 functionality into desktop applications using web technologies. |
| 4 | + |
| 5 | +## 📱 Available Demos |
| 6 | + |
| 7 | +### 🔤 Basic Communication |
| 8 | + |
| 9 | +- **[topics/](./topics/)** - Minimal publisher/subscriber demo |
| 10 | + - Basic ROS2 topic communication with simple UI |
| 11 | + - Publishes and subscribes to string messages |
| 12 | + - Ideal starting point for learning rclnodejs with Electron |
| 13 | + |
| 14 | +### 🚗 Robot Control & Visualization |
| 15 | + |
| 16 | +- **[car/](./car/)** - Interactive car control with joystick |
| 17 | + |
| 18 | + - Virtual joystick for velocity command publishing |
| 19 | + - Real-time car visualization responding to commands |
| 20 | + - Emergency stop functionality and directional controls |
| 21 | + |
| 22 | +- **[manipulator/](./manipulator/)** - Two-joint robotic arm simulation |
| 23 | + - 3D robotic arm visualization using Three.js |
| 24 | + - Interactive joint controls with sliders |
| 25 | + - Automatic animation patterns and live feedback |
| 26 | + - ROS2 integration via `sensor_msgs/msg/JointState` |
| 27 | + |
| 28 | +### 🌍 Advanced Robotics Applications |
| 29 | + |
| 30 | +- **[turtle_tf2/](./turtle_tf2/)** - TF2 transforms and turtle simulation |
| 31 | + - Complete TF2 coordinate frame system implementation |
| 32 | + - Integration with turtlesim for turtle tracking |
| 33 | + - 3D WebGL visualization of coordinate transformations |
| 34 | + - Intelligent turtle following behavior |
| 35 | + |
| 36 | +## Complexity Levels |
| 37 | + |
| 38 | +| Demo | Complexity | Features | Best For | |
| 39 | +| --------------- | ----------------- | -------------------------- | --------------------- | |
| 40 | +| **topics** | ⭐ Beginner | Basic pub/sub | Learning fundamentals | |
| 41 | +| **car** | ⭐⭐ Intermediate | Control UI, visualization | Interactive control | |
| 42 | +| **manipulator** | ⭐⭐⭐ Advanced | 3D graphics, joint control | Robotics simulation | |
| 43 | +| **turtle_tf2** | ⭐⭐⭐⭐ Expert | TF2 system, complex logic | Transform management | |
| 44 | + |
| 45 | +## 🛠️ Development Tips |
| 46 | + |
| 47 | +### ROS2 Integration |
| 48 | + |
| 49 | +- All demos use rclnodejs in the renderer process |
| 50 | +- Node lifecycle management follows Electron best practices |
| 51 | +- Proper cleanup on application exit |
| 52 | + |
| 53 | +### UI Technologies |
| 54 | + |
| 55 | +- **Electron**: Desktop application framework |
| 56 | +- **Three.js**: 3D graphics and visualization |
| 57 | +- **Modern CSS**: Responsive and accessible interfaces |
| 58 | +- **Web APIs**: Canvas, WebGL, and DOM manipulation |
| 59 | + |
| 60 | +### Performance Considerations |
| 61 | + |
| 62 | +- Efficient ROS2 message handling |
| 63 | +- Optimized rendering loops |
| 64 | +- Memory management for long-running applications |
| 65 | + |
| 66 | +## 📚 Related Resources |
| 67 | + |
| 68 | +- [rclnodejs Tutorials](../tutorials/) - Core concepts and API usage |
| 69 | +- [ROS2 Documentation](https://docs.ros.org/) - Official ROS2 reference |
| 70 | +- [Electron Documentation](https://www.electronjs.org/docs) - Electron framework guide |
0 commit comments