표고 체계 정비·설정 파일 단순화·선형 클리핑·시연 준비
- 타원체고 기준 자동 변환: route.json ellipsoidal_height 선언 시 드론 고도(CSV 정표고)를 영상 메타(djmd 6.6 타원체고)와의 차(지오이드고 자동 산출)만큼 보정, 세그먼트 전환에도 유지 - KML 표고 파이프라인: 좌표 고도(z) 사용(POI/측점), *_byDem.kml 자동 생성(DEM 조회·높이 속성 포함) + 로더의 _byDem 우선 규칙, 선형중심선(LineString) 로딩·경로표고 앵커 - 설정 파일: camera.json/display.json/route.json 단순 이름 인식, 화면표시 옵션 PC 저장/자동 적용, 초기화 버튼을 환경설정 파일 기준 복원으로 변경, 저장 파일명 단순화 - 선형 표시: 표출된 마지막 측점까지 클립(경계 세그먼트 절단 + 관통 현 처리 — 구간 실종 수정) - 스테이션바: 시점(0k000) 마크(실통과 위치), 노선밖 프레임 통과 오인 방지, 커서 배지 1m 단위, 배너 연장/소요 실측값(측점 체이니지·영상 길이 합) 우선 - 세그먼트 전환 라벨 깜빡임 구조 수정(캐시 초기화·최근접 키 조회·이중 재계산 제거) + 사전계산 프레임 불변값 호이스팅(재생 지연 해소) - UI: 슬라이더/값 입력칸 휠 조절, 패널 버튼 위치 정렬, 저장 버튼 중복 제거, dev_mode(route.json)로 영상제어 UI 표시 제어, 지오이드 최대 200, 이격거리 측점 동반 적용 - 시연: start-demo.bat + docs/DEMO.md - docs/history: 작업 이력 30건 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
@@ -229,16 +229,40 @@ function ParamRow({ label, value, min, max, step, unit, decimals = 1, onChange,
|
||||
onChange(c); setText(fmt(c)); prevRef.current = c;
|
||||
} else setText(fmt(value));
|
||||
};
|
||||
// 마우스 휠: 위 = +step, 아래 = −step (예: 카메라 파라미터 0.1 단위).
|
||||
// 슬라이더와 숫자 값 입력칸 양쪽 위에서 동작. 패널 스크롤을 막아야 하므로
|
||||
// non-passive 네이티브 리스너로 부착(React onWheel 은 passive).
|
||||
const sliderRef = useRef<HTMLInputElement>(null);
|
||||
const numRef = useRef<HTMLInputElement>(null);
|
||||
const wheelStateRef = useRef({ value, min, max, step, decimals, onChange });
|
||||
useEffect(() => { wheelStateRef.current = { value, min, max, step, decimals, onChange }; });
|
||||
useEffect(() => {
|
||||
const els = [sliderRef.current, numRef.current].filter((el): el is HTMLInputElement => !!el);
|
||||
if (!els.length) return;
|
||||
const onWheel = (e: WheelEvent): void => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const s = wheelStateRef.current;
|
||||
const dir = e.deltaY < 0 ? 1 : -1;
|
||||
// 부동소수점 누적 오차 방지 — 표시 자릿수로 반올림
|
||||
const next = parseFloat(
|
||||
Math.max(s.min, Math.min(s.max, s.value + dir * s.step)).toFixed(Math.max(s.decimals, 3)),
|
||||
);
|
||||
if (next !== s.value) s.onChange(next);
|
||||
};
|
||||
els.forEach(el => el.addEventListener('wheel', onWheel, { passive: false }));
|
||||
return () => els.forEach(el => el.removeEventListener('wheel', onWheel));
|
||||
}, []);
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 text-[11px]">
|
||||
<span
|
||||
title={tip}
|
||||
className={`text-gray-400 w-12 shrink-0 text-right ${tip ? 'cursor-help underline decoration-dotted decoration-gray-600 underline-offset-2' : ''}`}
|
||||
>{label}</span>
|
||||
<input type="range" min={min} max={max} step={step} value={value}
|
||||
<input ref={sliderRef} type="range" min={min} max={max} step={step} value={value}
|
||||
onChange={e => { const v = parseFloat(e.target.value); onChange(v); prevRef.current = v; setText(fmt(v)); }}
|
||||
className="flex-1 h-1 accent-yellow-400 cursor-pointer" />
|
||||
<input type="number" min={min} max={max} step={step} value={text}
|
||||
<input ref={numRef} type="number" min={min} max={max} step={step} value={text}
|
||||
onChange={e => setText(e.target.value)}
|
||||
onBlur={e => commit(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === 'Enter') commit((e.target as HTMLInputElement).value); if (e.key === 'Escape') setText(fmt(value)); }}
|
||||
@@ -284,6 +308,10 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
// 텍스트 사전 계산 Map
|
||||
const labelMapRef = useRef<Map<number, LabelCache>>(new Map());
|
||||
const precomputeIdRef = useRef(0); // 진행 중 계산 취소용
|
||||
// 캐시 키(드론 프레임 번호, 오름차순) — RAF 가 최근접 키를 이진탐색으로 조회.
|
||||
const labelKeysRef = useRef<number[]>([]);
|
||||
// 직전 사전계산의 frames 참조 — 바뀌면(세그먼트 전환) 옛 캐시를 복사하지 않고 새로 시작.
|
||||
const lastPrecomputeFramesRef = useRef<DroneFrameBasic[] | null>(null);
|
||||
|
||||
// 중심선 + 나침반 렌더 캐시 (per-frame)
|
||||
const renderCacheRef = useRef<RenderCache | null>(null);
|
||||
@@ -479,6 +507,28 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
return best;
|
||||
}, []);
|
||||
|
||||
/** 중심선 '세그먼트 투영' 최근접점 — 정점 스냅이 아니라 선 위의 정확한 위치.
|
||||
* LineString 중심선(예: 제주 146정점)은 직선 구간 정점이 성겨서, 정점 스냅(nearestCL)을
|
||||
* 측점 라벨에 쓰면 0k200~0k700 같은 직선 구간 측점들이 굽이 정점으로 뭉쳐 버린다. */
|
||||
const projectCL = useCallback((lat: number, lon: number): CenterlinePoint | null => {
|
||||
const pts = allCenterlinePointsRef.current;
|
||||
if (pts.length < 2) return nearestCL(lat, lon);
|
||||
const k = Math.cos((lat * Math.PI) / 180);
|
||||
const px = lon * k, py = lat;
|
||||
let bestD = Infinity, bl = pts[0].lat, bo = pts[0].lon, bz = pts[0].z;
|
||||
for (let i = 0; i < pts.length - 1; i++) {
|
||||
const a = pts[i], b = pts[i + 1];
|
||||
const ax = a.lon * k, ay = a.lat, bx = b.lon * k, by = b.lat;
|
||||
const dx = bx - ax, dy = by - ay;
|
||||
const L2 = dx * dx + dy * dy;
|
||||
const t = L2 === 0 ? 0 : Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / L2));
|
||||
const cx = ax + dx * t, cy = ay + dy * t;
|
||||
const d = (px - cx) ** 2 + (py - cy) ** 2;
|
||||
if (d < bestD) { bestD = d; bl = cy; bo = cx / k; bz = a.z + (b.z - a.z) * t; }
|
||||
}
|
||||
return { lat: bl, lon: bo, z: bz };
|
||||
}, [nearestCL]);
|
||||
|
||||
// 클라이언트 지리정보 스토어 구독 (서버 /api/geo/* 대체)
|
||||
const storeStations = useGeoStore(s => s.stations);
|
||||
const storePois = useGeoStore(s => s.pois);
|
||||
@@ -503,6 +553,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
const storeBaseName = useGeoStore(s => s.baseName);
|
||||
const storeCameraInfo = useGeoStore(s => s.cameraInfo);
|
||||
const storeCameraJson = useGeoStore(s => s.cameraJson);
|
||||
const storeDisplayJson = useGeoStore(s => s.displayJson);
|
||||
const storePoiOverrides = useGeoStore(s => s.poiOverrides);
|
||||
const setPoiOverride = useGeoStore(s => s.setPoiOverride);
|
||||
const setPoiOverrides = useGeoStore(s => s.setPoiOverrides);
|
||||
@@ -595,14 +646,12 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
console.log('[camera] <base>.camera.json 파라미터 적용(최우선):', cam);
|
||||
}, [storeBaseName, storeCameraJson]);
|
||||
|
||||
// 현재 카메라 파라미터를 사용자 PC 에 <영상 base>.camera.json 으로 다운로드 저장.
|
||||
// 현재 카메라 파라미터를 사용자 PC 에 `camera.json`(단순 이름 규칙)으로 다운로드 저장.
|
||||
// Yaw±(자동추정/드래그 역산 결과) 포함 전체 파라미터가 담긴다.
|
||||
// 받은 파일을 영상 폴더에 넣어두면 다음 폴더 선택 때 최우선으로 자동 적용된다.
|
||||
const [camSaveState, setCamSaveState] = useState<'idle' | 'ok'>('idle');
|
||||
const saveCameraToPc = useCallback(() => {
|
||||
const geo = useGeoStore.getState();
|
||||
const videoName = geo.videoFiles[geo.videoIndex]?.name ?? (geo.baseName ? `${geo.baseName}.mp4` : 'camera.mp4');
|
||||
const base = videoName.replace(/\.[^.]+$/, '');
|
||||
const payload = {
|
||||
camera: paramsRef.current,
|
||||
model: geo.cameraInfo?.model,
|
||||
@@ -612,13 +661,80 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${base}.camera.json`;
|
||||
a.download = 'camera.json';
|
||||
a.click();
|
||||
setTimeout(() => URL.revokeObjectURL(url), 5000);
|
||||
setCamSaveState('ok');
|
||||
setTimeout(() => setCamSaveState('idle'), 2500);
|
||||
}, []);
|
||||
|
||||
// 폴더의 <영상 base>.display.json 화면표시 옵션 자동 적용 — 'PC에 저장' 버튼과 왕복.
|
||||
// localStorage 복원(calib effect)보다 뒤에 선언되어 파일 값이 우선 반영된다.
|
||||
const dispJsonAppliedFor = useRef<string | null>(null);
|
||||
useEffect(() => {
|
||||
if (!storeBaseName || !storeDisplayJson) return;
|
||||
if (dispJsonAppliedFor.current === storeBaseName) return;
|
||||
dispJsonAppliedFor.current = storeBaseName;
|
||||
const d = storeDisplayJson;
|
||||
const num = (k: string): number | undefined =>
|
||||
typeof d[k] === 'number' && isFinite(d[k] as number) ? (d[k] as number) : undefined;
|
||||
const bool = (k: string): boolean | undefined =>
|
||||
typeof d[k] === 'boolean' ? (d[k] as boolean) : undefined;
|
||||
if (num('dronePathZ') !== undefined) setDronePathZ(num('dronePathZ')!);
|
||||
if (num('dronePathAlpha') !== undefined) setDronePathAlpha(num('dronePathAlpha')!);
|
||||
if (num('smoothHalf') !== undefined) setSmoothHalf(num('smoothHalf')!);
|
||||
if (num('emaAlpha') !== undefined) setEmaAlpha(num('emaAlpha')!);
|
||||
if (num('smoothMinAlpha') !== undefined) setSmoothMinAlpha(num('smoothMinAlpha')!);
|
||||
if (num('smoothSpeedRef') !== undefined) setSmoothSpeedRef(num('smoothSpeedRef')!);
|
||||
if (num('maxPoiRange') !== undefined) setMaxPoiRange(num('maxPoiRange')!);
|
||||
if (bool('poiDroneHeight') !== undefined) setPoiDroneHeight(bool('poiDroneHeight')!);
|
||||
if (num('droneHeightDrop') !== undefined) setDroneHeightDrop(num('droneHeightDrop')!);
|
||||
const ss = useSettingsStore.getState();
|
||||
if (bool('showCenterline') !== undefined) ss.setShowCenterline(bool('showCenterline')!);
|
||||
if (bool('showDronePath') !== undefined) ss.setShowDronePath(bool('showDronePath')!);
|
||||
if (bool('showRoutePanel') !== undefined) ss.setShowRoutePanel(bool('showRoutePanel')!);
|
||||
if (bool('poiOverlapExclude') !== undefined) ss.setPoiOverlapExclude(bool('poiOverlapExclude')!);
|
||||
if (d.compassType === 'analog' || d.compassType === 'map') ss.setCompassType(d.compassType);
|
||||
if (d.compassMapStyle === 'street' || d.compassMapStyle === 'sat') ss.setCompassMapStyle(d.compassMapStyle);
|
||||
if (d.gradeFilter && typeof d.gradeFilter === 'object') {
|
||||
for (const [g, v] of Object.entries(d.gradeFilter as Record<string, unknown>)) {
|
||||
if (typeof v === 'boolean') ss.setGradeFilter(g, v);
|
||||
}
|
||||
}
|
||||
console.log('[display] <base>.display.json 화면표시 옵션 적용:', d);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [storeBaseName, storeDisplayJson]);
|
||||
|
||||
// 현재 화면표시 옵션을 사용자 PC 에 `display.json`(단순 이름 규칙)으로 다운로드 저장.
|
||||
// 받은 파일을 영상 폴더에 넣어두면 다음 폴더 선택 때 자동 적용된다.
|
||||
const [dispSaveState, setDispSaveState] = useState<'idle' | 'ok'>('idle');
|
||||
const saveDisplayToPc = useCallback(() => {
|
||||
const ss = useSettingsStore.getState();
|
||||
const payload = {
|
||||
display: {
|
||||
dronePathZ, dronePathAlpha, smoothHalf, emaAlpha, smoothMinAlpha, smoothSpeedRef,
|
||||
maxPoiRange, poiDroneHeight, droneHeightDrop,
|
||||
showCenterline: ss.showCenterline,
|
||||
showDronePath: ss.showDronePath,
|
||||
showRoutePanel: ss.showRoutePanel,
|
||||
poiOverlapExclude: ss.poiOverlapExclude,
|
||||
compassType: ss.compassType,
|
||||
compassMapStyle: ss.compassMapStyle,
|
||||
gradeFilter: ss.gradeFilter,
|
||||
},
|
||||
savedAt: new Date().toISOString(),
|
||||
};
|
||||
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'display.json';
|
||||
a.click();
|
||||
setTimeout(() => URL.revokeObjectURL(url), 5000);
|
||||
setDispSaveState('ok');
|
||||
setTimeout(() => setDispSaveState('idle'), 2500);
|
||||
}, [dronePathZ, dronePathAlpha, smoothHalf, emaAlpha, smoothMinAlpha, smoothSpeedRef, maxPoiRange, poiDroneHeight, droneHeightDrop]);
|
||||
|
||||
// Yaw 자동 추정 — 전진 비행 구간에서 GPS 진행 방위(정확) vs 짐벌 헤딩(나침반 오차 포함)의
|
||||
// 차이 중앙값을 Yaw± 로 설정. 카메라가 진행방향을 보며 촬영하는 도로 추종 비행 가정(근사치).
|
||||
const autoEstimateYaw = useCallback(() => {
|
||||
@@ -705,6 +821,10 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
// 드론 프레임
|
||||
useEffect(() => {
|
||||
allDroneFramesRef.current = storeFrames;
|
||||
// 세그먼트 전환 시 현재 프레임 추적 초기화 — 스테일 인덱스(이전 세그먼트 끝)로
|
||||
// 사전계산 시작 구간이 엉뚱해지는 것 방지. 다음 currentTime 틱에 정확히 재계산된다.
|
||||
currentFrameIdxRef.current = 0;
|
||||
currentFrameNumRef.current = storeFrames[0]?.frame ?? 0;
|
||||
setDroneFramesLoaded(storeFrames.length > 0);
|
||||
}, [storeFrames]);
|
||||
|
||||
@@ -784,11 +904,66 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
|
||||
const centerlineSegs: [number, number, number, number][] = [];
|
||||
if (showCenterlineRef.current && allCL.length) {
|
||||
let prev: CameraCoords | null = null;
|
||||
for (let i = 0; i < allCL.length; i++) {
|
||||
const cc = toCameraCoords(drone, allCL[i].lat, allCL[i].lon, allCL[i].z, params, worldOrigin);
|
||||
if (prev) { const s = segFrom(prev, cc); if (s) centerlineSegs.push(s); }
|
||||
prev = cc;
|
||||
// 표고 미상(z≤0) 중심선(예: 제주 KML 선형 — 고도 전부 0)은 '경로 표고' 평면에 앵커 —
|
||||
// 측점/POI 라벨과 동일 기준. z=0 그대로 투영하면 해수면 높이로 그려져 크게 어긋난다.
|
||||
const CL_Z = dronePathZRef.current;
|
||||
// 선형은 '표출된 마지막 측점'까지만 — 표시 반경(maxPoiRange) 안에 들어온 측점 중
|
||||
// 가장 먼 것의 거리(+10m)로 클립. 경계를 가로지르는 세그먼트는 경계 지점에서 잘라 그린다
|
||||
// (정점 간격이 긴 직선 구간에서 세그먼트 통째 그리기로 마지막 측점 너머 긴 꼬리가 남던 문제).
|
||||
const MAX_R = maxPoiRangeRef.current;
|
||||
const cosLat = Math.cos((drone.lat * Math.PI) / 180);
|
||||
let clipR = 0;
|
||||
for (const st of allGeoStationsRef.current) {
|
||||
const d = Math.hypot((st.lat - drone.lat) * 111000, (st.lon - drone.lon) * 111000 * cosLat);
|
||||
if (d <= MAX_R && d > clipR) clipR = d;
|
||||
}
|
||||
clipR = clipR > 0 ? Math.min(MAX_R, clipR + 10) : MAX_R;
|
||||
// 드론 기준 동서/남북(m) 좌표 — 세그먼트·클립원 교점 계산용
|
||||
const enOf = (p: { lat: number; lon: number }): [number, number] => [
|
||||
(p.lon - drone.lon) * 111000 * cosLat,
|
||||
(p.lat - drone.lat) * 111000,
|
||||
];
|
||||
// P0→P1 세그먼트가 반지름 clipR 원과 만나는 t(0~1) 목록(오름차순, 최대 2개).
|
||||
const clipTs = (e0: [number, number], e1: [number, number]): number[] => {
|
||||
const dx = e1[0] - e0[0], dy = e1[1] - e0[1];
|
||||
const a = dx * dx + dy * dy;
|
||||
if (a === 0) return [];
|
||||
const b = 2 * (e0[0] * dx + e0[1] * dy);
|
||||
const c = e0[0] * e0[0] + e0[1] * e0[1] - clipR * clipR;
|
||||
const disc = b * b - 4 * a * c;
|
||||
if (disc < 0) return [];
|
||||
const sq = Math.sqrt(disc);
|
||||
return [(-b - sq) / (2 * a), (-b + sq) / (2 * a)].filter((t) => t >= 0 && t <= 1);
|
||||
};
|
||||
const projCL = (lat: number, lon: number, z: number): CameraCoords =>
|
||||
toCameraCoords(drone, lat, lon, z > 0 ? z : CL_Z, params, worldOrigin);
|
||||
for (let i = 1; i < allCL.length; i++) {
|
||||
const p0 = allCL[i - 1], p1 = allCL[i];
|
||||
const e0 = enOf(p0), e1 = enOf(p1);
|
||||
const in0 = Math.hypot(e0[0], e0[1]) <= clipR;
|
||||
const in1 = Math.hypot(e1[0], e1[1]) <= clipR;
|
||||
const lerp = (t: number) => ({
|
||||
lat: p0.lat + (p1.lat - p0.lat) * t,
|
||||
lon: p0.lon + (p1.lon - p0.lon) * t,
|
||||
z: p0.z + (p1.z - p0.z) * t,
|
||||
});
|
||||
let a0 = p0, a1 = p1;
|
||||
if (!in0 && !in1) {
|
||||
// 양끝 다 밖 — 단, 긴 직선 세그먼트(KML 정점 간격 수백 m)가 클립 원을 '관통'하는
|
||||
// 경우가 흔하므로(0k700 부근 선 실종 원인), 두 교점 사이 구간(현)은 그린다.
|
||||
const ts = clipTs(e0, e1);
|
||||
if (ts.length < 2) continue; // 원과 안 만남 → 생략
|
||||
a0 = lerp(ts[0]); a1 = lerp(ts[1]);
|
||||
} else if (in0 !== in1) {
|
||||
// 경계 교차 → 교점까지만
|
||||
const ts = clipTs(e0, e1);
|
||||
if (ts.length) {
|
||||
const cut = lerp(in0 ? ts[ts.length - 1] : ts[0]);
|
||||
if (in0) a1 = cut; else a0 = cut;
|
||||
}
|
||||
}
|
||||
const s = segFrom(projCL(a0.lat, a0.lon, a0.z), projCL(a1.lat, a1.lon, a1.z));
|
||||
if (s) centerlineSegs.push(s);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -840,10 +1015,18 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
// 텍스트 사전 계산 — requestIdleCallback으로 백그라운드 실행
|
||||
const startLabelPrecompute = useCallback((currentParams: CameraParams, currentSmoothHalf: number, currentMaxRange: number, currentDroneHeight: boolean, currentDroneDrop: number) => {
|
||||
const id = ++precomputeIdRef.current;
|
||||
// 재계산(기존 맵 보유)이면 옛 맵을 복사해 시작 → 첫 청크(현재 프레임 포함) 후 즉시 노출,
|
||||
// 이후 청크가 프레임을 덮어써 전 구간이 새 설정으로 갱신(빈 구간 없음). 초기 로드는 빈 맵.
|
||||
const newMap = new Map<number, LabelCache>(labelMapRef.current.size ? labelMapRef.current : undefined);
|
||||
const frames = allDroneFramesRef.current;
|
||||
// 재계산(같은 데이터, 슬라이더 변경 등)이면 옛 맵을 복사해 시작 → 빈 구간 없이 갱신.
|
||||
// 단, frames 가 바뀐 경우(분할영상 세그먼트 전환)는 옛 캐시가 '다른 구간'의 값이므로
|
||||
// 복사하지 않고 비워서 시작 — 신·구 캐시가 섞여 라벨 집합이 프레임마다 뒤바뀌는
|
||||
// 깜빡임(두 번째 영상 재생 시)을 방지한다.
|
||||
const framesChanged = lastPrecomputeFramesRef.current !== frames;
|
||||
lastPrecomputeFramesRef.current = frames;
|
||||
const newMap = new Map<number, LabelCache>(
|
||||
!framesChanged && labelMapRef.current.size ? labelMapRef.current : undefined,
|
||||
);
|
||||
if (framesChanged) labelMapRef.current = newMap; // 스테일 캐시 즉시 차단
|
||||
labelKeysRef.current = frames.map(f => f.frame); // RAF 최근접 키 조회용(오름차순)
|
||||
const allSt = allGeoStationsRef.current;
|
||||
// 모든 POI 표출(철도역 포함) + 영상용 구조물(구교/교량/터널). 철도역은 별도로 스테이션바에도 표출.
|
||||
const allPoi = allPoisRef.current.concat(allStructuresRef.current);
|
||||
@@ -857,6 +1040,29 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
|
||||
if (!frames.length) return;
|
||||
|
||||
// 프레임 불변 값은 루프 밖에서 1회만 계산 — 측점의 중심선 투영(projectCL)과 POI 지면고도(gz)는
|
||||
// 드론 프레임과 무관하다. 프레임 루프 안에서 매번 계산하면(측점71×선분145×프레임 수천)
|
||||
// 재생 중 idle 청크가 메인 스레드를 막아 영상 딜레이·라벨 떨림을 유발한다.
|
||||
const snappedSt = allSt.map(st => {
|
||||
const snap = projectCL(st.lat, st.lon);
|
||||
const szRaw = snap?.z ?? st.z;
|
||||
return {
|
||||
title: st.title,
|
||||
lat: snap?.lat ?? st.lat,
|
||||
lon: snap?.lon ?? st.lon,
|
||||
// 표고 미상(0 이하)이면 경로표고 평면에 앵커 — 공중부양/시차 밀림 방지.
|
||||
z: szRaw > 0 ? szRaw : PATH_Z,
|
||||
};
|
||||
});
|
||||
const gzOf = new Map<string, number>();
|
||||
for (const poi of allPoi) {
|
||||
// 지면고도 gz: 보정값(DEM/드래그) → 최근접 선로표고(유효값) → POI 자체 z → 경로표고 앵커.
|
||||
const clz = nearestCL(poi.lat, poi.lon)?.z;
|
||||
gzOf.set(poi.title, overridesRef.current[poi.title]?.z
|
||||
?? (clz !== undefined && clz > 0 ? clz : undefined)
|
||||
?? (poi.z > 0 ? poi.z : PATH_Z));
|
||||
}
|
||||
|
||||
const t0 = performance.now();
|
||||
const total = frames.length;
|
||||
// 현재 재생 프레임부터 순환 처리 → 화면에 보이는 구간을 먼저 계산(재생 즉시 라벨 표시).
|
||||
@@ -876,13 +1082,13 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
const drone = smoothFrame(frames, idx, SMOOTH_HALF);
|
||||
|
||||
const stationLabels: LabelCache['stationLabels'] = [];
|
||||
for (const st of allSt) {
|
||||
const snap = nearestCL(st.lat, st.lon);
|
||||
const slat = snap?.lat ?? st.lat, slon = snap?.lon ?? st.lon;
|
||||
const szRaw = snap?.z ?? st.z;
|
||||
// 표고 미상(0 이하)이면 경로표고 평면에 앵커 — 공중부양/시차 밀림 방지.
|
||||
const sz = szRaw > 0 ? szRaw : PATH_Z;
|
||||
const cc = toCameraCoords(drone, slat, slon, sz, currentParams, worldOrigin);
|
||||
for (const sp of snappedSt) {
|
||||
const slat = sp.lat, slon = sp.lon, sz = sp.z;
|
||||
// 가시성 판정도 드로우와 동일 높이 규칙 — 드론높이 모드면 드론고도 − 이격거리.
|
||||
const stZ = currentDroneHeight
|
||||
? drone.altitude - (currentParams.geoidOffset ?? 0) - currentDroneDrop
|
||||
: sz;
|
||||
const cc = toCameraCoords(drone, slat, slon, stZ, currentParams, worldOrigin);
|
||||
if (cc.Zc < CLIP_Z) continue;
|
||||
// 측점도 POI 와 동일하게 표시 범위 제한 — 원거리(수 km) 측점이 수평선에 뭉치는 것 방지.
|
||||
if ((cc.distH ?? 0) > MAX_RANGE) continue;
|
||||
@@ -891,18 +1097,14 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
// 캐시 프레임마다 들락거리며 깜빡이는 것 방지. 실제 화면 밖 컬링은 드로우가 담당.
|
||||
if (pxRaw < -0.15 || pxRaw > 1.15 || pyRaw < -0.15 || pyRaw > 1.15) continue;
|
||||
// 화면좌표 대신 (스냅된)월드좌표 저장 → RAF 가 연속 포즈로 재투영.
|
||||
stationLabels.push({ title: st.title, lat: slat, lon: slon, z: sz });
|
||||
stationLabels.push({ title: sp.title, lat: slat, lon: slon, z: sz });
|
||||
}
|
||||
|
||||
// 후보 수집 (거리 dist + 월드좌표 + 지면고도 gz) → 겹침 억제용
|
||||
const poiCand: { x: number; y: number; title: string; label: string; category: string; dist: number; lat: number; lon: number; gz: number; compact: { k: string; v: string }[]; color?: string }[] = [];
|
||||
for (const poi of allPoi) {
|
||||
// 지면고도 gz: 보정값(DEM/드래그) → 최근접 선로표고(유효값) → POI 자체 z → 경로표고 앵커.
|
||||
// 표고 미상(0)인 데이터셋(제주)은 경로표고 평면에 앵커되어 궤적과 함께 보정된다.
|
||||
const clz = nearestCL(poi.lat, poi.lon)?.z;
|
||||
const gz = overridesRef.current[poi.title]?.z
|
||||
?? (clz !== undefined && clz > 0 ? clz : undefined)
|
||||
?? (poi.z > 0 ? poi.z : PATH_Z);
|
||||
// 지면고도 gz — 프레임 불변이므로 루프 밖에서 1회 계산(gzOf).
|
||||
const gz = gzOf.get(poi.title) ?? PATH_Z;
|
||||
// 가시성 판정용 poiZ: 드론높이 모드면 드론−이격거리, 아니면 gz.
|
||||
const poiZ = currentDroneHeight
|
||||
? drone.altitude - (currentParams.geoidOffset ?? 0) - currentDroneDrop
|
||||
@@ -980,7 +1182,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
// 첫 청크(현재 프레임 포함)는 동기 실행 → 토글/재계산이 '정지 중에도' 즉시 반영.
|
||||
// (idle 대기 시 정지 상태에서 갱신이 지연/누락되던 문제 해결.) 나머지는 step 내부에서 idle 로 이어감.
|
||||
step();
|
||||
}, [nearestCL]);
|
||||
}, [nearestCL, projectCL]);
|
||||
|
||||
// 모든 데이터 로드 완료 시 사전 계산 시작
|
||||
// storeFrames 의존 필수: 분할 영상 세그먼트 전환(loadSegment)으로 frames 가 교체되면
|
||||
@@ -992,11 +1194,12 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
}, [droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop, poiOverlapExclude, dronePathZ, storeFrames]);
|
||||
|
||||
// params / smoothHalf / maxPoiDist / 경로표고(표고 미상 라벨 앵커) 변경 시 사전 계산 재시작 (500ms debounce)
|
||||
// ※ storeFrames(세그먼트 전환)는 위의 즉시 effect 가 담당 — 여기 넣으면 전환마다 이중 재계산.
|
||||
useEffect(() => {
|
||||
if (!droneFramesLoaded || !geoDataLoaded || !clDataLoaded) return;
|
||||
const timer = setTimeout(() => startLabelPrecompute(params, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop), 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [params, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop, storePois, storeStructures, droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, poiOverlapExclude, dronePathZ, storeFrames]);
|
||||
}, [params, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop, storePois, storeStructures, droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, poiOverlapExclude, dronePathZ]);
|
||||
|
||||
// 현재 재생 시간 → 드론 프레임 ref 갱신
|
||||
useEffect(() => {
|
||||
@@ -1209,8 +1412,22 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
if (visibleRef.current) {
|
||||
// 가시집합만 precompute 에서 가져오고(어떤 라벨을 그릴지), 좌표는 RAF 가 연속 포즈로 직접
|
||||
// 투영 → 라인처럼 부드럽게 이동(정수프레임 보간/프레임키 의존 제거).
|
||||
const baseFrame = Math.floor(estFrame);
|
||||
const labelsA = labelMapRef.current.get(baseFrame) ?? labelMapRef.current.get(currentFrameNumRef.current);
|
||||
// 조회는 '최근접 캐시 키' 이진탐색으로 고정 — 종전의 floor 정확일치 + 폴백(4Hz 갱신 스테일 키)
|
||||
// 조합은 프레임마다 서로 다른 캐시 항목을 교대로 그려 라벨 집합이 뒤바뀌는 깜빡임을 유발했음.
|
||||
let labelsA: LabelCache | undefined;
|
||||
{
|
||||
const keys = labelKeysRef.current;
|
||||
if (keys.length) {
|
||||
let lo = 0, hi = keys.length - 1;
|
||||
while (hi - lo > 1) { const m = (lo + hi) >> 1; if (keys[m] <= estFrame) lo = m; else hi = m; }
|
||||
const ki = Math.abs(keys[hi] - estFrame) < Math.abs(estFrame - keys[lo]) ? hi : lo;
|
||||
// 채워지는 중(청크 진행)이면 인접 키로 소폭 폴백
|
||||
for (let d = 0; d <= 3 && !labelsA; d++) {
|
||||
labelsA = labelMapRef.current.get(keys[ki + d] ?? NaN) ?? labelMapRef.current.get(keys[ki - d] ?? NaN);
|
||||
}
|
||||
}
|
||||
if (!labelsA) labelsA = labelMapRef.current.get(Math.floor(estFrame)) ?? labelMapRef.current.get(currentFrameNumRef.current);
|
||||
}
|
||||
|
||||
if (labelsA) {
|
||||
const α = emaAlphaRef.current;
|
||||
@@ -1227,7 +1444,12 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'middle';
|
||||
labelsA.stationLabels.forEach((stA) => {
|
||||
const cc = toCameraCoords(dronePose, stA.lat, stA.lon, stA.z, params, worldOrigin);
|
||||
// 측점도 POI 와 동일한 높이 규칙 — 드론높이 모드면 '드론고도 − 이격거리' 평면
|
||||
// (이격거리 슬라이더가 측점 라벨에도 반영), 지면고도 모드면 측점 표고(stA.z — 경로표고 앵커 포함).
|
||||
const stZ = poiDroneHeightRef.current
|
||||
? dronePose.altitude - (params.geoidOffset ?? 0) - droneHeightDropRef.current
|
||||
: stA.z;
|
||||
const cc = toCameraCoords(dronePose, stA.lat, stA.lon, stZ, params, worldOrigin);
|
||||
if (cc.Zc < CLIP_Z) return;
|
||||
const { pxRaw, pyRaw } = pixelFromCamera(cc, params);
|
||||
const prevDst = displayedStRef.current.get(stA.title);
|
||||
@@ -1646,19 +1868,40 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
}
|
||||
}, [setPoiOverrides]);
|
||||
|
||||
// 화면표시 옵션 일괄 복귀 — DISPLAY_DEFAULTS 로 리셋(POI 보정/편집모드는 별도 버튼 유지).
|
||||
// 화면표시 옵션 일괄 복귀 — 환경설정 파일(*.display.json)이 폴더에 있으면 **그 파일 값**으로,
|
||||
// 없으면 DISPLAY_DEFAULTS 로 복원 (파일에 없는 항목도 기본값). POI 보정/편집모드는 별도 버튼 유지.
|
||||
const resetDisplayDefaults = useCallback(() => {
|
||||
setShowCenterline(DISPLAY_DEFAULTS.showCenterline);
|
||||
setShowDronePath(DISPLAY_DEFAULTS.showDronePath);
|
||||
setDronePathZ(DISPLAY_DEFAULTS.dronePathZ);
|
||||
setDronePathAlpha(DISPLAY_DEFAULTS.dronePathAlpha);
|
||||
setSmoothHalf(DISPLAY_DEFAULTS.smoothHalf);
|
||||
setEmaAlpha(DISPLAY_DEFAULTS.emaAlpha);
|
||||
setSmoothMinAlpha(DISPLAY_DEFAULTS.smoothMinAlpha);
|
||||
setSmoothSpeedRef(DISPLAY_DEFAULTS.smoothSpeedRef);
|
||||
setMaxPoiRange(DISPLAY_DEFAULTS.maxPoiRange);
|
||||
setPoiDroneHeight(DISPLAY_DEFAULTS.poiDroneHeight);
|
||||
setDroneHeightDrop(DISPLAY_DEFAULTS.droneHeightDrop);
|
||||
const d = (useGeoStore.getState().displayJson ?? {}) as Record<string, unknown>;
|
||||
const num = (k: string, def: number): number =>
|
||||
typeof d[k] === 'number' && isFinite(d[k] as number) ? (d[k] as number) : def;
|
||||
const bool = (k: string, def: boolean): boolean =>
|
||||
typeof d[k] === 'boolean' ? (d[k] as boolean) : def;
|
||||
setShowCenterline(bool('showCenterline', DISPLAY_DEFAULTS.showCenterline));
|
||||
setShowDronePath(bool('showDronePath', DISPLAY_DEFAULTS.showDronePath));
|
||||
setDronePathZ(num('dronePathZ', DISPLAY_DEFAULTS.dronePathZ));
|
||||
setDronePathAlpha(num('dronePathAlpha', DISPLAY_DEFAULTS.dronePathAlpha));
|
||||
setSmoothHalf(num('smoothHalf', DISPLAY_DEFAULTS.smoothHalf));
|
||||
setEmaAlpha(num('emaAlpha', DISPLAY_DEFAULTS.emaAlpha));
|
||||
setSmoothMinAlpha(num('smoothMinAlpha', DISPLAY_DEFAULTS.smoothMinAlpha));
|
||||
setSmoothSpeedRef(num('smoothSpeedRef', DISPLAY_DEFAULTS.smoothSpeedRef));
|
||||
setMaxPoiRange(num('maxPoiRange', DISPLAY_DEFAULTS.maxPoiRange));
|
||||
setPoiDroneHeight(bool('poiDroneHeight', DISPLAY_DEFAULTS.poiDroneHeight));
|
||||
setDroneHeightDrop(num('droneHeightDrop', DISPLAY_DEFAULTS.droneHeightDrop));
|
||||
}, []);
|
||||
|
||||
// 카메라 파라미터 초기화 — 환경설정 파일(*.camera.json)이 폴더에 있으면 **그 파일 값**으로,
|
||||
// 없으면 DEFAULT_CAMERA_PARAMS 로 복원 (파일에 없는 항목도 기본값).
|
||||
const resetCameraParams = useCallback(() => {
|
||||
const cam = useGeoStore.getState().cameraJson;
|
||||
const next = { ...DEFAULT_CAMERA_PARAMS };
|
||||
if (cam) {
|
||||
for (const [k, v] of Object.entries(cam)) {
|
||||
if (k in next && typeof v === 'number' && isFinite(v)) {
|
||||
(next as unknown as Record<string, number>)[k] = v;
|
||||
}
|
||||
}
|
||||
}
|
||||
setParams(next);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
@@ -1732,15 +1975,16 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
|
||||
{showPanel && (
|
||||
<div className="absolute right-2 z-30 flex flex-col-reverse items-end gap-2" style={{ bottom: (barHeight || 130) + 8 }}>
|
||||
{/* 버튼 순서 = 패널 위치와 일치: 카메라(왼쪽 패널) → 화면표시(오른쪽 패널) */}
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => setShowDisplay(v => !v)}
|
||||
className={`text-xs whitespace-nowrap px-2 py-1 rounded border ${showDisplay ? 'bg-amber-400 border-amber-300 text-black' : 'bg-black/70 hover:bg-black/90 text-gray-300 border-gray-600'}`}>
|
||||
{showDisplay ? '▲ 화면표시 옵션' : '▼ 화면표시 옵션'}
|
||||
</button>
|
||||
<button onClick={() => setShowControls(v => !v)}
|
||||
className={`text-xs whitespace-nowrap px-2 py-1 rounded border ${showControls ? 'bg-amber-400 border-amber-300 text-black' : 'bg-black/70 hover:bg-black/90 text-gray-300 border-gray-600'}`}>
|
||||
{showControls ? '▲ 카메라 파라미터' : '▼ 카메라 파라미터'}
|
||||
</button>
|
||||
<button onClick={() => setShowDisplay(v => !v)}
|
||||
className={`text-xs whitespace-nowrap px-2 py-1 rounded border ${showDisplay ? 'bg-amber-400 border-amber-300 text-black' : 'bg-black/70 hover:bg-black/90 text-gray-300 border-gray-600'}`}>
|
||||
{showDisplay ? '▲ 화면표시 옵션' : '▼ 화면표시 옵션'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 두 패널을 가로로 나란히(우→좌) 펼침 — 둘 다 열어도 세로로 안 쌓여 화면 위로 안 넘침. */}
|
||||
@@ -1748,7 +1992,16 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
{/* ── 화면표시 옵션 (카메라 외 모든 표시 설정) ── */}
|
||||
{showDisplay && (
|
||||
<div className="bg-black/90 border border-sky-700 rounded p-3 text-white w-72 select-none max-h-[80vh] overflow-y-auto shadow-xl">
|
||||
<div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-b border-gray-700 pb-2 mb-2">표시 토글</div>
|
||||
<div className="flex items-center justify-between border-b border-gray-700 pb-2 mb-2">
|
||||
<span className="text-[10px] text-gray-500 uppercase tracking-wider">표시 토글</span>
|
||||
{/* 화면표시 옵션 전체를 display.json 으로 PC 저장 — 폴더에 넣어두면 자동 적용 */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={saveDisplayToPc}
|
||||
className={`text-[10px] px-1.5 py-0.5 rounded border ${dispSaveState === 'ok' ? 'border-emerald-400 bg-emerald-700/60 text-emerald-100' : 'border-gray-600 bg-gray-700 hover:bg-gray-600 text-gray-200'}`}
|
||||
title="현재 화면표시 옵션 전체(토글/슬라이더/시설등급 등)를 display.json 으로 PC에 다운로드 — 영상 폴더에 넣어두면 폴더 선택 시 자동 적용"
|
||||
>{dispSaveState === 'ok' ? '저장됨 ✓' : 'PC에 저장'}</button>
|
||||
</div>
|
||||
{/* 나침반 타입 — 눈금(analog) / 지도(OSM, 노스업) 선택 */}
|
||||
<div className="flex items-center gap-1.5 text-[11px] mb-3">
|
||||
<span className="text-gray-400 w-12 shrink-0 text-right">나침반</span>
|
||||
@@ -1862,7 +2115,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
</div>
|
||||
<div className="border-t border-gray-700 pt-2 mt-3 flex items-center justify-end">
|
||||
<button onClick={resetDisplayDefaults}
|
||||
title="화면표시 옵션을 기본값으로 되돌립니다 (POI 보정은 별도)"
|
||||
title="환경설정 파일(*.display.json)이 폴더에 있으면 그 값으로, 없으면 기본값으로 복원 (POI 보정은 별도)"
|
||||
className="text-[11px] text-gray-400 hover:text-white border border-gray-600 hover:border-gray-400 px-2 py-0.5 rounded transition-colors">
|
||||
기본값
|
||||
</button>
|
||||
@@ -1873,7 +2126,16 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
{/* ── 카메라 파라미터 (드론 카메라 관련만) ── */}
|
||||
{showControls && (
|
||||
<div className="bg-black/90 border border-gray-600 rounded p-3 text-white w-72 select-none max-h-[80vh] overflow-y-auto shadow-xl">
|
||||
<div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-b border-gray-700 pb-2 mb-2">자세 보정 오프셋<span className="ml-1 text-gray-600">(SRT + offset)</span></div>
|
||||
{/* 헤더 + 카메라 파라미터 PC 저장 — 화면표시 옵션 패널과 동일 위치(우상단)에 배치 */}
|
||||
<div className="flex items-center justify-between border-b border-gray-700 pb-2 mb-2">
|
||||
<span className="text-[10px] text-gray-500 uppercase tracking-wider">자세 보정 오프셋<span className="ml-1 text-gray-600">(SRT + offset)</span></span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={saveCameraToPc}
|
||||
className={`text-[10px] px-1.5 py-0.5 rounded border ${camSaveState === 'ok' ? 'border-emerald-400 bg-emerald-700/60 text-emerald-100' : 'border-gray-600 bg-gray-700 hover:bg-gray-600 text-gray-200'}`}
|
||||
title="현재 카메라 파라미터 전체(Yaw±/f/센서 등)를 camera.json 으로 PC에 다운로드 — 영상 폴더에 넣어두면 폴더 선택 시 자동 적용"
|
||||
>{camSaveState === 'ok' ? '저장됨 ✓' : 'PC에 저장'}</button>
|
||||
</div>
|
||||
<div className="space-y-2 mb-3">
|
||||
<ParamRow label="Yaw ±" value={params.yawOffset} min={-180} max={180} step={0.1} unit="°" decimals={1} onChange={v => setParam('yawOffset', v)} />
|
||||
{/* Yaw 자동 추정(2단계 보정의 1단계) — 대략 맞춘 뒤 'Yaw 보정' 드래그 모드로 마무리 */}
|
||||
@@ -1891,33 +2153,25 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
<ParamRow label="off X" value={params.offX} min={-500} max={500} step={0.1} unit="m" decimals={1} onChange={v => setParam('offX', v)} />
|
||||
<ParamRow label="off Y" value={params.offY} min={-500} max={500} step={0.1} unit="m" decimals={1} onChange={v => setParam('offY', v)} />
|
||||
<ParamRow label="off Z" value={params.offZ} min={-200} max={200} step={0.1} unit="m" decimals={1} onChange={v => setParam('offZ', v)} />
|
||||
<ParamRow label="지오이드" value={params.geoidOffset} min={0} max={50} step={0.1} unit="m" decimals={1} onChange={v => setParam('geoidOffset', v)} />
|
||||
<ParamRow label="지오이드" value={params.geoidOffset} min={0} max={200} step={0.1} unit="m" decimals={1} onChange={v => setParam('geoidOffset', v)} />
|
||||
<div className="text-[10px] text-gray-600 text-right">정표고→타원체고 (대전≈25.8)</div>
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-t border-gray-700 pt-2">내부표정 (초점·주점·센서)</div>
|
||||
{/* 영상(djmd) 자동 감지 정보 + 카메라값 서버 저장('<영상 base>.camera.json' — 재로드 시 자동 적용) */}
|
||||
{/* 영상(djmd) 자동 감지 정보 — PC 저장은 패널 헤더 버튼 하나로 통일(중복 제거) */}
|
||||
<div className="flex items-center justify-between gap-1 mb-1.5 text-[10px] text-gray-400">
|
||||
<span className="truncate" title="영상 메타데이터(djmd)에서 감지된 카메라 정보">
|
||||
📷 {storeCameraInfo
|
||||
? `${storeCameraInfo.model}${storeCameraInfo.focalLen35 ? ` · ${storeCameraInfo.focalLen35}mm` : ''}${storeCameraInfo.fps ? ` · ${storeCameraInfo.fps}fps` : ''}`
|
||||
: '카메라 미감지'}
|
||||
</span>
|
||||
<div className="flex gap-1 shrink-0">
|
||||
{storeCameraInfo?.focalLen35 !== undefined && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setParams(p => ({ ...p, focalLen: storeCameraInfo!.focalLen35! }))}
|
||||
className="px-1.5 py-0.5 rounded border border-gray-600 bg-gray-700 hover:bg-gray-600 text-gray-200"
|
||||
title={`감지된 초점거리 ${storeCameraInfo!.focalLen35}mm 를 f 에 적용`}
|
||||
>적용</button>
|
||||
)}
|
||||
{storeCameraInfo?.focalLen35 !== undefined && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={saveCameraToPc}
|
||||
className={`px-1.5 py-0.5 rounded border ${camSaveState === 'ok' ? 'border-emerald-400 bg-emerald-700/60 text-emerald-100' : 'border-gray-600 bg-gray-700 hover:bg-gray-600 text-gray-200'}`}
|
||||
title="현재 카메라 파라미터(Yaw± 보정 포함 전체)를 <영상이름>.camera.json 으로 PC에 다운로드 — 영상 폴더에 넣어두면 폴더 선택 시 자동 적용"
|
||||
>{camSaveState === 'ok' ? '저장됨 ✓' : 'PC에 저장'}</button>
|
||||
</div>
|
||||
onClick={() => setParams(p => ({ ...p, focalLen: storeCameraInfo!.focalLen35! }))}
|
||||
className="shrink-0 px-1.5 py-0.5 rounded border border-gray-600 bg-gray-700 hover:bg-gray-600 text-gray-200"
|
||||
title={`감지된 초점거리 ${storeCameraInfo!.focalLen35}mm 를 f 에 적용`}
|
||||
>적용</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2 mb-3">
|
||||
<ParamRow label="f" value={params.focalLen} min={10} max={100} step={0.1} unit="mm" decimals={1} onChange={v => setParam('focalLen', v)} />
|
||||
@@ -1940,7 +2194,8 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
</div>
|
||||
)}
|
||||
<div className="border-t border-gray-700 pt-2 flex items-center justify-end">
|
||||
<button onClick={() => setParams({ ...DEFAULT_CAMERA_PARAMS })}
|
||||
<button onClick={resetCameraParams}
|
||||
title="환경설정 파일(*.camera.json)이 폴더에 있으면 그 값으로, 없으면 앱 기본값으로 복원"
|
||||
className="text-[11px] text-gray-400 hover:text-white border border-gray-600 hover:border-gray-400 px-2 py-0.5 rounded transition-colors">
|
||||
초기화
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user