Downloading and adding ros rviz to a page

Downloading

Install Node.js if you do not already have it.

To use <ros-rviz>, you need to download it and its dependencies. We recommend using bower to do so.

To install bower:

npm install -g bower

Initialize bower. This creates a bower.json file:

cd my_project
bower init
# Answer questions (answers are mostly unimportant)

Next, add <ros-rviz> to bower.json:

bower install --save jstnhuang/ros-rviz

This should download <ros-rviz> and other web components it depends on to the bower_components/ folder. In the future, running bower update will update elements in accordance with the bower.json, even if you delete the bower_components/ folder.

<ros-rviz> has many dependencies, which can lead to a lot of HTTP requests when the page loads. This results in slow loading performance. To fix this, it's recommended that you use a build tool to concatenate all the files into a single file. Alternatively, you can use HTTP/2 push if your server supports it. How to do this is out of the scope of this user guide.

Adding <ros-rviz> to the page

If you are using Polymer, refer to the demo page. If you are using Angular 2, Vue, or any framework that scores full points on Custom Elements Everywhere, you can similarly use your framework's data binding syntax.

Otherwise, follow the demo with no data binding example.

User guide

Continue to the User guide.