You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The application provides multiple control interfaces that can be swapped during runtime:
40
-
41
-
### Standard Gamepad
42
-
A dual-joystick layout for precise control, publishing to the `/joy` topic with ROS standard `sensor_msgs/Joy` messages.
43
-
44
-
### GameBoy Layout
45
-
A nostalgic GameBoy-inspired control interface with D-pad and A/B buttons.
46
-
47
-
### Voice Control
48
-
Record voice commands that can be sent to your robot for voice-activated control.
49
-
50
-
### Drone Control Pad
51
-
Specialized control interface for aerial vehicles. For testing, use in conjunction with [aerial-sim](https://github.com/tessel-la/aerial-sim) repository.
52
-
53
-
### Manipulator Control
54
-
Interface for controlling robotic arms with precise joint movements. For testing, use in conjunction with [manipulator-sim](https://github.com/tessel-la/manipulator-sim) repository.
55
-
56
-
You can open multiple control panels and switch between them with tabs.
The application supports multiple themes, including user-created custom themes. Themes define the color palette for the UI elements.
65
-
66
-
1.**Access Theme Menu:** Click the theme icon button (usually in the bottom-right corner). This opens a popup menu displaying available themes (default and custom).
67
-
2.**Create New Theme:** Click the "Create New Theme..." button in the popup. This opens the Theme Creator modal.
68
-
3.**Define Theme:**
69
-
* Enter a unique **Name** for your theme.
70
-
* Select the base **Colors** (Primary, Secondary, Background) using the color pickers. Optional colors (Text, Border, etc.) can also be set.
71
-
* Choose an **Icon** to represent your theme in the selector menu.
72
-
* Click **Save Theme**.
73
-
4.**Editing/Deleting:** Custom themes will have Edit (pencil) and Delete (trash) icons next to them in the theme selector popup. Clicking Edit opens the Theme Creator pre-filled with that theme's settings. Clicking Delete prompts for confirmation before removing the theme.
74
-
75
-
### How it Works
76
-
77
-
* Default themes (`light`, `dark`, `solarized`) have their CSS variables defined directly in `src/index.css` using `[data-theme="themename"]` selectors.
78
-
* Custom themes are stored in the browser's `localStorage`.
79
-
* When a custom theme is selected, JavaScript dynamically generates a `<style>` tag containing CSS variable overrides based on the saved colors and injects it into the document head. The `<body>` element also gets a `data-theme="custom-theme-id"` attribute.
80
-
* UI components should primarily use the defined CSS variables (e.g., `var(--primary-color)`, `var(--background-color)`) for styling to ensure they adapt correctly to the selected theme.
81
-
82
-
## 🧩 Codebase Organization
83
-
84
-
The codebase follows a component-based architecture:
85
-
86
-
-`/src/components` - Main UI components
87
-
-`/src/components/gamepads` - All gamepad control interfaces
88
-
-`/standard` - Standard dual joystick layout
89
-
-`/gameboy` - GameBoy-style control layout
90
-
-`/voice` - Voice control interface
91
-
-`/drone` - Drone control interface
92
-
-`/manipulator` - Robotic arm control interface
93
-
-`/src/hooks` - Custom React hooks including ROS connection
*[Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/) installed.
107
-
*[Node.js](https://nodejs.org/) (v18 LTS or later recommended) and npm. (*Note: Node/npm are technically only needed if modifying dependencies locally before a Docker build, but good to have.*)
108
34
*[mkcert](https://github.com/FiloSottile/mkcert#installation) for local HTTPS setup.
35
+
</details>
109
36
110
-
### Local Development Setup
37
+
<details>
38
+
<summary><strong>⚙️ Local Development Setup</strong></summary>
@@ -138,8 +66,10 @@ See the dedicated README in the `/src/components/gamepads` directory for instruc
138
66
4. **Access the Application:**
139
67
* On your development machine: `https://localhost`
140
68
* From another device on the same network (e.g., mobile): `https://YOUR_HOST_IP` (using the same IP you used for `mkcert`)
69
+
</details>
141
70
142
-
### Stopping the Services
71
+
<details>
72
+
<summary><strong>🛑 Stopping the Services</strong></summary>
143
73
144
74
```bash
145
75
# Stop and remove containers
@@ -148,100 +78,156 @@ docker compose down
148
78
# Stop, remove containers, AND remove Caddy's data volumes (useful for a clean restart)
149
79
docker compose down -v
150
80
```
81
+
</details>
151
82
152
-
## 🐳 Services Overview
153
-
154
-
***`app`**: Runs the Vite development server for the React frontend with hot-reloading.
155
-
* Accessible *internally* at `http://app:5173`.
156
-
***`ros-stack`**: Runs ROS 2 components.
157
-
*`rosbridge_server`: Provides WebSocket connection at `ws://ros-stack:9090`.
158
-
*`web_video_server`: Streams video topics over HTTP at `http://ros-stack:8080`.
159
-
*`foxglove_bridge`: Provides WebSocket connection for Foxglove Studio at `ws://ros-stack:8765`.
160
-
***`caddy`**: Acts as a reverse proxy.
161
-
* Listens on host ports `80` and `443`.
162
-
* Provides HTTPS using the generated `mkcert` certificates.
163
-
* Routes `/websocket` requests to `ros-stack:9090`.
164
-
* Routes `/foxglove` requests to `ros-stack:8765`.
165
-
* Routes all other requests to the Vite dev server (`app:5173`).
83
+
## 🎮 Control Interfaces & Gamepad Creation
166
84
167
-
## 🦊 Foxglove Studio Integration
168
-
169
-
The application includes a Foxglove WebSocket server that allows you to connect and visualize your ROS data using [Foxglove Studio](https://foxglove.dev/studio). This provides advanced data visualization, plotting, and debugging capabilities.
170
-
171
-
### Connecting to Foxglove Studio
172
-
173
-
1. Launch Foxglove Studio (web or desktop version)
174
-
2. Click "Open Connection" and select"WebSocket"
175
-
3. Enter one of the following URLs:
176
-
- Local machine: `ws://localhost:8765` (direct connection to the port)
177
-
- Local machine via Caddy proxy: `wss://localhost/foxglove`
178
-
- From another device on the same network: `wss://YOUR_HOST_IP/foxglove`
179
-
4. Click "Open"
180
-
181
-
You should now be connected to the ROS environment and can use all of Foxglove Studio's features to visualize and analyze your robot's data.
85
+
The application provides multiple control interfaces that can be swapped during runtime:
182
86
183
-
## 🛠️ Development Notes
87
+
<details>
88
+
<summary><strong>🕹️ Pre-built Control Pads</strong></summary>
184
89
185
-
* Changes to frontend code (in `/src`) should trigger hot-reloading in the browser.
186
-
* If you modify `Dockerfile`, `docker-compose.yml`, or `Caddyfile`, you'll need to rebuild and restart the services (`docker compose up -d --build --force-recreate`).
187
-
* Caddy logs can be viewed with `docker compose logs caddy`.
188
-
* ROS stack logs can be viewed with `docker compose logs ros-stack`.
90
+
#### Drone Control Pad
91
+
Specialized control interface foraerial vehicles. For testing, usein conjunction with [aerial-sim](https://github.com/tessel-la/aerial-sim) repository.
189
92
190
-
## 🚀 CI/CD Workflow
93
+
#### Manipulator Control
94
+
Interface forcontrolling robotic arms with precise joint movements. For testing, usein conjunction with [manipulator-sim](https://github.com/tessel-la/manipulator-sim) repository.
191
95
192
-
The project uses GitHub Actions for continuous integration:
96
+
#### Standard, GameBoy & Voice Layouts
97
+
Additional pre-built interfaces including standard dual-joystick, retro GameBoy-style controls, and voice command interface.
The Docker CI workflow runs automatically on every push to the `main` branch and on every pull request. It tests the container build process:
103
+
**Create your own control interfaces directly in the app!** The Custom Gamepad Creator allows you to design personalized control layouts using a drag-and-drop interface.
197
104
198
-
1. **Docker Setup**: Sets up Docker Buildx for multi-platform builds
199
-
2. **App Container**: Builds the React application container from `Dockerfile.dev`
200
-
3. **ROS Stack Container**: Builds the ROS 2 stack container from `Dockerfile.ros`
201
-
4. **Docker Compose**: Tests the full stack build with docker-compose
105
+
**Features:**
106
+
- **Component Library**: Choose from joysticks, buttons, D-pads, toggles, and sliders
107
+
- **Grid-based Design**: Drag and drop components on a customizable grid
108
+
- **Real-time Preview**: Test your gamepad while designing
109
+
- **ROS Integration**: Configure each component to publish to specific ROS topics
110
+
- **Save & Share**: Store layouts locally and export/import via JSON files
202
111
203
-
This approach ensures that all Docker containers and the full stack can be built successfully.
112
+
**Getting Started:**
113
+
1. Click the "+" button in the control panel tabs
114
+
2. Select "Create Custom Gamepad"
115
+
3. Drag components from the palette to design your layout
116
+
4. Configure each component's ROS topic and behavior
117
+
5. Save your custom gamepad for future use
204
118
205
-
### Testing Locally
119
+
Perfect for creating specialized control interfaces tailored to your specific robot's needs!
You can test the Docker builds locally using the provided scripts:
125
+
You can open multiple control panels and switch between them with tabs. Mix and match pre-built pads with your custom creations for maximum flexibility.
> **Note for WSL users**: If you encounter errors like `bash\r: No such file or directory`, you need to convert the file to Unix line endings. Install dos2unix (`sudo apt install dos2unix`) and run `dos2unix scripts/test-docker-build.sh` to fix the line endings.
The application supports multiple themes, including user-created custom themes. Themes define the color palette for the UI elements.
226
138
227
-
These scripts will build all Docker containers and test the full docker-compose setup, ensuring everything builds correctly.
139
+
1. **Access Theme Menu:** Click the theme icon button (usually in the bottom-right corner). This opens a popup menu displaying available themes (default and custom).
140
+
2. **Create New Theme:** Click the "Create New Theme..." button in the popup. This opens the Theme Creator modal.
141
+
3. **Define Theme:**
142
+
* Enter a unique **Name**for your theme.
143
+
* Select the base **Colors** (Primary, Secondary, Background) using the color pickers. Optional colors (Text, Border, etc.) can also be set.
144
+
* Choose an **Icon** to represent your theme in the selector menu.
145
+
* Click **Save Theme**.
146
+
4. **Editing/Deleting:** Custom themes will have Edit (pencil) and Delete (trash) icons next to them in the theme selector popup. Clicking Edit opens the Theme Creator pre-filled with that theme's settings. Clicking Delete prompts for confirmation before removing the theme.
147
+
</details>
228
148
149
+
<details>
150
+
<summary><strong>⚙️ How Theme System Works</strong></summary>
229
151
230
-
## 🚢 Production Deployment
152
+
* Default themes (`light`, `dark`, `solarized`) have their CSS variables defined directly in `src/index.css` using `[data-theme="themename"]` selectors.
153
+
* Custom themes are stored in the browser's `localStorage`.
154
+
* When a custom theme is selected, JavaScript dynamically generates a `<style>` tag containing CSS variable overrides based on the saved colors and injects it into the document head. The `<body>` element also gets a `data-theme="custom-theme-id"` attribute.
155
+
* UI components should primarily use the defined CSS variables (e.g., `var(--primary-color)`, `var(--background-color)`) for styling to ensure they adapt correctly to the selected theme.
156
+
</details>
231
157
232
-
### Manual Deployment
158
+
## 🛠️ Development Notes
233
159
234
-
To deploy the application:
160
+
<details>
161
+
<summary><strong>💻 Development Tips</strong></summary>
235
162
236
-
```bash
237
-
# Install dependencies
238
-
npm ci
163
+
* Changes to frontend code (in `/src`) should trigger hot-reloading in the browser.
164
+
* If you modify `Dockerfile`, `docker-compose.yml`, or `Caddyfile`, you'll need to rebuild and restart the services (`docker compose up -d --build --force-recreate`).
165
+
* Caddy logs can be viewed with `docker compose logs caddy`.
166
+
* ROS stack logs can be viewed with `docker compose logs ros-stack`.
167
+
</details>
239
168
240
-
# Build for production
241
-
npm run build
169
+
## 🧩 Codebase Organization
242
170
243
-
# The 'dist' directory now contains the deployable files
0 commit comments