show network connecting indicator (#21631)

* spinner for connecting

* move that

* cleanup

* fix that

* connecting label

* touchups

* cleanup

selfdrive/ui/qt/offroad/networking.cc

@@ -1,5 +1,7 @@
 #include "selfdrive/ui/qt/offroad/networking.h"
 
+#include <algorithm>
+
 #include <QDebug>
 #include <QHBoxLayout>
 #include <QLabel>
@@ -11,16 +13,6 @@
 #include "selfdrive/ui/qt/widgets/scrollview.h"
 
 
-QLabel *networkStrengthWidget(const unsigned int strength_) {
-  QLabel *strength = new QLabel();
-  QVector<QString> imgs({"low", "medium", "high", "full"});
-  QPixmap pix(ASSET_PATH + "/offroad/icon_wifi_strength_" + imgs.at(strength_) + ".svg");
-  strength->setPixmap(pix.scaledToHeight(68, Qt::SmoothTransformation));
-  strength->setSizePolicy(QSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed));
-  strength->setStyleSheet("padding: 0px; margin-left: 50px; margin-right: 80px ");
-  return strength;
-}
-
 // Networking functions
 
 Networking::Networking(QWidget* parent, bool show_advanced) : QFrame(parent) {
@@ -182,6 +174,14 @@ WifiUI::WifiUI(QWidget *parent, WifiManager* wifi) : QWidget(parent), wifi(wifi)
   main_layout->setContentsMargins(0, 0, 0, 0);
   main_layout->setSpacing(0);
 
+  // load imgs
+  for (const auto &s : {"low", "medium", "high", "full"}) {
+    QPixmap pix(ASSET_PATH + "/offroad/icon_wifi_strength_" + s + ".svg");
+    strengths.push_back(pix.scaledToHeight(68, Qt::SmoothTransformation));
+  }
+  lock = QPixmap(ASSET_PATH + "offroad/icon_lock_closed.svg").scaledToWidth(49, Qt::SmoothTransformation);
+  checkmark = QPixmap(ASSET_PATH + "offroad/icon_checkmark.svg").scaledToWidth(49, Qt::SmoothTransformation);
+
   QLabel *scanning = new QLabel("Scanning for networks...");
   scanning->setStyleSheet("font-size: 65px;");
   main_layout->addWidget(scanning, 0, Qt::AlignCenter);
@@ -221,8 +221,8 @@ void WifiUI::refresh() {
   int i = 0;
   for (Network &network : wifi->seen_networks) {
     QHBoxLayout *hlayout = new QHBoxLayout;
-    hlayout->setContentsMargins(44, 0, 0, 0);
-    hlayout->setSpacing(0);
+    hlayout->setContentsMargins(44, 50, 73, 50);
+    hlayout->setSpacing(50);
 
     // Clickable SSID label
     QPushButton *ssid_label = new QPushButton(network.ssid);
@@ -235,13 +235,26 @@ void WifiUI::refresh() {
       font-weight: %1;
       text-align: left;
       border: none;
-      padding-top: 50px;
-      padding-bottom: 50px;
-      background-color: transparent;
+      padding: 0;
     )").arg(weight));
     QObject::connect(ssid_label, &QPushButton::clicked, this, [=]() { emit connectToNetwork(network); });
     hlayout->addWidget(ssid_label, 1);
 
+    if (network.connected == ConnectedType::CONNECTING) {
+      QPushButton *connecting = new QPushButton("CONNECTING...");
+      connecting->setStyleSheet(R"(
+        font-size: 32px;
+        font-weight: 500;
+        color: white;
+        border-radius: 0;
+        padding: 27px;
+        padding-left: 43px;
+        padding-right: 43px;
+        background-color: black;
+      )");
+      hlayout->addWidget(connecting, 2, Qt::AlignLeft);
+    }
+
     // Forget button
     if (wifi->isKnownConnection(network.ssid) && !wifi->isTetheringEnabled()) {
       QPushButton *forgetBtn = new QPushButton("FORGET");
@@ -257,33 +270,20 @@ void WifiUI::refresh() {
     // Status icon
     if (network.connected == ConnectedType::CONNECTED) {
       QLabel *connectIcon = new QLabel();
-      QPixmap pix(ASSET_PATH + "offroad/icon_checkmark.svg");
-
-      connectIcon->setPixmap(pix.scaledToWidth(49, Qt::SmoothTransformation));
-      connectIcon->setSizePolicy(QSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed));
-      connectIcon->setStyleSheet("margin: 0px; padding-left: 51px; padding-right: 0px ");
-      hlayout->addWidget(connectIcon, 0, Qt::AlignRight);
-    } else if (network.connected == ConnectedType::CONNECTING) {
-      QLabel *connectIcon = new QLabel();
-      // TODO replace connecting icon with proper widget/icon
-      QPixmap pix(ASSET_PATH + (network.connected == ConnectedType::CONNECTED ? "offroad/icon_checkmark.svg" : "navigation/direction_rotary.png"));
-
-      connectIcon->setPixmap(pix.scaledToWidth(49, Qt::SmoothTransformation));
-      connectIcon->setSizePolicy(QSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed));
-      connectIcon->setStyleSheet("margin: 0px; padding-left: 51px; padding-right: 0px ");
+      connectIcon->setPixmap(checkmark);
       hlayout->addWidget(connectIcon, 0, Qt::AlignRight);
     } else if (network.security_type == SecurityType::WPA) {
       QLabel *lockIcon = new QLabel();
-      QPixmap pix(ASSET_PATH + "offroad/icon_lock_closed.svg");
-
-      lockIcon->setPixmap(pix.scaledToHeight(49, Qt::SmoothTransformation));
-      lockIcon->setSizePolicy(QSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed));
-      lockIcon->setStyleSheet("padding: 0px; margin-left: 62px; margin-right: 0px ");
+      lockIcon->setPixmap(lock);
       hlayout->addWidget(lockIcon, 0, Qt::AlignRight);
+    } else {
+      hlayout->addSpacing(lock.width() + hlayout->spacing());
     }
 
     // Strength indicator
-    hlayout->addWidget(networkStrengthWidget(network.strength / 26), 0, Qt::AlignRight);
+    QLabel *strength = new QLabel();
+    strength->setPixmap(strengths[std::clamp((int)network.strength/26, 0, 3)]);
+    hlayout->addWidget(strength, 0, Qt::AlignRight);
 
     main_layout->addLayout(hlayout, 1);
 

selfdrive/ui/qt/offroad/networking.h

@@ -1,6 +1,7 @@
 #pragma once
 
 #include <QButtonGroup>
+#include <QMovie>
 #include <QVBoxLayout>
 #include <QWidget>
 
@@ -18,6 +19,9 @@ public:
 private:
   WifiManager *wifi = nullptr;
   QVBoxLayout* main_layout;
+  QPixmap lock;
+  QPixmap checkmark;
+  QVector<QPixmap> strengths;
 
 signals:
   void connectToNetwork(const Network &n);

selfdrive/ui/qt/setup/setup.cc

@@ -209,15 +209,15 @@ QWidget * Setup::software_selection() {
 
   QObject::connect(cont, &QPushButton::clicked, [=]() {
     auto w = currentWidget();
+    QTimer::singleShot(0, [=]() {
+      setCurrentWidget(downloading_widget);
+    });
     QString url = DASHCAM_URL;
     if (group->checkedButton() != dashcam) {
-      QTimer::singleShot(0, [=]() {
-        setCurrentWidget(downloading_widget);
-      });
       url = InputDialog::getText("Enter URL", this, "for Custom Software");
     }
     if (!url.isEmpty()) {
-      QTimer::singleShot(100, this, [=]() {
+      QTimer::singleShot(1000, this, [=]() {
         download(url);
       });
     } else {