diff --git a/selfdrive/assets/offroad/icon_checkmark.png b/selfdrive/assets/offroad/icon_checkmark.png deleted file mode 100644 index 06efdfb0cb..0000000000 Binary files a/selfdrive/assets/offroad/icon_checkmark.png and /dev/null differ diff --git a/selfdrive/assets/offroad/icon_checkmark.svg b/selfdrive/assets/offroad/icon_checkmark.svg new file mode 100644 index 0000000000..b024eccd9e --- /dev/null +++ b/selfdrive/assets/offroad/icon_checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/selfdrive/assets/offroad/icon_lock_closed.svg b/selfdrive/assets/offroad/icon_lock_closed.svg index b787097409..7dc9283c81 100644 --- a/selfdrive/assets/offroad/icon_lock_closed.svg +++ b/selfdrive/assets/offroad/icon_lock_closed.svg @@ -1,4 +1,4 @@ - - + + + - diff --git a/selfdrive/assets/offroad/icon_wifi_strength_full.svg b/selfdrive/assets/offroad/icon_wifi_strength_full.svg new file mode 100644 index 0000000000..758198e97f --- /dev/null +++ b/selfdrive/assets/offroad/icon_wifi_strength_full.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/selfdrive/assets/offroad/icon_wifi_strength_high.svg b/selfdrive/assets/offroad/icon_wifi_strength_high.svg new file mode 100644 index 0000000000..a8db07f91e --- /dev/null +++ b/selfdrive/assets/offroad/icon_wifi_strength_high.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/selfdrive/assets/offroad/icon_wifi_strength_low.svg b/selfdrive/assets/offroad/icon_wifi_strength_low.svg new file mode 100644 index 0000000000..8963c3dbc1 --- /dev/null +++ b/selfdrive/assets/offroad/icon_wifi_strength_low.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/selfdrive/assets/offroad/icon_wifi_strength_medium.svg b/selfdrive/assets/offroad/icon_wifi_strength_medium.svg new file mode 100644 index 0000000000..8f8d503260 --- /dev/null +++ b/selfdrive/assets/offroad/icon_wifi_strength_medium.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/selfdrive/ui/qt/offroad/networking.cc b/selfdrive/ui/qt/offroad/networking.cc index 49998cd0b7..4a7d9e8655 100644 --- a/selfdrive/ui/qt/offroad/networking.cc +++ b/selfdrive/ui/qt/offroad/networking.cc @@ -4,34 +4,34 @@ #include #include #include +#include #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 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; - - ElidedLabel *ssid_label = new ElidedLabel(network.ssid); - ssid_label->setStyleSheet("font-size: 55px;"); - hlayout->addWidget(ssid_label, 1, Qt::AlignLeft); - + hlayout->setContentsMargins(44, 0, 0, 0); + hlayout->setSpacing(0); + + // 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); } diff --git a/selfdrive/ui/qt/offroad/networking.h b/selfdrive/ui/qt/offroad/networking.h index 7c0ad319bf..bd4e00538a 100644 --- a/selfdrive/ui/qt/offroad/networking.h +++ b/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; diff --git a/selfdrive/ui/qt/offroad/settings.cc b/selfdrive/ui/qt/offroad/settings.cc index 6c61166dd4..f4645ca719 100644 --- a/selfdrive/ui/qt/offroad/settings.cc +++ b/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); diff --git a/selfdrive/ui/qt/offroad/wifiManager.h b/selfdrive/ui/qt/offroad/wifiManager.h index e6741ec8ff..898a13659d 100644 --- a/selfdrive/ui/qt/offroad/wifiManager.h +++ b/selfdrive/ui/qt/offroad/wifiManager.h @@ -29,6 +29,7 @@ struct Network { class WifiManager : public QWidget { Q_OBJECT + public: explicit WifiManager(QWidget* parent); diff --git a/selfdrive/ui/qt/setup/setup.cc b/selfdrive/ui/qt/setup/setup.cc index e06e677a6f..5f1f2f3e40 100644 --- a/selfdrive/ui/qt/setup/setup.cc +++ b/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); diff --git a/selfdrive/ui/qt/widgets/scrollview.cc b/selfdrive/ui/qt/widgets/scrollview.cc index 18cd6ee675..1aa05b4157 100644 --- a/selfdrive/ui/qt/widgets/scrollview.cc +++ b/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);