Qt UI: offroad home touchups (#20416)

* brand

* fix overlap

* touchup prime widget

* more prime widget cleanup

* don't need background layout

* fix overlap again

* more prime

* looks pretty good

Co-authored-by: Comma Device <device@comma.ai>

selfdrive/ui/qt/home.cc

@@ -93,8 +93,9 @@ OffroadHome::OffroadHome(QWidget* parent) : QWidget(parent) {
   date->setStyleSheet(R"(font-size: 55px;)");
   header_layout->addWidget(date, 0, Qt::AlignTop | Qt::AlignLeft);
 
-  QLabel* version = new QLabel(QString::fromStdString("openpilot v" + Params().get("Version")));
+  std::string brand = Params().read_db_bool("Passive") ? "dashcam" : "openpilot";
-  version->setStyleSheet(R"(font-size: 45px;)");
+  QLabel* version = new QLabel(QString::fromStdString(brand + " v" + Params().get("Version")));
+  version->setStyleSheet(R"(font-size: 55px;)");
   header_layout->addWidget(version, 0, Qt::AlignTop | Qt::AlignRight);
 
   main_layout->addLayout(header_layout);
@@ -110,11 +111,12 @@ OffroadHome::OffroadHome(QWidget* parent) : QWidget(parent) {
   QHBoxLayout* statsAndSetup = new QHBoxLayout();
 
   DriveStats* drive = new DriveStats;
-  drive->setFixedSize(1000, 800);
+  drive->setFixedSize(800, 800);
-  statsAndSetup->addWidget(drive);
+  statsAndSetup->addWidget(drive, 0, Qt::AlignLeft);
 
   SetupWidget* setup = new SetupWidget;
-  statsAndSetup->addWidget(setup);
+  setup->setFixedSize(700, 700);
+  statsAndSetup->addWidget(setup, 0, Qt::AlignRight);
 
   QWidget* statsAndSetupWidget = new QWidget();
   statsAndSetupWidget->setLayout(statsAndSetup);

selfdrive/ui/qt/widgets/setup.cc

@@ -24,7 +24,7 @@ PairingQRWidget::PairingQRWidget(QWidget* parent) : QWidget(parent) {
   QTimer* timer = new QTimer(this);
   timer->start(30 * 1000);
   connect(timer, SIGNAL(timeout()), this, SLOT(refresh()));
-  refresh(); // Not waiting for the first refresh
+  refresh(); // don't wait for the first refresh
 }
 
 void PairingQRWidget::refresh(){
@@ -48,7 +48,7 @@ void PairingQRWidget::refresh(){
 void PairingQRWidget::updateQrCode(QString text) {
   QrCode qr = QrCode::encodeText(text.toUtf8().data(), QrCode::Ecc::LOW);
   qint32 sz = qr.getSize();
-  // We make the image larger so we can have a white border
+  // make the image larger so we can have a white border
   QImage im(sz + 2, sz + 2, QImage::Format_RGB32);
   QRgb black = qRgb(0, 0, 0);
   QRgb white = qRgb(255, 255, 255);
@@ -71,32 +71,43 @@ void PairingQRWidget::updateQrCode(QString text) {
 
 PrimeUserWidget::PrimeUserWidget(QWidget* parent) : QWidget(parent) {
   mainLayout = new QVBoxLayout;
+  mainLayout->setMargin(30);
+
   QLabel* commaPrime = new QLabel("COMMA PRIME");
-  commaPrime->setStyleSheet(R"(
+  mainLayout->addWidget(commaPrime, 0, Qt::AlignTop);
-    font-size: 60px;
-  )");
-  mainLayout->addWidget(commaPrime);
 
-  username = new QLabel("");
+  username = new QLabel();
-  mainLayout->addWidget(username);
+  username->setStyleSheet("font-size: 55px;"); // TODO: fit width
+  mainLayout->addWidget(username, 0, Qt::AlignTop);
 
-  mainLayout->addSpacing(200);
+  mainLayout->addSpacing(100);
 
   QLabel* commaPoints = new QLabel("COMMA POINTS");
   commaPoints->setStyleSheet(R"(
-    font-size: 60px;
     color: #b8b8b8;
   )");
-  mainLayout->addWidget(commaPoints);
+  mainLayout->addWidget(commaPoints, 0, Qt::AlignTop);
 
-  points = new QLabel("");
+  points = new QLabel();
-  mainLayout->addWidget(points);
+  mainLayout->addWidget(points, 0, Qt::AlignTop);
 
   setLayout(mainLayout);
+  setStyleSheet(R"(
+    QLabel {
+      font-size: 70px;
+      font-weight: 500;
+    }
+  )");
+
+  // set up API requests
   QString dongleId = QString::fromStdString(Params().get("DongleId"));
+  if (!dongleId.length()) {
+    return;
+  }
+
+  // TODO: only send the request when widget is shown
   QString url = "https://api.commadotai.com/v1/devices/" + dongleId + "/owner";
   RequestRepeater* repeater = new RequestRepeater(this, url, 6);
-
   QObject::connect(repeater, SIGNAL(receivedResponse(QString)), this, SLOT(replyFinished(QString)));
 }
 
@@ -106,12 +117,13 @@ void PrimeUserWidget::replyFinished(QString response) {
     qDebug() << "JSON Parse failed on getting username and points";
     return;
   }
+
   QJsonObject json = doc.object();
+  QString points_str = QString::number(json["points"].toInt());
   QString username_str = json["username"].toString();
   if (username_str.length()) {
     username_str = "@" + username_str;
   }
-  QString points_str = QString::number(json["points"].toInt());
 
   username->setText(username_str);
   points->setText(points_str);
@@ -119,101 +131,106 @@ void PrimeUserWidget::replyFinished(QString response) {
 
 PrimeAdWidget::PrimeAdWidget(QWidget* parent) : QWidget(parent) {
   QVBoxLayout* vlayout = new QVBoxLayout;
+  vlayout->setMargin(30);
+  vlayout->setSpacing(15);
 
-  QLabel* upgradeNow = new QLabel("Upgrade now");
+  vlayout->addWidget(new QLabel("Upgrade now"), 1, Qt::AlignTop);
-  vlayout->addWidget(upgradeNow);
 
-  QLabel* description = new QLabel("Become a comma prime member in the comma app and get premium features!");
+  QLabel* description = new QLabel("Become a comma prime member in the comma connect app and get premium features!");
   description->setStyleSheet(R"(
     font-size: 50px;
     color: #b8b8b8;
   )");
   description->setWordWrap(true);
-  vlayout->addWidget(description);
+  vlayout->addWidget(description, 2, Qt::AlignTop);
-
-  vlayout->addSpacing(50);
 
   QVector<QString> features = {"✓ REMOTE ACCESS", "✓ 14 DAYS OF STORAGE", "✓ DEVELOPER PERKS"};
-  for (auto featureContent : features) {
+  for (auto &f: features) {
-    QLabel* feature = new QLabel(featureContent);
+    QLabel* feature = new QLabel(f);
-    feature->setStyleSheet(R"(
+    feature->setStyleSheet(R"(font-size: 40px;)");
-      font-size: 40px;
+    vlayout->addWidget(feature, 0, Qt::AlignBottom);
-    )");
-
-    vlayout->addWidget(feature);
-    vlayout->addSpacing(15);
   }
 
   setLayout(vlayout);
 }
 
 
-SetupWidget::SetupWidget(QWidget* parent) : QWidget(parent) {
+SetupWidget::SetupWidget(QWidget* parent) : QFrame(parent) {
-  QVBoxLayout* backgroundLayout = new QVBoxLayout;
-
-  backgroundLayout->addSpacing(100);
-
-  QFrame* background = new QFrame;
-
   mainLayout = new QStackedLayout;
 
   QWidget* blankWidget = new QWidget;
+  //blankWidget->setStyleSheet(R"background-color: transparent;");
   mainLayout->addWidget(blankWidget);
 
-  QWidget* finishRegistration = new QWidget;
+  // Unpaired, registration prompt layout
 
   QVBoxLayout* finishRegistationLayout = new QVBoxLayout;
-  finishRegistationLayout->addSpacing(30);
+  finishRegistationLayout ->setMargin(30);
-  QPushButton* finishButton = new QPushButton("Finish registration");
-  finishButton->setFixedHeight(200);
-  finishButton->setStyleSheet(R"(
-    border-radius: 30px;
-    font-size: 55px;
-    background: #585858;
-  )");
-  QObject::connect(finishButton, SIGNAL(released()), this, SLOT(showQrCode()));
-  finishRegistationLayout->addWidget(finishButton);
 
   QLabel* registrationDescription = new QLabel("Pair your device with the comma connect app");
+  registrationDescription->setWordWrap(true);
+  registrationDescription->setAlignment(Qt::AlignCenter);
   registrationDescription->setStyleSheet(R"(
     font-size: 55px;
     font-weight: 400;
   )");
 
-  registrationDescription->setWordWrap(true);
   finishRegistationLayout->addWidget(registrationDescription);
 
+  QPushButton* finishButton = new QPushButton("Finish setup");
+  finishButton->setFixedHeight(200);
+  finishButton->setStyleSheet(R"(
+    border-radius: 30px;
+    font-size: 55px;
+    font-weight: 500;
+    background: #585858;
+  )");
+  finishRegistationLayout->addWidget(finishButton);
+  QObject::connect(finishButton, SIGNAL(released()), this, SLOT(showQrCode()));
+
+  QWidget* finishRegistration = new QWidget;
   finishRegistration->setLayout(finishRegistationLayout);
   mainLayout->addWidget(finishRegistration);
 
+  // Pairing QR code layout
+
   QVBoxLayout* qrLayout = new QVBoxLayout;
 
-  QLabel* qrLabel = new QLabel("Pair with comma connect!");
+  qrLayout->addSpacing(40);
-  qrLabel->setStyleSheet(R"(font-size: 40px)");
+  QLabel* qrLabel = new QLabel("Scan with comma connect!");
-  qrLayout->addWidget(qrLabel);
+  qrLabel->setWordWrap(true);
+  qrLabel->setAlignment(Qt::AlignHCenter);
+  qrLabel->setStyleSheet(R"(
+    font-size: 55px;
+    font-weight: 400;
+  )");
+  qrLayout->addWidget(qrLabel, 0, Qt::AlignTop);
 
-  qrLayout->addWidget(new PairingQRWidget);
+  qrLayout->addWidget(new PairingQRWidget, 1);
 
   QWidget* q = new QWidget;
   q->setLayout(qrLayout);
   mainLayout->addWidget(q);
 
-  PrimeAdWidget* primeAd = new PrimeAdWidget;
+  primeAd = new PrimeAdWidget;
   mainLayout->addWidget(primeAd);
 
-  PrimeUserWidget* primeUserWidget = new PrimeUserWidget;
+  primeUser = new PrimeUserWidget;
-  mainLayout->addWidget(primeUserWidget);
+  mainLayout->addWidget(primeUser);
 
-  background->setLayout(mainLayout);
+  setLayout(mainLayout);
-  background->setStyleSheet(R"(
+  setStyleSheet(R"(
-    .QFrame {
+    QFrame {
+      background-color: #292929;
+    }
+    * {
+      font-size: 90px;
+      font-weight: 500;
       border-radius: 40px;
-      padding: 40px;
     }
   )");
-  backgroundLayout->addWidget(background);
-  setLayout(backgroundLayout);
 
+  // set up API requests
   QString dongleId = QString::fromStdString(Params().get("DongleId"));
   QString url = "https://api.commadotai.com/v1.1/devices/" + dongleId + "/";
   RequestRepeater* repeater = new RequestRepeater(this, url, 5);
@@ -225,10 +242,6 @@ SetupWidget::SetupWidget(QWidget* parent) : QWidget(parent) {
 void SetupWidget::parseError(QString response) {
   showQr = false;
   mainLayout->setCurrentIndex(0);
-  setStyleSheet(R"(
-    font-size: 90px;
-    background-color: #000000;
-  )");
 }
 
 void SetupWidget::showQrCode(){
@@ -243,25 +256,17 @@ void SetupWidget::replyFinished(QString response) {
     return;
   }
 
-  if (mainLayout->currentIndex() == 0) { // If we are still on the blank widget
-    setStyleSheet(R"(
-      font-size: 90px;
-      font-weight: bold;
-      background-color: #292929;
-    )");
-  }
-
   QJsonObject json = doc.object();
   bool is_paired = json["is_paired"].toBool();
   bool is_prime = json["prime"].toBool();
 
   if (!is_paired) {
     mainLayout->setCurrentIndex(1 + showQr);
-  } else if (is_paired && !is_prime) {
+  } else if (!is_prime) {
     showQr = false;
-    mainLayout->setCurrentIndex(3);
+    mainLayout->setCurrentWidget(primeAd);
-  } else if (is_paired && is_prime) {
+  } else {
     showQr = false;
-    mainLayout->setCurrentIndex(4);
+    mainLayout->setCurrentWidget(primeUser);
   }
 }

selfdrive/ui/qt/widgets/setup.hpp

@@ -41,7 +41,7 @@ public:
   explicit PrimeAdWidget(QWidget* parent = 0);
 };
 
-class SetupWidget : public QWidget {
+class SetupWidget : public QFrame {
   Q_OBJECT
 
 public:
@@ -50,6 +50,8 @@ public:
 private:
   QStackedLayout* mainLayout;
   CommaApi* api;
+  PrimeAdWidget *primeAd;
+  PrimeUserWidget *primeUser;
   bool showQr = false;
 
 private slots: