## repository: https://code.ros.org/svn/wg-ros-pkg
<<PackageHeader(webui)>>

== Stability ==

This package is for internal use only.

== Installing the WebUI ==

On a PR2, all of the required components should already be installed.

If you're doing web application development on your own machine, follow these instructions to install the necessary components.

=== Installing necessary components ===
 * You will need the web_interface stack, which exists in the binaries. `ros-RELEASE-web-interface`
 * `python-clearsilver` is needed, but exists in the [[pyclearsilver]] package.
 * A web server of some sort is needed. You can configure your own, but this tutorial assumes you're using apache. The specific recommended version is `apache2-mpm-prefork`
 * If you do use apache, you'll need `libapache2-mod-python`
 * You might need `ruby1.8-dev`. Isn't that vague? 

=== Installing the Webui ===
Since the web interface interacts with components outside of ROS-land, there are a few additional configuration steps you need to complete. 

You will need to use and create several files in the webui directory. The scripts you are about to run also rely on variables in your environment. However, if you are installing from binary, you cannot create files in this directory by default, and running the commands as sudo will not correctly use your environment variables. 

Ergo, the easiest way to install the webui from the binary is to `chown` the webui directory. 

{{{
roscd webui
make -f setup.make
sudo ./install.py <robot name> <robot type> www-data
}}}
... where <robot name> would usually be of the form prX and <robot type> would usually be pr2.

Create the databases in /var/ros/db:
{{{
sudo ./install_root
}}}

Add the following line to /etc/apache2/sites-available/default just above </VirtualHost> near the end of the file:

{{{
Include /etc/ros/ros_webui_apache.cfg
}}}

Create a default home page that redirects to the web UI:

{{{
sudo cp varwww/index.html /var/www/index.html
}}}

=== Restart Apache ===
{{{
sudo apache2ctl restart
}}}

== Using the WebUI ==
 * Rosweb is the bridge between ROS and the javascript in the interface, so you need to run rosweb.py
 * Similarly, the launchman package bridges between the javascript and roslaunch, so run launchman.py
 * The interface also expects some files to be in `/etc/ros/env` where each filename refers to a common variable, and the contents are the value. Some key filenames:
   * `ROBOT`
   * `ROBOT_NAME`
   * `ROS_ROOT`
   * `ROS_MASTER_URI`
   * `ROS_PACKAGE_PATH`

= Other Notes =

== Road Map ==
 * /RoadMap

== API ==
=== ros.js: ===
 * gPump - the message pump
 * gPump.service_call(service_name, arglist)
 * initiate a service call
 * gPump.publish(topic, topic_type, parameterList)
 * publish a message of type topic_type

 * ros_handleOnLoad(prefix)
 * e.g. ros_handleOnLoad('/ros')

=== Topic ===
{{{
    gPump.publish("/hoge","std_msgs/String",["hoga"]);
}}}
=== ServiceCall ===
{{{
    gPump.service_call2("/service/knowrob",
                       {'str': command},
                       function(res){
                         document.getElementById('displaybox') , res.str);
                       }
                       );
}}}
=== widgets ===
{{{
<div class="nav_element" objtype=PercentTextWidget topic="/power_state" num="a" div="b"/></div>
}}}
{{{
var PercentTextWidget = Class.create({
  initialize: function(domobj) {
    this.pump = null;
    this.domobj = domobj;
    this.topics = [domobj.getAttribute("topic")];
    this.numerator = domobj.getAttribute("num");
    this.denominator = domobj.getAttribute("den");
  }, 

  init: function() {
  }, 

  receive: function(topic, msg) {
    if(msg[this.numerator] != null) {
      var percent = parseFloat(msg[this.numerator]) / parseFloat(msg[this.denominator]);
      this.domobj.innerHTML = (100. * percent).toFixed(2) + "%";
    }
  } 
});

gRosClasses["PercentTextWidget"] = function(dom){
  return new PercentTextWidget(dom);
}
}}}