Repo symbol

py_trees_js repository

py_trees_js

Repository Summary

Checkout URI https://github.com/splintered-reality/py_trees_js.git
VCS Type git
VCS Version release/0.6.x
Last Updated 2025-01-13
Dev Status MAINTAINED
Released RELEASED
Tags No category tags.
Contributing Help Wanted (0)
Good First Issues (0)
Pull Requests to Review (0)

Packages

Name Version
py_trees_js 0.6.5

README

PyTrees Js

[About] [Features] [Preview] [Exmaple - Simple Web App] [Example - PyQt App] [The JSON Specification]

About

Libraries for visualisation of runtime or replayed behaviour trees.

  • ./js - a self-contained javascript library to build apps around
  • py_trees_js - a python package that makes the js available as a pyqt resource
  • py_trees_js.viewer - a demo pyqtwebengine app

See py_trees_ros_viewer for a fully fledged pyqt integration that uses py_trees_js.

Features

  • Visualise the runtime state of a behaviour tree
  • Collapsible subtrees
  • Zoom and scale contents to fit
  • Timeline rewind & resume
  • Blackboard key-value storage view
  • Activity log view

Although designed for py_trees, the js libs (in particular, the interfaces) are not dependent on py_trees and could be used for other behaviour tree applications.

Preview

With VSCode DevContainers and on a PC with an NVIDIA GPU:

$ git clone https://github.com/splintered-reality/py_trees_js
$ code .
$ cd py_trees_js

# Reopen the project in the devcontainer
$ (use CTRL-SHIFT-P if you miss VSCode's helper dialog)

# Setup and launch
$ poetry install
$ poetry run py-trees-demo-viewer

If you do not have a PC that meets those requirements, some alternative options:

  • Install Poetry and PyQt on your system or in a venv. Clone and launch.
  • If you’re just interested in seeing the demo viewer, pip install --user py_trees_js and launch the viewer
  • Create your own devcontainer with something like the desktop-lite feature. If this works, send me a PR!

Example - Simple Web App

Building a complete application that can render a behaviour tree stream is an effort that can be decomposed into two tasks:

  1. Creating the web app for rendering trees and visualising a timeline
  2. Wrapping the web app in a framework and connecting it to an external stream

The first stage is purely an exercise with html, css and javascript. The latter will depend on your use case - it could be a qt-js hybrid application (as exemplified here) for developers, an electron application for cross-platform and mobile deployment or a cloud based service.

This section will walk through how to build a web application with the provided js libraries. An example of wrapping the web app within a Qt-Js application will follow.

To get started, let’s begin with a basic html page with two divs, one for the tree canvas and one for the timeline:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>PyTrees Viewer</title>
  <style>
    html {
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
    body {
      margin: 0;
      overflow:hidden;  /* no scrollbars */
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <div id="timeline"></div>
</body>
</html>

Next, bring in the javascript libraries. For exemplar purposes, it is assumed here that the libraries have been made available alongside the html page - how is an integration detail depending on the mode of deployment (see next section for an example).

Note that the py_trees-<version>.js library has only one dependency, jointjs, but that in turn has a few dependencies of it’s own. The bundled libraries in the js/jointjs folder of this repository correspond to the requirements for a specific version of jointjs and

File truncated at 100 lines see the full file

Repo symbol

py_trees_js repository

py_trees_js

Repository Summary

Checkout URI https://github.com/splintered-reality/py_trees_js.git
VCS Type git
VCS Version devel
Last Updated 2025-01-14
Dev Status MAINTAINED
Released RELEASED
Tags No category tags.
Contributing Help Wanted (0)
Good First Issues (0)
Pull Requests to Review (0)

Packages

Name Version
py_trees_js 0.6.6

README

PyTrees Js

[About] [Features] [Preview] [Exmaple - Simple Web App] [Example - PyQt App] [The JSON Specification]

About

Libraries for visualisation of runtime or replayed behaviour trees.

  • ./js - a self-contained javascript library to build apps around
  • py_trees_js - a python package that makes the js available as a pyqt resource
  • py_trees_js.viewer - a demo pyqtwebengine app

See py_trees_ros_viewer for a fully fledged pyqt integration that uses py_trees_js.

Features

  • Visualise the runtime state of a behaviour tree
  • Collapsible subtrees
  • Zoom and scale contents to fit
  • Timeline rewind & resume
  • Blackboard key-value storage view
  • Activity log view

Although designed for py_trees, the js libs (in particular, the interfaces) are not dependent on py_trees and could be used for other behaviour tree applications.

Preview

With VSCode DevContainers and on a PC with an NVIDIA GPU:

$ git clone https://github.com/splintered-reality/py_trees_js
$ code .
$ cd py_trees_js

# Reopen the project in the devcontainer
$ (use CTRL-SHIFT-P if you miss VSCode's helper dialog)

# Setup and launch
$ poetry install
$ poetry run py-trees-demo-viewer

If you do not have a PC that meets those requirements, some alternative options:

  • Install Poetry and PyQt on your system or in a venv. Clone and launch.
  • If you’re just interested in seeing the demo viewer, pip install --user py_trees_js and launch the viewer
  • Create your own devcontainer with something like the desktop-lite feature. If this works, send me a PR!

Example - Simple Web App

Building a complete application that can render a behaviour tree stream is an effort that can be decomposed into two tasks:

  1. Creating the web app for rendering trees and visualising a timeline
  2. Wrapping the web app in a framework and connecting it to an external stream

The first stage is purely an exercise with html, css and javascript. The latter will depend on your use case - it could be a qt-js hybrid application (as exemplified here) for developers, an electron application for cross-platform and mobile deployment or a cloud based service.

This section will walk through how to build a web application with the provided js libraries. An example of wrapping the web app within a Qt-Js application will follow.

To get started, let’s begin with a basic html page with two divs, one for the tree canvas and one for the timeline:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>PyTrees Viewer</title>
  <style>
    html {
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
    body {
      margin: 0;
      overflow:hidden;  /* no scrollbars */
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <div id="timeline"></div>
</body>
</html>

Next, bring in the javascript libraries. For exemplar purposes, it is assumed here that the libraries have been made available alongside the html page - how is an integration detail depending on the mode of deployment (see next section for an example).

Note that the py_trees-<version>.js library has only one dependency, jointjs, but that in turn has a few dependencies of it’s own. The bundled libraries in the js/jointjs folder of this repository correspond to the requirements for a specific version of jointjs and

File truncated at 100 lines see the full file

Repo symbol

py_trees_js repository

py_trees_js

Repository Summary

Checkout URI https://github.com/splintered-reality/py_trees_js.git
VCS Type git
VCS Version devel
Last Updated 2025-01-14
Dev Status MAINTAINED
Released RELEASED
Tags No category tags.
Contributing Help Wanted (0)
Good First Issues (0)
Pull Requests to Review (0)

Packages

Name Version
py_trees_js 0.6.6

README

PyTrees Js

[About] [Features] [Preview] [Exmaple - Simple Web App] [Example - PyQt App] [The JSON Specification]

About

Libraries for visualisation of runtime or replayed behaviour trees.

  • ./js - a self-contained javascript library to build apps around
  • py_trees_js - a python package that makes the js available as a pyqt resource
  • py_trees_js.viewer - a demo pyqtwebengine app

See py_trees_ros_viewer for a fully fledged pyqt integration that uses py_trees_js.

Features

  • Visualise the runtime state of a behaviour tree
  • Collapsible subtrees
  • Zoom and scale contents to fit
  • Timeline rewind & resume
  • Blackboard key-value storage view
  • Activity log view

Although designed for py_trees, the js libs (in particular, the interfaces) are not dependent on py_trees and could be used for other behaviour tree applications.

Preview

With VSCode DevContainers and on a PC with an NVIDIA GPU:

$ git clone https://github.com/splintered-reality/py_trees_js
$ code .
$ cd py_trees_js

# Reopen the project in the devcontainer
$ (use CTRL-SHIFT-P if you miss VSCode's helper dialog)

# Setup and launch
$ poetry install
$ poetry run py-trees-demo-viewer

If you do not have a PC that meets those requirements, some alternative options:

  • Install Poetry and PyQt on your system or in a venv. Clone and launch.
  • If you’re just interested in seeing the demo viewer, pip install --user py_trees_js and launch the viewer
  • Create your own devcontainer with something like the desktop-lite feature. If this works, send me a PR!

Example - Simple Web App

Building a complete application that can render a behaviour tree stream is an effort that can be decomposed into two tasks:

  1. Creating the web app for rendering trees and visualising a timeline
  2. Wrapping the web app in a framework and connecting it to an external stream

The first stage is purely an exercise with html, css and javascript. The latter will depend on your use case - it could be a qt-js hybrid application (as exemplified here) for developers, an electron application for cross-platform and mobile deployment or a cloud based service.

This section will walk through how to build a web application with the provided js libraries. An example of wrapping the web app within a Qt-Js application will follow.

To get started, let’s begin with a basic html page with two divs, one for the tree canvas and one for the timeline:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>PyTrees Viewer</title>
  <style>
    html {
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
    body {
      margin: 0;
      overflow:hidden;  /* no scrollbars */
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <div id="timeline"></div>
</body>
</html>

Next, bring in the javascript libraries. For exemplar purposes, it is assumed here that the libraries have been made available alongside the html page - how is an integration detail depending on the mode of deployment (see next section for an example).

Note that the py_trees-<version>.js library has only one dependency, jointjs, but that in turn has a few dependencies of it’s own. The bundled libraries in the js/jointjs folder of this repository correspond to the requirements for a specific version of jointjs and

File truncated at 100 lines see the full file

Repo symbol

py_trees_js repository

py_trees_js

Repository Summary

Checkout URI https://github.com/splintered-reality/py_trees_js.git
VCS Type git
VCS Version devel
Last Updated 2025-01-14
Dev Status MAINTAINED
Released RELEASED
Tags No category tags.
Contributing Help Wanted (0)
Good First Issues (0)
Pull Requests to Review (0)

Packages

Name Version
py_trees_js 0.6.6

README

PyTrees Js

[About] [Features] [Preview] [Exmaple - Simple Web App] [Example - PyQt App] [The JSON Specification]

About

Libraries for visualisation of runtime or replayed behaviour trees.

  • ./js - a self-contained javascript library to build apps around
  • py_trees_js - a python package that makes the js available as a pyqt resource
  • py_trees_js.viewer - a demo pyqtwebengine app

See py_trees_ros_viewer for a fully fledged pyqt integration that uses py_trees_js.

Features

  • Visualise the runtime state of a behaviour tree
  • Collapsible subtrees
  • Zoom and scale contents to fit
  • Timeline rewind & resume
  • Blackboard key-value storage view
  • Activity log view

Although designed for py_trees, the js libs (in particular, the interfaces) are not dependent on py_trees and could be used for other behaviour tree applications.

Preview

With VSCode DevContainers and on a PC with an NVIDIA GPU:

$ git clone https://github.com/splintered-reality/py_trees_js
$ code .
$ cd py_trees_js

# Reopen the project in the devcontainer
$ (use CTRL-SHIFT-P if you miss VSCode's helper dialog)

# Setup and launch
$ poetry install
$ poetry run py-trees-demo-viewer

If you do not have a PC that meets those requirements, some alternative options:

  • Install Poetry and PyQt on your system or in a venv. Clone and launch.
  • If you’re just interested in seeing the demo viewer, pip install --user py_trees_js and launch the viewer
  • Create your own devcontainer with something like the desktop-lite feature. If this works, send me a PR!

Example - Simple Web App

Building a complete application that can render a behaviour tree stream is an effort that can be decomposed into two tasks:

  1. Creating the web app for rendering trees and visualising a timeline
  2. Wrapping the web app in a framework and connecting it to an external stream

The first stage is purely an exercise with html, css and javascript. The latter will depend on your use case - it could be a qt-js hybrid application (as exemplified here) for developers, an electron application for cross-platform and mobile deployment or a cloud based service.

This section will walk through how to build a web application with the provided js libraries. An example of wrapping the web app within a Qt-Js application will follow.

To get started, let’s begin with a basic html page with two divs, one for the tree canvas and one for the timeline:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>PyTrees Viewer</title>
  <style>
    html {
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
    body {
      margin: 0;
      overflow:hidden;  /* no scrollbars */
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <div id="timeline"></div>
</body>
</html>

Next, bring in the javascript libraries. For exemplar purposes, it is assumed here that the libraries have been made available alongside the html page - how is an integration detail depending on the mode of deployment (see next section for an example).

Note that the py_trees-<version>.js library has only one dependency, jointjs, but that in turn has a few dependencies of it’s own. The bundled libraries in the js/jointjs folder of this repository correspond to the requirements for a specific version of jointjs and

File truncated at 100 lines see the full file

Repo symbol

py_trees_js repository

Repo symbol

py_trees_js repository

Repo symbol

py_trees_js repository

Repo symbol

py_trees_js repository

py_trees_js

Repository Summary

Checkout URI https://github.com/splintered-reality/py_trees_js.git
VCS Type git
VCS Version release/0.6.x
Last Updated 2025-01-13
Dev Status MAINTAINED
Released RELEASED
Tags No category tags.
Contributing Help Wanted (0)
Good First Issues (0)
Pull Requests to Review (0)

Packages

Name Version
py_trees_js 0.6.5

README

PyTrees Js

[About] [Features] [Preview] [Exmaple - Simple Web App] [Example - PyQt App] [The JSON Specification]

About

Libraries for visualisation of runtime or replayed behaviour trees.

  • ./js - a self-contained javascript library to build apps around
  • py_trees_js - a python package that makes the js available as a pyqt resource
  • py_trees_js.viewer - a demo pyqtwebengine app

See py_trees_ros_viewer for a fully fledged pyqt integration that uses py_trees_js.

Features

  • Visualise the runtime state of a behaviour tree
  • Collapsible subtrees
  • Zoom and scale contents to fit
  • Timeline rewind & resume
  • Blackboard key-value storage view
  • Activity log view

Although designed for py_trees, the js libs (in particular, the interfaces) are not dependent on py_trees and could be used for other behaviour tree applications.

Preview

With VSCode DevContainers and on a PC with an NVIDIA GPU:

$ git clone https://github.com/splintered-reality/py_trees_js
$ code .
$ cd py_trees_js

# Reopen the project in the devcontainer
$ (use CTRL-SHIFT-P if you miss VSCode's helper dialog)

# Setup and launch
$ poetry install
$ poetry run py-trees-demo-viewer

If you do not have a PC that meets those requirements, some alternative options:

  • Install Poetry and PyQt on your system or in a venv. Clone and launch.
  • If you’re just interested in seeing the demo viewer, pip install --user py_trees_js and launch the viewer
  • Create your own devcontainer with something like the desktop-lite feature. If this works, send me a PR!

Example - Simple Web App

Building a complete application that can render a behaviour tree stream is an effort that can be decomposed into two tasks:

  1. Creating the web app for rendering trees and visualising a timeline
  2. Wrapping the web app in a framework and connecting it to an external stream

The first stage is purely an exercise with html, css and javascript. The latter will depend on your use case - it could be a qt-js hybrid application (as exemplified here) for developers, an electron application for cross-platform and mobile deployment or a cloud based service.

This section will walk through how to build a web application with the provided js libraries. An example of wrapping the web app within a Qt-Js application will follow.

To get started, let’s begin with a basic html page with two divs, one for the tree canvas and one for the timeline:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>PyTrees Viewer</title>
  <style>
    html {
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
    body {
      margin: 0;
      overflow:hidden;  /* no scrollbars */
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <div id="timeline"></div>
</body>
</html>

Next, bring in the javascript libraries. For exemplar purposes, it is assumed here that the libraries have been made available alongside the html page - how is an integration detail depending on the mode of deployment (see next section for an example).

Note that the py_trees-<version>.js library has only one dependency, jointjs, but that in turn has a few dependencies of it’s own. The bundled libraries in the js/jointjs folder of this repository correspond to the requirements for a specific version of jointjs and

File truncated at 100 lines see the full file

Repo symbol

py_trees_js repository

py_trees_js

Repository Summary

Checkout URI https://github.com/splintered-reality/py_trees_js.git
VCS Type git
VCS Version release/0.5.x
Last Updated 2019-10-29
Dev Status MAINTAINED
Released RELEASED
Tags No category tags.
Contributing Help Wanted (0)
Good First Issues (0)
Pull Requests to Review (0)

Packages

Name Version
py_trees_js 0.5.1

README

PyTrees Js

[About] [Roadmap] [Usage] [Example Qt-Js Integration] [The JSON Specification]

About

Javascript libraries for visualisation and monitoring of behaviour trees at runtime or when replaying a log.

  • Visualise runtime snapshots of behaviour trees
  • Collapse subtrees
  • Zoom and scale contents to fit
  • Timeline rewind & resume

Despite primarily catering for use cases with py_trees, these libraries can be used for behaviour trees in general since it requires only properties common to most behaviour tree implementations and flexibly opts into implementation specific data via passing of a key-value dictionary that is appropriately formatted in an implementation-agnostic manner inside the web application.

This repository also includes a hybrid Qt-JS application used for development and demonstration purposes.

For a quick preview of it’s capabilities:

git clone https://github.com/splintered-reality/py_trees_js
cd py_trees_js
. ./virtualenv.bash
# launch the demo viewer
py-trees-demo-viewer
# OR launch the demo viewer with a js console for debugging
./scripts/py-trees-devel-viewer

Roadmap

See the Projects page for progress and planned milestones.

Usage

Building a complete application that can render a behaviour tree stream is an effort that can be decomposed into two tasks:

  1. Creating the web app for rendering trees and visualising a timeline
  2. Wrapping the web app in a framework and connecting it to an external stream

The first stage is purely an exercise with html, css and javascript. The latter will depend on your use case - it could be a qt-js hybrid application (as exemplified here) for developers, an electron application for cross-platform and mobile deployment or a cloud based service.

This section will walk through how to build a web application with the provided js libraries. An example of wrapping the web app within a Qt-Js application will follow.

To get started, let’s begin with a basic html page with two divs, one for the tree canvas and one for the timeline:

<html>
<head>
  <meta charset="utf-8">
  <title>PyTrees Viewer</title>
</head>
<style>
  body {
    margin: 0;
    overflow:hidden;  <!-- no scrollbars -->
  }
</style>
<body>
  <div id="window">
    <div id="canvas"></div>
    <div id="timeline"></div>
  </div>
</body>
</html>

Next, bring in the javascript libraries. For exemplar purposes, it is assumed here that the libraries have been made available alongside the html page - how is an integration detail depending on the mode of deployment (see next section for an example).

Note that the py_trees-<version>.js library has only one dependency, jointjs, but that in turn has a few dependencies of it’s own. The bundled libraries in the js/jointjs folder of this repository correspond to the requirements for a specific version of jointjs and have been tested to work with the accompany py_trees-<version>.js library.

You can verify that the libraries have been properly imported by calling py_trees.hello() which will print version information of the loaded javascript libraries (if found) to the javascript console.

```xhtml

PyTrees Viewer File truncated at 100 lines [see the full file](https://github.com/splintered-reality/py_trees_js/tree/release/0.5.x/README.md)
Repo symbol

py_trees_js repository

Repo symbol

py_trees_js repository

py_trees_js

Repository Summary

Checkout URI https://github.com/splintered-reality/py_trees_js.git
VCS Type git
VCS Version release/0.6.x
Last Updated 2025-01-13
Dev Status MAINTAINED
Released RELEASED
Tags No category tags.
Contributing Help Wanted (0)
Good First Issues (0)
Pull Requests to Review (0)

Packages

Name Version
py_trees_js 0.6.5

README

PyTrees Js

[About] [Features] [Preview] [Exmaple - Simple Web App] [Example - PyQt App] [The JSON Specification]

About

Libraries for visualisation of runtime or replayed behaviour trees.

  • ./js - a self-contained javascript library to build apps around
  • py_trees_js - a python package that makes the js available as a pyqt resource
  • py_trees_js.viewer - a demo pyqtwebengine app

See py_trees_ros_viewer for a fully fledged pyqt integration that uses py_trees_js.

Features

  • Visualise the runtime state of a behaviour tree
  • Collapsible subtrees
  • Zoom and scale contents to fit
  • Timeline rewind & resume
  • Blackboard key-value storage view
  • Activity log view

Although designed for py_trees, the js libs (in particular, the interfaces) are not dependent on py_trees and could be used for other behaviour tree applications.

Preview

With VSCode DevContainers and on a PC with an NVIDIA GPU:

$ git clone https://github.com/splintered-reality/py_trees_js
$ code .
$ cd py_trees_js

# Reopen the project in the devcontainer
$ (use CTRL-SHIFT-P if you miss VSCode's helper dialog)

# Setup and launch
$ poetry install
$ poetry run py-trees-demo-viewer

If you do not have a PC that meets those requirements, some alternative options:

  • Install Poetry and PyQt on your system or in a venv. Clone and launch.
  • If you’re just interested in seeing the demo viewer, pip install --user py_trees_js and launch the viewer
  • Create your own devcontainer with something like the desktop-lite feature. If this works, send me a PR!

Example - Simple Web App

Building a complete application that can render a behaviour tree stream is an effort that can be decomposed into two tasks:

  1. Creating the web app for rendering trees and visualising a timeline
  2. Wrapping the web app in a framework and connecting it to an external stream

The first stage is purely an exercise with html, css and javascript. The latter will depend on your use case - it could be a qt-js hybrid application (as exemplified here) for developers, an electron application for cross-platform and mobile deployment or a cloud based service.

This section will walk through how to build a web application with the provided js libraries. An example of wrapping the web app within a Qt-Js application will follow.

To get started, let’s begin with a basic html page with two divs, one for the tree canvas and one for the timeline:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>PyTrees Viewer</title>
  <style>
    html {
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
    body {
      margin: 0;
      overflow:hidden;  /* no scrollbars */
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <div id="timeline"></div>
</body>
</html>

Next, bring in the javascript libraries. For exemplar purposes, it is assumed here that the libraries have been made available alongside the html page - how is an integration detail depending on the mode of deployment (see next section for an example).

Note that the py_trees-<version>.js library has only one dependency, jointjs, but that in turn has a few dependencies of it’s own. The bundled libraries in the js/jointjs folder of this repository correspond to the requirements for a specific version of jointjs and

File truncated at 100 lines see the full file

Repo symbol

py_trees_js repository

py_trees_js

Repository Summary

Checkout URI https://github.com/splintered-reality/py_trees_js.git
VCS Type git
VCS Version devel
Last Updated 2025-01-14
Dev Status MAINTAINED
Released RELEASED
Tags No category tags.
Contributing Help Wanted (0)
Good First Issues (0)
Pull Requests to Review (0)

Packages

Name Version
py_trees_js 0.6.6

README

PyTrees Js

[About] [Features] [Preview] [Exmaple - Simple Web App] [Example - PyQt App] [The JSON Specification]

About

Libraries for visualisation of runtime or replayed behaviour trees.

  • ./js - a self-contained javascript library to build apps around
  • py_trees_js - a python package that makes the js available as a pyqt resource
  • py_trees_js.viewer - a demo pyqtwebengine app

See py_trees_ros_viewer for a fully fledged pyqt integration that uses py_trees_js.

Features

  • Visualise the runtime state of a behaviour tree
  • Collapsible subtrees
  • Zoom and scale contents to fit
  • Timeline rewind & resume
  • Blackboard key-value storage view
  • Activity log view

Although designed for py_trees, the js libs (in particular, the interfaces) are not dependent on py_trees and could be used for other behaviour tree applications.

Preview

With VSCode DevContainers and on a PC with an NVIDIA GPU:

$ git clone https://github.com/splintered-reality/py_trees_js
$ code .
$ cd py_trees_js

# Reopen the project in the devcontainer
$ (use CTRL-SHIFT-P if you miss VSCode's helper dialog)

# Setup and launch
$ poetry install
$ poetry run py-trees-demo-viewer

If you do not have a PC that meets those requirements, some alternative options:

  • Install Poetry and PyQt on your system or in a venv. Clone and launch.
  • If you’re just interested in seeing the demo viewer, pip install --user py_trees_js and launch the viewer
  • Create your own devcontainer with something like the desktop-lite feature. If this works, send me a PR!

Example - Simple Web App

Building a complete application that can render a behaviour tree stream is an effort that can be decomposed into two tasks:

  1. Creating the web app for rendering trees and visualising a timeline
  2. Wrapping the web app in a framework and connecting it to an external stream

The first stage is purely an exercise with html, css and javascript. The latter will depend on your use case - it could be a qt-js hybrid application (as exemplified here) for developers, an electron application for cross-platform and mobile deployment or a cloud based service.

This section will walk through how to build a web application with the provided js libraries. An example of wrapping the web app within a Qt-Js application will follow.

To get started, let’s begin with a basic html page with two divs, one for the tree canvas and one for the timeline:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>PyTrees Viewer</title>
  <style>
    html {
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
    body {
      margin: 0;
      overflow:hidden;  /* no scrollbars */
      height: 100%  /* canvas is intended to fill the screen, cascading heights achieves this */
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <div id="timeline"></div>
</body>
</html>

Next, bring in the javascript libraries. For exemplar purposes, it is assumed here that the libraries have been made available alongside the html page - how is an integration detail depending on the mode of deployment (see next section for an example).

Note that the py_trees-<version>.js library has only one dependency, jointjs, but that in turn has a few dependencies of it’s own. The bundled libraries in the js/jointjs folder of this repository correspond to the requirements for a specific version of jointjs and

File truncated at 100 lines see the full file

Repo symbol

py_trees_js repository

Repo symbol

py_trees_js repository

Repo symbol

py_trees_js repository

Repo symbol

py_trees_js repository

Repo symbol

py_trees_js repository

Repo symbol

py_trees_js repository

Repo symbol

py_trees_js repository