Skip to content

Exposing a trame application into Jupyter

Disable warning

python
import os
os.environ["TRAME_DISABLE_V3_WARNING"] = "1"
import os
os.environ["TRAME_DISABLE_V3_WARNING"] = "1"

Define application

py
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import html, vuetify, vtk


class Cone:
    def __init__(self, name=None):
        self.server = get_server(name, client_type="vue2")
        self._ui = None

        # Build UI
        self.ui

    @property
    def state(self):
        return self.server.state

    @property
    def ctrl(self):
        return self.server.controller

    @property
    def resolution(self):
        return self.state.resolution

    @resolution.setter
    def resolution(self, v):
        with self.state:
            self.state.resolution = v

    def reset_resolution(self):
        self.resolution = 6

    @property
    def ui(self):
        if self._ui is None:
            with SinglePageLayout(self.server) as layout:
                self._ui = layout
                with layout.toolbar:
                    html.Div("a: {{ a }}")
                    vuetify.VSpacer()
                    vuetify.VSlider(
                        v_model=("resolution", 6), min=3, max=60, hide_details=True
                    )
                    vuetify.VBtn("Reset", click=self.reset_resolution)
                with layout.content:
                    with vuetify.VContainer(fluid=True, classes="pa-0 fill-height"):
                        with vtk.VtkView() as vtk_view:
                            self.ctrl.reset_camera = vtk_view.reset_camera
                            with vtk.VtkGeometryRepresentation():
                                vtk.VtkAlgorithm(
                                    vtkClass="vtkConeSource", state=("{ resolution }",)
                                )

        return self._ui
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import html, vuetify, vtk


class Cone:
    def __init__(self, name=None):
        self.server = get_server(name, client_type="vue2")
        self._ui = None

        # Build UI
        self.ui

    @property
    def state(self):
        return self.server.state

    @property
    def ctrl(self):
        return self.server.controller

    @property
    def resolution(self):
        return self.state.resolution

    @resolution.setter
    def resolution(self, v):
        with self.state:
            self.state.resolution = v

    def reset_resolution(self):
        self.resolution = 6

    @property
    def ui(self):
        if self._ui is None:
            with SinglePageLayout(self.server) as layout:
                self._ui = layout
                with layout.toolbar:
                    html.Div("a: {{ a }}")
                    vuetify.VSpacer()
                    vuetify.VSlider(
                        v_model=("resolution", 6), min=3, max=60, hide_details=True
                    )
                    vuetify.VBtn("Reset", click=self.reset_resolution)
                with layout.content:
                    with vuetify.VContainer(fluid=True, classes="pa-0 fill-height"):
                        with vtk.VtkView() as vtk_view:
                            self.ctrl.reset_camera = vtk_view.reset_camera
                            with vtk.VtkGeometryRepresentation():
                                vtk.VtkAlgorithm(
                                    vtkClass="vtkConeSource", state=("{ resolution }",)
                                )

        return self._ui

Use application within Jupyter

python
cone = Cone()
await cone.ui.ready
cone.ui
cone = Cone()
await cone.ui.ready
cone.ui

Trame in Jupyer

Edit state in another cell

python
cone.resolution = 4
cone.resolution = 4