training guide updates (#21674)

* add progress bar

* shorter

* update lane change speed

* fix

* center

* fix cutoff
old-commit-hash: 75904ed745

selfdrive/assets/training/step10.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c97fb0820008bb0f3ea80ef681757b55598c1384c3c6090df1cb83fb91265d27
-size 50657
+oid sha256:2e395cdf4d84e6d68ffe1df24f3a2ea1fd0529c71d4ab7a3f3bb5983f1d3a872
+size 50736

selfdrive/assets/training_wide/step0.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:196ded436dc6621b2ff8825815a95c8036a24dbdd10898aa658c5a5771ad8612
-size 1834599
+oid sha256:e9206bb4e3c528da2189f08194f52950ffdccde809ebed838c45e59dd070ab54
+size 1831867

selfdrive/assets/training_wide/step10.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:aa0ba77bc02a429e9cf667ebaea04c2bfa5322a44f63b7b0ef3a7fa4e3e218e6
-size 52021
+oid sha256:aae2aba1c6e617cca0d393cbd6d29134b6de7c211415791d840093286593b9b7
+size 52148

selfdrive/assets/training_wide/step9.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b28bf8e69f28379a84f0d7de18c98d626fad3d064acabe7f8ce35157e0edfa16
-size 922120
+oid sha256:398a99cabef868cfe4195e2606e517999d4558222cf80f6ff8cd3d74117ff979
+size 918857

selfdrive/ui/qt/offroad/onboarding.cc

@@ -34,12 +34,18 @@ void TrainingGuide::paintEvent(QPaintEvent *event) {
   QPainter painter(this);
 
   QRect bg(0, 0, painter.device()->width(), painter.device()->height());
-  QBrush bgBrush("#000000");
-  painter.fillRect(bg, bgBrush);
+  painter.fillRect(bg, QColor("#000000"));
 
   QRect rect(image.rect());
   rect.moveCenter(bg.center());
   painter.drawImage(rect.topLeft(), image);
+
+  // progress bar
+  if (currentIndex > 0 && currentIndex < (boundingRect.size() - 2)) {
+    const int h = 20;
+    const int w = (currentIndex / (float)(boundingRect.size() - 2)) * width();
+    painter.fillRect(QRect(0, height() - h, w, h), QColor("#465BEA"));
+  }
 }
 
 void TermsPage::showEvent(QShowEvent *event) {