diff --git a/apps/web/src/components/HudOverlay.tsx b/apps/web/src/components/HudOverlay.tsx
index c9cb122..c35dc14 100644
--- a/apps/web/src/components/HudOverlay.tsx
+++ b/apps/web/src/components/HudOverlay.tsx
@@ -1,3 +1,4 @@
+import { useId } from "react";
import type { TelemetryState } from "@uav-ground-control-station/shared";
import { formatNumber } from "../lib/format";
import { resolveHeadingDeg } from "../lib/resolveHeadingDeg";
@@ -13,9 +14,12 @@ interface HudOverlayProps {
stale?: boolean;
/** Phase 2: smaller variant for video PiP. */
compact?: boolean;
+ /** When false, omit `data-tour="attitude-hud"` (e.g. compact PiP duplicate). */
+ showTourTarget?: boolean;
}
-export function HudOverlay({ telemetry, stale = false, compact = false }: HudOverlayProps) {
+export function HudOverlay({ telemetry, stale = false, compact = false, showTourTarget = true }: HudOverlayProps) {
+ const clipId = useId().replace(/:/g, "");
const size = compact ? 220 : 320;
const cx = size / 2;
const cy = size / 2;
@@ -39,7 +43,7 @@ export function HudOverlay({ telemetry, stale = false, compact = false }: HudOve
return (
-
+
@@ -69,7 +73,7 @@ export function HudOverlay({ telemetry, stale = false, compact = false }: HudOve
strokeWidth={1.5}
/>
-
+
{hasAttitude ? (
{
const map = mapRef.current;
@@ -249,8 +250,15 @@ export function MapPanel({ telemetry, coordinate, home, groundTarget, telemetryS
useEffect(() => {
const map = mapRef.current;
if (!map || !mapReady || !map.getLayer("drone-point")) return;
- map.setPaintProperty("drone-point", "circle-opacity", telemetryStale ? 0.45 : 1);
+
+ const staleOpacity = telemetryStale ? 0.45 : 1;
+ map.setPaintProperty("drone-point", "circle-opacity", staleOpacity);
map.setPaintProperty("drone-point", "circle-color", telemetryStale ? "#94a3b8" : "#22d3ee");
+
+ if (map.getLayer("drone-heading")) {
+ map.setPaintProperty("drone-heading", "icon-opacity", staleOpacity);
+ map.setPaintProperty("drone-heading", "icon-color", telemetryStale ? "#94a3b8" : "#22d3ee");
+ }
}, [telemetryStale, mapReady, styleEpoch]);
useEffect(() => {
@@ -331,11 +339,13 @@ function addMapOverlays(map: MapInstance): void {
}
if (!map.getSource("drone")) {
+ ensureDroneChevronIcon(map);
map.addSource("drone", { type: "geojson", data: emptyPointCollection() });
map.addLayer({
id: "drone-point",
type: "circle",
source: "drone",
+ filter: ["!", ["has", "heading"]],
paint: {
"circle-radius": 9,
"circle-color": "#22d3ee",
@@ -343,6 +353,25 @@ function addMapOverlays(map: MapInstance): void {
"circle-stroke-color": "#0f172a"
}
});
+ map.addLayer({
+ id: "drone-heading",
+ type: "symbol",
+ source: "drone",
+ filter: ["has", "heading"],
+ layout: {
+ "icon-image": DRONE_CHEVRON_ICON_ID,
+ "icon-size": 0.9,
+ "icon-rotate": ["get", "heading"],
+ "icon-rotation-alignment": "map",
+ "icon-allow-overlap": true,
+ "icon-ignore-placement": true
+ },
+ paint: {
+ "icon-color": "#22d3ee",
+ "icon-halo-color": "#0f172a",
+ "icon-halo-width": 2
+ }
+ });
}
if (!map.getSource("home")) {
diff --git a/apps/web/src/components/VideoPanel.tsx b/apps/web/src/components/VideoPanel.tsx
index a7b0991..ff01008 100644
--- a/apps/web/src/components/VideoPanel.tsx
+++ b/apps/web/src/components/VideoPanel.tsx
@@ -1,22 +1,33 @@
import { useEffect, useRef, useState, type CSSProperties, type PointerEvent } from "react";
+import type { TelemetryState } from "@uav-ground-control-station/shared";
import type { TargetEstimationController } from "../hooks/useTargetEstimation";
import { isVideoSignalGood, useVideoSignalStatus } from "../hooks/useVideoSignalStatus";
import { sanitizeHttpUrl } from "../lib/safeHttpUrl";
import { GroundTargetPanel } from "./GroundTargetPanel";
+import { HudOverlay } from "./HudOverlay";
type VideoKind = "mjpeg" | "hls" | "webrtc";
const defaultUrl = sanitizeHttpUrl(import.meta.env.VITE_VIDEO_URL ?? "");
const defaultKind = (import.meta.env.VITE_VIDEO_KIND as VideoKind | undefined) ?? "mjpeg";
+const VIDEO_HUD_KEY = "uav-gcs.video.hud";
+
+function loadVideoHudEnabled(): boolean {
+ const raw = localStorage.getItem(VIDEO_HUD_KEY);
+ return raw === null ? true : raw === "true";
+}
interface VideoPanelProps {
+ telemetry: TelemetryState;
+ telemetryStale?: boolean;
targetEstimation: TargetEstimationController;
}
-export function VideoPanel({ targetEstimation }: VideoPanelProps) {
+export function VideoPanel({ telemetry, telemetryStale = false, targetEstimation }: VideoPanelProps) {
const [collapsed, setCollapsed] = useState(false);
const [url, setUrl] = useState(() => sanitizeHttpUrl(localStorage.getItem("uav-gcs.video.url") ?? defaultUrl));
const [kind, setKind] = useState(() => (localStorage.getItem("uav-gcs.video.kind") as VideoKind | null) ?? defaultKind);
+ const [showHud, setShowHud] = useState(() => loadVideoHudEnabled());
const [position, setPosition] = useState<{ x: number; y: number } | null>(null);
const dragOffsetRef = useRef<{ x: number; y: number } | null>(null);
const videoSignal = useVideoSignalStatus(url, kind);
@@ -27,6 +38,10 @@ export function VideoPanel({ targetEstimation }: VideoPanelProps) {
localStorage.setItem("uav-gcs.video.kind", kind);
}, [url, kind]);
+ useEffect(() => {
+ localStorage.setItem(VIDEO_HUD_KEY, String(showHud));
+ }, [showHud]);
+
useEffect(() => {
function move(event: globalThis.PointerEvent) {
const offset = dragOffsetRef.current;
@@ -82,9 +97,23 @@ export function VideoPanel({ targetEstimation }: VideoPanelProps) {