all protected

#	system/ui/sunnypilot/widgets/list_view.py

common/params_keys.h

@@ -173,6 +173,7 @@ inline static std::unordered_map<std::string, ParamKeyAttributes> keys = {
     {"ShowAdvancedControls", {PERSISTENT | BACKUP, BOOL, "0"}},
     {"ShowTurnSignals", {PERSISTENT | BACKUP, BOOL, "0"}},
     {"StandstillTimer", {PERSISTENT | BACKUP, BOOL, "0"}},
+    {"sunnypilot_ui", {PERSISTENT, BOOL, "1"}},
     {"TrueVEgoUI", {PERSISTENT | BACKUP, BOOL, "0"}},
 
     // MADS params
@@ -191,6 +192,7 @@ inline static std::unordered_map<std::string, ParamKeyAttributes> keys = {
 
     // Navigation params
     {"AllowNavigation", {PERSISTENT | BACKUP, BOOL, "0"}},
+    {"MapboxFavorites", {PERSISTENT | BACKUP, STRING}},
     {"MapboxToken", {PERSISTENT | BACKUP, STRING}},
     {"MapboxSettings", {CLEAR_ON_MANAGER_START, JSON}},
     {"MapboxRoute", {PERSISTENT, STRING}},

selfdrive/ui/layouts/main.py

@@ -10,6 +10,9 @@ from openpilot.selfdrive.ui.ui_state import device, ui_state
 from openpilot.system.ui.widgets import Widget
 from openpilot.selfdrive.ui.layouts.onboarding import OnboardingWindow
 
+from openpilot.common.params import Params
+if Params().get_bool("sunnypilot_ui"):
+  from openpilot.selfdrive.ui.sunnypilot.layouts.settings.settings import SettingsLayoutSP as SettingsLayout
 
 class MainState(IntEnum):
   HOME = 0

selfdrive/ui/layouts/settings/developer.py

@@ -9,6 +9,9 @@ from openpilot.system.ui.lib.application import gui_app
 from openpilot.system.ui.lib.multilang import tr, tr_noop
 from openpilot.system.ui.widgets import DialogResult
 
+if Params().get_bool("sunnypilot_ui"):
+  from openpilot.system.ui.sunnypilot.widgets.list_view import toggle_item_sp as toggle_item
+
 # Description constants
 DESCRIPTIONS = {
   'enable_adb': tr_noop(

selfdrive/ui/layouts/settings/toggles.py

@@ -9,6 +9,10 @@ from openpilot.system.ui.lib.multilang import tr, tr_noop
 from openpilot.system.ui.widgets import DialogResult
 from openpilot.selfdrive.ui.ui_state import ui_state
 
+if Params().get_bool("sunnypilot_ui"):
+  from openpilot.system.ui.sunnypilot.widgets.list_view import toggle_item_sp as toggle_item
+  from openpilot.system.ui.sunnypilot.widgets.list_view import multiple_button_item_sp as multiple_button_item
+
 PERSONALITY_TO_INT = log.LongitudinalPersonality.schema.enumerants
 
 # Description constants

selfdrive/ui/sunnypilot/layouts/settings/cruise.py

@@ -0,0 +1,24 @@
+from openpilot.system.ui.widgets.scroller import Scroller
+from openpilot.system.ui.widgets import Widget
+from openpilot.common.params import Params
+
+
+class CruiseLayout(Widget):
+  def __init__(self):
+    super().__init__()
+
+    self._params = Params()
+    items = self._initialize_items()
+    self._scroller = Scroller(items, line_separator=True, spacing=0)
+
+  def _initialize_items(self):
+
+    items = [
+    ]
+    return items
+
+  def _render(self, rect):
+    self._scroller.render(rect)
+
+  def show_event(self):
+    self._scroller.show_event()

selfdrive/ui/sunnypilot/layouts/settings/device.py

@@ -0,0 +1,5 @@
+from openpilot.selfdrive.ui.layouts.settings.device import DeviceLayout
+
+class DeviceLayoutSP(DeviceLayout):
+  def __init__(self):
+    DeviceLayout.__init__(self)

selfdrive/ui/sunnypilot/layouts/settings/display.py

@@ -0,0 +1,24 @@
+from openpilot.system.ui.widgets.scroller import Scroller
+from openpilot.system.ui.widgets import Widget
+from openpilot.common.params import Params
+
+
+class DisplayLayout(Widget):
+  def __init__(self):
+    super().__init__()
+
+    self._params = Params()
+    items = self._initialize_items()
+    self._scroller = Scroller(items, line_separator=True, spacing=0)
+
+  def _initialize_items(self):
+    items = [
+
+    ]
+    return items
+
+  def _render(self, rect):
+    self._scroller.render(rect)
+
+  def show_event(self):
+    self._scroller.show_event()

selfdrive/ui/sunnypilot/layouts/settings/models.py

@@ -0,0 +1,24 @@
+from openpilot.system.ui.widgets.scroller import Scroller
+from openpilot.system.ui.widgets import Widget
+from openpilot.common.params import Params
+
+
+class ModelsLayout(Widget):
+  def __init__(self):
+    super().__init__()
+
+    self._params = Params()
+    items = self._initialize_items()
+    self._scroller = Scroller(items, line_separator=True, spacing=0)
+
+  def _initialize_items(self):
+    items = [
+
+    ]
+    return items
+
+  def _render(self, rect):
+    self._scroller.render(rect)
+
+  def show_event(self):
+    self._scroller.show_event()

selfdrive/ui/sunnypilot/layouts/settings/navigation.py

@@ -0,0 +1,124 @@
+import json
+from functools import partial
+
+from openpilot.common.params import Params
+from openpilot.system.ui.lib.application import gui_app
+from openpilot.system.ui.lib.multilang import tr
+from openpilot.system.ui.widgets import DialogResult, Widget
+from openpilot.system.ui.widgets.confirm_dialog import alert_dialog
+from openpilot.system.ui.widgets.list_view import button_item
+from openpilot.system.ui.widgets.option_dialog import MultiOptionDialog
+from openpilot.system.ui.widgets.scroller import Scroller
+
+from openpilot.sunnypilot.navd.navigationd import Navigationd
+from openpilot.system.ui.sunnypilot.widgets.input_dialog import InputDialogSP
+from openpilot.system.ui.sunnypilot.widgets.list_view import toggle_item_sp, multiple_button_item_sp
+
+
+class NavigationLayout(Widget):
+  def __init__(self):
+    super().__init__()
+    self._navd = Navigationd()
+    self._params = Params()
+
+    self._mapbox_token_item = button_item("Mapbox token", "Edit", "Enter your mapbox public token",
+                                         partial(self._show_param_input, "MapboxToken", "Enter Mapbox Token"))
+    self._mapbox_route_item = button_item("Mapbox route", "Edit", "",
+                                         partial(self._show_param_input, "MapboxRoute", "Enter Mapbox Route"))
+
+    self._vis_items = [
+      button_item("Set Home", "Set", "", partial(self._open_fav_dialog, "home", "Set Home Route")),
+      button_item("Set Work", "Set", "", partial(self._open_fav_dialog, "work", "Set Work Route")),
+      button_item("Add Favorite", "Add", "Add a new favorite", self._add_fav),
+      button_item("Remove Favorite", "Remove", "Remove a favorite", self._remove_fav),
+      toggle_item_sp("Mapbox recompute", "Enable automatic route recomputation", param="MapboxRecompute"),
+      toggle_item_sp("Navigation allowed", "Allow navigation to automatically take turns", param="NavDesiresAllowed"),
+    ]
+
+    self.items = [
+      self._mapbox_token_item, self._mapbox_route_item,
+      button_item("Clear current route", "Clear", "", self._clear_route),
+      multiple_button_item_sp("Favorites", "Select favorite route", ["Home", "Work", "Favorites"], 0, callback=self._favorites_callback),
+      *self._vis_items[:4],
+      toggle_item_sp("Allow navigation", "Enable navigation service", callback=self._update_navigation_visibility, param="AllowNavigation"),
+      *self._vis_items[4:],
+    ]
+    self._scroller = Scroller(self.items, line_separator=True, spacing=0)
+
+  @property
+  def _favs(self):
+    try:
+      return json.loads(self._params.get("MapboxFavorites") or "{}")
+    except Exception:
+      return {}
+
+  def _show_param_input(self, param, title):
+    InputDialogSP(title, current_text=self._params.get(param, return_default=True) or "", param=param).show()
+
+  def _clear_route(self):
+    self._navd.route = None
+    self._params.remove("MapboxRoute")
+
+  def _handle_save_fav(self, key, is_fav, res, text):
+    if res == DialogResult.CONFIRM and text:
+      favs = self._favs
+      (favs.setdefault("favorites", {}) if is_fav else favs)[key] = text
+      self._params.put("MapboxFavorites", json.dumps(favs))
+
+  def _open_fav_dialog(self, key, title):
+    InputDialogSP(title, current_text=self._favs.get(key, ""), callback=partial(self._handle_save_fav, key, False)).show()
+
+  def _add_fav_name_cb(self, res, name):
+    if res == DialogResult.CONFIRM and name:
+      InputDialogSP(f"Set Route for {name}", "", callback=partial(self._handle_save_fav, name, True), min_text_size=1).show()
+
+  def _add_fav(self):
+    InputDialogSP("Favorite Name", "", callback=self._add_fav_name_cb, min_text_size=1).show()
+
+  def _set_mapbox_route_cb(self, favorites, selection):
+    self._params.put("MapboxRoute", favorites[selection])
+
+  def _favorites_callback(self, index):
+    favs = self._favs
+    if index < 2:
+      if route := favs.get(["home", "work"][index]):
+        self._params.put("MapboxRoute", route)
+    elif favorites := favs.get("favorites"):
+      self._show_list_dialog(tr("Select Favorite"), list(favorites.keys()), partial(self._set_mapbox_route_cb, favorites))
+    else:
+      gui_app.set_modal_overlay(alert_dialog(tr("No custom favorites set")))
+
+  def _remove_fav_cb(self, selection):
+    favs = self._favs
+    if favs.get("favorites", {}).pop(selection, None):
+      self._params.put("MapboxFavorites", json.dumps(favs))
+
+  def _remove_fav(self):
+    if favorites := self._favs.get("favorites"):
+      self._show_list_dialog(tr("Remove Favorite"), list(favorites.keys()), self._remove_fav_cb)
+    else:
+      gui_app.set_modal_overlay(alert_dialog(tr("No custom favorites to remove")))
+
+  def _list_dialog_cb(self, callback, res):
+    if res == DialogResult.CONFIRM and self._dialog.selection:
+      callback(self._dialog.selection)
+    gui_app.set_modal_overlay(None)
+
+  def _show_list_dialog(self, title, items, callback):
+    self._dialog = MultiOptionDialog(title, items)
+    gui_app.set_modal_overlay(self._dialog, callback=partial(self._list_dialog_cb, callback))
+
+  def _update_navigation_visibility(self, state):
+    for item in self._vis_items:
+      item.set_visible(state)
+
+  def _update_state(self):
+    self._mapbox_token_item.action_item.set_value(self._params.get("MapboxToken") or "Mapbox token not set")
+    self._mapbox_route_item.action_item.set_value(self._params.get("MapboxRoute") or "Destination not set")
+    self._update_navigation_visibility(self._params.get_bool("AllowNavigation"))
+
+  def _render(self, rect):
+    self._scroller.render(rect)
+
+  def show_event(self):
+    self._scroller.show_event()

selfdrive/ui/sunnypilot/layouts/settings/osm.py

@@ -0,0 +1,24 @@
+from openpilot.system.ui.widgets.scroller import Scroller
+from openpilot.system.ui.widgets import Widget
+from openpilot.common.params import Params
+
+
+class OSMLayout(Widget):
+  def __init__(self):
+    super().__init__()
+
+    self._params = Params()
+    items = self._initialize_items()
+    self._scroller = Scroller(items, line_separator=True, spacing=0)
+
+  def _initialize_items(self):
+    items = [
+
+    ]
+    return items
+
+  def _render(self, rect):
+    self._scroller.render(rect)
+
+  def show_event(self):
+    self._scroller.show_event()

selfdrive/ui/sunnypilot/layouts/settings/settings.py

@@ -0,0 +1,189 @@
+import pyray as rl
+from dataclasses import dataclass
+from enum import IntEnum
+from openpilot.selfdrive.ui.layouts.settings import settings as OP
+from openpilot.selfdrive.ui.layouts.settings.developer import DeveloperLayout
+from openpilot.selfdrive.ui.sunnypilot.layouts.settings.device import DeviceLayoutSP
+from openpilot.selfdrive.ui.layouts.settings.firehose import FirehoseLayout
+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,MousePos
+from openpilot.system.ui.lib.multilang import tr_noop
+from openpilot.system.ui.widgets.scroller import Scroller
+from openpilot.system.ui.lib.text_measure import measure_text_cached
+from openpilot.system.ui.widgets.network import NetworkUI
+from openpilot.system.ui.lib.wifi_manager import WifiManager
+from openpilot.system.ui.widgets import Widget
+from openpilot.selfdrive.ui.sunnypilot.layouts.settings.models import ModelsLayout
+from openpilot.selfdrive.ui.sunnypilot.layouts.settings.sunnylink import SunnylinkLayout
+from openpilot.selfdrive.ui.sunnypilot.layouts.settings.osm import OSMLayout
+from openpilot.selfdrive.ui.sunnypilot.layouts.settings.trips import TripsLayout
+from openpilot.selfdrive.ui.sunnypilot.layouts.settings.vehicle import VehicleLayout
+from openpilot.selfdrive.ui.sunnypilot.layouts.settings.steering import SteeringLayout
+from openpilot.selfdrive.ui.sunnypilot.layouts.settings.cruise import CruiseLayout
+from openpilot.selfdrive.ui.sunnypilot.layouts.settings.visuals import VisualsLayout
+from openpilot.selfdrive.ui.sunnypilot.layouts.settings.display import DisplayLayout
+from openpilot.selfdrive.ui.sunnypilot.layouts.settings.navigation import NavigationLayout
+
+OP.PANEL_COLOR = rl.Color(10, 10, 10, 255)
+ICON_SIZE = 70
+
+OP.PanelType = IntEnum( # type: ignore
+  "PanelType",
+  [es.name for es in OP.PanelType] + [
+    "SUNNYLINK",
+    "MODELS",
+    "STEERING",
+    "CRUISE",
+    "VISUALS",
+    "DISPLAY",
+    "OSM",
+    "NAVIGATION",
+    "TRIPS",
+    "VEHICLE",
+  ],
+  start=0,
+  )
+
+@dataclass
+class PanelInfo(OP.PanelInfo):
+  icon: str = ""
+
+
+class SettingsLayoutSP(OP.SettingsLayout):
+  def __init__(self):
+    OP.SettingsLayout.__init__(self)
+    self._nav_items: list[Widget] = []
+
+    # Create sidebar scroller
+    self._sidebar_scroller = Scroller([], spacing=0, line_separator = False, pad_end=False)
+
+    # Panel configuration
+    wifi_manager = WifiManager()
+    wifi_manager.set_active(False)
+
+    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"), NetworkUI(wifi_manager), icon="icons/network.png"),
+      OP.PanelType.SUNNYLINK: PanelInfo(tr_noop("sunnylink"), SunnylinkLayout(), icon="icons/shell.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"),
+      OP.PanelType.STEERING: PanelInfo(tr_noop("Steering"), SteeringLayout(), icon="../../sunnypilot/selfdrive/assets/offroad/icon_lateral.png"),
+      OP.PanelType.CRUISE: PanelInfo(tr_noop("Cruise"), CruiseLayout(), icon="icons/speed_limit.png"),
+      OP.PanelType.VISUALS: PanelInfo(tr_noop("Visuals"), VisualsLayout(), icon="../../sunnypilot/selfdrive/assets/offroad/icon_visuals.png"),
+      OP.PanelType.DISPLAY: PanelInfo(tr_noop("Display"), DisplayLayout(), icon="../../sunnypilot/selfdrive/assets/offroad/icon_display.png"),
+      OP.PanelType.OSM: PanelInfo(tr_noop("OSM"), OSMLayout(), icon="../../sunnypilot/selfdrive/assets/offroad/icon_map.png"),
+      OP.PanelType.NAVIGATION: PanelInfo(tr_noop("Navigation"), NavigationLayout(), icon="../../sunnypilot/selfdrive/assets/offroad/icon_map.png"),
+      OP.PanelType.TRIPS: PanelInfo(tr_noop("Trips"), TripsLayout(), icon="../../sunnypilot/selfdrive/assets/offroad/icon_trips.png"),
+      OP.PanelType.VEHICLE: PanelInfo(tr_noop("Vehicle"), VehicleLayout(), icon="../../sunnypilot/selfdrive/assets/offroad/icon_vehicle.png"),
+      OP.PanelType.FIREHOSE: PanelInfo(tr_noop("Firehose"), FirehoseLayout(), icon="../../sunnypilot/selfdrive/assets/offroad/icon_firehose.png"),
+      OP.PanelType.DEVELOPER: PanelInfo(tr_noop("Developer"), DeveloperLayout(), icon="icons/shell.png"),
+    }
+
+  def _create_nav_button(self, panel_type: OP.PanelType, panel_info: PanelInfo) -> Widget:
+    class NavButton(Widget):
+      def __init__(self, parent, p_type, p_info):
+        super().__init__()
+        self.parent = parent
+        self.panel_type = p_type
+        self.panel_info = p_info
+
+      def _render(self, rect):
+        is_selected = self.panel_type == self.parent._current_panel
+        text_color = OP.TEXT_SELECTED if is_selected else OP.TEXT_NORMAL
+        content_x = rect.x + 90
+        text_size = measure_text_cached(self.parent._font_medium, self.panel_info.name, 65)
+
+        # Draw background if selected
+        if is_selected:
+          self.container_rect = rl.Rectangle(
+            content_x - 20, rect.y, OP.SIDEBAR_WIDTH - 70, OP.NAV_BTN_HEIGHT
+          )
+          rl.draw_rectangle_rounded(self.container_rect, 0.2, 5, OP.CLOSE_BTN_COLOR)
+
+        if self.panel_info.icon:
+          icon_texture = gui_app.texture(self.panel_info.icon, ICON_SIZE, ICON_SIZE, keep_aspect_ratio=True)
+          rl.draw_texture(icon_texture, int(content_x), int(rect.y + (OP.NAV_BTN_HEIGHT - icon_texture.height) / 2), rl.WHITE)
+          content_x += ICON_SIZE + 20
+
+        # Draw button text (right-aligned)
+        text_pos = rl.Vector2(
+          content_x,
+          rect.y + (OP.NAV_BTN_HEIGHT - text_size.y) / 2
+        )
+        rl.draw_text_ex(self.parent._font_medium, self.panel_info.name, text_pos, 55, 0, text_color)
+
+        # Store button rect for click detection
+        self.panel_info.button_rect = rect
+
+    return NavButton(self, panel_type, panel_info)
+
+  def _draw_sidebar(self, rect: rl.Rectangle):
+    rl.draw_rectangle_rec(rect, OP.SIDEBAR_COLOR)
+
+    # Close button
+    close_btn_rect = rl.Rectangle(
+      rect.x + (rect.width - OP.CLOSE_BTN_SIZE) / 2, rect.y + 60, OP.CLOSE_BTN_SIZE, OP.CLOSE_BTN_SIZE
+    )
+
+    pressed = (rl.is_mouse_button_down(rl.MouseButton.MOUSE_BUTTON_LEFT) and
+               rl.check_collision_point_rec(rl.get_mouse_position(), close_btn_rect))
+    close_color = OP.CLOSE_BTN_PRESSED if pressed else OP.CLOSE_BTN_COLOR
+    rl.draw_rectangle_rounded(close_btn_rect, 1.0, 20, close_color)
+
+    icon_color = rl.Color(255, 255, 255, 255) if not pressed else rl.Color(220, 220, 220, 255)
+    icon_dest = rl.Rectangle(
+      close_btn_rect.x + (close_btn_rect.width - self._close_icon.width) / 2,
+      close_btn_rect.y + (close_btn_rect.height - self._close_icon.height) / 2,
+      self._close_icon.width,
+      self._close_icon.height,
+      )
+    rl.draw_texture_pro(
+      self._close_icon,
+      rl.Rectangle(0, 0, self._close_icon.width, self._close_icon.height),
+      icon_dest,
+      rl.Vector2(0, 0),
+      0,
+      icon_color,
+    )
+
+    # Store close button rect for click detection
+    self._close_btn_rect = close_btn_rect
+
+    # Navigation buttons with scroller
+    if not self._nav_items:
+      for panel_type, panel_info in self._panels.items():
+        nav_button = self._create_nav_button(panel_type, panel_info)
+        nav_button.rect.width = rect.width - 100  # Full width minus padding
+        nav_button.rect.height = OP.NAV_BTN_HEIGHT
+        self._nav_items.append(nav_button)
+        self._sidebar_scroller.add_widget(nav_button)
+
+    # Draw navigation section with scroller
+    nav_rect = rl.Rectangle(
+      rect.x,
+      rect.y + 300,  # Starting Y position for nav items
+      rect.width,
+      rect.height - 300  # Remaining height after close button
+    )
+
+    if self._nav_items:
+      self._sidebar_scroller.render(nav_rect)
+      return
+
+
+  def _handle_mouse_release(self, mouse_pos: MousePos) -> bool:
+    # Check close button
+    if rl.check_collision_point_rec(mouse_pos, self._close_btn_rect):
+      if self._close_callback:
+        self._close_callback()
+      return True
+
+    # Check navigation buttons
+    for panel_type, panel_info in self._panels.items():
+      if rl.check_collision_point_rec(mouse_pos, panel_info.button_rect) and self._sidebar_scroller.scroll_panel.is_touch_valid():
+        self.set_current_panel(panel_type)
+        return True
+
+    return False

selfdrive/ui/sunnypilot/layouts/settings/steering.py

@@ -0,0 +1,24 @@
+from openpilot.system.ui.widgets.scroller import Scroller
+from openpilot.system.ui.widgets import Widget
+from openpilot.common.params import Params
+
+
+class SteeringLayout(Widget):
+  def __init__(self):
+    super().__init__()
+
+    self._params = Params()
+    items = self._initialize_items()
+    self._scroller = Scroller(items, line_separator=True, spacing=0)
+
+  def _initialize_items(self):
+    items = [
+
+    ]
+    return items
+
+  def _render(self, rect):
+    self._scroller.render(rect)
+
+  def show_event(self):
+    self._scroller.show_event()

selfdrive/ui/sunnypilot/layouts/settings/sunnylink.py

@@ -0,0 +1,24 @@
+from openpilot.system.ui.widgets.scroller import Scroller
+from openpilot.system.ui.widgets import Widget
+from openpilot.common.params import Params
+
+
+class SunnylinkLayout(Widget):
+  def __init__(self):
+    super().__init__()
+
+    self._params = Params()
+    items = self._initialize_items()
+    self._scroller = Scroller(items, line_separator=True, spacing=0)
+
+  def _initialize_items(self):
+    items = [
+
+    ]
+    return items
+
+  def _render(self, rect):
+    self._scroller.render(rect)
+
+  def show_event(self):
+    self._scroller.show_event()

selfdrive/ui/sunnypilot/layouts/settings/trips.py

@@ -0,0 +1,24 @@
+from openpilot.system.ui.widgets.scroller import Scroller
+from openpilot.system.ui.widgets import Widget
+from openpilot.common.params import Params
+
+
+class TripsLayout(Widget):
+  def __init__(self):
+    super().__init__()
+
+    self._params = Params()
+    items = self._initialize_items()
+    self._scroller = Scroller(items, line_separator=True, spacing=0)
+
+  def _initialize_items(self):
+    items = [
+
+    ]
+    return items
+
+  def _render(self, rect):
+    self._scroller.render(rect)
+
+  def show_event(self):
+    self._scroller.show_event()

selfdrive/ui/sunnypilot/layouts/settings/vehicle.py

@@ -0,0 +1,24 @@
+from openpilot.system.ui.widgets.scroller import Scroller
+from openpilot.system.ui.widgets import Widget
+from openpilot.common.params import Params
+
+
+class VehicleLayout(Widget):
+  def __init__(self):
+    super().__init__()
+
+    self._params = Params()
+    items = self._initialize_items()
+    self._scroller = Scroller(items, line_separator=True, spacing=0)
+
+  def _initialize_items(self):
+    items = [
+
+    ]
+    return items
+
+  def _render(self, rect):
+    self._scroller.render(rect)
+
+  def show_event(self):
+    self._scroller.show_event()

selfdrive/ui/sunnypilot/layouts/settings/visuals.py

@@ -0,0 +1,24 @@
+from openpilot.system.ui.widgets.scroller import Scroller
+from openpilot.system.ui.widgets import Widget
+from openpilot.common.params import Params
+
+
+class VisualsLayout(Widget):
+  def __init__(self):
+    super().__init__()
+
+    self._params = Params()
+    items = self._initialize_items()
+    self._scroller = Scroller(items, line_separator=True, spacing=0)
+
+  def _initialize_items(self):
+    items = [
+
+    ]
+    return items
+
+  def _render(self, rect):
+    self._scroller.render(rect)
+
+  def show_event(self):
+    self._scroller.show_event()

selfdrive/ui/tests/test_ui/raylib_screenshots.py

@@ -148,7 +148,7 @@ def setup_experimental_mode_description(click, pm: PubMaster):
 
 def setup_openpilot_long_confirmation_dialog(click, pm: PubMaster):
   setup_settings_developer(click, pm)
-  click(2000, 960)  # toggle openpilot longitudinal control
+  click(650, 960)  # toggle openpilot longitudinal control
 
 
 def setup_onroad(click, pm: PubMaster):
@@ -292,6 +292,7 @@ def create_screenshots():
     with OpenpilotPrefix():
       params = Params()
       params.put("DongleId", "123456789012345")
+      params.put_bool("sunnypilot_ui", True)
 
       # Set branch name
       params.put("UpdaterCurrentDescription", VERSION)

sunnypilot/navd/README.md

@@ -3,4 +3,5 @@
 Navigation daemon with Mapbox integration for semi-offline navigation. This module handles route planning, geocoding, and turn-by-turn instructions to support autonomous driving features.
 
 - `navigation_helpers/`: Mapbox API integration and navigation instructions processing.
-- `navigationd`: Navigation service which uses mapbox integration to generate a route and keep it up to date. This service runs at three hz, using keep time to ensure the while loop only updates three times a second rather than every time sm updates, which in this case would be twenty hz (LLK).
+- `navigationd`: Navigation service which uses mapbox integration to generate a route and keep it up to date. This service runs at three hz, using keep time to ensure the while loop only updates three times a second rather than every time sm updates, which in this case would be twenty hz (LLK).
+- `nav raylib`: Raylib UI for navigation. This may take a hot minute to make, maybe 1-2 weeks.

sunnypilot/selfdrive/assets/offroad/icon_firehose.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a258a022f0ab90368327d899ed4fb85b47dd0e35c93508e35851d9c3184528c0
+size 36382

sunnypilot/selfdrive/assets/offroad/icon_home.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8623dbc5c7dd043a91d98777cb423cfd116014ed6390af6d7d00c1f8dea3c6e8
+size 1181

system/ui/spinner.py

@@ -8,8 +8,6 @@ from openpilot.system.ui.lib.text_measure import measure_text_cached
 from openpilot.system.ui.text import wrap_text
 from openpilot.system.ui.widgets import Widget
 
-from openpilot.system.ui.sunnypilot.lib.application import gui_app_sp
-
 # Constants
 PROGRESS_BAR_WIDTH = 1000
 PROGRESS_BAR_HEIGHT = 20
@@ -28,7 +26,7 @@ def clamp(value, min_value, max_value):
 class Spinner(Widget):
   def __init__(self):
     super().__init__()
-    self._comma_texture = gui_app_sp.sp_texture("images/spinner_sunnypilot.png", TEXTURE_SIZE, TEXTURE_SIZE)
+    self._comma_texture = gui_app.texture("../../sunnypilot/selfdrive/assets/images/spinner_sunnypilot.png", TEXTURE_SIZE, TEXTURE_SIZE)
     self._spinner_texture = gui_app.texture("images/spinner_track.png", TEXTURE_SIZE, TEXTURE_SIZE, alpha_premultiply=True)
     self._rotation = 0.0
     self._progress: int | None = None

system/ui/sunnypilot/lib/application.py

@@ -1,24 +0,0 @@
-from openpilot.system.ui.lib.application import GuiApplication
-from importlib.resources import as_file, files
-
-ASSETS_DIR_SP = files("openpilot.sunnypilot.selfdrive").joinpath("assets")
-
-
-class GuiApplicationSP(GuiApplication):
-
-  def __init__(self, width: int, height: int):
-    super().__init__(width, height)
-
-  def sp_texture(self, asset_path: str, width: int, height: int, alpha_premultiply=False, keep_aspect_ratio=True):
-    cache_key = f"{asset_path}_{width}_{height}_{alpha_premultiply}{keep_aspect_ratio}"
-    if cache_key in self._textures:
-      return self._textures[cache_key]
-
-    with as_file(ASSETS_DIR_SP.joinpath(asset_path)) as fspath:
-      image_obj = self._load_image_from_path(fspath.as_posix(), width, height, alpha_premultiply, keep_aspect_ratio)
-      texture_obj = self._load_texture_from_image(image_obj)
-    self._textures[cache_key] = texture_obj
-    return texture_obj
-
-
-gui_app_sp = GuiApplicationSP(2160, 1080)

system/ui/sunnypilot/lib/styles.py

@@ -0,0 +1,44 @@
+import pyray as rl
+from dataclasses import dataclass
+
+@dataclass
+class Base:
+  # Widget/Control Base Dimensions
+  ITEM_BASE_HEIGHT = 170
+  ITEM_PADDING = 20
+  ITEM_TEXT_FONT_SIZE = 50
+  ITEM_DESC_FONT_SIZE = 40
+  ITEM_DESC_V_OFFSET = 150
+
+  # Toggle Control
+  TOGGLE_HEIGHT = 100
+  TOGGLE_WIDTH = int(TOGGLE_HEIGHT * 1.75)
+  TOGGLE_BG_HEIGHT = TOGGLE_HEIGHT - 20
+
+  # Button Control
+  BUTTON_WIDTH = 250
+  BUTTON_HEIGHT = 100
+
+@dataclass
+class SP_Default(Base):
+  # Base Colors
+  BASE_BG_COLOR = rl.Color(57, 57, 57, 255) # Grey
+  ON_BG_COLOR = rl.Color(28, 101, 186, 255) # Blue
+  OFF_BG_COLOR = BASE_BG_COLOR
+  ON_HOVER_BG_COLOR = rl.Color(17, 78, 150, 255) # Dark Blue
+  OFF_HOVER_BG_COLOR = rl.Color(21, 21, 21, 255)  # Dark gray
+  DISABLED_ON_BG_COLOR = rl.Color(37, 70, 107, 255) # Dull Blue
+  DISABLED_OFF_BG_COLOR = rl.Color(39, 39, 39, 255) # Grey
+  ITEM_TEXT_COLOR = rl.WHITE
+  ITEM_DISABLED_TEXT_COLOR = rl.Color(88, 88, 88, 255)
+  ITEM_DESC_TEXT_COLOR = rl.Color(128, 128, 128, 255)
+
+  # Toggle Control
+  TOGGLE_ON_COLOR = ON_BG_COLOR
+  TOGGLE_OFF_COLOR = OFF_BG_COLOR
+  TOGGLE_KNOB_COLOR = rl.WHITE
+  TOGGLE_DISABLED_ON_COLOR = DISABLED_ON_BG_COLOR
+  TOGGLE_DISABLED_OFF_COLOR = DISABLED_OFF_BG_COLOR
+  TOGGLE_DISABLED_KNOB_COLOR = rl.Color(88, 88, 88, 255) # Lighter Grey
+
+style = SP_Default

system/ui/sunnypilot/widgets/input_dialog.py

@@ -0,0 +1,35 @@
+from collections.abc import Callable
+
+from openpilot.common.params import Params
+from openpilot.system.ui.lib.application import gui_app
+from openpilot.system.ui.lib.multilang import tr
+from openpilot.system.ui.widgets import DialogResult
+from openpilot.system.ui.widgets.keyboard import Keyboard
+
+
+class InputDialogSP:
+  def __init__(self, title: str, sub_title: str | None = None, current_text: str = "", param: str | None = None,
+               callback: Callable[[DialogResult, str], None] | None = None,
+               min_text_size: int = 0, password_mode: bool = False):
+    self.callback = callback
+    self.current_text = current_text
+    self.keyboard = Keyboard(max_text_size=255, min_text_size=min_text_size, password_mode=password_mode)
+    self.param = param
+    self._params = Params()
+    self.sub_title = sub_title
+    self.title = title
+
+  def show(self):
+    self.keyboard.reset(min_text_size=self.keyboard._min_text_size)
+    self.keyboard.set_title(tr(self.title), *(tr(self.sub_title),) if self.sub_title else ())
+    self.keyboard.set_text(self.current_text)
+
+    def internal_callback(result: DialogResult):
+      text = self.keyboard.text if result == DialogResult.CONFIRM else ""
+      if result == DialogResult.CONFIRM:
+        if self.param:
+          self._params.put(self.param, text)
+      if self.callback:
+        self.callback(result, text)
+
+    gui_app.set_modal_overlay(self.keyboard, internal_callback)

system/ui/sunnypilot/widgets/list_view.py

@@ -0,0 +1,173 @@
+import pyray as rl
+
+from collections.abc import Callable
+from openpilot.common.params import Params
+from openpilot.system.ui.lib.application import MousePos
+from openpilot.system.ui.lib.text_measure import measure_text_cached
+from openpilot.system.ui.sunnypilot.widgets.toggle import ToggleSP
+from openpilot.system.ui.widgets.list_view import ListItem, ToggleAction, ItemAction, MultipleButtonAction, _resolve_value
+from openpilot.system.ui.sunnypilot.lib.styles import style
+
+
+class ToggleActionSP(ToggleAction):
+  def __init__(self, initial_state: bool = False, width: int = style.TOGGLE_WIDTH, enabled: bool | Callable[[], bool] = True,
+               callback: Callable[[bool], None] | None = None, param: str | None = None):
+    ToggleAction.__init__(self, initial_state, width, enabled, callback)
+    self.toggle = ToggleSP(initial_state=initial_state, callback=callback, param=param)
+
+class MultipleButtonActionSP(MultipleButtonAction):
+  def __init__(self, param: str | None, buttons: list[str | Callable[[], str]], button_width: int, selected_index: int = 0, callback: Callable = None):
+    MultipleButtonAction.__init__(self, buttons, button_width, selected_index, callback)
+    self.param_key = param
+    self.params = Params()
+    if self.param_key:
+      self.selected_button = int(self.params.get(self.param_key, return_default=True))
+
+  def _render(self, rect: rl.Rectangle):
+    spacing = style.ITEM_PADDING
+    button_y = rect.y + (rect.height - style.BUTTON_HEIGHT) / 2
+
+    for i, _text in enumerate(self.buttons):
+      button_x = rect.x + i * (self.button_width + spacing)
+      button_rect = rl.Rectangle(button_x, button_y, self.button_width, style.BUTTON_HEIGHT)
+
+      # Check button state
+      mouse_pos = rl.get_mouse_position()
+      is_hovered = rl.check_collision_point_rec(mouse_pos, button_rect)
+      is_pressed = is_hovered and rl.is_mouse_button_down(rl.MouseButton.MOUSE_BUTTON_LEFT) and self.is_pressed
+      is_selected = i == self.selected_button
+
+      # Button colors
+      if is_selected:
+        bg_color = style.ON_BG_COLOR
+        if is_pressed:
+          bg_color = style.ON_HOVER_BG_COLOR
+      elif is_pressed:
+        bg_color = style.OFF_HOVER_BG_COLOR
+      else:
+        bg_color = style.OFF_BG_COLOR
+
+      if not self.enabled:
+        bg_color = style.DISABLED_OFF_BG_COLOR
+
+      # Draw button
+      rl.draw_rectangle_rounded(button_rect, 1.0, 20, bg_color)
+
+      # Draw text
+      text = _resolve_value(_text, "")
+      text_size = measure_text_cached(self._font, text, 40)
+      text_x = button_x + (self.button_width - text_size.x) / 2
+      text_y = button_y + (style.BUTTON_HEIGHT - text_size.y) / 2
+      text_color = style.ITEM_TEXT_COLOR if self.enabled else style.ITEM_DISABLED_TEXT_COLOR
+      rl.draw_text_ex(self._font, text, rl.Vector2(text_x, text_y), 40, 0, text_color)
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+    MultipleButtonAction._handle_mouse_release(self, mouse_pos)
+    if self.param_key:
+      self.params.put(self.param_key, self.selected_button)
+
+class ListItemSP(ListItem):
+  def __init__(self, title: str | Callable[[], str] = "", icon: str | None = None, description: str | Callable[[], str] | None = None,
+               description_visible: bool = False, callback: Callable | None = None,
+               action_item: ItemAction | None = None, inline: bool = True):
+    ListItem.__init__(self, title, icon, description, description_visible, callback, action_item)
+    self.inline = inline
+    if not self.inline:
+      self._rect.height += style.ITEM_BASE_HEIGHT/1.75
+
+  def get_item_height(self, font: rl.Font, max_width: int) -> float:
+    height = super().get_item_height(font, max_width)
+    if not self.inline:
+      height = height + style.ITEM_BASE_HEIGHT/1.75
+    return height
+
+  def get_right_item_rect(self, item_rect: rl.Rectangle) -> rl.Rectangle:
+    if not self.action_item:
+      return rl.Rectangle(0, 0, 0, 0)
+
+    if not self.inline:
+      action_y = item_rect.y + self._text_size.y + style.ITEM_PADDING * 3
+      return rl.Rectangle(item_rect.x + style.ITEM_PADDING, action_y, item_rect.width - (style.ITEM_PADDING * 2), style.BUTTON_HEIGHT)
+
+    right_width = self.action_item.rect.width
+    if right_width == 0:  # Full width action (like DualButtonAction)
+      return rl.Rectangle(item_rect.x + style.ITEM_PADDING, item_rect.y,
+                          item_rect.width - (style.ITEM_PADDING * 2), style.ITEM_BASE_HEIGHT)
+
+    action_width = self.action_item.rect.width
+    if isinstance(self.action_item, ToggleAction):
+      action_x = item_rect.x
+    else:
+      action_x = item_rect.x + item_rect.width - action_width
+    action_y = item_rect.y
+    return rl.Rectangle(action_x, action_y, action_width, style.ITEM_BASE_HEIGHT)
+
+  def _render(self, _):
+    if not self.is_visible:
+      return
+
+      # Don't draw items that are not in parent's viewport
+    if (self._rect.y + self.rect.height) <= self._parent_rect.y or self._rect.y >= (self._parent_rect.y + self._parent_rect.height):
+      return
+
+    content_x = self._rect.x + style.ITEM_PADDING
+    text_x = content_x
+    left_action_item = isinstance(self.action_item, ToggleAction)
+
+    if left_action_item:
+      left_rect = rl.Rectangle(
+        content_x,
+        self._rect.y + (style.ITEM_BASE_HEIGHT - style.TOGGLE_HEIGHT) // 2,
+        style.TOGGLE_WIDTH,
+        style.TOGGLE_HEIGHT
+      )
+      text_x = left_rect.x + left_rect.width + style.ITEM_PADDING * 1.5
+
+      # Draw title
+      if self.title:
+        self._text_size = measure_text_cached(self._font, self.title, style.ITEM_TEXT_FONT_SIZE)
+        item_y = self._rect.y + (style.ITEM_BASE_HEIGHT - self._text_size.y) // 2
+        rl.draw_text_ex(self._font, self.title, rl.Vector2(text_x, item_y), style.ITEM_TEXT_FONT_SIZE, 0, style.ITEM_TEXT_COLOR)
+
+      # Render toggle and handle callback
+      if self.action_item.render(left_rect) and self.action_item.enabled:
+        if self.callback:
+          self.callback()
+
+    else:
+      if self.title:
+        # Draw main text
+        self._text_size = measure_text_cached(self._font, self.title, style.ITEM_TEXT_FONT_SIZE)
+        item_y = self._rect.y + (style.ITEM_BASE_HEIGHT - self._text_size.y) // 2 if self.inline else self._rect.y + style.ITEM_PADDING * 1.5
+        rl.draw_text_ex(self._font, self.title, rl.Vector2(text_x, item_y), style.ITEM_TEXT_FONT_SIZE, 0, style.ITEM_TEXT_COLOR)
+
+        # Draw right item if present
+        if self.action_item:
+          right_rect = self.get_right_item_rect(self._rect)
+          if self.action_item.render(right_rect) and self.action_item.enabled:
+            # Right item was clicked/activated
+            if self.callback:
+              self.callback()
+
+    # Draw description if visible
+    if self.description_visible:
+      content_width = int(self._rect.width - style.ITEM_PADDING * 2)
+      description_height = self._html_renderer.get_total_height(content_width)
+
+      desc_y = self._rect.y + style.ITEM_DESC_V_OFFSET
+      if not self.inline and self.action_item:
+        desc_y = self.action_item.rect.y + style.ITEM_DESC_V_OFFSET - style.ITEM_PADDING * 1.75
+
+      description_rect = rl.Rectangle(self._rect.x + style.ITEM_PADDING, desc_y, content_width, description_height)
+      self._html_renderer.render(description_rect)
+
+def toggle_item_sp(title: str | Callable[[], str], description: str | Callable[[], str] | None = None, initial_state: bool = False,
+                callback: Callable | None = None, icon: str = "", enabled: bool | Callable[[], bool] = True, param: str | None = None) -> ListItem:
+  action = ToggleActionSP(initial_state=initial_state, enabled=enabled, callback=callback, param=param)
+  return ListItemSP(title=title, description=description, action_item=action, icon=icon, callback=callback)
+
+def multiple_button_item_sp(title: str | Callable[[], str], description: str| Callable[[], str], buttons: list[str | Callable[[], str]],
+                            selected_index: int = 0, button_width: int = style.BUTTON_WIDTH, callback: Callable = None,
+                            icon: str = "", param: str | None = None, inline: bool = True) -> ListItem:
+  action = MultipleButtonActionSP(param, buttons, button_width, selected_index, callback=callback)
+  return ListItemSP(title=title, description=description, icon=icon, action_item=action, inline=inline)

system/ui/sunnypilot/widgets/tests/test_input_dialog.py

@@ -0,0 +1,58 @@
+import os
+import pytest
+
+from openpilot.common.params import Params
+from openpilot.system.ui.lib.application import gui_app
+from openpilot.system.ui.widgets.keyboard import Keyboard
+from openpilot.system.ui.sunnypilot.widgets.input_dialog import InputDialogSP
+
+os.environ['SDL_VIDEODRIVER'] = 'dummy'
+if not os.environ.get('CI'):
+  pytest.skip("Test in CI environment, or comment out this flag to test locally", allow_module_level=True)
+
+
+class TestInputDialog:
+  def setup_method(self):
+    self.params = Params()
+
+  def test_input_dialog_int(self):
+    gui_app.init_window("test window")
+    dialog = InputDialogSP("title", current_text="current_text", param="MapTargetVelocities")
+    dialog.show()
+
+    dialog.keyboard._render_return_status = 1
+    gui_app._handle_modal_overlay()
+
+    assert self.params.get("MapTargetVelocities") == "current_text"
+
+  def test_before_input_dialog(self):
+    gui_app.init_window("test window")
+    current_apn = "gsmapn"
+    # This tests the pre InputDialogSP, where keyboard setup had to be done for every single dialog box you want to use.
+    self.keyboard = Keyboard()
+    self.keyboard.reset(min_text_size=0)
+    self.keyboard.set_title(("Enter APN"), ("networking"))
+    self.keyboard.set_text(current_apn)
+
+    def pre_input_dialog_callback(result):
+      if result == 1:
+        apn = self.keyboard.text.strip()
+        self.params.put("GsmApn", apn)
+
+    gui_app.set_modal_overlay(self.keyboard, pre_input_dialog_callback)
+    self.keyboard.set_text("new_apn")
+    self.keyboard._render_return_status = 1
+    gui_app._handle_modal_overlay()
+    pre_input_dialog_result = self.params.get("GsmApn")
+
+    assert pre_input_dialog_result == "new_apn"
+
+    dialog = InputDialogSP(title="Enter APN", sub_title="networking", current_text=current_apn, param="GsmApn")
+    dialog.show()
+    dialog.keyboard.set_text("new_apn")
+    dialog.keyboard._render_return_status = 1
+    gui_app._handle_modal_overlay()
+    input_dialog_result = self.params.get("GsmApn")
+
+    assert input_dialog_result == "new_apn"
+    assert pre_input_dialog_result == input_dialog_result

system/ui/sunnypilot/widgets/toggle.py

@@ -0,0 +1,96 @@
+import pyray as rl
+from collections.abc import Callable
+from openpilot.common.params import Params
+from openpilot.system.ui.lib.application import MousePos
+from openpilot.system.ui.widgets.toggle import Toggle
+from openpilot.system.ui.sunnypilot.lib.styles import style
+
+KNOB_PADDING = 5
+KNOB_RADIUS = style.TOGGLE_BG_HEIGHT / 2 - KNOB_PADDING
+SYMBOL_SIZE = KNOB_RADIUS / 2
+
+class ToggleSP(Toggle):
+  def __init__(self, initial_state=False, callback: Callable[[bool], None] | None = None, param: str | None = None):
+    self.param_key = param
+    self.params = Params()
+    if self.param_key:
+        initial_state = self.params.get_bool(self.param_key)
+    Toggle.__init__(self, initial_state, callback)
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+      super()._handle_mouse_release(mouse_pos)
+      if self._enabled and self.param_key:
+        self.params.put_bool(self.param_key, self._state)
+
+  def _render(self, rect: rl.Rectangle):
+    self.update()
+    if self._enabled:
+      bg_color = self._blend_color(style.TOGGLE_OFF_COLOR, style.TOGGLE_ON_COLOR, self._progress)
+      knob_color = style.TOGGLE_KNOB_COLOR
+    else:
+      bg_color = self._blend_color(style.TOGGLE_DISABLED_OFF_COLOR, style.TOGGLE_DISABLED_ON_COLOR, self._progress)
+      knob_color = style.TOGGLE_DISABLED_KNOB_COLOR
+
+    # Draw background
+    bg_rect = rl.Rectangle(self._rect.x, self._rect.y, style.TOGGLE_WIDTH, style.TOGGLE_BG_HEIGHT)
+
+    # Draw outline first
+    outline_color = style.TOGGLE_ON_COLOR
+    if not self._enabled:
+        # Use a more subtle color for disabled state
+        outline_color = rl.Color(outline_color.r // 2, outline_color.g // 2, outline_color.b // 2, 255)
+
+    # Draw outline by drawing a slightly larger rounded rectangle behind the background
+    outline_rect = rl.Rectangle(bg_rect.x - 2, bg_rect.y - 2, bg_rect.width + 4, bg_rect.height + 4)
+    rl.draw_rectangle_rounded(outline_rect, 1.0, 10, outline_color)
+
+    # Draw actual background
+    rl.draw_rectangle_rounded(bg_rect, 1.0, 10, bg_color)
+
+    left_edge = bg_rect.x + KNOB_PADDING
+    right_edge = bg_rect.x + bg_rect.width - KNOB_PADDING
+
+    knob_travel_distance = right_edge - left_edge - 2 * KNOB_RADIUS
+    min_knob_x = left_edge + KNOB_RADIUS
+    knob_x = min_knob_x + knob_travel_distance * self._progress
+    knob_y = self._rect.y + style.TOGGLE_BG_HEIGHT / 2
+
+    rl.draw_circle(int(knob_x), int(knob_y), KNOB_RADIUS, knob_color)
+
+    if self._state and (self._enabled or self._progress > 0.5):
+        # Draw checkmark when toggle is ON
+        start_x = knob_x - SYMBOL_SIZE * 0.8
+        start_y = knob_y
+        mid_x = knob_x - SYMBOL_SIZE * 0.1
+        mid_y = knob_y + SYMBOL_SIZE * 0.6
+        end_x = knob_x + SYMBOL_SIZE * 0.8
+        end_y = knob_y - SYMBOL_SIZE * 0.5
+
+        rl.draw_line_ex(
+            rl.Vector2(int(start_x), int(start_y)),
+            rl.Vector2(int(mid_x), int(mid_y)),
+            3,
+          style.TOGGLE_ON_COLOR
+        )
+        rl.draw_line_ex(
+            rl.Vector2(int(mid_x), int(mid_y)),
+            rl.Vector2(int(end_x), int(end_y)),
+            3,
+          style.TOGGLE_ON_COLOR
+        )
+    else:
+        # Draw X when toggle is OFF
+        x_offset = SYMBOL_SIZE * 0.65
+
+        rl.draw_line_ex(
+            rl.Vector2(int(knob_x - x_offset), int(knob_y - x_offset)),
+            rl.Vector2(int(knob_x + x_offset), int(knob_y + x_offset)),
+            3,
+          style.TOGGLE_OFF_COLOR
+        )
+        rl.draw_line_ex(
+            rl.Vector2(int(knob_x + x_offset), int(knob_y - x_offset)),
+            rl.Vector2(int(knob_x - x_offset), int(knob_y + x_offset)),
+            3,
+          style.TOGGLE_OFF_COLOR
+        )