technicalkiwi/lighting-controller
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI: Make all elements 50% bigger for better touch interface

Browse Source 
- 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:
Jimmy
2025-10-04 09:29:59 +13:00
parent aaf515d8f4
commit 324fa463be
2 changed files with 31 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/ui_client.py
View File

@@ -353,7 +353,7 @@ class UIClient:
self.root.title("Lighting Controller - UI Client") self.root.title("Lighting Controller - UI Client")
# Set window size to fit all content properly - 4x4 button grid needs more space # 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 # Load saved window geometry if available
self.load_window_geometry() self.load_window_geometry()
@@ -404,9 +404,9 @@ class UIClient:
# Configure ttk style # Configure ttk style
style = ttk.Style() style = ttk.Style()
style.theme_use("alt") 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", 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) # Improve contrast for Combobox (dark theme)
try: try:
style.configure("TCombobox", style.configure("TCombobox",
@@ -446,8 +446,8 @@ class UIClient:
textvariable=self.midi_port_var, textvariable=self.midi_port_var,
values=[], values=[],
state="readonly", state="readonly",
font=("Arial", 12, "bold"), font=("Arial", 18, "bold"),
width=20 width=30
) )
self.midi_dropdown.pack(padx=8, pady=4, fill="x") self.midi_dropdown.pack(padx=8, pady=4, fill="x")
self.midi_dropdown.bind("<<ComboboxSelected>>", self.on_midi_port_change) self.midi_dropdown.bind("<<ComboboxSelected>>", self.on_midi_port_change)
@@ -466,15 +466,15 @@ class UIClient:
text="Status: Disconnected", text="Status: Disconnected",
bg=bg_color, bg=bg_color,
fg="red", fg="red",
font=("Arial", 10) font=("Arial", 15)
) )
self.midi_status_label.pack(padx=8, pady=2) self.midi_status_label.pack(padx=8, pady=2)
# Selected color preview boxes (on the right) # Selected color preview boxes (on the right)
previews_frame = ttk.LabelFrame(top_bar, text="Selected Colors") previews_frame = ttk.LabelFrame(top_bar, text="Selected Colors")
previews_frame.pack(side="right", padx=8) 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.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=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=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.color1_preview.grid(row=0, column=0, padx=8, pady=8)
self.color2_preview.grid(row=1, 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 # 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 = ttk.LabelFrame(controls_frame, text="Dials (CC30-37)")
dials_frame.pack(side="left", padx=12) dials_frame.pack(side="left", padx=12)
for c in range(2): for c in range(2):
dials_frame.grid_columnconfigure(c, minsize=140) dials_frame.grid_columnconfigure(c, minsize=210)
for rr in range(4): for rr in range(4):
dials_frame.grid_rowconfigure(rr, minsize=70) dials_frame.grid_rowconfigure(rr, minsize=105)
self.dials_boxes = [] self.dials_boxes = []
placeholders = { placeholders = {
@@ -517,22 +517,22 @@ class UIClient:
text=placeholders.get((r, c), "-"), text=placeholders.get((r, c), "-"),
bg=bg_color, bg=bg_color,
fg=fg_color, fg=fg_color,
font=("Arial", 14), font=("Arial", 21),
padx=6, pady=6, padx=9, pady=9,
borderwidth=2, relief="ridge", borderwidth=3, relief="ridge",
width=14, height=4, width=21, height=6,
anchor="center", justify="center", 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) self.dials_boxes.append(lbl)
# Knobs display # Knobs display
knobs_frame = ttk.LabelFrame(controls_frame, text="Knobs (CC38-45)") knobs_frame = ttk.LabelFrame(controls_frame, text="Knobs (CC38-45)")
knobs_frame.pack(side="left", padx=12) knobs_frame.pack(side="left", padx=12)
for c in range(2): for c in range(2):
knobs_frame.grid_columnconfigure(c, minsize=140) knobs_frame.grid_columnconfigure(c, minsize=210)
for rr in range(4): for rr in range(4):
knobs_frame.grid_rowconfigure(rr, minsize=70) knobs_frame.grid_rowconfigure(rr, minsize=105)
self.knobs_boxes = [] self.knobs_boxes = []
knob_placeholders = { knob_placeholders = {
@@ -548,13 +548,13 @@ class UIClient:
text=knob_placeholders.get((r, c), "-"), text=knob_placeholders.get((r, c), "-"),
bg=bg_color, bg=bg_color,
fg=fg_color, fg=fg_color,
font=("Arial", 14), font=("Arial", 21),
padx=6, pady=6, padx=9, pady=9,
borderwidth=2, relief="ridge", borderwidth=3, relief="ridge",
width=14, height=4, width=21, height=6,
anchor="center", justify="center", 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) self.knobs_boxes.append(lbl)
# Buttons display # Buttons display
@@ -564,9 +564,9 @@ class UIClient:
buttons1_frame = ttk.LabelFrame(buttons_frame, text="Buttons (notes 36-51)") buttons1_frame = ttk.LabelFrame(buttons_frame, text="Buttons (notes 36-51)")
buttons1_frame.pack(side="top", pady=8) buttons1_frame.pack(side="top", pady=8)
for c in range(4): 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): for rr in range(1, 5):
buttons1_frame.grid_rowconfigure(rr, minsize=70) buttons1_frame.grid_rowconfigure(rr, minsize=105)
self.button1_cells = [] self.button1_cells = []
for r in range(4): for r in range(4):
@@ -576,13 +576,13 @@ class UIClient:
text="", text="",
bg=bg_color, bg=bg_color,
fg=fg_color, fg=fg_color,
font=("Arial", 14), font=("Arial", 21),
padx=6, pady=6, padx=9, pady=9,
borderwidth=2, relief="ridge", borderwidth=3, relief="ridge",
width=14, height=4, width=21, height=6,
anchor="center", justify="center", 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) self.button1_cells.append(lbl)
# Bind clicks to open/focus child window and select pattern # Bind clicks to open/focus child window and select pattern
for idx, lbl in enumerate(self.button1_cells): for idx, lbl in enumerate(self.button1_cells):
@@ -596,7 +596,7 @@ class UIClient:
text="Control Server: Disconnected", text="Control Server: Disconnected",
bg=bg_color, bg=bg_color,
fg="red", fg="red",
font=("Arial", 12) font=("Arial", 18)
) )
self.connection_status.pack(pady=8) self.connection_status.pack(pady=8)

1
test/test_control_server.py
View File

@@ -97,6 +97,7 @@ async def run_test(uri: str, messages: list[dict], sleep_s: float):
def parse_args(): def parse_args():
p = argparse.ArgumentParser(description="Send UI commands to control_server WebSocket") p = argparse.ArgumentParser(description="Send UI commands to control_server WebSocket")
load_dotenv() load_dotenv()
default_uri = os.getenv("CONTROL_SERVER_URI", "ws://10.1.1.117:8765") default_uri = os.getenv("CONTROL_SERVER_URI", "ws://10.1.1.117:8765")