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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import matplotlib.pyplot as plt
import io
import base64
from trame.app import TrameApp
from trame.widgets import html, vuetify3 as v3
from trame.ui.vuetify3 import SinglePageLayout
def text_to_base64_png(
text: str, width: int = 600, height: int = 200, dpi: int = 100
) -> str:
# Convert pixels to inches for figsize
figsize = (width / dpi, height / dpi)
# Create the figure
fig, ax = plt.subplots(figsize=figsize, dpi=dpi)
ax.axis("off") # Hide axes
# Add text at the center
ax.text(0.5, 0.5, text, fontsize=14, ha="center", va="center")
# Save to buffer
buf = io.BytesIO()
plt.savefig(buf, format="png", bbox_inches="tight", dpi=dpi)
plt.close(fig)
buf.seek(0)
# Convert to base64
img_base64 = base64.b64encode(buf.read()).decode("ascii")
return f"data:image/png;base64,{img_base64}"
# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------
class TabImages(TrameApp):
def __init__(self, name=None):
super().__init__(server=name)
self.state.left_logo_img = text_to_base64_png(
"Left Logo Image", width=512, height=488
)
self.state.right_logo_img = text_to_base64_png(
"Right Logo Image", width=490, height=300
)
self.state.main_canvas_left_img = text_to_base64_png(
"Left Main Canvas Image", width=700, height=488
)
self.state.main_canvas_right_img = text_to_base64_png(
"Right Main Canvas Image", width=700, height=488
)
self.build_ui()
def build_ui(self):
with SinglePageLayout(self.server) as layout:
layout.title.set_text("Dummy GUI")
layout.icon.hide()
# Toolbar with left and right logos
with layout.toolbar:
with v3.VRow(classes="align-center"):
with v3.VCol(cols=6):
html.Img(src=("left_logo_img",), style="height: 80px;")
with v3.VCol(cols=6, classes="d-flex justify-end"):
html.Img(src=("right_logo_img",), style="height: 80px;")
# Tabs
with layout.content:
with v3.VTabs(v_model=("active_tab", "main"), grow=True):
v3.VTab("Main", value="main")
v3.VTab("Logic", value="logic")
v3.VTab("Overview", value="overview")
with v3.VTabsWindow(v_model="active_tab"):
# Main tab
with v3.VTabsWindowItem(value="main"):
with v3.VContainer(fluid=True):
with v3.VRow():
with v3.VCol(cols=12, md=6):
html.Img(
src=("main_canvas_left_img",),
style="width: 100%; height: auto;",
)
with v3.VCol(cols=12, md=6):
html.Img(
src=("main_canvas_right_img",),
style="width: 100%; height: auto;",
)
# Logic tab
with v3.VTabsWindowItem(value="logic"):
with v3.VContainer(fluid=True):
with v3.VRow():
with v3.VCol(cols=12, md=6):
html.Img(
src=("main_canvas_left_img",),
style="width: 100%; height: auto;",
)
with v3.VCol(cols=12, md=6):
html.Img(
src=("main_canvas_right_img",),
style="width: 100%; height: auto;",
)
# Overview tab
with v3.VTabsWindowItem(value="overview"):
with v3.VContainer(fluid=True):
with v3.VRow():
with v3.VCol(cols=12, md=6):
html.Img(
src=("main_canvas_left_img",),
style="width: 100%; height: auto;",
)
with v3.VCol(cols=12, md=6):
html.Img(
src=("main_canvas_right_img",),
style="width: 100%; height: auto;",
)
if __name__ == "__main__":
app = TabImages()
app.server.start()
|
