sunnypilot v2026.002.000

version: sunnypilot v2026.002.000 (staging)
date: 2026-07-21T07:44:02
master commit: 2c334ede443d7391d27575af8c854a095ba702a8

openpilot/selfdrive/ui/mici/widgets/button.py

@@ -0,0 +1,422 @@
+import math
+import pyray as rl
+from typing import Union
+from enum import Enum
+from collections.abc import Callable
+from openpilot.system.ui.widgets import Widget
+from openpilot.system.ui.widgets.label import UnifiedLabel
+from openpilot.system.ui.widgets.scroller import DO_ZOOM
+from openpilot.system.ui.lib.application import gui_app, FontWeight, MousePos
+from openpilot.common.filter_simple import BounceFilter
+
+try:
+  from openpilot.common.params import Params
+except ImportError:
+  Params = None
+
+SCROLLING_SPEED_PX_S = 50
+COMPLICATION_SIZE    = 36
+LABEL_COLOR          = rl.Color(255, 255, 255, int(255 * 0.9))
+COMPLICATION_GREY    = rl.Color(0xAA, 0xAA, 0xAA, 255)
+PRESSED_SCALE = 1.15 if DO_ZOOM else 1.07
+
+
+class ScrollState(Enum):
+  PRE_SCROLL = 0
+  SCROLLING = 1
+  POST_SCROLL = 2
+
+
+class BigCircleButton(Widget):
+  def __init__(self, icon: rl.Texture, red: bool = False, icon_offset: tuple[int, int] = (0, 0)):
+    super().__init__()
+    self._red = red
+    self._icon_offset = icon_offset
+
+    # State
+    self.set_rect(rl.Rectangle(0, 0, 180, 180))
+    self._scale_filter = BounceFilter(1.0, 0.1, 1 / gui_app.target_fps)
+    self._click_delay = 0.075
+
+    # Icons
+    self._txt_icon = icon
+    self._txt_btn_disabled_bg = gui_app.texture("icons_mici/buttons/button_circle_disabled.png", 180, 180)
+
+    self._txt_btn_bg = gui_app.texture("icons_mici/buttons/button_circle.png", 180, 180)
+    self._txt_btn_pressed_bg = gui_app.texture("icons_mici/buttons/button_circle_pressed.png", 180, 180)
+
+    self._txt_btn_red_bg = gui_app.texture("icons_mici/buttons/button_circle_red.png", 180, 180)
+    self._txt_btn_red_pressed_bg = gui_app.texture("icons_mici/buttons/button_circle_red_pressed.png", 180, 180)
+
+  def _draw_content(self, btn_y: float):
+    # draw icon
+    icon_color = rl.Color(255, 255, 255, int(255 * 0.9)) if self.enabled else rl.Color(255, 255, 255, int(255 * 0.35))
+    rl.draw_texture_ex(self._txt_icon, (self._rect.x + (self._rect.width - self._txt_icon.width) / 2 + self._icon_offset[0],
+                                        btn_y + (self._rect.height - self._txt_icon.height) / 2 + self._icon_offset[1]), 0, 1.0, icon_color)
+
+  def _render(self, _):
+    # draw background
+    txt_bg = self._txt_btn_bg if not self._red else self._txt_btn_red_bg
+    if not self.enabled:
+      txt_bg = self._txt_btn_disabled_bg
+    elif self.is_pressed:
+      txt_bg = self._txt_btn_pressed_bg if not self._red else self._txt_btn_red_pressed_bg
+
+    scale = self._scale_filter.update(PRESSED_SCALE if self.is_pressed else 1.0)
+    btn_x = self._rect.x + (self._rect.width * (1 - scale)) / 2
+    btn_y = self._rect.y + (self._rect.height * (1 - scale)) / 2
+    rl.draw_texture_ex(txt_bg, (btn_x, btn_y), 0, scale, rl.WHITE)
+
+    self._draw_content(btn_y)
+
+
+class BigCircleToggle(BigCircleButton):
+  def __init__(self, icon: rl.Texture, toggle_callback: Callable | None = None, icon_offset: tuple[int, int] = (0, 0)):
+    super().__init__(icon, False, icon_offset=icon_offset)
+    self._toggle_callback = toggle_callback
+
+    # State
+    self._checked = False
+
+    # Icons
+    self._txt_toggle_enabled = gui_app.texture("icons_mici/buttons/toggle_dot_enabled.png", 66, 66)
+    self._txt_toggle_disabled = gui_app.texture("icons_mici/buttons/toggle_dot_disabled.png", 66, 66)
+
+  def set_checked(self, checked: bool):
+    self._checked = checked
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+    super()._handle_mouse_release(mouse_pos)
+
+    self._checked = not self._checked
+    if self._toggle_callback:
+      self._toggle_callback(self._checked)
+
+  def _draw_content(self, btn_y: float):
+    super()._draw_content(btn_y)
+
+    # draw status icon
+    rl.draw_texture_ex(self._txt_toggle_enabled if self._checked else self._txt_toggle_disabled,
+                       (self._rect.x + (self._rect.width - self._txt_toggle_enabled.width) / 2, btn_y + 5),
+                       0, 1.0, rl.WHITE)
+
+
+class BigButton(Widget):
+  LABEL_HORIZONTAL_PADDING = 40
+  LABEL_VERTICAL_PADDING = 23  # visually matches 30 in figma
+
+  """A lightweight stand-in for the Qt BigButton, drawn & updated each frame."""
+
+  def __init__(self, text: str, value: str = "", icon: Union[rl.Texture, None] = None, scroll: bool = False):
+    super().__init__()
+    self.set_rect(rl.Rectangle(0, 0, 402, 180))
+    self.text = text
+    self.value = value
+    self._txt_icon = icon
+    self._scroll = scroll
+
+    self._scale_filter = BounceFilter(1.0, 0.1, 1 / gui_app.target_fps)
+    self._click_delay = 0.075
+    self._shake_start: float | None = None
+    self._grow_animation_until: float | None = None
+
+    self._rotate_icon_t: float | None = None
+
+    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()
+
+  def set_icon(self, icon: Union[rl.Texture, None]):
+    self._txt_icon = icon
+
+  def set_rotate_icon(self, rotate: bool):
+    if rotate and self._rotate_icon_t is not None:
+      return
+    self._rotate_icon_t = rl.get_time() if rotate else None
+
+  def _load_images(self):
+    self._txt_default_bg = gui_app.texture("icons_mici/buttons/button_rectangle.png", 402, 180)
+    self._txt_pressed_bg = gui_app.texture("icons_mici/buttons/button_rectangle_pressed.png", 402, 180)
+    self._txt_disabled_bg = gui_app.texture("icons_mici/buttons/button_rectangle_disabled.png", 402, 180)
+
+  def set_touch_valid_callback(self, touch_callback: Callable[[], bool]) -> None:
+    super().set_touch_valid_callback(lambda: touch_callback() and self._grow_animation_until is None)
+
+  def _width_hint(self) -> int:
+    # Single line if scrolling, so hide behind icon if exists
+    icon_size = self._txt_icon.width if self._txt_icon and self._scroll and self.value else 0
+    return int(self._rect.width - self.LABEL_HORIZONTAL_PADDING * 2 - icon_size)
+
+  def _get_label_font_size(self):
+    if len(self.text) <= 18:
+      return 48
+    else:
+      return 42
+
+  def _update_label_layout(self):
+    self._label.set_font_size(self._get_label_font_size())
+    if self.value:
+      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
+
+  def get_text(self):
+    return self.text
+
+  def trigger_shake(self):
+    self._shake_start = rl.get_time()
+
+  def trigger_grow_animation(self, duration: float = 0.65):
+    self._grow_animation_until = rl.get_time() + duration
+
+  @property
+  def _shake_offset(self) -> float:
+    SHAKE_DURATION = 0.5
+    SHAKE_AMPLITUDE = 24.0
+    SHAKE_FREQUENCY = 32.0
+    if self._shake_start is None:
+      return 0.0
+    t = rl.get_time() - self._shake_start
+    if t > SHAKE_DURATION:
+      return 0.0
+    decay = 1.0 - t / SHAKE_DURATION
+    return decay * SHAKE_AMPLITUDE * math.sin(t * SHAKE_FREQUENCY)
+
+  def set_position(self, x: float, y: float) -> None:
+    super().set_position(x + self._shake_offset, y)
+
+  def _handle_background(self) -> tuple[rl.Texture, float, float, float]:
+    if self._grow_animation_until is not None:
+      if rl.get_time() >= self._grow_animation_until:
+        self._grow_animation_until = None
+
+    # draw _txt_default_bg
+    txt_bg = self._txt_default_bg
+    if not self.enabled:
+      txt_bg = self._txt_disabled_bg
+    elif self.is_pressed:
+      txt_bg = self._txt_pressed_bg
+
+    scale = self._scale_filter.update(PRESSED_SCALE if self.is_pressed or self._grow_animation_until is not None else 1.0)
+    btn_x = self._rect.x + (self._rect.width * (1 - scale)) / 2
+    btn_y = self._rect.y + (self._rect.height * (1 - scale)) / 2
+    return txt_bg, btn_x, btn_y, scale
+
+  def _draw_content(self, btn_y: float):
+    # LABEL ------------------------------------------------------------------
+    label_x = self._rect.x + self.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_rect = rl.Rectangle(label_x, btn_y + self.LABEL_VERTICAL_PADDING, self._width_hint(),
+                              self._rect.height - self.LABEL_VERTICAL_PADDING * 2)
+    self._label.render(label_rect)
+
+    if self.value:
+      label_y = btn_y + self.LABEL_VERTICAL_PADDING + self._label.get_content_height(self._width_hint())
+      sub_label_height = btn_y + self._rect.height - self.LABEL_VERTICAL_PADDING - label_y
+      sub_label_rect = rl.Rectangle(label_x, label_y, self._width_hint(), sub_label_height)
+      self._sub_label.render(sub_label_rect)
+
+    # ICON -------------------------------------------------------------------
+    if self._txt_icon:
+      rotation = 0
+      if self._rotate_icon_t is not None:
+        rotation = (rl.get_time() - self._rotate_icon_t) * 180
+
+      # draw top right with 30px padding
+      x = self._rect.x + self._rect.width - 30 - self._txt_icon.width / 2
+      y = btn_y + 30 + self._txt_icon.height / 2
+      source_rec = rl.Rectangle(0, 0, self._txt_icon.width, self._txt_icon.height)
+      dest_rec = rl.Rectangle(x, y, self._txt_icon.width, self._txt_icon.height)
+      origin = rl.Vector2(self._txt_icon.width / 2, self._txt_icon.height / 2)
+      rl.draw_texture_pro(self._txt_icon, source_rec, dest_rec, origin, rotation, rl.Color(255, 255, 255, int(255 * 0.9)))
+
+  def _render(self, _):
+    txt_bg, btn_x, btn_y, scale = self._handle_background()
+
+    if self._scroll:
+      # draw black background since images are transparent
+      scaled_rect = rl.Rectangle(btn_x, btn_y, self._rect.width * scale, self._rect.height * scale)
+      rl.draw_rectangle_rounded(scaled_rect, 0.4, 7, rl.Color(0, 0, 0, int(255 * 0.5)))
+
+      self._draw_content(btn_y)
+      rl.draw_texture_ex(txt_bg, (btn_x, btn_y), 0, scale, rl.WHITE)
+    else:
+      rl.draw_texture_ex(txt_bg, (btn_x, btn_y), 0, scale, rl.WHITE)
+      self._draw_content(btn_y)
+
+
+class BigToggle(BigButton):
+  def __init__(self, text: str, value: str = "", initial_state: bool = False, toggle_callback: Callable | None = None):
+    super().__init__(text, value, "")
+    self._checked = initial_state
+    self._toggle_callback = toggle_callback
+
+  def _load_images(self):
+    super()._load_images()
+    self._txt_enabled_toggle = gui_app.texture("icons_mici/buttons/toggle_pill_enabled.png", 84, 66)
+    self._txt_disabled_toggle = gui_app.texture("icons_mici/buttons/toggle_pill_disabled.png", 84, 66)
+
+  def set_checked(self, checked: bool):
+    self._checked = checked
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+    super()._handle_mouse_release(mouse_pos)
+    self._checked = not self._checked
+    if self._toggle_callback:
+      self._toggle_callback(self._checked)
+
+  def _draw_pill(self, x: float, y: float, checked: bool):
+    # draw toggle icon top right
+    if checked:
+      rl.draw_texture_ex(self._txt_enabled_toggle, (x, y), 0, 1.0, rl.WHITE)
+    else:
+      rl.draw_texture_ex(self._txt_disabled_toggle, (x, y), 0, 1.0, rl.WHITE)
+
+  def _draw_content(self, btn_y: float):
+    super()._draw_content(btn_y)
+
+    x = self._rect.x + self._rect.width - self._txt_enabled_toggle.width
+    y = btn_y
+    self._draw_pill(x, y, self._checked)
+
+
+class BigMultiToggle(BigToggle):
+  def __init__(self, text: str, options: list[str], toggle_callback: Callable | None = None,
+               select_callback: Callable | None = None):
+    super().__init__(text, "", toggle_callback=toggle_callback)
+    assert len(options) > 0
+    self._options = options
+    self._select_callback = select_callback
+
+    self.set_value(self._options[0])
+
+  def _width_hint(self) -> int:
+    return int(self._rect.width - self.LABEL_HORIZONTAL_PADDING * 2 - self._txt_enabled_toggle.width)
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+    super()._handle_mouse_release(mouse_pos)
+    cur_idx = self._options.index(self.value)
+    new_idx = (cur_idx + 1) % len(self._options)
+    self.set_value(self._options[new_idx])
+    if self._select_callback:
+      self._select_callback(self.value)
+
+  def _draw_content(self, btn_y: float):
+    # don't draw pill from BigToggle
+    BigButton._draw_content(self, btn_y)
+
+    checked_idx = self._options.index(self.value)
+
+    x = self._rect.x + self._rect.width - self._txt_enabled_toggle.width
+    y = btn_y
+
+    for i in range(len(self._options)):
+      self._draw_pill(x, y, checked_idx == i)
+      y += 35
+
+
+class GreyBigButton(BigButton):
+  """Users should manage newlines with this class themselves"""
+
+  LABEL_HORIZONTAL_PADDING = 30
+
+  def __init__(self, *args, **kwargs):
+    super().__init__(*args, **kwargs)
+    self.set_touch_valid_callback(lambda: False)
+
+    self._rect.width = 476
+
+    self._label.set_font_size(36)
+    self._label.set_font_weight(FontWeight.BOLD)
+    self._label.set_line_height(1.0)
+
+    self._sub_label.set_font_size(36)
+    self._sub_label.set_text_color(rl.Color(255, 255, 255, int(255 * 0.9)))
+    self._sub_label.set_font_weight(FontWeight.DISPLAY_REGULAR)
+    self._sub_label.set_alignment_vertical(rl.GuiTextAlignmentVertical.TEXT_ALIGN_MIDDLE if not self._label.text else
+                                           rl.GuiTextAlignmentVertical.TEXT_ALIGN_BOTTOM)
+    self._sub_label.set_line_height(0.95)
+
+  @property
+  def LABEL_VERTICAL_PADDING(self):
+    return BigButton.LABEL_VERTICAL_PADDING if self._label.text else 18
+
+  def _width_hint(self) -> int:
+    return int(self._rect.width - self.LABEL_HORIZONTAL_PADDING * 2)
+
+  def _get_label_font_size(self):
+    return 36
+
+  def _render(self, _):
+    rl.draw_rectangle_rounded(self._rect, 0.4, 10, rl.Color(255, 255, 255, int(255 * 0.15)))
+    self._draw_content(self._rect.y)
+
+
+class BigMultiParamToggle(BigMultiToggle):
+  def __init__(self, text: str, param: str, options: list[str], toggle_callback: Callable | None = None,
+               select_callback: Callable | None = None):
+    super().__init__(text, options, toggle_callback, select_callback)
+    self._param = param
+
+    self._params = Params()
+    self._load_value()
+
+  def _load_value(self):
+    self.set_value(self._options[self._params.get(self._param) or 0])
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+    super()._handle_mouse_release(mouse_pos)
+    new_idx = self._options.index(self.value)
+    self._params.put(self._param, new_idx)
+
+
+class BigParamControl(BigToggle):
+  def __init__(self, text: str, param: str, toggle_callback: Callable | None = None):
+    super().__init__(text, "", toggle_callback=toggle_callback)
+    self.param = param
+    self.params = Params()
+    self.set_checked(self.params.get_bool(self.param, False))
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+    super()._handle_mouse_release(mouse_pos)
+    self.params.put_bool(self.param, self._checked, block=True)
+
+  def refresh(self):
+    self.set_checked(self.params.get_bool(self.param, False))
+
+
+# TODO: param control base class
+class BigCircleParamControl(BigCircleToggle):
+  def __init__(self, icon: rl.Texture, param: str, toggle_callback: Callable | None = None,
+               icon_offset: tuple[int, int] = (0, 0)):
+    super().__init__(icon, toggle_callback, icon_offset=icon_offset)
+    self._param = param
+    self.params = Params()
+    self.set_checked(self.params.get_bool(self._param, False))
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+    super()._handle_mouse_release(mouse_pos)
+    self.params.put_bool(self._param, self._checked, block=True)
+
+  def refresh(self):
+    self.set_checked(self.params.get_bool(self._param, False))

openpilot/selfdrive/ui/mici/widgets/dialog.py

@@ -0,0 +1,240 @@
+import abc
+import math
+import pyray as rl
+from typing import Union
+from collections.abc import Callable
+from openpilot.system.ui.widgets.nav_widget import NavWidget
+from openpilot.system.ui.widgets.label import UnifiedLabel
+from openpilot.system.ui.widgets.mici_keyboard import MiciKeyboard
+from openpilot.system.ui.lib.text_measure import measure_text_cached
+from openpilot.system.ui.lib.application import gui_app, FontWeight, MousePos
+from openpilot.system.ui.widgets.slider import RedBigSlider, BigSlider
+from openpilot.common.filter_simple import FirstOrderFilter
+from openpilot.selfdrive.ui.mici.widgets.button import BigCircleButton, BigButton, GreyBigButton
+
+DEBUG = False
+
+PADDING = 20
+
+
+class BigDialogBase(NavWidget, abc.ABC):
+  def __init__(self):
+    super().__init__()
+    self.set_rect(rl.Rectangle(0, 0, gui_app.width, gui_app.height))
+
+
+class BigDialog(BigDialogBase):
+  def __init__(self, title: str, description: str, icon: Union[rl.Texture, None] = None):
+    super().__init__()
+    self._card = GreyBigButton(title, description, icon)
+
+  def _render(self, _):
+    self._card.render(rl.Rectangle(
+      self._rect.x + self._rect.width / 2 - self._card.rect.width / 2,
+      self._rect.y + self._rect.height / 2 - self._card.rect.height / 2,
+      self._card.rect.width,
+      self._card.rect.height,
+    ))
+
+
+class BigConfirmationDialog(BigDialogBase):
+  def __init__(self, title: str, icon: rl.Texture, confirm_callback: Callable[[], None],
+               exit_on_confirm: bool = True, red: bool = False):
+    super().__init__()
+    self._confirm_callback = confirm_callback
+    self._exit_on_confirm = exit_on_confirm
+
+    self._slider: BigSlider | RedBigSlider
+    if red:
+      self._slider = self._child(RedBigSlider(title, icon, confirm_callback=self._on_confirm))
+    else:
+      self._slider = self._child(BigSlider(title, icon, confirm_callback=self._on_confirm))
+    self._slider.set_enabled(lambda: self.enabled and not self.is_dismissing)  # for nav stack + NavWidget
+
+  def _on_confirm(self):
+    if self._exit_on_confirm:
+      self.dismiss(self._confirm_callback)
+    elif self._confirm_callback:
+      self._confirm_callback()
+
+  def _update_state(self):
+    super()._update_state()
+    if self.is_dismissing and not self._slider.confirmed:
+      self._slider.reset()
+
+  def _render(self, _):
+    self._slider.render(self._rect)
+
+
+class BigInputDialog(BigDialogBase):
+  BACK_TOUCH_AREA_PERCENTAGE = 0.2
+  BACKSPACE_RATE = 25  # hz
+  TEXT_INPUT_SIZE = 35
+
+  def __init__(self,
+               hint: str,
+               default_text: str = "",
+               minimum_length: int = 1,
+               confirm_callback: Callable[[str], None] | None = None,
+               auto_return_to_letters: str = ""):
+    super().__init__()
+    self._hint_label = UnifiedLabel(hint, font_size=35, text_color=rl.Color(255, 255, 255, int(255 * 0.35)),
+                                    font_weight=FontWeight.MEDIUM)
+    self._keyboard = MiciKeyboard(auto_return_to_letters=auto_return_to_letters)
+    self._keyboard.set_text(default_text)
+    self._keyboard.set_enabled(lambda: self.enabled and not self.is_dismissing)  # for nav stack + NavWidget
+    self._minimum_length = minimum_length
+
+    self._backspace_held_time: float | None = None
+
+    self._backspace_img = gui_app.texture("icons_mici/settings/keyboard/backspace.png", 42, 36)
+    self._backspace_img_alpha = FirstOrderFilter(0, 0.05, 1 / gui_app.target_fps)
+
+    self._enter_img = gui_app.texture("icons_mici/settings/keyboard/enter.png", 76, 62)
+    self._enter_disabled_img = gui_app.texture("icons_mici/settings/keyboard/enter_disabled.png", 76, 62)
+    self._enter_img_alpha = FirstOrderFilter(0, 0.05, 1 / gui_app.target_fps)
+
+    # rects for top buttons
+    self._top_left_button_rect = rl.Rectangle(0, 0, 0, 0)
+    self._top_right_button_rect = rl.Rectangle(0, 0, 0, 0)
+
+    def confirm_callback_wrapper():
+      text = self._keyboard.text()
+      self.dismiss((lambda: confirm_callback(text)) if confirm_callback else None)
+    self._confirm_callback = confirm_callback_wrapper
+
+  def _update_state(self):
+    super()._update_state()
+
+    if self.is_dismissing:
+      self._backspace_held_time = None
+      return
+
+    last_mouse_event = gui_app.last_mouse_event
+    if last_mouse_event.left_down and rl.check_collision_point_rec(last_mouse_event.pos, self._top_right_button_rect) and self._backspace_img_alpha.x > 1:
+      if self._backspace_held_time is None:
+        self._backspace_held_time = rl.get_time()
+
+      if rl.get_time() - self._backspace_held_time > 0.5:
+        if gui_app.frame % round(gui_app.target_fps / self.BACKSPACE_RATE) == 0:
+          self._keyboard.backspace()
+
+    else:
+      self._backspace_held_time = None
+
+  def _render(self, _):
+    # draw current text so far below everything. text floats left but always stays in view
+    text = self._keyboard.text()
+    candidate_char = self._keyboard.get_candidate_character()
+    text_size = measure_text_cached(gui_app.font(FontWeight.ROMAN), text + candidate_char or self._hint_label.text, self.TEXT_INPUT_SIZE)
+
+    bg_block_margin = 5
+    text_x = PADDING / 2 + self._enter_img.width + PADDING
+    text_field_rect = rl.Rectangle(text_x, self._rect.y + PADDING - bg_block_margin,
+                                   self._rect.width - text_x * 2,
+                                   text_size.y)
+
+    # draw text input
+    # push text left with a gradient on left side if too long
+    if text_size.x > text_field_rect.width:
+      text_x -= text_size.x - text_field_rect.width
+
+    rl.begin_scissor_mode(int(text_field_rect.x), int(text_field_rect.y), int(text_field_rect.width), int(text_field_rect.height))
+    rl.draw_text_ex(gui_app.font(FontWeight.ROMAN), text, rl.Vector2(text_x, text_field_rect.y), self.TEXT_INPUT_SIZE, 0, rl.WHITE)
+
+    # draw grayed out character user is hovering over
+    if candidate_char:
+      candidate_char_size = measure_text_cached(gui_app.font(FontWeight.ROMAN), candidate_char, self.TEXT_INPUT_SIZE)
+      rl.draw_text_ex(gui_app.font(FontWeight.ROMAN), candidate_char,
+                      rl.Vector2(min(text_x + text_size.x, text_field_rect.x + text_field_rect.width) - candidate_char_size.x, text_field_rect.y),
+                      self.TEXT_INPUT_SIZE, 0, rl.Color(255, 255, 255, 128))
+
+    rl.end_scissor_mode()
+
+    # draw gradient on left side to indicate more text
+    if text_size.x > text_field_rect.width:
+      rl.draw_rectangle_gradient_ex(rl.Rectangle(text_field_rect.x, text_field_rect.y, 80, text_field_rect.height),
+                                    rl.BLACK, rl.BLANK, rl.BLANK, rl.BLACK)
+
+    # draw cursor
+    blink_alpha = (math.sin(rl.get_time() * 6) + 1) / 2
+    if text:
+      cursor_x = min(text_x + text_size.x + 3, text_field_rect.x + text_field_rect.width)
+    else:
+      cursor_x = text_field_rect.x - 6
+    rl.draw_rectangle_rounded(rl.Rectangle(cursor_x, text_field_rect.y, 4, text_size.y),
+                              1, 4, rl.Color(255, 255, 255, int(255 * blink_alpha)))
+
+    # draw backspace icon with nice fade
+    self._backspace_img_alpha.update(255 * bool(text))
+    if self._backspace_img_alpha.x > 1:
+      color = rl.Color(255, 255, 255, int(self._backspace_img_alpha.x))
+      rl.draw_texture_ex(self._backspace_img, rl.Vector2(self._rect.width - self._backspace_img.width - 27, self._rect.y + 14), 0.0, 1.0, color)
+
+    if not text and self._hint_label.text and not candidate_char:
+      # draw description if no text entered yet and not drawing candidate char
+      hint_rect = rl.Rectangle(text_field_rect.x, text_field_rect.y,
+                               self._rect.width - text_field_rect.x - PADDING,
+                               text_field_rect.height)
+      self._hint_label.render(hint_rect)
+
+    # TODO: move to update state
+    # make rect take up entire area so it's easier to click
+    self._top_left_button_rect = rl.Rectangle(self._rect.x, self._rect.y, text_field_rect.x, self._rect.height - self._keyboard.get_keyboard_height())
+    self._top_right_button_rect = rl.Rectangle(text_field_rect.x + text_field_rect.width, self._rect.y,
+                                               self._rect.width - (text_field_rect.x + text_field_rect.width), self._top_left_button_rect.height)
+
+    # draw enter button
+    self._enter_img_alpha.update(255 if len(text) >= self._minimum_length else 0)
+    color = rl.Color(255, 255, 255, int(self._enter_img_alpha.x))
+    rl.draw_texture_ex(self._enter_img, rl.Vector2(self._rect.x + PADDING / 2, self._rect.y), 0.0, 1.0, color)
+    color = rl.Color(255, 255, 255, 255 - int(self._enter_img_alpha.x))
+    rl.draw_texture_ex(self._enter_disabled_img, rl.Vector2(self._rect.x + PADDING / 2, self._rect.y), 0.0, 1.0, color)
+
+    # keyboard goes over everything
+    self._keyboard.render(self._rect)
+
+    # draw debugging rect bounds
+    if DEBUG:
+      rl.draw_rectangle_lines_ex(text_field_rect, 1, rl.Color(100, 100, 100, 255))
+      rl.draw_rectangle_lines_ex(self._top_right_button_rect, 1, rl.Color(0, 255, 0, 255))
+      rl.draw_rectangle_lines_ex(self._top_left_button_rect, 1, rl.Color(0, 255, 0, 255))
+
+  def _handle_mouse_press(self, mouse_pos: MousePos):
+    super()._handle_mouse_press(mouse_pos)
+    # TODO: need to track where press was so enter and back can activate on release rather than press
+    #  or turn into icon widgets :eyes_open:
+
+    if self.is_dismissing:
+      return
+
+    # handle backspace icon click
+    if rl.check_collision_point_rec(mouse_pos, self._top_right_button_rect) and self._backspace_img_alpha.x > 254:
+      self._keyboard.backspace()
+    elif rl.check_collision_point_rec(mouse_pos, self._top_left_button_rect) and self._enter_img_alpha.x > 254:
+      # handle enter icon click
+      self._confirm_callback()
+
+
+class BigDialogButton(BigButton):
+  def __init__(self, text: str, value: str = "", icon: Union[str, rl.Texture] = "", description: str = ""):
+    super().__init__(text, value, icon)
+    self._description = description
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+    super()._handle_mouse_release(mouse_pos)
+
+    dlg = BigDialog(self.text, self._description)
+    gui_app.push_widget(dlg)
+
+
+class BigConfirmationCircleButton(BigCircleButton):
+  def __init__(self, title: str, icon: rl.Texture, confirm_callback: Callable[[], None], exit_on_confirm: bool = True,
+               red: bool = False, icon_offset: tuple[int, int] = (0, 0)):
+    super().__init__(icon, red, icon_offset)
+
+    def show_confirm_dialog():
+      gui_app.push_widget(BigConfirmationDialog(title, icon, confirm_callback,
+                                                exit_on_confirm=exit_on_confirm, red=red))
+
+    self.set_click_callback(show_confirm_dialog)

openpilot/selfdrive/ui/mici/widgets/pairing_dialog.py

@@ -0,0 +1,111 @@
+import pyray as rl
+import qrcode
+import numpy as np
+import time
+
+from openpilot.common.api import Api
+from openpilot.common.swaglog import cloudlog
+from openpilot.common.params import Params
+from openpilot.selfdrive.ui.ui_state import ui_state
+from openpilot.system.ui.widgets.nav_widget import NavWidget
+from openpilot.system.ui.lib.application import FontWeight, gui_app
+from openpilot.system.ui.widgets.label import UnifiedLabel
+
+
+class PairingDialog(NavWidget):
+  """Dialog for device pairing with QR code."""
+
+  QR_REFRESH_INTERVAL = 300  # 5 minutes in seconds
+
+  def __init__(self):
+    super().__init__()
+    self._params = Params()
+    self._qr_texture: rl.Texture | None = None
+    self._last_qr_generation = float("-inf")
+
+    self._txt_pair = gui_app.texture("icons_mici/settings/device/pair.png", 33, 60)
+    self._pair_label = UnifiedLabel("pair with comma connect", font_size=48, font_weight=FontWeight.BOLD, line_height=0.8)
+
+  def _get_pairing_url(self) -> str:
+    try:
+      dongle_id = self._params.get("DongleId") or ""
+      token = Api(dongle_id).get_token({'pair': True})
+    except Exception as e:
+      cloudlog.warning(f"Failed to get pairing token: {e}")
+      token = ""
+    return f"https://connect.comma.ai/?pair={token}"
+
+  def _generate_qr_code(self) -> None:
+    try:
+      qr = qrcode.QRCode(version=1, error_correction=qrcode.constants.ERROR_CORRECT_L, box_size=10, border=0)
+      qr.add_data(self._get_pairing_url())
+      qr.make(fit=True)
+
+      pil_img = qr.make_image(fill_color="white", back_color="black").convert('RGBA')
+      img_array = np.array(pil_img, dtype=np.uint8)
+
+      if self._qr_texture and self._qr_texture.id != 0:
+        rl.unload_texture(self._qr_texture)
+
+      rl_image = rl.Image()
+      rl_image.data = rl.ffi.cast("void *", img_array.ctypes.data)
+      rl_image.width = pil_img.width
+      rl_image.height = pil_img.height
+      rl_image.mipmaps = 1
+      rl_image.format = rl.PixelFormat.PIXELFORMAT_UNCOMPRESSED_R8G8B8A8
+
+      self._qr_texture = rl.load_texture_from_image(rl_image)
+    except Exception as e:
+      cloudlog.warning(f"QR code generation failed: {e}")
+      self._qr_texture = None
+
+  def _check_qr_refresh(self) -> None:
+    current_time = time.monotonic()
+    if current_time - self._last_qr_generation >= self.QR_REFRESH_INTERVAL:
+      self._generate_qr_code()
+      self._last_qr_generation = current_time
+
+  def _update_state(self):
+    super()._update_state()
+    if ui_state.prime_state.is_paired() and not self.is_dismissing:
+      self.dismiss()
+
+  def _render(self, rect: rl.Rectangle):
+    self._check_qr_refresh()
+
+    self._render_qr_code()
+
+    label_x = self._rect.x + 8 + self._rect.height + 24
+    self._pair_label.set_max_width(int(self._rect.width - label_x))
+    self._pair_label.set_position(label_x, self._rect.y + 16)
+    self._pair_label.render()
+
+    rl.draw_texture_ex(self._txt_pair, rl.Vector2(label_x, self._rect.y + self._rect.height - self._txt_pair.height - 16),
+                       0.0, 1.0, rl.Color(255, 255, 255, int(255 * 0.35)))
+
+  def _render_qr_code(self) -> None:
+    if not self._qr_texture:
+      error_font = gui_app.font(FontWeight.BOLD)
+      rl.draw_text_ex(
+        error_font, "QR Code Error", rl.Vector2(self._rect.x + 20, self._rect.y + self._rect.height // 2 - 15), 30, 0.0, rl.RED
+      )
+      return
+
+    scale = self._rect.height / self._qr_texture.height
+    pos = rl.Vector2(round(self._rect.x + 8), round(self._rect.y))
+    rl.draw_texture_ex(self._qr_texture, pos, 0.0, scale, rl.WHITE)
+
+  def __del__(self):
+    if self._qr_texture and self._qr_texture.id != 0:
+      rl.unload_texture(self._qr_texture)
+
+
+if __name__ == "__main__":
+  gui_app.init_window("pairing device")
+  pairing = PairingDialog()
+  gui_app.push_widget(pairing)
+  try:
+    for _ in gui_app.render():
+      pass
+  finally:
+    del pairing