<title>Robot Web Tools</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800" rel="stylesheet" type="text/css" />

<link href="css/normalize.css" rel="stylesheet" type="text/css" />

<link href="css/style.css" rel="stylesheet" type="text/css" />

<script src="https://cdn.usefathom.com/script.js" data-site="TDGRRMTA" defer></script>

<div class="ros-background-color">

<div class="content-wrapper">

<div class="main-nav">

<a href="https://github.com/robotWebTools/community" target="_blank">

<img src="images/github-corner-right.svg" class="github-corner" />

</a>

<span class="title">Robot Web Tools</span>

<span>

<ul class="menu">

<li><a href="#libraries">Libraries</a></li>

<li><a href="#tools">Tools</a></li>

<li><a href="#ros-nodes">Ros Nodes</a></li>

</ul>

</span>

</div>

<div class="masthead">

Open-source libraries and tools for building web-based robot apps with <a

href="https://ros.org/" target="_blank">ROS</a>.

</div>

</div>

</div>

<div class="content-wrapper">

<div>

<a name="libraries"></a>

<div class="section">

<div class="section-header">

Libraries

</div>

<div class="section-content">

<a href="https://github.com/RobotWebTools/rclnodejs" target="_blank">

<div class="card">

<div class="card-image card-image-border"><img src="images/libraries/rclnodejs.png"></div>

<div class="card-name">rclnodejs</div>

<div class="card-description">Node.js client library for the ROS 2</div>

</div>

</a>

<a href="https://github.com/RobotWebTools/roslibjs" target="_blank">

<div class="card">

<div class="card-image"><img src="images/libraries/roslibjs.jpg"></div>

<div class="card-name">roslibjs</div>

<div class="card-description">ROS Javascript Library</div>

</div>

</a>

<a href="https://github.com/RobotWebTools/ros2djs" target="_blank">

<div class="card">

<div class="card-image"><img src="images/libraries/ros2djs.jpg"></div>

<div class="card-name">ros2djs</div>

<div class="card-description">2d visualization library for use with the ros javascript libraries</div>

</div>

</a>

<a href="https://github.com/RobotWebTools/ros3djs" target="_blank">

<div class="card">

<div class="card-image"><img src="images/libraries/ros3djs.jpg"></div>

<div class="card-name">ros3djs</div>

<div class="card-description">3d visualization library for use with the ros javascript libraries</div>

</div>

</a>

<a href="https://github.com/cruise-automation/rosbag.js" target="_blank">

<div class="card">

<div class="card-image"><img src="images/libraries/rosbagjs.png"></div>

<div class="card-name">rosbag.js</div>

<div class="card-description">Read bag files in javascript</div>

</div>

</a>

<a href="https://webviz.io/worldview" target="_blank">

<div class="card">

<div class="card-image"><img src="images/libraries/worldview.png"></div>

<div class="card-name">worldview</div>

<div class="card-description">2d and 3d scene renderer built with react and webgl</div>

</div>

</a>

<a href="https://github.com/RethinkRobotics-opensource/rosnodejs" target="_blank">

<div class="card">

<div class="card-image card-image-border"><img src="images/libraries/rosnodejs.png"></div>

<div class="card-name">rosnodejs</div>

<div class="card-description">Native Node.js ROS1 client implementation</div>

</div>

</a>

<a href="https://transitiverobotics.com" target="_blank">

<div class="card">

<div class="card-image"><img src="images/libraries/transitive.svg"></div>

<div class="card-name">Transitive</div>

<div class="card-description">A framework for building robot web portal</div>

</div>

</a>

</div>

</div>

<a name="tools"></a>

<div class="section">

<div class="section-header">

Tools

</div>

<div class="section-content">

<a href="https://foxglove.dev/studio" target="_blank">

<div class="card">

<div class="card-image"><img src="images/tools/foxglove-studio.png"></div>

<div class="card-name">Foxglove Studio</div>

<div class="card-description">Visualization and debugging tool for live or recorded data</div>

</div>

</a>

<a href="https://github.com/gaug-cns/ros-control-center" target="_blank">

<div class="card">

<div class="card-image"><img src="images/tools/ros-control-center.jpg"></div>

<div class="card-name">ROS Control Center</div>

<div class="card-description">Control center for ros robots</div>

</div>

</a>

<a href="https://github.com/EESC-LabRoM/rosweb" target="_blank">

<div class="card">

<div class="card-image"><img src="images/tools/rosweb.png"></div>

<div class="card-name">ROSweb</div>

<div class="card-description">Supervisory system for ROS</div>

</div>

</a>

<a href="https://github.com/dheera/rosboard" target="_blank">

<div class="card">

<div class="card-image"><img src="images/packages/rosboard.jpg"></div>

<div class="card-name">ROSboard</div>

<div class="card-description">turn your robot into a web server to visualize ROS topics</div>

</div>

</a>

</div>

</div>

<a name="ros-nodes"></a>

<div class="section">

<div class="section-header">

Nodes

</div>

<div class="section-content">

<a href="https://github.com/RobotWebTools/rosbridge_suite" target="_blank">

<div class="card">

<div class="card-image"><img src="images/packages/rosbridge.jpg"></div>

<div class="card-name">rosbridge</div>

<div class="card-description">websocket interface to ROS systems</div>

</div>

</a>

<a href="https://github.com/tork-a/visualization_rwt" target="_blank">

<div class="card">

<div class="card-image"><img src="images/packages/visualization_rwt.png"></div>

<div class="card-name">visualization rwt</div>

<div class="card-description">suite of nodes for web based robot visualization</div>

</div>

</a>

<a href="https://github.com/RobotWebTools/webrtc_ros" target="_blank">

<div class="card">

<div class="card-image card-image-border"><img src="images/packages/webrtc_ros.png"></div>

<div class="card-name">Webrtc ROS</div>

<div class="card-description">Streaming of ROS Image Topics using WebRTC</div>

</div>

</a>

</div>

</div>

</div>

</div>

<div class="footer"></div>