Skip to main content
Version: QTrobot V2

Using QTrobot with JavaScript

 Level:  Intermediate
 Goal:  learn how to access QTrobot interfaces such as speech, emotion, gesture, etc. in JavaScript and HTML
 Requirements:  Code:  view source

In this tutorial we will learn about how to access QTrobot interfaces such as speech and audio interface from a JavaScript code. There are different scenarios in which you may need to access ROS topics and services from a web browser-based application. In this tutorial we will show you how to setup Rosbridge to communicate with other ROS nodes in JavaScript. We also explain how easily you can access QTrobot interfaces such as speech and motor control from HTML using JavaScript.

Our JavaScript code will communicates with QTrobot via Rosbridge suite. Rosbridge is a meta package which connect ROS nodes to the applications outside ROS networks by providing JSON APIs to ROS functionality. There are a variety of front ends that interface with Rosbridge , including a WebSocket server for web browsers (i.e. rosbridge_server). However, for the sake of simplicity and to facilitate code development, we have developed the qtrobot.js SDK for QTrobot. It is a wrapper over roslibjs which facilitate establishing connection with QTrobot rosbridge and expose simple APIs to interact with the robot.

Setting up rosbridge_server for QTrobot

In most cases, a rosbridge_server is already running on your QTrobot. However, for many recent versions of the QTrobot, the rosbridge_server is configured with SSL and dedicated authentication mechanism. However, for the sake of the simplicity, we configure and launch a new instance of the rosbridge_server on QTPC.

Open a terminal on QTPC and install the rosbridge-suite package:

sudo apt install ros-`rosversion -d`-rosbridge-suite

To avoid conflict with any running Rosbridge, we create a new launch file and overwrite some parameters. Create a launch file in QTPC home folder (~/rosbridge_websocket_qtpc.launch) with the following content:

<include ns="qtpc" file="$(find rosbridge_server)/launch/rosbridge_websocket.launch">
<arg name="port" value="9091" />

Launch the rosbridge_websocket_qtpc.launch and check the setup:

roslaunch ~/rosbridge_websocket_qtpc.launch

You should see similar messages printed out as the following output after launching our instance of Rosbridge:

2021-08-26 16:05:06+0200 [-] [INFO] [1629986706.721006]: Rosbridge WebSocket server started at ws://

Download qtrobot.js and its dependencies

To keep our code clean, lets create some folders and download the required js files:

mkdir -p ~/tutorial_qt_jscript/js
cd ~/tutorial_qt_jscript/js

Write a simple code using qtrobot.js

Now we have our qtrobot.js in place, lets write a simple code to communicate with QTrobot interfaces. Create a html file (index.html) in our project directory:

touch ~/tutorial_qt_jscript/index.html

and add the following content:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<script src="js/roslib.min.js"></script>
<script src="js/eventemitter2.min.js"></script>
<script src="js/qtrobot-1.0.min.js"></script>

var url = prompt("Please enter QTrobot rosbridge url:", "ws://");
url = (url == null) ? 'ws://' : url;
var qtrobot = null;
document.addEventListener('DOMContentLoaded', function () {
console.log("connecting to QTrobot (please wait...)");
qtrobot = new QTrobot({
url : url,
connection: function(){
console.log("connected to " + url);
qtrobot.talk_text('Hello! my name is QT!', function(){
error: function(error){
close: function(){
}); //end of qtrobot

}); // end of DOMContentLoaded

<p style="text-align: center;"> Open your browser console to see the output!</p>

Before running the code, let's take a look at what we have wrote. We created an html file and added our JavaScript code to be executed on html document onload event. Our JavaScript code first asks us to enter the URL of our Rosbridge instance. Because we are running it on QTPC, we can confirm its default value which is ws:// Notice that is the IP of QTPC and '9091' is the port number which we had already set it up for Rosbridge in our launch file.

Then we created an instance of ‘QTrobot’ object with the correct URL of our rosbridge websocket server. The QTrobot instance connects to the given URL and upon success the ‘connection’ callback is called. The qtrobot.js library automatically tries to reconnect to the server if for any reason the connection goes down. After connecting to the QTrobot rosbridge_server, we called talk_text method which asks QTrobot to say "Hello!...". After QTrobot finishes playing our message, it shows the happy emotion. This is because we called show_emotion method in the callback of talk_text method. Thus, the show_emotion method will be executed after finishing the talk_text method.

Run and check the code

To run our code, simply open the index.html file in a browser on QTPC. You should hear that QTrobot says "Hello!..." and then shows the happy face. To see the output of log messages in console, open the browser console.

  • In Google chrome you can press CTRL+SHIFT+C to open the developer console and navigate to console message window.
  • In Firefox, simply right-click on the browser content and choose Inspect or press Q. Then navigate to console message window.

You can find more complex examples (e.g. using Vue.js) on QTrobot JavaScript repository.