Using QTrobot with JavaScript
Goal: learn how to access QTrobot interfaces such as speech, emotion, gesture, etc. in JavaScript and HTML
Requirements:
- Quick start with coding on QTrobot
- Good knowledge of JavaScript and HTML
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:
<launch>
<include ns="qtpc" file="$(find rosbridge_server)/launch/rosbridge_websocket.launch">
<arg name="port" value="9091" />
</include>
</launch>
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://0.0.0.0:9091
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
wget https://raw.githubusercontent.com/luxai-qtrobot/software/master/sdk/jscript/qtrobot-1.0.min.js
wget https://raw.githubusercontent.com/luxai-qtrobot/software/master/sdk/jscript/roslib.min.js
wget https://raw.githubusercontent.com/luxai-qtrobot/software/master/sdk/jscript/eventemitter2.min.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">
<head>
<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>
</head>
<body>
<script>
var url = prompt("Please enter QTrobot rosbridge url:", "ws://192.168.100.2:9091");
url = (url == null) ? 'ws://127.0.0.1:9091' : 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(){
qtrobot.show_emotion('QT/happy');
});
},
error: function(error){
console.log(error);
},
close: function(){
console.log("disconnected.");
}
}); //end of qtrobot
}); // end of DOMContentLoaded
</script>
<p style="text-align: center;"> Open your browser console to see the output!</p>
</body>
</html>
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://192.168.100.2:9091. Notice that 192.168.100.2 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+Cto 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.