Slider: add pressed state (#37365)

* sliders have pressed state

* more

* new and pressed setup sliders

selfdrive/assets/icons_mici/buttons/button_circle_red_hover.png

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

selfdrive/assets/icons_mici/buttons/button_circle_red_pressed.png

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

selfdrive/assets/icons_mici/setup/small_slider/slider_black_rounded_rectangle_pressed.png

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

selfdrive/assets/icons_mici/setup/small_slider/slider_green_rounded_rectangle.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bcd08444c77b3e559876eeb88d17808f72496adc26e27c3c21c00ff410879447
-size 10966
+oid sha256:5ba98ab2b75f0c1f8fdffb9eab0a742645b80ef4ca404c007f374a5e0fd48d8c
+size 10254

selfdrive/assets/icons_mici/setup/small_slider/slider_green_rounded_rectangle_pressed.png

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

selfdrive/assets/icons_mici/setup/small_slider/slider_red_circle_pressed.png

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

selfdrive/ui/mici/widgets/button.py

@@ -46,7 +46,7 @@ class BigCircleButton(Widget):
     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_hover.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

system/ui/widgets/slider.py

@@ -42,6 +42,7 @@ class SmallSlider(Widget):
 
     self._bg_txt = gui_app.texture("icons_mici/setup/small_slider/slider_bg.png", 316, 100)
     self._circle_bg_txt = gui_app.texture("icons_mici/setup/small_slider/slider_red_circle.png", 100, 100)
+    self._circle_bg_pressed_txt = gui_app.texture("icons_mici/setup/small_slider/slider_red_circle_pressed.png", 100, 100)
     self._circle_arrow_txt = gui_app.texture("icons_mici/setup/small_slider/slider_arrow.png", 37, 32)
 
   @property
@@ -140,7 +141,8 @@ class SmallSlider(Widget):
       self._label.render(label_rect)
 
     # circle and arrow
-    rl.draw_texture_ex(self._circle_bg_txt, rl.Vector2(btn_x, btn_y), 0.0, 1.0, white)
+    circle_bg_txt = self._circle_bg_pressed_txt if self._is_dragging_circle or self._confirmed_time > 0 else self._circle_bg_txt
+    rl.draw_texture_ex(circle_bg_txt, rl.Vector2(btn_x, btn_y), 0.0, 1.0, white)
 
     arrow_x = btn_x + (self._circle_bg_txt.width - self._circle_arrow_txt.width) / 2
     arrow_y = btn_y + (self._circle_bg_txt.height - self._circle_arrow_txt.height) / 2
@@ -158,6 +160,7 @@ class LargerSlider(SmallSlider):
     self._bg_txt = gui_app.texture("icons_mici/setup/small_slider/slider_bg_larger.png", 520, 115)
     circle_fn = "slider_green_rounded_rectangle" if self._green else "slider_black_rounded_rectangle"
     self._circle_bg_txt = gui_app.texture(f"icons_mici/setup/small_slider/{circle_fn}.png", 180, 115)
+    self._circle_bg_pressed_txt = gui_app.texture(f"icons_mici/setup/small_slider/{circle_fn}_pressed.png", 180, 115)
     self._circle_arrow_txt = gui_app.texture("icons_mici/setup/small_slider/slider_arrow.png", 64, 55)
 
 
@@ -174,6 +177,7 @@ class BigSlider(SmallSlider):
 
     self._bg_txt = gui_app.texture("icons_mici/buttons/slider_bg.png", 520, 180)
     self._circle_bg_txt = gui_app.texture("icons_mici/buttons/button_circle.png", 180, 180)
+    self._circle_bg_pressed_txt = gui_app.texture("icons_mici/buttons/button_circle_pressed.png", 180, 180)
     self._circle_arrow_txt = self._icon
 
 
@@ -183,4 +187,5 @@ class RedBigSlider(BigSlider):
 
     self._bg_txt = gui_app.texture("icons_mici/buttons/slider_bg.png", 520, 180)
     self._circle_bg_txt = gui_app.texture("icons_mici/buttons/button_circle_red.png", 180, 180)
+    self._circle_bg_pressed_txt = gui_app.texture("icons_mici/buttons/button_circle_red_pressed.png", 180, 180)
     self._circle_arrow_txt = self._icon