## For instruction on writing tutorials ## http://www.ros.org/wiki/WritingTutorials #################################### ##FILL ME IN #################################### ## for a custom note with links: ## note = ## for the canned note of "This tutorial assumes that you have completed the previous tutorials:" just add the links ## note.0=[[rocon_interactions/Tutorials/indigo/Rviz Interactions|Rviz Interactions]] ## descriptive title for the tutorial ## title = Web App Interactions ## multi-line description to be displayed in search ## description = Defining interactions for web apps. ## the next tutorial description (optional) ## next = ## links to next tutorial (optional) ## next.0.link=[[rocon_interactions/Tutorials/indigo/Android Interactions|Android Interactions]] ## next.1.link= ## what level user is this tutorial for ## level= BeginnerCategory ## keywords = rocon interactions #################################### <> <> == Overview == 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. == Interactions == === Yaml === 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`. {{{#!highlight yaml - name: web_app(http://__WEBSERVER_ADDRESS__/rocon_tools/js/current/listener.html) role: 'Beginners' compatibility: rocon:/*/*/hydro|indigo display_name: Listener description: Simple listener using rosjs in a web app. icon: resource_name: rocon_bubble_icons/rocon.png parameters: rosbridge_address: __ROSBRIDGE_ADDRESS__ rosbridge_port: __ROSBRIDGE_PORT__ remappings: - remap_from: /chatter 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. === Launcher === 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`. {{{#!highlight xml [foo/foo] }}} == Web App == The web app being served by github pages looks like: {{{#!highlight html

Rocon Interactions Listener Demo

Check your Web Console for output (hit F12 in google chrome).

}}} Pretty simple? == Interacting == 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. == Appendix == === Workflow Sketch === A rough sketch of the workflow in initiating a web app via an interaction: {{https://docs.google.com/drawings/d/1Ltk0SY9uPqz36hv780NQiBM9SvtpjclzMY-gGujKGLI/pub?w=822&h=622|Web App Execution|width=100%}} === 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: {{{ http://robotics-in-concert.github.io/rocon_tools/js/current/listener.html?interaction_data=%7B%22remappings%22%3A+%7B%22%2Fchatter%22%3A+%22%2Fbabbler%22%7D%2C+%22display_name%22%3A+%22Listener%22%2C+%22parameters%22%3A+%7B%22rosbridge_address%22%3A+%22localhost%22%2C+%22rosbridge_port%22%3A+8080%7D%7D }}} 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: {{{#!highlight html