Trame tutorial

Appearance

Hands on ​

Option 1 (repo) ​

Fetching the code from repository ​

bash
git clone git@github.com:Kitware/sc25-trame-tutorial.git
cd sc25-trame-tutorial/

Virtual Environment ​

Create a virtual enviroment so you can run it

bash
uv venv -p 3.10
source .venv/bin/activate
uv pip install trame

Run example ​

bash
python ./code/01-fundamentals/01-state-events.py

Option 2 (copy/paste) ​

Create file with content ​

Create a file 01-state-events.py and paste the content below into it.

py
from trame.app import get_server
from trame.widgets import html
from trame.ui.html import DivLayout

# Trame setup -----------------------------------------------------------------
server = get_server()

# ViewModel -------------------------------------------------------------------
state = server.state

# Read/Write
state.a = 1
state["b"] = state.a * 2
assert state.b == state["b"]


# Reactivity
@state.change("a")
def update_b(a, **_):
    state.b = int(a) * 2


@state.change("a", "b")
def update_log(**_):
    msg = ["\nChanges to"]
    for var_name in state.modified_keys & {"a", "b"}:
        msg.append(f"{var_name}={state[var_name]}")

    state.log += " ".join(msg)


@state.change("log")
def trim_log(log, **_):
    lines = log.split("\n")
    if len(lines) > 10:
        state.log = "\n".join(lines[-10:])


# Model ----------------------------------------------------------------------
def reset_a():
    state.a = 10


# View ------------------------------------------------------------------------
with DivLayout(server):
    html.H1("Events and State")

    html.Div("a={{ a }} and b={{ b }}")

    html.H2("Events")

    html.Button("Reset a", click=reset_a)
    html.Button("Reset a & b", click="setAll({ b:2, a:1 })")
    html.Button("Reset log", click="log = ''")

    html.H2("States")

    html.Input(type="range", min=0, max=10, v_model="a")
    html.Input(type="range", min=0, max=30, v_model="b")

    html.Br()

    html.Textarea(
        v_model=("log", ""),
        disabled=True,
        rows=12,
        style="width: 15rem;",
    )

# Start Server ----------------------------------------------------------------
server.start()

Virtual Environment ​

Create a virtual enviroment so you can run it

bash
uv venv -p 3.10
source .venv/bin/activate
uv pip install trame

Run example ​

bash
python 01-state-events.py

Result ​

App