diff --git a/selfdrive/ui/layouts/settings/starpilot/aethergrid.py b/selfdrive/ui/layouts/settings/starpilot/aethergrid.py index 4fbd6828c..df04eeaee 100644 --- a/selfdrive/ui/layouts/settings/starpilot/aethergrid.py +++ b/selfdrive/ui/layouts/settings/starpilot/aethergrid.py @@ -333,8 +333,8 @@ def draw_list_panel_shell(frame: AetherListFrame, style: PanelStyle | None = Non _draw_rounded_stroke(glow_rect, _with_alpha(glow, 14), radius_px=20) -def init_list_panel(rect: rl.Rectangle, style: PanelStyle | None = None) -> tuple[AetherListFrame, rl.Rectangle, float]: - frame = build_list_panel_frame(rect) +def init_list_panel(rect: rl.Rectangle, style: PanelStyle | None = None, metrics: AetherListMetrics = AETHER_LIST_METRICS) -> tuple[AetherListFrame, rl.Rectangle, float]: + frame = build_list_panel_frame(rect, metrics) draw_list_panel_shell(frame, style) scroll_rect = frame.scroll content_width = scroll_rect.width - AETHER_LIST_METRICS.content_right_gutter @@ -575,10 +575,13 @@ def draw_tab_card( if subtitle: resolved_title_color = title_color or (style.title_color if current else style.subtitle_color) resolved_subtitle_color = subtitle_color or (style.title_color if current else style.muted_color) + gap = 4 + total_text_h = title_size + gap + subtitle_size + text_start_y = rect.y + (rect.height - total_text_h) / 2 _draw_text_fit_common( gui_app.font(FontWeight.MEDIUM), title, - rl.Vector2(rect.x + 12, rect.y + 7), + rl.Vector2(rect.x + 12, text_start_y), max(1.0, rect.width - 24), title_size, align_center=True, @@ -587,7 +590,7 @@ def draw_tab_card( _draw_text_fit_common( gui_app.font(FontWeight.NORMAL), subtitle, - rl.Vector2(rect.x + 12, rect.y + 26), + rl.Vector2(rect.x + 12, text_start_y + title_size + gap), max(1.0, rect.width - 24), subtitle_size, align_center=True, diff --git a/selfdrive/ui/layouts/settings/starpilot/maps.py b/selfdrive/ui/layouts/settings/starpilot/maps.py index bd4fb317c..439c30a94 100644 --- a/selfdrive/ui/layouts/settings/starpilot/maps.py +++ b/selfdrive/ui/layouts/settings/starpilot/maps.py @@ -75,8 +75,8 @@ BROWSER_SECTION_HEADER_HEIGHT = AETHER_LIST_METRICS.section_header_height BROWSER_SECTION_HEADER_GAP = AETHER_LIST_METRICS.section_header_gap BROWSER_INSET = AETHER_LIST_METRICS.content_right_gutter BROWSER_TAB_GAP = AETHER_LIST_METRICS.section_header_gap -BROWSER_CONTEXT_TAB_HEIGHT = 52 -BROWSER_REGION_ROW_HEIGHT = AETHER_COMPACT_ROW_HEIGHT +BROWSER_CONTEXT_TAB_HEIGHT = 56 +BROWSER_REGION_ROW_HEIGHT = AETHER_LIST_METRICS.row_height BROWSER_EMPTY_STATE_HEIGHT = 128 STATUS_CARD_INSET = BROWSER_INSET STATUS_BUTTON_HEIGHT = 52 @@ -92,6 +92,7 @@ MAPS_PANEL_STYLE = replace( current_border=rl.Color(16, 185, 129, 42), underline_color=rl.Color(16, 185, 129, 150), ) +MAPS_METRICS = replace(AETHER_LIST_METRICS, header_height=240) COUNTRIES_SECTION = next(section for section in MAPS_CATALOG if section["key"] == "countries") STATES_SECTION = next(section for section in MAPS_CATALOG if section["key"] == "states") @@ -253,11 +254,17 @@ class MapStatusCard(Widget): divider_bottom_offset=16, ) - primary_rect = rl.Rectangle(actions_x, rect.y + 10, actions_w, STATUS_BUTTON_HEIGHT) - bottom_y = primary_rect.y + primary_rect.height + STATUS_BUTTON_GAP - remove_w = max(132.0, min(154.0, actions_w * 0.42)) - self._remove_rect = rl.Rectangle(actions_x, bottom_y, remove_w, STATUS_REMOVE_HEIGHT) - schedule_rect = rl.Rectangle(actions_x + remove_w + 10, bottom_y, actions_w - remove_w - 10, STATUS_REMOVE_HEIGHT) + action_top = rect.y + 12 + col_gap = 10 + action_h = rect.height - 24 + left_col_w = actions_w * 0.42 + right_col_w = actions_w - left_col_w - col_gap + left_btn_gap = 6 + left_btn_h = (action_h - left_btn_gap) / 2 + + self._remove_rect = rl.Rectangle(actions_x, action_top, left_col_w, left_btn_h) + schedule_rect = rl.Rectangle(actions_x, action_top + left_btn_h + left_btn_gap, left_col_w, left_btn_h) + primary_rect = rl.Rectangle(actions_x + left_col_w + col_gap, action_top, right_col_w, action_h) self._primary_button.render(primary_rect) self._secondary_button.render(schedule_rect) @@ -273,7 +280,7 @@ class MapStatusCard(Widget): ) if self._controller._download_state.active: - center = rl.Vector2(actions_x + actions_w - 22, primary_rect.y + primary_rect.height / 2) + center = rl.Vector2(primary_rect.x + primary_rect.width - 22, primary_rect.y + primary_rect.height / 2) draw_busy_ring(center, rl.get_time() * 160, AetherListColors.PRIMARY, inner_radius=9, outer_radius=13, sweep=210, thickness=20) @@ -353,7 +360,7 @@ class MapBrowserCard(Widget): current=current, hovered=hovered, pressed=pressed, - title_size=22, + title_size=28, style=MAPS_PANEL_STYLE, ) @@ -392,8 +399,8 @@ class MapBrowserCard(Widget): current=current, hovered=hovered, pressed=pressed, - title_size=19, - subtitle_size=14, + title_size=24, + subtitle_size=17, show_underline=True, style=MAPS_PANEL_STYLE, ) @@ -403,11 +410,11 @@ class MapBrowserCard(Widget): rect, title, body, - title_size=26, - body_size=19, + title_size=32, + body_size=24, body_inset_x=40, title_top_padding=24, - body_height=44, + body_height=48, border=rl.Color(255, 255, 255, 10), style=MAPS_PANEL_STYLE, ) @@ -437,13 +444,13 @@ class MapBrowserCard(Widget): hovered=hovered, pressed=self._pressed_target == target_key, is_last=index == len(regions) - 1, - action_width=142, + action_width=188, action_pill=True, - action_text_size=15, - action_pill_height=40, - action_pill_width=112 if selected else 84, - title_size=26, - subtitle_size=17, + action_text_size=18, + action_pill_height=44, + action_pill_width=132 if selected else 108, + title_size=34, + subtitle_size=22, row_separator=MAPS_PANEL_STYLE.divider_color, current_bg=MAPS_PANEL_STYLE.current_fill, current_border=MAPS_PANEL_STYLE.current_border, @@ -456,7 +463,7 @@ class MapBrowserCard(Widget): return self._controller._browse_regions_for_active_group() def _render_section_header(self, rect: rl.Rectangle, title: str, *, count_text: str | None = None): - draw_section_header(rect, title, trailing_text=count_text or "", title_size=24, trailing_size=20, style=MAPS_PANEL_STYLE) + draw_section_header(rect, title, trailing_text=count_text or "", title_size=28, trailing_size=22, style=MAPS_PANEL_STYLE) def _measure_height(self, width: float) -> float: if self._controller._showing_source_picker(): @@ -1123,7 +1130,7 @@ class StarPilotMapsLayout(StarPilotPanel): def _render(self, rect: rl.Rectangle): self.set_rect(rect) - frame, scroll_rect, content_width = init_list_panel(rect, MAPS_PANEL_STYLE) + frame, scroll_rect, content_width = init_list_panel(rect, MAPS_PANEL_STYLE, MAPS_METRICS) hdr = frame.header draw_settings_panel_header(hdr, tr("Map Data"), tr("Use offline maps for speed-limit control and keep only the regions you need."), diff --git a/selfdrive/ui/layouts/settings/starpilot/system_settings.py b/selfdrive/ui/layouts/settings/starpilot/system_settings.py index b1e97371f..f3bca78af 100644 --- a/selfdrive/ui/layouts/settings/starpilot/system_settings.py +++ b/selfdrive/ui/layouts/settings/starpilot/system_settings.py @@ -14,6 +14,7 @@ from openpilot.system.hardware import HARDWARE from openpilot.system.ui.lib.application import gui_app, FontWeight, MouseEvent, MousePos from openpilot.system.ui.lib.multilang import tr from openpilot.system.ui.lib.scroll_panel2 import GuiScrollPanel2 +from openpilot.system.ui.lib.text_measure import measure_text_cached from openpilot.system.ui.widgets import DialogResult, Widget from openpilot.system.ui.widgets.confirm_dialog import ConfirmDialog, alert_dialog from openpilot.system.ui.widgets.keyboard import Keyboard @@ -36,7 +37,6 @@ from openpilot.selfdrive.ui.layouts.settings.starpilot.aethergrid import ( init_list_panel, draw_list_group_shell, draw_list_scroll_fades, - draw_metric_strip, draw_section_header, draw_selection_list_row, draw_settings_list_row, @@ -83,18 +83,18 @@ class SystemSettingsManagerView(Widget): HEADER_SUBTITLE_HEIGHT = 24 HEADER_SUMMARY_GAP = 12 HEADER_CARD_HEIGHT = 108 - TAB_HEIGHT = 52 + TAB_HEIGHT = 56 TAB_GAP = 10 TAB_BOTTOM_GAP = 18 SECTION_GAP = AETHER_LIST_METRICS.section_gap SECTION_HEADER_HEIGHT = AETHER_LIST_METRICS.section_header_height SECTION_HEADER_GAP = AETHER_LIST_METRICS.section_header_gap - ROW_HEIGHT = AETHER_COMPACT_ROW_HEIGHT + ROW_HEIGHT = AETHER_LIST_METRICS.row_height FADE_HEIGHT = AETHER_LIST_METRICS.fade_height COLUMN_GAP = 22 TWO_COLUMN_BREAKPOINT = 1180 - ACTION_PILL_WIDTH = 108 - DANGER_PILL_WIDTH = 96 + ACTION_PILL_WIDTH = 132 + DANGER_PILL_WIDTH = 112 PANEL_STYLE = DEFAULT_PANEL_STYLE @@ -526,24 +526,34 @@ class SystemSettingsManagerView(Widget): inset = 18 left_x = rect.x + inset left_w = rect.width * 0.40 - gui_label(rl.Rectangle(left_x, rect.y + 10, left_w, 22), tr("Current Drive State"), 20, AetherListColors.MUTED, FontWeight.MEDIUM) - gui_label(rl.Rectangle(left_x, rect.y + 34, left_w, 28), self._controller._get_force_drive_state(), 24, AetherListColors.HEADER, FontWeight.MEDIUM) - draw_metric_strip( - rl.Rectangle(left_x, rect.y + 70, max(240.0, rect.width * 0.38), 30), - [ - (tr("Storage"), self._controller.storage_summary()), - (tr("System Backups"), self._controller.backup_count_text()), - (tr("Toggle Snapshots"), self._controller.toggle_backup_count_text()), - ], - style=self.PANEL_STYLE, - label_top_offset=0, - value_top_offset=14, - divider_top_offset=2, - divider_bottom_offset=16, - ) + gui_label(rl.Rectangle(left_x, rect.y + 9, left_w, 22), tr("Current Drive State"), 20, AetherListColors.MUTED, FontWeight.MEDIUM) + gui_label(rl.Rectangle(left_x, rect.y + 33, left_w, 28), self._controller._get_force_drive_state(), 24, AetherListColors.HEADER, FontWeight.MEDIUM) control_w = max(300.0, min(420.0, rect.width * 0.34)) - control_rect = rl.Rectangle(rect.x + rect.width - control_w - inset, rect.y + 14, control_w, rect.height - 28) + control_x = rect.x + rect.width - control_w - inset + + metric_col_x = left_x + left_w + 24 + metric_col_w = control_x - 24 - metric_col_x + metric_rows = [ + (tr("Storage"), self._controller.storage_summary()), + (tr("System Backups"), self._controller.backup_count_text()), + (tr("Toggle Snapshots"), self._controller.toggle_backup_count_text()), + ] + metric_row_h = 18 + metric_row_gap = 6 + metric_start_y = rect.y + 14 + + label_font = gui_app.font(FontWeight.MEDIUM) + for i, (label, value) in enumerate(metric_rows): + row_y = metric_start_y + i * (metric_row_h + metric_row_gap) + label_w = measure_text_cached(label_font, label, 18).x + 4 + gui_label(rl.Rectangle(metric_col_x, row_y, label_w, metric_row_h + 2), + label, 18, AetherListColors.MUTED, FontWeight.MEDIUM) + value_x = metric_col_x + label_w + 12 + gui_label(rl.Rectangle(value_x, row_y, metric_col_x + metric_col_w - value_x, metric_row_h + 2), + value, 18, AetherListColors.HEADER, FontWeight.MEDIUM) + + control_rect = rl.Rectangle(control_x, rect.y + 14, control_w, rect.height - 28) self._drive_mode_control.render(control_rect) def _measure_content_height(self, width: float) -> float: @@ -614,8 +624,8 @@ class SystemSettingsManagerView(Widget): current=self._active_tab_key == tab["id"], hovered=hovered, pressed=pressed, - title_size=19, - subtitle_size=14, + title_size=24, + subtitle_size=17, show_underline=True, style=self.PANEL_STYLE, ) @@ -703,8 +713,8 @@ class SystemSettingsManagerView(Widget): pressed=pressed, is_last=is_last, show_chevron=False, - title_size=24, - subtitle_size=18, + title_size=30, + subtitle_size=22, style=self.PANEL_STYLE, ) @@ -738,13 +748,13 @@ class SystemSettingsManagerView(Widget): hovered=hovered, pressed=pressed, is_last=is_last, - action_width=154, + action_width=188, action_pill=True, - action_pill_height=40, - action_pill_width=92 if count == 0 else self.ACTION_PILL_WIDTH, - title_size=26, - subtitle_size=17, - action_text_size=15, + action_pill_height=44, + action_pill_width=108 if count == 0 else self.ACTION_PILL_WIDTH, + title_size=34, + subtitle_size=22, + action_text_size=18, row_separator=self.PANEL_STYLE.divider_color, action_fill=AetherListColors.CURRENT_BG, action_border=rl.Color(89, 116, 151, 42), @@ -786,13 +796,13 @@ class SystemSettingsManagerView(Widget): hovered=hovered, pressed=pressed, is_last=is_last, - action_width=154, + action_width=188, action_pill=True, - action_pill_height=40, + action_pill_height=44, action_pill_width=self.DANGER_PILL_WIDTH if danger else self.ACTION_PILL_WIDTH, - title_size=26, - subtitle_size=17, - action_text_size=15, + title_size=34, + subtitle_size=22, + action_text_size=18, row_separator=self.PANEL_STYLE.divider_color, action_fill=action_fill, action_border=action_border,