####################################
##FILL ME IN
####################################
## note =
## note.0=
## for the canned note of "This tutorial assumes that you have completed the
## previous tutorials:" just add the links
## note.0.link= http://www.ros.org/wiki/ros3djs/Tutorials
## descriptive title for the tutorial
## title = Using JointStatePublisher in the Browser
## multi-line description to be displayed in search
## description = Replicate the functionality of [[joint_state_publisher]] in the browser.
## what level user is this tutorial for
## level= IntermediateCategory
## keywords = ros3djs, web interface, javascript, JointState, Robot Web Tools
####################################
<<IncludeCSTemplate(TutorialCSHeaderTemplate)>>
{{attachment:jsp_big.png|pr2 jsp demo|width=700}}
<<TableOfContents(4)>>
== Basics ==
This tutorial assumes you have already completed the [[ros3djs/Tutorials/VisualizingAURDF|Visualizing a URDF]] tutorial, in which you were able to visualize a robot in the browser by using [[robot_state_publisher]] and [[joint_state_publisher]] on the server side.
In this tutorial, we will move the GUI component of [[joint_state_publisher]] to the browser as well.
=== Editing your HTML ===
Assuming you already have an HTML file that can visualize your URDF, adding the joint state publisher is easy.
First, you need to include the proper headers, which means adding
{{{
#!cplusplus block=html_example
<script src="http://cdn.robotwebtools.org/jointstatepublisherjs/current/jointstatepublisher.min.js"></script>
}}}
Second, you need to create the element where the sliders will appear. I like the sliders to appear to the right of the urdf visualization, so this is the HTML I use.
{{{
#!cplusplus block=html_example
<body onload="init()">
<div id="sliders" style="float: right"></div>
<div id="urdf"></div>
</body>
}}}
Then in your init function, you need to create the actual JSP object. Be sure to use the matching divID for the HTML you created in the last step.
{{{
#!cplusplus block=javascript
var jsp = new JOINTSTATEPUBLISHER.JointStatePublisher({
ros : ros,
divID : 'sliders'
});
}}}
=== Launching the Demo ===
Finally, to get this to run, you need to run a launch script on the server side. There are two approaches.
==== Approach 1 ====
Upload your launch file to the parameter server, and then launch `roslaunch joint_state_publisher_js core.launch` which will then start up the rosbridge_server, tf2_web_republisher, the robot_state_publisher, and a server-side joint_state_publisher.
==== Approach 2 ====
You can also just launch `roslaunch joint_state_publisher_js run_with_xacro.launch model:=/path/to/xacro/or/urdf` which does all of the above, but loads the urdf/xacro into the parameter server for you.