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

APSTA모드 추가

Browse Source
This commit is contained in:
byun
2025-11-09 13:56:03 +00:00
parent c707644c6a
commit d6c74f1b06
2 changed files with 229 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
settings.h
View File

@@ -99,11 +99,11 @@ const char settings_html[] PROGMEM = R"rawliteral(
input[type="password"] {
width: 100%;
padding: 12px 15px;
border: 2px solid #ddd;
border: 2px solid #e1e8ed;
border-radius: 8px;
font-size: 1em;
font-size: 0.95em;
transition: all 0.3s;
font-family: inherit;
background: white;
}
input[type="text"]:focus,
@@ -113,6 +113,38 @@ const char settings_html[] PROGMEM = R"rawliteral(
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 10px;
}
.checkbox-group {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.checkbox-group label {
margin-bottom: 0;
cursor: pointer;
user-select: none;
}
.sta-settings {
background: #f0f4f8;
padding: 20px;
border-radius: 8px;
margin-top: 15px;
border-left: 4px solid #667eea;
}
.sta-settings.disabled {
opacity: 0.5;
pointer-events: none;
}
.button-group {
display: flex;
gap: 15px;
@@ -273,17 +305,49 @@ 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>
<div class="form-group">
<label for="wifi-ssid">WiFi SSID (네트워크 이름)</label>
<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>
<div class="form-group">
<label for="wifi-password">WiFi Password (비밀번호)</label>
<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;">
<h3 style="color: #333; font-size: 1.1em; margin-bottom: 15px;">APSTA Mode (AP + Station)</h3>
<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을 동시에 사용하여 인터넷 접속 가능
</div>
<div id="sta-settings" class="sta-settings 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>
<div class="form-group">
<label for="sta-password">연결할 WiFi Password</label>
<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: 15px; padding: 12px; background: #e8f5e9; border-radius: 6px; color: #2e7d32; font-weight: 600;">
✓ WiFi 연결됨: <span id="sta-ip"></span>
</div>
</div>
</div>
<div class="button-group">
@@ -298,8 +362,9 @@ const char settings_html[] PROGMEM = R"rawliteral(
</div>
<div class="info-box-text">
• WiFi 설정을 변경한 경우, ESP32를 재부팅해야 새 SSID/비밀번호가 적용됩니다.<br>
• 시간 설정은 모니터 페이지에서 "Sync from Phone" 버튼을 눌러 핸드폰 시간과 동기화할 수 있습니다.<br>
• RTC 모듈이 연결된 경우, 시간이 자동으로 보정됩니다.<br>
• <strong>APSTA 모드:</strong> Station 모드를 활성화하면 ESP32가 AP와 Station을 동시에 사용합니다.<br>
• Station 모드로 외부 WiFi에 연결하면 인터넷 접속이 가능해집니다.<br>
• Station 연결 실패 시에도 AP 모드는 정상 동작합니다.<br>
• 설정 저장 후 ESP32의 리셋 버튼을 눌러 재부팅하세요.
</div>
</div>
@@ -335,6 +400,22 @@ const char settings_html[] PROGMEM = R"rawliteral(
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');
console.log('Settings loaded:', data);
} else if (data.type === 'settingsSaved') {
@@ -359,6 +440,11 @@ const char settings_html[] PROGMEM = R"rawliteral(
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;
// 입력 검증
if (ssid.length === 0) {
alert('WiFi SSID를 입력하세요.');
@@ -380,10 +466,29 @@ const char settings_html[] PROGMEM = R"rawliteral(
return;
}
// STA 모드 검증
if (staEnable) {
if (staSSID.length === 0) {
alert('Station 모드를 활성화하려면 WiFi SSID를 입력하세요.');
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
password: password,
staEnable: staEnable,
staSSID: staSSID,
staPassword: staPassword
};
if (ws && ws.readyState === WebSocket.OPEN) {
@@ -422,6 +527,17 @@ const char settings_html[] PROGMEM = R"rawliteral(
}
}
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();