rosbrowz v1.11.0

Rosbrowz

This library provides an rviz like interface for the browser with minimal effort.

Typescript bindings are included in the library.

Note:

All distances are in meters and the origin is taken as the center of the canvas stage. To the right is negative x and upwards is negative y.

Installation

Requires: Typescript@^3.1.4

npm install rosbrowz --save

Usage

Initialization

import Rosbrowz from "rosbrowz";

const r2d = new Rosbrowz.R2d({
  container: document.getElementById("rosbrowz-holder")!,
  zoom: true,
  pan: true,
  scale: 15,
  ros: {
    url: "ws://localhost:9090"
  }
});

The parameter ros can either be:

ros: {
  url: <ros-bridge-url>
}

or

ros: new ROSLIB.Ros({
  url: <ros-bridge-url>
})

The second one is useful in case the user wants to use a RosLIB.Ros instance across multiple places.

Creating a background map

const map = await r2d.createMap({
  path: require("../map.png") // or a url,
  info: {
    origin: [-43.6567, -121.957],
    resolution: 0.10000000149
  }
});

r2d.addMap(map);

Creating objects

const circle = r2d.createCircle({
  radius: 1,
  color: "yellow",
  border: 0.2,
  borderColor: "black",
  opacity: 0.9
});

const rectangle = r2d.createRectangle({
  width: 2,
  height: 1,
  color: "yellow",
  border: 0.2,
  borderColor: "black",
  opacity: 1
});

const arrow = r2d.createArrow({
  pointerWidth: 1.5,
  pointerLength: 2,
  color: "yellow",
  border: 0.2,
  borderColor: "black",
  opacity: 1
});

const image = (await r2d.createImageAsync({
  imageURL: require("../forklift.png"),
  height: 3 / 3.5,
  width: 3
})).image;

const polygon = r2d.createPolygon({
  points: [{ x: -10, y: -10 }, { x: -20, y: -10 }, { x: -20, y: -20 }],
  color: "#dc202e",
  opacity: 0.3
});

Note that these objects are floating and just creating them does not mean that they will be rendered in the map. These floating objects are supposed to be used in other contexts like addPose and addStaticObject as below.

Adding a pose

r2d.addPoseWithTopic({
  object: image,
  topic: "/slam/pose"
});

const robot = r2d.addPoseWithUpdater({
  object: image,
  topic: "/slam/pose"
});

...
robot.updatePose(pose);
...

Adding a static object

r2d.addStaticObject({
  object: circle,
  x: -10,
  y: -10,
  rotationInDegClockwise: 90
});

Adding a path

r2d.addPath({
  points: [
    { x: 0, y: 0 },
    { x: -10, y: -10 },
    { x: -15, y: -5 },
    { x: -20, y: -15 },
    { x: -10, y: -20 }
  ],
  width: 0.5,
  color: "red",
  tension: 1
});

Removing objects

Each of addPose, addStaticObject, addPath return an object with a destroy function that can be called to remove them from the canvas.

Example:

const poseController = r2d.addPose({
  object: image,
  topic: "/slam/pose"
});
 
image.destroy();
poseController.destroy();

Intersection in objects

polygon.intersects(image); // boolean;