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

1067
ESP32_CAN_Logger.ino
View File

File diff suppressed because it is too large Load Diff

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);

514
settings.h Normal file
View File

@@ -0,0 +1,514 @@
#ifndef SETTINGS_H
#define SETTINGS_H
const char settings_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Settings - Byun CAN Logger</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 10px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
text-align: center;
}
.header h1 { font-size: 1.8em; margin-bottom: 5px; }
.header p { opacity: 0.9; font-size: 0.9em; }
.nav {
background: #2c3e50;
padding: 10px;
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.nav a {
color: white;
text-decoration: none;
padding: 10px 15px;
border-radius: 5px;
transition: all 0.3s;
font-size: 0.9em;
white-space: nowrap;
}
.nav a:hover { background: #34495e; }
.nav a.active { background: #3498db; }
.content { padding: 30px; }
.settings-section {
background: #f8f9fa;
padding: 25px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.section-title {
color: #333;
font-size: 1.3em;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 3px solid #667eea;
display: flex;
align-items: center;
gap: 10px;
}
.form-group {
margin-bottom: 20px;
}
.form-group:last-child {
margin-bottom: 0;
}
label {
display: block;
font-weight: 600;
color: #333;
margin-bottom: 8px;
font-size: 0.95em;
}
.help-text {
font-size: 0.85em;
color: #666;
margin-top: 5px;
line-height: 1.4;
}
input[type="text"],
input[type="password"],
select {
width: 100%;
padding: 12px 15px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 1em;
transition: all 0.3s;
font-family: inherit;
}
input[type="text"]:focus,
input[type="password"]:focus,
select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.timezone-select {
background: white;
cursor: pointer;
}
.button-group {
display: flex;
gap: 15px;
margin-top: 30px;
flex-wrap: wrap;
}
button {
flex: 1;
min-width: 150px;
padding: 14px 28px;
border: none;
border-radius: 8px;
font-size: 1em;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-save {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: white;
box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3);
}
.btn-save:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(17, 153, 142, 0.4);
}
.btn-cancel {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.btn-cancel:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.btn-reboot {
background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
color: white;
box-shadow: 0 4px 15px rgba(235, 51, 73, 0.3);
}
.btn-reboot:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(235, 51, 73, 0.4);
}
button:active {
transform: translateY(0);
}
.alert {
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
display: none;
align-items: center;
gap: 12px;
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.alert.show {
display: flex;
}
.alert-success {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: white;
}
.alert-info {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.alert-warning {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}
.alert-icon {
font-size: 1.5em;
}
.alert-text {
flex: 1;
font-weight: 600;
}
.info-box {
background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
padding: 15px 20px;
border-radius: 8px;
border-left: 4px solid #00acc1;
margin-top: 20px;
}
.info-box-title {
font-weight: 700;
color: #006064;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.info-box-text {
color: #00838f;
font-size: 0.9em;
line-height: 1.6;
}
@media (max-width: 768px) {
.content { padding: 20px; }
.settings-section { padding: 20px; }
.button-group {
flex-direction: column;
}
button {
width: 100%;
min-width: auto;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>⚙️ Settings</h1>
<p>WiFi & Timezone Configuration</p>
</div>
<div class="nav">
<a href="/">Monitor</a>
<a href="/transmit">Transmit</a>
<a href="/graph">Graph</a>
<a href="/settings" class="active">⚙️ Settings</a>
</div>
<div class="content">
<div id="alert-success" class="alert alert-success">
<span class="alert-icon">✓</span>
<span class="alert-text">설정이 저장되었습니다! 재부팅 후 적용됩니다.</span>
</div>
<div id="alert-loading" class="alert alert-info">
<span class="alert-icon">⏳</span>
<span class="alert-text">설정을 불러오는 중...</span>
</div>
<div class="settings-section">
<div class="section-title">
<span>📡</span>
<span>WiFi Access Point</span>
</div>
<div class="form-group">
<label for="wifi-ssid">WiFi SSID (네트워크 이름)</label>
<input type="text" id="wifi-ssid" placeholder="Byun_CAN_Logger" maxlength="31">
<div class="help-text">ESP32가 생성할 WiFi 네트워크 이름입니다 (최대 31자)</div>
</div>
<div class="form-group">
<label for="wifi-password">WiFi Password (비밀번호)</label>
<input type="password" id="wifi-password" placeholder="최소 8자 이상" minlength="8" maxlength="63">
<div class="help-text">WiFi 접속 시 필요한 비밀번호입니다 (8-63자)</div>
</div>
</div>
<div class="settings-section">
<div class="section-title">
<span>🌏</span>
<span>Timezone Configuration</span>
</div>
<div class="form-group">
<label for="timezone">타임존 (Time Zone)</label>
<select id="timezone" class="timezone-select">
<option value="-12">UTC-12:00 - Baker Island</option>
<option value="-11">UTC-11:00 - American Samoa</option>
<option value="-10">UTC-10:00 - Hawaii</option>
<option value="-9">UTC-09:00 - Alaska</option>
<option value="-8">UTC-08:00 - Pacific Time (Los Angeles)</option>
<option value="-7">UTC-07:00 - Mountain Time (Denver)</option>
<option value="-6">UTC-06:00 - Central Time (Chicago)</option>
<option value="-5">UTC-05:00 - Eastern Time (New York)</option>
<option value="-4">UTC-04:00 - Atlantic Time</option>
<option value="-3">UTC-03:00 - Buenos Aires, São Paulo</option>
<option value="-2">UTC-02:00 - Mid-Atlantic</option>
<option value="-1">UTC-01:00 - Azores</option>
<option value="0">UTC±00:00 - London, Dublin</option>
<option value="1">UTC+01:00 - Paris, Berlin, Rome</option>
<option value="2">UTC+02:00 - Athens, Cairo</option>
<option value="3">UTC+03:00 - Moscow, Istanbul</option>
<option value="4">UTC+04:00 - Dubai</option>
<option value="5">UTC+05:00 - Karachi</option>
<option value="5.5">UTC+05:30 - India, Sri Lanka</option>
<option value="6">UTC+06:00 - Dhaka</option>
<option value="7">UTC+07:00 - Bangkok, Jakarta</option>
<option value="8">UTC+08:00 - Beijing, Singapore, Hong Kong</option>
<option value="9" selected>UTC+09:00 - Seoul, Tokyo</option>
<option value="10">UTC+10:00 - Sydney</option>
<option value="11">UTC+11:00 - Solomon Islands</option>
<option value="12">UTC+12:00 - Auckland, Fiji</option>
<option value="13">UTC+13:00 - Samoa</option>
<option value="14">UTC+14:00 - Line Islands</option>
</select>
<div class="help-text">
로그 파일 타임스탬프에 사용될 타임존을 선택하세요.
서울/도쿄는 UTC+9, 뉴욕은 UTC-5입니다.
</div>
</div>
<div class="info-box">
<div class="info-box-title">
<span>💡</span>
<span>타임존 정보</span>
</div>
<div class="info-box-text">
• RTC 모듈이 있는 경우: RTC 시간에 타임존 오프셋이 자동으로 적용됩니다.<br>
• RTC 모듈이 없는 경우: 웹페이지의 "시간 동기화" 버튼으로 수동 설정 시 타임존이 적용됩니다.<br>
• 로그 파일명은 항상 선택한 타임존의 현지 시간으로 생성됩니다.
</div>
</div>
</div>
<div class="button-group">
<button class="btn-save" onclick="saveSettings()">💾 Save Settings</button>
<button class="btn-cancel" onclick="location.href='/'">← Back to Monitor</button>
</div>
<div class="info-box" style="margin-top: 30px;">
<div class="info-box-title">
<span>⚠️</span>
<span>중요 안내</span>
</div>
<div class="info-box-text">
• WiFi 설정을 변경한 경우, ESP32를 재부팅해야 새 SSID/비밀번호가 적용됩니다.<br>
• 타임존 설정은 즉시 적용되며, 다음 로그 파일부터 새로운 시간대가 반영됩니다.<br>
• 설정 저장 후 ESP32의 리셋 버튼을 눌러 재부팅하세요.
</div>
</div>
</div>
</div>
<script>
let ws;
function initWebSocket() {
ws = new WebSocket('ws://' + window.location.hostname + ':81/');
ws.onopen = function() {
console.log('WebSocket connected');
loadSettings();
};
ws.onclose = function() {
console.log('WebSocket disconnected');
showAlert('alert-loading', '연결 끊김. 재연결 시도 중...', 'alert-warning');
setTimeout(initWebSocket, 3000);
};
ws.onerror = function(error) {
console.error('WebSocket error:', error);
};
ws.onmessage = function(event) {
try {
const data = JSON.parse(event.data);
if (data.type === 'settings') {
document.getElementById('wifi-ssid').value = data.ssid || 'Byun_CAN_Logger';
document.getElementById('wifi-password').value = data.password || '';
document.getElementById('timezone').value = data.timezone || 9;
hideAlert('alert-loading');
console.log('Settings loaded:', data);
} else if (data.type === 'settingsSaved') {
if (data.success) {
showAlert('alert-success', '설정이 저장되었습니다! 재부팅 후 적용됩니다.', 'alert-success');
}
}
} catch (e) {
console.error('Parse error:', e);
}
};
}
function loadSettings() {
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({cmd: 'getSettings'}));
showAlert('alert-loading', '설정을 불러오는 중...', 'alert-info');
}
}
function saveSettings() {
const ssid = document.getElementById('wifi-ssid').value.trim();
const password = document.getElementById('wifi-password').value;
const timezone = parseFloat(document.getElementById('timezone').value);
// 입력 검증
if (ssid.length === 0) {
alert('WiFi SSID를 입력하세요.');
return;
}
if (ssid.length > 31) {
alert('WiFi SSID는 최대 31자까지 입력 가능합니다.');
return;
}
if (password.length > 0 && password.length < 8) {
alert('WiFi 비밀번호는 최소 8자 이상이어야 합니다.');
return;
}
if (password.length > 63) {
alert('WiFi 비밀번호는 최대 63자까지 입력 가능합니다.');
return;
}
const settings = {
cmd: 'saveSettings',
ssid: ssid,
password: password,
timezone: timezone
};
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(settings));
console.log('Settings saved:', settings);
} else {
alert('WebSocket 연결이 끊겼습니다. 페이지를 새로고침하세요.');
}
}
function showAlert(alertId, message, className) {
const alert = document.getElementById(alertId);
if (alert) {
const textElement = alert.querySelector('.alert-text');
if (textElement && message) {
textElement.textContent = message;
}
// 기존 클래스 제거
alert.className = 'alert ' + className;
alert.classList.add('show');
// 3초 후 자동 숨김 (success 알림만)
if (className === 'alert-success') {
setTimeout(() => {
hideAlert(alertId);
}, 5000);
}
}
}
function hideAlert(alertId) {
const alert = document.getElementById(alertId);
if (alert) {
alert.classList.remove('show');
}
}
// 페이지 로드 시 WebSocket 연결
window.addEventListener('load', function() {
initWebSocket();
});
</script>
</body>
</html>
)rawliteral";
#endif