rosbrowz
v1.11.0
Published
A visualization library for robotics (ros) in the browser.
Downloads
5
Maintainers
Readme
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;