py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
humble

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
jazzy

API Docs
Browse Code

Package Summary

Tags	No category tags.
Version	0.6.6
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.6 (2025-01-13)

[infra] Add dummy test to make buildfarm happy
[infra] Fix repo URL in package.xml
Contributors: Sebastian Castro

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
kilted

API Docs
Browse Code

Package Summary

Tags	No category tags.
Version	0.6.6
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.6 (2025-01-13)

[infra] Add dummy test to make buildfarm happy
[infra] Fix repo URL in package.xml
Contributors: Sebastian Castro

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
rolling

API Docs
Browse Code

Package Summary

Tags	No category tags.
Version	0.6.6
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.6 (2025-01-13)

[infra] Add dummy test to make buildfarm happy
[infra] Fix repo URL in package.xml
Contributors: Sebastian Castro

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code

No version for distro ardent showing humble. Known supported distros are highlighted in the buttons above.

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
humble

API Docs
Browse Code

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code

No version for distro bouncy showing humble. Known supported distros are highlighted in the buttons above.

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
humble

API Docs
Browse Code

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code

No version for distro crystal showing humble. Known supported distros are highlighted in the buttons above.

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
humble

API Docs
Browse Code

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
eloquent

API Docs
Browse Code

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
dashing

API Docs
Browse Code

Package Summary

Tags	No category tags.
Version	0.5.1
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Qt-based viewer for py_trees in ROS.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Creating the web app for rendering trees and visualising a timeline
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)

CHANGELOG

Changelog

Forthcoming

...

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code

No version for distro galactic showing humble. Known supported distros are highlighted in the buttons above.

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
humble

API Docs
Browse Code

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
foxy

API Docs
Browse Code

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
iron

API Docs
Browse Code

Package Summary

Tags	No category tags.
Version	0.6.6
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.6 (2025-01-13)

[infra] Add dummy test to make buildfarm happy
[infra] Fix repo URL in package.xml
Contributors: Sebastian Castro

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

No known dependants.

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code

No version for distro lunar showing humble. Known supported distros are highlighted in the buttons above.

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
humble

API Docs
Browse Code
Wiki

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code Wiki

No version for distro jade showing humble. Known supported distros are highlighted in the buttons above.

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
humble

API Docs
Browse Code
Wiki

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code Wiki

No version for distro indigo showing humble. Known supported distros are highlighted in the buttons above.

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
humble

API Docs
Browse Code
Wiki

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code Wiki

No version for distro hydro showing humble. Known supported distros are highlighted in the buttons above.

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
humble

API Docs
Browse Code
Wiki

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code Wiki

No version for distro kinetic showing humble. Known supported distros are highlighted in the buttons above.

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
humble

API Docs
Browse Code
Wiki

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code Wiki

No version for distro melodic showing humble. Known supported distros are highlighted in the buttons above.

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
humble

API Docs
Browse Code
Wiki

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code Wiki

No version for distro noetic showing humble. Known supported distros are highlighted in the buttons above.

py_trees_js package from py_trees_js repo

py_trees_js

ROS Distro
humble

API Docs
Browse Code
Wiki

Package Summary

Tags	No category tags.
Version	0.6.5
License	BSD
Build type	AMENT_PYTHON
Use	RECOMMENDED

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
CI status	No Continuous Integration
Released	RELEASED
Tags	No category tags.
Contributing	Help Wanted (0) Good First Issues (0) Pull Requests to Review (0)

Package Description

Javascript library for visualising behaviour trees.

Additional Links

Maintainers

Daniel Stonier

Authors

Daniel Stonier

README.md

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:

Install VSCode
Install the NVIDIA Container Toolkit
Clone and launch the demo:

$ 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:

Creating the web app for rendering trees and visualising a timeline
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

CHANGELOG

Changelog

0.6.5 (2025-01-11)

[formatter] reformat auto-generated resources.py
[linter] 2 lines between methods
[readme] fix preview instructions, elucidate non-nvidia alternatives
[vscode] devcontainer DISPLAY fix
Contributors: Daniel Stonier

0.6.4 (2022-02-24)

[actions] pre-merge and update-cache, #146
[actions] push containers, #144
[poetry] update project to use poetry, #143
[vscode] devcontainer workflows, #143
[tests] basic tests, formatting, linting, #143

0.6.3 (2020-05-05)

[js] remove buggy early view update and optimise them, #142

0.6.2 (2020-03-02)

[js] bugfix accidentally ignored tree_cache size, #123
... missed a few pull requests inbetween

0.6.0 (2019-12-27)

[js] accepting trees flagged with no status/graph change, #122
[js] blackboard views, #125, #133, #122, #135, #136

0.5.1 (2019-10-26)

[js] performance improvements, #120
[js] highlighted links, #115
[js] orthogonal link connections, for better visualisation
[qt] capture screenshots, #114

0.5.0 (2019-08-29)

[html] disable scrollbars, #110
[js] robustness against identical timestamps, #109
[js] improved window resize handling, #111
- new public api py_trees.canvas.on_window_resize and py_trees.timeline.on_window_resize

0.4.0 (2019-08-13)

Milestone - Polish & Release

0.3.1 (2019-08-07)

Milestone - Interactive Event Timeline

0.2.0 (2019-08-01)

Milestone - Streaming Trees / Qt

0.1.0 (2019-07-25)

Milestone - Render a Tree

Wiki Tutorials

This package does not provide any links to tutorials in it's rosindex metadata. You can check on the ROS Wiki Tutorials page for the package.

Package Dependencies

No dependencies on ROS packages.

System Dependencies

Name
python3-setuptools
pyqt5-dev-tools
qttools5-dev-tools
python3-qt5-bindings
python3-pyqt5.qtwebengine

Dependant Packages

Name	Deps
py_trees_ros_viewer

Launch files

No launch files found

Messages

No message files found.

Services

No service files found

Plugins

No plugins found.

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

API Docs Browse Code Wiki

py_trees_js package from py_trees_js repo

ROS Distrohumble

Package Summary

Repository Summary

Package Description

Additional Links

Maintainers

Authors

PyTrees Js

About

Features

Preview

Example - Simple Web App

Changelog

0.6.5 (2025-01-11)

0.6.4 (2022-02-24)

0.6.3 (2020-05-05)

0.6.2 (2020-03-02)

0.6.0 (2019-12-27)

0.5.1 (2019-10-26)

0.5.0 (2019-08-29)

0.4.0 (2019-08-13)

0.3.1 (2019-08-07)

0.2.0 (2019-08-01)

0.1.0 (2019-07-25)

Wiki Tutorials

Package Dependencies

System Dependencies

Dependant Packages

Launch files

Messages

Services

Plugins

Recent questions tagged py_trees_js at Robotics Stack Exchange

py_trees_js package from py_trees_js repo

ROS Distrojazzy

Package Summary

Repository Summary

Package Description

Additional Links

Maintainers

Authors

PyTrees Js

About

Features

Preview

Example - Simple Web App

Changelog

0.6.6 (2025-01-13)

0.6.5 (2025-01-11)

0.6.4 (2022-02-24)

0.6.3 (2020-05-05)

0.6.2 (2020-03-02)

0.6.0 (2019-12-27)

0.5.1 (2019-10-26)

0.5.0 (2019-08-29)

0.4.0 (2019-08-13)

0.3.1 (2019-08-07)

0.2.0 (2019-08-01)

0.1.0 (2019-07-25)

Wiki Tutorials

Package Dependencies

System Dependencies

Dependant Packages

Launch files

Messages

Services

Plugins

Recent questions tagged py_trees_js at Robotics Stack Exchange

py_trees_js package from py_trees_js repo

ROS Distrokilted

Package Summary

Repository Summary

Package Description

Additional Links

Maintainers

Authors

PyTrees Js

About

Features

ROS Distro
humble

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

ROS Distro
jazzy

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

ROS Distro
kilted

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

ROS Distro
rolling

Recent questions tagged `py_trees_js` at Robotics Stack Exchange

ROS Distro
humble