UI: connect to wifi prompt (#28273)

* OffroadHome: move experimental mode button to right column

* OffroadHome: replace DriveStats with PrimeAd when no prime

* SetupWidget: remove PrimeAd

* SetupWidget: tweaks to fit smaller space

* UI: add WiFiPromptWidget

* WiFiPrompt: update using network type

* add WiFiPromptWidget to offroad home

* reduce spacing to fit vertical space

* WiFiPromptWidget: open Wi-Fi settings

* no longer necessary

* cleanup

* shrink PrimeUser widget and increase Setup Wi-Fi font size

* correctly resize widget when stack index changes

* layout tweaks

* debug

* spacing

* slightly improved style

* helps -> help

* .
pull/28388/head
Cameron Clough 2 years ago committed by GitHub
parent 04556652dc
commit 4f815db141
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 6
      selfdrive/assets/offroad/icon_wifi_uploading.svg
  2. 2
      selfdrive/ui/SConscript
  3. 36
      selfdrive/ui/qt/home.cc
  4. 49
      selfdrive/ui/qt/widgets/prime.cc
  5. 4
      selfdrive/ui/qt/widgets/prime.h
  6. 103
      selfdrive/ui/qt/widgets/wifi.cc
  7. 23
      selfdrive/ui/qt/widgets/wifi.h
  8. 27
      selfdrive/ui/translations/main_de.ts
  9. 27
      selfdrive/ui/translations/main_ja.ts
  10. 27
      selfdrive/ui/translations/main_ko.ts
  11. 27
      selfdrive/ui/translations/main_pt-BR.ts
  12. 27
      selfdrive/ui/translations/main_zh-CHS.ts
  13. 27
      selfdrive/ui/translations/main_zh-CHT.ts

@ -0,0 +1,6 @@
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.0004 8.63599C21.8284 8.63599 10.7444 13.26 2.31243 20.808C1.56443 21.488 1.4964 22.644 2.1084 23.392L4.76041 26.452C5.44041 27.2 6.59641 27.268 7.34441 26.588C14.4164 20.196 23.7324 16.32 33.9324 16.32C44.1324 16.32 53.4484 20.196 60.5204 26.588C61.2684 27.268 62.4244 27.2 63.1044 26.452L65.7564 23.392C66.4364 22.644 66.3004 21.488 65.5524 20.808C57.2564 13.26 46.1724 8.63599 34.0004 8.63599Z" fill="#465BEA"/>
<path d="M34.0004 22.032C25.1604 22.032 17.0684 25.432 11.0164 30.94C10.2684 31.62 10.2004 32.708 10.8804 33.456L13.3964 36.38C14.0764 37.196 15.2324 37.196 16.0484 36.516C20.8084 32.164 27.1324 29.512 34.0684 29.512C41.0044 29.512 47.3284 32.164 52.0884 36.516C52.8364 37.196 54.0604 37.196 54.7404 36.38L57.2564 33.456C57.8684 32.708 57.8684 31.552 57.1204 30.94C50.9324 25.364 42.8404 22.032 34.0004 22.032Z" fill="#465BEA"/>
<path d="M34.0007 35.36C28.4247 35.36 23.3927 37.536 19.6527 41.14C18.9727 41.82 18.9047 42.908 19.5847 43.656L21.9647 46.444C22.6447 47.26 23.8687 47.26 24.6167 46.58C27.0647 44.2 30.3287 42.772 34.0007 42.772C37.6727 42.772 40.9367 44.2 43.3847 46.58C44.1327 47.328 45.3567 47.26 46.0367 46.444L48.4167 43.656C49.0287 42.908 49.0287 41.82 48.3487 41.14C44.6087 37.536 39.5767 35.36 34.0007 35.36Z" fill="#465BEA"/>
<path d="M34.0005 48.688C31.7565 48.688 29.7165 49.708 28.3565 51.34C27.7445 52.02 27.7445 53.04 28.3565 53.72L32.6405 58.684C33.3885 59.5 34.6804 59.5 35.4284 58.684L39.7125 53.72C40.3245 53.04 40.3245 52.02 39.7125 51.34C38.2845 49.708 36.2445 48.688 34.0005 48.688Z" fill="#465BEA"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

@ -20,7 +20,7 @@ if arch == "Darwin":
qt_env['FRAMEWORKS'] += ['OpenCL']
qt_util = qt_env.Library("qt_util", ["#selfdrive/ui/qt/api.cc", "#selfdrive/ui/qt/util.cc"], LIBS=base_libs)
widgets_src = ["ui.cc", "qt/widgets/input.cc", "qt/widgets/drive_stats.cc",
widgets_src = ["ui.cc", "qt/widgets/input.cc", "qt/widgets/drive_stats.cc", "qt/widgets/wifi.cc",
"qt/widgets/ssh_keys.cc", "qt/widgets/toggle.cc", "qt/widgets/controls.cc",
"qt/widgets/offroad_alerts.cc", "qt/widgets/prime.cc", "qt/widgets/keyboard.cc",
"qt/widgets/scrollview.cc", "qt/widgets/cameraview.cc", "#third_party/qrcode/QrCode.cc",

@ -2,6 +2,7 @@
#include <QHBoxLayout>
#include <QMouseEvent>
#include <QStackedWidget>
#include <QVBoxLayout>
#include "selfdrive/ui/qt/offroad/experimental_mode.h"
@ -136,21 +137,34 @@ OffroadHome::OffroadHome(QWidget* parent) : QFrame(parent) {
home_layout->setContentsMargins(0, 0, 0, 0);
home_layout->setSpacing(30);
// left: ExperimentalModeButton, DriveStats
QWidget* left_widget = new QWidget(this);
QVBoxLayout* left_column = new QVBoxLayout(left_widget);
left_column->setContentsMargins(0, 0, 0, 0);
left_column->setSpacing(30);
// left: DriveStats/PrimeAdWidget
QStackedWidget *left_widget = new QStackedWidget(this);
left_widget->addWidget(new DriveStats);
left_widget->addWidget(new PrimeAdWidget);
left_widget->setCurrentIndex(uiState()->primeType() ? 0 : 1);
connect(uiState(), &UIState::primeTypeChanged, [=](int prime_type) {
left_widget->setCurrentIndex(prime_type ? 0 : 1);
});
home_layout->addWidget(left_widget, 1);
// right: ExperimentalModeButton, SetupWidget
QWidget* right_widget = new QWidget(this);
QVBoxLayout* right_column = new QVBoxLayout(right_widget);
right_column->setContentsMargins(0, 0, 0, 0);
right_widget->setFixedWidth(750);
right_column->setSpacing(30);
ExperimentalModeButton *experimental_mode = new ExperimentalModeButton(this);
QObject::connect(experimental_mode, &ExperimentalModeButton::openSettings, this, &OffroadHome::openSettings);
left_column->addWidget(experimental_mode, 1);
left_column->addWidget(new DriveStats, 1);
right_column->addWidget(experimental_mode, 1);
home_layout->addWidget(left_widget, 1);
SetupWidget *setup_widget = new SetupWidget;
QObject::connect(setup_widget, &SetupWidget::openSettings, this, &OffroadHome::openSettings);
right_column->addWidget(setup_widget, 1);
// right: SetupWidget
home_layout->addWidget(new SetupWidget);
home_layout->addWidget(right_widget, 1);
}
center_layout->addWidget(home_widget);
@ -170,7 +184,7 @@ OffroadHome::OffroadHome(QWidget* parent) : QFrame(parent) {
setStyleSheet(R"(
* {
color: white;
color: white;
}
OffroadHome {
background-color: black;

@ -14,6 +14,7 @@
#include "selfdrive/ui/qt/request_repeater.h"
#include "selfdrive/ui/qt/util.h"
#include "selfdrive/ui/qt/qt_window.h"
#include "selfdrive/ui/qt/widgets/wifi.h"
using qrcodegen::QrCode;
@ -123,26 +124,18 @@ PrimeUserWidget::PrimeUserWidget(QWidget* parent) : QFrame(parent) {
QWidget *primeWidget = new QWidget;
primeWidget->setObjectName("primeWidget");
QVBoxLayout *primeLayout = new QVBoxLayout(primeWidget);
primeLayout->setContentsMargins(60, 50, 60, 50);
primeLayout->setContentsMargins(56, 40, 56, 40);
primeLayout->setSpacing(20);
QLabel *subscribed = new QLabel(tr("✓ SUBSCRIBED"));
subscribed->setStyleSheet("font-size: 41px; font-weight: bold; color: #86FF4E;");
primeLayout->addWidget(subscribed, 0, Qt::AlignTop);
primeLayout->addSpacing(60);
primeLayout->addWidget(subscribed);
QLabel *commaPrime = new QLabel(tr("comma prime"));
commaPrime->setStyleSheet("font-size: 75px; font-weight: bold;");
primeLayout->addWidget(commaPrime, 0, Qt::AlignTop);
primeLayout->addSpacing(20);
QLabel *connectUrl = new QLabel(tr("CONNECT.COMMA.AI"));
connectUrl->setStyleSheet("font-size: 41px; font-family: Inter SemiBold; color: #A0A0A0;");
primeLayout->addWidget(connectUrl, 0, Qt::AlignTop);
primeLayout->addWidget(commaPrime);
mainLayout->addWidget(primeWidget);
mainLayout->addStretch();
}
@ -195,8 +188,8 @@ SetupWidget::SetupWidget(QWidget* parent) : QFrame(parent) {
QFrame* finishRegistration = new QFrame;
finishRegistration->setObjectName("primeWidget");
QVBoxLayout* finishRegistationLayout = new QVBoxLayout(finishRegistration);
finishRegistationLayout->setSpacing(40);
finishRegistationLayout->setContentsMargins(64, 64, 64, 64);
finishRegistationLayout->setSpacing(38);
finishRegistationLayout->setContentsMargins(64, 48, 64, 48);
QLabel* registrationTitle = new QLabel(tr("Finish Setup"));
registrationTitle->setStyleSheet("font-size: 75px; font-weight: bold;");
@ -204,7 +197,7 @@ SetupWidget::SetupWidget(QWidget* parent) : QFrame(parent) {
QLabel* registrationDescription = new QLabel(tr("Pair your device with comma connect (connect.comma.ai) and claim your comma prime offer."));
registrationDescription->setWordWrap(true);
registrationDescription->setStyleSheet("font-size: 55px; font-weight: light;");
registrationDescription->setStyleSheet("font-size: 50px; font-weight: light;");
finishRegistationLayout->addWidget(registrationDescription);
finishRegistationLayout->addStretch();
@ -234,15 +227,24 @@ SetupWidget::SetupWidget(QWidget* parent) : QFrame(parent) {
outer_layout->setContentsMargins(0, 0, 0, 0);
outer_layout->addWidget(mainLayout);
primeAd = new PrimeAdWidget;
mainLayout->addWidget(primeAd);
QWidget *content = new QWidget;
QVBoxLayout *content_layout = new QVBoxLayout(content);
content_layout->setContentsMargins(0, 0, 0, 0);
content_layout->setSpacing(30);
primeUser = new PrimeUserWidget;
mainLayout->addWidget(primeUser);
content_layout->addWidget(primeUser);
mainLayout->setCurrentWidget(uiState()->primeType() ? (QWidget*)primeUser : (QWidget*)primeAd);
WiFiPromptWidget *wifi_prompt = new WiFiPromptWidget;
QObject::connect(wifi_prompt, &WiFiPromptWidget::openSettings, this, &SetupWidget::openSettings);
content_layout->addWidget(wifi_prompt);
content_layout->addStretch();
mainLayout->addWidget(content);
primeUser->setVisible(uiState()->primeType());
mainLayout->setCurrentIndex(1);
setFixedWidth(750);
setStyleSheet(R"(
#primeWidget {
border-radius: 10px;
@ -282,10 +284,7 @@ void SetupWidget::replyFinished(const QString &response, bool success) {
} else {
popup->reject();
if (prime_type) {
mainLayout->setCurrentWidget(primeUser);
} else {
mainLayout->setCurrentWidget(primeAd);
}
primeUser->setVisible(prime_type);
mainLayout->setCurrentIndex(1);
}
}

@ -69,10 +69,12 @@ class SetupWidget : public QFrame {
public:
explicit SetupWidget(QWidget* parent = 0);
signals:
void openSettings(int index = 0, const QString &param = "");
private:
PairingPopup *popup;
QStackedWidget *mainLayout;
PrimeAdWidget *primeAd;
PrimeUserWidget *primeUser;
private slots:

@ -0,0 +1,103 @@
#include "selfdrive/ui/qt/widgets/wifi.h"
#include <QHBoxLayout>
#include <QLabel>
#include <QPixmap>
#include <QPushButton>
WiFiPromptWidget::WiFiPromptWidget(QWidget *parent) : QFrame(parent) {
stack = new QStackedLayout(this);
// Setup Wi-Fi
QFrame *setup = new QFrame;
QVBoxLayout *setup_layout = new QVBoxLayout(setup);
setup_layout->setContentsMargins(56, 40, 56, 40);
setup_layout->setSpacing(20);
{
QHBoxLayout *title_layout = new QHBoxLayout;
title_layout->setSpacing(32);
{
QLabel *icon = new QLabel;
QPixmap *pixmap = new QPixmap("../assets/offroad/icon_wifi_strength_full.svg");
icon->setPixmap(pixmap->scaledToWidth(80, Qt::SmoothTransformation));
title_layout->addWidget(icon);
QLabel *title = new QLabel(tr("Setup Wi-Fi"));
title->setStyleSheet("font-size: 64px; font-weight: 600;");
title_layout->addWidget(title);
title_layout->addStretch();
}
setup_layout->addLayout(title_layout);
QLabel *desc = new QLabel(tr("Connect to Wi-Fi to upload driving data and help improve openpilot"));
desc->setStyleSheet("font-size: 40px; font-weight: 400;");
desc->setWordWrap(true);
setup_layout->addWidget(desc);
QPushButton *settings_btn = new QPushButton(tr("Open Settings"));
connect(settings_btn, &QPushButton::clicked, [=]() { emit openSettings(1); });
settings_btn->setStyleSheet(R"(
QPushButton {
font-size: 48px;
font-weight: 500;
border-radius: 10px;
background-color: #465BEA;
padding: 32px;
}
QPushButton:pressed {
background-color: #3049F4;
}
)");
setup_layout->addWidget(settings_btn);
}
stack->addWidget(setup);
// Uploading data
QWidget *uploading = new QWidget;
QVBoxLayout *uploading_layout = new QVBoxLayout(uploading);
uploading_layout->setContentsMargins(64, 56, 64, 56);
uploading_layout->setSpacing(36);
{
QHBoxLayout *title_layout = new QHBoxLayout;
{
QLabel *title = new QLabel(tr("Uploading training data"));
title->setStyleSheet("font-size: 64px; font-weight: 600;");
title->setWordWrap(true);
title->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Minimum);
title_layout->addWidget(title);
title_layout->addStretch();
QLabel *icon = new QLabel;
QPixmap *pixmap = new QPixmap("../assets/offroad/icon_wifi_uploading.svg");
icon->setPixmap(pixmap->scaledToWidth(120, Qt::SmoothTransformation));
title_layout->addWidget(icon);
}
uploading_layout->addLayout(title_layout);
QLabel *desc = new QLabel(tr("Your data is used to train driving models and help improve openpilot"));
desc->setStyleSheet("font-size: 48px; font-weight: 400;");
desc->setWordWrap(true);
uploading_layout->addWidget(desc);
}
stack->addWidget(uploading);
setStyleSheet(R"(
WiFiPromptWidget {
background-color: #333333;
border-radius: 10px;
}
)");
QObject::connect(uiState(), &UIState::uiUpdate, this, &WiFiPromptWidget::updateState);
}
void WiFiPromptWidget::updateState(const UIState &s) {
if (!isVisible()) return;
auto &sm = *(s.sm);
auto network_type = sm["deviceState"].getDeviceState().getNetworkType();
auto uploading = network_type == cereal::DeviceState::NetworkType::WIFI ||
network_type == cereal::DeviceState::NetworkType::ETHERNET;
stack->setCurrentIndex(uploading ? 1 : 0);
}

@ -0,0 +1,23 @@
#pragma once
#include <QFrame>
#include <QStackedLayout>
#include <QWidget>
#include "selfdrive/ui/ui.h"
class WiFiPromptWidget : public QFrame {
Q_OBJECT
public:
explicit WiFiPromptWidget(QWidget* parent = 0);
signals:
void openSettings(int index = 0, const QString &param = "");
public slots:
void updateState(const UIState &s);
protected:
QStackedLayout *stack;
};

@ -517,10 +517,6 @@ location set</source>
<source>comma prime</source>
<translation>comma prime</translation>
</message>
<message>
<source>CONNECT.COMMA.AI</source>
<translation>CONNECT.COMMA.AI</translation>
</message>
</context>
<context>
<name>QObject</name>
@ -1076,6 +1072,29 @@ This may take up to a minute.</source>
<translation>Aktualisierung fehlgeschlagen</translation>
</message>
</context>
<context>
<name>WiFiPromptWidget</name>
<message>
<source>Setup Wi-Fi</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Connect to Wi-Fi to upload driving data and help improve openpilot</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Open Settings</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Uploading training data</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Your data is used to train driving models and help improve openpilot</source>
<translation type="unfinished"></translation>
</message>
</context>
<context>
<name>WifiUI</name>
<message>

@ -518,10 +518,6 @@ location set</source>
<source>comma prime</source>
<translation>comma prime</translation>
</message>
<message>
<source>CONNECT.COMMA.AI</source>
<translation>CONNECT.COMMA.AI</translation>
</message>
</context>
<context>
<name>QObject</name>
@ -1070,6 +1066,29 @@ This may take up to a minute.</source>
<translation></translation>
</message>
</context>
<context>
<name>WiFiPromptWidget</name>
<message>
<source>Setup Wi-Fi</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Connect to Wi-Fi to upload driving data and help improve openpilot</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Open Settings</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Uploading training data</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Your data is used to train driving models and help improve openpilot</source>
<translation type="unfinished"></translation>
</message>
</context>
<context>
<name>WifiUI</name>
<message>

@ -518,10 +518,6 @@ location set</source>
<source>comma prime</source>
<translation>comma prime</translation>
</message>
<message>
<source>CONNECT.COMMA.AI</source>
<translation>CONNECT.COMMA.AI</translation>
</message>
</context>
<context>
<name>QObject</name>
@ -1071,6 +1067,29 @@ This may take up to a minute.</source>
<translation> </translation>
</message>
</context>
<context>
<name>WiFiPromptWidget</name>
<message>
<source>Setup Wi-Fi</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Connect to Wi-Fi to upload driving data and help improve openpilot</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Open Settings</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Uploading training data</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Your data is used to train driving models and help improve openpilot</source>
<translation type="unfinished"></translation>
</message>
</context>
<context>
<name>WifiUI</name>
<message>

@ -519,10 +519,6 @@ trabalho definido</translation>
<source>comma prime</source>
<translation>comma prime</translation>
</message>
<message>
<source>CONNECT.COMMA.AI</source>
<translation>CONNECT.COMMA.AI</translation>
</message>
</context>
<context>
<name>QObject</name>
@ -1075,6 +1071,29 @@ Isso pode levar até um minuto.</translation>
<translation>Falha na atualização</translation>
</message>
</context>
<context>
<name>WiFiPromptWidget</name>
<message>
<source>Setup Wi-Fi</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Connect to Wi-Fi to upload driving data and help improve openpilot</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Open Settings</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Uploading training data</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Your data is used to train driving models and help improve openpilot</source>
<translation type="unfinished"></translation>
</message>
</context>
<context>
<name>WifiUI</name>
<message>

@ -516,10 +516,6 @@ location set</source>
<source>comma prime</source>
<translation>comma prime</translation>
</message>
<message>
<source>CONNECT.COMMA.AI</source>
<translation>CONNECT.COMMA.AI</translation>
</message>
</context>
<context>
<name>QObject</name>
@ -1068,6 +1064,29 @@ This may take up to a minute.</source>
<translation></translation>
</message>
</context>
<context>
<name>WiFiPromptWidget</name>
<message>
<source>Setup Wi-Fi</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Connect to Wi-Fi to upload driving data and help improve openpilot</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Open Settings</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Uploading training data</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Your data is used to train driving models and help improve openpilot</source>
<translation type="unfinished"></translation>
</message>
</context>
<context>
<name>WifiUI</name>
<message>

@ -518,10 +518,6 @@ location set</source>
<source>comma prime</source>
<translation>comma </translation>
</message>
<message>
<source>CONNECT.COMMA.AI</source>
<translation>CONNECT.COMMA.AI</translation>
</message>
</context>
<context>
<name>QObject</name>
@ -1070,6 +1066,29 @@ This may take up to a minute.</source>
<translation></translation>
</message>
</context>
<context>
<name>WiFiPromptWidget</name>
<message>
<source>Setup Wi-Fi</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Connect to Wi-Fi to upload driving data and help improve openpilot</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Open Settings</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Uploading training data</source>
<translation type="unfinished"></translation>
</message>
<message>
<source>Your data is used to train driving models and help improve openpilot</source>
<translation type="unfinished"></translation>
</message>
</context>
<context>
<name>WifiUI</name>
<message>

Loading…
Cancel
Save