Network menu improvements (#37077)

* try this

* that's handy

* todo, not sure what happens here

* set_text

* normalize

* scroll wifi

* clean up

* more

* better check

selfdrive/ui/mici/layouts/settings/network/__init__.py

@@ -3,7 +3,7 @@ from enum import IntEnum
 from collections.abc import Callable
 
 from openpilot.system.ui.widgets.scroller import Scroller
-from openpilot.selfdrive.ui.mici.layouts.settings.network.wifi_ui import WifiUIMici
+from openpilot.selfdrive.ui.mici.layouts.settings.network.wifi_ui import WifiUIMici, WifiIcon, normalize_ssid
 from openpilot.selfdrive.ui.mici.widgets.button import BigButton, BigMultiToggle, BigParamControl, BigToggle
 from openpilot.selfdrive.ui.mici.widgets.dialog import BigInputDialog
 from openpilot.selfdrive.ui.ui_state import ui_state
@@ -55,9 +55,6 @@ class NetworkLayoutMici(NavWidget):
     self._tethering_password_btn = BigButton("tethering password", "", txt_tethering)
     self._tethering_password_btn.set_click_callback(tethering_password_clicked)
 
-    # ******** IP Address ********
-    self._ip_address_btn = BigButton("IP Address", "Not connected")
-
     # ******** Network Metered ********
     def network_metered_callback(value: str):
       self._network_metered_btn.set_enabled(False)
@@ -73,8 +70,13 @@ class NetworkLayoutMici(NavWidget):
     self._network_metered_btn = BigMultiToggle("network usage", ["default", "metered", "unmetered"], select_callback=network_metered_callback)
     self._network_metered_btn.set_enabled(False)
 
-    wifi_button = BigButton("wi-fi")
-    wifi_button.set_click_callback(lambda: self._switch_to_panel(NetworkPanelType.WIFI))
+    self._wifi_slash_txt = gui_app.texture("icons_mici/settings/network/wifi_strength_slash.png", 64, 56)
+    self._wifi_low_txt = gui_app.texture("icons_mici/settings/network/wifi_strength_low.png", 64, 47)
+    self._wifi_medium_txt = gui_app.texture("icons_mici/settings/network/wifi_strength_medium.png", 64, 47)
+    self._wifi_full_txt = gui_app.texture("icons_mici/settings/network/wifi_strength_full.png", 64, 47)
+
+    self._wifi_button = BigButton("wi-fi", "not connected", self._wifi_slash_txt, scroll=True)
+    self._wifi_button.set_click_callback(lambda: self._switch_to_panel(NetworkPanelType.WIFI))
 
     # ******** Advanced settings ********
     # ******** Roaming toggle ********
@@ -89,7 +91,7 @@ class NetworkLayoutMici(NavWidget):
 
     # Main scroller ----------------------------------
     self._scroller = Scroller([
-      wifi_button,
+      self._wifi_button,
       self._network_metered_btn,
       self._tethering_toggle_btn,
       self._tethering_password_btn,
@@ -98,7 +100,6 @@ class NetworkLayoutMici(NavWidget):
       self._apn_btn,
       self._cellular_metered_btn,
       # */
-      self._ip_address_btn,
     ], snap_items=False)
 
     # Set initial config
@@ -157,8 +158,22 @@ class NetworkLayoutMici(NavWidget):
     self._network_metered_btn.set_enabled(lambda: not tethering_active and bool(self._wifi_manager.ipv4_address))
     self._tethering_toggle_btn.set_checked(tethering_active)
 
-    # Update IP address
-    self._ip_address_btn.set_value(self._wifi_manager.ipv4_address or "Not connected")
+    # Update wi-fi button with ssid and ip address
+    # TODO: make sure we handle hidden ssids
+    connected_network = next((network for network in networks if network.is_connected), None)
+    self._wifi_button.set_text(normalize_ssid(connected_network.ssid) if connected_network is not None else "wi-fi")
+    self._wifi_button.set_value(self._wifi_manager.ipv4_address or "not connected")
+    if connected_network is not None:
+      strength = WifiIcon.get_strength_icon_idx(connected_network.strength)
+      if strength == 2:
+        strength_icon = self._wifi_full_txt
+      elif strength == 1:
+        strength_icon = self._wifi_medium_txt
+      else:
+        strength_icon = self._wifi_low_txt
+      self._wifi_button.set_icon(strength_icon)
+    else:
+      self._wifi_button.set_icon(self._wifi_slash_txt)
 
     # Update network metered
     self._network_metered_btn.set_value(

selfdrive/ui/mici/layouts/settings/network/wifi_ui.py

@@ -50,12 +50,16 @@ class WifiIcon(Widget):
   def set_scale(self, scale: float):
     self._scale = scale
 
+  @staticmethod
+  def get_strength_icon_idx(strength: int) -> int:
+    return round(strength / 100 * 2)
+
   def _render(self, _):
     if self._network is None:
       return
 
     # Determine which wifi strength icon to use
-    strength = round(self._network.strength / 100 * 2)
+    strength = self.get_strength_icon_idx(self._network.strength)
     if strength == 2:
       strength_icon = self._wifi_full_txt
     elif strength == 1:

selfdrive/ui/mici/widgets/button.py

@@ -104,12 +104,14 @@ class BigCircleToggle(BigCircleButton):
 class BigButton(Widget):
   """A lightweight stand-in for the Qt BigButton, drawn & updated each frame."""
 
-  def __init__(self, text: str, value: str = "", icon: Union[str, rl.Texture] = "", icon_size: tuple[int, int] = (64, 64)):
+  def __init__(self, text: str, value: str = "", icon: Union[str, rl.Texture] = "", icon_size: tuple[int, int] = (64, 64),
+               scroll: bool = False):
     super().__init__()
     self.set_rect(rl.Rectangle(0, 0, 402, 180))
     self.text = text
     self.value = value
     self._icon_size = icon_size
+    self._scroll = scroll
     self.set_icon(icon)
 
     self._scale_filter = BounceFilter(1.0, 0.1, 1 / gui_app.target_fps)
@@ -120,7 +122,8 @@ class BigButton(Widget):
     self._value_font = gui_app.font(FontWeight.ROMAN)
 
     self._label = UnifiedLabel(text, font_size=self._get_label_font_size(), font_weight=FontWeight.DISPLAY,
-                               text_color=LABEL_COLOR, alignment_vertical=rl.GuiTextAlignmentVertical.TEXT_ALIGN_BOTTOM, line_height=0.9)
+                               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)
 
@@ -141,7 +144,9 @@ class BigButton(Widget):
     self._txt_hover_bg = gui_app.texture("icons_mici/buttons/button_rectangle_hover.png", 402, 180)
 
   def _width_hint(self) -> int:
-    return int(self._rect.width - LABEL_HORIZONTAL_PADDING * 2)
+    # Single line if scrolling, so hide behind icon if exists
+    icon_size = self._icon_size[0] if self._txt_icon and self._scroll and self.value else 0
+    return int(self._rect.width - LABEL_HORIZONTAL_PADDING * 2 - icon_size)
 
   def _get_label_font_size(self):
     if len(self.text) < 12: