Web UI proof of concept with Plotly Dash (#439)

Author: sea-bass

.github/workflows/tests.yml

@@ -92,7 +92,7 @@ jobs:
           junitxml-path: ./test/results/test_results.xml
           pytest-xml-coverage-path: ./test/results/test_results_coverage.xml
           coverage-path-prefix: pyrobosim/pyrobosim/
-          remove-links-to-files: true  # gets around issues of comment being too long
+          remove-links-to-lines: true  # gets around issues of comment being too long
         if: ${{ !github.event.pull_request.head.repo.fork }}
       - name: Create coverage badge
         uses: schneegans/dynamic-badges-action@v1.7.0

.readthedocs.yaml

@@ -13,6 +13,8 @@ python:
     - requirements: docs/python_docs_requirements.txt
     - method: pip
       path: pyrobosim
+      extra_requirements:
+        - web
     - method: pip
       path: pyrobosim_ros
 

docker/Dockerfile

@@ -41,7 +41,7 @@ RUN pip3 install -r docs/python_docs_requirements.txt && \
 
 # Copy the rest of the source directory and install PyRoboSim
 COPY . /opt/pyrobosim/
-RUN pip3 install -e pyrobosim
+RUN pip3 install -e pyrobosim[web]
 
 # Set the default startup command
 CMD /bin/bash
@@ -89,7 +89,7 @@ COPY test/python_test_requirements.txt test/
 # and lacks the 'build_editable' hook.
 RUN source ${VIRTUAL_ENV}/bin/activate && \
     pip3 install --upgrade pip setuptools && \
-    pip3 install -e ./pyrobosim && \
+    pip3 install -e ./pyrobosim[web] && \
     pip3 install -r docs/python_docs_requirements.txt && \
     pip3 install -r test/python_test_requirements.txt
 

docs/source/setup.rst

@@ -17,6 +17,12 @@ However, note that this will not include any of the ROS 2 or Task and Motion Pla
 
   pip install pyrobosim
 
+To also install the optional dependencies for the web-based visualization, use the ``web`` extra:
+
+::
+
+  pip install pyrobosim[web]
+
 
 Local Setup
 -----------

docs/source/usage/basic_usage.rst

@@ -91,6 +91,36 @@ For example:
 
 Refer to the :ref:`yaml_schemas` documentation for more information.
 
+Web UI (Experimental)
+---------------------
+
+PyRoboSim also has an experimental browser-based UI built with `Plotly Dash <https://dash.plotly.com/>`_.
+This is a lightweight alternative to the Qt GUI, and the goal is to replace it in a future major release.
+It requires the optional web dependencies, which you can install with ``pip install pyrobosim[web]``.
+
+Most examples accept a ``--web`` flag to launch the web UI instead of the Qt GUI:
+
+::
+
+    python3 examples/demo.py --web
+
+The ROS examples instead expose this as a ``web`` node parameter, which is also available as a launch argument:
+
+::
+
+    ros2 launch pyrobosim_ros demo.launch.py web:=true
+
+Then, open ``http://localhost:8050`` in your browser to interact with the world.
+
+To use the web UI in your own scripts, pass ``web=True`` to ``start_gui``:
+
+.. code-block:: python
+
+    from pyrobosim.gui import start_gui
+
+    start_gui(world, web=True, web_host="127.0.0.1", web_port=8050)
+
+Note that the web server is unauthenticated, so only bind to a non-localhost address (``web_host``) on networks you trust.
 
 Exporting Worlds to Gazebo
 --------------------------

docs/source/usage/index.rst

@@ -5,7 +5,7 @@ PyRoboSim offers a standalone Python API for modeling worlds and simulating robo
 Optionally, you can also launch this tool with:
 
  * A ROS 2 interface that offers topics, services, and actions to interact with the world.
- * A `PySide6 <https://doc.qt.io/qtforpython-6/>`_ based GUI for visualizing the world.
+ * A `PySide6 <https://doc.qt.io/qtforpython-6/>`_ based GUI, and an experimental `Plotly Dash <https://dash.plotly.com/>`_ web UI, for visualizing the world.
 
 Refer to the following pages for different types of usage guides.
 

pyrobosim/examples/demo.py

@@ -226,6 +226,11 @@ def parse_args() -> argparse.Namespace:
         action="store_true",
         help="If True, adds a lidar sensor to the first robot.",
     )
+    parser.add_argument(
+        "--web",
+        action="store_true",
+        help="Launch the browser-based web UI instead of the Qt GUI.",
+    )
     return parser.parse_args()
 
 
@@ -238,5 +243,5 @@ def parse_args() -> argparse.Namespace:
     else:
         world = create_world_from_yaml(args.world_file)
 
-    # Start the program either as ROS node or standalone.
-    start_gui(world)
+    # Start the program in the web UI or the Qt GUI.
+    start_gui(world, web=args.web)

pyrobosim/examples/demo_astar.py

@@ -1,5 +1,6 @@
 #!/usr/bin/env python3
 
+import argparse
 
 from pyrobosim.core import WorldYamlLoader
 from pyrobosim.gui import start_gui
@@ -34,5 +35,13 @@ def demo_astar() -> None:
 
 
 if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="A* planner demo.")
+    parser.add_argument(
+        "--web",
+        action="store_true",
+        help="Launch the browser-based web UI instead of the Qt GUI.",
+    )
+    args = parser.parse_args()
+
     demo_astar()
-    start_gui(world)
+    start_gui(world, web=args.web)

pyrobosim/examples/demo_dynamics.py

@@ -4,6 +4,7 @@
 Test script showing how to command robot velocities and simulate dynamics.
 """
 
+import argparse
 import numpy as np
 import time
 from threading import Thread
@@ -118,11 +119,18 @@ def command_robots(world: World) -> None:
 
 
 if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="Robot dynamics demo.")
+    parser.add_argument(
+        "--web",
+        action="store_true",
+        help="Launch the browser-based web UI instead of the Qt GUI.",
+    )
+    args = parser.parse_args()
+
     world = create_world()
 
     # Command robots on a separate thread.
     robot_commands_thread = Thread(target=lambda: command_robots(world))
     robot_commands_thread.start()
 
-    # Start the program either as ROS node or standalone.
-    start_gui(world)
+    start_gui(world, web=args.web)

pyrobosim/examples/demo_partial_obs_hallways.py

@@ -214,6 +214,11 @@ def parse_args() -> argparse.Namespace:
         action="store_true",
         help="This option will add multiple robots to the world.",
     )
+    parser.add_argument(
+        "--web",
+        action="store_true",
+        help="Launch the browser-based web UI instead of the Qt GUI.",
+    )
     return parser.parse_args()
 
 
@@ -223,5 +228,5 @@ def parse_args() -> argparse.Namespace:
     # Create a world.
     world = create_world(args.multirobot)
 
-    # Start the GUI.
-    start_gui(world)
+    # Start the program in the web UI or the Qt GUI.
+    start_gui(world, web=args.web)