Blog #9 — Web Interfaces ROS

Conclusions:

There are multiple ways to create an interface for robotics, like web applications or tools such as Gazebo and RViz. The choice depends on the use case. A web app is useful for cross-platform, remote operation.

Challenges:

One challenge is the limitation of libraries. For example, ros3djs only supports an older version of three.js (0.89.0), limiting 3D visualization realism. Another challenge is working with ROS2, which requires Ubuntu. I had to install a virtual machine and call ROS events using the Linux Shell. Personally, I found this setup quite difficult and frustrating at times, but it was a valuable learning experience.

My attempt is guided by a course and I can describe the early steps as such:

let service = new ROSLIB.Service({
  ros : ros,
  name : '/robot_description' // name of the service,
  serviceType : 'rossrv/Type',
})

service.callService(request, function(response) {
  console.log('Service response:', response);
});

Calling a ROS Service - ROS services enable nodes to send requests and receive responses. I'm trying to call a service from my JavaScript code using roslib.js. To connect ROS and the web, I need a ROS-bridge address, an endpoint that facilitates communication between ROS and non-ROS systems. Here's an e

xample of defining essential service identifiers in JavaScript: let listener = new ROSLIB.Topic({   ros: ros,   name: '/sensor_data',   messageType: 'sensor_msgs/' }); listener.subscribe(function(message) {   console.log('Received message:', message);   updateUI(message); });

Retrieving Data from ROS and Displaying it on Web

Integrating ROS with JavaScript is essential for interactive web interfaces. A common use case is retrieving data from ROS and displaying it in real-time on a web page.

To display retrieved data on the web, I created a simple interface using HTML, CSS, and JavaScript. This includes text data from sensors and a 3D mesh showing the robot's position and environment using the ros3djs library.