1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
from trame.app import get_server
from trame.ui.html import DivLayout
from trame.widgets import html
# -----------------------------------------------------------------------------
# Trame app
# -----------------------------------------------------------------------------
server = get_server()
state = server.state
# -----------------------------------------------------------------------------
# State setup
# -----------------------------------------------------------------------------
# Creating new entries to the shared state
state.a = 1
state["b"] = 2
# Force state.d to be client side only
state.client_only("b")
# state.trame__client_only += ["b"]
# -----------------------------------------------------------------------------
# UI setup
# -----------------------------------------------------------------------------
# UI helper to extent layout
def create_ui_for_state_var(name):
with html.Div(style="margin: 20px; padding: 20px; border: solid 1px #333;"):
html.Div(
f"Variable \"{name}\" {{{{ {name} }}}} == get({{{{ get('{name}') }}}})",
style="padding: 10px;",
)
with html.Div(style="padding: 10px;"):
html.Button(f"{name}+", click=f"{name} += 1")
html.Button(f"{name}-", click=f"{name} -= 1")
html.Button(f"{name}=5", click=f"{name} = 5")
html.Button(f"set({name}+)", click=f"set('{name}', {name} + 1)")
html.Button(f"set({name}-)", click=f"set('{name}', {name} - 1)")
html.Button(f"set({name}=5)", click=f"set('{name}', 5)")
# Start with some UI to control a
with DivLayout(server) as layout:
create_ui_for_state_var("a")
create_ui_for_state_var("b")
# -----------------------------------------------------------------------------
# State Listener
# -----------------------------------------------------------------------------
@state.change("a", "b")
def state_change(a, b, **kwargs):
print(f"State updated a={a} b={b}")
# -----------------------------------------------------------------------------
# start server
# -----------------------------------------------------------------------------
if __name__ == "__main__":
server.start()
|
