Qt training guide (#19953)

* initial commit

* background kind of works

* checkpoint

* temp

* add images

* all works

* remove some files

* rename

* enable restart

* remove first

* lfs try1

* refactor labels

* remove nonneeded code

* centered

* more centering

* don't hardcode the training version

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

.gitattributes

@@ -4,6 +4,7 @@
 *.pb filter=lfs diff=lfs merge=lfs -text
 *.bin filter=lfs diff=lfs merge=lfs -text
 *.apk filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
 *.ipynb filter=nbstripout -diff
 external/ffmpeg/bin/ffmpeg_cuda filter=lfs diff=lfs merge=lfs -text
 models/segnet.keras filter=lfs diff=lfs merge=lfs -text

selfdrive/assets/training/step0.jpg

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

selfdrive/assets/training/step1.jpg

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

selfdrive/assets/training/step10.jpg

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

selfdrive/assets/training/step11.jpg

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

selfdrive/assets/training/step12.jpg

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

selfdrive/assets/training/step13.jpg

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

selfdrive/assets/training/step14.jpg

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

selfdrive/assets/training/step2.jpg

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

selfdrive/assets/training/step3.jpg

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

selfdrive/assets/training/step4.jpg

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

selfdrive/assets/training/step5.jpg

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

selfdrive/assets/training/step6.jpg

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

selfdrive/assets/training/step7.jpg

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

selfdrive/assets/training/step8.jpg

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

selfdrive/assets/training/step9.jpg

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

selfdrive/ui/qt/offroad/onboarding.cc

@@ -3,17 +3,72 @@
 #include <QPushButton>
 #include <QGridLayout>
 #include <QVBoxLayout>
+#include <QDebug>
+#include <QGuiApplication>
+#include <QScreen>
+#include <QApplication>
+#include <QDesktopWidget>
 
 #include "onboarding.hpp"
 #include "common/params.h"
+#include "home.hpp"
 
 
 QLabel * title_label(QString text) {
   QLabel *l = new QLabel(text);
-  l->setStyleSheet(R"(font-size: 100px;)");
+  l->setStyleSheet(R"(font-size: 100px; font-weight: bold;)");
   return l;
 }
 
+QWidget* layout2Widget(QLayout* l){
+  QWidget* q = new QWidget;
+  q->setLayout(l);
+  return q;
+}
+
+
+
+
+void TrainingGuide::mouseReleaseEvent(QMouseEvent *e) {
+  int leftOffset = (geometry().width()-1620)/2;
+  int mousex = e->x()-leftOffset;
+  int mousey = e->y();
+
+  // Check for restart
+  if (currentIndex == numberOfFrames-1) {
+    if (1050 <= mousex && mousex <= 1500 && 773 <= mousey && mousey <= 954){
+      slayout->setCurrentIndex(0);
+      currentIndex = 0;
+      return;
+    }
+  }
+
+  if (boundingBox[currentIndex][0] <= mousex && mousex <= boundingBox[currentIndex][1] && boundingBox[currentIndex][2] <= mousey && mousey <= boundingBox[currentIndex][3]) {
+    slayout->setCurrentIndex(++currentIndex);
+  }
+  if (currentIndex >= numberOfFrames) {
+    emit completedTraining();
+    return;
+  }
+}
+
+TrainingGuide::TrainingGuide(QWidget* parent) {
+  QHBoxLayout* hlayout = new QHBoxLayout;
+
+  slayout = new QStackedLayout(this);
+  for (int i = 0; i <= 14; i++) {
+    QWidget* w = new QWidget;
+    w->setStyleSheet(".QWidget {background-image: url(../assets/training/step" + QString::number(i) + ".jpg);}");
+    w->setFixedSize(1620, 1080);
+    slayout->addWidget(w);
+  }
+
+  QWidget* sw = layout2Widget(slayout);
+  hlayout->addWidget(sw, 1, Qt::AlignCenter);
+  setLayout(hlayout);
+}
+
+
 QWidget* OnboardingWindow::terms_screen() {
 
   QGridLayout *main_layout = new QGridLayout();
@@ -35,7 +90,7 @@ QWidget * OnboardingWindow::terms_screen() {
   QPushButton *accept_btn = new QPushButton("Accept");
   main_layout->addWidget(accept_btn, 2, 1);
   QObject::connect(accept_btn, &QPushButton::released, [=]() {
-    Params().write_db_value("HasAcceptedTerms", LATEST_TERMS_VERSION);
+    Params().write_db_value("HasAcceptedTerms", current_terms_version.toStdString());
     updateActiveScreen();
   });
 
@@ -55,34 +110,11 @@ QWidget * OnboardingWindow::terms_screen() {
   return widget;
 }
 
-QWidget * OnboardingWindow::training_screen() {
-
-  QVBoxLayout *main_layout = new QVBoxLayout();
-  main_layout->setMargin(100);
-  main_layout->setSpacing(30);
-
-  main_layout->addWidget(title_label("Training Guide"));
-
-  main_layout->addWidget(new QLabel(), 1); // just a spacer
-
-  QPushButton *btn = new QPushButton("Continue");
-  main_layout->addWidget(btn);
-  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;
    
+  bool accepted_terms = params.get("HasAcceptedTerms", false).compare(current_terms_version.toStdString()) == 0;
+  bool training_done = params.get("CompletedTrainingVersion", false).compare(current_training_version.toStdString()) == 0;
   if (!accepted_terms) {
     setCurrentIndex(0);
   } else if (!training_done) {
@@ -93,8 +125,13 @@ void OnboardingWindow::updateActiveScreen() {
 }
 
 OnboardingWindow::OnboardingWindow(QWidget *parent) : QStackedWidget(parent) {
+  Params params = Params();
+  current_terms_version = QString::fromStdString(params.get("TermsVersion", false));
+  current_training_version = QString::fromStdString(params.get("TrainingVersion", false));
   addWidget(terms_screen());
-  addWidget(training_screen());
+  TrainingGuide* tr = new TrainingGuide(this);
+  connect(tr, &TrainingGuide::completedTraining, [=](){Params().write_db_value("CompletedTrainingVersion", current_training_version.toStdString()); updateActiveScreen();});
+  addWidget(tr);
 
   setStyleSheet(R"(
     * {
@@ -102,15 +139,11 @@ OnboardingWindow::OnboardingWindow(QWidget *parent) : QStackedWidget(parent) {
       background-color: black;
     }
     QPushButton {
-      font-size: 50px;
       padding: 50px;
       border-radius: 10px;
       background-color: #292929;
     }
   )");
 
-  // TODO: remove this after training guide is done
-  Params().write_db_value("CompletedTrainingVersion", LATEST_TRAINING_VERSION);
-
   updateActiveScreen();
 }

selfdrive/ui/qt/offroad/onboarding.hpp

@@ -2,10 +2,29 @@
 
 #include <QWidget>
 #include <QStackedWidget>
+#include <QStackedLayout>
+#include <QMouseEvent>
 
-// TODO: this is defined in python too
-#define LATEST_TERMS_VERSION "2"
-#define LATEST_TRAINING_VERSION "0.2.0"
+
+class TrainingGuide : public QWidget {
+  Q_OBJECT
+
+public:
+  explicit TrainingGuide(QWidget *parent = 0);
+
+protected:
+  void mouseReleaseEvent(QMouseEvent* e) override;
+private:
+  int currentIndex = 0;
+  const int numberOfFrames = 15;
+  QStackedLayout* slayout;
+  //Vector of bounding boxes for the next step. (minx, maxx, miny, maxy)
+  QVector<QVector<int>> boundingBox {{250, 930, 750, 900}, {280, 1280, 650, 950}, {330, 1130, 590, 900}, {910, 1580, 500, 1000}, {1180, 1300, 630, 720}, {290, 1050, 590, 960}, 
+  {1090, 1240, 550, 660}, {1050, 1580, 250, 900}, {320, 1130, 670, 1020}, {1010, 1580, 410, 750}, {1040, 1500, 230, 1030}, {300, 1190, 590, 920}, {1050, 1310, 170, 870}, {950, 1530, 460, 770}, {190, 970, 750, 970}};
+
+signals:
+  void completedTraining();
+};
 
 class OnboardingWindow : public QStackedWidget {
   Q_OBJECT
@@ -14,6 +33,8 @@ public:
   explicit OnboardingWindow(QWidget *parent = 0);
 
 private:
+  QString current_terms_version;
+  QString current_training_version;
   QWidget * terms_screen();
   QWidget * training_screen();