UI: Make all elements 50% bigger for better touch interface
- Increase window size from 1800x1200 to 2700x1800 - Scale all font sizes by 50% (14pt → 21pt, 12pt → 18pt, etc.) - Make all buttons and controls 50% larger - Increase grid minimum sizes from 140x70 to 210x105 - Scale button dimensions from 14x4 to 21x6 characters - Increase padding and spacing by 50% (6px → 9px) - Make border widths thicker (2px → 3px) - Improve touch-friendliness and readability - Maintain proportional scaling across all UI elements
This commit is contained in:
@@ -353,7 +353,7 @@ class UIClient:
|
||||
self.root.title("Lighting Controller - UI Client")
|
||||
|
||||
# Set window size to fit all content properly - 4x4 button grid needs more space
|
||||
self.root.geometry("1800x1200")
|
||||
self.root.geometry("2700x1800")
|
||||
|
||||
# Load saved window geometry if available
|
||||
self.load_window_geometry()
|
||||
@@ -404,9 +404,9 @@ class UIClient:
|
||||
# Configure ttk style
|
||||
style = ttk.Style()
|
||||
style.theme_use("alt")
|
||||
style.configure(".", background=bg_color, foreground=fg_color, font=("Arial", 14))
|
||||
style.configure(".", background=bg_color, foreground=fg_color, font=("Arial", 21))
|
||||
style.configure("TNotebook", background=bg_color, borderwidth=0)
|
||||
style.configure("TNotebook.Tab", background=bg_color, foreground=fg_color, font=("Arial", 30), padding=[10, 5])
|
||||
style.configure("TNotebook.Tab", background=bg_color, foreground=fg_color, font=("Arial", 45), padding=[15, 8])
|
||||
# Improve contrast for Combobox (dark theme)
|
||||
try:
|
||||
style.configure("TCombobox",
|
||||
@@ -446,8 +446,8 @@ class UIClient:
|
||||
textvariable=self.midi_port_var,
|
||||
values=[],
|
||||
state="readonly",
|
||||
font=("Arial", 12, "bold"),
|
||||
width=20
|
||||
font=("Arial", 18, "bold"),
|
||||
width=30
|
||||
)
|
||||
self.midi_dropdown.pack(padx=8, pady=4, fill="x")
|
||||
self.midi_dropdown.bind("<<ComboboxSelected>>", self.on_midi_port_change)
|
||||
@@ -466,15 +466,15 @@ class UIClient:
|
||||
text="Status: Disconnected",
|
||||
bg=bg_color,
|
||||
fg="red",
|
||||
font=("Arial", 10)
|
||||
font=("Arial", 15)
|
||||
)
|
||||
self.midi_status_label.pack(padx=8, pady=2)
|
||||
|
||||
# Selected color preview boxes (on the right)
|
||||
previews_frame = ttk.LabelFrame(top_bar, text="Selected Colors")
|
||||
previews_frame.pack(side="right", padx=8)
|
||||
self.color1_preview = tk.Label(previews_frame, text="Color 1", width=14, height=2, bg="#000000", fg="#FFFFFF", font=("Arial", 12), borderwidth=2, relief="ridge")
|
||||
self.color2_preview = tk.Label(previews_frame, text="Color 2", width=14, height=2, bg="#000000", fg="#FFFFFF", font=("Arial", 12), borderwidth=2, relief="ridge")
|
||||
self.color1_preview = tk.Label(previews_frame, text="Color 1", width=21, height=3, bg="#000000", fg="#FFFFFF", font=("Arial", 18), borderwidth=3, relief="ridge")
|
||||
self.color2_preview = tk.Label(previews_frame, text="Color 2", width=21, height=3, bg="#000000", fg="#FFFFFF", font=("Arial", 18), borderwidth=3, relief="ridge")
|
||||
self.color1_preview.grid(row=0, column=0, padx=8, pady=8)
|
||||
self.color2_preview.grid(row=1, column=0, padx=8, pady=8)
|
||||
# Click to choose which target is set by MIDI
|
||||
@@ -499,9 +499,9 @@ class UIClient:
|
||||
dials_frame = ttk.LabelFrame(controls_frame, text="Dials (CC30-37)")
|
||||
dials_frame.pack(side="left", padx=12)
|
||||
for c in range(2):
|
||||
dials_frame.grid_columnconfigure(c, minsize=140)
|
||||
dials_frame.grid_columnconfigure(c, minsize=210)
|
||||
for rr in range(4):
|
||||
dials_frame.grid_rowconfigure(rr, minsize=70)
|
||||
dials_frame.grid_rowconfigure(rr, minsize=105)
|
||||
|
||||
self.dials_boxes = []
|
||||
placeholders = {
|
||||
@@ -517,22 +517,22 @@ class UIClient:
|
||||
text=placeholders.get((r, c), "-"),
|
||||
bg=bg_color,
|
||||
fg=fg_color,
|
||||
font=("Arial", 14),
|
||||
padx=6, pady=6,
|
||||
borderwidth=2, relief="ridge",
|
||||
width=14, height=4,
|
||||
font=("Arial", 21),
|
||||
padx=9, pady=9,
|
||||
borderwidth=3, relief="ridge",
|
||||
width=21, height=6,
|
||||
anchor="center", justify="center",
|
||||
)
|
||||
lbl.grid(row=r, column=c, padx=6, pady=6, sticky="nsew")
|
||||
lbl.grid(row=r, column=c, padx=9, pady=9, sticky="nsew")
|
||||
self.dials_boxes.append(lbl)
|
||||
|
||||
# Knobs display
|
||||
knobs_frame = ttk.LabelFrame(controls_frame, text="Knobs (CC38-45)")
|
||||
knobs_frame.pack(side="left", padx=12)
|
||||
for c in range(2):
|
||||
knobs_frame.grid_columnconfigure(c, minsize=140)
|
||||
knobs_frame.grid_columnconfigure(c, minsize=210)
|
||||
for rr in range(4):
|
||||
knobs_frame.grid_rowconfigure(rr, minsize=70)
|
||||
knobs_frame.grid_rowconfigure(rr, minsize=105)
|
||||
|
||||
self.knobs_boxes = []
|
||||
knob_placeholders = {
|
||||
@@ -548,13 +548,13 @@ class UIClient:
|
||||
text=knob_placeholders.get((r, c), "-"),
|
||||
bg=bg_color,
|
||||
fg=fg_color,
|
||||
font=("Arial", 14),
|
||||
padx=6, pady=6,
|
||||
borderwidth=2, relief="ridge",
|
||||
width=14, height=4,
|
||||
font=("Arial", 21),
|
||||
padx=9, pady=9,
|
||||
borderwidth=3, relief="ridge",
|
||||
width=21, height=6,
|
||||
anchor="center", justify="center",
|
||||
)
|
||||
lbl.grid(row=r, column=c, padx=6, pady=6, sticky="nsew")
|
||||
lbl.grid(row=r, column=c, padx=9, pady=9, sticky="nsew")
|
||||
self.knobs_boxes.append(lbl)
|
||||
|
||||
# Buttons display
|
||||
@@ -564,9 +564,9 @@ class UIClient:
|
||||
buttons1_frame = ttk.LabelFrame(buttons_frame, text="Buttons (notes 36-51)")
|
||||
buttons1_frame.pack(side="top", pady=8)
|
||||
for c in range(4):
|
||||
buttons1_frame.grid_columnconfigure(c, minsize=140)
|
||||
buttons1_frame.grid_columnconfigure(c, minsize=210)
|
||||
for rr in range(1, 5):
|
||||
buttons1_frame.grid_rowconfigure(rr, minsize=70)
|
||||
buttons1_frame.grid_rowconfigure(rr, minsize=105)
|
||||
|
||||
self.button1_cells = []
|
||||
for r in range(4):
|
||||
@@ -576,13 +576,13 @@ class UIClient:
|
||||
text="",
|
||||
bg=bg_color,
|
||||
fg=fg_color,
|
||||
font=("Arial", 14),
|
||||
padx=6, pady=6,
|
||||
borderwidth=2, relief="ridge",
|
||||
width=14, height=4,
|
||||
font=("Arial", 21),
|
||||
padx=9, pady=9,
|
||||
borderwidth=3, relief="ridge",
|
||||
width=21, height=6,
|
||||
anchor="center", justify="center",
|
||||
)
|
||||
lbl.grid(row=1 + (3 - r), column=c, padx=6, pady=6, sticky="nsew")
|
||||
lbl.grid(row=1 + (3 - r), column=c, padx=9, pady=9, sticky="nsew")
|
||||
self.button1_cells.append(lbl)
|
||||
# Bind clicks to open/focus child window and select pattern
|
||||
for idx, lbl in enumerate(self.button1_cells):
|
||||
@@ -596,7 +596,7 @@ class UIClient:
|
||||
text="Control Server: Disconnected",
|
||||
bg=bg_color,
|
||||
fg="red",
|
||||
font=("Arial", 12)
|
||||
font=("Arial", 18)
|
||||
)
|
||||
self.connection_status.pack(pady=8)
|
||||
|
||||
|
||||
@@ -97,6 +97,7 @@ async def run_test(uri: str, messages: list[dict], sleep_s: float):
|
||||
|
||||
|
||||
def parse_args():
|
||||
|
||||
p = argparse.ArgumentParser(description="Send UI commands to control_server WebSocket")
|
||||
load_dotenv()
|
||||
default_uri = os.getenv("CONTROL_SERVER_URI", "ws://10.1.1.117:8765")
|
||||
|
||||
Reference in New Issue
Block a user