- About this repository
- Intro and general concepts
- Webservers/websocket
- Environment, OS and preparation
- Installing ROS (2 Humble) on UBUNTU
- Installing a code editor on UBUNTU
- Terminator
- Colcon
- Installing ROS 2 packages
- Micro-ROS basics
- RPI Pico and Micro-ROS
- ROSBridge
- roslibjs
- Create a web page to talk to ROS2
The projects in the abilitytechlab repository are individual, yet they share some similarities. The unique physical setup with a tablet handling the myTobii collecting user input via a web application, an independent robot (arduino, Pi etc) executing the commands requiers a mediator. A computer which recieves user imput from the tablet and informs the robot what to do. In this tutorial we will use ROS2 and websocket to achieve this.
A webserver is responsible to serve content like like web pages, to users "clients" over the internet. Browsers send requests to a webserver adn the server finds the requested content and replies to the client. Typically, a webserver processes individual requests from a browser, sending back responses each time, and then the connection closes. This works well for static content, for example a website, but is less efficient for interactive applications where information changes frequently. Like for example controlling a robot.
For these types of applications we use a WebSocket. A WebSocket allows a server to maintain a continuous, real-time, two-way communication with it's client. Communication can be lean and fast which is very beneficial in our case.
The way that the myTobii works is by using eye tracking as a mouse and allowing the user to focus their eyes in different areas on the screen to make a choice. The browser percives this action as a simple mouse "hoover" over a block or button. Since eye tracking is not very persise it is adviced to make these buttons oversized and keep the options limited. For example "left" "right" "shoot" could be establiched in this way.
ROS2 (much like many opesource open-source frameworks) is simplest to install and use in Linux operating systems. It is possible to install and use ROS2 on WIndows and Mac OS enviroments. In fact there are tutorials from the official ROS documentation such as ROS2 for MAC and ROS2 for Windows that you can follow. Additionally if you already have ROS2 installed in your working enviroment there is no reason to add any extra virtual enviroments and you can skip this step entierly. Though for begginer users we are recomending to have a UBUNTU instalation or a Virtual Machine (VM) as it will be cleaner and easier to manage in the logn-run. For this tutorial we will be using UBUNTU 22.
Next you will find two short tutorials for installing Virtualbox and setting up your UBUNTU 22 enviroment on Windows and MAC OS.
-
Download Oracle VM VirtualBox
- You can download the .exe file from the official site and install it like any other program.
-
Download the Linux 22.04 version (jammy jelly) ISO file (image).
- This version, albeit older, is fully supported by the ROS2 Humble. So in order to download the iso, click the following link: Ubuntu 22 and select the desctop image
- This version, albeit older, is fully supported by the ROS2 Humble. So in order to download the iso, click the following link: Ubuntu 22 and select the desctop image
-
Having both the ISO image and the VirtualBox, we are ready to create a new virtual machine. To do this, click on Machine on the Top Menu and then click on New. Then fill in the details:
- Name: The name of the Virtual Machine (Typically we use the operating system's name).
- Machine Folder: The place in your computer where all virtual machines will be stored.(You can leave the default one if you like).
- ISO image file: From the drop down menu, choose the iso image file you downloaded earlier.
-
After clicking Next, you will be prompted to create a User Profile. On this step, changing the default credentials is crucial since if not, the user created will not have sudo access over the system. So, choose a user name and password to your liking and click Next.
-
In the next window, you will have to define the resources the virtual operating system will use. Here it is recommended to allocate at least 8GB of Base Memory and 4 CPUs. After choosing the preferred settings, click on Next.
-
Next, you will have to define the Hard Disk Size in which the operating system will be installed. Generally, it is recommended to allocate at least 25GB of Disk Size, but if you are planning on using the Virtual Machine for large projects, adjust the size accordingly.
-
After clicking Next, a window with a summary of your virtual machine will pop up. There you can review all the settings you configured in the previous steps. If everything is ok, click on Finish and the installation process will begin.
-
During the installation, you will be prompted to pick a user name and a password in order to log in. Fill in the blanks ad press Continue. Make sure you save this login details as they will be asked in the next step
-
Afterwards the installation will proceed and in the end, you will have to log in with the credentials from the previous step. Insert your password and the ubuntu image will run.
- Guest Additions extends the utilities of the guest system. For example, it enables it to connect with external devices or have shared folders with the host system. In order to be installed properly, it is important to follow these steps:
-
Power up the Virtual Machine.
-
Make sure that our Ubuntu system gcc module version is 12. We can achieve this by doing the following:
- Open the terminal and run:
sudo apt install --reinstall gcc-12
-
Then update the link for gcc to go to the gcc-12 binary by running:
sudo ln -s -f /usr/bin/gcc-11 /usr/bin/gcc
-
Now, on the Top Menu of the Operating System running window, click on Devices and then click on Insert Guest Additions CD Image.
-
A CD Icon should appear. Click on it for the folder to open.
-
Then, right click anywhere in the folder and click Open in Terminal.This should open a terminal with a command prompt for this directory and run:
./autorun.shAnd with that, we installed Guest Additions.
-
Download Oracle VM VirtualBox
- You can download the
.exefile from the official site and install it like any other program.
- You can download the
-
Download the Linux 22.04 version (Jammy Jelly) ISO file (image)
- This version, albeit older, is fully supported by ROS2 Humble. To download the ISO, click the following link: Ubuntu 22.
-
Creating a New Virtual Machine
Having both the ISO image and VirtualBox, we are ready to create a new virtual machine. To do this, click on Machine on the Top Menu and then click on New. Then fill in the details:- Name: The name of the Virtual Machine (Typically we use the operating system's name).
- Machine Folder: The place on your computer where all virtual machines will be stored. (You can leave the default one if you like).
- ISO image file: From the drop-down menu, choose the ISO image file you downloaded earlier.
-
Creating a User Profile
After clicking Next, you will be prompted to create a User Profile. On this step, changing the default credentials is crucial since, if not, the user created will not have sudo access over the system. So, choose a user name and password to your liking and click Next. -
Defining Resources for the Virtual Machine
In the next window, you will have to define the resources the virtual operating system will use. Here it is recommended to allocate at least 8GB of Base Memory and 4 CPUs. After choosing the preferred settings, click on Next. -
Defining the Hard Disk Size
Next, you will have to define the Hard Disk Size where the operating system will be installed. Generally, it is recommended to allocate at least 25GB of Disk Size, but if you are planning on using the Virtual Machine for large projects, adjust the size accordingly. -
Reviewing and Starting Installation
After clicking Next, a window with a summary of your virtual machine will pop up. There you can review all the settings you configured in the previous steps. If everything is okay, click on Finish and the installation process will begin. -
Logging in During Installation
During the installation, you will be prompted to pick a user name and a password in order to log in. Fill in the blanks and press Continue. Make sure you save these login details as they will be asked in the next step. -
Logging in After Installation
After the installation is complete, you will have to log in with the credentials from the previous step. Insert your password and the Ubuntu image will run.
- Guest Additions extends the utilities of the guest system. For example, it enables it to connect with external devices or have shared folders with the host system. In order to be installed properly, it is important to follow these steps:
-
Power up the Virtual Machine.
-
Ensure the correct gcc module version
Make sure that our Ubuntu system'sgccmodule version is 12. We can achieve this by doing the following:- Open the terminal and run:
sudo apt install --reinstall gcc-12
- Then update the link for
gccto go to thegcc-12binary by running:
sudo ln -s -f /usr/bin/gcc-11 /usr/bin/gcc
- Download your choice of virtualization tool
For MAC OS we can suggest 2 virtualization tools:
-
If you are having an intel-based Mac downloading Virtualbox is pretty straight forward you can download the .dmg file from the official site (choose the ​macOS / Intel hosts one). and you can follow the rest of the steps as described above. Or you can use UTM as instructed bellow which is MAC specific and therefore tends to be more optimised for MACs.
-
At the time of writting this instructions the M1 and M2 chips are not fully supported for the latest version of Virtualbox and UBUNTU. A native MAC virtual machine emulator and virtualiser is UTM for M1/M2 chips UTM is suggested. You can find documentation to customise your virtual enviroment here.
-
Download the .dmg from the UTM website and install it like any other program.
-
Download the Linux 22.04 version (jammy jelly) ISO file (image).
- For Mac OS you will have to download jammy-desktop-arm64.iso from this link.
-
Having both the ISO image and UTM, we are ready to create a new virtual machine. To do this follow the next steps:
- Click on the Create New Machine option, then click on Virtualise and select Linux.
- On the next window select Boot from Kernel Image
- Scroll down and click on the browse button of the Boot ISO Image (optional) option. Then navigate to the ubuntu iso image you downloaded, select it and click Open.
- After clicking Continue, you will be prompted to define the resources the virtual operating system will use. Here it is recommended to allocate at least 8GB of Base Memory and 4 CPUs. After choosing the preferred settings, click Continue.
- Next, you will have to define the Hard Disk Size in which the operating system will be installed. The default value is 65G but generally, it is recommended to allocate at least 25GB of Disk Size, but if you are planning on using the Virtual Machine for large projects, adjust the size accordingly.
-
Next, you will have to define the Hard Disk Size in which the operating system will be installed. Generally, it is recommended to allocate at least 25GB of Disk Size, but if you are planning on using the Virtual Machine for large projects, adjust the size accordingly.
-
Next you will have to locate the shared folder between yout host machine (your MAC OS) and the guest machine (the UBUNTU). Create a new folder anywhere in your file system. Remember that the virtual machine will have access ONLY on this folder.
- After clicking Continue, a window with a summary of your virtual machine will pop up. There you can review all the settings you configured in the previous steps. Here you can set a name of the Virtual Machine (Typically we use the operating system's name). If everything is ok, click on Finish and the installation process will begin.
- After the set-up is complete you can boot your machine from UTM. This will boot Ubuntu 22.04 from the ISO image. Follow the installation steps and select reboot.
Choose Try or Install UBUNTU.
- You will be landing on your UBUNTU desktop where you need to click on the iso image and follow the instructions to install your UBUNTU OS.
- During the installation, you will be prompted to pick a user name and a password in order to log in. Fill in the blanks ad press Continue. Make sure you save this login details as they will be asked when you log in to UBUNTU.
- Do not worry over this message. The VM only has access on the allocated Disk space and it will never affect your host OS.
- At the end of the installation select Continue testing and instead of rebooting Power Off the machine.
-
Boot your UBUNTU machine. This virtual machine is currently considerring the .iso image as a CD/DVD drive and will boot from it again. In order to avoid that you will need to Clear the CD/DVD From UTM. You can find it at the bottom of the VM's satus page.
After that you can boot your UBUNTU normaly. -
Share files and Clipboard with your virtual UBUNTU on UTM
-
You can find documentation to customise your virtual enviroment here. For this installation we advise to install packages that will allow you to share some files with your host OS (your MAC) as well as your clicpboard so you can copy paste from one to the other.
-
Open the terminal and run:
sudo apt install --reinstall gcc-12 -
Then update the link for gcc to go to the gcc-12 binary by running:
sudo ln -s -f /usr/bin/gcc-12 /usr/bin/gcc -
Navigate to the 'Software updater' tab and make sure these 4 option are selected.
-
Then install the spice-webdavd package and reload the VM.
sudo apt install spice-vdagent spice-webdavd
-
So far we have covered using a laptop or PC running Linux, Windows or MAC OS. While this is the most common hardware we might want/need to control our robot from a rasberry Pi or latepanda depending on our project.
In the case of Rasberry Pi we suggest selecting a 64-bit Pi in order to ensure that you can have the easiest time installing and running ROS2 as you can see in the official documentation. Rasberry OS (formerly known as rasbian) is Debian based and therefore the above settings for UBUNTU should work on it with minor diversions. Extra applications such as an IDE like Visual Studio Code can be chosen depending on the Pi's specifications (disk, ram etc). Visual Studio Code is available for Rasberry OS.
Similarly, if we want to use latepanda in our project we can install UBUNTU 22.04 directly onto it using this official documentation.
After setting up a Linux (in this case UBUNTU) operating system in our machine we are ready to install and set-up ROS 2 Humble. Which should be the same process regardless from which OS we started from. We will setup UTF-8 encoding, download and install ROS 2.
First, we make sure that we have a system locale that supports UTF-8. We can check if UTF-8 is supported by running the command: locale. If the result is something like the following, we are good to go:
LANG=en_CA.UTF-8 LANGUAGE=en_CA:en LC_CTYPE="en_CA.UTF-8" LC_NUMERIC=en_AU.UTF-8 LC_TIME=en_AU.UTF-8 LC_COLLATE="en_CA.UTF-8" LC_MONETARY=en_AU.UTF-8 LC_MESSAGES="en_CA.UTF-8" LC_PAPER=en_AU.UTF-8 LC_NAME=en_AU.UTF-8 LC_ADDRESS=en_AU.UTF-8 LC_TELEPHONE=en_AU.UTF-8 LC_MEASUREMENT=en_AU.UTF-8 LC_IDENTIFICATION=en_AU.UTF-8 LC_ALL=
If not, however, we run the following commands:
sudo apt update && sudo apt install locales
sudo locale-gen en_US en_US.UTF-8
sudo update-locale LC_ALL=en_US.UTF-8 LANG=en_US.UTF-8
export LANG=en_US.UTF-8
In order to keep ROS 2 up-to-date, we need to add the ROS 2 apt repository to the system. To achieve this we follow these steps:
- Make sure the the Ubuntu Universe Repository is enabled:
sudo apt install software-properties-common
sudo add-apt-repository universe
If it is not, after running the second command, it will ask to press enter to enable.
- Add the curl utility and the ROS 2 GPG key:
sudo apt update && sudo apt install curl -y
sudo curl -sSL https://raw.githubusercontent.com/ros/rosdistro/master/ros.key -o /usr/share/keyrings/ros-archive-keyring.gpg
- Add the repository to the sources list:
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/ros-archive-keyring.gpg] http://packages.ros.org/ros2/ubuntu $(. /etc/os-release && echo $UBUNTU_CODENAME) main" | sudo tee /etc/apt/sources.list.d/ros2.list > /dev/null
Now that the repositories are set up, ROS 2 can be installed.
- Update the apt repository cache:
sudo apt update - Upgrade the system:
sudo apt upgrade
Install ROS 2 by running the following command:
sudo apt install ros-humble-desktop
-
If all went well, ROS 2 should be ready to be used. We can check this by sourcing the terminal with the command:
source /opt/ros/humble/setup.bash -
Sourcing ROS 2 is something that we need to do in every terminal we open, it allowes the terminal to "know about" ROS 2. In order to avoid running this command every time we can add it to our setup.bash file:
echo "source /opt/ros/humble/setup.bash" >> ~/.bashrc
and then run:
ros2 --help
If the result is the following, everything worked correctly.
It is important to note that the source comand reads and executes commands from a file in the current shell environment. The /opt/ros/humble/setup.bash script is a setup file installed by ROS 2 that configures the environment variables and paths necessary for using ROS 2. We will need to run the same command on every terminal window we want to use ROS 2 in, even if we open a new tab in the termal window we are working in. We can always check if a terminal shell is aware of ROS 2 via the ros2 --help command.
In order to start programming we will need a code editor. Freel free to install your favourite editor, or use the one you already have. For the purposes of this tutorial we will use Visual Studio Code.
Usint the GUI will work for ARM architechtures. If we have an aarch64 (for example using UTM on a MAC OS host) we will have to use the terminal (see bellow).
-
First we need to download the installation file. We naviage to the VS Code page:
and we click on the .deb button. A .deb file will be downloaded as a result. -
Then, double click on the .deb file and a window will pop up
(If this is not the window that popped up, close it, then right-click on the .deb and click on Open with another application). -
Click the select button and the snap store will appear.
-
Click on Install and after the process is finished, the VS Code application is installed and ready for use.
In most cases the above process should work, though if you are having a UBUNTU running on a MAC OS host you will most likely have an ARM64 architecture in which VScode is not readily available. In this case the IDE will have to be installed using the comand line.
-
Depending on your systems architecture you will need to install the correct package.
-
For ARM64:
- Open a terminal and use wget to download the latest ARM64 .deb package of Visual Studio Code:
wget https://update.code.visualstudio.com/latest/linux-deb-arm64/stable -O code_arm64.deb- Install the package
sudo apt update sudo apt install ./code_arm64.deb -
For amd64:
- Open a terminal and use wget to download the latest ARM64 .deb package of Visual Studio Code:
wget https://update.code.visualstudio.com/latest/linux-deb-x64/stable -O code_amd64.deb- Install the package
sudo apt update sudo apt install ./code_amd64.deb -
In order to open Visual Studio Code you can now either type
codeon the terminal or search "Visual Studio Code" on the Show applications tab.
Before starting to use the ROS 2 framework for our projects, we need to setup our environment. A well set-up code editor will help us write code faster.
Now that VS Code is installed open it from Show Applications, on the bottom left corner. It should be looking like this:
Now, on the left bar menu, click on the Extensions tab and search for the following extensions:
- Python:
- C/C++:
- ROS:
- CMake and CMake Tools:
-
Though not mandatory, Terminator is a very useful terminal and really popular for creating robotics projects. It is recommended since it will make our lives easier, since it is able to create terminals by splitting the window and thus, multiple terminals can be accessed simultaneously. To install, run the command:
sudo apt install terminator -
Then, open Terminator and try to split terminals by pressing ctrl + shift + E and ctrl + shift + O. The result will be this:
Colcon is the build command for ROS 2. We need to set it up seperately by running the following command:
sudo apt install python3-colcon-common-extensions
In general, ROS 2 offers a lot of packages(libraries) for different applications. Some notable once are Gazebo and Controller. For the purposes of this tutorial we will need the Rosbridge package:
These packages will be crucial to our project. For the first we just need to run the following command:
sudo apt install ros-humble-rosbridge-suite
For the second we need to clone the git repository so we can download the library:
sudo apt install git
Then, install rosdep to check for ros dependencies during the installation (It als needs to be initialized only once after the installation).
sudo apt install python3-rosdep
sudo rosdep init
If, for some reason, python is not installed in your system, you can install it by following this guide.
Lastly, we need to install pip (package manager for python).
sudo apt install python3-pip
Micro-ROS is a tool that makes it possible for microcontrollers to run the ROS2 framework. In essence, it is the whole ROS stack programmed in C in order to allocate the memory space needed at compile time and not at runtime.
The logic behind a micro-ROS project is that the code which will run on the microcontroller will be coded in C (or C++) using the micro-ROS libraries. In order for the chip to communicate with ROS2, a specific program is run, which accomplishes exactly that and its called ROS-Agent.
Before we start with Micro-ROS we need to make sure that our hardware (in this case the RPI Pico) can be accessed. For the Pico to be accessed in general, we need to download the Pico SDK. This is a set of functions that allow us to access the Pico's hardware components i.e. the GPIO ports. For a detailed hardware inputs and outputs of the Picos supported on this project follow this link: https://www.raspberrypi.com/documentation/microcontrollers/pico-series.html If you own a different Pico, search for its specific pinout and, if needed, adjust the code accordingly.
So, in order to download the Pico SDK, first we check and install its dependencies:
sudo apt install cmake g++ gcc-arm-none-eabi doxygen libnewlib-arm-none-eabi git python3and then, we clone the git repo to our home directory:
git clone --recurse-submodules https://github.com/raspberrypi/pico-sdk.git $HOME/pico-sdkAfter that, we set up the bash environment by running:
echo "export PICO_SDK_PATH=$HOME/pico-sdk" >> ~/.bashrcand
source ~/.bashrcIn your Home directory, there will be a folder named Pico-sdk. This folder contains the functions that are meant to operate the Pico.
Next, we need to download the Pico precompiled library.
Micro-ROS supports a lot of microcontrollers. Generally, a micro-ROS project requires micro-ROS to be installed to the Workspace folder and then create a Firmware folder which is specific to the microcontroller of the project. This whole step, though, has been finished for most of the known microcontrollers, including Pico, and is recommended to use this precompiled library of tools. If, however, you want to create a project for a different firmware, you can find more on this link: https://micro.ros.org/docs/tutorials/core/first_application_rtos/freertos/
Now, to download the micro-ros pico library, we just have to clone the repository for our specific ROS2 version (Humble). So:
git clone -b humble https://github.com/micro-ROS/micro_ros_raspberrypi_pico_sdkNow we should have a folder that looks like this (opened in VSCode by navigating through the terminal and using the command code .)
This folder contains the micro-ros library and the CMake files that will compile the Pico SDK in order for the project to have access to it. Our project can be created in a new folder inside this workspace and will need a source file in C as well as a CMakeLists.txt file, but since the workspace contains already an example with its CMakeLists.txt file, we will use that to simplify things. So, this will be our project folder.
- First we click on the New File icon in VSCode (located on the right of the Workspace name)
We will name it blink.c and we will open it. Inside we will write our code. Since we want the Pico to blink the onboard LED, we will create a subscriber node which will listen to a topic for values of 1 and 0. The file is included and inside it the comments explain exactly what every line of code does.
IMPORTANT: There are essentially two kinds of Pico chips:
- Raspberry Pi Pico: The standard version of the Pico with the RP2040 chip, 2MB of onboard flash, and basic I/O pins.
- Raspberry Pi Pico W: Similar to the original Pico, but with an added wireless (Wi-Fi) capability through the Infineon CYW43439 chip. There is also the Raspberry Pi Pico WH which is the same as the Pico W, but with Wi-Fi and pre-soldered headers.
The two Picos have different pinouts so the code contains commented lines for one of them and uncommented lines for the other. Depending on your Pico, choose the ones that work for it.
-
Now we need to configure the CMakeLists.txt file. We can think of this file as an instruction set for the compiler in order to create the executable file of our source code.
- We add our executable file and the libraries needed for it. We don't add the Pico SDK because the library will compile it automatically.
- Then, we configure the Pico communication by adding an active usb connection line for our executable (line 52) and adding another line to turn off the uart protocol since we do not need it.(line 53)
- Now we create a .uf2 file. This is the file that will be flashed in our Pico. We can create this by adding an extra output line.
- Lastly, if we use a Pico of type W or WH, we need to add a line after the cmake version declaration:
-
IMPORTANT: We can see that to make our executable, we added the pico_uart_transport.c source file. This file is inside the precompiled library and it contains the board-specific implementation of the serial transport. We need it in order for our executable to work properly.
With that, we are ready to build our project. To do so, we run the following commands which are standard when we build a cmake project:
- First, on our terminal, we create a build folder inside our workspace (naming the folder build is a naming convention, you can name it anything you want)
mkdir build- Then, we go into that directory:
cd build- After that, we run the cmake command:
cmake ..- Lastly, we can build the workspace:
makeThis will create a build folder, inside which our .uf2 files, among others, will be created. Note that during the cmake .. command, you will encounter two warnings: One warning is about defining the compiler for the PICO-TOOLCHAIN-PATH variable and the other is for the installation of the Picotool. You can ignore both of them since the compiler will be searched automatically and the Picotool will be installed on your project automatically as well. So the warnings will stop popping up if you build the project again. (You don't have to do that since it will not change anything).
Now that the blink.uf2 file is created we need to flash the Pico. Flashing in this case just means that we need to copy the blink.uf2 file onto the Pico. So, we insert the Pico while pressing the BOOTSEL button. This will open the Pico in file transfer mode and will remove the previous flashing if it existed.
We just copy the blink.uf2 file inside the Pico and then, the Pico will automatically disconnect and reconnect again. This time the Pico will not run in file transfer (or Boot mode), it will run the code flashed to it instead.
As we said earlier, in order for ROS2 to communicate with a micro-ROS node, we need the micro-ROS agent up and running. We can install it locally but it is easier to run it using Docker. A Docker Image is a program that has been preinstalled on another computer and can run on our computer without installation.
- First, if you do not have Docker installed, install it by running:
sudo snap install docker- Then just run the following command to start the Micro-ROS Agent:
sudo docker run -it --rm -v /dev:/dev --privileged --net=host microros/micro-ros-agent:humble serial --dev /dev/ttyACM0 -b 115200Now, by connecting the Pico we can check if our code works since the Agent will print on screen if it detected a node.
As we can see, the Agent (Top) printed to the console that the subscriber was created as did the topic as well. ROS2 (bottom) recognises the topic since with the command
ros2 topic list we can see the /pico_blink_subscriber topic. We can further test our code by publishing 1 or 0 to this topic and check if the LED turns on or off:
For turning the LED on:
ros2 topic pub /pico_blink_subscriber std_msgs/msg/Int32 "data: 1"For turning the LED off:
ros2 topic pub /pico_blink_subscriber std_msgs/msg/Int32 "data: 0"In ROS2 it is possible to publish or to subscribe to topics through a browser, thus allowing robots to receive or to send messages using internet connectivity. To accomplish that, we need the ROSBridge tool. Like the micro-ROS Agent, ROSBridge allows a web page to connect with ROS2 but unlike the micro-ROS Agent, it is a ROS library instead of a separate program.
In order to create a web page we need to write HTML and JavaScript code. ROS2 does not support JavaScript out-of-the-box so we need the roslibjs library to write ROS code in JavaScript.
In this part of the project, we will create a web page to connect with ROS2. The web page will be a very basic HTML page with a JavaScript part. More focus will be put on the JavaScript code since this is where the logic of the project resides.
NOTE: Creating a ROS workspace is not needed for the purposes of this project but it is mandatory for more advanced projects, so it is deemed useful for the student to know about it.
- First of all, we need to set up our workspace. We create a folder with a folder called source in it (the name ros_web_publisher_ws is an example):
mkdir -p ros_web_publisher_ws/src- Then we navigate to that folder:
cd ros_web_publisher_ws- Finally, we setup the workspace as a ROS2 workspace using the command:
colcon build- and we source the workspace in order for ROS2 to know its existence:
source install/setup.bashNow we have a ROS2 workspace ready to be used.
- First, navigate to the src folder using
cd src. Once in there, create an HTML file with the following command:
touch web_publisher.html- Then, with the command
code .open the folder with VSCode.
The web page included is a basic HTML page that has a button aligned to the center to control the LED. The button controls a boolean variable which changes value if the mouse hovers over the button. Below we will explain the code.
- First, we need ROS2 to have access to roslibjs and the eventemitter2 (a module in node.js) files. We can install them locally but we can access them through CDN (Content Delivery Network).
Alternatively, for the local installation, we can run the following commands:
npm i eventemitter2
npm i rosliband then change the src value to the local path of the installation.
- Then, we create a basic HTML page with a button:
- We set the button to run the function toggle() on the mouseover event (hover):
- First, we establish a connection with the ROSBridge. We also cover some cases to raise errors or notifications if it fails or disconnects. The localhost port ROSBridge connects to by default is 9090.
- Then, we create a publisher node to publish to a topic (the topic name we choose must be the same topic name the micro-ROS subscriber subscribes to). The syntax ROSLIB allows us to have access to roslibjs.
- Lastly, we define the
toggle()function in order to change the value of the boolean variable. Each time the variable changes, the publisher publishes a message of type Int32 to the topic (1 or 0).
Our publisher page is ready.
Now we can run our publisher. First, we can run it as a local file but it is recommended to always run it on localhost to check if it would work in a real scenario with a server up and running.
- First, run ROSBridge:
ros2 launch rosbridge_server rosbridge_websocket_launch.xmlThe result should be the following:
- Then, if we double-click on our .html file, the browser opens:
and ROSBridge informs us that a client has connected (which means our js app connected to ROS2)
- Now if we trigger the toggle() function by hovering the mouse over the button and check the ROS2 topics, we will see that our publisher has been successfully created.
To run from localhost, we first need to download node.js:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
nvm install 20After that, we install an http server by running:
npm install http-server -gThen, we run ROSBridge as before and lastly, we navigate to the folder of the .html file and run the folowing command:
http-serverThe server and ROSBridge should be like this:
Now, we open our browser and type localhost:8080 on the URL bar:
And by clicking the web_publisher.html link we have:
Also, if we check on the server status and ROSBridge status, we can see that the connection was successful:
