raylib: rounded onroad corners (#36348)

* rounded corners

* use scissor

* 0.1

* middle

* don't trust chatter

* round

* clean p

* cleanup

* rev

selfdrive/ui/onroad/augmented_road_view.py

@@ -20,9 +20,9 @@ WIDE_CAM = VisionStreamType.VISION_STREAM_WIDE_ROAD
 DEFAULT_DEVICE_CAMERA = DEVICE_CAMERAS["tici", "ar0231"]
 
 BORDER_COLORS = {
-  UIStatus.DISENGAGED: rl.Color(0x17, 0x33, 0x49, 0xC8),   # Blue for disengaged state
-  UIStatus.OVERRIDE: rl.Color(0x91, 0x9B, 0x95, 0xF1),     # Gray for override state
-  UIStatus.ENGAGED: rl.Color(0x17, 0x86, 0x44, 0xF1),      # Green for engaged state
+  UIStatus.DISENGAGED: rl.Color(0x12, 0x28, 0x39, 0xFF),  # Blue for disengaged state
+  UIStatus.OVERRIDE: rl.Color(0x89, 0x92, 0x8D, 0xFF),  # Gray for override state
+  UIStatus.ENGAGED: rl.Color(0x16, 0x7F, 0x40, 0xFF),  # Green for engaged state
 }
 
 WIDE_CAM_MAX_SPEED = 10.0  # m/s (22 mph)
@@ -71,9 +71,6 @@ class AugmentedRoadView(CameraView):
       rect.height - 2 * UI_BORDER_SIZE,
     )
 
-    # Draw colored border based on driving state
-    self._draw_border(rect)
-
     # Enable scissor mode to clip all rendering within content rectangle boundaries
     # This creates a rendering viewport that prevents graphics from drawing outside the border
     rl.begin_scissor_mode(
@@ -98,6 +95,9 @@ class AugmentedRoadView(CameraView):
     # End clipping region
     rl.end_scissor_mode()
 
+    # Draw colored border based on driving state
+    self._draw_border(rect)
+
     # publish uiDebug
     msg = messaging.new_message('uiDebug')
     msg.uiDebug.drawTimeMillis = (time.monotonic() - start_draw) * 1000
@@ -112,8 +112,25 @@ class AugmentedRoadView(CameraView):
     pass
 
   def _draw_border(self, rect: rl.Rectangle):
+    rl.begin_scissor_mode(int(rect.x), int(rect.y), int(rect.width), int(rect.height))
+    border_roundness = 0.15
     border_color = BORDER_COLORS.get(ui_state.status, BORDER_COLORS[UIStatus.DISENGAGED])
-    rl.draw_rectangle_lines_ex(rect, UI_BORDER_SIZE, border_color)
+    border_rect = rl.Rectangle(rect.x + UI_BORDER_SIZE, rect.y + UI_BORDER_SIZE,
+                               rect.width - 2 * UI_BORDER_SIZE, rect.height - 2 * UI_BORDER_SIZE)
+    rl.draw_rectangle_rounded_lines_ex(border_rect, border_roundness, 10, UI_BORDER_SIZE, border_color)
+
+    # black bg around colored border
+    black_bg_thickness = UI_BORDER_SIZE
+    black_bg_rect = rl.Rectangle(
+      border_rect.x - UI_BORDER_SIZE,
+      border_rect.y - UI_BORDER_SIZE,
+      border_rect.width + 2 * UI_BORDER_SIZE,
+      border_rect.height + 2 * UI_BORDER_SIZE,
+    )
+    edge_offset = (black_bg_rect.height - border_rect.height) / 2  # distance between rect edges
+    roundness_out = (border_roundness * border_rect.height + 2 * edge_offset) / max(1.0, black_bg_rect.height)
+    rl.draw_rectangle_rounded_lines_ex(black_bg_rect, roundness_out, 10, black_bg_thickness, rl.BLACK)
+    rl.end_scissor_mode()
 
   def _switch_stream_if_needed(self, sm):
     if sm['selfdriveState'].experimentalMode and WIDE_CAM in self.available_streams: