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")
# 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)