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); }
/* Send / Stats */
.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-controls { display:flex; gap:8px; align-items:center; }
.send-controls input { flex:1; }
@@ -379,11 +381,23 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
<div class="send-panel">
<h3>📤 Send Data</h3>
<div class="send-controls">
<input type="text" id="sendInput" placeholder="Enter HEX data (e.g., 01 03 00 00 00 0A)" />
<button class="btn btn-primary" onclick="sendData()">Send</button>
<input type="text" id="sendInput" placeholder="HEX 입력 (예: FF A0 01 또는 FFA001)" />
<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 class="stats">
<h3>📊 Statistics</h3>
<div class="stat-grid">
@@ -410,6 +424,8 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
<script>
let ws;
let pingTimer = null;
let webLogEnabled = false;
let autoScroll = true;
let rxCount = 0;
let txCount = 0;
@@ -514,22 +530,24 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
ws.onopen = function() {
console.log('WebSocket Connected');
addToTerminal('System', '🟢 Connected to Serial2 Terminal');
// 시간 동기화
setTimeout(function() {
syncTimeFromPhone();
}, 500);
addToTerminal('System', '🟢 Serial2 연결됨 | GPIO6=TX / GPIO7=RX');
setTimeout(syncTimeFromPhone, 500);
if (pingTimer) clearInterval(pingTimer);
pingTimer = setInterval(function(){
if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({cmd:'ping'}));
}, 20000);
};
ws.onmessage = function(event) {
try {
const data = JSON.parse(event.data);
if (data.type === 'serial2') {
handleSerialData(data);
if (data.type === 's2') {
// ★ 펌웨어 직접 전송 시리얼 패킷 {tx:bool, d:hex, ts:ms}
handlePacket(data.tx, data.d, data.ts);
} else if (data.type === 'serial2Status' || data.type === 'update') {
updateStatus(data);
} else if (data.type === 'pong') {
// keepalive
}
} catch (e) {
console.error('Parse error:', e);
@@ -537,8 +555,8 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
};
ws.onclose = function() {
console.log('WebSocket Disconnected');
addToTerminal('System', '🔴 Disconnected from server. Reconnecting...');
if (pingTimer) { clearInterval(pingTimer); pingTimer = null; }
addToTerminal('System', '🔴 연결 끊김. 재연결 중...');
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) {
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') {
rxCount += data.data.length;
document.getElementById('rxCount').textContent = rxCount;
@@ -974,27 +1041,54 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
function sendData() {
const input = document.getElementById('sendInput');
const hexData = input.value.replace(/[^0-9A-Fa-f]/g, '');
if (hexData.length === 0) {
alert('Please enter valid HEX data');
return;
}
if (hexData.length % 2 !== 0) {
alert('HEX data must have even number of characters');
return;
}
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 % 2 !== 0) { alert('HEX는 짝수 자리 (1바이트=2자리)\n예) FF→1바이트, FF01→2바이트'); return; }
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({
cmd: 'sendSerial2',
data: hexData
}));
ws.send(JSON.stringify({ cmd: 'sendSerial2', data: hexData }));
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() {

168
serial_terminal.h
View File

@@ -255,6 +255,8 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
.modbus-error { color:var(--red); }
/* Send / Stats */
.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-controls { display:flex; gap:8px; align-items:center; }
.send-controls input { flex:1; }
@@ -379,11 +381,24 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
<div class="send-panel">
<h3>📤 Send Data</h3>
<div class="send-controls">
<input type="text" id="sendInput" placeholder="Enter HEX data (e.g., 01 03 00 00 00 0A)" />
<button class="btn btn-primary" onclick="sendData()">Send</button>
<input type="text" id="sendInput" placeholder="HEX 입력 (예: FF A0 01 또는 FFA001)" />
<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 class="stats">
<h3>📊 Statistics</h3>
<div class="stat-grid">
@@ -410,6 +425,9 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
<script>
let ws;
let pingTimer = null;
let webLogEnabled = false;
let usbMirrorEnabled = false;
let autoScroll = true;
let rxCount = 0;
let txCount = 0;
@@ -514,22 +532,26 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
ws.onopen = function() {
console.log('WebSocket Connected');
addToTerminal('System', '🟢 Connected to Serial1 Terminal');
// 시간 동기화
setTimeout(function() {
syncTimeFromPhone();
}, 500);
addToTerminal('System', '🟢 Serial1 연결됨 | GPIO17=TX / GPIO18=RX');
setTimeout(syncTimeFromPhone, 500);
if (pingTimer) clearInterval(pingTimer);
pingTimer = setInterval(function(){
if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({cmd:'ping'}));
}, 20000);
};
ws.onmessage = function(event) {
try {
const data = JSON.parse(event.data);
if (data.type === 'serial') {
handleSerialData(data);
if (data.type === 's1') {
// ★ 펌웨어 직접 전송 시리얼 패킷 {tx:bool, d:hex, ts:ms}
handlePacket(data.tx, data.d, data.ts);
} else if (data.type === 'serialStatus' || data.type === 'update') {
updateStatus(data);
} else if (data.type === 'pong') {
// keepalive } else if (data.type === 'usbMirrorState') {
usbMirrorEnabled = data.enabled;
updateToggle('btn-usbmirror', usbMirrorEnabled, '🔌 USB Mirror');
}
} catch (e) {
console.error('Parse error:', e);
@@ -537,8 +559,8 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
};
ws.onclose = function() {
console.log('WebSocket Disconnected');
addToTerminal('System', '🔴 Disconnected from server. Reconnecting...');
if (pingTimer) { clearInterval(pingTimer); pingTimer = null; }
addToTerminal('System', '🔴 연결 끊김. 재연결 중...');
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) {
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') {
rxCount += data.data.length;
document.getElementById('rxCount').textContent = rxCount;
@@ -974,27 +1045,60 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
function sendData() {
const input = document.getElementById('sendInput');
const hexData = input.value.replace(/[^0-9A-Fa-f]/g, '');
if (hexData.length === 0) {
alert('Please enter valid HEX data');
return;
}
if (hexData.length % 2 !== 0) {
alert('HEX data must have even number of characters');
return;
}
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 % 2 !== 0) { alert('HEX는 짝수 자리 (1바이트=2자리)\n예) FF→1바이트, FF01→2바이트'); return; }
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({
cmd: 'sendSerial',
data: hexData
}));
ws.send(JSON.stringify({ cmd: 'sendSerial', data: hexData }));
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() {

588
settings.h
View File

@@ -31,31 +31,16 @@ const char settings_html[] PROGMEM = R"rawliteral(
background: var(--bg); color: var(--text);
overflow-x: hidden; font-size: 14px;
}
/* Header */
.header {
background: linear-gradient(135deg,#1a2744 0%,#1e1a3a 100%);
padding: 11px 16px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.header h1 {
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; }
.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 */
.header h1 { 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; }
.nav {
background: var(--panel); border-bottom: 1px solid var(--border);
display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display:none; }
.nav a {
@@ -65,97 +50,66 @@ const char settings_html[] PROGMEM = R"rawliteral(
border-bottom: 2px solid transparent; white-space: nowrap;
transition: color .2s, border-color .2s;
}
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Content */
.nav a:hover { color:var(--text); }
.nav a.active { color:var(--accent); border-bottom-color:var(--accent); }
.content { padding: 12px; }
/* Headings */
h2 {
color: var(--accent); margin: 14px 0 10px;
font-size: 0.82em; font-weight: 700; text-transform: uppercase;
letter-spacing: .5px; padding-bottom: 6px;
border-bottom: 1px solid var(--border);
color:var(--accent); margin:14px 0 10px;
font-size:0.82em; font-weight:700; text-transform:uppercase;
letter-spacing:.5px; padding-bottom:6px; border-bottom:1px solid var(--border);
}
h3 {
color: var(--text); font-size: 0.85em; font-weight: 600;
margin-bottom: 10px; padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
/* Buttons */
h3 { color:var(--text); font-size:0.85em; font-weight:600; margin-bottom:10px; }
.btn, button {
padding: 6px 13px; border: 1px solid var(--border);
border-radius: var(--r); background: var(--bg); color: var(--muted);
font-size: 0.8em; font-weight: 600; cursor: pointer;
font-family: inherit; transition: all .15s; white-space: nowrap;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
padding:6px 13px; border:1px solid var(--border);
border-radius:var(--r); background:var(--bg); color:var(--muted);
font-size:0.8em; font-weight:600; cursor:pointer;
font-family:inherit; transition:all .15s; white-space:nowrap;
-webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.btn:hover, button:hover { border-color: var(--accent); color: var(--accent); }
.btn:active, button:active { transform: scale(.97); }
.btn:hover, button:hover { border-color:var(--accent); color:var(--accent); }
.btn:active, button:active { transform:scale(.97); }
.btn-primary { border-color:var(--blue); color:var(--blue); }
.btn-success { border-color:var(--accent); color:var(--accent); }
.btn-danger { border-color:var(--red); color:var(--red); }
.btn-warning { border-color:var(--yellow); color:var(--yellow); }
.btn-secondary{ border-color:var(--muted); color:var(--muted); }
.btn-warning { border-color:var(--yellow);color:var(--yellow);}
.btn-secondary { border-color:var(--muted); color:var(--muted); }
.btn-primary:hover { background:rgba(88,166,255,.10); }
.btn-success:hover { background:rgba(67,206,162,.10); }
.btn-danger:hover { background:rgba(248,81,73,.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; }
.button-group, .btn-group { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
/* Forms */
.button-group { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
label {
display:block; font-weight:600; color:var(--muted);
margin-bottom:4px; font-size:.78em;
text-transform:uppercase; letter-spacing:.3px;
}
input[type="text"], input[type="password"], input[type="number"],
select, textarea {
input[type="text"], input[type="password"], input[type="number"], select, textarea {
width:100%; padding:7px 10px;
border:1px solid var(--border); border-radius:var(--r);
font-size:.85em; font-family:inherit;
background:var(--bg); color:var(--text);
transition:border-color .2s;
background:var(--bg); color:var(--text); transition:border-color .2s;
}
input:focus, select:focus, textarea:focus {
outline:none; border-color:var(--accent);
box-shadow:0 0 0 2px rgba(67,206,162,.10);
}
input[type="checkbox"], input[type="radio"] {
width:15px; height:15px; cursor:pointer; accent-color:var(--accent);
}
input[type="checkbox"] { width:15px; height:15px; cursor:pointer; accent-color:var(--accent); }
select option { background:var(--panel); color:var(--text); }
/* Panels */
.section, .settings-section, .send-panel, .stats,
.control-panel, .auto-trigger-section {
.settings-section {
background:var(--panel); border:1px solid var(--border);
border-radius:var(--r); padding:13px; margin-bottom:10px;
}
.form-group { margin-bottom:12px; }
.form-group:last-child { margin-bottom:0; }
.help-text { font-size:.76em; color:var(--muted); margin-top:4px; line-height:1.4; }
.form-row {
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 {
.checkbox-group {
display:flex; align-items:center; gap:8px;
margin-bottom:8px; padding:7px 10px;
background:var(--card); border-radius:6px; border:1px solid var(--border);
}
.checkbox-group label, .checkbox-row label {
text-transform:none; cursor:pointer; margin-bottom:0;
color:var(--text); font-size:.85em; letter-spacing:0;
}
/* Alerts */
.checkbox-group label { text-transform:none; cursor:pointer; margin-bottom:0; color:var(--text); font-size:.85em; letter-spacing:0; }
.alert {
padding:9px 13px; border-radius:var(--r);
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-icon { font-size:1.15em; }
.alert-text { flex:1; }
@keyframes slideDown { from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);} }
/* Connection status */
.connection-status {
position:fixed; top:10px; right:10px;
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.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.h specific */
/* ── Settings-specific ── */
.section-title {
color:var(--accent); font-size:.85em; font-weight:700;
margin-bottom:14px; padding-bottom:7px; border-bottom:1px solid var(--border);
display:flex; align-items:center; gap:7px;
text-transform:uppercase; letter-spacing:.4px;
display:flex; align-items:center; gap:7px; 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);
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: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-cancel:hover { background:rgba(139,148,158,.10); }
.btn-back { border-color:var(--muted); color:var(--muted); flex:1; min-width:130px; padding:9px 18px; }
.btn-back:hover { background:rgba(139,148,158,.10); }
.info-box {
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-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>
</head>
<body>
<div id="ws-status" class="connection-status disconnected">○ WS</div>
<div class="header">
<h1>⚙️ Settings</h1>
<p>Configure WiFi and System Settings</p>
<p>WiFi 및 시스템 설정</p>
</div>
<div class="nav">
@@ -226,12 +239,15 @@ const char settings_html[] PROGMEM = R"rawliteral(
<div class="content">
<div id="alert-success" class="alert alert-success">
<span class="alert-icon">✓</span>
<span class="alert-text">Settings saved successfully!</span>
<span class="alert-text">설정이 저장되었습니다! 재부팅 후 적용됩니다.</span>
</div>
<div id="alert-loading" class="alert alert-info">
<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 class="settings-section">
@@ -240,243 +256,305 @@ const char settings_html[] PROGMEM = R"rawliteral(
<span>WiFi Configuration</span>
</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>
<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 class="form-group">
<label for="wifi-password">AP Password (비밀번호)</label>
<input type="password" id="wifi-password" placeholder="최소 8자 이상" minlength="8" maxlength="63">
<div class="help-text">WiFi 접속 시 필요한 비밀번호입니다 (8-63자)</div>
<label for="wifi-password">AP Password</label>
<input type="password" id="wifi-password" placeholder="최소 8자 이상 (빈칸=개방)" minlength="8" maxlength="63">
<div class="help-text">WiFi 접속 비밀번호 (8~63자, 빈칸=개방 네트워크)</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">
<input type="checkbox" id="sta-enable" onchange="toggleSTASettings()">
<label for="sta-enable">Station 모드 활성화 (외부 WiFi에 연결)</label>
</div>
<div class="help-text" style="margin-left: 30px; margin-bottom: 15px;">
AP와 Station을 동시에 사용하여 인터넷 접속 가능
<input type="checkbox" id="sta-enable" onchange="toggleSTA()">
<label for="sta-enable">Station 모드 활성화 — AP를 유지하며 외부 WiFi에 동시 연결</label>
</div>
<div id="sta-settings" class="sta-settings disabled">
<div id="sta-block" class="sta-block disabled">
<div class="form-group">
<label for="sta-ssid">연결할 WiFi SSID</label>
<input type="text" id="sta-ssid" placeholder="공유기 이름 입력" maxlength="31">
<div class="help-text">연결할 외부 WiFi 네트워크 이름</div>
<div class="ssid-row">
<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 class="form-group">
<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>
<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);">
✓ WiFi 연결됨: <span id="sta-ip"></span>
<!-- STA 연결 상태 -->
<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 class="button-group">
<button class="btn-save" onclick="saveSettings()">💾 Save Settings</button>
<button class="btn-cancel" onclick="location.href='/'">← Back to Monitor</button>
<button class="btn btn-save" onclick="saveSettings()">💾 설정 저장</button>
<button class="btn btn-back" onclick="location.href='/'">← 모니터로</button>
</div>
<div class="info-box" style="margin-top: 30px;">
<div class="info-box-title">
<span>⚠️</span>
<span>중요 안내</span>
</div>
<div class="info-box">
<div class="info-box-title"><span>ℹ️</span><span>중요 안내</span></div>
<div class="info-box-text">
• WiFi 설정을 변경한 경우, ESP32를 재부팅해야 새 SSID/비밀번호가 적용됩니다.<br>
• <strong>APSTA 모드:</strong> Station 모드를 활성화하면 ESP32가 AP와 Station을 동시에 사용합니다.<br>
• Station 모드로 외부 WiFi에 연결하면 인터넷 접속이 가능해집니다.<br>
• Station 연결 실패 시에도 AP 모드는 정상 동작합니다.<br>
• 설정 저장 후 ESP32의 리셋 버튼을 눌러 재부팅하세요.
</div>
• WiFi 설정 변경 후 ESP32 재부팅이 필요합니다 (저장 → 리셋 버튼).<br>
• <strong>APSTA 모드:</strong> AP(192.168.4.1)와 외부 WiFi를 동시에 사용합니다.<br>
• Station 연결 실패 시에도 AP 모드는 정상 동작하며, 30초마다 자동 재연결을 시도합니다.<br>
• AP와 Station은 같은 채널을 공유하므로 연결 후 AP 채널이 변경될 수 있습니다.
</div>
</div>
</div>
<script>
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.onopen = function() {
console.log('WebSocket connected');
el.className = 'connection-status connected';
el.textContent = '● WS';
loadSettings();
};
ws.onclose = function() {
console.log('WebSocket disconnected');
showAlert('alert-loading', '연결 끊김. 재연결 시도 중...', 'alert-warning');
setTimeout(initWebSocket, 3000);
el.className = 'connection-status disconnected';
el.textContent = '○ WS';
showAlert('alert-loading', '연결 끊김. 재연결 중...', 'alert-warning');
setTimeout(initWS, 3000);
};
ws.onerror = function(error) {
console.error('WebSocket error:', error);
};
ws.onerror = function(e) { console.error('WS error', e); };
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 || '';
// 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';
}
const d = JSON.parse(event.data);
if (d.type === 'settings') {
applySettings(d);
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);
} else if (d.type === 'settingsSaved') {
if (d.success) showAlert('alert-success', '✓ 설정 저장 완료! 재부팅 후 적용됩니다.', 'alert-success');
} else if (d.type === 'update') {
updateWifiStatus(d.staConnected, d.staIP, d.apIP, d.apClients);
}
} 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() {
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({cmd: 'getSettings'}));
showAlert('alert-loading', '설정을 불러오는 중...', 'alert-info');
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;
// STA 모드 설정
const staEnable = document.getElementById('sta-enable').checked;
const staSSID = document.getElementById('sta-ssid').value.trim();
const staPassword = document.getElementById('sta-password').value;
const staPass = document.getElementById('sta-password').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;
}
// STA 모드 검증
if (!ssid) { showErr('AP SSID를 입력하세요.'); return; }
if (ssid.length > 31) { showErr('AP SSID는 최대 31자입니다.'); return; }
if (password.length > 0 && password.length < 8) { showErr('AP 비밀번호는 최소 8자입니다.'); return; }
if (password.length > 63) { showErr('AP 비밀번호는 최대 63자입니다.'); return; }
if (staEnable) {
if (staSSID.length === 0) {
alert('Station 모드를 활성화하려면 WiFi SSID를 입력하세요.');
return;
if (!staSSID) { showErr('Station SSID를 입력하세요.'); return; }
if (staSSID.length > 31) { showErr('Station SSID는 최대 31자입니다.'); 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) {
ws.send(JSON.stringify(settings));
console.log('Settings saved:', settings);
ws.send(JSON.stringify({
cmd:'saveSettings', ssid, password,
staEnable, staSSID, staPassword:staPass
}));
} else {
alert('WebSocket 연결이 끊겼습니다. 페이지를 새로고침하세요.');
showErr('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;
}
/* ── WiFi Scan ─────────────────────────────── */
function scanWifi() {
const btn = document.getElementById('scan-btn');
const list = document.getElementById('scan-list');
btn.textContent = '⏳ 스캔 중...';
btn.disabled = true;
list.innerHTML = '<div class="scan-msg">📡 주변 WiFi 검색 중 (3~5초)...</div>';
list.classList.add('show');
scanOpen = true;
// 기존 클래스 제거
alert.className = 'alert ' + className;
alert.classList.add('show');
// 3초 후 자동 숨김 (success 알림만)
if (className === 'alert-success') {
setTimeout(() => {
hideAlert(alertId);
}, 5000);
fetch('/wifi-scan')
.then(r => r.json())
.then(data => {
btn.textContent = '🔍 스캔';
btn.disabled = false;
const nets = (data.networks || []).sort((a,b) => b.rssi - a.rssi);
if (nets.length === 0) {
list.innerHTML = '<div class="scan-msg">검색된 네트워크 없음</div>';
return;
}
}
}
function hideAlert(alertId) {
const alert = document.getElementById(alertId);
if (alert) {
alert.classList.remove('show');
}
}
function toggleSTASettings() {
const staEnable = document.getElementById('sta-enable').checked;
const staSettings = document.getElementById('sta-settings');
if (staEnable) {
staSettings.classList.remove('disabled');
} else {
staSettings.classList.add('disabled');
}
}
// 페이지 로드 시 WebSocket 연결
window.addEventListener('load', function() {
initWebSocket();
list.innerHTML = nets.map(n => {
const bars = n.rssi >= -60 ? '▂▄▆█' :
n.rssi >= -75 ? '▂▄▆·' :
n.rssi >= -85 ? '▂▄··' : '▂···';
const lock = n.enc ? '🔒' : '🔓';
const ch = n.channel ? ' ch' + n.channel : '';
const ssid = n.ssid || '(숨김 네트워크)';
return '<div class="scan-item" onclick="selectSSID(\'' +
ssid.replace(/\\/g,'\\\\').replace(/'/g,"\\'") + '\')">' +
'<span class="scan-ssid">' + ssid + '</span>' +
'<span class="scan-meta">' + lock + ' ' + bars + ' ' + n.rssi + 'dBm' + ch + '</span>' +
'</div>';
}).join('');
})
.catch(err => {
btn.textContent = '🔍 스캔';
btn.disabled = false;
list.innerHTML = '<div class="scan-msg">스캔 실패 — 다시 시도하세요</div>';
console.error('Scan error:', err);
});
}
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>
</body>
</html>