Update wifi setup design (#21604)

* wifi design draft

* ui draft 2

* draft

* updates

* fix spacing

* strength indicator

* font weight

* fix lock icon aspect ratio

* fix font weights

* new checkmark

* fix spacing

* was being applied to everything

* network handles its own padding

* fix spacing

* cleanup

* looks pretty good

* little more

* revert that

* scroll bar

Co-authored-by: Adeeb Shihadeh <adeebshihadeh@gmail.com>
old-commit-hash: 0076dd3588

selfdrive/assets/offroad/icon_checkmark.png

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

selfdrive/assets/offroad/icon_checkmark.svg

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

selfdrive/assets/offroad/icon_lock_closed.svg

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:503c869d30bbccd4e2894f79c70c3b7f8fed159d04a959197fd00cceb34441a5
-size 675
+oid sha256:ef09792cc1893f81c64abd6b72091d3762c07b849863ce90508afdd29b392c02
+size 732

selfdrive/assets/offroad/icon_wifi_strength_full.svg

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

selfdrive/assets/offroad/icon_wifi_strength_high.svg

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

selfdrive/assets/offroad/icon_wifi_strength_low.svg

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

selfdrive/assets/offroad/icon_wifi_strength_medium.svg

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

selfdrive/ui/qt/offroad/networking.cc

@@ -4,34 +4,34 @@
 #include <QHBoxLayout>
 #include <QLabel>
 #include <QPainter>
+#include <QScrollBar>
 
 #include "selfdrive/ui/qt/widgets/scrollview.h"
 #include "selfdrive/ui/qt/util.h"
 
 
-void NetworkStrengthWidget::paintEvent(QPaintEvent* event) {
-  QPainter p(this);
-  p.setRenderHint(QPainter::Antialiasing);
-  p.setPen(Qt::NoPen);
-  const QColor gray(0x54, 0x54, 0x54);
-  for (int i = 0, x = 0; i < 5; ++i) {
-    p.setBrush(i < strength_ ? Qt::white : gray);
-    p.drawEllipse(x, 0, 15, 15);
-    x += 20;
-  }
+QLabel *networkStrengthWidget(const unsigned int strength_) {
+  QLabel *strength = new QLabel();
+  QVector<QString> imgs({"low", "medium", "high", "full"});
+  QPixmap pix("../assets/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) : QWidget(parent), show_advanced(show_advanced) {
+Networking::Networking(QWidget* parent, bool show_advanced) : QFrame(parent) {
   main_layout = new QStackedLayout(this);
 
   wifi = new WifiManager(this);
-  connect(wifi, &WifiManager::wrongPassword, this, &Networking::wrongPassword);
   connect(wifi, &WifiManager::refreshSignal, this, &Networking::refresh);
+  connect(wifi, &WifiManager::wrongPassword, this, &Networking::wrongPassword);
 
   QWidget* wifiScreen = new QWidget(this);
   QVBoxLayout* vlayout = new QVBoxLayout(wifiScreen);
+  vlayout->setContentsMargins(20, 20, 20, 20);
   if (show_advanced) {
     QPushButton* advancedSettings = new QPushButton("Advanced");
     advancedSettings->setObjectName("advancedBtn");
@@ -46,14 +46,22 @@ Networking::Networking(QWidget* parent, bool show_advanced) : QWidget(parent), s
   wifiWidget = new WifiUI(this, wifi);
   wifiWidget->setObjectName("wifiWidget");
   connect(wifiWidget, &WifiUI::connectToNetwork, this, &Networking::connectToNetwork);
-  vlayout->addWidget(new ScrollView(wifiWidget, this), 1);
+
+  ScrollView *wifiScroller = new ScrollView(wifiWidget, this);
+  wifiScroller->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
+  vlayout->addWidget(wifiScroller, 1);
   main_layout->addWidget(wifiScreen);
 
   an = new AdvancedNetworking(this, wifi);
   connect(an, &AdvancedNetworking::backPress, [=]() { main_layout->setCurrentWidget(wifiScreen); });
   main_layout->addWidget(an);
 
+  // TODO: revisit pressed colors
   setStyleSheet(R"(
+    Networking {
+      border-radius: 13px;
+      background-color: #292929;
+    }
     #wifiWidget > QPushButton, #back_btn, #advancedBtn {
       font-size: 50px;
       margin: 0px;
@@ -63,10 +71,6 @@ Networking::Networking(QWidget* parent, bool show_advanced) : QWidget(parent), s
       color: #dddddd;
       background-color: #444444;
     }
-    #wifiWidget > QPushButton:disabled {
-      color: #777777;
-      background-color: #222222;
-    }
   )");
   main_layout->setCurrentWidget(wifiScreen);
 }
@@ -169,74 +173,119 @@ void AdvancedNetworking::toggleTethering(bool enabled) {
 
 WifiUI::WifiUI(QWidget *parent, WifiManager* wifi) : QWidget(parent), wifi(wifi) {
   main_layout = new QVBoxLayout(this);
+  main_layout->setContentsMargins(0, 0, 0, 0);
+  main_layout->setSpacing(0);
 
-  // Scan on startup
-  QLabel *scanning = new QLabel("Scanning for networks");
-  scanning->setStyleSheet(R"(font-size: 65px;)");
+  QLabel *scanning = new QLabel("Scanning for networks...");
+  scanning->setStyleSheet("font-size: 65px;");
   main_layout->addWidget(scanning, 0, Qt::AlignCenter);
-  main_layout->setSpacing(25);
+
+  setStyleSheet(R"(
+    QScrollBar::handle:vertical {
+      min-height: 0px;
+      border-radius: 4px;
+      background-color: #8A8A8A;
+    }
+    #forgetBtn {
+      font-size: 32px;
+      font-weight: 600;
+      color: #292929;
+      background-color: #BDBDBD;
+      border-width: 1px solid #828282;
+      border-radius: 5px;
+      padding: 40px;
+      padding-bottom: 16px;
+      padding-top: 16px;
+    }
+  )");
 }
 
 void WifiUI::refresh() {
+  // TODO: don't rebuild this every time
   clearLayout(main_layout);
+
   if (wifi->seen_networks.size() == 0) {
     QLabel *scanning = new QLabel("No networks found. Scanning...");
-    scanning->setStyleSheet(R"(font-size: 65px;)");
+    scanning->setStyleSheet("font-size: 65px;");
     main_layout->addWidget(scanning, 0, Qt::AlignCenter);
     return;
   }
 
+  // add networks
   int i = 0;
   for (Network &network : wifi->seen_networks) {
     QHBoxLayout *hlayout = new QHBoxLayout;
+    hlayout->setContentsMargins(44, 0, 0, 0);
+    hlayout->setSpacing(0);
 
-    ElidedLabel *ssid_label = new ElidedLabel(network.ssid);
-    ssid_label->setStyleSheet("font-size: 55px;");
-    hlayout->addWidget(ssid_label, 1, Qt::AlignLeft);
+    // Clickable SSID label
+    QPushButton *ssid_label = new QPushButton(network.ssid);
+    ssid_label->setEnabled(network.connected != ConnectedType::CONNECTED &&
+                           network.connected != ConnectedType::CONNECTING &&
+                           network.security_type != SecurityType::UNSUPPORTED);
+    int weight = network.connected == ConnectedType::DISCONNECTED ? 300 : 500;
+    ssid_label->setStyleSheet(QString(R"(
+      font-size: 55px;
+      font-weight: %1;
+      text-align: left;
+      border: none;
+      padding-top: 50px;
+      padding-bottom: 50px;
+      background-color: transparent;
+    )").arg(weight));
+    QObject::connect(ssid_label, &QPushButton::clicked, this, [=]() { emit connectToNetwork(network); });
+    hlayout->addWidget(ssid_label, 1);
 
+    // Forget button
     if (wifi->isKnownConnection(network.ssid) && !wifi->isTetheringEnabled()) {
-      QPushButton *forgetBtn = new QPushButton();
-      QPixmap pix("../assets/offroad/icon_close.svg");
-
-      forgetBtn->setIcon(QIcon(pix));
-      forgetBtn->setIconSize(QSize(35, 35));
-      forgetBtn->setStyleSheet("QPushButton { background-color: #E22C2C; }");
-      forgetBtn->setFixedSize(100, 90);
-
+      QPushButton *forgetBtn = new QPushButton("FORGET");
+      forgetBtn->setObjectName("forgetBtn");
       QObject::connect(forgetBtn, &QPushButton::released, [=]() {
         if (ConfirmationDialog::confirm("Are you sure you want to forget " + QString::fromUtf8(network.ssid) + "?", this)) {
           wifi->forgetConnection(network.ssid);
         }
       });
-
       hlayout->addWidget(forgetBtn, 0, Qt::AlignRight);
+    }
+
+    // Status icon
+    if (network.connected == ConnectedType::CONNECTED) {
+      QLabel *connectIcon = new QLabel();
+      QPixmap pix("../assets/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(network.connected == ConnectedType::CONNECTED ? "../assets/offroad/icon_checkmark.svg" : "../assets/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 ");
+      hlayout->addWidget(connectIcon, 0, Qt::AlignRight);
     } else if (network.security_type == SecurityType::WPA) {
       QLabel *lockIcon = new QLabel();
       QPixmap pix("../assets/offroad/icon_lock_closed.svg");
-      lockIcon->setPixmap(pix.scaledToWidth(35, Qt::SmoothTransformation));
-      lockIcon->setSizePolicy(QSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed));
-      lockIcon->setStyleSheet("QLabel { margin: 0px; padding-left: 15px; padding-right: 15px; }");
 
+      lockIcon->setPixmap(pix.scaledToHeight(49, Qt::SmoothTransformation));
+      lockIcon->setSizePolicy(QSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed));
+      lockIcon->setStyleSheet("padding: 0px; margin-left: 62px; margin-right: 0px ");
       hlayout->addWidget(lockIcon, 0, Qt::AlignRight);
     }
 
-    // strength indicator
-    unsigned int strength_scale = network.strength / 17;
-    hlayout->addWidget(new NetworkStrengthWidget(strength_scale), 0, Qt::AlignRight);
+    // Strength indicator
+    hlayout->addWidget(networkStrengthWidget(network.strength / 26), 0, Qt::AlignRight);
 
-    // connect button
-    QPushButton* btn = new QPushButton(network.security_type == SecurityType::UNSUPPORTED ? "Unsupported" : (network.connected == ConnectedType::CONNECTED ? "Connected" : (network.connected == ConnectedType::CONNECTING ? "Connecting" : "Connect")));
-    btn->setDisabled(network.connected == ConnectedType::CONNECTED || network.connected == ConnectedType::CONNECTING || network.security_type == SecurityType::UNSUPPORTED);
-    btn->setFixedWidth(350);
-    QObject::connect(btn, &QPushButton::clicked, this, [=]() { emit connectToNetwork(network); });
-
-    hlayout->addWidget(btn, 0, Qt::AlignRight);
     main_layout->addLayout(hlayout, 1);
+
     // Don't add the last horizontal line
     if (i+1 < wifi->seen_networks.size()) {
       main_layout->addWidget(horizontal_line(), 0);
     }
     i++;
   }
-  main_layout->addStretch(3);
+  main_layout->addStretch(1);
 }

selfdrive/ui/qt/offroad/networking.h

@@ -9,17 +9,6 @@
 #include "selfdrive/ui/qt/widgets/ssh_keys.h"
 #include "selfdrive/ui/qt/widgets/toggle.h"
 
-class NetworkStrengthWidget : public QWidget {
-  Q_OBJECT
-
-public:
-  explicit NetworkStrengthWidget(int strength, QWidget* parent = nullptr) : strength_(strength), QWidget(parent) { setFixedSize(100, 15); }
-
-private:
-  void paintEvent(QPaintEvent* event) override;
-  int strength_ = 0;
-};
-
 class WifiUI : public QWidget {
   Q_OBJECT
 
@@ -54,17 +43,16 @@ public slots:
   void refresh();
 };
 
-class Networking : public QWidget {
+class Networking : public QFrame {
   Q_OBJECT
 
 public:
   explicit Networking(QWidget* parent = 0, bool show_advanced = true);
 
 private:
-  QStackedLayout* main_layout = nullptr; // nm_warning, wifiScreen, advanced
+  QStackedLayout* main_layout = nullptr;
   QWidget* wifiScreen = nullptr;
   AdvancedNetworking* an = nullptr;
-  bool show_advanced;
 
   WifiUI* wifiWidget;
   WifiManager* wifi = nullptr;

selfdrive/ui/qt/offroad/settings.cc

@@ -366,7 +366,8 @@ SettingsWindow::SettingsWindow(QWidget *parent) : QFrame(parent) {
     nav_btns->addButton(btn);
     sidebar_layout->addWidget(btn, 0, Qt::AlignRight);
 
-    panel->setContentsMargins(50, 25, 50, 25);
+    const int lr_margin = name != "Network" ? 50 : 0;  // Network panel handles its own margins
+    panel->setContentsMargins(lr_margin, 25, lr_margin, 25);
 
     ScrollView *panel_frame = new ScrollView(panel, this);
     panel_widget->addWidget(panel_frame);

selfdrive/ui/qt/offroad/wifiManager.h

@@ -29,6 +29,7 @@ struct Network {
 
 class WifiManager : public QWidget {
   Q_OBJECT
+
 public:
   explicit WifiManager(QWidget* parent);
 

selfdrive/ui/qt/setup/setup.cc

@@ -93,10 +93,14 @@ QWidget * Setup::network_setup() {
   title->setStyleSheet("font-size: 90px; font-weight: 500;");
   main_layout->addWidget(title, 0, Qt::AlignLeft | Qt::AlignTop);
 
+  main_layout->addSpacing(25);
+
   // wifi widget
   Networking *wifi = new Networking(this, false);
   main_layout->addWidget(wifi, 1);
 
+  main_layout->addSpacing(35);
+
   // back + continue buttons
   QHBoxLayout *blayout = new QHBoxLayout;
   main_layout->addLayout(blayout);

selfdrive/ui/qt/widgets/scrollview.cc

@@ -8,18 +8,18 @@ ScrollView::ScrollView(QWidget *w, QWidget *parent) : QScrollArea(parent) {
   setWidgetResizable(true);
   setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
   setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
-  setStyleSheet("ScrollView { background-color:transparent; }");
+  setStyleSheet("background-color: transparent;");
 
   QString style = R"(
     QScrollBar:vertical {
       border: none;
       background: transparent;
-      width:10px;
+      width: 10px;
       margin: 0;
     }
     QScrollBar::handle:vertical {
       min-height: 0px;
-      border-radius: 4px;
+      border-radius: 5px;
       background-color: white;
     }
     QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
@@ -29,7 +29,6 @@ ScrollView::ScrollView(QWidget *w, QWidget *parent) : QScrollArea(parent) {
       background: none;
     }
   )";
-
   verticalScrollBar()->setStyleSheet(style);
   horizontalScrollBar()->setStyleSheet(style);