Home | Action Functions | Listener Functions | UI Components
A JavaScript library for rapid development of ROS connected web interfaces. Presented via research poster and blog post in the University of Lincoln's UROS Exhibition 2019. Used in Onis Brown's block-based visual programming interface for the Collection Museum's robot tour-guide 'Lindsey'.
This library provides custom HTML UI components which interface with JavaScript functions to abstract roslibjs, simplifying publishing and subscribing to topics down to making a one-line function call, or simply writing a HTML tag, for a set of common robot behaviours and data sources. The functions are split into two categories:
- Action functions, which trigger robot behaviours.
- Listener functions, which return data from the robot.
Copy this repository's files into the root of your website, and in the <head> tag of any pages in which you wish to use 'roswebcomponents' paste the following to include this library and its JS and CSS dependencies:
<link rel="stylesheet" href="styles/jquery.spin.css" rel="stylesheet" type="text/css">
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link rel="stylesheet" href="styles/rwc-styles.css">
<link rel="stylesheet" href="styles/rwc-user-styles.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="scripts/jquery.spin.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="scripts/jsQR.js"></script>
<script src="scripts/mobile-detect.min.js"></script>
<script src="scripts/eventemitter2.js"></script>
<script src="scripts/roslib.min.js"></script>
<script src="scripts/rwc.js?v=0.18"></script>You must be running ROS (Robot Operating System) and rosbridge on your robot, and must change the value of rosbridge_websocket_url in rwc-config.json to the URL of your rosbridge websocket, e.g. "ws://localhost:9090" (shown in the output from the commmand roslaunch rosbridge_server rosbridge_websocket.launch, as in this tutorial). Pages which run rwc.js or rwc-receiver.js will continously refresh, and interactive components will be disabled until they are connected to a rosbridge websocket.
If you wish to run an interactive UI on one device and mirror the appearance and state of this interface on other secondary devices without allowing these secondary devices to interact with the interface, simply connect the internet browser of any secondary devices to the page rwc-receiver.html, while the main interface is running on the primary device.
The rwcListenerGetCameraSnapshot and rwcListenerGetQRCode functions, detailed in Listener Functions, require that web_video_server is installed and running on your robot, and that you change the value of camera_snapshot.uri in rwc-config.json to the snapshot url provided by web_video_server, e.g. "http://localhost:8080/snapshot?topic=/head_xtion/rgb/image_color".
Functions which get and manipulate the percentage audio volume on the robot require that audio-volume is installed and running on your robot. See the package's repo for instructions on installing and running it.
Lastly, the rosbridge_websocket URL, names and actions of action servers, and names and message types of topics used by the library's action and listener web components can all be configured in rwc-config.json. See the default configuration for examples. This configuration file can also be used to create custom definitions of actions and listeners to be used by the library's action and listener components, more on that in UI components.
If you are using this library with the University of Lincoln's robot tour-guide Lindsey at The Collection museum, there are functions implemented in this library to interface with a number of Lindsey's behaviours. To make use of these, you must create a symbolic link in your website's root directory to lindimp/lindimp_museum_content/config/exhibitors_definition.json, which the library uses for information about the museum's tours and exhibits.