Bootstrap 4 + ROS : creating a web UI for your robot
Bootstrap 4 framework allows you to create modern, great looking websites really quickly and without a big effort. It is currently one of the most popular front-end libraries for a reason. It is also open source and available under developer friendly MIT license. Building websites which not only look good but also scale well on different devices such as your laptop or a mobile phone is not a big deal with Bootstrap.
In this article I will show you how to use that framework together with ROS (Robot Operating System) — the most popular robotic middleware — to create awesome, intuitive web user interfaces for robots. I will guide you through setting-up the development environment, writing the code and running it on a physical robot. While in this article the demo is based on Husarion’s ROSbot 2.0 autonomous robot platform, you can easily run it on any other ROS powered and internet connected robot. It’s totally up to you.
1. Laptop / PC with installed Visual Studio Code (VSC).
First, in VSC you need to install the following plugins:
- Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets : this is the framework itself with couple of additional features which contain ready-to-use templates and other stuff useful while developing in bootstrap
- Live Server : to see your web UI changes in realtime
- Prettier Code formatter : to keep your source code clean
- vscode-icons : to make your workspace look good
- Husarion (optional): to modify embedded firmware of CORE2 real-time robot control board without using cloud.husarion.com .
2. Physical robot or gazebo simulation model.
In this article we are using ROSbot 2.0, but you can use any other ROS robot that you have.
On top of standard ROS, you will need to install couple additional packages. To do that, in your robot Linux terminal run the following commands:
sudo apt update
sudo apt install python-tornado python-pip ros-kinetic-rosbridge-suite ros-kinetic-web-video-server nginx
Creating a web UI in VSC
1. Creating a new project
First create an empty folder (we named it
ROS-bootstrap-demo). Then start VSC and open the folder you just created. In VSC create a new file called named
index.html. Thanks to one of the plugins for VSC which we have installed earlier creating a new Bootstrap 4 project is very straightforward. Just start typing
b4, then press
ctrl + space for auto completion menu to appear and choose
b4-$ . It will create a web page template with bootstrap libraries already included.
Here’s how creating a new project looks like:
Now right click the
index.html file and select “Open with Live Server [Alt + L Alt + O]” option. You will see an empty page in your web browser . It will be updated automatically each time you save your project.
2. Writing the HTML code
- Change the name of your page in the
<title>tag to “ROS + Bootstrap 4 demo”:
<title>ROS + Bootstrap 4 demo</title>
- Change the page background color to
- Add some additional scripts above
First 3 scripts come from Robot Web Tools(http://robotwebtools.org/ ) .
eventemitter2.min.js is a support library for handling various ROS events.
keyboardteleop.min.js is a support library for controlling the robot using the keyboard.
nipplejs.js is a library for creating a joystick for the web UI that is especially useful for controlling the robot on mobile devices.
webui.js will be created in the next section of this article.
<body class="bg-light">paste following code:
This is a basic structure of your app. In consists of a placeholder for the video, joystick and slider for selecting keyboard speed. Do not worry that
That is all for the html part, remember to save all the changes made in
Create a new file, name it
webui.js and save in the same folder as
Begin by creating some global variables:
Write a function to send ROS messages with velocity for robot:
Write a function to create velocity message publisher:
Write a function to create keyboard controller object:
Write a function to create joystick object:
…and finally main app initialization:
Choose between static IP address for the robot or dynamically defined IP with
location.hostname depending on your configuration. If the web server is running on a device different than the robot, IP must be set manually to the robot address. If the app is deployed to a server which is running on your robot, it can be set automatically.
Video address string might need to be adjusted. Part /camera/rgb/image_raw is the topic name, where video is published by the robot. Set this topic according to your camera.
You web user interface is now ready.
Running the demo on your robot
1. Flashing default firmware to ROSbot 2.0 real-time board
This step is specific for ROSbot 2.0 platform. In case of other robots it may look different. What we are doing in this step is uploading the firmware to a STM32F4 MCU processor inside Husarion CORE2-ROS controller which is responsible for real-time tasks of our robot. CORE2-ROS is a computer inside ROSbot 2.0 and it’s basically a combination of ASUS Tinker Board single board computer and CORE2 real-time board.
The easiest way to upload a default firmware to ROSbot is to connect it to cloud.husarion.com , create a new project in WebIDE based on the template
ROSbot default firmware, and click
upload project to device” button. This short video shows you how these steps look like:
2. Executing ROS nodes on your robot
Connect to your robot through SSH and execute the following commands in the Linux terminal (each in a separate terminal!):
roscore— ROS nodes will not be able to communicate without roscore. Each ROS system needs to have a roscore process running.
rosrun web_video_server web_video_server— it launches the server for streaming ROS image messages as video through the web.
roslaunch rosbridge_server rosbridge_websocket.launch— it launches the web sockets to allow web apps to publish or subscribe ROS messages.
The commands bellow are specific for ROSbot 2.0 and for Orbecc Astra RGB-D camera. For other robots and cameras you will need to review the documentation of the devices you are going to use:
roslaunch astra_launch astra.launch— it starts a driver for Orbbec Astra RGB-D camera
/opt/husarion/tools/rpi-linux/ros-core2-client /dev/ttyCORE2— this is a bridge for communicating of CORE2 controller with ROS system. In this example, CORE2 is responsible for driving motors and estimating ROSbot position based on encoders. For different robot, you may need to switch this node to other driver.
3. Testing the web UI!
Now right click the
index.html file and select “Open with Live Server [Alt + L Alt + O]” option. You should see a web user interface for your robot:
Deploying web user interface to the robot
Currently we’ve got a web user interface running on a PC, and in this step we will make it run on our robot.
Start with creating new folder on your robot and copy your app files to inside. On your robot edit Nginx configuration file by typing in:
sudo nano /etc/nginx/sites-enabled/default
and change value
/var/www/html to the path to your app. Restart Nginx:
sudo systemctl restart nginx
Nginx will start automatically at boot. You do not need to launch it again.
Open a web browser and type in your robots IP in the address bar. You should now see the UI which you have created (so cool!).
In this article I guided you through process of creating a simple web user interface based on Bootstrap 4 framework for ROS powered robot. I showed you how to run that interface on your PC and how to host it on your robot. The best thing about it is the simplicity of creating awesome web UIs in minutes thanks to Bootstrap 4, Robot Web Tools and Visual Studio Code.
Let me know what have you managed to create with the combination of ROS and Bootstrap 4!