Skip to content

Copy over web_visualization tutorial from Dome #600

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions fortress/web_visualization.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
# Overview

Web visualization supports rendering and interacting with running Ignition
Gazebo simulations. You may find web visualization useful
when interacting with remote or headless Gazebo Sim simulations. No
additionally dependencies, other than a browser and internet connection, are
required.

## How to use web visualization

The following steps will guide you through the process of running Ignition
Gazebo with a websocket server and connecting to the websocket for
visualization.

1. Start an Gazebo Sim instance as usual. We will use the `fuel.sdf`
world and run it headless.
```
ign gazebo -v 4 -s -r fuel.sdf
```

1. Create an Ignition Launch file with the websocket server plugin.
```
echo "<?xml version='1.0'?>
<ignition version='1.0'>
<plugin name='ignition::launch::WebsocketServer'
filename='ignition-launch-websocket-server'>
<port>9002</port>
</plugin>
</ignition>" > websocket.ign
```

1. Run the websocket server using
```
ign launch -v 4 websocket.ign
```

1. Visualize the simulation by going to
[https://app.gazebosim.org/visualization](https://app.gazebosim.org/visualization) and pressing the Connect button.

1. It may take a few seconds for the scene to load. Your browser needs to
fetch all of the models in the world.

## Websocket server customization

The following parameters are available in the websocket server plugin.

* `<admin_authorization_key>` : If this is set, then a connection must provide the matching key using an "auth" call on the websocket. If the `<authorization_key>` is set, then the connection can provide that key.
* `<authorization_key>` : If this is set, then a connection must provide the
matching key using an "auth" call on the websocket. If the `<admin_authorization_key>` is set, then the connection can provide that key.
* `<max_connections>` : An integer that is the maximum number of simultaneous connections.
* `<port>` : An integer that is websocket port.
* `<publication_hz>` : An integer that is the maximum publication hertz rate.

## Code and Support

1. The code for the web application,
[app.gazebosim.org](https://app.gazebosim.org), lives at
[https://gitlab.com/ignitionrobotics/web/app](https://gitlab.com/ignitionrobotics/web/app).

1. The javascript library used to render the 3D scene lives at
[https://gitlab.com/ignitionrobotics/web/gz3d](https://gitlab.com/ignitionrobotics/web/gz3d).

1. Is you notice an issue with web visualization, then please
file a ticket at
[https://github.com/gazebo-web/gzweb/issues](https://github.com/gazebo-web/gzweb/issues).

## Troubleshooting

1. If you are running Gazebo Sim in a docker container, make sure to
use the [--network host](https://docs.docker.com/network/network-tutorial-host/) Docker commandline option. Without `--network host` the web application won't be able to connect to the websocket server.
70 changes: 70 additions & 0 deletions garden/web_visualization.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
# Overview

Web visualization supports rendering and interacting with running
Gazebo simulations. You may find web visualization useful
when interacting with remote or headless Gazebo Sim simulations. No
additionally dependencies, other than a browser and internet connection, are
required.

## How to use web visualization

The following steps will guide you through the process of running
Gazebo with a websocket server and connecting to the websocket for
visualization.

1. Start an Gazebo Sim instance as usual. We will use the `fuel.sdf`
world and run it headless.
```
gz sim -v 4 -s -r fuel.sdf
```

1. Create an Gazebo Launch file with the websocket server plugin.
```
echo "<?xml version='1.0'?>
<gz version='1.0'>
<plugin name='gz::launch::WebsocketServer'
filename='gz-launch-websocket-server'>
<port>9002</port>
</plugin>
</gz>" > websocket.gzlaunch
```

1. Run the websocket server using
```
gz launch -v 4 websocket.gzlaunch
```

1. Visualize the simulation by going to
[https://app.gazebosim.org/visualization](https://app.gazebosim.org/visualization) and pressing the Connect button.

1. It may take a few seconds for the scene to load. Your browser needs to
fetch all of the models in the world.

## Websocket server customization

The following parameters are available in the websocket server plugin.

* `<admin_authorization_key>` : If this is set, then a connection must provide the matching key using an "auth" call on the websocket. If the `<authorization_key>` is set, then the connection can provide that key.
* `<authorization_key>` : If this is set, then a connection must provide the
matching key using an "auth" call on the websocket. If the `<admin_authorization_key>` is set, then the connection can provide that key.
* `<max_connections>` : An integer that is the maximum number of simultaneous connections.
* `<port>` : An integer that is websocket port.
* `<publication_hz>` : An integer that is the maximum publication hertz rate.

## Code and Support

1. The code for the web application,
[app.gazebosim.org](https://app.gazebosim.org), lives at
[https://github.com/gazebo-web/gazebosim-app](https://github.com/gazebo-web/gazebosim-app).

1. The javascript library used to render the 3D scene lives at
[https://github.com/gazebo-web/gzweb](https://github.com/gazebo-web/gzweb).

1. Is you notice an issue with web visualization, then please
file a ticket at
[https://github.com/gazebo-web/gzweb/issues](https://github.com/gazebo-web/gzweb/issues).

## Troubleshooting

1. If you are running Gazebo Sim in a docker container, make sure to
use the [--network host](https://docs.docker.com/network/network-tutorial-host/) Docker commandline option. Without `--network host` the web application won't be able to connect to the websocket server.
70 changes: 70 additions & 0 deletions harmonic/web_visualization.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
# Overview

Web visualization supports rendering and interacting with running
Gazebo simulations. You may find web visualization useful
when interacting with remote or headless Gazebo Sim simulations. No
additionally dependencies, other than a browser and internet connection, are
required.

## How to use web visualization

The following steps will guide you through the process of running
Gazebo with a websocket server and connecting to the websocket for
visualization.

1. Start an Gazebo Sim instance as usual. We will use the `fuel.sdf`
world and run it headless.
```
gz sim -v 4 -s -r fuel.sdf
```

1. Create an Gazebo Launch file with the websocket server plugin.
```
echo "<?xml version='1.0'?>
<gz version='1.0'>
<plugin name='gz::launch::WebsocketServer'
filename='gz-launch-websocket-server'>
<port>9002</port>
</plugin>
</gz>" > websocket.gzlaunch
```

1. Run the websocket server using
```
gz launch -v 4 websocket.gzlaunch
```

1. Visualize the simulation by going to
[https://app.gazebosim.org/visualization](https://app.gazebosim.org/visualization) and pressing the Connect button.

1. It may take a few seconds for the scene to load. Your browser needs to
fetch all of the models in the world.

## Websocket server customization

The following parameters are available in the websocket server plugin.

* `<admin_authorization_key>` : If this is set, then a connection must provide the matching key using an "auth" call on the websocket. If the `<authorization_key>` is set, then the connection can provide that key.
* `<authorization_key>` : If this is set, then a connection must provide the
matching key using an "auth" call on the websocket. If the `<admin_authorization_key>` is set, then the connection can provide that key.
* `<max_connections>` : An integer that is the maximum number of simultaneous connections.
* `<port>` : An integer that is websocket port.
* `<publication_hz>` : An integer that is the maximum publication hertz rate.

## Code and Support

1. The code for the web application,
[app.gazebosim.org](https://app.gazebosim.org), lives at
[https://github.com/gazebo-web/gazebosim-app](https://github.com/gazebo-web/gazebosim-app).

1. The javascript library used to render the 3D scene lives at
[https://github.com/gazebo-web/gzweb](https://github.com/gazebo-web/gzweb).

1. Is you notice an issue with web visualization, then please
file a ticket at
[https://github.com/gazebo-web/gzweb/issues](https://github.com/gazebo-web/gzweb/issues).

## Troubleshooting

1. If you are running Gazebo Sim in a docker container, make sure to
use the [--network host](https://docs.docker.com/network/network-tutorial-host/) Docker commandline option. Without `--network host` the web application won't be able to connect to the websocket server.
70 changes: 70 additions & 0 deletions ionic/web_visualization.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
# Overview

Web visualization supports rendering and interacting with running
Gazebo simulations. You may find web visualization useful
when interacting with remote or headless Gazebo Sim simulations. No
additionally dependencies, other than a browser and internet connection, are
required.

## How to use web visualization

The following steps will guide you through the process of running
Gazebo with a websocket server and connecting to the websocket for
visualization.

1. Start an Gazebo Sim instance as usual. We will use the `fuel.sdf`
world and run it headless.
```
gz sim -v 4 -s -r fuel.sdf
```

1. Create an Gazebo Launch file with the websocket server plugin.
```
echo "<?xml version='1.0'?>
<gz version='1.0'>
<plugin name='gz::launch::WebsocketServer'
filename='gz-launch-websocket-server'>
<port>9002</port>
</plugin>
</gz>" > websocket.gzlaunch
```

1. Run the websocket server using
```
gz launch -v 4 websocket.gzlaunch
```

1. Visualize the simulation by going to
[https://app.gazebosim.org/visualization](https://app.gazebosim.org/visualization) and pressing the Connect button.

1. It may take a few seconds for the scene to load. Your browser needs to
fetch all of the models in the world.

## Websocket server customization

The following parameters are available in the websocket server plugin.

* `<admin_authorization_key>` : If this is set, then a connection must provide the matching key using an "auth" call on the websocket. If the `<authorization_key>` is set, then the connection can provide that key.
* `<authorization_key>` : If this is set, then a connection must provide the
matching key using an "auth" call on the websocket. If the `<admin_authorization_key>` is set, then the connection can provide that key.
* `<max_connections>` : An integer that is the maximum number of simultaneous connections.
* `<port>` : An integer that is websocket port.
* `<publication_hz>` : An integer that is the maximum publication hertz rate.

## Code and Support

1. The code for the web application,
[app.gazebosim.org](https://app.gazebosim.org), lives at
[https://github.com/gazebo-web/gazebosim-app](https://github.com/gazebo-web/gazebosim-app).

1. The javascript library used to render the 3D scene lives at
[https://github.com/gazebo-web/gzweb](https://github.com/gazebo-web/gzweb).

1. Is you notice an issue with web visualization, then please
file a ticket at
[https://github.com/gazebo-web/gzweb/issues](https://github.com/gazebo-web/gzweb/issues).

## Troubleshooting

1. If you are running Gazebo Sim in a docker container, make sure to
use the [--network host](https://docs.docker.com/network/network-tutorial-host/) Docker commandline option. Without `--network host` the web application won't be able to connect to the websocket server.
70 changes: 70 additions & 0 deletions jetty/web_visualization.md
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm we should update this doc to use gz-sim instead of gz-launch but can be done in a separate PR

Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
# Overview

Web visualization supports rendering and interacting with running
Gazebo simulations. You may find web visualization useful
when interacting with remote or headless Gazebo Sim simulations. No
additionally dependencies, other than a browser and internet connection, are
required.

## How to use web visualization

The following steps will guide you through the process of running
Gazebo with a websocket server and connecting to the websocket for
visualization.

1. Start an Gazebo Sim instance as usual. We will use the `fuel.sdf`
world and run it headless.
```
gz sim -v 4 -s -r fuel.sdf
```

1. Create an Gazebo Launch file with the websocket server plugin.
```
echo "<?xml version='1.0'?>
<gz version='1.0'>
<plugin name='gz::launch::WebsocketServer'
filename='gz-launch-websocket-server'>
<port>9002</port>
</plugin>
</gz>" > websocket.gzlaunch
```

1. Run the websocket server using
```
gz launch -v 4 websocket.gzlaunch
```

1. Visualize the simulation by going to
[https://app.gazebosim.org/visualization](https://app.gazebosim.org/visualization) and pressing the Connect button.

1. It may take a few seconds for the scene to load. Your browser needs to
fetch all of the models in the world.

## Websocket server customization

The following parameters are available in the websocket server plugin.

* `<admin_authorization_key>` : If this is set, then a connection must provide the matching key using an "auth" call on the websocket. If the `<authorization_key>` is set, then the connection can provide that key.
* `<authorization_key>` : If this is set, then a connection must provide the
matching key using an "auth" call on the websocket. If the `<admin_authorization_key>` is set, then the connection can provide that key.
* `<max_connections>` : An integer that is the maximum number of simultaneous connections.
* `<port>` : An integer that is websocket port.
* `<publication_hz>` : An integer that is the maximum publication hertz rate.

## Code and Support

1. The code for the web application,
[app.gazebosim.org](https://app.gazebosim.org), lives at
[https://github.com/gazebo-web/gazebosim-app](https://github.com/gazebo-web/gazebosim-app).

1. The javascript library used to render the 3D scene lives at
[https://github.com/gazebo-web/gzweb](https://github.com/gazebo-web/gzweb).

1. Is you notice an issue with web visualization, then please
file a ticket at
[https://github.com/gazebo-web/gzweb/issues](https://github.com/gazebo-web/gzweb/issues).

## Troubleshooting

1. If you are running Gazebo Sim in a docker container, make sure to
use the [--network host](https://docs.docker.com/network/network-tutorial-host/) Docker commandline option. Without `--network host` the web application won't be able to connect to the websocket server.