ui(raylib): increase font size and wrap text in spinner (#35049)

- Wrap text onto separate lines
- Increase font size to be closer to Qt
- Remove extra letter spacing - 0.0 should use font default spacing, and this is used in `wrap_text`

Will fix vertical alignment separately, as both the text and progress bar layouts need to be considered

system/ui/spinner.py

@@ -5,14 +5,17 @@ import threading
 
 from openpilot.common.basedir import BASEDIR
 from openpilot.system.ui.lib.application import gui_app
+from openpilot.system.ui.text import wrap_text
 
 # Constants
 PROGRESS_BAR_WIDTH = 1000
 PROGRESS_BAR_HEIGHT = 20
 DEGREES_PER_SECOND = 360.0  # one full rotation per second
-MARGIN = 200
+MARGIN_H = 100
+MARGIN_V = 200
 TEXTURE_SIZE = 360
-FONT_SIZE = 80
+FONT_SIZE = 88
+LINE_HEIGHT = 96
 DARKGRAY = (55, 55, 55, 255)
 
 
@@ -26,18 +29,18 @@ class Spinner:
     self._spinner_texture = gui_app.load_texture_from_image(os.path.join(BASEDIR, "selfdrive/assets/img_spinner_track.png"), TEXTURE_SIZE, TEXTURE_SIZE,
                                                             alpha_premultiply=True)
     self._rotation = 0.0
-    self._text: str = ""
     self._progress: int | None = None
+    self._wrapped_lines: list[str] = []
     self._lock = threading.Lock()
 
   def set_text(self, text: str) -> None:
     with self._lock:
       if text.isdigit():
         self._progress = clamp(int(text), 0, 100)
-        self._text = ""
+        self._wrapped_lines = []
       else:
         self._progress = None
-        self._text = text
+        self._wrapped_lines = wrap_text(text, FONT_SIZE, gui_app.width - MARGIN_H)
 
   def render(self):
     center = rl.Vector2(gui_app.width / 2.0, gui_app.height / 2.0)
@@ -54,10 +57,10 @@ class Spinner:
     rl.draw_texture_v(self._comma_texture, comma_position, rl.WHITE)
 
     # Display progress bar or text based on user input
-    y_pos = rl.get_screen_height() - MARGIN - PROGRESS_BAR_HEIGHT
+    y_pos = rl.get_screen_height() - MARGIN_V - PROGRESS_BAR_HEIGHT
     with self._lock:
       progress = self._progress
-      text = self._text
+      wrapped_lines = self._wrapped_lines
 
     if progress is not None:
       bar = rl.Rectangle(center.x - PROGRESS_BAR_WIDTH / 2.0, y_pos, PROGRESS_BAR_WIDTH, PROGRESS_BAR_HEIGHT)
@@ -65,10 +68,11 @@ class Spinner:
 
       bar.width *= progress / 100.0
       rl.draw_rectangle_rounded(bar, 1, 10, rl.WHITE)
-    elif text:
+    elif wrapped_lines:
-      text_size = rl.measure_text_ex(gui_app.font(), text, FONT_SIZE, 1.0)
+      for i, line in enumerate(wrapped_lines):
-      rl.draw_text_ex(gui_app.font(), text,
+        text_size = rl.measure_text_ex(gui_app.font(), line, FONT_SIZE, 0.0)
-                      rl.Vector2(center.x - text_size.x / 2, y_pos), FONT_SIZE, 1.0, rl.WHITE)
+        rl.draw_text_ex(gui_app.font(), line, rl.Vector2(center.x - text_size.x / 2, y_pos + i * LINE_HEIGHT),
+                        FONT_SIZE, 0.0, rl.WHITE)
 
 
 if __name__ == "__main__":