This is a UI application for manually controlling ROS-based robots in real-time. While it is designed for the use case of club capra, we try to make it as robot agnostic as possible. As long as your robots has the required dependencies it should be almost plug and play.
We provide installers for Windows and Ubuntu that can be found in the release page. If a release is marked as pre-release it means the features haven't been tested with an actual robot. https://github.com/clubcapra/capra_web_ui/releases
While you can install node/npm manually, it's easier to use a version manager. This let's you have multiple node version installed without any issues.
We recommend using https://github.com/nvm-sh/nvm
We recommend using https://github.com/coreybutler/nvm-windows
capra_web_ui is made with web technologies this means you need node.js installed on your machine to build it. We assume the latest version of nodejs is installed.
npm i
/build
and use those to build the electron app installer. The final executable will be found in /dist
npm run build
npm run start
You need to have a small web server running in the folder containing the robot_description.
For example, for our markhor robot:
cd catkin_ws/src/markhor
python3 -m http.server 88 # launch a server with python on port 88
Note: the port for the robot_description is currently hardcoded to 88. It will be configurable in the future.
After that you need to rosrun
a robot_description
rosrun tf2_web_republisher tf2_web_republisher
roslaunch web_video_server web_video_server.launch
roslaunch rosbridge_server rosbridge_websocket.launch
To view RTSP streams your system requires FFmpeg to be installed.
With Chocolatey:
choco install ffmpeg
sudo apt install ffmpeg
With homebrew:
brew install ffmpeg
Currently, the audio IO is handled by the capra_audio node. The UI will simply launch the node as a child process. This only works on linux. Windows support should work with wsl but is not currently implemented. For audio to work, you also need to make sure that the capra_audio launch files are sourced in the terminal you are using to launch the UI.
For global state handle we use a mix of redux and xstate. While it's technically possible to use xstate context for the entirety of the global state. It's much easier to store global state in redux and only use xstate when the state is an actual state machine and not just pure data.
Our code formatting is handled by Prettier and ESLint. The configuration files for both are located in the root of the project. We recommend using the Prettier and ESLint extensions on VSCode to automatically detect style errors.
To automatically format the code every time you save, add the following to your settings.json
in the .vscode
folder:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
If you do not have a settings.json
file or a .vscode
folder at the root of the project, you can manually create them.
To create a new release, simply use npm version [major | minor | patch]
. This will bump the version and create a git tag. You can then push the new commit and github actions will take care of everythin else. You can use git push --follow-tags
to push the tags to github.
Just make sure to make the github release public once it's done.
Our markhor robot doesn't have a reverse mode. Instead we simply flip the input sent from the UI to the robot. To activate this revers mode, you can either press the back button of the gamepad or click the button identified either FORWARD or REVERSE to toggle the front direction. When changing the front direction it will also automatically update which camera is focused in the center of the screen. Essentially it will toggle between the camera at the bottom left and the one in the center. It is therefore recommended to configure those cameras with directly front facing and back facing view angles.
To connect to a robot, if you know that the IP is already configured properly, you click on the Disconnected button in the statusbar and it will immediately try to connect. Otherwise, go to the config tab, specify an appropriate IP address and press the connect button.
All configurations can be found in the config tab. It is separated in multiple sections.
Since the UI is built on top of electron, there's a sandbox between the web part of the app and the node part of the app. The logs from both parts are configured to log to a file that changes daily.
Logs are written to the following locations:
~/.config/capra_web_ui/logs/{DATE}/{process type}.log
%USERPROFILE%\AppData\Roaming\capra_web_ui\logs\{DATE}\{process type}.log
To test ROS features without connecting to a robot you simply need to specify localhost
as the host to connect to while a rosbridge web_socket node is running.
To run the rosbridge server simply open a terminal and run the following command:
roslaunch rosbridge_server rosbridge_websocket.launch
.
If the package is not installed you can install it:
sudo apt-get install ros-<rosdistro>-rosbridge-suite
.