QML terms (#20439)

* initial_commit

* rich text + color

* nice scrolling

* margin

* print on scroll + some margins

* print on scroll + some margins

* working, needs a lot of improvements

* should be done

* initial_commit

* rich text + color

* nice scrolling

* margin

* print on scroll + some margins

* print on scroll + some margins

* working, needs a lot of improvements

* should be done

* update tests

* Revert "update tests"

This reverts commit 94d5ed789eb79bedc9544fc27b4d14c0acc44adf.

* cleanup

* QuickView -> QuickWidget

* tuned scrolling

* cherry on top

* screen size scaling

* load from html

* fixing tabs

* signal fix

* TABS

* mistake

* rename

* camel case

* transparent background

* naming + point->pixel Size

* style

* util::read_file

* adjusting font size

Co-authored-by: Comma Device <device@comma.ai>
Co-authored-by: Adeeb Shihadeh <adeebshihadeh@gmail.com>
old-commit-hash: 55926e762a5198a0a8456419b9afa1d6cb22bb4e

SConstruct

@@ -264,7 +264,7 @@ Export('envCython')
 
 # Qt build environment
 qt_env = env.Clone()
-qt_modules = ["Widgets", "Gui", "Core", "Network", "Concurrent", "Multimedia"]
+qt_modules = ["Widgets", "Gui", "Core", "Network", "Concurrent", "Multimedia", "Quick", "Qml", "QuickWidgets"]
 if arch != "aarch64":
   qt_modules += ["DBus"]
 
@@ -307,6 +307,9 @@ qt_flags = [
   "-DQT_NO_DEBUG",
   "-DQT_WIDGETS_LIB",
   "-DQT_GUI_LIB",
+  "-DQT_QUICK_LIB",
+  "-DQT_QUICKWIDGETS_LIB",
+  "-DQT_QML_LIB",
   "-DQT_CORE_LIB"
 ]
 qt_env['CXXFLAGS'] += qt_flags

selfdrive/ui/qt/offroad/onboarding.cc

@@ -1,12 +1,13 @@
 #include <QLabel>
 #include <QString>
+#include <QPainter>
 #include <QScroller>
 #include <QScrollBar>
-#include <QPushButton>
 #include <QGridLayout>
 #include <QVBoxLayout>
+#include <QQmlContext>
+#include <QQuickWidget>
 #include <QDesktopWidget>
-#include <QPainter>
 
 #include "common/params.h"
 #include "onboarding.hpp"
@@ -37,7 +38,7 @@ void TrainingGuide::mouseReleaseEvent(QMouseEvent *e) {
   }
 }
 
-TrainingGuide::TrainingGuide(QWidget* parent) {
+TrainingGuide::TrainingGuide(QWidget* parent) : QFrame(parent){
   image.load("../assets/training/step0.jpg");
 }
 
@@ -53,17 +54,24 @@ void TrainingGuide::paintEvent(QPaintEvent *event) {
   painter.drawImage(rect.topLeft(), image);
 }
 
+TermsPage::TermsPage(QWidget *parent) : QFrame(parent){
 
-QWidget* OnboardingWindow::terms_screen() {
   QVBoxLayout *main_layout = new QVBoxLayout;
-  main_layout->setContentsMargins(40, 20, 40, 20);
+  main_layout->setMargin(40);
+  main_layout->setSpacing(40);
 
-  QString terms_html = QString::fromStdString(util::read_file("../assets/offroad/tc.html"));
-  terms_text = new QTextEdit();
-  terms_text->setReadOnly(true);
-  terms_text->setTextInteractionFlags(Qt::NoTextInteraction);
-  terms_text->setHtml(terms_html);
-  main_layout->addWidget(terms_text);
+  QQuickWidget *text = new QQuickWidget(QUrl::fromLocalFile("qt/offroad/text_view.qml"), this);
+  text->setResizeMode(QQuickWidget::SizeRootObjectToView);
+  text->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
+  text->setAttribute(Qt::WA_AlwaysStackOnTop);
+  text->setClearColor(Qt::transparent);
+
+  text->rootContext()->setContextProperty("font_size", 55);
+
+  QString text_view = util::read_file("../assets/offroad/tc.html").c_str();
+  text->rootContext()->setContextProperty("text_view", text_view);
+
+  main_layout->addWidget(text);
 
   // TODO: add decline page
   QHBoxLayout* buttons = new QHBoxLayout;
@@ -72,29 +80,17 @@ QWidget* OnboardingWindow::terms_screen() {
   buttons->addWidget(new QPushButton("Decline"));
   buttons->addSpacing(50);
 
-  QPushButton *accept_btn = new QPushButton("Scroll to accept");
+  accept_btn = new QPushButton("Scroll to accept");
   accept_btn->setEnabled(false);
   buttons->addWidget(accept_btn);
   QObject::connect(accept_btn, &QPushButton::released, [=]() {
-    Params().write_db_value("HasAcceptedTerms", current_terms_version);
-    updateActiveScreen();
+    emit acceptedTerms();
   });
 
-  // TODO: tune the scrolling
-  auto sb = terms_text->verticalScrollBar();
-  QScroller::grabGesture(terms_text, QScroller::TouchGesture);
-  terms_text->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
-
-  QObject::connect(sb, &QScrollBar::valueChanged, [sb, accept_btn]() {
-    if (sb->value() == sb->maximum()){
-      accept_btn->setText("Accept");
-      accept_btn->setEnabled(true);
-    }
-  });
-
-  QWidget *widget = new QWidget;
-  widget->setLayout(main_layout);
-  widget->setStyleSheet(R"(
+  QObject *obj = (QObject*)text->rootObject();
+  QObject::connect(obj, SIGNAL(qmlSignal()), SLOT(enableAccept()));
+  setLayout(main_layout);
+  setStyleSheet(R"(
     * {
       font-size: 50px;
     }
@@ -104,8 +100,12 @@ QWidget* OnboardingWindow::terms_screen() {
       background-color: #292929;
     }
   )");
+}
 
-  return widget;
+void TermsPage::enableAccept(){
+  accept_btn->setText("Accept");
+  accept_btn->setEnabled(true);
+  return;
 }
 
 void OnboardingWindow::updateActiveScreen() {
@@ -126,7 +126,13 @@ OnboardingWindow::OnboardingWindow(QWidget *parent) : QStackedWidget(parent) {
   current_terms_version = params.get("TermsVersion", false);
   current_training_version = params.get("TrainingVersion", false);
 
-  addWidget(terms_screen());
+  TermsPage* terms = new TermsPage(this);
+  addWidget(terms);
+
+  connect(terms, &TermsPage::acceptedTerms, [=](){
+    Params().write_db_value("HasAcceptedTerms", current_terms_version);
+    updateActiveScreen();
+  });
 
   TrainingGuide* tr = new TrainingGuide(this);
   connect(tr, &TrainingGuide::completedTraining, [=](){

selfdrive/ui/qt/offroad/onboarding.hpp

@@ -4,6 +4,7 @@
 #include <QStackedWidget>
 #include <QTextEdit>
 #include <QMouseEvent>
+#include <QPushButton>
 #include <QImage>
 
 #include "selfdrive/common/params.h"
@@ -30,6 +31,23 @@ signals:
   void completedTraining();
 };
 
+
+class TermsPage : public QFrame {
+  Q_OBJECT
+
+public:
+  explicit TermsPage(QWidget *parent = 0);
+
+private:
+  QPushButton *accept_btn;
+
+public slots:
+  void enableAccept();
+
+signals:
+  void acceptedTerms();
+};
+
 class OnboardingWindow : public QStackedWidget {
   Q_OBJECT
 
@@ -41,10 +59,6 @@ private:
   std::string current_terms_version;
   std::string current_training_version;
 
-  QTextEdit *terms_text;
-  QWidget *terms_screen();
-  QWidget *training_screen();
-
 signals:
   void onboardingDone();
 

selfdrive/ui/qt/offroad/text_view.qml

@@ -0,0 +1,33 @@
+import QtQuick 2.0
+
+Item {
+  id: root
+  signal qmlSignal()
+
+  Flickable {
+    id: flickArea
+    objectName: "flickArea"
+    anchors.fill: parent
+    contentHeight: helpText.height
+    contentWidth: helpText.width
+    flickableDirection: Flickable.VerticalFlick
+    flickDeceleration: 7500.0
+    maximumFlickVelocity: 10000.0
+    pixelAligned: true
+
+    onAtYEndChanged: root.qmlSignal()
+
+    Text {
+      id: helpText
+      width: flickArea.width
+      font.pixelSize: font_size
+      textFormat: Text.RichText
+      color: "white"
+      wrapMode: Text.Wrap
+
+      text: text_view
+    }
+  }
+}
+
+