[Documentation] [TitleIndex] [WordIndex


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

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

Other Notes

Road Map






                       {'str': command},
                         document.getElementById('displaybox') , res.str);


<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);

2024-07-13 14:40