nav: show when using navigate on openpilot (#28958)

* draft

* clean up

* helper

* comment

* debug

* Revert "debug"

This reverts commit d30ff3e996e73818e14f28b51afed206337bf6da.

* nav path

* transition

* revert width transition

revert width transition

* 400 is better, hard to see flicker at 500

* add width back

* tune

* tune

* 12 might be good

* 400ms is good

* lower case company lcc

* up here

* up here

* clean up

* multiple lines

* self explanetory

selfdrive/ui/qt/maps/map.cc

@@ -105,7 +105,11 @@ void MapWindow::initLayers() {
     nav["type"] = "line";
     nav["source"] = "navSource";
     m_map->addLayer(nav, "road-intersection");
-    m_map->setPaintProperty("navLayer", "line-color", QColor("#31a1ee"));
+
+    QVariantMap transition;
+    transition["duration"] = 400;  // ms
+    m_map->setPaintProperty("navLayer", "line-color", getNavPathColor(uiState()->scene.navigate_on_openpilot));
+    m_map->setPaintProperty("navLayer", "line-color-transition", transition);
     m_map->setPaintProperty("navLayer", "line-width", 7.5);
     m_map->setLayoutProperty("navLayer", "line-cap", "round");
     m_map->addAnnotationIcon("default_marker", QImage("../assets/navigation/default_marker.svg"));
@@ -135,11 +139,16 @@ void MapWindow::updateState(const UIState &s) {
   const SubMaster &sm = *(s.sm);
   update();
 
-  // update navigate on openpilot status
   if (sm.updated("modelV2")) {
+    // set path color on change, and show map on rising edge of navigate on openpilot
     bool nav_enabled = sm["modelV2"].getModelV2().getNavEnabled();
-    if (nav_enabled && !uiState()->scene.navigate_on_openpilot) {
-      emit requestVisible(true);  // Show map on rising edge of navigate on openpilot
+    if (nav_enabled != uiState()->scene.navigate_on_openpilot) {
+      if (loaded_once) {
+        m_map->setPaintProperty("navLayer", "line-color", getNavPathColor(nav_enabled));
+      }
+      if (nav_enabled) {
+        emit requestVisible(true);
+      }
     }
     uiState()->scene.navigate_on_openpilot = nav_enabled;
   }

selfdrive/ui/qt/maps/map.h

@@ -110,6 +110,11 @@ private:
   QPushButton *settings_btn;
   QPixmap directions_icon, settings_icon;
 
+  // Blue with normal nav, green when nav is input into the model
+  QColor getNavPathColor(bool nav_enabled) {
+    return nav_enabled ? QColor("#31ee73") : QColor("#31a1ee");
+  }
+
   void clearRoute();
   void updateDestinationMarker();
   uint64_t route_rcv_frame = 0;