Scribd
Upload
82 views34 pages

Introduction To Trame

Uploaded by

Arsgor Russia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
82 views34 pages

Introduction To Trame

Uploaded by

Arsgor Russia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

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

You might also like