Note: This tutorial assumes that you have completed the previous tutorials: Rviz Interactions.
(!) Please ask about problems and questions regarding this tutorial on Don't forget to include in your question the link to this page, the versions of your OS & ROS, and also add appropriate tags.

Web App Interactions

Description: Defining interactions for web apps.

Keywords: rocon interactions

Tutorial Level: BEGINNER

Next Tutorial: Android Interactions


This tutorial will guide you through the process of running and launching ros web apps. This has a really strong advantage in that it provides a systematic way of getting parameters, remappings and rosbridge info to the web app itself.



The interaction yaml is relatively straightforward with the only new feature the addition of the ROSBRIDGE_ADRESS , ROSBRIDGE_PORT and WEBSERVER_ADDRESS symbols. The interaction node will substitute these with the real values of the rosbridge uri and webapp hosting server upon loading them. We'll also make use of the existing web app being served from the rocon tools github pages.

Save this as foo.interactions in foo.

   1 - name: web_app(http://__WEBSERVER_ADDRESS__/rocon_tools/js/current/listener.html)
   2   role: 'Beginners'
   3   compatibility: rocon:/*/*/hydro|indigo
   4   display_name: Listener
   5   description: Simple listener using rosjs in a web app.
   6   icon:
   7     resource_name: rocon_bubble_icons/rocon.png
   8   parameters:
   9     rosbridge_address: __ROSBRIDGE_ADDRESS__
  10     rosbridge_port: __ROSBRIDGE_PORT__
  11   remappings:
  12     - remap_from: /chatter
  13       remap_to: /babbler

Note that your web app doesn't have to be served in a location connected to your ros master network. However your remocon (qt or android) must be in a position to connect to the final rosbridge uri socket.


The launcher is as before with the addition of both the rosbridge server, rosbridge params and a talker for the listener web app to interact with.

Save this as foo.launch in foo.

   1 <launch>
   2   <arg name="rosbridge_address" default="localhost"/>
   3   <arg name="rosbridge_port" default="8080"/>
   4   <arg name="webserver_address" default=""/>
   6   <param name="name" value="Rocon Web App Interactions"/>
   7   <param name="description" value="A tutorial environment for web app interactions (using rosbridge)) and remocons."/>
   8   <param name="icon" value="rocon_icons/cybernetic_pirate.png"/>
   9   <node pkg="rocon_master_info" type="" name="master"/>
  11   <node pkg="rocon_interactions" type="" name="interactions">
  12     <rosparam param="interactions">[foo/foo]</rosparam>
  13     <param name="rosbridge_address" value="$(arg rosbridge_address)"/>
  14     <param name="rosbridge_port" value="$(arg rosbridge_port)"/>
  15     <param name="webserver_address" value="$(arg webserver_address)"/>
  16   </node>
  18   <include file="$(find rosbridge_server)/launch/rosbridge_websocket.launch" >
  19      <arg name="address" value="$(arg rosbridge_address)"/>
  20      <arg name="port" value="$(arg rosbridge_port)"/>
  21   </include>
  23   <node pkg="roscpp_tutorials" type="talker" name="talker">
  24     <remap from="chatter" to="babbler"/>
  25   </node>
  26 </launch>

Web App

The web app being served by github pages looks like:

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8" />
   6 <script type="text/javascript" src=""></script>
   7 <script type="text/javascript" src=""></script>
   8 <script type="text/javascript" src=""></script>
   9 <script type="text/javascript" type="text/javascript">
  11   console.log("Display Name : " + rocon_interactions.display_name)
  12   console.log("Rosbridge URI: " + rocon_interactions.rosbridge_uri)
  13   console.log("Parameters   : " + JSON.stringify(rocon_interactions.parameters))
  14   console.log("Remappings   : " + JSON.stringify(rocon_interactions.remappings))
  16   // Connecting to ROS
  17   // -----------------
  18   var ros = new ROSLIB.Ros({
  19     url : rocon_interactions.rosbridge_uri
  20     //url : 'ws://localhost:8080'
  21   });
  23   // Subscribing to a Topic
  24   // ----------------------
  25   var topic_name = '/chatter'
  26   if (topic_name in rocon_interactions.remappings)
  27     topic_name = rocon_interactions.remappings[topic_name]
  28   var listener = new ROSLIB.Topic({
  29     ros : ros,
  30     name : topic_name,
  31     messageType : 'std_msgs/String'
  32   });
  34   listener.subscribe(function(message) {
  35     console.log('Received message on ' + + ': ' +;
  36     listener.unsubscribe();
  37   });
  38 </script>
  39 </head>
  41 <body>
  42   <h1>Rocon Interactions Listener Demo</h1>
  43   <p>Check your Web Console for output (hit F12 in google chrome).</p>
  44 </body>
  45 </html>

Pretty simple?


Make sure you have google chrome supported (we haven't extended support to other browsers yet).

# Dependencies
> sudo apt-get install ros-indigo-rosbridge-suite ros-indigo-rosauth ros-indigo-roscpp-tutorials
# In the first shell
> roslaunch foo foo.launch --screen
# In a second shell
> rocon_remocon

Add your ros master, connect, choose the 'Beginners' role and finally fire up the 'Listener'. If you're in google, hit F12 and select the dev console, you will see output from the websocket appearing there.


Workflow Sketch

A rough sketch of the workflow in initiating a web app via an interaction:

Web App Execution

Interactions Javascript Module

When the web app is launched by a remocon, it loads interactions data (display name, parameters and remappings) into the query string so that you might get a url looking like the bewildering obtuse:

If that seems like alot to parse, yes it is! Which is exactly why we've written some js magic to help you extract those variables. Simply include the interactions.js script served by github pages and access the rocon_interactions singleton object. In particular, the following lines:

   1 <script type="text/javascript" src=""></script>
   2 <script type="text/javascript" type="text/javascript">
   3   console.log("Display Name : " + rocon_interactions.display_name)
   4   console.log("Rosbridge URI: " + rocon_interactions.rosbridge_uri)
   5   console.log("Parameters   : " + JSON.stringify(rocon_interactions.parameters))
   6   console.log("Remappings   : " + JSON.stringify(rocon_interactions.remappings))

Wiki: rocon_interactions/Tutorials/indigo/Web App Interactions (last edited 2015-05-11 07:30:18 by jihoonl)