`_ is an open-source platform for creating interactive and powerful visual analytics applications. Based on Python, and leveraging platforms such as VTK, ParaView, and Vega, it is possible to create web-based applications in minutes.
7 |
8 | .. raw:: html
9 |
10 |
11 |
12 |
13 | What is Trame?
14 | --------------
15 |
16 | Trame is a Python framework for building reactive web applications.
17 |
18 | * All the logic and UI definition can be done in plain Python
19 | * Runs on laptops, desktops, clusters, and the cloud while displaying everywhere (phone, tablet, laptop, workstation)
20 |
21 |
22 | .. tab-set::
23 |
24 | .. tab-item:: Documentation
25 |
26 | Learn more about Trame
27 |
28 | .. button-link:: https://kitware.github.io/trame/
29 | :color: primary
30 | :shadow:
31 |
32 | Trame Documentation
33 |
34 |
35 | .. tab-item:: Tutorial
36 |
37 | Gain hands on experience with Trame through the tutorial.
38 |
39 |
40 | .. button-link:: https://github.com/Kitware/trame-tutorial
41 | :color: primary
42 | :shadow:
43 |
44 | Trame Tutorial
45 |
46 |
47 | 3D visualization in web applications
48 | ------------------------------------
49 |
50 | PyVista and Trame work excellently together to provide a cutting-edge capabilities for 3D
51 | visualization in reactive web applications.
52 |
53 | 1. Trame provides a high-level framework for building reactive, stateful web applications
54 | 2. PyVista provides a high-level framework for 3D visualization, exposing VTK in a “Pythonic” manner
55 |
56 | High-level framework 1 + high-level framework 2 = a streamlined approach to making powerful web applications with 3D visualization front and center.
57 |
58 | The following code creates a simple Trame application with a PyVista plotter embedded in the UI.
59 | This code can be used as a base for building all of your Trame applications with PyVista as it
60 | contains all of the boilerplate code needed to get started.
61 |
62 |
63 | .. tab-set::
64 |
65 | .. tab-item:: Code
66 |
67 | .. code:: python
68 |
69 | import pyvista as pv
70 | from pyvista import examples
71 | from pyvista.trame.ui import plotter_ui
72 | from trame.app import get_server
73 | from trame.ui.vuetify3 import SinglePageLayout
74 |
75 | # Always set PyVista to plot off screen with Trame
76 | pv.OFF_SCREEN = True
77 |
78 | server = get_server()
79 | state, ctrl = server.state, server.controller
80 |
81 | mesh = examples.load_random_hills()
82 |
83 | pl = pv.Plotter()
84 | pl.add_mesh(mesh)
85 |
86 | with SinglePageLayout(server) as layout:
87 | with layout.content:
88 | # Use PyVista's Trame UI helper method
89 | # this will add UI controls
90 | view = plotter_ui(pl)
91 |
92 | server.start()
93 |
94 | .. tab-item:: Web App
95 |
96 | .. image:: ../../images/trame-pyvista.png
97 | :alt: A simple Trame application with PyVista
98 | :align: center
99 |
100 |
101 | .. note::
102 |
103 | PyVista's Jupyter backend is powered by Trame! If you've been using
104 | PyVista in Jupyter lately, you've been using Trame all along -- our
105 | Jupyter backend is a micro Trame application.
106 |
107 |
108 | Trame applications
109 | ~~~~~~~~~~~~~~~~~~
110 |
111 | Using an existing app
112 |
113 | .. code:: python
114 |
115 | from trame.app.demo import Cone
116 |
117 | app = Cone("demo")
118 | await app.ui.ready
119 | app.ui
120 |
121 |
122 | Try Pan3D: ``pip install pan3d``
123 |
124 | .. code:: python
125 |
126 | from pan3d import DatasetBuilder
127 |
128 | builder = DatasetBuilder(viewer=True)
129 |
130 | builder.import_config('example_sst_xarray.json')
131 |
132 | # Show viewer in cell output
133 | await builder.viewer.ready
134 | builder.viewer.ui
135 |
136 |
137 | Exercises
138 | ~~~~~~~~~
139 |
140 | Do not run these examples in Jupyter but rather as standalone scripts.
141 |
--------------------------------------------------------------------------------
/tutorial/09_trame/a_getting_started.py:
--------------------------------------------------------------------------------
1 | # Getting started with PyVista and Trame
2 | """
3 | Getting started
4 | ~~~~~~~~~~~~~~~
5 |
6 | Getting started with PyVista and Trame
7 |
8 | """
9 |
10 | import pyvista as pv
11 | from pyvista import examples
12 |
13 | ###############################################################################
14 | # PyVista's Jupyter backend is powered by **Trame**. So by default you are
15 | # using trame without knowing it.
16 | #
17 | # By default PyVista is serving you a micro trame application that let you
18 | # toggle between **Remote** and **Local** rendering along with some various
19 | # options to configure your visualization.
20 | #
21 | # **First try the Remote/Local rendering toggle and notice the differences**
22 | #
23 | # .. raw:: html
24 | #
25 | #
26 | # Look at the orientation axis between the 2 rendering modes.
27 | #
28 | #
29 | # One sends images generated on the server side while the other is sending geometry to vtk.js.
30 | dataset = examples.download_lucy()
31 | dataset.plot(smooth_shading=True, color="white")
32 |
33 | ###############################################################################
34 | # Building applications with PyVista and Trame
35 | #
36 | # Now, let's build a simple application that updates the mesh color with the click of a button.
37 |
38 | import random
39 |
40 | from pyvista.plotting.colors import hexcolors
41 | from pyvista.trame.ui import get_viewer
42 | from trame.ui.vuetify3 import SinglePageLayout
43 | from trame.widgets import vuetify3 as v3
44 |
45 | plotter = pv.Plotter()
46 | actor = plotter.add_mesh(dataset)
47 | viewer = get_viewer(plotter)
48 | view = None
49 |
50 |
51 | def change_color() -> None:
52 | actor.prop.color = random.choice(list(hexcolors.keys())) # noqa: S311
53 | view.update()
54 |
55 |
56 | # Create UI
57 | with SinglePageLayout(viewer.server) as layout:
58 | with layout.toolbar.clear() as tb:
59 | tb.density = "compact"
60 | tb.theme = "dark"
61 | viewer.ui_controls(mode="trame")
62 | v3.VBtn(icon="mdi-palette", click=change_color)
63 | with layout.content:
64 | view = viewer.ui(add_menu=False, mode="trame")
65 |
66 |
67 | # Show UI
68 | await layout.ready
69 | layout
70 |
--------------------------------------------------------------------------------
/tutorial/09_trame/a_trame_simple.py:
--------------------------------------------------------------------------------
1 | """
2 | Simple Trame App
3 | ~~~~~~~~~~~~~~~~
4 |
5 | A simple example of how to create a Trame app with a PyVista Plotter.
6 |
7 | This example contains the boilerplate code to use anytime you are creating a
8 | new Trame application with PyVista.
9 |
10 | """
11 |
12 | import pyvista as pv
13 | from pyvista import examples
14 | from pyvista.trame.ui import plotter_ui
15 | from trame.app import get_server
16 | from trame.ui.vuetify3 import SinglePageLayout
17 |
18 | pv.OFF_SCREEN = True
19 |
20 | server = get_server()
21 | state, ctrl = server.state, server.controller
22 |
23 | mesh = examples.load_random_hills()
24 |
25 | pl = pv.Plotter()
26 | pl.add_mesh(mesh)
27 |
28 | with SinglePageLayout(server) as layout, layout.content:
29 | view = plotter_ui(pl)
30 |
31 | # Show UI
32 | await layout.ready
33 | layout
34 | ###############################################################################
35 | # .. raw:: html
36 | #
37 | #
38 | #
39 | # 
40 | #
41 | #
42 |
--------------------------------------------------------------------------------
/tutorial/09_trame/b_trame_actor_color.py:
--------------------------------------------------------------------------------
1 | """
2 | Control the Color of an Actor
3 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4 |
5 | Extending our simple example to have a dropdown menu to control the color of
6 | the actor.
7 |
8 | """
9 |
10 | import pyvista as pv
11 | from pyvista.plotting.colors import hexcolors
12 | from pyvista.trame.ui import plotter_ui
13 | from trame.app import get_server
14 | from trame.ui.vuetify3 import SinglePageLayout
15 | from trame.widgets import vuetify3
16 |
17 | pv.OFF_SCREEN = True
18 |
19 | server = get_server()
20 | state, ctrl = server.state, server.controller
21 |
22 | mesh = pv.Cone()
23 |
24 | pl = pv.Plotter()
25 | actor = pl.add_mesh(mesh, color="seagreen")
26 |
27 |
28 | @state.change("color")
29 | def color(color="seagreen", **kwargs) -> None:
30 | actor.prop.color = color
31 | ctrl.view_update()
32 |
33 |
34 | with SinglePageLayout(server) as layout:
35 | with layout.toolbar:
36 | vuetify3.VSpacer()
37 | vuetify3.VSelect(
38 | label="Color",
39 | v_model=("color", "seagreen"),
40 | items=("array_list", list(hexcolors.keys())),
41 | hide_details=True,
42 | density="compact",
43 | outlined=True,
44 | classes="pt-1 ml-2",
45 | style="max-width: 250px",
46 | )
47 |
48 | with (
49 | layout.content,
50 | vuetify3.VContainer(
51 | fluid=True,
52 | classes="pa-0 fill-height",
53 | ),
54 | ):
55 | # Use PyVista UI template for Plotters
56 | view = plotter_ui(pl, default_server_rendering=False)
57 | ctrl.view_update = view.update
58 |
59 | # Show UI
60 | await layout.ready
61 | layout
62 | ###############################################################################
63 | # .. raw:: html
64 | #
65 | #
66 | #
67 | #
68 | #
69 | #
70 |
--------------------------------------------------------------------------------
/tutorial/09_trame/b_trame_vtk.py:
--------------------------------------------------------------------------------
1 | """
2 | Using VTK/PyVista and Trame
3 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~
4 |
5 | In this application, we will connect a VTK filter with PyVista.
6 |
7 | It will use Trame to visualize the results and interactively control
8 | parameters of the VTK filter.
9 |
10 | """
11 |
12 | import pyvista as pv
13 | from pyvista import examples
14 | from trame.app import get_server
15 | from trame.ui.vuetify3 import VAppLayout
16 | from trame.widgets import vtk as vtk_widgets
17 | from trame.widgets import vuetify3 as v3
18 | from vtkmodules.vtkFiltersGeneral import vtkWarpScalar
19 |
20 | mesh = examples.load_random_hills()
21 | warp_by_scalar = vtkWarpScalar()
22 | warp_by_scalar.SetInputData(mesh)
23 | warp_by_scalar.SetScaleFactor(0.3)
24 |
25 | plotter = pv.Plotter()
26 | actor = plotter.add_mesh(warp_by_scalar)
27 | plotter.reset_camera()
28 |
29 | # Trame server setup
30 | server = get_server("trame_vtk_example")
31 | state, ctrl = server.state, server.controller
32 |
33 |
34 | @state.change("scale")
35 | def update_scale(scale, **kwargs) -> None:
36 | warp_by_scalar.SetScaleFactor(scale)
37 | ctrl.view_update()
38 |
39 |
40 | with VAppLayout(server, full_height=True) as layout: # noqa: SIM117
41 | with v3.VContainer(fluid=True, classes="fill-height"):
42 | with vtk_widgets.VtkRemoteView(plotter.render_window, interactive_ratio=1) as view:
43 | ctrl.view_update = view.update
44 | ctrl.view_reset_camera = view.reset_camera
45 |
46 | # Event binding
47 | v3.VBtn(
48 | icon="mdi-crop-free",
49 | click=ctrl.view_reset_camera,
50 | classes="position-absolute",
51 | style="left: 1rem; top: 1rem; z-index: 1",
52 | density="compact",
53 | )
54 |
55 | # State binding
56 | v3.VSlider(
57 | v_model=("scale", 0.3),
58 | min=0,
59 | max=0.5,
60 | step=0.01,
61 | density="compact",
62 | classes="position-absolute",
63 | style="right: 1rem; top: 1rem; width: 400px; z-index: 1",
64 | )
65 |
66 | # Make sure the app is running and ready
67 | await layout.ready
68 | # Show UI in result
69 | layout
70 |
--------------------------------------------------------------------------------
/tutorial/09_trame/c_trame_scalars.py:
--------------------------------------------------------------------------------
1 | """
2 | Control Scalar Array
3 | ~~~~~~~~~~~~~~~~~~~~
4 |
5 | Extending our simple example to have a dropdown menu to control which
6 | scalar array is used to color the mesh.
7 | """
8 |
9 | import pyvista as pv
10 | from pyvista import examples
11 | from pyvista.trame.ui import plotter_ui
12 | from trame.app import get_server
13 | from trame.ui.vuetify3 import SinglePageLayout
14 | from trame.widgets import vuetify3
15 |
16 | pv.OFF_SCREEN = True
17 |
18 | server = get_server()
19 | state, ctrl = server.state, server.controller
20 |
21 | mesh = examples.download_antarctica_velocity()
22 |
23 | pl = pv.Plotter()
24 | actor = pl.add_mesh(mesh)
25 | pl.view_xy()
26 |
27 |
28 | @state.change("scalars")
29 | def set_scalars(scalars=mesh.active_scalars_name, **kwargs) -> None:
30 | actor.mapper.array_name = scalars
31 | actor.mapper.scalar_range = mesh.get_data_range(scalars)
32 | ctrl.view_update()
33 |
34 |
35 | @state.change("log_scale")
36 | def set_log_scale(log_scale=False, **kwargs) -> None: # noqa: FBT002
37 | actor.mapper.lookup_table.log_scale = log_scale
38 | ctrl.view_update()
39 |
40 |
41 | with SinglePageLayout(server) as layout:
42 | with layout.toolbar:
43 | vuetify3.VSpacer()
44 | vuetify3.VCheckbox(
45 | label="Log Scale",
46 | v_model=("log_scale", False),
47 | hide_details=True,
48 | density="compact",
49 | outlined=True,
50 | )
51 | vuetify3.VSelect(
52 | label="Scalars",
53 | v_model=("scalars", mesh.active_scalars_name),
54 | items=("array_list", list(mesh.point_data.keys())),
55 | hide_details=True,
56 | density="compact",
57 | outlined=True,
58 | classes="pt-1 ml-2",
59 | style="max-width: 250px",
60 | )
61 |
62 | with (
63 | layout.content,
64 | vuetify3.VContainer(
65 | fluid=True,
66 | classes="pa-0 fill-height",
67 | ),
68 | ):
69 | # Use PyVista UI template for Plotters
70 | view = plotter_ui(pl)
71 | ctrl.view_update = view.update
72 |
73 | # Show UI
74 | await layout.ready
75 | layout
76 | ###############################################################################
77 | # .. raw:: html
78 | #
79 | #
80 | #
81 | #
82 | #
83 | #
84 |
--------------------------------------------------------------------------------
/tutorial/09_trame/d_trame_scalar_range.py:
--------------------------------------------------------------------------------
1 | """
2 | Control Scalar Range
3 | ~~~~~~~~~~~~~~~~~~~~
4 |
5 | Extending our simple example to control the color limits of the mapped scalars.
6 | """
7 |
8 | import pyvista as pv
9 | from pyvista.trame.ui import plotter_ui
10 | from trame.app import get_server
11 | from trame.ui.vuetify3 import SinglePageLayout
12 | from trame.widgets import vuetify3
13 |
14 | pv.OFF_SCREEN = True
15 |
16 | server = get_server()
17 | state, ctrl = server.state, server.controller
18 |
19 | mesh = pv.Wavelet()
20 |
21 | pl = pv.Plotter()
22 | actor = pl.add_mesh(mesh)
23 |
24 |
25 | @state.change("scalar_range")
26 | def set_scalar_range(scalar_range=mesh.get_data_range(), **kwargs) -> None: # noqa: B008
27 | actor.mapper.scalar_range = scalar_range
28 | ctrl.view_update()
29 |
30 |
31 | with SinglePageLayout(server) as layout:
32 | with layout.toolbar:
33 | vuetify3.VSpacer()
34 | vuetify3.VRangeSlider(
35 | thumb_size=16,
36 | thumb_label=True,
37 | label="Range",
38 | v_model=("scalar_range", [0, 300]),
39 | min=("0",),
40 | max=("500",),
41 | density="compact",
42 | hide_details=True,
43 | style="max-width: 400px",
44 | )
45 |
46 | with (
47 | layout.content,
48 | vuetify3.VContainer(
49 | fluid=True,
50 | classes="pa-0 fill-height",
51 | ),
52 | ):
53 | # Use PyVista UI template for Plotters
54 | view = plotter_ui(pl)
55 | ctrl.view_update = view.update
56 |
57 | # Show UI
58 | await layout.ready
59 | layout
60 | ###############################################################################
61 | # .. raw:: html
62 | #
63 | #
64 | #
65 | #
66 | #
67 | #
68 |
--------------------------------------------------------------------------------
/tutorial/09_trame/e_trame_algorithm.py:
--------------------------------------------------------------------------------
1 | """
2 | Using VTK, PyVista, and Trame
3 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4 |
5 | This example demonstrates how to use VTK, PyVista, and Trame together
6 | to show how the three libraries complement each other.
7 | """
8 |
9 | import pyvista as pv
10 | from pyvista.trame.ui import plotter_ui
11 | from trame.app import get_server
12 | from trame.ui.vuetify3 import SinglePageLayout
13 | from trame.widgets import vuetify3
14 | from vtkmodules.vtkFiltersSources import vtkConeSource
15 |
16 | pv.OFF_SCREEN = True
17 |
18 | server = get_server()
19 | state, ctrl = server.state, server.controller
20 |
21 | source = vtkConeSource()
22 |
23 | pl = pv.Plotter()
24 | pl.add_mesh(source, color="seagreen")
25 |
26 |
27 | @state.change("resolution")
28 | def update_contour(resolution, **kwargs) -> None:
29 | source.SetResolution(int(resolution))
30 | ctrl.view_update()
31 |
32 |
33 | with SinglePageLayout(server) as layout:
34 | with layout.toolbar:
35 | vuetify3.VSpacer()
36 | vuetify3.VSlider(
37 | v_model=("resolution", 15),
38 | min=5,
39 | max=30,
40 | hide_details=True,
41 | density="compact",
42 | style="max-width: 300px",
43 | change=ctrl.view_update,
44 | )
45 | vuetify3.VProgressLinear(
46 | indeterminate=True,
47 | absolute=True,
48 | bottom=True,
49 | active=("trame__busy",),
50 | )
51 |
52 | with (
53 | layout.content,
54 | vuetify3.VContainer(
55 | fluid=True,
56 | classes="pa-0 fill-height",
57 | ),
58 | ):
59 | # Use PyVista UI template for Plotters
60 | view = plotter_ui(pl)
61 | ctrl.view_update = view.update
62 |
63 | # Show UI
64 | await layout.ready
65 | layout
66 | ###############################################################################
67 | # .. raw:: html
68 | #
69 | #
70 | #
71 | #
72 | #
73 | #
74 |
--------------------------------------------------------------------------------
/tutorial/09_trame/f_trame_open_file.py:
--------------------------------------------------------------------------------
1 | """
2 | Open Mesh File
3 | ~~~~~~~~~~~~~~
4 |
5 | An example of opening a mesh file from the browser and viewing it with PyVista.
6 |
7 | """
8 |
9 | import tempfile
10 | from pathlib import Path
11 |
12 | import pyvista as pv
13 | from pyvista.trame.ui import plotter_ui
14 | from trame.app import get_server
15 | from trame.app.file_upload import ClientFile
16 | from trame.ui.vuetify3 import SinglePageLayout
17 | from trame.widgets import vuetify3
18 |
19 | pv.OFF_SCREEN = True
20 |
21 | server = get_server()
22 | state, ctrl = server.state, server.controller
23 |
24 | pl = pv.Plotter()
25 |
26 |
27 | @server.state.change("file_exchange")
28 | def handle(file_exchange, **kwargs) -> None:
29 | file = ClientFile(file_exchange)
30 |
31 | if file.content:
32 | print(file.info) # noqa: T201
33 | bytes = file.content # noqa: A001
34 | with tempfile.NamedTemporaryFile(suffix=file.name) as path:
35 | with Path(path.name).open("wb") as f:
36 | f.write(bytes)
37 | ds = pv.read(path.name)
38 | pl.add_mesh(ds, name=file.name)
39 | pl.reset_camera()
40 | else:
41 | pl.clear_actors()
42 | pl.reset_camera()
43 |
44 |
45 | with SinglePageLayout(server) as layout:
46 | with layout.toolbar:
47 | vuetify3.VSpacer()
48 | vuetify3.VFileInput(
49 | show_size=True,
50 | small_chips=True,
51 | truncate_length=25,
52 | v_model=("file_exchange", None),
53 | density="compact",
54 | hide_details=True,
55 | style="max-width: 300px;",
56 | )
57 | vuetify3.VProgressLinear(
58 | indeterminate=True, absolute=True, bottom=True, active=("trame__busy",)
59 | )
60 |
61 | with layout.content: # noqa: SIM117
62 | with vuetify3.VContainer(
63 | fluid=True, classes="pa-0 fill-height", style="position: relative;"
64 | ):
65 | view = plotter_ui(pl)
66 | ctrl.view_update = view.update
67 |
68 | # Show UI
69 | await layout.ready
70 | layout
71 | ###############################################################################
72 | # .. raw:: html
73 | #
74 | #
75 | #
76 | #
77 | #
78 | #
79 |
--------------------------------------------------------------------------------