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

시리얼, seting수정

Browse Source
This commit is contained in:
byun
2026-03-27 21:21:38 +00:00
parent 5616158cc7
commit 9432ea6a40
3 changed files with 659 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
serial2_terminal.h
View File

@@ -255,6 +255,8 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
.modbus-error { color:var(--red); } .modbus-error { color:var(--red); }
/* Send / Stats */ /* Send / Stats */
.send-panel { margin-top:10px; } .send-panel { margin-top:10px; }
.tog-on{border-color:var(--accent)!important;color:var(--accent)!important;background:rgba(67,206,162,.10)!important;}
.tog-off{border-color:var(--muted)!important;color:var(--muted)!important;}
.send-panel h3, .stats h3 { color:var(--accent); border-color:var(--border); } .send-panel h3, .stats h3 { color:var(--accent); border-color:var(--border); }
.send-controls { display:flex; gap:8px; align-items:center; } .send-controls { display:flex; gap:8px; align-items:center; }
.send-controls input { flex:1; } .send-controls input { flex:1; }
@@ -379,11 +381,23 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
<div class="send-panel"> <div class="send-panel">
<h3>📤 Send Data</h3> <h3>📤 Send Data</h3>
<div class="send-controls"> <div class="send-controls">
<input type="text" id="sendInput" placeholder="Enter HEX data (e.g., 01 03 00 00 00 0A)" /> <input type="text" id="sendInput" placeholder="HEX 입력 (예: FF A0 01 또는 FFA001)" />
<button class="btn btn-primary" onclick="sendData()">Send</button> <button class="btn btn-primary" onclick="sendData()">Send HEX</button>
</div>
<div class="send-controls" style="margin-top:7px;">
<input type="text" id="sendTextInput" placeholder="ASCII 텍스트 전송 (CRLF 자동 추가)" />
<button class="btn btn-secondary btn-small" onclick="sendText()">Send Text</button>
</div>
</div>
<div style="background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--yellow);border-radius:var(--r);padding:11px 13px;margin-bottom:10px;">
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;">
<button class="btn btn-warning" onclick="sendLoopbackTest()">📤 Loopback Test</button>
<button class="btn tog-off" id="btn-weblog" onclick="toggleWebLog()">🖥️ WebLog: OFF</button>
</div>
<div style="font-size:.76em;color:var(--muted);line-height:1.7;">
<strong style="color:var(--text)">Loopback:</strong> GPIO6(TX)↔GPIO7(RX) 단락 후 버튼 클릭 → TX/RX 동시 수신 = UART 정상
</div> </div>
</div> </div>
<div class="stats"> <div class="stats">
<h3>📊 Statistics</h3> <h3>📊 Statistics</h3>
<div class="stat-grid"> <div class="stat-grid">
@@ -410,6 +424,8 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
<script> <script>
let ws; let ws;
let pingTimer = null;
let webLogEnabled = false;
let autoScroll = true; let autoScroll = true;
let rxCount = 0; let rxCount = 0;
let txCount = 0; let txCount = 0;
@@ -514,22 +530,24 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
ws.onopen = function() { ws.onopen = function() {
console.log('WebSocket Connected'); console.log('WebSocket Connected');
addToTerminal('System', '🟢 Connected to Serial2 Terminal'); addToTerminal('System', '🟢 Serial2 연결됨 | GPIO6=TX / GPIO7=RX');
setTimeout(syncTimeFromPhone, 500);
// 시간 동기화 if (pingTimer) clearInterval(pingTimer);
setTimeout(function() { pingTimer = setInterval(function(){
syncTimeFromPhone(); if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({cmd:'ping'}));
}, 500); }, 20000);
}; };
ws.onmessage = function(event) { ws.onmessage = function(event) {
try { try {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
if (data.type === 's2') {
if (data.type === 'serial2') { // ★ 펌웨어 직접 전송 시리얼 패킷 {tx:bool, d:hex, ts:ms}
handleSerialData(data); handlePacket(data.tx, data.d, data.ts);
} else if (data.type === 'serial2Status' || data.type === 'update') { } else if (data.type === 'serial2Status' || data.type === 'update') {
updateStatus(data); updateStatus(data);
} else if (data.type === 'pong') {
// keepalive
} }
} catch (e) { } catch (e) {
console.error('Parse error:', e); console.error('Parse error:', e);
@@ -537,8 +555,8 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
}; };
ws.onclose = function() { ws.onclose = function() {
console.log('WebSocket Disconnected'); if (pingTimer) { clearInterval(pingTimer); pingTimer = null; }
addToTerminal('System', '🔴 Disconnected from server. Reconnecting...'); addToTerminal('System', '🔴 연결 끊김. 재연결 중...');
setTimeout(initWebSocket, 3000); setTimeout(initWebSocket, 3000);
}; };
@@ -547,7 +565,56 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
}; };
} }
// ★ 핵심 처리 함수: 펌웨어 s1/s2 패킷 → 터미널 표시
// isTx: bool, hexData: hex string (예 "48656C"), tsMs: ms timestamp
function handlePacket(isTx, hexData, tsMs) {
if (!hexData || hexData.length === 0) return;
const dir = isTx ? 'TX' : 'RX';
const byteLen = Math.floor(hexData.length / 2);
if (dir === 'RX') {
rxCount += byteLen;
document.getElementById('rxCount').textContent = rxCount;
} else {
txCount += byteLen;
document.getElementById('txCount').textContent = txCount;
}
frameCount++;
document.getElementById('frameCount').textContent = frameCount;
if (!teratermMode && modbusParseEnabled && dir === 'RX') {
const mf = parseModbus(hexData);
if (mf) {
modbusCount++;
document.getElementById('modbusCount').textContent = modbusCount;
displayModbusFrame(dir, mf, tsMs);
return;
}
}
displaySerialData(dir, hexData, tsMs);
}
// 하위 호환용 (기존 'serial' 타입 포맷)
function handleSerialData(data) { function handleSerialData(data) {
if (data.direction === 'RX') {
rxCount += data.data.length / 2;
document.getElementById('rxCount').textContent = rxCount;
} else if (data.direction === 'TX') {
txCount += data.data.length / 2;
document.getElementById('txCount').textContent = txCount;
}
frameCount++;
document.getElementById('frameCount').textContent = frameCount;
if (!teratermMode && modbusParseEnabled && data.direction === 'RX') {
const mf = parseModbus(data.data);
if (mf) {
modbusCount++;
document.getElementById('modbusCount').textContent = modbusCount;
displayModbusFrame(data.direction, mf, data.timestamp);
return;
}
}
displaySerialData(data.direction, data.data, data.timestamp);
}
// ── 구버전 handleSerialData 원본 (아래는 새 것으로 대체됨) ──
function _handleSerialData_orig(data) {
if (data.direction === 'RX') { if (data.direction === 'RX') {
rxCount += data.data.length; rxCount += data.data.length;
document.getElementById('rxCount').textContent = rxCount; document.getElementById('rxCount').textContent = rxCount;
@@ -974,27 +1041,54 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
function sendData() { function sendData() {
const input = document.getElementById('sendInput'); const input = document.getElementById('sendInput');
const hexData = input.value.replace(/[^0-9A-Fa-f]/g, ''); const hexData = input.value.replace(/[^0-9A-Fa-f \-]/g,'').replace(/[\s\-]+/g,'');
if (!hexData) { alert('HEX 데이터 입력\n예) 48 65 6C 또는 48656C'); return; }
if (hexData.length === 0) { if (hexData.length % 2 !== 0) { alert('HEX는 짝수 자리 (1바이트=2자리)\n예) FF→1바이트, FF01→2바이트'); return; }
alert('Please enter valid HEX data');
return;
}
if (hexData.length % 2 !== 0) {
alert('HEX data must have even number of characters');
return;
}
if (ws && ws.readyState === WebSocket.OPEN) { if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ ws.send(JSON.stringify({ cmd: 'sendSerial2', data: hexData }));
cmd: 'sendSerial2',
data: hexData
}));
input.value = ''; input.value = '';
addToTerminal('System', `Sent ${hexData.length / 2} bytes`); } else { alert('WebSocket 연결 끊김'); }
} }
function sendText() {
const input = document.getElementById('sendTextInput');
const text = input.value;
if (!text) return;
let hex = '';
for (let i = 0; i < text.length; i++) hex += text.charCodeAt(i).toString(16).padStart(2,'0');
hex += '0d0a';
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ cmd: 'sendSerial2', data: hex }));
input.value = '';
}
}
function sendLoopbackTest() {
if (!ws || ws.readyState !== WebSocket.OPEN) return;
const s = '>>>SER2_LOOPBACK_TEST<<<\r\n';
let hex = '';
for (let i = 0; i < s.length; i++) hex += s.charCodeAt(i).toString(16).padStart(2,'0');
ws.send(JSON.stringify({ cmd: 'sendSerial2', data: hex }));
addToTerminal('System', '📤 Loopback TX → GPIO6↔GPIO7 단락 시 RX 수신 확인');
}
function toggleWebLog() {
if (!ws || ws.readyState !== WebSocket.OPEN) return;
webLogEnabled = !webLogEnabled;
ws.send(JSON.stringify({ cmd: webLogEnabled ? 'enableWebLog' : 'disableWebLog' }));
updateToggle('btn-weblog', webLogEnabled, '🖥️ WebLog');
}
function updateToggle(id, state, label) {
const btn = document.getElementById(id);
if (!btn) return;
btn.textContent = label + ': ' + (state ? 'ON' : 'OFF');
btn.className = 'btn ' + (state ? 'tog-on' : 'tog-off');
}
function showWebLog(msg) {
const t = document.getElementById('terminal');
const d = document.createElement('div');
d.className = 'line';
const ts = new Date().toLocaleTimeString('ko-KR',{hour12:false});
d.innerHTML = '<span class="timestamp">['+ts+']</span><span style="color:#ffa657">[DBG] </span>'+msg;
t.appendChild(d);
if (autoScroll) t.scrollTop = t.scrollHeight;
} }
function clearTerminal() { function clearTerminal() {

168
serial_terminal.h
View File

@@ -255,6 +255,8 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
.modbus-error { color:var(--red); } .modbus-error { color:var(--red); }
/* Send / Stats */ /* Send / Stats */
.send-panel { margin-top:10px; } .send-panel { margin-top:10px; }
.tog-on{border-color:var(--accent)!important;color:var(--accent)!important;background:rgba(67,206,162,.10)!important;}
.tog-off{border-color:var(--muted)!important;color:var(--muted)!important;}
.send-panel h3, .stats h3 { color:var(--accent); border-color:var(--border); } .send-panel h3, .stats h3 { color:var(--accent); border-color:var(--border); }
.send-controls { display:flex; gap:8px; align-items:center; } .send-controls { display:flex; gap:8px; align-items:center; }
.send-controls input { flex:1; } .send-controls input { flex:1; }
@@ -379,11 +381,24 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
<div class="send-panel"> <div class="send-panel">
<h3>📤 Send Data</h3> <h3>📤 Send Data</h3>
<div class="send-controls"> <div class="send-controls">
<input type="text" id="sendInput" placeholder="Enter HEX data (e.g., 01 03 00 00 00 0A)" /> <input type="text" id="sendInput" placeholder="HEX 입력 (예: FF A0 01 또는 FFA001)" />
<button class="btn btn-primary" onclick="sendData()">Send</button> <button class="btn btn-primary" onclick="sendData()">Send HEX</button>
</div>
<div class="send-controls" style="margin-top:7px;">
<input type="text" id="sendTextInput" placeholder="ASCII 텍스트 전송 (CRLF 자동 추가)" />
<button class="btn btn-secondary btn-small" onclick="sendText()">Send Text</button>
</div>
</div>
<div style="background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--yellow);border-radius:var(--r);padding:11px 13px;margin-bottom:10px;">
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;">
<button class="btn btn-warning" onclick="sendLoopbackTest()">📤 Loopback Test</button>
<button class="btn tog-off" id="btn-weblog" onclick="toggleWebLog()">🖥️ WebLog: OFF</button>
<button class="btn tog-off" id="btn-usbmirror" onclick="toggleUsbMirror()">🔌 USB Mirror: OFF</button>
</div>
<div style="font-size:.76em;color:var(--muted);line-height:1.7;">
<strong style="color:var(--text)">Loopback:</strong> GPIO17(TX)↔GPIO18(RX) 단락 후 버튼 클릭 → TX/RX 동시 수신 = UART 정상
</div> </div>
</div> </div>
<div class="stats"> <div class="stats">
<h3>📊 Statistics</h3> <h3>📊 Statistics</h3>
<div class="stat-grid"> <div class="stat-grid">
@@ -410,6 +425,9 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
<script> <script>
let ws; let ws;
let pingTimer = null;
let webLogEnabled = false;
let usbMirrorEnabled = false;
let autoScroll = true; let autoScroll = true;
let rxCount = 0; let rxCount = 0;
let txCount = 0; let txCount = 0;
@@ -514,22 +532,26 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
ws.onopen = function() { ws.onopen = function() {
console.log('WebSocket Connected'); console.log('WebSocket Connected');
addToTerminal('System', '🟢 Connected to Serial1 Terminal'); addToTerminal('System', '🟢 Serial1 연결됨 | GPIO17=TX / GPIO18=RX');
setTimeout(syncTimeFromPhone, 500);
// 시간 동기화 if (pingTimer) clearInterval(pingTimer);
setTimeout(function() { pingTimer = setInterval(function(){
syncTimeFromPhone(); if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({cmd:'ping'}));
}, 500); }, 20000);
}; };
ws.onmessage = function(event) { ws.onmessage = function(event) {
try { try {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
if (data.type === 's1') {
if (data.type === 'serial') { // ★ 펌웨어 직접 전송 시리얼 패킷 {tx:bool, d:hex, ts:ms}
handleSerialData(data); handlePacket(data.tx, data.d, data.ts);
} else if (data.type === 'serialStatus' || data.type === 'update') { } else if (data.type === 'serialStatus' || data.type === 'update') {
updateStatus(data); updateStatus(data);
} else if (data.type === 'pong') {
// keepalive } else if (data.type === 'usbMirrorState') {
usbMirrorEnabled = data.enabled;
updateToggle('btn-usbmirror', usbMirrorEnabled, '🔌 USB Mirror');
} }
} catch (e) { } catch (e) {
console.error('Parse error:', e); console.error('Parse error:', e);
@@ -537,8 +559,8 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
}; };
ws.onclose = function() { ws.onclose = function() {
console.log('WebSocket Disconnected'); if (pingTimer) { clearInterval(pingTimer); pingTimer = null; }
addToTerminal('System', '🔴 Disconnected from server. Reconnecting...'); addToTerminal('System', '🔴 연결 끊김. 재연결 중...');
setTimeout(initWebSocket, 3000); setTimeout(initWebSocket, 3000);
}; };
@@ -547,7 +569,56 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
}; };
} }
// ★ 핵심 처리 함수: 펌웨어 s1/s2 패킷 → 터미널 표시
// isTx: bool, hexData: hex string (예 "48656C"), tsMs: ms timestamp
function handlePacket(isTx, hexData, tsMs) {
if (!hexData || hexData.length === 0) return;
const dir = isTx ? 'TX' : 'RX';
const byteLen = Math.floor(hexData.length / 2);
if (dir === 'RX') {
rxCount += byteLen;
document.getElementById('rxCount').textContent = rxCount;
} else {
txCount += byteLen;
document.getElementById('txCount').textContent = txCount;
}
frameCount++;
document.getElementById('frameCount').textContent = frameCount;
if (!teratermMode && modbusParseEnabled && dir === 'RX') {
const mf = parseModbus(hexData);
if (mf) {
modbusCount++;
document.getElementById('modbusCount').textContent = modbusCount;
displayModbusFrame(dir, mf, tsMs);
return;
}
}
displaySerialData(dir, hexData, tsMs);
}
// 하위 호환용 (기존 'serial' 타입 포맷)
function handleSerialData(data) { function handleSerialData(data) {
if (data.direction === 'RX') {
rxCount += data.data.length / 2;
document.getElementById('rxCount').textContent = rxCount;
} else if (data.direction === 'TX') {
txCount += data.data.length / 2;
document.getElementById('txCount').textContent = txCount;
}
frameCount++;
document.getElementById('frameCount').textContent = frameCount;
if (!teratermMode && modbusParseEnabled && data.direction === 'RX') {
const mf = parseModbus(data.data);
if (mf) {
modbusCount++;
document.getElementById('modbusCount').textContent = modbusCount;
displayModbusFrame(data.direction, mf, data.timestamp);
return;
}
}
displaySerialData(data.direction, data.data, data.timestamp);
}
// ── 구버전 handleSerialData 원본 (아래는 새 것으로 대체됨) ──
function _handleSerialData_orig(data) {
if (data.direction === 'RX') { if (data.direction === 'RX') {
rxCount += data.data.length; rxCount += data.data.length;
document.getElementById('rxCount').textContent = rxCount; document.getElementById('rxCount').textContent = rxCount;
@@ -974,27 +1045,60 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
function sendData() { function sendData() {
const input = document.getElementById('sendInput'); const input = document.getElementById('sendInput');
const hexData = input.value.replace(/[^0-9A-Fa-f]/g, ''); const hexData = input.value.replace(/[^0-9A-Fa-f \-]/g,'').replace(/[\s\-]+/g,'');
if (!hexData) { alert('HEX 데이터 입력\n예) 48 65 6C 또는 48656C'); return; }
if (hexData.length === 0) { if (hexData.length % 2 !== 0) { alert('HEX는 짝수 자리 (1바이트=2자리)\n예) FF→1바이트, FF01→2바이트'); return; }
alert('Please enter valid HEX data');
return;
}
if (hexData.length % 2 !== 0) {
alert('HEX data must have even number of characters');
return;
}
if (ws && ws.readyState === WebSocket.OPEN) { if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ ws.send(JSON.stringify({ cmd: 'sendSerial', data: hexData }));
cmd: 'sendSerial',
data: hexData
}));
input.value = ''; input.value = '';
addToTerminal('System', `Sent ${hexData.length / 2} bytes`); } else { alert('WebSocket 연결 끊김'); }
} }
function sendText() {
const input = document.getElementById('sendTextInput');
const text = input.value;
if (!text) return;
let hex = '';
for (let i = 0; i < text.length; i++) hex += text.charCodeAt(i).toString(16).padStart(2,'0');
hex += '0d0a';
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ cmd: 'sendSerial', data: hex }));
input.value = '';
}
}
function sendLoopbackTest() {
if (!ws || ws.readyState !== WebSocket.OPEN) return;
const s = '>>>SER1_LOOPBACK_TEST<<<\r\n';
let hex = '';
for (let i = 0; i < s.length; i++) hex += s.charCodeAt(i).toString(16).padStart(2,'0');
ws.send(JSON.stringify({ cmd: 'sendSerial', data: hex }));
addToTerminal('System', '📤 Loopback TX → GPIO17↔GPIO18 단락 시 RX 수신 확인');
}
function toggleWebLog() {
if (!ws || ws.readyState !== WebSocket.OPEN) return;
webLogEnabled = !webLogEnabled;
ws.send(JSON.stringify({ cmd: webLogEnabled ? 'enableWebLog' : 'disableWebLog' }));
updateToggle('btn-weblog', webLogEnabled, '🖥️ WebLog');
}
function toggleUsbMirror() {
if (!ws || ws.readyState !== WebSocket.OPEN) return;
usbMirrorEnabled = !usbMirrorEnabled;
ws.send(JSON.stringify({ cmd: usbMirrorEnabled ? 'enableUsbMirror' : 'disableUsbMirror' }));
updateToggle('btn-usbmirror', usbMirrorEnabled, '🔌 USB Mirror');
}
function updateToggle(id, state, label) {
const btn = document.getElementById(id);
if (!btn) return;
btn.textContent = label + ': ' + (state ? 'ON' : 'OFF');
btn.className = 'btn ' + (state ? 'tog-on' : 'tog-off');
}
function showWebLog(msg) {
const t = document.getElementById('terminal');
const d = document.createElement('div');
d.className = 'line';
const ts = new Date().toLocaleTimeString('ko-KR',{hour12:false});
d.innerHTML = '<span class="timestamp">['+ts+']</span><span style="color:#ffa657">[DBG] </span>'+msg;
t.appendChild(d);
if (autoScroll) t.scrollTop = t.scrollHeight;
} }
function clearTerminal() { function clearTerminal() {

556
settings.h
View File

@@ -31,31 +31,16 @@ const char settings_html[] PROGMEM = R"rawliteral(
background: var(--bg); color: var(--text); background: var(--bg); color: var(--text);
overflow-x: hidden; font-size: 14px; overflow-x: hidden; font-size: 14px;
} }
/* Header */
.header { .header {
background: linear-gradient(135deg,#1a2744 0%,#1e1a3a 100%); background: linear-gradient(135deg,#1a2744 0%,#1e1a3a 100%);
padding: 11px 16px; border-bottom: 1px solid var(--border); padding: 11px 16px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
} }
.header h1 { .header h1 { font-size:1.0em; font-weight:700; color:var(--accent); display:flex; align-items:center; gap:8px; }
font-size: 1.0em; font-weight: 700; color: var(--accent);
display: flex; align-items: center; gap: 8px;
}
.header p { font-size:0.78em; color:var(--muted); margin:0; } .header p { font-size:0.78em; color:var(--muted); margin:0; }
.badge {
background: rgba(67,206,162,.15); color: var(--accent);
padding: 2px 8px; border-radius: 12px; font-size: 0.65em;
font-weight: 600; border: 1px solid rgba(67,206,162,.3);
white-space: nowrap;
}
.header-spacer { flex:1; }
/* Nav */
.nav { .nav {
background: var(--panel); border-bottom: 1px solid var(--border); background: var(--panel); border-bottom: 1px solid var(--border);
display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
scrollbar-width: none;
} }
.nav::-webkit-scrollbar { display:none; } .nav::-webkit-scrollbar { display:none; }
.nav a { .nav a {
@@ -67,24 +52,13 @@ const char settings_html[] PROGMEM = R"rawliteral(
} }
.nav a:hover { color:var(--text); } .nav a:hover { color:var(--text); }
.nav a.active { color:var(--accent); border-bottom-color:var(--accent); } .nav a.active { color:var(--accent); border-bottom-color:var(--accent); }
/* Content */
.content { padding: 12px; } .content { padding: 12px; }
/* Headings */
h2 { h2 {
color:var(--accent); margin:14px 0 10px; color:var(--accent); margin:14px 0 10px;
font-size:0.82em; font-weight:700; text-transform:uppercase; font-size:0.82em; font-weight:700; text-transform:uppercase;
letter-spacing: .5px; padding-bottom: 6px; letter-spacing:.5px; padding-bottom:6px; border-bottom:1px solid var(--border);
border-bottom: 1px solid var(--border);
} }
h3 { h3 { color:var(--text); font-size:0.85em; font-weight:600; margin-bottom:10px; }
color: var(--text); font-size: 0.85em; font-weight: 600;
margin-bottom: 10px; padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
/* Buttons */
.btn, button { .btn, button {
padding:6px 13px; border:1px solid var(--border); padding:6px 13px; border:1px solid var(--border);
border-radius:var(--r); background:var(--bg); color:var(--muted); border-radius:var(--r); background:var(--bg); color:var(--muted);
@@ -105,57 +79,37 @@ const char settings_html[] PROGMEM = R"rawliteral(
.btn-warning:hover { background:rgba(227,179,65,.10); } .btn-warning:hover { background:rgba(227,179,65,.10); }
.btn-secondary:hover { background:rgba(139,148,158,.10);} .btn-secondary:hover { background:rgba(139,148,158,.10);}
.btn-small { padding:4px 9px; font-size:.75em; } .btn-small { padding:4px 9px; font-size:.75em; }
.button-group, .btn-group { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; } .button-group { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
/* Forms */
label { label {
display:block; font-weight:600; color:var(--muted); display:block; font-weight:600; color:var(--muted);
margin-bottom:4px; font-size:.78em; margin-bottom:4px; font-size:.78em;
text-transform:uppercase; letter-spacing:.3px; text-transform:uppercase; letter-spacing:.3px;
} }
input[type="text"], input[type="password"], input[type="number"], input[type="text"], input[type="password"], input[type="number"], select, textarea {
select, textarea {
width:100%; padding:7px 10px; width:100%; padding:7px 10px;
border:1px solid var(--border); border-radius:var(--r); border:1px solid var(--border); border-radius:var(--r);
font-size:.85em; font-family:inherit; font-size:.85em; font-family:inherit;
background:var(--bg); color:var(--text); background:var(--bg); color:var(--text); transition:border-color .2s;
transition:border-color .2s;
} }
input:focus, select:focus, textarea:focus { input:focus, select:focus, textarea:focus {
outline:none; border-color:var(--accent); outline:none; border-color:var(--accent);
box-shadow:0 0 0 2px rgba(67,206,162,.10); box-shadow:0 0 0 2px rgba(67,206,162,.10);
} }
input[type="checkbox"], input[type="radio"] { input[type="checkbox"] { width:15px; height:15px; cursor:pointer; accent-color:var(--accent); }
width:15px; height:15px; cursor:pointer; accent-color:var(--accent);
}
select option { background:var(--panel); color:var(--text); } select option { background:var(--panel); color:var(--text); }
.settings-section {
/* Panels */
.section, .settings-section, .send-panel, .stats,
.control-panel, .auto-trigger-section {
background:var(--panel); border:1px solid var(--border); background:var(--panel); border:1px solid var(--border);
border-radius:var(--r); padding:13px; margin-bottom:10px; border-radius:var(--r); padding:13px; margin-bottom:10px;
} }
.form-group { margin-bottom:12px; } .form-group { margin-bottom:12px; }
.form-group:last-child { margin-bottom:0; } .form-group:last-child { margin-bottom:0; }
.help-text { font-size:.76em; color:var(--muted); margin-top:4px; line-height:1.4; } .help-text { font-size:.76em; color:var(--muted); margin-top:4px; line-height:1.4; }
.form-row { .checkbox-group {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
gap:10px; margin-bottom:10px;
}
.form-row label { text-transform:none; font-size:.78em; }
.checkbox-group, .checkbox-row {
display:flex; align-items:center; gap:8px; display:flex; align-items:center; gap:8px;
margin-bottom:8px; padding:7px 10px; margin-bottom:8px; padding:7px 10px;
background:var(--card); border-radius:6px; border:1px solid var(--border); background:var(--card); border-radius:6px; border:1px solid var(--border);
} }
.checkbox-group label, .checkbox-row label { .checkbox-group label { text-transform:none; cursor:pointer; margin-bottom:0; color:var(--text); font-size:.85em; letter-spacing:0; }
text-transform:none; cursor:pointer; margin-bottom:0;
color:var(--text); font-size:.85em; letter-spacing:0;
}
/* Alerts */
.alert { .alert {
padding:9px 13px; border-radius:var(--r); padding:9px 13px; border-radius:var(--r);
margin-bottom:10px; display:none; margin-bottom:10px; display:none;
@@ -169,9 +123,6 @@ const char settings_html[] PROGMEM = R"rawliteral(
.alert-warning { border-color:rgba(227,179,65,.4); color:var(--yellow); background:rgba(227,179,65,.07); } .alert-warning { border-color:rgba(227,179,65,.4); color:var(--yellow); background:rgba(227,179,65,.07); }
.alert-icon { font-size:1.15em; } .alert-icon { font-size:1.15em; }
.alert-text { flex:1; } .alert-text { flex:1; }
@keyframes slideDown { from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);} }
/* Connection status */
.connection-status { .connection-status {
position:fixed; top:10px; right:10px; position:fixed; top:10px; right:10px;
padding:4px 11px; border-radius:20px; padding:4px 11px; border-radius:20px;
@@ -180,37 +131,99 @@ const char settings_html[] PROGMEM = R"rawliteral(
} }
.connection-status.connected { border-color:rgba(67,206,162,.5); color:var(--accent); background:rgba(67,206,162,.08); } .connection-status.connected { border-color:rgba(67,206,162,.5); color:var(--accent); background:rgba(67,206,162,.08); }
.connection-status.disconnected { border-color:rgba(248,81,73,.5); color:var(--red); background:rgba(248,81,73,.08); } .connection-status.disconnected { border-color:rgba(248,81,73,.5); color:var(--red); background:rgba(248,81,73,.08); }
@media (max-width:480px) { .content{padding:8px;} }
@media (max-width:480px) { .content{padding:8px;} h2{font-size:.78em;} } /* ── Settings-specific ── */
/* settings.h specific */
.section-title { .section-title {
color:var(--accent); font-size:.85em; font-weight:700; color:var(--accent); font-size:.85em; font-weight:700;
margin-bottom:14px; padding-bottom:7px; border-bottom:1px solid var(--border); margin-bottom:14px; padding-bottom:7px; border-bottom:1px solid var(--border);
display:flex; align-items:center; gap:7px; display:flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.4px;
text-transform:uppercase; letter-spacing:.4px;
} }
.sta-settings { .sub-title {
color:var(--text); font-size:.82em; font-weight:700;
margin:14px 0 10px; padding:7px 10px;
background:var(--card); border-radius:6px;
border-left:3px solid var(--blue);
display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.sub-title.ap { border-left-color:var(--accent); }
.sta-block {
background:var(--card); padding:13px; border-radius:var(--r); background:var(--card); padding:13px; border-radius:var(--r);
margin-top:10px; border:1px solid var(--border); border-left:3px solid var(--blue); margin-top:10px; border:1px solid var(--border); border-left:3px solid var(--blue);
transition:opacity .2s;
} }
.sta-settings.disabled { opacity:.4; pointer-events:none; } .sta-block.disabled { opacity:.4; pointer-events:none; }
.btn-save { border-color:var(--accent); color:var(--accent); flex:1; min-width:130px; padding:9px 18px; } .btn-save { border-color:var(--accent); color:var(--accent); flex:1; min-width:130px; padding:9px 18px; }
.btn-save:hover { background:rgba(67,206,162,.10); } .btn-save:hover { background:rgba(67,206,162,.10); }
.btn-cancel { border-color:var(--muted); color:var(--muted); flex:1; min-width:130px; padding:9px 18px; } .btn-back { border-color:var(--muted); color:var(--muted); flex:1; min-width:130px; padding:9px 18px; }
.btn-cancel:hover { background:rgba(139,148,158,.10); } .btn-back:hover { background:rgba(139,148,158,.10); }
.info-box { .info-box {
background:rgba(88,166,255,.06); border:1px solid rgba(88,166,255,.2); background:rgba(88,166,255,.06); border:1px solid rgba(88,166,255,.2);
border-left:3px solid var(--blue); padding:11px 13px; border-radius:var(--r); margin-top:10px; border-left:3px solid var(--blue); padding:11px 13px; border-radius:var(--r); margin-top:12px;
} }
.info-box-title { font-weight:700; color:var(--blue); margin-bottom:5px; display:flex; align-items:center; gap:5px; font-size:.83em; } .info-box-title { font-weight:700; color:var(--blue); margin-bottom:5px; display:flex; align-items:center; gap:5px; font-size:.83em; }
.info-box-text { color:var(--muted); font-size:.80em; line-height:1.6; } .info-box-text { color:var(--muted); font-size:.80em; line-height:1.7; }
/* WiFi status badges */
.wbadge {
display:inline-flex; align-items:center; gap:5px;
padding:3px 9px; border-radius:10px; font-size:.72em; font-weight:600;
}
.wbadge.on { background:rgba(67,206,162,.12); color:var(--accent); border:1px solid rgba(67,206,162,.3); }
.wbadge.off { background:rgba(248,81,73,.10); color:var(--red); border:1px solid rgba(248,81,73,.25); }
.wbadge.ap { background:rgba(88,166,255,.10); color:var(--blue); border:1px solid rgba(88,166,255,.25); }
.wdot { width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; }
/* IP row */
.ip-row {
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
margin-top:8px; padding:7px 10px;
background:var(--bg); border-radius:6px; border:1px solid var(--border);
}
.ip-lbl { font-size:.72em; color:var(--muted); font-weight:700; text-transform:uppercase; min-width:55px; }
.ip-val { font-family:monospace; font-size:.88em; color:var(--text); font-weight:600; }
/* Scan */
.ssid-row { display:flex; gap:6px; align-items:flex-start; }
.ssid-row input { flex:1; }
.scan-wrap { position:relative; margin-top:4px; }
.scan-list {
display:none; border:1px solid var(--border);
border-radius:var(--r); background:var(--card);
max-height:220px; overflow-y:auto; z-index:100; position:relative;
}
.scan-list.show { display:block; }
.scan-item {
display:flex; align-items:center; justify-content:space-between;
padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--border);
transition:background .12s; gap:8px;
}
.scan-item:last-child { border-bottom:none; }
.scan-item:hover { background:rgba(67,206,162,.08); }
.scan-ssid { font-size:.85em; color:var(--text); font-weight:500; }
.scan-meta { font-size:.74em; color:var(--muted); white-space:nowrap; }
.scan-msg { padding:12px; text-align:center; color:var(--muted); font-size:.82em; }
/* STA status boxes */
.sta-ok {
display:none; margin-top:9px; padding:9px 12px;
background:rgba(67,206,162,.08); border-radius:6px;
border:1px solid rgba(67,206,162,.2);
}
.sta-fail {
display:none; margin-top:9px; padding:9px 12px;
background:rgba(248,81,73,.06); border-radius:6px;
border:1px solid rgba(248,81,73,.2);
color:var(--red); font-size:.83em; font-weight:600;
}
</style> </style>
</head> </head>
<body> <body>
<div id="ws-status" class="connection-status disconnected">○ WS</div>
<div class="header"> <div class="header">
<h1>⚙️ Settings</h1> <h1>⚙️ Settings</h1>
<p>Configure WiFi and System Settings</p> <p>WiFi 및 시스템 설정</p>
</div> </div>
<div class="nav"> <div class="nav">
@@ -226,12 +239,15 @@ const char settings_html[] PROGMEM = R"rawliteral(
<div class="content"> <div class="content">
<div id="alert-success" class="alert alert-success"> <div id="alert-success" class="alert alert-success">
<span class="alert-icon">✓</span> <span class="alert-icon">✓</span>
<span class="alert-text">Settings saved successfully!</span> <span class="alert-text">설정이 저장되었습니다! 재부팅 후 적용됩니다.</span>
</div> </div>
<div id="alert-loading" class="alert alert-info"> <div id="alert-loading" class="alert alert-info">
<span class="alert-icon">⏳</span> <span class="alert-icon">⏳</span>
<span class="alert-text">Loading settings...</span> <span class="alert-text">설정을 불러오는 중...</span>
</div>
<div id="alert-error" class="alert alert-warning">
<span class="alert-icon">⚠️</span>
<span class="alert-text"></span>
</div> </div>
<div class="settings-section"> <div class="settings-section">
@@ -240,243 +256,305 @@ const char settings_html[] PROGMEM = R"rawliteral(
<span>WiFi Configuration</span> <span>WiFi Configuration</span>
</div> </div>
<h3 style="color: #333; font-size: 1.1em; margin-bottom: 15px;">AP Mode (Access Point)</h3> <!-- AP Mode -->
<div class="sub-title ap">
<span>📡</span>
<span>AP Mode (Access Point)</span>
<span id="ap-badge" class="wbadge ap" style="margin-left:auto;">
<span class="wdot"></span> AP 활성
</span>
</div>
<div class="form-group"> <div class="ip-row">
<span class="ip-lbl">AP IP</span>
<span class="ip-val" id="ap-ip-val">192.168.4.1</span>
<span class="ip-lbl" style="margin-left:12px;">클라이언트</span>
<span class="ip-val" id="ap-clients-val">—</span>
</div>
<div class="form-group" style="margin-top:12px;">
<label for="wifi-ssid">AP SSID (네트워크 이름)</label> <label for="wifi-ssid">AP SSID (네트워크 이름)</label>
<input type="text" id="wifi-ssid" placeholder="Byun_CAN_Logger" maxlength="31"> <input type="text" id="wifi-ssid" placeholder="Byun_CAN_Logger" maxlength="31">
<div class="help-text">ESP32가 생성할 WiFi 네트워크 이름입니다 (최대 31자)</div> <div class="help-text">ESP32가 생성할 WiFi 네트워크 이름 (최대 31자)</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="wifi-password">AP Password (비밀번호)</label> <label for="wifi-password">AP Password</label>
<input type="password" id="wifi-password" placeholder="최소 8자 이상" minlength="8" maxlength="63"> <input type="password" id="wifi-password" placeholder="최소 8자 이상 (빈칸=개방)" minlength="8" maxlength="63">
<div class="help-text">WiFi 접속 시 필요한 비밀번호입니다 (8-63자)</div> <div class="help-text">WiFi 접속 비밀번호 (8~63자, 빈칸=개방 네트워크)</div>
</div> </div>
<hr style="margin: 25px 0; border: none; border-top: 1px solid #ddd;"> <hr style="margin:18px 0; border:none; border-top:1px solid var(--border);">
<h3 style="color: #333; font-size: 1.1em; margin-bottom: 15px;">APSTA Mode (AP + Station)</h3> <!-- APSTA Mode -->
<div class="sub-title">
<span>🌐</span>
<span>APSTA Mode (AP + Station)</span>
<span id="sta-live-badge" class="wbadge off" style="margin-left:auto; display:none;">
<span class="wdot"></span>
<span id="sta-badge-text">미연결</span>
</span>
</div>
<div class="checkbox-group"> <div class="checkbox-group">
<input type="checkbox" id="sta-enable" onchange="toggleSTASettings()"> <input type="checkbox" id="sta-enable" onchange="toggleSTA()">
<label for="sta-enable">Station 모드 활성화 (외부 WiFi에 연결)</label> <label for="sta-enable">Station 모드 활성화 — AP를 유지하며 외부 WiFi에 동시 연결</label>
</div>
<div class="help-text" style="margin-left: 30px; margin-bottom: 15px;">
AP와 Station을 동시에 사용하여 인터넷 접속 가능
</div> </div>
<div id="sta-settings" class="sta-settings disabled"> <div id="sta-block" class="sta-block disabled">
<div class="form-group"> <div class="form-group">
<label for="sta-ssid">연결할 WiFi SSID</label> <label for="sta-ssid">연결할 WiFi SSID</label>
<input type="text" id="sta-ssid" placeholder="공유기 이름 입력" maxlength="31"> <div class="ssid-row">
<div class="help-text">연결할 외부 WiFi 네트워크 이름</div> <input type="text" id="sta-ssid" placeholder="공유기 SSID 또는 스캔으로 선택" maxlength="31">
<button class="btn btn-primary btn-small" id="scan-btn" onclick="scanWifi()">🔍 스캔</button>
</div>
<div class="scan-wrap">
<div id="scan-list" class="scan-list"></div>
</div>
<div class="help-text">스캔 버튼으로 주변 네트워크를 검색하거나 직접 입력</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="sta-password">연결할 WiFi Password</label> <label for="sta-password">연결할 WiFi Password</label>
<input type="password" id="sta-password" placeholder="공유기 비밀번호 입력" maxlength="63"> <input type="password" id="sta-password" placeholder="공유기 비밀번호 (개방=빈칸)" maxlength="63">
<div class="help-text">외부 WiFi 비밀번호</div> <div class="help-text">외부 WiFi 비밀번호</div>
</div> </div>
<div id="sta-status" style="display:none;margin-top:9px;padding:8px 12px;background:rgba(67,206,162,.10);border-radius:6px;color:var(--accent);font-weight:600;border:1px solid rgba(67,206,162,.2);"> <!-- STA 연결 상태 -->
✓ WiFi 연결됨: <span id="sta-ip"></span> <div id="sta-ok" class="sta-ok">
<div style="color:var(--accent); font-weight:700; font-size:.83em; margin-bottom:5px;">✓ Station 연결됨</div>
<div class="ip-row" style="margin-top:0; background:transparent; border:none; padding:0; gap:6px;">
<span class="ip-lbl">STA IP</span>
<span class="ip-val" id="sta-ip">—</span>
</div>
</div>
<div id="sta-fail" class="sta-fail">
✗ Station 미연결 — 저장 후 재부팅 시 자동 연결, 이후 30초마다 재시도
</div> </div>
</div> </div>
</div> </div>
<div class="button-group"> <div class="button-group">
<button class="btn-save" onclick="saveSettings()">💾 Save Settings</button> <button class="btn btn-save" onclick="saveSettings()">💾 설정 저장</button>
<button class="btn-cancel" onclick="location.href='/'">← Back to Monitor</button> <button class="btn btn-back" onclick="location.href='/'">← 모니터로</button>
</div> </div>
<div class="info-box" style="margin-top: 30px;"> <div class="info-box">
<div class="info-box-title"> <div class="info-box-title"><span>ℹ️</span><span>중요 안내</span></div>
<span>⚠️</span>
<span>중요 안내</span>
</div>
<div class="info-box-text"> <div class="info-box-text">
• WiFi 설정을 변경한 경우, ESP32를 재부팅해야 새 SSID/비밀번호가 적용됩니다.<br> • WiFi 설정 변경 후 ESP32 재부팅이 필요합니다 (저장 → 리셋 버튼).<br>
• <strong>APSTA 모드:</strong> Station 모드를 활성화하면 ESP32가 AP와 Station을 동시에 사용합니다.<br> • <strong>APSTA 모드:</strong> AP(192.168.4.1)와 외부 WiFi를 동시에 사용합니다.<br>
• Station 모드로 외부 WiFi에 연결하면 인터넷 접속이 가능해집니다.<br> • Station 연결 실패 시에도 AP 모드는 정상 동작하며, 30초마다 자동 재연결을 시도합니다.<br>
• Station 연결 실패 시에도 AP 모드는 정상 동작합니다.<br> • AP와 Station은 같은 채널을 공유하므로 연결 후 AP 채널이 변경될 수 있습니다.
• 설정 저장 후 ESP32의 리셋 버튼을 눌러 재부팅하세요.
</div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
let ws; let ws;
let scanOpen = false;
function initWebSocket() { /* ── WebSocket ─────────────────────────────── */
function initWS() {
const el = document.getElementById('ws-status');
ws = new WebSocket('ws://' + window.location.hostname + ':81/'); ws = new WebSocket('ws://' + window.location.hostname + ':81/');
ws.onopen = function() { ws.onopen = function() {
console.log('WebSocket connected'); el.className = 'connection-status connected';
el.textContent = '● WS';
loadSettings(); loadSettings();
}; };
ws.onclose = function() { ws.onclose = function() {
console.log('WebSocket disconnected'); el.className = 'connection-status disconnected';
showAlert('alert-loading', '연결 끊김. 재연결 시도 중...', 'alert-warning'); el.textContent = '○ WS';
setTimeout(initWebSocket, 3000); showAlert('alert-loading', '연결 끊김. 재연결 중...', 'alert-warning');
setTimeout(initWS, 3000);
}; };
ws.onerror = function(e) { console.error('WS error', e); };
ws.onerror = function(error) {
console.error('WebSocket error:', error);
};
ws.onmessage = function(event) { ws.onmessage = function(event) {
try { try {
const data = JSON.parse(event.data); const d = JSON.parse(event.data);
if (d.type === 'settings') {
if (data.type === 'settings') { applySettings(d);
document.getElementById('wifi-ssid').value = data.ssid || 'Byun_CAN_Logger';
document.getElementById('wifi-password').value = data.password || '';
// STA 모드 설정 로드
document.getElementById('sta-enable').checked = data.staEnable || false;
document.getElementById('sta-ssid').value = data.staSSID || '';
document.getElementById('sta-password').value = data.staPassword || '';
// STA 설정 표시/숨김
toggleSTASettings();
// STA 연결 상태 표시
if (data.staConnected && data.staIP && data.staIP !== '0.0.0.0') {
document.getElementById('sta-ip').textContent = data.staIP;
document.getElementById('sta-status').style.display = 'block';
} else {
document.getElementById('sta-status').style.display = 'none';
}
hideAlert('alert-loading'); hideAlert('alert-loading');
console.log('Settings loaded:', data); } else if (d.type === 'settingsSaved') {
} else if (data.type === 'settingsSaved') { if (d.success) showAlert('alert-success', '✓ 설정 저장 완료! 재부팅 후 적용됩니다.', 'alert-success');
if (data.success) { } else if (d.type === 'update') {
showAlert('alert-success', '설정이 저장되었습니다! 재부팅 후 적용됩니다.', 'alert-success'); updateWifiStatus(d.staConnected, d.staIP, d.apIP, d.apClients);
}
}
} catch (e) {
console.error('Parse error:', e);
} }
} catch(e) { console.error('Parse error', e); }
}; };
} }
/* ── Settings apply ────────────────────────── */
function applySettings(d) {
document.getElementById('wifi-ssid').value = d.ssid || 'Byun_CAN_Logger';
document.getElementById('wifi-password').value = d.password || '';
document.getElementById('sta-enable').checked = d.staEnable || false;
document.getElementById('sta-ssid').value = d.staSSID || '';
document.getElementById('sta-password').value = d.staPassword || '';
toggleSTA();
updateWifiStatus(d.staConnected, d.staIP, d.apIP, d.apClients);
}
/* ── WiFi status UI ────────────────────────── */
function updateWifiStatus(staConn, staIP, apIP, apClients) {
if (apIP && apIP !== '0.0.0.0') {
document.getElementById('ap-ip-val').textContent = apIP;
}
if (apClients !== undefined) {
document.getElementById('ap-clients-val').textContent = apClients + '명';
}
const staEnable = document.getElementById('sta-enable').checked;
const badge = document.getElementById('sta-live-badge');
const btext = document.getElementById('sta-badge-text');
const okBox = document.getElementById('sta-ok');
const failBox= document.getElementById('sta-fail');
const staIpEl= document.getElementById('sta-ip');
if (staEnable) {
badge.style.display = 'inline-flex';
if (staConn && staIP && staIP !== '0.0.0.0') {
badge.className = 'wbadge on';
btext.textContent = staIP;
okBox.style.display = 'block';
failBox.style.display = 'none';
staIpEl.textContent = staIP;
} else {
badge.className = 'wbadge off';
btext.textContent = '미연결';
okBox.style.display = 'none';
failBox.style.display = 'block';
}
} else {
badge.style.display = 'none';
okBox.style.display = 'none';
failBox.style.display = 'none';
}
}
/* ── Load / Save ───────────────────────────── */
function loadSettings() { function loadSettings() {
if (ws && ws.readyState === WebSocket.OPEN) { if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({cmd:'getSettings'})); ws.send(JSON.stringify({cmd:'getSettings'}));
showAlert('alert-loading', '설정을 불러오는 중...', 'alert-info'); showAlert('alert-loading', '⏳ 설정을 불러오는 중...', 'alert-info');
} }
} }
function saveSettings() { function saveSettings() {
const ssid = document.getElementById('wifi-ssid').value.trim(); const ssid = document.getElementById('wifi-ssid').value.trim();
const password = document.getElementById('wifi-password').value; const password = document.getElementById('wifi-password').value;
// STA 모드 설정
const staEnable = document.getElementById('sta-enable').checked; const staEnable = document.getElementById('sta-enable').checked;
const staSSID = document.getElementById('sta-ssid').value.trim(); const staSSID = document.getElementById('sta-ssid').value.trim();
const staPassword = document.getElementById('sta-password').value; const staPass = document.getElementById('sta-password').value;
// 입력 검증 if (!ssid) { showErr('AP SSID를 입력하세요.'); return; }
if (ssid.length === 0) { if (ssid.length > 31) { showErr('AP SSID는 최대 31자입니다.'); return; }
alert('WiFi SSID를 입력하세요.'); if (password.length > 0 && password.length < 8) { showErr('AP 비밀번호는 최소 8자입니다.'); return; }
return; if (password.length > 63) { showErr('AP 비밀번호는 최대 63자입니다.'); 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;
}
// STA 모드 검증
if (staEnable) { if (staEnable) {
if (staSSID.length === 0) { if (!staSSID) { showErr('Station SSID를 입력하세요.'); return; }
alert('Station 모드를 활성화하려면 WiFi SSID를 입력하세요.'); if (staSSID.length > 31) { showErr('Station SSID는 최대 31자입니다.'); return; }
return; if (staPass.length > 0 && staPass.length < 8) { showErr('Station 비밀번호는 최소 8자입니다.'); return; }
} }
if (staSSID.length > 31) {
alert('Station WiFi SSID는 최대 31자까지 입력 가능합니다.');
return;
}
if (staPassword.length > 0 && staPassword.length < 8) {
alert('Station WiFi 비밀번호는 최소 8자 이상이어야 합니다.');
return;
}
}
const settings = {
cmd: 'saveSettings',
ssid: ssid,
password: password,
staEnable: staEnable,
staSSID: staSSID,
staPassword: staPassword
};
if (ws && ws.readyState === WebSocket.OPEN) { if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(settings)); ws.send(JSON.stringify({
console.log('Settings saved:', settings); cmd:'saveSettings', ssid, password,
staEnable, staSSID, staPassword:staPass
}));
} else { } else {
alert('WebSocket 연결이 끊겼습니다. 페이지를 새로고침하세요.'); showErr('WebSocket 연결 끊김. 페이지를 새로고침하세요.');
} }
} }
function showAlert(alertId, message, className) { /* ── WiFi Scan ─────────────────────────────── */
const alert = document.getElementById(alertId); function scanWifi() {
if (alert) { const btn = document.getElementById('scan-btn');
const textElement = alert.querySelector('.alert-text'); const list = document.getElementById('scan-list');
if (textElement && message) { btn.textContent = '⏳ 스캔 중...';
textElement.textContent = message; btn.disabled = true;
} list.innerHTML = '<div class="scan-msg">📡 주변 WiFi 검색 중 (3~5초)...</div>';
list.classList.add('show');
scanOpen = true;
// 기존 클래스 제거 fetch('/wifi-scan')
alert.className = 'alert ' + className; .then(r => r.json())
alert.classList.add('show'); .then(data => {
btn.textContent = '🔍 스캔';
// 3초 후 자동 숨김 (success 알림만) btn.disabled = false;
if (className === 'alert-success') { const nets = (data.networks || []).sort((a,b) => b.rssi - a.rssi);
setTimeout(() => { if (nets.length === 0) {
hideAlert(alertId); list.innerHTML = '<div class="scan-msg">검색된 네트워크 없음</div>';
}, 5000); return;
} }
} list.innerHTML = nets.map(n => {
} const bars = n.rssi >= -60 ? '▂▄▆█' :
n.rssi >= -75 ? '▂▄▆·' :
function hideAlert(alertId) { n.rssi >= -85 ? '▂▄··' : '▂···';
const alert = document.getElementById(alertId); const lock = n.enc ? '🔒' : '🔓';
if (alert) { const ch = n.channel ? ' ch' + n.channel : '';
alert.classList.remove('show'); const ssid = n.ssid || '(숨김 네트워크)';
} return '<div class="scan-item" onclick="selectSSID(\'' +
} ssid.replace(/\\/g,'\\\\').replace(/'/g,"\\'") + '\')">' +
'<span class="scan-ssid">' + ssid + '</span>' +
function toggleSTASettings() { '<span class="scan-meta">' + lock + ' ' + bars + ' ' + n.rssi + 'dBm' + ch + '</span>' +
const staEnable = document.getElementById('sta-enable').checked; '</div>';
const staSettings = document.getElementById('sta-settings'); }).join('');
})
if (staEnable) { .catch(err => {
staSettings.classList.remove('disabled'); btn.textContent = '🔍 스캔';
} else { btn.disabled = false;
staSettings.classList.add('disabled'); list.innerHTML = '<div class="scan-msg">스캔 실패 — 다시 시도하세요</div>';
} console.error('Scan error:', err);
}
// 페이지 로드 시 WebSocket 연결
window.addEventListener('load', function() {
initWebSocket();
}); });
}
function selectSSID(ssid) {
document.getElementById('sta-ssid').value = ssid;
document.getElementById('scan-list').classList.remove('show');
document.getElementById('sta-password').focus();
scanOpen = false;
}
document.addEventListener('click', function(e) {
if (scanOpen &&
!e.target.closest('.scan-wrap') &&
!e.target.closest('#scan-btn')) {
document.getElementById('scan-list').classList.remove('show');
scanOpen = false;
}
});
/* ── STA toggle ────────────────────────────── */
function toggleSTA() {
const en = document.getElementById('sta-enable').checked;
const blk = document.getElementById('sta-block');
const bdg = document.getElementById('sta-live-badge');
blk.classList.toggle('disabled', !en);
bdg.style.display = en ? 'inline-flex' : 'none';
if (!en) {
document.getElementById('sta-ok').style.display = 'none';
document.getElementById('sta-fail').style.display = 'none';
}
}
/* ── Alert helpers ─────────────────────────── */
function showAlert(id, msg, cls) {
const el = document.getElementById(id);
if (!el) return;
const t = el.querySelector('.alert-text');
if (t && msg) t.textContent = msg;
el.className = 'alert ' + cls + ' show';
if (cls === 'alert-success') setTimeout(() => hideAlert(id), 5000);
}
function hideAlert(id) {
const el = document.getElementById(id);
if (el) el.classList.remove('show');
}
function showErr(msg) { showAlert('alert-error', msg, 'alert-warning'); }
window.addEventListener('load', initWS);
</script> </script>
</body> </body>
</html> </html>