파일 커멘트 추가, can mode 항목 추가,

현재 고쳐햐 할 점으로 can 중지 시 que가 적산됨 2025년 11월 6일 오전 3:30 GMT+9 작성 내용 기반으로 esp32 로 mcp2515, sdcard 를 spi 로 연결하여 can 최대 속도를 빠짐 없이 실시간 로깅하는 코드야 RTC DS3231로 i2c 연결(softwire 라이브러리)하여 esp32의 시간데이터를 보정하는 기능으로 보다 신뢰성 있는 로깅을 해주지, wifi ap로 연결하면 monitoring페이지가 있고 모니터링 페이지에 초기 접속 시(로깅하지 않은상태) 핸드폰의 시간을 rtc에 저장 하고 시스템 시간을 핸드폰시간으로 맞춰줘 그리고 log files 항목에 파일 리스트를 보여주는데 사용자가 커멘트입력하여 차후 어떤 파일인지 알 수 있게 해줘 또한 컨트롤 패널 항목에 추가로 MCP2515의 CAN 모드를 넣어 MCP2515컨트롤 loop-back, normal, listen-only모드 등을 넣어 사용자가 상황에 맞게 mcp2515를 동작시키게 해줘, settings 페이지에서는 timezone은 불필요한것 같아 삭제 해줘, 이 요구사항을 우선 첨부한 코드를 분석하고 해당 요구사항을 적용하여 수정해줘, 참고로 transmit 페이지는 파일용량이 커서 첨부에 뺐으니 빼고 수정해줘(수정과 상관 없는 graph.h, graph_viewer.h,transmit.h 는 첨부에 뺐음)
2025-11-07 09:54:14 +00:00
parent 73e8789f56
commit 37da387904
3 changed files with 1064 additions and 1453 deletions
--- a/ESP32_CAN_Logger.ino
+++ b/ESP32_CAN_Logger.ino
--- a/index.h
+++ b/index.h
--- a/settings.h
+++ b/settings.h
@@ -96,8 +96,7 @@ const char settings_html[] PROGMEM = R"rawliteral(
        }
        
        input[type="text"],
-        input[type="password"],
-        select {
+        input[type="password"] {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #ddd;
@@ -108,18 +107,12 @@ const char settings_html[] PROGMEM = R"rawliteral(
        }
        
        input[type="text"]:focus,
-        input[type="password"]:focus,
-        select:focus {
+        input[type="password"]:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
-        .timezone-select {
-            background: white;
-            cursor: pointer;
-        }
-        
        .button-group {
            display: flex;
            gap: 15px;
@@ -163,17 +156,6 @@ const char settings_html[] PROGMEM = R"rawliteral(
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
        
-        .btn-reboot {
-            background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
-            color: white;
-            box-shadow: 0 4px 15px rgba(235, 51, 73, 0.3);
-        }
-        
-        .btn-reboot:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(235, 51, 73, 0.4);
-        }
-        
        button:active {
            transform: translateY(0);
        }
@@ -228,16 +210,16 @@ const char settings_html[] PROGMEM = R"rawliteral(
        }
        
        .info-box {
-            background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
+            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+            border-left: 4px solid #667eea;
            padding: 15px 20px;
            border-radius: 8px;
-            border-left: 4px solid #00acc1;
-            margin-top: 20px;
+            margin-top: 15px;
        }
        
        .info-box-title {
            font-weight: 700;
-            color: #006064;
+            color: #333;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
@@ -245,7 +227,7 @@ const char settings_html[] PROGMEM = R"rawliteral(
        }
        
        .info-box-text {
-            color: #00838f;
+            color: #555;
            font-size: 0.9em;
            line-height: 1.6;
        }
@@ -253,13 +235,9 @@ const char settings_html[] PROGMEM = R"rawliteral(
        @media (max-width: 768px) {
            .content { padding: 20px; }
            .settings-section { padding: 20px; }
-            .button-group {
-                flex-direction: column;
-            }
-            button {
-                width: 100%;
-                min-width: auto;
-            }
+            .section-title { font-size: 1.1em; }
+            button { min-width: 100%; }
+            .button-group { flex-direction: column; }
        }
    </style>
 </head>
@@ -267,31 +245,32 @@ const char settings_html[] PROGMEM = R"rawliteral(
    <div class="container">
        <div class="header">
            <h1>⚙️ Settings</h1>
-            <p>WiFi & Timezone Configuration</p>
+            <p>Configure WiFi and System Settings</p>
        </div>
        
        <div class="nav">
-            <a href="/">Monitor</a>
-            <a href="/transmit">Transmit</a>
-            <a href="/graph">Graph</a>
+            <a href="/">📊 Monitor</a>
+            <a href="/transmit">📤 Transmit</a>
+            <a href="/graph">📈 Graph</a>
+            <a href="/graph-view">📊 Graph View</a>
            <a href="/settings" class="active">⚙️ Settings</a>
        </div>
        
        <div class="content">
            <div id="alert-success" class="alert alert-success">
                <span class="alert-icon">✓</span>
-                <span class="alert-text">설정이 저장되었습니다! 재부팅 후 적용됩니다.</span>
+                <span class="alert-text">Settings saved successfully!</span>
            </div>
            
            <div id="alert-loading" class="alert alert-info">
                <span class="alert-icon">⏳</span>
-                <span class="alert-text">설정을 불러오는 중...</span>
+                <span class="alert-text">Loading settings...</span>
            </div>
            
            <div class="settings-section">
                <div class="section-title">
-                    <span>📡</span>
-                    <span>WiFi Access Point</span>
+                    <span>📶</span>
+                    <span>WiFi Configuration</span>
                </div>
                
                <div class="form-group">
@@ -307,63 +286,6 @@ const char settings_html[] PROGMEM = R"rawliteral(
                </div>
            </div>
            
-            <div class="settings-section">
-                <div class="section-title">
-                    <span>🌏</span>
-                    <span>Timezone Configuration</span>
-                </div>
-                
-                <div class="form-group">
-                    <label for="timezone">타임존 (Time Zone)</label>
-                    <select id="timezone" class="timezone-select">
-                        <option value="-12">UTC-12:00 - Baker Island</option>
-                        <option value="-11">UTC-11:00 - American Samoa</option>
-                        <option value="-10">UTC-10:00 - Hawaii</option>
-                        <option value="-9">UTC-09:00 - Alaska</option>
-                        <option value="-8">UTC-08:00 - Pacific Time (Los Angeles)</option>
-                        <option value="-7">UTC-07:00 - Mountain Time (Denver)</option>
-                        <option value="-6">UTC-06:00 - Central Time (Chicago)</option>
-                        <option value="-5">UTC-05:00 - Eastern Time (New York)</option>
-                        <option value="-4">UTC-04:00 - Atlantic Time</option>
-                        <option value="-3">UTC-03:00 - Buenos Aires, São Paulo</option>
-                        <option value="-2">UTC-02:00 - Mid-Atlantic</option>
-                        <option value="-1">UTC-01:00 - Azores</option>
-                        <option value="0">UTC±00:00 - London, Dublin</option>
-                        <option value="1">UTC+01:00 - Paris, Berlin, Rome</option>
-                        <option value="2">UTC+02:00 - Athens, Cairo</option>
-                        <option value="3">UTC+03:00 - Moscow, Istanbul</option>
-                        <option value="4">UTC+04:00 - Dubai</option>
-                        <option value="5">UTC+05:00 - Karachi</option>
-                        <option value="5.5">UTC+05:30 - India, Sri Lanka</option>
-                        <option value="6">UTC+06:00 - Dhaka</option>
-                        <option value="7">UTC+07:00 - Bangkok, Jakarta</option>
-                        <option value="8">UTC+08:00 - Beijing, Singapore, Hong Kong</option>
-                        <option value="9" selected>UTC+09:00 - Seoul, Tokyo</option>
-                        <option value="10">UTC+10:00 - Sydney</option>
-                        <option value="11">UTC+11:00 - Solomon Islands</option>
-                        <option value="12">UTC+12:00 - Auckland, Fiji</option>
-                        <option value="13">UTC+13:00 - Samoa</option>
-                        <option value="14">UTC+14:00 - Line Islands</option>
-                    </select>
-                    <div class="help-text">
-                        로그 파일 타임스탬프에 사용될 타임존을 선택하세요. 
-                        서울/도쿄는 UTC+9, 뉴욕은 UTC-5입니다.
-                    </div>
-                </div>
-                
-                <div class="info-box">
-                    <div class="info-box-title">
-                        <span>💡</span>
-                        <span>타임존 정보</span>
-                    </div>
-                    <div class="info-box-text">
-                        • RTC 모듈이 있는 경우: RTC 시간에 타임존 오프셋이 자동으로 적용됩니다.<br>
-                        • RTC 모듈이 없는 경우: 웹페이지의 "시간 동기화" 버튼으로 수동 설정 시 타임존이 적용됩니다.<br>
-                        • 로그 파일명은 항상 선택한 타임존의 현지 시간으로 생성됩니다.
-                    </div>
-                </div>
-            </div>
-            
            <div class="button-group">
                <button class="btn-save" onclick="saveSettings()">💾 Save Settings</button>
                <button class="btn-cancel" onclick="location.href='/'">← Back to Monitor</button>
@@ -376,7 +298,8 @@ const char settings_html[] PROGMEM = R"rawliteral(
                </div>
                <div class="info-box-text">
                    • WiFi 설정을 변경한 경우, ESP32를 재부팅해야 새 SSID/비밀번호가 적용됩니다.<br>
-                    • 타임존 설정은 즉시 적용되며, 다음 로그 파일부터 새로운 시간대가 반영됩니다.<br>
+                    • 시간 설정은 모니터 페이지에서 "Sync from Phone" 버튼을 눌러 핸드폰 시간과 동기화할 수 있습니다.<br>
+                    • RTC 모듈이 연결된 경우, 시간이 자동으로 보정됩니다.<br>
                    • 설정 저장 후 ESP32의 리셋 버튼을 눌러 재부팅하세요.
                </div>
            </div>
@@ -411,7 +334,6 @@ const char settings_html[] PROGMEM = R"rawliteral(
                    if (data.type === 'settings') {
                        document.getElementById('wifi-ssid').value = data.ssid || 'Byun_CAN_Logger';
                        document.getElementById('wifi-password').value = data.password || '';
-                        document.getElementById('timezone').value = data.timezone || 9;
                        
                        hideAlert('alert-loading');
                        console.log('Settings loaded:', data);
@@ -436,7 +358,6 @@ const char settings_html[] PROGMEM = R"rawliteral(
        function saveSettings() {
            const ssid = document.getElementById('wifi-ssid').value.trim();
            const password = document.getElementById('wifi-password').value;
-            const timezone = parseFloat(document.getElementById('timezone').value);
            
            // 입력 검증
            if (ssid.length === 0) {
@@ -462,8 +383,7 @@ const char settings_html[] PROGMEM = R"rawliteral(
            const settings = {
                cmd: 'saveSettings',
                ssid: ssid,
-                password: password,
-                timezone: timezone
+                password: password
            };
            
            if (ws && ws.readyState === WebSocket.OPEN) {