sadmen
/
openpilot_comma
mirror of https://github.com/commaai/openpilot.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update wifi setup design (#21604)

Browse Source 
* 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
commatwo_master
sshane 4 years ago committed by GitHub
parent 65002c7b53
commit a089058fd4
13 changed files with 128 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      selfdrive/assets/offroad/icon_checkmark.png
  2. 3
      selfdrive/assets/offroad/icon_checkmark.svg
  3. 4
      selfdrive/assets/offroad/icon_lock_closed.svg
  4. 3
      selfdrive/assets/offroad/icon_wifi_strength_full.svg
  5. 3
      selfdrive/assets/offroad/icon_wifi_strength_high.svg
  6. 3
      selfdrive/assets/offroad/icon_wifi_strength_low.svg
  7. 3
      selfdrive/assets/offroad/icon_wifi_strength_medium.svg
  8. 149
      selfdrive/ui/qt/offroad/networking.cc
  9. 16
      selfdrive/ui/qt/offroad/networking.h
  10. 3
      selfdrive/ui/qt/offroad/settings.cc
  11. 1
      selfdrive/ui/qt/offroad/wifiManager.h
  12. 4
      selfdrive/ui/qt/setup/setup.cc
  13. 5
      selfdrive/ui/qt/widgets/scrollview.cc

3
selfdrive/assets/offroad/icon_checkmark.png
Unescape View File

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

3
selfdrive/assets/offroad/icon_checkmark.svg
Unescape View File

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

4
selfdrive/assets/offroad/icon_lock_closed.svg
Unescape View File

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

3
selfdrive/assets/offroad/icon_wifi_strength_full.svg
Unescape View File

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

3
selfdrive/assets/offroad/icon_wifi_strength_high.svg
Unescape View File

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

3
selfdrive/assets/offroad/icon_wifi_strength_low.svg
Unescape View File

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

3
selfdrive/assets/offroad/icon_wifi_strength_medium.svg
Unescape View File

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

149
selfdrive/ui/qt/offroad/networking.cc
Unescape View File

@ -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;
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);
}

16
selfdrive/ui/qt/offroad/networking.h
Unescape View File

@ -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;

3
selfdrive/ui/qt/offroad/settings.cc
Unescape View File

@ -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);

1
selfdrive/ui/qt/offroad/wifiManager.h
Unescape View File

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

4
selfdrive/ui/qt/setup/setup.cc
Unescape View File

@ -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);

5
selfdrive/ui/qt/widgets/scrollview.cc
Unescape View File

@ -8,7 +8,7 @@ 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 {
@ -19,7 +19,7 @@ ScrollView::ScrollView(QWidget *w, QWidget *parent) : QScrollArea(parent) {
}
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);

Write Preview
Loading…
Cancel
Save