diff --git a/public/app.js b/public/app.js
index 3572f51..9c2d75c 100644
--- a/public/app.js
+++ b/public/app.js
@@ -15,7 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
// =================================================
- // 1. 탭 전환 로직
+ // 1. 탭 전환 로직 (상단 메인 탭)
// =================================================
const tabVideo = document.getElementById('tab-video');
const tabModels = document.getElementById('tab-models');
@@ -41,6 +41,54 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
+ // =================================================
+ // [신규] 오른쪽 사이드바 (Summary / Log) 탭 로직
+ // =================================================
+ const btnSummary = document.getElementById('btn-summary');
+ const btnLog = document.getElementById('btn-log');
+ const summaryListEl = document.getElementById('summary-list');
+ const logListEl = document.getElementById('log-list');
+
+ if (btnSummary && btnLog) {
+ btnSummary.addEventListener('click', () => {
+ btnSummary.classList.add('active');
+ btnLog.classList.remove('active');
+ if(summaryListEl) summaryListEl.classList.remove('hidden');
+ if(logListEl) logListEl.classList.add('hidden');
+ });
+
+ btnLog.addEventListener('click', () => {
+ btnLog.classList.add('active');
+ btnSummary.classList.remove('active');
+ if(summaryListEl) summaryListEl.classList.add('hidden');
+ if(logListEl) logListEl.classList.remove('hidden');
+ });
+ }
+
+ // 로그 업데이트 함수 (최신 50개 유지)
+ function updateLogPanel(textData) {
+ if (!logListEl) return;
+
+ const now = new Date();
+ const timeStr = now.toTimeString().split(' ')[0]; // HH:MM:SS
+
+ const row = document.createElement('div');
+ row.className = 'log-entry';
+
+ // JSON 문자열이 너무 길 수 있으므로 적절히 자르거나 그대로 표시
+ // 가독성을 위해 시간 + 데이터 표시
+ row.innerHTML = `[${timeStr}] ${textData}`;
+
+ // 최신 로그가 위로 오게 하거나 아래로 오게 할 수 있음 (여기선 위로 쌓음)
+ logListEl.prepend(row);
+
+ // 메모리 관리를 위해 50개 넘어가면 삭제
+ if (logListEl.children.length > 50) {
+ logListEl.removeChild(logListEl.lastChild);
+ }
+ }
+
+
// =================================================
// [신규] Mission UI 로직
// =================================================
@@ -81,7 +129,7 @@ document.addEventListener('DOMContentLoaded', () => {
.catch(e => console.error(e));
}
-const filterBar = document.getElementById('filter-bar');
+ const filterBar = document.getElementById('filter-bar');
function updateFilterBar(modelCode) {
if(!filterBar) return;
@@ -146,14 +194,11 @@ const filterBar = document.getElementById('filter-bar');
zoomInput.id = 'zoom-toggle';
zoomInput.checked = false; // 기본값: 선택 안 됨
- // 줌 기능 이벤트 리스너 (필요 시 로직 구현)
zoomInput.addEventListener('change', (e) => {
if(e.target.checked) {
console.log("Zoom In Activated");
- // 여기에 줌 확대 로직 추가
} else {
console.log("Zoom In Deactivated");
- // 여기에 줌 해제 로직 추가
}
});
@@ -162,13 +207,11 @@ const filterBar = document.getElementById('filter-bar');
filterBar.appendChild(zoomLabel);
}
- // 초기 필터 상태 반영
updateActiveFilters(classInputs);
}
function updateActiveFilters(classInputs) {
activeClassFilters.clear();
- // 체크된 항목들만 Set에 추가
classInputs.forEach(inp => {
if(inp.checked) activeClassFilters.add(inp.dataset.cls);
});
@@ -200,7 +243,7 @@ const filterBar = document.getElementById('filter-bar');
const fpsDisplayEl = document.getElementById("fps-display");
const resolutionEl = document.getElementById("resolution-display");
const connMsgEl = document.getElementById("connection-msg");
- const summaryListEl = document.getElementById("summary-list");
+ // summaryListEl은 상단에서 정의됨
let ctx = null;
if (canvasEl) ctx = canvasEl.getContext('2d');
@@ -222,6 +265,9 @@ const filterBar = document.getElementById('filter-bar');
ws.onmessage = (event) => {
const data = event.data;
if (typeof data === "string") {
+ // [Log 기능 연결] 문자열(JSON) 데이터 수신 시 로그 패널에 출력
+ updateLogPanel(data);
+
try {
const meta = JSON.parse(data);
if (meta.type === "frame") {
@@ -274,7 +320,7 @@ const filterBar = document.getElementById('filter-bar');
displayClassName = LABEL_MAP[tagId].classes[clsId];
}
- // [수정] 필터링 로직 강화: Set에 없으면 절대 그리지 않음 (All 체크 로직과 연동)
+ // 필터링
if (!activeClassFilters.has(displayClassName)) {
return;
}
@@ -499,6 +545,4 @@ const filterBar = document.getElementById('filter-bar');
}
loadModelList();
-});
-
-//2025-12-04 15:41
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/public/dashboard.html b/public/dashboard.html
index 23ff45d..3697658 100644
--- a/public/dashboard.html
+++ b/public/dashboard.html
@@ -96,8 +96,8 @@
@@ -214,6 +215,4 @@
-