From 46ae67b6071c3983eb4cb0dc46bb3af832c88e1d Mon Sep 17 00:00:00 2001 From: Shane Smiskol Date: Tue, 10 Feb 2026 17:15:59 -0800 Subject: [PATCH] BigButton: fix alignment and style (#37153) * correct from bottom alignment * temp * fix scale animation w/ btn_y * home settings are always 64 * cleanup * some clean up * make 23 const * rev * more --- selfdrive/ui/mici/layouts/settings/device.py | 3 ++ .../ui/mici/layouts/settings/settings.py | 15 ++++--- selfdrive/ui/mici/widgets/button.py | 44 +++++++++---------- 3 files changed, 35 insertions(+), 27 deletions(-) diff --git a/selfdrive/ui/mici/layouts/settings/device.py b/selfdrive/ui/mici/layouts/settings/device.py index f4b6217ac5..60eb7e5b01 100644 --- a/selfdrive/ui/mici/layouts/settings/device.py +++ b/selfdrive/ui/mici/layouts/settings/device.py @@ -120,6 +120,9 @@ class PairBigButton(BigButton): def __init__(self): super().__init__("pair", "connect.comma.ai", "icons_mici/settings/comma_icon.png", icon_size=(33, 60)) + def _get_label_font_size(self): + return 64 + def _update_state(self): if ui_state.prime_state.is_paired(): self.set_text("paired") diff --git a/selfdrive/ui/mici/layouts/settings/settings.py b/selfdrive/ui/mici/layouts/settings/settings.py index 3917899032..a6f59a0389 100644 --- a/selfdrive/ui/mici/layouts/settings/settings.py +++ b/selfdrive/ui/mici/layouts/settings/settings.py @@ -30,22 +30,27 @@ class PanelInfo: instance: Widget +class SettingsBigButton(BigButton): + def _get_label_font_size(self): + return 64 + + class SettingsLayout(NavWidget): def __init__(self): super().__init__() self._params = Params() self._current_panel = None # PanelType.DEVICE - toggles_btn = BigButton("toggles", "", "icons_mici/settings.png") + toggles_btn = SettingsBigButton("toggles", "", "icons_mici/settings.png") toggles_btn.set_click_callback(lambda: self._set_current_panel(PanelType.TOGGLES)) - network_btn = BigButton("network", "", "icons_mici/settings/network/wifi_strength_full.png", icon_size=(76, 56)) + network_btn = SettingsBigButton("network", "", "icons_mici/settings/network/wifi_strength_full.png", icon_size=(76, 56)) network_btn.set_click_callback(lambda: self._set_current_panel(PanelType.NETWORK)) - device_btn = BigButton("device", "", "icons_mici/settings/device_icon.png", icon_size=(74, 60)) + device_btn = SettingsBigButton("device", "", "icons_mici/settings/device_icon.png", icon_size=(74, 60)) device_btn.set_click_callback(lambda: self._set_current_panel(PanelType.DEVICE)) - developer_btn = BigButton("developer", "", "icons_mici/settings/developer_icon.png", icon_size=(64, 60)) + developer_btn = SettingsBigButton("developer", "", "icons_mici/settings/developer_icon.png", icon_size=(64, 60)) developer_btn.set_click_callback(lambda: self._set_current_panel(PanelType.DEVELOPER)) - firehose_btn = BigButton("firehose", "", "icons_mici/settings/firehose.png", icon_size=(52, 62)) + firehose_btn = SettingsBigButton("firehose", "", "icons_mici/settings/firehose.png", icon_size=(52, 62)) firehose_btn.set_click_callback(lambda: self._set_current_panel(PanelType.FIREHOSE)) self._scroller = Scroller([ diff --git a/selfdrive/ui/mici/widgets/button.py b/selfdrive/ui/mici/widgets/button.py index a5f7ee686e..56dd3f7a23 100644 --- a/selfdrive/ui/mici/widgets/button.py +++ b/selfdrive/ui/mici/widgets/button.py @@ -17,6 +17,7 @@ SCROLLING_SPEED_PX_S = 50 COMPLICATION_SIZE = 36 LABEL_COLOR = rl.Color(255, 255, 255, int(255 * 0.9)) LABEL_HORIZONTAL_PADDING = 40 +LABEL_VERTICAL_PADDING = 23 # visually matches 30 in figma COMPLICATION_GREY = rl.Color(0xAA, 0xAA, 0xAA, 255) PRESSED_SCALE = 1.15 if DO_ZOOM else 1.07 @@ -118,14 +119,12 @@ class BigButton(Widget): self._rotate_icon_t: float | None = None - self._label_font = gui_app.font(FontWeight.DISPLAY) - self._value_font = gui_app.font(FontWeight.ROMAN) - - self._label = UnifiedLabel(text, font_size=self._get_label_font_size(), font_weight=FontWeight.DISPLAY, + self._label = UnifiedLabel(text, font_size=self._get_label_font_size(), font_weight=FontWeight.BOLD, text_color=LABEL_COLOR, alignment_vertical=rl.GuiTextAlignmentVertical.TEXT_ALIGN_BOTTOM, scroll=scroll, line_height=0.9) self._sub_label = UnifiedLabel(value, font_size=COMPLICATION_SIZE, font_weight=FontWeight.ROMAN, text_color=COMPLICATION_GREY, alignment_vertical=rl.GuiTextAlignmentVertical.TEXT_ALIGN_BOTTOM) + self._update_label_layout() self._load_images() @@ -149,25 +148,27 @@ class BigButton(Widget): return int(self._rect.width - LABEL_HORIZONTAL_PADDING * 2 - icon_size) def _get_label_font_size(self): - if len(self.text) < 12: - font_size = 64 - elif len(self.text) < 17: - font_size = 48 + if len(self.text) <= 18: + return 48 else: - font_size = 42 + return 42 + def _update_label_layout(self): + self._label.set_font_size(self._get_label_font_size()) if self.value: - font_size -= 20 - - return font_size + self._label.set_alignment_vertical(rl.GuiTextAlignmentVertical.TEXT_ALIGN_TOP) + else: + self._label.set_alignment_vertical(rl.GuiTextAlignmentVertical.TEXT_ALIGN_BOTTOM) def set_text(self, text: str): self.text = text self._label.set_text(text) + self._update_label_layout() def set_value(self, value: str): self.value = value self._sub_label.set_text(value) + self._update_label_layout() def get_value(self) -> str: return self.value @@ -189,21 +190,20 @@ class BigButton(Widget): rl.draw_texture_ex(txt_bg, (btn_x, btn_y), 0, scale, rl.WHITE) # LABEL ------------------------------------------------------------------ - lx = self._rect.x + LABEL_HORIZONTAL_PADDING - ly = btn_y + self._rect.height - 33 # - 40# - self._get_label_font_size() / 2 - - if self.value: - sub_label_height = self._sub_label.get_content_height(self._width_hint()) - sub_label_rect = rl.Rectangle(lx, ly - sub_label_height, self._width_hint(), sub_label_height) - self._sub_label.render(sub_label_rect) - ly -= sub_label_height + label_x = self._rect.x + LABEL_HORIZONTAL_PADDING label_color = LABEL_COLOR if self.enabled else rl.Color(255, 255, 255, int(255 * 0.35)) self._label.set_color(label_color) - label_height = self._label.get_content_height(self._width_hint()) - label_rect = rl.Rectangle(lx, ly - label_height, self._width_hint(), label_height) + label_rect = rl.Rectangle(label_x, btn_y + LABEL_VERTICAL_PADDING, self._width_hint(), + self._rect.height - LABEL_VERTICAL_PADDING * 2) self._label.render(label_rect) + if self.value: + label_y = btn_y + self._rect.height - LABEL_VERTICAL_PADDING + sub_label_height = self._sub_label.get_content_height(self._width_hint()) + sub_label_rect = rl.Rectangle(label_x, label_y - sub_label_height, self._width_hint(), sub_label_height) + self._sub_label.render(sub_label_rect) + # ICON ------------------------------------------------------------------- if self._txt_icon: rotation = 0