ui: sunnylink panel (#1494)

* param to control stock vs sp ui * init styles * SP Toggles * Lint * optimizations * sp raylib preview * fix callback * fix ui preview * sunnylink state * introducing ui_state_sp for py * poll from ui_state_sp * cloudlog & ruff * param to control stock vs sp ui * better * better padding * this * listitem -> listitemsp * add show_description method * remove padding from line separator. like, WHY? 😩😩 * ui: `GuiApplicationExt` * add to readme * use gui_app.sunnypilot_ui() * use gui_app.sunnypilot_ui() * fetch only when connected to network * sponsor & pairing qr * init panel elements * backup & restore * fruit loops * update * enable, disable, enable, disable * handle layout updates * not needed * change it up * better * scroller -> scroller_tici * optimizations * remove Params * fix button disablement * ui_state_sp changes * keep enabled * add header text * dad jokes? * no * lint? Lint! * final touches * add sp font * use sp font * some * ui: add right-aligned value display support in `ListItem` (in another pr) * display sunnylink device id * display sunnylink device id and sponsor tiers * ui: add right-aligned value display support in `ListItemSP` * lint * styles * lint * ui: introduce customizable value colors for `ButtonActionSP` and `ListViewSP` * support * convert to str * disable if paired * colored sponsors * hide and disable pairing button if paired * texts * ui: sunnypilot sponsor tier color mapping * lint * dongle id for ui preview --------- Co-authored-by: Jason Wen <haibin.wen3@gmail.com> Co-authored-by: James Vecellio-Grant <159560811+Discountchubbs@users.noreply.github.com>
2026-08-05 08:16:03 +08:00 · 2025-12-05 01:01:55 -05:00
parent b5b170b65a
commit 1d9bda65fe
4 changed files with 459 additions and 7 deletions
@@ -112,7 +112,7 @@ class SettingsLayoutSP(OP.SettingsLayout):
    self._panels = {
      OP.PanelType.DEVICE: PanelInfo(tr_noop("Device"), DeviceLayoutSP(), icon="../../sunnypilot/selfdrive/assets/offroad/icon_home.png"),
      OP.PanelType.NETWORK: PanelInfo(tr_noop("Network"), NetworkUISP(wifi_manager), icon="icons/network.png"),
-      OP.PanelType.SUNNYLINK: PanelInfo(tr_noop("sunnylink"), SunnylinkLayout(), icon="icons/shell.png"),
+      OP.PanelType.SUNNYLINK: PanelInfo(tr_noop("sunnylink"), SunnylinkLayout(), icon="icons/wifi_strength_full.png"),
      OP.PanelType.TOGGLES: PanelInfo(tr_noop("Toggles"), TogglesLayout(), icon="../../sunnypilot/selfdrive/assets/offroad/icon_toggle.png"),
      OP.PanelType.SOFTWARE: PanelInfo(tr_noop("Software"), SoftwareLayout(), icon="../../sunnypilot/selfdrive/assets/offroad/icon_software.png"),
      OP.PanelType.MODELS: PanelInfo(tr_noop("Models"), ModelsLayout(), icon="../../sunnypilot/selfdrive/assets/offroad/icon_models.png"),
@@ -4,27 +4,341 @@ Copyright (c) 2021-, Haibin Wen, sunnypilot, and a number of other contributors.
 This file is part of sunnypilot and is licensed under the MIT License.
 See the LICENSE.md file in the root directory for more details.
 """
-from openpilot.common.params import Params
-from openpilot.system.ui.widgets.scroller_tici import Scroller
-from openpilot.system.ui.widgets import Widget
+from cereal import custom
+from openpilot.selfdrive.ui.ui_state import ui_state
+from openpilot.sunnypilot.sunnylink.api import UNREGISTERED_SUNNYLINK_DONGLE_ID
+from openpilot.system.ui.lib.application import gui_app, FontWeight
+from openpilot.system.ui.lib.multilang import tr
+from openpilot.system.ui.sunnypilot.widgets.sunnylink_pairing_dialog import SunnylinkPairingDialog
+from openpilot.system.ui.widgets.button import ButtonStyle, Button
+from openpilot.system.ui.widgets.confirm_dialog import alert_dialog, ConfirmDialog
+from openpilot.system.ui.widgets.label import UnifiedLabel
+from openpilot.system.ui.widgets.list_view import button_item, dual_button_item
+from openpilot.system.ui.widgets.scroller_tici import Scroller, LineSeparator
+from openpilot.system.ui.widgets import Widget, DialogResult
+from openpilot.system.ui.sunnypilot.widgets.list_view import toggle_item_sp
+import pyray as rl
+
+if gui_app.sunnypilot_ui():
+  from openpilot.system.ui.sunnypilot.widgets.list_view import button_item_sp as button_item
+
+
+class SunnylinkHeader(Widget):
+  def __init__(self):
+    super().__init__()
+
+    self._title = UnifiedLabel(
+      text="🚀 sunnylink 🚀",
+      font_size=90,
+      font_weight=FontWeight.AUDIOWIDE,
+      text_color=rl.WHITE,
+      alignment=rl.GuiTextAlignment.TEXT_ALIGN_CENTER,
+      alignment_vertical=rl.GuiTextAlignmentVertical.TEXT_ALIGN_TOP,
+      wrap_text=False,
+      elide=False
+    )
+
+    self._description = UnifiedLabel(
+      text=tr("For secure backup, restore, and remote configuration"),
+      font_size=40,
+      font_weight=FontWeight.LIGHT,
+      text_color=rl.Color(0, 255, 0, 255),  # Green
+      alignment=rl.GuiTextAlignment.TEXT_ALIGN_CENTER,
+      alignment_vertical=rl.GuiTextAlignmentVertical.TEXT_ALIGN_TOP,
+      wrap_text=True,
+      elide=False
+    )
+
+    self._sponsor_msg = UnifiedLabel(
+      text=tr("Sponsorship isn't required for basic backup/restore") + "\n" +
+           tr("Click the Sponsor button for more details"),
+      font_size=35,
+      font_weight=FontWeight.LIGHT,
+      text_color=rl.Color(255, 165, 0, 255),  # Orange
+      alignment=rl.GuiTextAlignment.TEXT_ALIGN_CENTER,
+      alignment_vertical=rl.GuiTextAlignmentVertical.TEXT_ALIGN_TOP,
+      wrap_text=True,
+      elide=False
+    )
+
+    self._padding = 20
+    self._spacing = 10
+
+  def set_parent_rect(self, parent_rect: rl.Rectangle) -> None:
+    super().set_parent_rect(parent_rect)
+
+    content_width = int(parent_rect.width - (self._padding * 2))
+
+    title_height = self._title.get_content_height(content_width)
+    desc_height = self._description.get_content_height(content_width)
+    sponsor_height = self._sponsor_msg.get_content_height(content_width)
+
+    total_height = (self._padding + title_height + self._spacing +
+                    desc_height + self._spacing + sponsor_height + self._padding)
+
+    self._rect.width = parent_rect.width
+    self._rect.height = total_height
+
+  def _render(self, rect: rl.Rectangle):
+    content_width = rect.width - (self._padding * 2)
+    current_y = rect.y + self._padding
+
+    # Render title
+    title_height = self._title.get_content_height(int(content_width))
+    title_rect = rl.Rectangle(rect.x + self._padding, current_y, content_width, title_height)
+    self._title.render(title_rect)
+    current_y += title_height + self._spacing
+
+    # Render description
+    desc_height = self._description.get_content_height(int(content_width))
+    desc_rect = rl.Rectangle(rect.x + self._padding, current_y, content_width, desc_height)
+    self._description.render(desc_rect)
+    current_y += desc_height + self._spacing
+
+    # Render sponsor message
+    sponsor_height = self._sponsor_msg.get_content_height(int(content_width))
+    sponsor_rect = rl.Rectangle(rect.x + self._padding, current_y, content_width, sponsor_height)
+    self._sponsor_msg.render(sponsor_rect)
+
+
+class SunnylinkDescriptionItem(Widget):
+  def __init__(self):
+    super().__init__()
+    self._description = UnifiedLabel(
+      text="",
+      font_size=40,
+      font_weight=FontWeight.LIGHT,
+      text_color=rl.WHITE,
+      alignment=rl.GuiTextAlignment.TEXT_ALIGN_LEFT,
+      alignment_vertical=rl.GuiTextAlignmentVertical.TEXT_ALIGN_TOP,
+      wrap_text=True,
+      elide=False,
+    )
+    self._padding = 20
+
+  def set_parent_rect(self, parent_rect: rl.Rectangle) -> None:
+    super().set_parent_rect(parent_rect)
+    desc_height = self._description.get_content_height(int(parent_rect.width)) + self._padding * 2
+
+    self._rect.width = parent_rect.width
+    self._rect.height = desc_height
+
+  def set_text(self, text: str):
+    self._description.set_text(text)
+
+  def set_color(self, color: rl.Color):
+    self._description.set_text_color(color)
+
+  def _render(self, rect: rl.Rectangle):
+    content_width = rect.width - (self._padding * 2)
+
+    desc_height = self._description.get_content_height(int(content_width))
+    desc_rect = rl.Rectangle(rect.x + self._padding, rect.y, content_width, desc_height)
+    self._description.render(desc_rect)


 class SunnylinkLayout(Widget):
  def __init__(self):
    super().__init__()

-    self._params = Params()
+    self._sunnylink_pairing_dialog: SunnylinkPairingDialog | None = None
+    self._restore_in_progress = False
+    self._backup_in_progress = False
+    self._sunnylink_enabled = ui_state.params.get("SunnylinkEnabled")
+
    items = self._initialize_items()
-    self._scroller = Scroller(items, line_separator=True, spacing=0)
+    self._scroller = Scroller(items, line_separator=False, spacing=0)

  def _initialize_items(self):
-    items = [
+    self._sunnylink_toggle = toggle_item_sp(
+      title=tr("Enable sunnylink"),
+      description=tr("This is the master switch, it will allow you to cutoff any sunnylink requests should you want to do that."),
+      param="SunnylinkEnabled",
+      callback=self._sunnylink_toggle_callback
+    )

+    self._sunnylink_description = SunnylinkDescriptionItem()
+    self._sunnylink_description.set_visible(False)
+
+    self._sponsor_btn = button_item(
+      title=tr("Sponsor Status"),
+      button_text=tr("SPONSOR"),
+      description=tr(
+        "Become a sponsor of sunnypilot to get early access to sunnylink features when they become available."),
+      callback=lambda: self._handle_pair_btn(False)
+    )
+    self._pair_btn = button_item(
+      title=tr("Pair GitHub Account"),
+      button_text=tr("Not Paired"),
+      description=tr(
+        "Pair your GitHub account to grant your device sponsor benefits, including API access on sunnylink."),
+      callback=lambda: self._handle_pair_btn(True)
+    )
+    self._sunnylink_uploader_toggle = toggle_item_sp(
+      title=tr("Enable sunnylink uploader (infrastructure test)"),
+      description=tr("Enable sunnylink uploader to allow sunnypilot to upload your driving data to sunnypilot servers. ") +
+                  tr("(Only for highest tiers, and does NOT bring ANY benefit to you yet. We are just testing data volume.)"),
+      param="EnableSunnylinkUploader"
+    )
+    self._sunnylink_backup_restore_buttons = dual_button_item(
+      description="",
+      left_text=tr("Backup Settings"),
+      right_text=tr("Restore Settings"),
+      left_callback=self._handle_backup_btn,
+      right_callback=self._handle_restore_btn
+    )
+    self._backup_btn: Button = self._sunnylink_backup_restore_buttons.action_item.left_button  # store for easy individual access
+    self._restore_btn: Button = self._sunnylink_backup_restore_buttons.action_item.right_button
+    self._backup_btn.set_button_style(ButtonStyle.NORMAL)
+    self._restore_btn.set_button_style(ButtonStyle.PRIMARY)
+
+    items = [
+      SunnylinkHeader(),
+      LineSeparator(),
+      self._sunnylink_toggle,
+      self._sunnylink_description,
+      LineSeparator(),
+      self._sponsor_btn,
+      LineSeparator(),
+      self._pair_btn,
+      LineSeparator(),
+      self._sunnylink_uploader_toggle,
+      LineSeparator(),
+      self._sunnylink_backup_restore_buttons
    ]
    return items

+  @staticmethod
+  def _get_sunnylink_dongle_id() -> str | None:
+    return str(ui_state.params.get("SunnylinkDongleId") or (lambda: tr("N/A")))
+
+  def _handle_pair_btn(self, sponsor_pairing: bool = False):
+    sunnylink_dongle_id = self._get_sunnylink_dongle_id()
+    if sunnylink_dongle_id == UNREGISTERED_SUNNYLINK_DONGLE_ID:
+      gui_app.set_modal_overlay(alert_dialog(message=tr("sunnylink Dongle ID not found. ") +
+                                                     tr("This may be due to weak internet connection or sunnylink registration issue. ") +
+                                                     tr("Please reboot and try again.")))
+    elif not self._sunnylink_pairing_dialog:
+      self._sunnylink_pairing_dialog = SunnylinkPairingDialog(sponsor_pairing)
+      gui_app.set_modal_overlay(self._sunnylink_pairing_dialog, callback=lambda result: setattr(self, '_sunnylink_pairing_dialog', None))
+
+  def _handle_backup_btn(self):
+    backup_dialog = ConfirmDialog(text=tr("Are you sure you want to backup your current sunnypilot settings?"), confirm_text="Backup")
+    gui_app.set_modal_overlay(backup_dialog, callback=self._backup_handler)
+
+  def _handle_restore_btn(self):
+    self._restore_btn.set_enabled(False)
+    restore_dialog = ConfirmDialog(text=tr("Are you sure you want to restore the last backed up sunnypilot settings?"), confirm_text="Restore")
+    gui_app.set_modal_overlay(restore_dialog, callback=self._restore_handler)
+
+  def _backup_handler(self, dialog_result: int):
+    if dialog_result == DialogResult.CONFIRM:
+      self._backup_in_progress = True
+      self._backup_btn.set_enabled(False)
+      ui_state.params.put_bool("BackupManager_CreateBackup", True)
+
+  def _restore_handler(self, dialog_result: int):
+    if dialog_result == DialogResult.CONFIRM:
+      self._restore_in_progress = True
+      self._restore_btn.set_enabled(False)
+      ui_state.params.put("BackupManager_RestoreVersion", "latest")
+
+  def handle_backup_restore_progress(self):
+    sunnylink_backup_manager = ui_state.sm["backupManagerSP"]
+
+    backup_status = sunnylink_backup_manager.backupStatus
+    restore_status = sunnylink_backup_manager.restoreStatus
+    backup_progress = sunnylink_backup_manager.backupProgress
+    restore_progress = sunnylink_backup_manager.restoreProgress
+
+    if self._backup_in_progress:
+      self._restore_btn.set_enabled(False)
+      self._backup_btn.set_enabled(False)
+
+      if backup_status == custom.BackupManagerSP.Status.inProgress:
+        self._backup_in_progress = True
+        text = tr(f"Backing up {backup_progress}%")
+        self._backup_btn.set_text(text)
+
+      elif backup_status == custom.BackupManagerSP.Status.failed:
+        self._backup_in_progress = False
+        self._backup_btn.set_enabled(not ui_state.is_onroad())
+        self._backup_btn.set_text(tr("Backup Failed"))
+
+      elif (backup_status == custom.BackupManagerSP.Status.completed or
+            (backup_status == custom.BackupManagerSP.Status.idle and backup_progress == 100.0)):
+        self._backup_in_progress = False
+        dialog = alert_dialog(tr("Settings backup completed."))
+        gui_app.set_modal_overlay(dialog)
+        self._backup_btn.set_enabled(not ui_state.is_onroad())
+
+    elif self._restore_in_progress:
+      self._restore_btn.set_enabled(False)
+      self._backup_btn.set_enabled(False)
+
+      if restore_status == custom.BackupManagerSP.Status.inProgress:
+        self._restore_in_progress = True
+        text = tr(f"Restoring {restore_progress}%")
+        self._restore_btn.set_text(text)
+
+      elif restore_status == custom.BackupManagerSP.Status.failed:
+        self._restore_in_progress = False
+        self._restore_btn.set_enabled(not ui_state.is_onroad())
+        self._restore_btn.set_text(tr("Restore Failed"))
+        dialog = alert_dialog(tr("Unable to restore the settings, try again later."))
+        gui_app.set_modal_overlay(dialog)
+
+      elif (restore_status == custom.BackupManagerSP.Status.completed or
+            (restore_status == custom.BackupManagerSP.Status.idle and restore_progress == 100.0)):
+        self._restore_in_progress = False
+        dialog = alert_dialog(tr("Settings restored. Confirm to restart the interface."))
+        gui_app.set_modal_overlay(dialog, callback=lambda: gui_app.request_close())
+
+    else:
+      can_enable = self._sunnylink_enabled and not ui_state.is_onroad()
+      self._backup_btn.set_enabled(can_enable)
+      self._backup_btn.set_text(tr("Backup Settings"))
+      self._restore_btn.set_enabled(can_enable)
+      self._restore_btn.set_text(tr("Restore Settings"))
+
+  def _sunnylink_toggle_callback(self, state: bool):
+    if state:
+      description = tr(
+        "Welcome back!! We're excited to see you've enabled sunnylink again!")
+      color = rl.Color(0, 255, 0, 255)  # Green
+    else:
+      description = ("😢 " + tr("Not going to lie, it's sad to see you disabled sunnylink") +
+                     tr(", but we'll be here when you're ready to come back."))
+      color = rl.Color(255, 165, 0, 255)  # Orange
+    self._sunnylink_description.set_text(description)
+    self._sunnylink_description.set_color(color)
+    self._sunnylink_description.set_visible(True)
+    self._sunnylink_toggle.show_description(False)
+
+  def _update_state(self):
+    super()._update_state()
+    self._sunnylink_enabled = ui_state.params.get_bool("SunnylinkEnabled")
+    self._sunnylink_toggle.set_right_value(tr("Dongle ID") + ": " + self._get_sunnylink_dongle_id())
+    self._sunnylink_toggle.action_item.set_enabled(not ui_state.is_onroad())
+    self._sunnylink_toggle.action_item.set_state(self._sunnylink_enabled)
+    self._sunnylink_uploader_toggle.action_item.set_enabled(self._sunnylink_enabled)
+    self.handle_backup_restore_progress()
+
+    sponsor_btn_text = tr("THANKS ♥") if ui_state.sunnylink_state.is_sponsor() else tr("SPONSOR")
+    tier_name = ui_state.sunnylink_state.get_sponsor_tier().name.capitalize() or tr("Not Sponsor")
+    self._sponsor_btn.action_item.set_text(sponsor_btn_text)
+    self._sponsor_btn.action_item.set_value(tier_name, ui_state.sunnylink_state.get_sponsor_tier_color())
+    self._sponsor_btn.action_item.set_enabled(self._sunnylink_enabled and not ui_state.sunnylink_state.is_sponsor())
+
+    pair_btn_text = tr("Paired") if ui_state.sunnylink_state.is_paired() else tr("Not Paired")
+    self._pair_btn.action_item.set_text(pair_btn_text)
+    self._pair_btn.set_visible(lambda: self._sunnylink_enabled and not ui_state.sunnylink_state.is_paired())
+    self._pair_btn.action_item.set_enabled(self._sunnylink_enabled and not ui_state.sunnylink_state.is_paired())
+
  def _render(self, rect):
    self._scroller.render(rect)

  def show_event(self):
+    super().show_event()
    self._scroller.show_event()
+    self._sunnylink_description.set_visible(False)
@@ -369,6 +369,7 @@ def create_screenshots():
    with OpenpilotPrefix():
      params = Params()
      params.put("DongleId", "123456789012345")
+      params.put("SunnylinkDongleId", "123456789012345")

      # Set branch name
      params.put("UpdaterCurrentDescription", VERSION)
@@ -0,0 +1,137 @@
+"""
+Copyright (c) 2021-, Haibin Wen, sunnypilot, and a number of other contributors.
+
+This file is part of sunnypilot and is licensed under the MIT License.
+See the LICENSE.md file in the root directory for more details.
+"""
+import base64
+
+import pyray as rl
+from openpilot.common.swaglog import cloudlog
+from openpilot.selfdrive.ui.ui_state import ui_state
+from openpilot.selfdrive.ui.widgets.pairing_dialog import PairingDialog
+from openpilot.sunnypilot.sunnylink.api import SunnylinkApi, UNREGISTERED_SUNNYLINK_DONGLE_ID, API_HOST
+from openpilot.system.ui.lib.application import FontWeight, gui_app
+from openpilot.system.ui.lib.multilang import tr
+from openpilot.system.ui.lib.wrap_text import wrap_text
+from openpilot.system.ui.lib.text_measure import measure_text_cached
+
+
+class SunnylinkPairingDialog(PairingDialog):
+  """Dialog for device pairing with QR code."""
+
+  QR_REFRESH_INTERVAL = 300  # 5 minutes in seconds
+
+  def __init__(self, sponsor_pairing: bool = False):
+    PairingDialog.__init__(self)
+    self._sponsor_pairing = sponsor_pairing
+
+  def _get_pairing_url(self) -> str:
+    qr_string = "https://github.com/sponsors/sunnyhaibin"
+
+    if self._sponsor_pairing:
+      try:
+        sl_dongle_id = self.params.get("SunnylinkDongleId") or UNREGISTERED_SUNNYLINK_DONGLE_ID
+        token = SunnylinkApi(sl_dongle_id).get_token()
+        inner_string = f"1|{sl_dongle_id}|{token}"
+        payload_bytes = base64.b64encode(inner_string.encode('utf-8')).decode('utf-8')
+        qr_string = f"{API_HOST}/sso?state={payload_bytes}"
+      except Exception:
+        cloudlog.exception("Failed to get pairing token")
+
+    return qr_string
+
+  def _update_state(self):
+    if ui_state.sunnylink_state.is_paired():
+      gui_app.set_modal_overlay(None)
+
+  def _render(self, rect: rl.Rectangle) -> int:
+    rl.clear_background(rl.Color(224, 224, 224, 255))
+
+    self._check_qr_refresh()
+
+    margin = 70
+    content_rect = rl.Rectangle(rect.x + margin, rect.y + margin, rect.width - 2 * margin, rect.height - 2 * margin)
+    y = content_rect.y
+
+    # Close button
+    close_size = 80
+    pad = 20
+    close_rect = rl.Rectangle(content_rect.x - pad, y - pad, close_size + pad * 2, close_size + pad * 2)
+    self._close_btn.render(close_rect)
+
+    y += close_size + 40
+
+    # Title
+    title = tr("Pair your GitHub account") if self._sponsor_pairing else tr("Early Access: Become a sunnypilot Sponsor")
+    title_font = gui_app.font(FontWeight.NORMAL)
+    left_width = int(content_rect.width * 0.5 - 15)
+
+    title_wrapped = wrap_text(title_font, title, 75, left_width)
+    rl.draw_text_ex(title_font, "\n".join(title_wrapped), rl.Vector2(content_rect.x, y), 75, 0.0, rl.BLACK)
+    y += len(title_wrapped) * 75 + 60
+
+    # Two columns: instructions and QR code
+    remaining_height = content_rect.height - (y - content_rect.y)
+    right_width = content_rect.width // 2 - 20
+
+    # Instructions
+    self._render_instructions(rl.Rectangle(content_rect.x, y, left_width, remaining_height))
+
+    # QR code
+    qr_size = min(right_width, content_rect.height) - 40
+    qr_x = content_rect.x + left_width + 40 + (right_width - qr_size) // 2
+    qr_y = content_rect.y
+    self._render_qr_code(rl.Rectangle(qr_x, qr_y, qr_size, qr_size))
+
+    return -1
+
+  def _render_instructions(self, rect: rl.Rectangle) -> None:
+    if self._sponsor_pairing:
+      instructions = [
+        tr("Scan the QR code to login to your GitHub account"),
+        tr("Follow the prompts to complete the pairing process"),
+        tr("Re-enter the \"sunnylink\" panel to verify sponsorship status"),
+        tr("If sponsorship status was not updated, please contact a moderator on the community forum at https://community.sunnypilot.ai")
+      ]
+    else:
+      instructions = [
+        tr("Scan the QR code to visit sunnyhaibin's GitHub Sponsors page"),
+        tr("Choose your sponsorship tier and confirm your support"),
+        tr("Join our Community Forum at https://community.sunnypilot.ai and reach out to a moderator if you have issues")
+      ]
+
+    font = gui_app.font(FontWeight.BOLD)
+    y = rect.y
+
+    for i, text in enumerate(instructions):
+      circle_radius = 25
+      circle_x = rect.x + circle_radius + 15
+      text_x = rect.x + circle_radius * 2 + 40
+      text_width = rect.width - (circle_radius * 2 + 40)
+
+      wrapped = wrap_text(font, text, 47, int(text_width))
+      text_height = len(wrapped) * 47
+      circle_y = y + text_height // 2
+
+      # Circle and number
+      rl.draw_circle(int(circle_x), int(circle_y), circle_radius, rl.Color(70, 70, 70, 255))
+      number = str(i + 1)
+      number_size = measure_text_cached(font, number, 30)
+      rl.draw_text_ex(font, number, (int(circle_x - number_size.x // 2), int(circle_y - number_size.y // 2)), 30, 0, rl.WHITE)
+
+      # Text
+      rl.draw_text_ex(font, "\n".join(wrapped), rl.Vector2(text_x, y), 47, 0.0, rl.BLACK)
+      y += text_height + 50
+
+
+if __name__ == "__main__":
+  gui_app.init_window("pairing device")
+  pairing = SunnylinkPairingDialog(sponsor_pairing=True)
+  try:
+    for _ in gui_app.render():
+      result = pairing.render(rl.Rectangle(0, 0, gui_app.width, gui_app.height))
+      if result != -1:
+        break
+  finally:
+    del pairing