Fix 8 bugs: SD 1-bit mode GPIO conflict, PNG file handle leak, audio stack overflow, null terminator, error degradation logic, modulo div-by-zero, upload file validation, screen clear before PNG draw. Improve web UI with progress bar and toast feedback.

sound_picture_app/Audio_Player.cpp

@@ -29,7 +29,7 @@ void initAudioPlayer() {
     xTaskCreatePinnedToCore(
       audioLoopTask,
       "audioLoopTask",
-      8192, // Stack size (ESP32-audioI2S requires a larger stack size for decoding)
+      16384, // Increased from 8192 — ESP32-audioI2S MP3 decode needs ~12-16KB stack
       NULL,
       5, // Priority
       &audioTaskHandle,
@@ -66,6 +66,14 @@ uint8_t getPlayerVolume() {
   return currentVolume;
 }
 
+// Case-insensitive check if filename ends with a given extension
+static bool hasExtension(const char* name, const char* ext) {
+  size_t nLen = strlen(name);
+  size_t eLen = strlen(ext);
+  if (nLen < eLen) return false;
+  return strcasecmp(name + nLen - eLen, ext) == 0;
+}
+
 void Search_Audio(const char* directory) {
   File Path = SD_MMC.open(directory);
   if (!Path) {
@@ -79,8 +87,8 @@ void Search_Audio(const char* directory) {
   while (file && fileCount < 100) {
     if (!file.isDirectory()) {
       const char* name = file.name();
-      // Match WAV or MP3 files
+      // Case-insensitive extension match to handle FAT32 uppercase names
-      if (strstr(name, ".wav") || strstr(name, ".mp3") || strstr(name, ".WAV") || strstr(name, ".MP3")) {
+      if (hasExtension(name, ".wav") || hasExtension(name, ".mp3")) {
         strncpy(Audio_Names[fileCount], name, sizeof(Audio_Names[fileCount]) - 1);
         Audio_Names[fileCount][sizeof(Audio_Names[fileCount]) - 1] = '\0';
         fileCount++;

sound_picture_app/Display_PNG.cpp

@@ -16,8 +16,8 @@ void * pngOpen(const char *filePath, int32_t *size) {
 }
 
 void pngClose(void *handle) {
-  File Image_file = *((File*)handle);
+  File* fp = (File*)handle;
-  if (Image_file) Image_file.close();
+  if (fp && *fp) fp->close();
 }
 
 int32_t pngRead(PNGFILE *page, uint8_t *buffer, int32_t length) {
@@ -44,6 +44,15 @@ void Search_Images(const char* directory) {
   Image_Count = Folder_retrieval(directory, ".png", Image_Names, 100);
 }
 
+// Fill entire screen with black before drawing a new image
+static void clearScreen() {
+  static uint16_t blackLine[MAX_IMAGE_WIDTH];
+  memset(blackLine, 0, sizeof(blackLine));
+  for (int y = 0; y < LCD_HEIGHT; y++) {
+    LCD_addWindow(0, y, LCD_WIDTH - 1, y, blackLine);
+  }
+}
+
 void Display_Image_By_Path(const char* filePath) {
   printf("Displaying image: %s\r\n", filePath);
   int16_t ret = png.open(filePath, pngOpen, pngClose, pngRead, pngSeek, pngDraw);
@@ -52,6 +61,7 @@ void Display_Image_By_Path(const char* filePath) {
     if (png.getWidth() > MAX_IMAGE_WIDTH) {
       printf("Image is too wide for line buffer!\r\n");
     } else {
+      clearScreen();  // Clear leftovers from previous smaller image
       ret = png.decode(NULL, 0);
       png.close();
     }

sound_picture_app/SD_Card.cpp

@@ -7,11 +7,11 @@ uint16_t SDCard_Size;
 uint16_t Flash_Size;
 
 void SD_Init() {
-  if(!SD_MMC.setPins(SD_CLK_PIN, SD_CMD_PIN, SD_D0_PIN, SD_D1_PIN, SD_D2_PIN, SD_D3_PIN)){
+  if(!SD_MMC.setPins(SD_CLK_PIN, SD_CMD_PIN, SD_D0_PIN)){
     printf("SD MMC: Pin change failed!\r\n");
     return;
   }
-  if (SD_MMC.begin("/sdcard", false, true)) {                              
+  if (SD_MMC.begin("/sdcard", true, true)) {  // true = 1-bit mode (avoids GPIO conflict on D3/CS)                              
     printf("SD card initialization successful (4-bit mode)!\r\n");
   } else {
     printf("SD card initialization failed!\r\n");
@@ -81,7 +81,8 @@ uint16_t Folder_retrieval(const char* directory, const char* fileExtension, char
   File file = Path.openNextFile();
   while (file && fileCount < maxFiles) {
     if (!file.isDirectory() && strstr(file.name(), fileExtension)) {
-      strncpy(File_Name[fileCount], file.name(), sizeof(File_Name[fileCount])); 
+      strncpy(File_Name[fileCount], file.name(), sizeof(File_Name[fileCount]) - 1);
+      File_Name[fileCount][sizeof(File_Name[fileCount]) - 1] = '\0'; // Ensure null-termination
       if (strcmp(directory, "/") == 0) {                                      
         snprintf(filePath, 100, "%s%s", directory, file.name());   
       } else {                                                            

sound_picture_app/Web_Server.cpp

@@ -7,103 +7,224 @@
 
 WebServer server(80);
 File uploadFile;
+bool uploadSuccess = false;
+String uploadedFilename = "";
 
 const char* uploadPage = R"rawliteral(
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Photo Upload Panel</title>
+  <meta charset="UTF-8">
+  <title>Photo Frame Upload</title>
   <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-      background: linear-gradient(135deg, #0f172a, #1e293b);
+      background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
-      color: #f8fafc;
+      color: #f1f5f9;
+      min-height: 100vh;
       display: flex;
-      justify-content: center;
+      flex-direction: column;
       align-items: center;
-      height: 100vh;
+      justify-content: center;
-      margin: 0;
+      padding: 20px;
     }
     .card {
-      background: rgba(30, 41, 59, 0.7);
+      background: rgba(255,255,255,0.07);
-      backdrop-filter: blur(10px);
+      backdrop-filter: blur(20px);
-      border: 1px solid rgba(255, 255, 255, 0.1);
+      -webkit-backdrop-filter: blur(20px);
-      border-radius: 16px;
+      border: 1px solid rgba(255,255,255,0.12);
-      padding: 32px;
+      border-radius: 20px;
-      width: 90%;
+      padding: 36px 32px;
-      max-width: 400px;
+      width: 100%;
-      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+      max-width: 420px;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+    }
+    .logo { font-size: 32px; margin-bottom: 4px; text-align: center; }
+    h1 { font-size: 22px; font-weight: 600; text-align: center; color: #e2e8f0; margin-bottom: 6px; }
+    .subtitle { font-size: 13px; color: #94a3b8; text-align: center; margin-bottom: 28px; }
+    .drop-zone {
+      border: 2px dashed rgba(139,92,246,0.5);
+      border-radius: 12px;
+      padding: 32px 16px;
       text-align: center;
-    }
-    h1 { font-size: 24px; margin-bottom: 24px; color: #38bdf8; }
-    .input-group { margin-bottom: 20px; }
-    input[type="file"] { display: none; }
-    .file-label {
-      display: inline-block;
-      padding: 12px 24px;
-      background: #0284c7;
-      color: white;
-      border-radius: 8px;
       cursor: pointer;
-      font-weight: 600;
+      transition: all 0.2s;
-      transition: background 0.2s;
+      margin-bottom: 16px;
+      background: rgba(139,92,246,0.05);
+    }
+    .drop-zone:hover, .drop-zone.dragover {
+      border-color: #8b5cf6;
+      background: rgba(139,92,246,0.12);
+    }
+    .drop-icon { font-size: 36px; margin-bottom: 8px; }
+    .drop-text { font-size: 14px; color: #94a3b8; }
+    .drop-text span { color: #a78bfa; font-weight: 500; cursor: pointer; }
+    input[type="file"] { display: none; }
+    .file-name {
+      font-size: 13px;
+      color: #a78bfa;
+      text-align: center;
+      min-height: 20px;
+      margin-bottom: 20px;
+      font-weight: 500;
+      word-break: break-all;
     }
-    .file-label:hover { background: #0369a1; }
     button {
       width: 100%;
-      padding: 12px;
+      padding: 14px;
-      background: #10b981;
+      background: linear-gradient(135deg, #7c3aed, #a855f7);
       color: white;
       border: none;
-      border-radius: 8px;
+      border-radius: 12px;
-      font-size: 16px;
+      font-size: 15px;
       font-weight: 600;
       cursor: pointer;
-      transition: background 0.2s;
+      transition: all 0.2s;
-      margin-top: 10px;
+      letter-spacing: 0.3px;
     }
-    button:hover { background: #059669; }
+    button:hover { opacity: 0.9; transform: translateY(-1px); }
-    #status { margin-top: 15px; font-size: 14px; color: #94a3b8; }
+    button:active { transform: translateY(0); }
+    button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+    .hint { font-size: 11px; color: #64748b; text-align: center; margin-top: 14px; }
+    .toast {
+      border-radius: 10px;
+      padding: 12px 16px;
+      margin-bottom: 20px;
+      font-size: 13px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .toast.success { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: #34d399; }
+    .toast.error   { background: rgba(239,68,68,0.15);  border: 1px solid rgba(239,68,68,0.3);  color: #f87171; }
+    .progress { display: none; margin-top: 14px; }
+    .progress-bar {
+      height: 4px;
+      background: rgba(255,255,255,0.1);
+      border-radius: 99px;
+      overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #7c3aed, #a855f7);
+      border-radius: 99px;
+      width: 0%;
+      transition: width 0.3s;
+    }
+    .progress-text { font-size: 12px; color: #94a3b8; text-align: center; margin-top: 6px; }
   </style>
 </head>
 <body>
   <div class="card">
-    <h1>Upload Photo / Audio</h1>
+    <div class="logo">&#x1F5BC;&#xFE0F;</div>
+    <h1>Photo Frame</h1>
+    <p class="subtitle">Upload media to the SD card wirelessly</p>
+
+    %TOAST%
+
     <form method="POST" action="/upload" enctype="multipart/form-data" id="uploadForm">
-      <div class="input-group">
+      <div class="drop-zone" id="dropZone" onclick="document.getElementById('file').click()">
-        <label for="file" class="file-label">Choose File (.png / .mp3 / .wav)</label>
+        <div class="drop-icon">&#x1F4C1;</div>
-        <input type="file" id="file" name="file" accept=".png,.mp3,.wav" onchange="updateFilename()">
+        <div class="drop-text">Drop a file here or <span>browse</span></div>
+        <input type="file" id="file" name="file" accept=".png,.mp3,.wav" onchange="onFileSelected(this)">
+      </div>
+      <div class="file-name" id="fileName">No file selected</div>
+      <button type="submit" id="uploadBtn" disabled>Upload to Frame</button>
+      <div class="progress" id="progress">
+        <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
+        <div class="progress-text" id="progressText">Uploading...</div>
       </div>
-      <div id="filename" style="margin-bottom: 20px; font-size: 14px; color: #38bdf8;">No file selected</div>
-      <button type="submit">Upload to Frame</button>
     </form>
-    <div id="status">Supports PNG (172x320 max) and MP3/WAV.</div>
+    <p class="hint">Accepted: .png (172x320) &nbsp;&middot;&nbsp; .mp3 &nbsp;&middot;&nbsp; .wav</p>
   </div>
+
   <script>
-    function updateFilename() {
+    const dropZone = document.getElementById('dropZone');
-      const fileInput = document.getElementById('file');
+    const uploadBtn = document.getElementById('uploadBtn');
-      const filenameDiv = document.getElementById('filename');
+    const fileName = document.getElementById('fileName');
-      if (fileInput.files.length > 0) {
+    const form = document.getElementById('uploadForm');
-        filenameDiv.textContent = fileInput.files[0].name;
+    const progress = document.getElementById('progress');
+    const progressFill = document.getElementById('progressFill');
+    const progressText = document.getElementById('progressText');
+
+    function onFileSelected(input) {
+      if (input.files.length > 0) {
+        fileName.textContent = input.files[0].name;
+        uploadBtn.disabled = false;
       } else {
-        filenameDiv.textContent = 'No file selected';
+        fileName.textContent = 'No file selected';
+        uploadBtn.disabled = true;
       }
     }
+
+    dropZone.addEventListener('dragover', function(e) { e.preventDefault(); dropZone.classList.add('dragover'); });
+    dropZone.addEventListener('dragleave', function() { dropZone.classList.remove('dragover'); });
+    dropZone.addEventListener('drop', function(e) {
+      e.preventDefault();
+      dropZone.classList.remove('dragover');
+      var dt = e.dataTransfer;
+      if (dt.files.length > 0) {
+        document.getElementById('file').files = dt.files;
+        onFileSelected(document.getElementById('file'));
+      }
+    });
+
+    form.addEventListener('submit', function(e) {
+      e.preventDefault();
+      var file = document.getElementById('file').files[0];
+      if (!file) return;
+      var formData = new FormData(form);
+      var xhr = new XMLHttpRequest();
+      xhr.open('POST', '/upload');
+      xhr.upload.addEventListener('progress', function(e) {
+        if (e.lengthComputable) {
+          var pct = Math.round((e.loaded / e.total) * 100);
+          progressFill.style.width = pct + '%';
+          progressText.textContent = 'Uploading... ' + pct + '%';
+        }
+      });
+      xhr.onload = function() {
+        var ok = xhr.status === 200 || xhr.status === 303;
+        window.location.href = '/?status=' + (ok ? 'ok&file=' + encodeURIComponent(file.name) : 'fail');
+      };
+      xhr.onerror = function() { window.location.href = '/?status=fail'; };
+      progress.style.display = 'block';
+      uploadBtn.disabled = true;
+      uploadBtn.textContent = 'Uploading...';
+      xhr.send(formData);
+    });
   </script>
 </body>
 </html>
 )rawliteral";
 
+static bool isAllowedExtension(const String& filename) {
+  String lower = filename;
+  lower.toLowerCase();
+  return lower.endsWith(".png") || lower.endsWith(".mp3") || lower.endsWith(".wav");
+}
+
 void handleUpload() {
   HTTPUpload& upload = server.upload();
   if (upload.status == UPLOAD_FILE_START) {
     String filename = upload.filename;
-    if (!filename.startsWith("/")) {
+    if (!filename.startsWith("/")) filename = "/" + filename;
-      filename = "/" + filename;
+
+    // Reject files that are not PNG, MP3, or WAV
+    if (!isAllowedExtension(filename)) {
+      printf("WebUpload: Rejected non-media file: %s\r\n", filename.c_str());
+      uploadSuccess = false;
+      return;
     }
+
     printf("WebUpload: Starting upload of %s\r\n", filename.c_str());
+    uploadedFilename = filename;
     uploadFile = SD_MMC.open(filename, "w");
+    uploadSuccess = (bool)uploadFile;
   } 
   else if (upload.status == UPLOAD_FILE_WRITE) {
     if (uploadFile) {
@@ -114,29 +235,48 @@ void handleUpload() {
     if (uploadFile) {
       uploadFile.close();
       printf("WebUpload: Successfully uploaded %s (%d bytes)\r\n", upload.filename.c_str(), upload.totalSize);
-      // Re-scan SD card folders to index the new file
+      uploadSuccess = true;
+      // Re-scan SD card to index the new file
       Search_Images("/");
       Search_Audio("/");
+    } else {
+      uploadSuccess = false;
     }
   }
 }
 
+static String buildPage(const String& status, const String& file) {
+  String toast = "";
+  if (status == "ok") {
+    String safeName = file;
+    safeName.replace("<", "&lt;");
+    safeName.replace(">", "&gt;");
+    toast = "<div class=\"toast success\">&#x2705; <span>\"" + safeName + "\" uploaded successfully!</span></div>";
+  } else if (status == "fail") {
+    toast = "<div class=\"toast error\">&#x274C; <span>Upload failed. Only .png, .mp3 and .wav files are accepted.</span></div>";
+  }
+  String page = String(uploadPage);
+  page.replace("%TOAST%", toast);
+  return page;
+}
+
 void initWebServer() {
-  // Start WiFi Access Point with SSID "love" and password "love"
   WiFi.softAP("love", "love");
   IPAddress IP = WiFi.softAPIP();
-  printf("WiFi AP Started. SSID: 'love'\r\n");
+  printf("WiFi AP Started. SSID: 'love'  Password: 'love'\r\n");
-  printf("Web Server IP address: %s\r\n", IP.toString().c_str());
+  printf("Web Server IP: %s\r\n", IP.toString().c_str());
   
-  // Serve Page
   server.on("/", HTTP_GET, []() {
-    server.send(200, "text/html", uploadPage);
+    String status = server.hasArg("status") ? server.arg("status") : "";
+    String file   = server.hasArg("file")   ? server.arg("file")   : "";
+    server.send(200, "text/html", buildPage(status, file));
   });
   
-  // Handle file uploads
   server.on("/upload", HTTP_POST, []() {
-    // Redirect back to main upload page on success
+    String loc = uploadSuccess
-    server.sendHeader("Location", "/");
+      ? "/?status=ok&file=" + uploadedFilename
+      : "/?status=fail";
+    server.sendHeader("Location", loc);
     server.send(303);
   }, handleUpload);
   

sound_picture_app/sound_picture_app.ino

@@ -68,13 +68,17 @@ void setup() {
   printf("Initialization complete!\r\n");
   printf("Found %d PNG images and %d Audio files (.mp3/.wav).\r\n", Image_Count, Audio_Count);
   
-  if (Image_Count == 0 || Audio_Count == 0) {
+  if (Image_Count == 0 && Audio_Count == 0) {
     hasError = true;
     currentState = STATE_ERROR;
     printf("ERROR: No media found on microSD card!\r\n");
   } else {
-    printf("Displaying initial image (index 0): %s\r\n", Image_Names[0]);
+    if (Image_Count == 0) printf("WARNING: No PNG images found — audio-only mode.\r\n");
-    Display_Image_By_Index("/", 0);
+    if (Audio_Count == 0) printf("WARNING: No audio files found — silent slideshow mode.\r\n");
+    if (Image_Count > 0) {
+      printf("Displaying initial image (index 0): %s\r\n", Image_Names[0]);
+      Display_Image_By_Index("/", 0);
+    }
     currentState = STATE_IDLE;
   }
   
@@ -111,11 +115,13 @@ void playCurrentPair() {
 void handleSinglePress() {
   printf("Gesture: Single Click - Next Slide\r\n");
   if (!hasError) {
+    uint16_t total = std::max(Image_Count, Audio_Count);
+    if (total == 0) return;
     if (currentState == STATE_AUTOPLAY) {
       currentState = STATE_IDLE;
       printf("Autoplay Disabled.\r\n");
     }
-    currentIndex = (currentIndex + 1) % std::max(Image_Count, Audio_Count);
+    currentIndex = (currentIndex + 1) % total;
     playCurrentPair();
   }
 }
@@ -130,12 +136,13 @@ void handleDoublePress() {
 void handleTriplePress() {
   printf("Gesture: Triple Click - Previous Slide\r\n");
   if (!hasError) {
+    uint16_t total = std::max(Image_Count, Audio_Count);
+    if (total == 0) return;
     if (currentState == STATE_AUTOPLAY) {
       currentState = STATE_IDLE;
       printf("Autoplay Disabled.\r\n");
     }
-    uint16_t totalMedia = std::max(Image_Count, Audio_Count);
+    currentIndex = (currentIndex + total - 1) % total;
-    currentIndex = (currentIndex + totalMedia - 1) % totalMedia;
     playCurrentPair();
   }
 }
@@ -214,10 +221,11 @@ void loop() {
   
   // Handle slideshow auto-advance in Autoplay mode
   if (currentState == STATE_AUTOPLAY && !hasError) {
+    uint16_t total = std::max(Image_Count, Audio_Count);
     // Only advance when the audio stops playing and slideShowInterval (5s) has passed
-    if (!isAudioPlaying() && (now - lastSlideTime > slideShowInterval)) {
+    if (total > 0 && !isAudioPlaying() && (now - lastSlideTime > slideShowInterval)) {
       lastSlideTime = now;
-      currentIndex = (currentIndex + 1) % std::max(Image_Count, Audio_Count);
+      currentIndex = (currentIndex + 1) % total;
       playCurrentPair();
     }
   }