refactor(raylib): Fix and standardize rounded corners

selfdrive/ui/layouts/settings/settings.py

@@ -9,6 +9,7 @@
 from openpilot.selfdrive.ui.layouts.settings.software import SoftwareLayout
 from openpilot.selfdrive.ui.layouts.settings.toggles import TogglesLayout
 from openpilot.system.ui.lib.application import gui_app, FontWeight, MousePos
+from openpilot.system.ui.lib.rounded_corners import get_roundness
 from openpilot.system.ui.lib.text_measure import measure_text_cached
 from openpilot.system.ui.widgets import Widget
 
@@ -21,6 +22,7 @@
 CLOSE_BTN_SIZE = 200
 NAV_BTN_HEIGHT = 110
 PANEL_MARGIN = 50
+PANEL_BORDER_RADIUS = 20
 
 # Colors
 SIDEBAR_COLOR = rl.BLACK
@@ -43,7 +45,7 @@ class PanelType(IntEnum):
 @dataclass
 class PanelInfo:
   name: str
-  instance: object
+  instance: Widget
   button_rect: rl.Rectangle = rl.Rectangle(0, 0, 0, 0)
 
 
@@ -123,11 +125,9 @@ def _draw_sidebar(self, rect: rl.Rectangle):
       y += NAV_BTN_HEIGHT
 
   def _draw_current_panel(self, rect: rl.Rectangle):
-    rl.draw_rectangle_rounded(
-      rl.Rectangle(rect.x + 10, rect.y + 10, rect.width - 20, rect.height - 20), 0.04, 30, PANEL_COLOR
-    )
+    panel_rect = rl.Rectangle(rect.x + 10, rect.y + 10, rect.width - 20, rect.height - 20)
+    rl.draw_rectangle_rounded(panel_rect, get_roundness(panel_rect, PANEL_BORDER_RADIUS), 30, PANEL_COLOR)
     content_rect = rl.Rectangle(rect.x + PANEL_MARGIN, rect.y + 25, rect.width - (PANEL_MARGIN * 2), rect.height - 50)
-    # rl.draw_rectangle_rounded(content_rect, 0.03, 30, PANEL_COLOR)
     panel = self._panels[self._current_panel]
     if panel.instance:
       panel.instance.render(content_rect)

selfdrive/ui/layouts/sidebar.py

@@ -5,13 +5,15 @@
 from cereal import log
 from openpilot.selfdrive.ui.ui_state import ui_state
 from openpilot.system.ui.lib.application import gui_app, FontWeight, MousePos
+from openpilot.system.ui.lib.rounded_corners import get_roundness
 from openpilot.system.ui.lib.text_measure import measure_text_cached
 from openpilot.system.ui.widgets import Widget
 
 SIDEBAR_WIDTH = 300
 METRIC_HEIGHT = 126
 METRIC_WIDTH = 240
 METRIC_MARGIN = 30
+METRIC_BORDER_RADIUS = 20
 
 SETTINGS_BTN = rl.Rectangle(50, 35, 200, 117)
 HOME_BTN = rl.Rectangle(60, 860, 180, 180)
@@ -188,11 +190,11 @@ def _draw_metric(self, rect: rl.Rectangle, metric: MetricData, y: float):
     # Draw colored left edge (clipped rounded rectangle)
     edge_rect = rl.Rectangle(metric_rect.x + 4, metric_rect.y + 4, 100, 118)
     rl.begin_scissor_mode(int(metric_rect.x + 4), int(metric_rect.y), 18, int(metric_rect.height))
-    rl.draw_rectangle_rounded(edge_rect, 0.18, 10, metric.color)
+    rl.draw_rectangle_rounded(edge_rect, get_roundness(edge_rect, METRIC_BORDER_RADIUS), 10, metric.color)
     rl.end_scissor_mode()
 
     # Draw border
-    rl.draw_rectangle_rounded_lines_ex(metric_rect, 0.15, 10, 2, Colors.METRIC_BORDER)
+    rl.draw_rectangle_rounded_lines_ex(metric_rect, get_roundness(metric_rect, METRIC_BORDER_RADIUS), 10, 2, Colors.METRIC_BORDER)
 
     # Draw text
     text = f"{metric.label}\n{metric.value}"

selfdrive/ui/onroad/alert_renderer.py

@@ -5,6 +5,7 @@
 from openpilot.selfdrive.ui.ui_state import ui_state
 from openpilot.system.hardware import TICI
 from openpilot.system.ui.lib.application import gui_app, FontWeight, DEFAULT_FPS
+from openpilot.system.ui.lib.rounded_corners import get_roundness
 from openpilot.system.ui.lib.text_measure import measure_text_cached
 from openpilot.system.ui.widgets import Widget
 from openpilot.system.ui.widgets.label import gui_text_box
@@ -133,8 +134,7 @@ def _draw_background(self, rect: rl.Rectangle, alert: Alert) -> None:
     color = ALERT_COLORS.get(alert.status, ALERT_COLORS[AlertStatus.normal])
 
     if alert.size != AlertSize.full:
-      roundness = ALERT_BORDER_RADIUS / (min(rect.width, rect.height) / 2)
-      rl.draw_rectangle_rounded(rect, roundness, 10, color)
+      rl.draw_rectangle_rounded(rect, get_roundness(rect, ALERT_BORDER_RADIUS), 10, color)
     else:
       rl.draw_rectangle_rec(rect, color)
 

selfdrive/ui/onroad/hud_renderer.py

@@ -4,6 +4,7 @@
 from openpilot.selfdrive.ui.onroad.exp_button import ExpButton
 from openpilot.selfdrive.ui.ui_state import ui_state, UIStatus
 from openpilot.system.ui.lib.application import gui_app, FontWeight
+from openpilot.system.ui.lib.rounded_corners import get_roundness
 from openpilot.system.ui.lib.text_measure import measure_text_cached
 from openpilot.system.ui.widgets import Widget
 
@@ -21,6 +22,7 @@ class UIConfig:
   set_speed_width_metric: int = 200
   set_speed_width_imperial: int = 172
   set_speed_height: int = 204
+  set_speed_border_radius: int = 20
   wheel_icon_size: int = 144
 
 
@@ -130,8 +132,9 @@ def _draw_set_speed(self, rect: rl.Rectangle) -> None:
     y = rect.y + 45
 
     set_speed_rect = rl.Rectangle(x, y, set_speed_width, UI_CONFIG.set_speed_height)
-    rl.draw_rectangle_rounded(set_speed_rect, 0.2, 30, COLORS.black_translucent)
-    rl.draw_rectangle_rounded_lines_ex(set_speed_rect, 0.2, 30, 6, COLORS.border_translucent)
+    set_speed_roundness = get_roundness(set_speed_rect, UI_CONFIG.set_speed_border_radius)
+    rl.draw_rectangle_rounded(set_speed_rect, set_speed_roundness, 30, COLORS.black_translucent)
+    rl.draw_rectangle_rounded_lines_ex(set_speed_rect, set_speed_roundness, 30, 6, COLORS.border_translucent)
 
     max_color = COLORS.grey
     set_speed_color = COLORS.dark_grey

selfdrive/ui/widgets/pairing_dialog.py

@@ -7,8 +7,9 @@
 from openpilot.common.swaglog import cloudlog
 from openpilot.common.params import Params
 from openpilot.system.ui.lib.application import FontWeight, gui_app
-from openpilot.system.ui.lib.wrap_text import wrap_text
+from openpilot.system.ui.lib.rounded_corners import get_roundness
 from openpilot.system.ui.lib.text_measure import measure_text_cached
+from openpilot.system.ui.lib.wrap_text import wrap_text
 
 
 class PairingDialog:
@@ -143,7 +144,7 @@ def _render_instructions(self, rect: rl.Rectangle) -> None:
 
   def _render_qr_code(self, rect: rl.Rectangle) -> None:
     if not self.qr_texture:
-      rl.draw_rectangle_rounded(rect, 0.1, 20, rl.Color(240, 240, 240, 255))
+      rl.draw_rectangle_rounded(rect, get_roundness(rect, 30), 20, rl.Color(240, 240, 240, 255))
       error_font = gui_app.font(FontWeight.BOLD)
       rl.draw_text_ex(
         error_font, "QR Code Error", rl.Vector2(rect.x + 20, rect.y + rect.height // 2 - 15), 30, 0.0, rl.RED

selfdrive/ui/widgets/prime.py

@@ -2,11 +2,14 @@
 
 from openpilot.selfdrive.ui.ui_state import ui_state
 from openpilot.system.ui.lib.application import gui_app, FontWeight
+from openpilot.system.ui.lib.rounded_corners import get_roundness
 from openpilot.system.ui.lib.text_measure import measure_text_cached
 from openpilot.system.ui.lib.wrap_text import wrap_text
 from openpilot.system.ui.widgets import Widget
 from openpilot.system.ui.widgets.label import gui_label
 
+BORDER_RADIUS = 10
+
 
 class PrimeWidget(Widget):
   """Widget for displaying comma prime subscription status"""
@@ -22,7 +25,7 @@ def _render(self, rect):
   def _render_for_non_prime_users(self, rect: rl.Rectangle):
     """Renders the advertisement for non-Prime users."""
 
-    rl.draw_rectangle_rounded(rect, 0.02, 10, self.PRIME_BG_COLOR)
+    rl.draw_rectangle_rounded(rect, get_roundness(rect, BORDER_RADIUS), 10, self.PRIME_BG_COLOR)
 
     # Layout
     x, y = rect.x + 80, rect.y + 90
@@ -52,7 +55,8 @@ def _render_for_non_prime_users(self, rect: rl.Rectangle):
   def _render_for_prime_user(self, rect: rl.Rectangle):
     """Renders the prime user widget with subscription status."""
 
-    rl.draw_rectangle_rounded(rl.Rectangle(rect.x, rect.y, rect.width, 230), 0.02, 10, self.PRIME_BG_COLOR)
+    panel_rect = rl.Rectangle(rect.x, rect.y, rect.width, 230)
+    rl.draw_rectangle_rounded(panel_rect, get_roundness(panel_rect, BORDER_RADIUS), 10, self.PRIME_BG_COLOR)
 
     x = rect.x + 56
     y = rect.y + 40

selfdrive/ui/widgets/setup.py

@@ -3,10 +3,14 @@
 from openpilot.selfdrive.ui.ui_state import ui_state
 from openpilot.selfdrive.ui.widgets.pairing_dialog import PairingDialog
 from openpilot.system.ui.lib.application import gui_app, FontWeight
+from openpilot.system.ui.lib.rounded_corners import get_roundness
 from openpilot.system.ui.lib.wrap_text import wrap_text
 from openpilot.system.ui.widgets import Widget
 from openpilot.system.ui.widgets.button import gui_button, ButtonStyle
 
+BORDER_RADIUS = 10
+PANEL_COLOR = rl.Color(51, 51, 51, 255)
+
 
 class SetupWidget(Widget):
   def __init__(self):
@@ -26,7 +30,8 @@ def _render(self, rect: rl.Rectangle):
   def _render_registration(self, rect: rl.Rectangle):
     """Render registration prompt."""
 
-    rl.draw_rectangle_rounded(rl.Rectangle(rect.x, rect.y, rect.width, 590), 0.02, 20, rl.Color(51, 51, 51, 255))
+    panel_rect = rl.Rectangle(rect.x, rect.y, rect.width, 590)
+    rl.draw_rectangle_rounded(panel_rect, get_roundness(panel_rect, BORDER_RADIUS), 20, PANEL_COLOR)
 
     x = rect.x + 64
     y = rect.y + 48
@@ -52,7 +57,8 @@ def _render_registration(self, rect: rl.Rectangle):
   def _render_firehose_prompt(self, rect: rl.Rectangle):
     """Render firehose prompt widget."""
 
-    rl.draw_rectangle_rounded(rl.Rectangle(rect.x, rect.y, rect.width, 450), 0.02, 20, rl.Color(51, 51, 51, 255))
+    panel_rect = rl.Rectangle(rect.x, rect.y, rect.width, 450)
+    rl.draw_rectangle_rounded(panel_rect, get_roundness(panel_rect, BORDER_RADIUS), 20, PANEL_COLOR)
 
     # Content margins (56, 40, 56, 40)
     x = rect.x + 56

system/ui/lib/rounded_corners.py

@@ -0,0 +1,8 @@
+import pyray as rl
+
+
+def get_roundness(rect: rl.Rectangle, border_radius: int) -> float:
+  """Calculate the roundness of a rectangle based on its width and height, given a border radius value in pixels.
+  This is used to standardize the roundness across rectangle with different sizes, since `draw_rectangle_rounded` doesn't use pixels.
+  """
+  return border_radius / (min(rect.width, rect.height) / 2)

system/ui/setup.py

@@ -10,6 +10,7 @@
 from cereal import log
 from openpilot.system.hardware import HARDWARE
 from openpilot.system.ui.lib.application import gui_app, FontWeight
+from openpilot.system.ui.lib.rounded_corners import get_roundness
 from openpilot.system.ui.widgets import Widget
 from openpilot.system.ui.widgets.button import gui_button, ButtonStyle
 from openpilot.system.ui.widgets.keyboard import Keyboard
@@ -150,7 +151,7 @@ def render_network_setup(self, rect: rl.Rectangle):
 
     wifi_rect = rl.Rectangle(rect.x + MARGIN, rect.y + TITLE_FONT_SIZE + MARGIN + 25, rect.width - MARGIN * 2,
                              rect.height - TITLE_FONT_SIZE - 25 - BUTTON_HEIGHT - MARGIN * 3)
-    rl.draw_rectangle_rounded(wifi_rect, 0.05, 10, rl.Color(51, 51, 51, 255))
+    rl.draw_rectangle_rounded(wifi_rect, get_roundness(wifi_rect, 15), 10, rl.Color(51, 51, 51, 255))
     wifi_content_rect = rl.Rectangle(wifi_rect.x + MARGIN, wifi_rect.y, wifi_rect.width - MARGIN * 2, wifi_rect.height)
     self.wifi_ui.render(wifi_content_rect)
 

system/ui/widgets/button.py

@@ -1,6 +1,7 @@
 import pyray as rl
 from enum import IntEnum
 from openpilot.system.ui.lib.application import gui_app, FontWeight
+from openpilot.system.ui.lib.rounded_corners import get_roundness
 from openpilot.system.ui.lib.text_measure import measure_text_cached
 
 
@@ -102,7 +103,7 @@ def gui_button(
     _pressed_buttons.remove(button_id)
 
   # Draw the button with rounded corners
-  roundness = border_radius / (min(rect.width, rect.height) / 2)
+  roundness = get_roundness(rect, border_radius)
   if button_style != ButtonStyle.TRANSPARENT:
     rl.draw_rectangle_rounded(rect, roundness, 20, bg_color)
   else:

system/ui/widgets/option_dialog.py

@@ -1,12 +1,15 @@
 import pyray as rl
 from openpilot.system.ui.lib.application import FontWeight
+from openpilot.system.ui.lib.rounded_corners import get_roundness
 from openpilot.system.ui.lib.scroll_panel import GuiScrollPanel
 from openpilot.system.ui.widgets import Widget
 from openpilot.system.ui.widgets.button import gui_button, ButtonStyle, TextAlignment
 from openpilot.system.ui.widgets.label import gui_label
 
 # Constants
 MARGIN = 50
+PANEL_COLOR = rl.Color(30, 30, 30, 255)
+PANEL_BORDER_RADIUS = 10
 TITLE_FONT_SIZE = 70
 ITEM_HEIGHT = 135
 BUTTON_SPACING = 50
@@ -26,7 +29,7 @@ def __init__(self, title, options, current=""):
 
   def _render(self, rect):
     dialog_rect = rl.Rectangle(rect.x + MARGIN, rect.y + MARGIN, rect.width - 2 * MARGIN, rect.height - 2 * MARGIN)
-    rl.draw_rectangle_rounded(dialog_rect, 0.02, 20, rl.Color(30, 30, 30, 255))
+    rl.draw_rectangle_rounded(dialog_rect, get_roundness(dialog_rect, PANEL_BORDER_RADIUS), 10, PANEL_COLOR)
 
     content_rect = rl.Rectangle(dialog_rect.x + MARGIN, dialog_rect.y + MARGIN,
                                 dialog_rect.width - 2 * MARGIN, dialog_rect.height - 2 * MARGIN)