Copy over web_visualization tutorial from Dome (#600)

azeey · web-flow · commit e55d4339f98d · 2025-08-19T20:59:51.000-05:00
Signed-off-by: Addisu Z. Taddese &lt;addisu@openrobotics.org&gt;
diff --git a/fortress/web_visualization.md b/fortress/web_visualization.md
@@ -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.
diff --git a/garden/web_visualization.md b/garden/web_visualization.md
@@ -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.
diff --git a/harmonic/web_visualization.md b/harmonic/web_visualization.md
@@ -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.
diff --git a/ionic/web_visualization.md b/ionic/web_visualization.md
@@ -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.
diff --git a/jetty/web_visualization.md b/jetty/web_visualization.md
@@ -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.
