diff --git a/public/app.js b/public/app.js index e96eee1..4bef9c4 100644 --- a/public/app.js +++ b/public/app.js @@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', () => { // ================================================= - // 0. 로그아웃 로직 (추가됨) + // 0. 로그아웃 로직 // ================================================= const logoutBtn = document.getElementById('logout-button'); if (logoutBtn) { @@ -338,6 +338,7 @@ document.addEventListener('DOMContentLoaded', () => { const data = event.data; if (typeof data === "string") { try { + console.log("-----" + data); const meta = JSON.parse(data); if (meta.type === "frame") { lastFrameMeta = meta; @@ -372,14 +373,41 @@ document.addEventListener('DOMContentLoaded', () => { }; } + /** + * [수정됨] 상세 탐지 정보 출력 함수 + * 입력 예: {"type": "det", "ch": 0, "seq": 16939, "ts_us": 833298660, "items": [{"x1": ..., "tag": 1, ...}]} + */ function showDetections(meta) { - bboxContainerEl.innerHTML = ""; + bboxContainerEl.innerHTML = ""; // 기존 bbox 초기화 (필요시 여기에 박스 그리기 로직 추가 가능) + + // 1. 메타 정보 라인 구성 (ch, seq, ts_us) + const ch = meta.ch !== undefined ? meta.ch : '-'; + const seq = meta.seq !== undefined ? meta.seq : '-'; + const ts = meta.ts_us !== undefined ? meta.ts_us : '-'; + + let outputLines = []; + outputLines.push(`[META] CH:${ch} | SEQ:${seq} | TS:${ts}`); + + // 2. 탐지 객체 리스트 구성 const items = meta.items || []; - let lines = []; - items.forEach((it, i) => { - lines.push(`#${i} cls=${it.cls} score=${it.conf || 0}`); - }); - detListEl.textContent = lines.join("\n"); + if (items.length === 0) { + outputLines.push("No detections"); + } else { + items.forEach((it, i) => { + // 좌표값 소수점 2자리로 반올림 + const x1 = it.x1 ? it.x1.toFixed(2) : 0; + const y1 = it.y1 ? it.y1.toFixed(2) : 0; + const x2 = it.x2 ? it.x2.toFixed(2) : 0; + const y2 = it.y2 ? it.y2.toFixed(2) : 0; + const tag = it.tag !== undefined ? it.tag : '-'; + const cls = it.cls !== undefined ? it.cls : '-'; + + outputLines.push(`#${i} | Class:${cls} | Tag:${tag} | Box:[${x1}, ${y1}, ${x2}, ${y2}]`); + }); + } + + // 3. 화면 출력 + detListEl.textContent = outputLines.join("\n"); } function updateBboxContainerPosition() {