improve onboarding (#2537)

selfdrive/ui/qt/offroad/onboarding.cc

@@ -1,54 +1,41 @@
-#include <string>
-
-#include "onboarding.hpp"
-
-#include <QStackedLayout>
-#include <QVBoxLayout>
-#include <QHBoxLayout>
-#include <QPushButton>
 #include <QLabel>
+#include <QString>
+#include <QPushButton>
+#include <QGridLayout>
 
+#include "onboarding.hpp"
 #include "common/params.h"
 
 
+QLabel * title_label(QString text) {
+  QLabel *l = new QLabel(text);
+  l->setStyleSheet(R"(font-size: 100px;)");
+  l->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum);
+  return l;
+}
+
 QWidget * OnboardingWindow::terms_screen() {
-  QVBoxLayout *main_layout = new QVBoxLayout();
+
+  QGridLayout *main_layout = new QGridLayout();
   main_layout->setMargin(30);
   main_layout->setSpacing(30);
 
-  QLabel *title = new QLabel("Review Terms");
-  title->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum);
-  title->setStyleSheet(R"(
-    QLabel {
-      font-size: 80px;
-      text-align: left;
-      margin: 0;
-      padding: 0;
-    }
-  )");
-  main_layout->addWidget(title);
+  main_layout->addWidget(title_label("Review Terms"), 0, 0, 1, -1);
 
   QLabel *terms = new QLabel("See terms at https://my.comma.ai/terms");
   terms->setAlignment(Qt::AlignCenter);
+  terms->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Preferred);
   terms->setStyleSheet(R"(
-    QLabel {
-      font-size: 35px;
+    font-size: 75px;
     border-radius: 10px;
-      text-align: center;
     background-color: #292929;
-    }
   )");
-  main_layout->addWidget(terms, Qt::AlignTop);
+  main_layout->addWidget(terms, 1, 0, 1, -1);
 
-  QHBoxLayout *btn_layout = new QHBoxLayout();
-  //btn_layout->setSpacing(30);
+  main_layout->addWidget(new QPushButton("Decline"), 2, 0);
 
-  QPushButton *decline_btn = new QPushButton("Decline");
-  btn_layout->addWidget(decline_btn);
   QPushButton *accept_btn = new QPushButton("Accept");
-  btn_layout->addWidget(accept_btn);
-  main_layout->addLayout(btn_layout);
-
+  main_layout->addWidget(accept_btn, 2, 1);
   QObject::connect(accept_btn, &QPushButton::released, [=]() {
     Params().write_db_value("HasAcceptedTerms", LATEST_TERMS_VERSION);
     updateActiveScreen();
@@ -57,9 +44,6 @@ QWidget * OnboardingWindow::terms_screen() {
   QWidget *widget = new QWidget;
   widget->setLayout(main_layout);
   widget->setStyleSheet(R"(
-    QLabel {
-      color: white;
-    }
     QPushButton {
       font-size: 50px;
       padding: 50px;
@@ -71,33 +55,58 @@ QWidget * OnboardingWindow::terms_screen() {
   return widget;
 }
 
+QWidget * OnboardingWindow::training_screen() {
+
+  QGridLayout *main_layout = new QGridLayout();
+  main_layout->setMargin(30);
+  main_layout->setSpacing(30);
+
+  main_layout->addWidget(title_label("Training Guide"), 0, 0);
+
+  QPushButton *btn = new QPushButton("Continue");
+  main_layout->addWidget(btn, 1, 0);
+  QObject::connect(btn, &QPushButton::released, [=]() {
+    Params().write_db_value("CompletedTrainingVersion", LATEST_TRAINING_VERSION);
+    updateActiveScreen();
+  });
+
+  QWidget *widget = new QWidget;
+  widget->setLayout(main_layout);
+  return widget;
+}
+
 void OnboardingWindow::updateActiveScreen() {
 
   Params params = Params();
-
   bool accepted_terms = params.get("HasAcceptedTerms", false).compare(LATEST_TERMS_VERSION) == 0;
+  bool training_done = params.get("CompletedTrainingVersion", false).compare(LATEST_TRAINING_VERSION) == 0;
 
-  if (accepted_terms) {
+  if (!accepted_terms) {
+    layout->setCurrentIndex(0);
+  } else if (!training_done) {
+    layout->setCurrentIndex(1);
+  } else {
     emit onboardingDone();
   }
 }
 
 OnboardingWindow::OnboardingWindow(QWidget *parent) : QWidget(parent) {
+  layout = new QStackedLayout();
+  layout->addWidget(terms_screen());
+  layout->addWidget(training_screen());
 
-  // Onboarding flow: terms -> account pairing -> training
-
-
-  QStackedLayout *main_layout = new QStackedLayout;
-  main_layout->addWidget(terms_screen());
-  setLayout(main_layout);
+  setLayout(layout);
   setStyleSheet(R"(
     * {
       background-color: black;
     }
+    QPushButton {
+      font-size: 50px;
+      padding: 50px;
+      border-radius: 10px;
+      background-color: #292929;
+    }
   )");
 
-  // TODO: implement the training guide
-  Params().write_db_value("CompletedTrainingVersion", LATEST_TRAINING_VERSION);
-
   updateActiveScreen();
 }

selfdrive/ui/qt/offroad/onboarding.hpp

@@ -1,7 +1,7 @@
 #pragma once
 
 #include <QWidget>
-
+#include <QStackedLayout>
 
 // TODO: this is defined in python too
 #define LATEST_TERMS_VERSION "2"
@@ -13,12 +13,14 @@ class OnboardingWindow : public QWidget {
 public:
   explicit OnboardingWindow(QWidget *parent = 0);
 
-signals:
-  void onboardingDone();
-
 private:
   QWidget * terms_screen();
+  QWidget * training_screen();
+  QStackedLayout *layout;
+
+signals:
+  void onboardingDone();
 
-private slots:
+public slots:
   void updateActiveScreen();
 };

selfdrive/ui/qt/window.cc

@@ -52,8 +52,9 @@ MainWindow::MainWindow(QWidget *parent) : QWidget(parent) {
   QObject::connect(settingsWindow, SIGNAL(closeSettings()), this, SLOT(closeSettings()));
 
   // start at onboarding
-  //main_layout->setCurrentWidget(onboardingWindow);
+  main_layout->setCurrentWidget(onboardingWindow);
   QObject::connect(onboardingWindow, SIGNAL(onboardingDone()), this, SLOT(closeSettings()));
+  onboardingWindow->updateActiveScreen();
 
   setStyleSheet(R"(
     * {

selfdrive/ui/qt/window.hpp

@@ -21,7 +21,6 @@ private:
 public slots:
   void openSettings();
   void closeSettings();
-
 };
 
 #ifdef QCOM2