byun/250928_esp32_spi_sdcard_ads8688_mcp.03.wifi_can.ESP32_CAN_Logger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

전압상태, 큐상태 모니터링 추가, 파일 생성명 시간 수정, setting창 추가(ssid,pw,timezone),파일명 데이터크기 보이기 디자인 변경

Browse Source
This commit is contained in:
byun
2025-11-05 18:02:22 +00:00
parent 82b5234b9e
commit 41e8d18072
3 changed files with 1340 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

399
index.h
View File

@@ -53,6 +53,133 @@ const char index_html[] PROGMEM = R"rawliteral(
.nav a.active { background: #3498db; }
.content { padding: 15px; }
/* 전력 경고 배너 */
.power-warning {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
color: white;
padding: 12px 20px;
border-radius: 8px;
margin-bottom: 15px;
display: none;
align-items: center;
gap: 10px;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
animation: pulse 2s ease-in-out infinite;
}
.power-warning.show { display: flex; }
.power-warning-icon { font-size: 1.5em; }
.power-warning-text { flex: 1; font-weight: 600; }
.power-voltage {
font-family: 'Courier New', monospace;
font-size: 1.2em;
font-weight: 700;
background: rgba(255,255,255,0.2);
padding: 5px 12px;
border-radius: 5px;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.85; }
}
/* 전력 상태 표시 */
.power-status {
background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
color: white;
padding: 10px 15px;
border-radius: 8px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 3px 10px rgba(86, 171, 47, 0.3);
flex-wrap: wrap;
gap: 10px;
}
.power-status.low {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
}
.power-status-label {
font-size: 0.85em;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.power-status-values {
display: flex;
gap: 15px;
align-items: center;
flex-wrap: wrap;
}
.power-status-item {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.power-status-item-label {
font-size: 0.7em;
opacity: 0.9;
}
.power-status-value {
font-family: 'Courier New', monospace;
font-size: 1.2em;
font-weight: 700;
}
/* 큐 상태 표시 */
.queue-status {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 10px 15px;
border-radius: 8px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
}
.queue-status.warning {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
box-shadow: 0 3px 10px rgba(240, 147, 251, 0.3);
}
.queue-status.critical {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
animation: pulse 2s ease-in-out infinite;
}
.queue-info {
display: flex;
align-items: center;
gap: 10px;
}
.queue-bar-container {
flex: 1;
min-width: 150px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
overflow: hidden;
position: relative;
}
.queue-bar {
height: 100%;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
transition: width 0.3s ease;
}
.queue-text {
position: absolute;
width: 100%;
text-align: center;
line-height: 20px;
font-size: 0.75em;
font-weight: 700;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.time-sync-banner {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
@@ -218,15 +345,34 @@ const char index_html[] PROGMEM = R"rawliteral(
justify-content: space-between;
align-items: center;
transition: all 0.3s;
gap: 12px;
flex-wrap: wrap;
gap: 10px;
}
.file-item:hover { transform: translateX(5px); box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.file-name { font-weight: 600; color: #333; font-size: 0.9em; }
.file-size { color: #666; margin-left: 10px; font-size: 0.85em; }
.download-btn {
padding: 6px 12px;
.file-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.file-name {
font-weight: 600;
color: #333;
font-size: 0.9em;
word-break: break-all;
}
.file-size {
color: #666;
font-size: 0.85em;
font-weight: 600;
}
.download-btn {
padding: 8px 16px;
font-size: 0.85em;
white-space: nowrap;
flex-shrink: 0;
min-width: 100px;
}
@media (max-width: 768px) {
@@ -253,6 +399,30 @@ const char index_html[] PROGMEM = R"rawliteral(
.time-value {
font-size: 1em;
}
/* 파일 목록 모바일 최적화 */
.file-item {
padding: 10px;
gap: 10px;
align-items: flex-start;
}
.file-info {
width: 100%;
margin-bottom: 5px;
}
.file-name {
font-size: 0.85em;
}
.file-size {
font-size: 0.8em;
display: block;
margin-top: 3px;
}
.download-btn {
width: 100%;
padding: 10px;
min-width: auto;
}
}
</style>
</head>
@@ -267,9 +437,42 @@ const char index_html[] PROGMEM = R"rawliteral(
<a href="/" class="active">Monitor</a>
<a href="/transmit">Transmit</a>
<a href="/graph">Graph</a>
<a href="/settings">⚙️ Settings</a>
</div>
<div class="content">
<!-- 큐 상태 표시 -->
<div class="queue-status" id="queue-status">
<div class="queue-info">
<span style="font-size: 1.3em;">📊</span>
<span style="font-weight: 600; font-size: 0.85em;">CAN Queue</span>
</div>
<div style="flex: 1; min-width: 200px;">
<div class="queue-bar-container">
<div class="queue-bar" id="queue-bar" style="width: 0%"></div>
<div class="queue-text" id="queue-text">0/1000</div>
</div>
</div>
</div>
<!-- 전력 상태 표시 -->
<div class="power-status" id="power-status">
<div class="power-status-label">
<span id="power-icon">⚡</span>
<span id="power-text">전원 상태</span>
</div>
<div class="power-status-values">
<div class="power-status-item">
<span class="power-status-item-label">현재</span>
<span class="power-status-value" id="power-value">--V</span>
</div>
<div class="power-status-item">
<span class="power-status-item-label">최소(1s)</span>
<span class="power-status-value" id="power-min-value">--V</span>
</div>
</div>
</div>
<div class="time-sync-banner">
<div class="time-sync-info">
<div class="time-info-item">
@@ -357,127 +560,85 @@ const char index_html[] PROGMEM = R"rawliteral(
<script>
let ws;
let reconnectInterval;
let canMessages = {};
let messageOrder = [];
let lastMessageData = {};
const speedNames = {0: '125K', 1: '250K', 2: '500K', 3: '1M'};
const speedNames = ['125 Kbps', '250 Kbps', '500 Kbps', '1 Mbps'];
// 현재 시간 업데이트
function updateCurrentTime() {
const now = new Date();
const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0') + ':' +
now.getSeconds().toString().padStart(2, '0');
const timeStr = now.toLocaleTimeString('ko-KR', {hour12: false});
document.getElementById('current-time').textContent = timeStr;
}
setInterval(updateCurrentTime, 1000);
updateCurrentTime();
// 시간 동기화 함수
function syncTime() {
if (ws && ws.readyState === WebSocket.OPEN) {
const timestamp = Date.now();
ws.send(JSON.stringify({
cmd: 'syncTime',
timestamp: timestamp
}));
document.getElementById('sync-status').textContent = '동기화 중...';
setTimeout(() => {
const now = new Date();
const dateStr = now.getFullYear() + '-' +
(now.getMonth() + 1).toString().padStart(2, '0') + '-' +
now.getDate().toString().padStart(2, '0') + ' ' +
now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0') + ':' +
now.getSeconds().toString().padStart(2, '0');
document.getElementById('sync-status').textContent = '✓ ' + dateStr;
}, 200);
console.log('시간 동기화 전송:', new Date(timestamp).toLocaleString());
} else {
alert('WebSocket이 연결되지 않았습니다!');
}
}
function saveCanSpeed() {
const speed = document.getElementById('can-speed').value;
try {
window.localStorage.setItem('canSpeed', speed);
console.log('Saved CAN speed:', speedNames[speed]);
} catch(e) {
console.error('Failed to save CAN speed:', e);
}
localStorage.setItem('canSpeed', speed);
}
function loadCanSpeed() {
try {
const savedSpeed = window.localStorage.getItem('canSpeed');
if (savedSpeed !== null) {
document.getElementById('can-speed').value = savedSpeed;
console.log('Restored CAN speed:', speedNames[savedSpeed]);
const statusSpan = document.getElementById('speed-status');
if (statusSpan) {
statusSpan.textContent = '(Restored: ' + speedNames[savedSpeed] + ')';
setTimeout(() => {
statusSpan.textContent = '';
}, 3000);
}
}
} catch(e) {
console.error('Failed to load CAN speed:', e);
const savedSpeed = localStorage.getItem('canSpeed');
if (savedSpeed !== null) {
document.getElementById('can-speed').value = savedSpeed;
}
}
function syncTime() {
const now = new Date();
const timeData = {
cmd: 'syncTime',
year: now.getFullYear(),
month: now.getMonth() + 1,
day: now.getDate(),
hour: now.getHours(),
minute: now.getMinutes(),
second: now.getSeconds()
};
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(timeData));
console.log('Time sync command sent:', timeData);
}
}
function initWebSocket() {
ws = new WebSocket('ws://' + window.location.hostname + ':81');
ws = new WebSocket('ws://' + window.location.hostname + ':81/');
ws.onopen = function() {
console.log('WebSocket connected');
clearInterval(reconnectInterval);
setTimeout(() => { refreshFiles(); }, 500);
// 연결 직후 자동 시간 동기화
setTimeout(() => {
syncTime();
console.log('자동 시간 동기화 실행');
}, 1000);
document.getElementById('sync-status').textContent = '연결됨';
document.getElementById('sync-status').style.color = '#38ef7d';
};
ws.onclose = function() {
console.log('WebSocket disconnected');
reconnectInterval = setInterval(initWebSocket, 3000);
document.getElementById('sync-status').textContent = '연결 끊김';
document.getElementById('sync-status').style.color = '#f45c43';
setTimeout(initWebSocket, 3000);
};
ws.onerror = function(error) {
console.error('WebSocket error:', error);
};
ws.onmessage = function(event) {
const data = JSON.parse(event.data);
if (data.type === 'status') {
updateStatus(data);
} else if (data.type === 'can') {
addCanMessage(data);
} else if (data.type === 'canBatch') {
updateCanBatch(data.messages);
} else if (data.type === 'files') {
if (data.error) {
document.getElementById('file-list').innerHTML =
'<p style="text-align: center; color: #e74c3c; font-size: 0.9em;">Error: ' + data.error + '</p>';
} else {
try {
const data = JSON.parse(event.data);
if (data.type === 'status') {
updateStatus(data);
} else if (data.type === 'canMessage') {
addCanMessage(data);
updateCanTable();
} else if (data.type === 'canBatch') {
updateCanBatch(data.messages);
} else if (data.type === 'files') {
updateFileList(data.files);
}
} else if (data.type === 'timeSyncStatus') {
if (data.synchronized) {
document.getElementById('sync-count').textContent = data.syncCount;
const card = document.getElementById('time-sync-card');
card.classList.add('status-on');
card.classList.remove('status-off');
}
} catch (e) {
console.error('Parse error:', e);
}
};
}
@@ -485,8 +646,8 @@ const char index_html[] PROGMEM = R"rawliteral(
function updateStatus(data) {
const loggingCard = document.getElementById('logging-status');
const sdCard = document.getElementById('sd-status');
const fileCard = document.getElementById('file-status');
const timeSyncCard = document.getElementById('time-sync-card');
const fileCard = document.getElementById('file-status');
if (data.logging) {
loggingCard.classList.add('status-on');
@@ -531,6 +692,50 @@ const char index_html[] PROGMEM = R"rawliteral(
document.getElementById('msg-count').textContent = data.msgCount.toLocaleString();
document.getElementById('msg-speed').textContent = data.msgSpeed + '/s';
// 큐 상태 업데이트
if (data.queueUsed !== undefined && data.queueSize !== undefined) {
const queueStatus = document.getElementById('queue-status');
const queueBar = document.getElementById('queue-bar');
const queueText = document.getElementById('queue-text');
const queuePercent = (data.queueUsed / data.queueSize) * 100;
queueBar.style.width = queuePercent + '%';
queueText.textContent = data.queueUsed + '/' + data.queueSize;
// 큐 상태에 따른 색상 변경
queueStatus.classList.remove('warning', 'critical');
if (queuePercent >= 90) {
queueStatus.classList.add('critical');
} else if (queuePercent >= 70) {
queueStatus.classList.add('warning');
}
}
// 전력 상태 업데이트
if (data.voltage !== undefined) {
const powerStatus = document.getElementById('power-status');
const powerValue = document.getElementById('power-value');
const powerMinValue = document.getElementById('power-min-value');
const powerIcon = document.getElementById('power-icon');
const powerText = document.getElementById('power-text');
powerValue.textContent = data.voltage.toFixed(2) + 'V';
if (data.minVoltage !== undefined) {
powerMinValue.textContent = data.minVoltage.toFixed(2) + 'V';
}
if (data.lowVoltage) {
powerStatus.classList.add('low');
powerIcon.textContent = '⚠️';
powerText.textContent = '전력 부족 경고!';
} else {
powerStatus.classList.remove('low');
powerIcon.textContent = '⚡';
powerText.textContent = '전원 정상';
}
}
}
function addCanMessage(data) {
@@ -637,9 +842,9 @@ const char index_html[] PROGMEM = R"rawliteral(
const fileItem = document.createElement('div');
fileItem.className = 'file-item';
fileItem.innerHTML =
'<div style="flex: 1; min-width: 0;">' +
'<span class="file-name">' + file.name + '</span>' +
'<span class="file-size">(' + formatBytes(file.size) + ')</span>' +
'<div class="file-info">' +
'<div class="file-name">' + file.name + '</div>' +
'<div class="file-size">' + formatBytes(file.size) + '</div>' +
'</div>' +
'<button class="download-btn" onclick="downloadFile(\'' + file.name + '\')">Download</button>';
fileList.appendChild(fileItem);