Trame - the basics
Sebastien Jourdain
Outline (~2 hours)
⬣ Trame and vtk(.js)
⬣ Introduction ● Usage exploration
● What is trame? ⬣ Cheat sheets
● How trame works? ● Syntax explained
● Why is it revolutionary? ⬣ Cookiecutter
⬣ Getting started ● Standardisation for python
● Documentation ⬣ ParaView gotcha
● Tutorial & examples ● pvpython is not your python
● Cookie cutter ⬣ Deployment
● Desktop, jupyter and cloud
Introduction
15 minutes
What is trame?
⬣ Simple
All the logic and UI definition can be done in plain Python
⬣ Powerful
Python offer scientific and information data visualization with
capable data processing (numpy, Plotly, Matplotlib, VTK, ParaView…)
⬣ Ubiquitous
Runs on laptops, desktops, clusters, and the cloud while displaying
everywhere (phone, tablet, laptop, workstation)
How trame works?
0 - Just a Python file
1 - Simple data exchange
2 - Simple code binding
3 - Efficient UI definition
4 - Add-on widgets
Why is it revolutionary?
New way Old way
Break every 6 months
Maintenance
cost
Just a Python application
No need to fix build system every 6 months.
Only your python code to maintain and deploy.
Uniform and simple way for coding and binding UI
Complex client/server state
management and binding Complex process
Getting started
5 minutes
Getting started
⬣ Documentation
● https://kitware.github.io/trame/
● https://trame.readthedocs.io/
⬣ Tutorial & Examples
● https://github.com/Kitware/trame-tutorial
● https://github.com/Kitware/trame => ./examples
⬣ Cookiecutter
● https://github.com/Kitware/trame-cookiecutter
Trame and VTK
50 minutes
VTK (C++, Python) Vtk.js
⬣ Server only (python) ⬣ Client only (browser)
⬣ I/O ⬣ Rendering
⬣ Data processing ⬣ Limited processing
⬣ Rendering ⬣ Limited I/O
trame
How many ways can you make the same application?
VTK for processing and VTK for processing
No VTK, just vtk.js
vtk.js for rendering and rendering
~ClientView.py LocalRendering.py RemoteRendering.py
Let’s get started on your machine
mkdir trame-course && cd $_
python3.9 -m venv .venv
source ./.venv/bin/activate
python -m pip install --upgrade pip
pip install "trame"
# Just to get the examples
git clone https://github.com/Kitware/trame.git
VTK without VTK
vtk_class=
python ./trame/examples/06_vtk/00_ClientOnly/client-side-cone.py
VTK mesh rendering
pip install vtk
python ./trame/examples/06_vtk/01_SimpleCone/ClientView.py
VTK rendering without rendering
python ./trame/examples/06_vtk/01_SimpleCone/LocalRendering.py
VTK rendering with rendering
python ./trame/examples/06_vtk/01_SimpleCone/RemoteRendering.py
What you’ve seen?
⬣ Layout (trame.ui.*)
⬣ Widgets (trame.widgets.*)
⬣ Trame server, state, controller (trame.app.get_server)
● State usage, initial value, monitoring changes
● Method binding with UI and/or controller
⬣ VTK can be integrated with various granularity
● vtk.js only
● VTK mesh and vtk.js rendering
● VTK rendering with either local or remote rendering
Cheat sheets
10 minutes
State handling
Shared
State
Method handling and controller helper
Method calls
From JavaScript to Python
@click=... click=...
Any invalid Python character become “_” for any given attribute key.
https://vuetifyjs.com/en/components/tooltips/
Cookiecutter
25 minutes
Making your own application (Cookiecutter)
⬣ Start with the cookiecutter
pip install cookiecutter
cookiecutter gh:kitware/trame-cookiecutter
Anatomy of the cookiecutter
20 minutes of
exploration and
⬣ Generic trame application experimentation
● Code layout and split
⬣ Bundles
● Desktop
● Service with docker
⬣ Jupyter integration Q&A
● Embed application inside a cell
⬣ Example on how to bring your JavaScript widgets
● Adding vue.js components (option at creation)
project_name [Trame App]: Visualis
Select project_type:
1 - App
2 - App with Components
3 - Components
Choose from 1, 2, 3 [1]:
author [Trame Developer]: Kitware Inc.
short_description [An example Trame application]: VTK viewer for 3d stuff
Select license:
1 - BSD License
2 - MIT License
3 - ISC License (ISCL)
4 - Apache Software License
5 - GNU General Public License v3 (GPLv3)
6 - Other
Choose from 1, 2, 3, 4, 5, 6 [1]: 4
include_continuous_integration [y]: n
package_name [visualis]:
import_name [visualis]:
Let’s install it + various add-on…
cd visualis
pip install -e .
pip install pywebview jupyterlab
Let’s run it…
visualis
visualis --app
jupyter-lab
from visualis.app.jupyter import show
show()
show(height=200)
ParaView
10 minutes
ParaView Gotcha
⬣ ParaView can run VTK code too…
● We can use ParaView to provide VTK-EGL backend
⬣ ParaView has its own python but without trame…
● How to run your application with your venv?
￮ Use “pvpython -m paraview.apps.trame …”
￮ Use a custom python start file
⬣ ParaView is not* compatible with your python
⬣ Try running paraview-visualizer
● https://github.com/Kitware/paraview-visualizer
Deployment
5 minutes
Deployment
⬣ Desktop
● pywebview + pyinstaller
● Use tk for file dialog and skip browser security limitation
⬣ Cloud service
● Docker image with multi users routing for a single node
● Reverse connection + relay (infinity scaling)
⬣ Jupyter
● Trame provides helpers to run and display your
application within your Jupyter cells
Examples
Applications
Questions / Discussions
[email protected]
Additional materials
⬣ Trame
● https://kitware.github.io/trame/
⬣ Course video
● https://vimeo.com/761096621/af2287747f
⬣ Course materials
● https://github.com/Kitware/trame-tutorial/tree/master/course/introduction
