web

selfdrive/carrot/web/css/hud_card.css

@@ -18,6 +18,8 @@
   --hud-chip-font: 13.5px;
   --hud-gear-font: 46px;
   --hud-band-height: 34px;
+  --hud-metric-value-scale: 1.78;
+  --hud-bottom-segment-scale: 1.30;
   --hud-max-width: 428px;
   --hud-panel-top: rgba(13, 56, 38, 1);
   --hud-panel-mid: rgba(18, 65, 44, 1);
@@ -107,7 +109,6 @@
 }
 
 .hudWrap[data-surface="driveOverlay"] .hudBottomSegment {
-  font-size: calc(var(--hud-chip-font) + 0.6px);
   letter-spacing: 0.06px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -169,8 +170,9 @@
 .hudMetricBar {
   display: flex;
   align-items: stretch;
-  margin-bottom: calc(var(--hud-section-gap) * 0.28);
-  padding: 0 calc(var(--hud-section-gap) * 0.08);
+  margin-top: calc(var(--hud-padding) * -0.34);
+  margin-bottom: calc(var(--hud-section-gap) * 0.08);
+  padding: 0;
 }
 
 .hudMetricCell {
@@ -179,8 +181,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: calc(var(--hud-metric-gap) * 0.42);
-  padding: 0 calc(var(--hud-section-gap) * 0.30);
+  gap: calc(var(--hud-metric-gap) * 0.22);
+  padding: 0 calc(var(--hud-section-gap) * 0.12);
 }
 
 .hudMetricDivider,
@@ -214,10 +216,10 @@
 
 .hudMetricValue {
   min-width: 0;
-  font-size: calc(var(--hud-chip-font) + 2.9px);
-  font-weight: 900;
+  font-size: calc(var(--hud-chip-font) * var(--hud-metric-value-scale, 1.78));
+  font-weight: 920;
   line-height: 1;
-  letter-spacing: -0.01em;
+  letter-spacing: -0.028em;
   text-shadow: var(--hud-text-shadow-strong);
   white-space: nowrap;
 }
@@ -452,8 +454,10 @@
 .hudBottomStrip {
   display: flex;
   align-items: center;
-  padding: clamp(2px, calc((var(--hud-band-height) - (var(--hud-chip-font) + 4px)) / 2), 4px) calc(var(--hud-section-gap) * 0.12);
+  min-height: calc(var(--hud-band-height) + 2px);
+  padding: 0 calc(var(--hud-section-gap) * 0.04);
   margin-top: auto;
+  margin-bottom: calc(var(--hud-padding) * -0.34);
 }
 
 .hudSignalSlot {
@@ -489,10 +493,10 @@
 .hudBottomSegment {
   flex: 1 1 0;
   min-width: 0;
-  font-size: calc(var(--hud-chip-font) + 2.8px);
-  font-weight: 900;
+  font-size: calc(var(--hud-chip-font) * var(--hud-bottom-segment-scale, 1.30));
+  font-weight: 920;
   line-height: 1;
-  letter-spacing: 0.18px;
+  letter-spacing: 0.01px;
   text-align: center;
   color: rgba(255,255,255,0.92);
   text-shadow: var(--hud-text-shadow-strong);

selfdrive/carrot/web/index.html

@@ -442,7 +442,7 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/app_core.js?v=2604-18"></script>
   <script src="/js/app_pages.js?v=2604-23"></script>
   <script src="/js/raw_capnp.js?v=2604-05"></script>
-  <script src="/js/app_realtime.js?v=2604-16"></script>
+  <script src="/js/app_realtime.js?v=2604-17"></script>
   <script src="/js/home_drive.js?v=2604-27"></script>
 </body>
 </html>

selfdrive/carrot/web/js/app_realtime.js

@@ -287,9 +287,26 @@ async function toggleCarrotFullscreen(options = {}) {
   return requestCarrotFullscreen(options);
 }
 
+function shouldKeepCarrotFullscreen() {
+  return document.body?.dataset?.page === "carrot" && Boolean(window.CARROT_VISION_ACTIVE);
+}
+
+async function syncCarrotFullscreenLifecycle() {
+  if (shouldKeepCarrotFullscreen()) return;
+  await exitCarrotFullscreen({ quiet: true }).catch(() => {});
+}
+
 window.RequestCarrotFullscreen = requestCarrotFullscreen;
+window.ExitCarrotFullscreen = exitCarrotFullscreen;
 window.ToggleCarrotFullscreen = toggleCarrotFullscreen;
 
+window.addEventListener("carrot:pagechange", () => {
+  void syncCarrotFullscreenLifecycle();
+});
+window.addEventListener("carrot:visionchange", () => {
+  void syncCarrotFullscreenLifecycle();
+});
+
 function emitCarrotRenderRequest(detail = {}) {
   window.dispatchEvent(new CustomEvent("carrot:render-request", { detail }));
 }

selfdrive/carrot/web/js/hud_card.js

@@ -129,13 +129,47 @@
 
   function getBandHeight(density) {
     switch (density) {
-      case "micro": return 30;
-      case "compact": return 34;
-      case "regular": return 38;
-      default: return 42;
+      case "micro": return 34;
+      case "compact": return 40;
+      case "regular": return 44;
+      default: return 48;
     }
   }
 
+  function getBandTypography(profile, surface) {
+    let metricScale;
+    let bottomScale;
+
+    switch (profile.density) {
+      case "micro":
+        metricScale = 1.84;
+        bottomScale = 1.34;
+        break;
+      case "compact":
+        metricScale = 1.78;
+        bottomScale = 1.30;
+        break;
+      case "regular":
+        metricScale = 1.72;
+        bottomScale = 1.26;
+        break;
+      default:
+        metricScale = 1.66;
+        bottomScale = 1.22;
+        break;
+    }
+
+    if (surface === SURFACE_OVERLAY) {
+      metricScale = Math.max(1.42, (metricScale - 0.02) * 0.90);
+      bottomScale = Math.max(1.02, (bottomScale - 0.02) * 0.90);
+    }
+
+    return {
+      metricScale,
+      bottomScale,
+    };
+  }
+
   function getSurfaceTarget() {
     if (isOverlayMount()) return $("carrotStage");
     return $("carrotHudDock");
@@ -170,6 +204,7 @@
       const drawWidth = width;
       const drawHeight = height;
       const base = Math.min(drawWidth, drawHeight);
+      const overlaySizeBoost = 1.10;
       const ratio = (() => {
         switch (windowClass) {
           case "compact": return 0.23;
@@ -187,7 +222,7 @@
           case "large": return 186;
           default: return 198;
         }
-      })();
+      })() * overlaySizeBoost;
       const maxSize = (() => {
         switch (windowClass) {
           case "compact": return 246;
@@ -196,10 +231,10 @@
           case "large": return 294;
           default: return 310;
         }
-      })();
-      const viewportCap = drawHeight * 0.34;
+      })() * overlaySizeBoost;
+      const viewportCap = drawHeight * 0.374;
       const upperBound = Math.max(minSize, Math.min(maxSize, viewportCap));
-      const overlayHeight = clamp(base * ratio, minSize, upperBound);
+      const overlayHeight = clamp(base * ratio * overlaySizeBoost, minSize, upperBound);
       const overlayWidth = Math.min(
         Math.max(320, drawWidth - 32),
         overlayHeight * getPreferredAspectRatioForWindow(windowClass, true),
@@ -417,24 +452,26 @@
 
     let profile = buildHudProfile(constraints.width, constraints.height, surface);
     if (surface === SURFACE_OVERLAY) {
+      const overlayScale = clamp(Math.min(constraints.width / 340, constraints.height / 210), 0.92, 1.02);
       profile = {
         ...profile,
         density: "micro",
         wide: false,
         borderRadius: 18,
         dockInset: 4,
-        padding: 11,
-        sectionGap: 9,
-        metricGap: 7,
-        speedFontSize: 62,
-        primaryValueFontSize: 26,
-        secondaryValueFontSize: 20,
-        labelFontSize: 11.8,
-        chipFontSize: 10.8,
-        gearFontSize: 28,
+        padding: Math.max(8, Math.round(profile.padding * 0.64)),
+        sectionGap: Math.max(6, Math.round(profile.sectionGap * 0.56)),
+        metricGap: Math.max(5, Math.round(profile.metricGap * 0.56)),
+        speedFontSize: Math.round(profile.speedFontSize * 0.84 * overlayScale),
+        primaryValueFontSize: Math.round(profile.primaryValueFontSize * 0.80 * overlayScale),
+        secondaryValueFontSize: Math.round(profile.secondaryValueFontSize * 0.82 * overlayScale),
+        labelFontSize: Math.round(profile.labelFontSize * 0.92 * overlayScale * 10) / 10,
+        chipFontSize: Math.round(profile.chipFontSize * overlayScale * 10) / 10,
+        gearFontSize: Math.round(profile.gearFontSize * 0.74 * overlayScale),
         maxWidth: Math.min(profile.maxWidth, 340),
       };
     }
+    const bandTypography = getBandTypography(profile, surface);
     const style = root.style;
     const portraitInline = surface === SURFACE_INLINE && !isOverlayMount();
     const exactSizedSurface = surface === SURFACE_INLINE || surface === SURFACE_OVERLAY;
@@ -466,6 +503,8 @@
     style.setProperty("--hud-chip-font", `${profile.chipFontSize}px`);
     style.setProperty("--hud-gear-font", `${profile.gearFontSize}px`);
     style.setProperty("--hud-band-height", `${getBandHeight(profile.density)}px`);
+    style.setProperty("--hud-metric-value-scale", bandTypography.metricScale.toFixed(2));
+    style.setProperty("--hud-bottom-segment-scale", bandTypography.bottomScale.toFixed(2));
     style.setProperty("--hud-max-width", `${Math.round(profile.maxWidth)}px`);
     style.setProperty("--hud-dock-inset", `${profile.dockInset}px`);
     style.setProperty("--hud-text-shadow-strong", STRONG_TEXT_SHADOW);