sidebar: add button pressed states (#25848)

* add flag img

* add image assets

* try darker button pressed

* remove pressed image, set opacity instead

* settings can be pressed too!

* cleanup

* make settings button white

* bookmark

selfdrive/ui/qt/home.cc

@@ -41,6 +41,7 @@ HomeWindow::HomeWindow(QWidget* parent) : QWidget(parent) {
   setAttribute(Qt::WA_NoSystemBackground);
   QObject::connect(uiState(), &UIState::uiUpdate, this, &HomeWindow::updateState);
   QObject::connect(uiState(), &UIState::offroadTransition, this, &HomeWindow::offroadTransition);
+  QObject::connect(uiState(), &UIState::offroadTransition, sidebar, &Sidebar::offroadTransition);
 }
 
 void HomeWindow::showSidebar(bool show) {

selfdrive/ui/qt/sidebar.cc

@@ -32,8 +32,9 @@ void Sidebar::drawMetric(QPainter &p, const QPair<QString, QString> &label, QCol
   p.drawText(label_rect, Qt::AlignCenter, label.second);
 }
 
-Sidebar::Sidebar(QWidget *parent) : QFrame(parent) {
+Sidebar::Sidebar(QWidget *parent) : QFrame(parent), onroad(false), flag_pressed(false), settings_pressed(false) {
   home_img = loadPixmap("../assets/images/button_home.png", home_btn.size());
+  flag_img = loadPixmap("../assets/images/button_flag.png", home_btn.size());
   settings_img = loadPixmap("../assets/images/button_settings.png", settings_btn.size(), Qt::IgnoreAspectRatio);
 
   connect(this, &Sidebar::valueChanged, [=] { update(); });
@@ -47,17 +48,34 @@ Sidebar::Sidebar(QWidget *parent) : QFrame(parent) {
   pm = std::make_unique<PubMaster, const std::initializer_list<const char *>>({"userFlag"});
 }
 
+void Sidebar::mousePressEvent(QMouseEvent *event) {
+  if (onroad && home_btn.contains(event->pos())) {
+    flag_pressed = true;
+    update();
+  } else if (settings_btn.contains(event->pos())) {
+    settings_pressed = true;
+    update();
+  }
+}
+
 void Sidebar::mouseReleaseEvent(QMouseEvent *event) {
+  if (flag_pressed || settings_pressed) {
+    flag_pressed = settings_pressed = false;
+    update();
+  }
   if (home_btn.contains(event->pos())) {
     MessageBuilder msg;
     msg.initEvent().initUserFlag();
     pm->send("userFlag", msg);
-  }
-  if (settings_btn.contains(event->pos())) {
+  } else if (settings_btn.contains(event->pos())) {
     emit openSettings();
   }
 }
 
+void Sidebar::offroadTransition(bool offroad) {
+  onroad = !offroad;
+}
+
 void Sidebar::updateState(const UIState &s) {
   if (!isVisible()) return;
 
@@ -102,11 +120,12 @@ void Sidebar::paintEvent(QPaintEvent *event) {
 
   p.fillRect(rect(), QColor(57, 57, 57));
 
-  // static imgs
-  p.setOpacity(0.65);
+  // buttons
+  p.setOpacity(settings_pressed ? 0.65 : 1.0);
   p.drawPixmap(settings_btn.x(), settings_btn.y(), settings_img);
+  p.setOpacity(onroad && flag_pressed ? 0.65 : 1.0);
+  p.drawPixmap(home_btn.x(), home_btn.y(), onroad ? flag_img : home_img);
   p.setOpacity(1.0);
-  p.drawPixmap(home_btn.x(), home_btn.y(), home_img);
 
   // network
   int x = 58;

selfdrive/ui/qt/sidebar.h

@@ -24,14 +24,17 @@ class Sidebar : public QFrame {
   void valueChanged();
 
 public slots:
+  void offroadTransition(bool offroad);
   void updateState(const UIState &s);
 
 protected:
   void paintEvent(QPaintEvent *event) override;
+  void mousePressEvent(QMouseEvent *event) override;
   void mouseReleaseEvent(QMouseEvent *event) override;
   void drawMetric(QPainter &p, const QPair<QString, QString> &label, QColor c, int y);
 
-  QPixmap home_img, settings_img;
+  QPixmap home_img, flag_img, settings_img;
+  bool onroad, flag_pressed, settings_pressed;
   const QMap<cereal::DeviceState::NetworkType, QString> network_type = {
     {cereal::DeviceState::NetworkType::NONE, tr("--")},
     {cereal::DeviceState::NetworkType::WIFI, tr("Wi-Fi")},