byun/esp32s3_CANFD_logger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

디자인 통일

Browse Source
This commit is contained in:
byun
2026-04-30 19:00:06 +00:00
parent 8a66171899
commit e0650bdbf8
6 changed files with 1266 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
index.h
View File

@@ -7,9 +7,13 @@ const char index_html[] PROGMEM = R"rawliteral(
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',sans-serif;background:#0d1117;color:#c9d1d9;font-size:13px}
nav{background:#161b22;border-bottom:1px solid #30363d;padding:8px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
nav a{color:#58a6ff;text-decoration:none;padding:4px 10px;border-radius:6px;font-size:12px}
nav a:hover{background:#21262d} nav a.active{background:#1f6feb;color:#fff}
nav{background:#161b22;border-bottom:1px solid #30363d;display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav::-webkit-scrollbar{display:none}
nav .nav-title{color:#43cea2;font-weight:700;font-size:1.0em;padding:10px 14px;white-space:nowrap;border-bottom:2px solid transparent}
nav a{display:inline-flex;align-items:center;padding:10px 13px;text-decoration:none;color:#8b949e;font-size:.78em;font-weight:500;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
nav a:hover{color:#e6edf3}
nav a.active{color:#43cea2;border-bottom-color:#43cea2}
nav .nav-right{margin-left:auto;display:flex;align-items:center;padding:0 14px}
.title{color:#e6edf3;font-weight:700;font-size:15px;margin-right:8px}
.container{padding:12px;display:grid;gap:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@@ -51,17 +55,18 @@ input[type=text]{background:#21262d;border:1px solid #30363d;color:#c9d1d9;paddi
</style>
</head><body>
<nav>
<span class="title">⚡ CANFD Logger</span>
<span class="nav-title">⚡ CANFD Logger</span>
<a href="/" class="active">대시보드</a>
<a href="/transmit">송신</a>
<a href="/graph">그래프</a>
<a href="/graph-view">그래프 뷰어</a>
<a href="/settings">설정</a>
<span style="margin-left:auto;display:flex;align-items:center">
<span class="nav-right">
<span class="ws-status ws-err" id="wsLed"></span>
<span id="wsLabel" style="font-size:11px;color:#8b949e">연결 중...</span>
</span>
</nav>
<div class="container">
<!-- 상태 카드 -->
<div class="grid3">
@@ -103,7 +108,7 @@ input[type=text]{background:#21262d;border:1px solid #30363d;color:#c9d1d9;paddi
</div>
</div>
</div>
<!-- 로깅 제어 -->
<div class="card">
<h3>로깅 제어</h3>
@@ -120,7 +125,7 @@ input[type=text]{background:#21262d;border:1px solid #30363d;color:#c9d1d9;paddi
</div>
<div id="logInfo" style="font-size:11px;color:#8b949e;margin-top:4px"></div>
</div>
<!-- 메시지 모니터 -->
<div class="card">
<h3>CAN FD 메시지 모니터 (최근 30개 ID)</h3>
@@ -133,7 +138,7 @@ input[type=text]{background:#21262d;border:1px solid #30363d;color:#c9d1d9;paddi
</table>
</div>
</div>
<!-- 파일 목록 -->
<div class="card" id="fileCard" style="display:none">
<h3>SD 파일 목록</h3>
@@ -145,12 +150,12 @@ input[type=text]{background:#21262d;border:1px solid #30363d;color:#c9d1d9;paddi
</div>
</div>
</div>
<script>
let ws, reconnTimer;
function fmtBytes(b){if(b<1024)return b+'B';if(b<1048576)return(b/1024).toFixed(1)+'KB';return(b/1048576).toFixed(2)+'MB';}
function fmtNum(n){return n>=1000000?(n/1000000).toFixed(2)+'M':n>=1000?(n/1000).toFixed(1)+'K':n;}
function connect(){
ws=new WebSocket('ws://'+location.hostname+':81/');
ws.onopen=()=>{
@@ -167,7 +172,7 @@ function connect(){
try{ handleMsg(JSON.parse(e.data)); }catch(ex){}
};
}
function handleMsg(d){
if(d.type==='update'){
// 속도/모드
@@ -215,7 +220,7 @@ function handleMsg(d){
}
else if(d.type==='files') renderFiles(d.files||[]);
}
let msgMap={};
function updateTable(msgs){
msgs.forEach(m=>{msgMap[m.id]=m;});
@@ -233,7 +238,7 @@ function updateTable(msgs){
});
document.getElementById('msgBody').innerHTML=html;
}
function renderFiles(files){
let card=document.getElementById('fileCard');
card.style.display='block';
@@ -250,7 +255,7 @@ function renderFiles(files){
});
document.getElementById('fileBody').innerHTML=html;
}
function startLog(){ws.send(JSON.stringify({cmd:'startLogging',format:document.getElementById('fmtSel').value}));}
function stopLog(){ws.send(JSON.stringify({cmd:'stopLogging'}));}
function getFiles(){ws.send(JSON.stringify({cmd:'getFiles'}));}