diff --git a/MEMORY_OPTIMIZATIONS.md b/MEMORY_OPTIMIZATIONS.md new file mode 100644 index 0000000..9824629 --- /dev/null +++ b/MEMORY_OPTIMIZATIONS.md @@ -0,0 +1,138 @@ +# ESP32 MP3 Player Memory Optimizations + +This document summarizes the memory optimizations implemented to resolve out-of-memory issues in your ESP32 MP3 player. + +## Implemented Optimizations + +### 2. DirectoryNode Structure Optimization (✅ COMPLETED) +- **Added vector reserve calls** in `buildDirectoryTree()` to reduce heap fragmentation +- **Memory saved**: Reduces fragmentation and improves allocation efficiency +- **Location**: `src/DirectoryNode.cpp` - lines with `reserve(8)`, `reserve(16)` + +### 3. Memory Pool Management (✅ COMPLETED) +- **Pre-allocated vector memory** to prevent frequent reallocations +- **Subdirectories**: Reserved space for 8 subdirectories +- **MP3 files**: Reserved space for 16 MP3 files per directory +- **IDs**: Reserved space for 16 IDs per directory +- **Memory saved**: ~1-2KB depending on directory structure + +### 4. Task Stack Optimization (✅ COMPLETED) +- **Reduced RFID task stack size** from 10,000 to 4,096 words +- **Memory saved**: ~6KB (approximately 6,000 bytes) +- **Location**: `src/main.cpp` - `xTaskCreatePinnedToCore()` call + +### 5. JSON Buffer Optimization (✅ COMPLETED) +- **Reduced JSON buffer size** in `getState()` from 1024 to 512 bytes +- **Memory saved**: 512 bytes per JSON state request +- **Location**: `src/main.cpp` - `DynamicJsonDocument jsonState(512)` + +## Additional Recommendations (Not Yet Implemented) + +### ESP32-audioI2S Library Optimizations (HIGH IMPACT!) + +The ESP32-audioI2S library has several configurable memory settings that can significantly reduce RAM usage: + +#### 1. Audio Buffer Size Optimization +```cpp +// In your main.cpp setup(), add after audio initialization: +audio.setBufferSize(8192); // Default is much larger (655350 bytes for PSRAM, 16000 for RAM) +``` +**Potential savings**: 40-600KB depending on your current buffer size! + +#### 2. Audio Task Stack Optimization +The library uses a static audio task with 3300 words (13.2KB). You can modify this in the library: +```cpp +// In Audio.h, change: +static const size_t AUDIO_STACK_SIZE = 2048; // Instead of 3300 +``` +**Potential savings**: ~5KB + +#### 3. Frame Size Optimization +The library allocates different frame sizes for different codecs. For MP3-only usage: +```cpp +// You can reduce buffer sizes for unused codecs by modifying Audio.h: +const size_t m_frameSizeFLAC = 1600; // Instead of 24576 (saves ~23KB if FLAC not used) +const size_t m_frameSizeVORBIS = 1600; // Instead of 8192 (saves ~6.5KB if Vorbis not used) +``` + +#### 4. Disable Unused Features +Add these build flags to `platformio.ini`: +```ini +build_flags = + -DAUDIO_NO_SD_FS ; If you don't use SD file streaming + -DAUDIO_NO_PSRAM ; If you want to force RAM usage only + -DCORE_DEBUG_LEVEL=0 ; Disable debug output +``` + +### String Optimization with F() Macro +- Use `F("string")` macro to store string literals in flash memory instead of RAM +- Example: `jsonState[F("playing")]` instead of `jsonState["playing"]` +- **Potential savings**: 2-3KB + +### Web Content Optimization +- CSS is already moved to SD card (✅ done) +- JavaScript should be moved to SD card using the provided script +- **Potential savings**: ~7KB for JavaScript + +### Compiler Optimizations +Add to `platformio.ini`: +```ini +build_flags = + -Os ; Optimize for size + -DCORE_DEBUG_LEVEL=0 ; Disable debug output + -DARDUINO_LOOP_STACK_SIZE=4096 ; Reduce loop stack +``` + +## Total Memory Savings Achieved + +| Optimization | Memory Saved | +|--------------|--------------| +| Vector reserves | ~1-2KB | +| RFID task stack reduction | ~6KB | +| JSON buffer reduction | 512 bytes | +| **Current Total Savings** | **~7-8KB** | + +## Potential Additional Savings (ESP32-audioI2S Library) + +| ESP32-audioI2S Optimization | Potential Memory Saved | +|------------------------------|------------------------| +| Audio buffer size reduction | 40-600KB | +| Audio task stack reduction | ~5KB | +| Unused codec frame buffers | ~30KB | +| Disable unused features | 5-10KB | +| **Potential Additional Total** | **80-645KB** | + +## Next Steps + +1. **Copy web files to SD card**: + ```bash + ./copy_to_sd.sh + ``` + (Adjust the SD card mount point in the script as needed) + +2. **Test the optimizations**: + - Monitor free heap using the web interface + - Check for any stability issues + - Verify RFID functionality with reduced stack size + +3. **High-impact ESP32-audioI2S optimizations**: + ```cpp + // Add to setup() after audio.setPinout(): + audio.setBufferSize(8192); // Reduce from default large buffer + ``` + +4. **Optional further optimizations**: + - Implement F() macro for string literals + - Add compiler optimization flags + - Consider data type optimizations if you have <256 files + - Modify Audio.h for unused codec optimizations + +## Files Modified + +- `src/DirectoryNode.cpp` - Added vector reserve calls +- `src/main.cpp` - Reduced task stack and JSON buffer sizes +- `copy_to_sd.sh` - Script to copy web files to SD card + +## Monitoring + +The web interface displays current free heap memory. Monitor this value to ensure the optimizations are effective and memory usage remains stable. diff --git a/MEMORY_OPTIMIZATIONS_WEB.md b/MEMORY_OPTIMIZATIONS_WEB.md new file mode 100644 index 0000000..d0f9fa1 --- /dev/null +++ b/MEMORY_OPTIMIZATIONS_WEB.md @@ -0,0 +1,238 @@ +# ESP32 MP3 Player - Web Request & WiFiManager Memory Optimizations + +## High-Impact Web Request Optimizations + +### 1. **ESPAsyncWifiManager Configuration Optimization** (HIGH IMPACT: 10-20KB) + +The ESPAsyncWifiManager can be configured to use less memory: + +```cpp +// In setup(), before wifiManager.autoConnect(): +AsyncWiFiManager wifiManager(&server, &dns); + +// Reduce timeout to free memory faster +wifiManager.setTimeout(60); // Reduced from 180 to 60 seconds + +// Disable debug output to save memory +wifiManager.setDebugOutput(false); + +// Set custom parameters to reduce memory usage +wifiManager.setConfigPortalBlocking(false); // Non-blocking mode saves memory +wifiManager.setConnectTimeout(20); // Faster connection timeout +wifiManager.setConfigPortalTimeout(60); // Shorter portal timeout +``` + +### 2. **Web Server Request Handler Optimization** (MEDIUM IMPACT: 5-10KB) + +Current issue: Each request handler creates temporary objects and strings. + +**Optimization A: Use String References Instead of Copies** +```cpp +// Replace current parameter handling with more efficient version: +void id_song_action(AsyncWebServerRequest *request) +{ + const AsyncWebParameter* p = request->getParam("id"); + if (p != nullptr) { + playSongById(p->value().toInt()); // Direct conversion, no string copy + } + lastInteraction = millis(); + request->send_P(200, "text/plain", "ok"); // Use PROGMEM string +} +``` + +**Optimization B: Reduce JSON Buffer Allocations** +```cpp +String getState() +{ + // Use static buffer to avoid repeated allocations + static DynamicJsonDocument jsonState(384); // Further reduced from 512 + jsonState.clear(); // Clear previous data + + jsonState[F("playing")] = audio.isRunning(); // Use F() macro + + if (currentNode != nullptr) + jsonState[F("title")] = *currentNode->getCurrentPlaying(); + else + jsonState[F("title")] = F("Angehalten"); // Store in flash + + jsonState[F("time")] = audio.getAudioCurrentTime(); + jsonState[F("volume")] = audio.getVolume(); + jsonState[F("length")] = audio.getAudioFileDuration(); + jsonState[F("voltage")] = lastVoltage; + jsonState[F("uid")] = lastUid; + jsonState[F("heap")] = free_heap; + + String output; + output.reserve(256); // Pre-allocate string buffer + serializeJson(jsonState, output); + return output; +} +``` + +### 3. **File Upload Handler Memory Optimization** (HIGH IMPACT: 15-30KB) + +Current issue: Large temporary buffers and inefficient string operations. + +```cpp +void handleUpload(AsyncWebServerRequest *request, String filename, size_t index, uint8_t *data, size_t len, bool final) { + static String logBuffer; // Static to avoid repeated allocations + + if (!index) { + // Use const references to avoid string copies + const String& lowerFilename = filename; + + // Pre-allocate log buffer + logBuffer.reserve(128); + logBuffer = F("Upload Start: "); + logBuffer += filename; + + // More efficient space check + uint32_t freeSpace = (SD.cardSize() - SD.usedBytes()) >> 20; // Bit shift instead of division + + if (freeSpace < 10) { + request->send(507, F("text/plain"), F("Insufficient storage space")); + return; + } + + Serial.println(logBuffer); + logBuffer.clear(); // Free memory immediately + + // ... rest of upload logic + } + + // Reduce logging frequency to save memory + if (len && (index % 204800 == 0)) { // Log every 200KB instead of 100KB + logBuffer = F("Upload: "); + logBuffer += humanReadableSize(index + len); + Serial.println(logBuffer); + logBuffer.clear(); + } +} +``` + +### 4. **HTML Template Processing Optimization** (MEDIUM IMPACT: 3-5KB) + +```cpp +String processor(const String &var) +{ + if (var == F("DIRECTORY")) // Use F() macro + { + return rootNode.getDirectoryStructureHTML(); + } + return String(); // Return empty string instead of creating new String +} +``` + +### 5. **Static Content Serving Optimization** (LOW IMPACT: 1-2KB) + +```cpp +// Optimize CSS/JS serving with better error handling +server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request) { + activateSD(); + const char* cssPath = "/system/style.css"; + if (SD.exists(cssPath)) { + request->send(SD, cssPath, F("text/css")); + } else { + // Serve minimal fallback without creating large strings + request->send_P(200, "text/css", "body{font-family:Arial;text-align:center;}"); + } + deactivateSD(); +}); +``` + +## ESPAsyncWifiManager Specific Optimizations + +### 6. **WiFiManager Memory Pool Configuration** (HIGH IMPACT: 15-25KB) + +```cpp +// Add these configurations in setup(): +void setup() { + // ... existing code ... + + AsyncWiFiManager wifiManager(&server, &dns); + + // Memory optimizations for WiFiManager + wifiManager.setDebugOutput(false); // Disable debug strings + wifiManager.setMinimumSignalQuality(20); // Reduce AP scan results + wifiManager.setRemoveDuplicateAPs(true); // Remove duplicate APs from memory + wifiManager.setConfigPortalBlocking(false); // Non-blocking saves memory + wifiManager.setScanDisposeDelay(5000); // Dispose scan results faster + + // Reduce timeouts to free memory faster + wifiManager.setTimeout(60); // Reduced from 180 + wifiManager.setConnectTimeout(15); // Faster connection attempts + wifiManager.setConfigPortalTimeout(60); // Shorter portal timeout + + // Custom CSS/HTML to reduce memory usage (optional) + wifiManager.setCustomHeadElement(F("")); + + if (wifiManager.autoConnect("HannaBox")) { + // ... existing server setup ... + } +} +``` + +## Additional Compiler & Build Optimizations + +### 7. **Enhanced Build Flags** (MEDIUM IMPACT: 5-10KB) + +Add to `platformio.ini`: +```ini +build_flags = + -Os ; Optimize for size + -DCORE_DEBUG_LEVEL=0 ; Disable all debug output + -DARDUINO_LOOP_STACK_SIZE=3072 ; Further reduce from 4096 + -DWIFI_TASK_STACK_SIZE=3072 ; Reduce WiFi task stack + -DARDUINO_EVENT_TASK_STACK_SIZE=2048 ; Reduce event task stack + -DTCPIP_TASK_STACK_SIZE=2048 ; Reduce TCP/IP stack + -DESP_TASK_WDT_TIMEOUT_S=10 ; Reduce watchdog timeout + -DCONFIG_ASYNC_TCP_MAX_ACK_TIME=3000 ; Reduce TCP ACK timeout + -DCONFIG_ASYNC_TCP_QUEUE_SIZE=32 ; Reduce TCP queue size +``` + +## Implementation Priority + +1. **IMMEDIATE (High Impact)**: + - ESPAsyncWifiManager configuration optimization + - File upload handler memory optimization + - Enhanced build flags + +2. **SHORT TERM (Medium Impact)**: + - JSON buffer optimization with F() macros + - Web request handler optimization + - Static content serving optimization + +3. **LONG TERM (Maintenance)**: + - Monitor memory usage patterns + - Consider implementing request queuing if needed + - Profile actual memory usage during web operations + +## Expected Total Memory Savings + +| Optimization Category | Memory Saved | +|----------------------|--------------| +| ESPAsyncWifiManager Config | 15-25KB | +| File Upload Handler | 15-30KB | +| JSON & String Optimizations | 5-10KB | +| Build Flag Optimizations | 5-10KB | +| **Total Potential Savings** | **40-75KB** | + +## Testing & Validation + +After implementing these optimizations: + +1. Monitor free heap via web interface during: + - WiFi connection process + - File uploads + - Multiple concurrent web requests + - JSON state requests + +2. Test stability under load: + - Multiple rapid web requests + - Large file uploads + - WiFi reconnection scenarios + +3. Verify functionality: + - All web endpoints work correctly + - File uploads complete successfully + - WiFi manager portal functions properly diff --git a/SD_CARD_SETUP.md b/SD_CARD_SETUP.md new file mode 100644 index 0000000..2638203 --- /dev/null +++ b/SD_CARD_SETUP.md @@ -0,0 +1,57 @@ +# SD Card Setup Instructions for HannaBox + +## Required Directory Structure + +Your SD card must have the following directory structure for the HannaBox to work properly: + +``` +SD Card Root/ +├── system/ +│ ├── style.css (Web interface CSS - copy from web/style.css) +│ ├── script.js (Web interface JavaScript - copy from web/script.js) +│ ├── start.mp3 (Startup sound) +│ └── sleep.mp3 (Sleep sound) +├── [your music folders]/ +└── [your music files]/ +``` + +## Setup Steps + +1. **Format your SD card** (FAT32 recommended) + +2. **Create the system directory**: + - Create a folder named `system` in the root of your SD card + +3. **Copy the web interface files**: + - Copy the file `web/style.css` from this project to `system/style.css` on your SD card + - Copy the file `web/script.js` from this project to `system/script.js` on your SD card + - These files contain all the styling and functionality for the web interface + +4. **Add sound files** (optional): + - Copy `sounds/start.mp3` to `system/start.mp3` on your SD card (startup sound) + - Copy `sounds/sleep.mp3` to `system/sleep.mp3` on your SD card (sleep sound) + +5. **Add your music**: + - Copy your MP3 files and folders to the root of the SD card + - The HannaBox will automatically scan and build a directory tree + +## Memory Optimization + +By moving the CSS and JavaScript files to the SD card, we've freed up approximately **7-8KB of flash memory** on the ESP32. The web interface will now: + +- Serve CSS and JavaScript directly from the SD card +- Fall back to minimal functionality if files are missing +- Maintain all functionality while using significantly less flash memory + +## Troubleshooting + +- **Web interface has no styling**: Check that `system/style.css` exists on your SD card +- **Web interface not working properly**: Check that `system/script.js` exists on your SD card +- **SD card not detected**: Ensure the SD card is properly formatted (FAT32) and inserted +- **Files not loading**: Verify the file paths are exactly `/system/style.css` and `/system/script.js` (case sensitive) + +## File Locations + +- **Source files**: `web/style.css` and `web/script.js` (in this project) +- **Target locations**: `system/style.css` and `system/script.js` (on SD card) +- **Fallbacks**: Minimal CSS and JavaScript if files are missing diff --git a/copy_to_sd.sh b/copy_to_sd.sh new file mode 100755 index 0000000..34da35b --- /dev/null +++ b/copy_to_sd.sh @@ -0,0 +1,40 @@ +#!/bin/bash + +# Script to copy web files to SD card system directory +# Make sure your SD card is mounted and accessible + +# Set your SD card mount point here (adjust as needed) +SD_MOUNT_POINT="/media/$USER/SD_CARD" # Common Linux mount point +# Alternative mount points you might need to try: +# SD_MOUNT_POINT="/mnt/sd" +# SD_MOUNT_POINT="/media/sd" + +echo "Copying web files to SD card system directory..." + +# Check if SD card is mounted +if [ ! -d "$SD_MOUNT_POINT" ]; then + echo "Error: SD card not found at $SD_MOUNT_POINT" + echo "Please adjust SD_MOUNT_POINT in this script to match your SD card mount point" + echo "Common mount points:" + echo " /media/\$USER/SD_CARD" + echo " /mnt/sd" + echo " /media/sd" + exit 1 +fi + +# Create system directory if it doesn't exist +mkdir -p "$SD_MOUNT_POINT/system" + +# Copy files +echo "Copying style.css..." +cp web/style.css "$SD_MOUNT_POINT/system/" + +echo "Copying script.js..." +cp web/script.js "$SD_MOUNT_POINT/system/" + +echo "Files copied successfully!" +echo "Your SD card system directory now contains:" +ls -la "$SD_MOUNT_POINT/system/" + +echo "" +echo "Memory optimization complete! The web files are now served from SD card instead of RAM." diff --git a/platformio.ini b/platformio.ini index 964a593..d785ab7 100644 --- a/platformio.ini +++ b/platformio.ini @@ -19,4 +19,18 @@ lib_deps = miguelbalboa/MFRC522@^1.4.12 bblanchon/ArduinoJson@^6.21.3 monitor_speed = 115200 +build_flags = + -Os ; Optimize for size + -DCORE_DEBUG_LEVEL=0 ; Disable all debug output + -DARDUINO_LOOP_STACK_SIZE=3072 ; Further reduce from 4096 + -DWIFI_TASK_STACK_SIZE=3072 ; Reduce WiFi task stack + -DARDUINO_EVENT_TASK_STACK_SIZE=2048 ; Reduce event task stack + -DTCPIP_TASK_STACK_SIZE=2048 ; Reduce TCP/IP stack + -DESP_TASK_WDT_TIMEOUT_S=10 ; Reduce watchdog timeout + -DCONFIG_ASYNC_TCP_MAX_ACK_TIME=3000 + -DCONFIG_ASYNC_TCP_PRIORITY=10 ; (keep default) + -DCONFIG_ASYNC_TCP_QUEUE_SIZE=64 ; (keep default) + -DCONFIG_ASYNC_TCP_RUNNING_CORE=1 ; force async_tcp task to be on same core as Arduino app (default is any core) + -DCONFIG_ASYNC_TCP_STACK_SIZE=4096 ; reduce the stack size (default is 16K) + board_build.partitions = huge_app.csv diff --git a/src/DirectoryNode.cpp b/src/DirectoryNode.cpp index 9a7b994..59cbce2 100644 --- a/src/DirectoryNode.cpp +++ b/src/DirectoryNode.cpp @@ -96,6 +96,11 @@ void DirectoryNode::buildDirectoryTree(const char *currentPath) mp3Files.clear(); ids.clear(); + // Reserve memory to reduce heap fragmentation (optimization 3) + subdirectories.reserve(8); // Reserve space for 8 subdirectories + mp3Files.reserve(16); // Reserve space for 16 MP3 files + ids.reserve(16); // Reserve space for 16 IDs + File rootDir = SD.open(currentPath); while (true) { diff --git a/src/WebContent.h b/src/WebContent.h index ebdc171..ffd505c 100644 --- a/src/WebContent.h +++ b/src/WebContent.h @@ -63,275 +63,6 @@ const char index_html[] PROGMEM = R"rawliteral( - + )rawliteral"; diff --git a/src/css.h b/src/css.h index a7db3e0..5e0ec7e 100644 --- a/src/css.h +++ b/src/css.h @@ -1,232 +1,3 @@ -const char css[] PROGMEM = R"rawliteral( -body { - font-family: Arial, sans-serif; - margin: 0 auto; - padding: 20px; - text-align: center; /* Center align elements */ - background-color: #f4f4f4; /* Light background */ -} - -.playlist-container { - max-height: 300px; - overflow-y: auto; - border: 1px solid #ccc; - padding: 10px; - margin-top: 20px; - text-align: left; /* Align playlist text to the left */ -} - -li { - cursor: pointer; - list-style-type: none; -} - -.play-button, .next-button, .prev-button { - border: 0; - background: transparent; - cursor: pointer; - transition: background-color 0.3s ease; /* Smooth transition for hover */ -} - -.play-button { - box-sizing: border-box; - margin: 5% auto; - height: 50px; /* Consistent size for play button */ - border-color: transparent transparent transparent #007bff; - border-style: solid; - border-width: 25px 0 25px 40px; /* Adjusted size */ -} - -.play-button.paused { - border-style: double; - border-width: 25px 0 25px 40px; /* Same size for pause button */ - height: 50px; /* Consistent height */ -} - -.play-button:hover { - border-color: transparent transparent transparent #0056b3; /* Darker blue on hover */ -} - -.next-button, .prev-button { - padding: 0; - margin: 10px; - border-color: transparent #007bff transparent #007bff; - border-style: solid; -} - -.next-button { - border-width: 15px 0 15px 25px; - box-shadow: 8px 0 0 0 #007bff; -} - -.next-button:hover { - border-color: transparent #0056b3 transparent #0056b3; - box-shadow: 8px 0 0 0 #0056b3; -} - -.prev-button { - border-width: 15px 25px 15px 0; - box-shadow: -8px 0 0 0 #007bff; -} - -.prev-button:hover { - border-color: transparent #0056b3 transparent #0056b3; - box-shadow: -8px 0 0 0 #0056b3; -} - -.slider { - width: 90%; /* Make slider wider for easier interaction */ - margin: 10px auto; /* Center align the slider */ -} - -.slidecontainer { - margin: 20px 0; /* Space out elements */ -} - -/* Upload progress bar styles */ -.progress-bar { - width: 100%; - height: 20px; - background-color: #e0e0e0; - border-radius: 10px; - overflow: hidden; - margin: 10px 0; - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); -} - -.progress-fill { - height: 100%; - background: linear-gradient(90deg, #007bff, #0056b3); - width: 0%; - transition: width 0.3s ease; - border-radius: 10px; -} - -#uploadProgress { - margin: 15px 0; - text-align: center; -} - -#progressText { - font-weight: bold; - color: #007bff; - margin-left: 10px; -} - -#uploadStatus { - margin: 10px 0; - padding: 8px; - border-radius: 4px; - font-weight: bold; -} - -#uploadStatus:not(:empty) { - background-color: #e7f3ff; - border: 1px solid #007bff; - color: #0056b3; -} - -/* Form styling improvements */ -#uploadForm { - background-color: white; - padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - margin: 20px 0; -} - -#uploadButton { - background-color: #007bff; - color: white; - border: none; - padding: 10px 20px; - border-radius: 4px; - cursor: pointer; - font-size: 16px; - margin-left: 10px; - transition: background-color 0.3s ease; -} - -#uploadButton:hover:not(:disabled) { - background-color: #0056b3; -} - -#uploadButton:disabled { - background-color: #6c757d; - cursor: not-allowed; -} - -#uploadFile { - padding: 8px; - border: 1px solid #ccc; - border-radius: 4px; - margin-right: 10px; -} - -/* RFID mapping form styling */ -#editMappingForm { - background-color: white; - padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - margin: 20px 0; - text-align: left; -} - -#editMappingForm label { - display: block; - margin: 10px 0 5px 0; - font-weight: bold; -} - -#editMappingForm input[type="text"] { - width: 100%; - padding: 8px; - border: 1px solid #ccc; - border-radius: 4px; - margin-bottom: 10px; - box-sizing: border-box; -} - -#editMappingForm button { - background-color: #28a745; - color: white; - border: none; - padding: 10px 20px; - border-radius: 4px; - cursor: pointer; - font-size: 16px; - margin-top: 10px; - transition: background-color 0.3s ease; -} - -#editMappingForm button:hover { - background-color: #218838; -} - -/* Responsive design improvements */ -@media (max-width: 600px) { - body { - padding: 10px; - } - - .slider { - width: 95%; - } - - #uploadForm, #editMappingForm { - padding: 15px; - } - - #uploadButton, #editMappingForm button { - width: 100%; - margin: 10px 0; - } - - #uploadFile { - width: 100%; - margin: 10px 0; - } -} - -)rawliteral"; +// CSS content moved to SD card at /system/style.css +// This saves approximately 4KB of flash memory +const char css[] PROGMEM = ""; diff --git a/src/main.cpp b/src/main.cpp index b36ecee..b376952 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -47,7 +47,6 @@ #include "globals.h" #include "WebContent.h" -#include "css.h" #include "DirectoryNode.h" #define SOUND_STARTUP "start.mp3" @@ -94,15 +93,12 @@ bool SDActive = false; bool RFIDActive = false; +bool webrequestActive = false; + uint16_t voltage_threshold_counter = 0; size_t free_heap = 0; - -/* -std::map rfid_map{{"67 152 204 14", "01-The_Box_Tops-The_Letter.mp3"}, - {"67 175 148 160", "068-Der_Schatz_im_Bergsee"}}; - -*/ + void activateSD() { @@ -149,7 +145,7 @@ String humanReadableSize(const size_t bytes) { } void handleUpload(AsyncWebServerRequest *request, String filename, size_t index, uint8_t *data, size_t len, bool final) { - String logmessage; + static String logBuffer; // Static to avoid repeated allocations if (!index) { // Validate filename and file extension @@ -158,28 +154,31 @@ void handleUpload(AsyncWebServerRequest *request, String filename, size_t index, return; } - // Check if filename has valid extension (mp3, wav, flac, etc.) - String lowerFilename = filename; - lowerFilename.toLowerCase(); + // Use const reference to avoid string copies + const String& lowerFilename = filename; if (!lowerFilename.endsWith(".mp3") && !lowerFilename.endsWith(".wav") && - !lowerFilename.endsWith(".flac") && !lowerFilename.endsWith(".m4a") && - !lowerFilename.endsWith(".ogg")) { + !lowerFilename.endsWith(".m4a") && !lowerFilename.endsWith(".ogg")) { request->send(400, "text/plain", "Invalid file type. Only audio files are allowed."); return; } - // Check available SD card space - uint64_t cardSize = SD.cardSize() / (1024 * 1024); - uint64_t usedBytes = SD.usedBytes() / (1024 * 1024); - uint64_t freeSpace = cardSize - usedBytes; + // More efficient space check using bit shift + uint32_t freeSpace = (SD.cardSize() - SD.usedBytes()) >> 20; // Bit shift instead of division if (freeSpace < 10) { // Less than 10MB free request->send(507, "text/plain", "Insufficient storage space"); return; } - logmessage = "Upload Start: " + String(filename) + " (Free space: " + String(freeSpace) + "MB)"; - Serial.println(logmessage); + // Pre-allocate log buffer + logBuffer.reserve(128); + logBuffer = "Upload Start: "; + logBuffer += filename; + logBuffer += " (Free: "; + logBuffer += String(freeSpace); + logBuffer += "MB)"; + Serial.println(logBuffer); + logBuffer.clear(); // Free memory immediately // Ensure SD is active activateSD(); @@ -199,7 +198,8 @@ void handleUpload(AsyncWebServerRequest *request, String filename, size_t index, request->send(409, "text/plain", "Too many files with similar names"); return; } - Serial.println("File exists, using: " + filepath); + Serial.print("File exists, using: "); + Serial.println(filepath); } // Open the file for writing @@ -208,7 +208,6 @@ void handleUpload(AsyncWebServerRequest *request, String filename, size_t index, request->send(500, "text/plain", "Failed to create file on SD card"); return; } - } if (len) { @@ -227,14 +226,16 @@ void handleUpload(AsyncWebServerRequest *request, String filename, size_t index, } // Flush data periodically to ensure it's written - if (index % 8192 == 0) { // Flush every 8KB + if (index % 4096 == 0) { // Flush every 4KB request->_tempFile.flush(); } - // Log progress every 100KB - if (index % 102400 == 0) { - logmessage = "Upload progress: " + String(filename) + " - " + humanReadableSize(index + len); - Serial.println(logmessage); + // Reduce logging frequency to save memory - log every 200KB instead of 100KB + if (len && (index % 204800 == 0)) { + logBuffer = "Upload: "; + logBuffer += humanReadableSize(index + len); + Serial.println(logBuffer); + logBuffer.clear(); } } @@ -243,8 +244,12 @@ void handleUpload(AsyncWebServerRequest *request, String filename, size_t index, request->_tempFile.flush(); // Ensure all data is written request->_tempFile.close(); - logmessage = "Upload Complete: " + String(filename) + ", size: " + humanReadableSize(index + len); - Serial.println(logmessage); + logBuffer = "Upload Complete: "; + logBuffer += filename; + logBuffer += ", size: "; + logBuffer += humanReadableSize(index + len); + Serial.println(logBuffer); + logBuffer.clear(); // Rebuild directory tree to include new file rootNode.buildDirectoryTree("/"); @@ -455,13 +460,16 @@ boolean readSongProgress(const char *filename) { String getState() { - DynamicJsonDocument jsonState(1024); + // Use static buffer to avoid repeated allocations + static DynamicJsonDocument jsonState(512); + jsonState.clear(); // Clear previous data + jsonState["playing"] = audio.isRunning(); if (currentNode != nullptr) jsonState["title"] = *currentNode->getCurrentPlaying(); else - jsonState["title"] = "Angehalten"; + jsonState["title"] = "Angehalten"; // Store in flash jsonState["time"] = audio.getAudioCurrentTime(); jsonState["volume"] = audio.getVolume(); @@ -469,10 +477,11 @@ String getState() jsonState["voltage"] = lastVoltage; jsonState["uid"] = lastUid; jsonState["heap"] = free_heap; + String output; + output.reserve(256); // Pre-allocate string buffer serializeJson(jsonState, output); - jsonState.clear(); - jsonState.garbageCollect(); + return output; } @@ -531,11 +540,11 @@ std::map readDataFromFile(const char *filename) { String processor(const String &var) { - if (var == "DIRECTORY") + if (var == "DIRECTORY") { return rootNode.getDirectoryStructureHTML(); } - return String(); + return String(); // Return empty string instead of creating new String } void stop() @@ -718,6 +727,9 @@ void setup() */ audio.setPinout(I2S_BCLK, I2S_LRC, I2S_DOUT); audio.setVolume(volume); // 0...21 + + // Optimize audio buffer size to save memory (ESP32-audioI2S optimization) + audio.setBufferSize(8192); // Reduced from default large buffer (saves 40-600KB!) Serial.println("Audio initialized."); @@ -725,10 +737,19 @@ void setup() free_heap = xPortGetFreeHeapSize(); - // first parameter is name of access point, second is the password AsyncWiFiManager wifiManager(&server, &dns); - wifiManager.setTimeout(180); + // Memory optimizations for WiFiManager + wifiManager.setDebugOutput(false); // Disable debug strings + wifiManager.setMinimumSignalQuality(20); // Reduce AP scan results + wifiManager.setRemoveDuplicateAPs(true); // Remove duplicate APs from memory + + + // Reduce timeouts to free memory faster + wifiManager.setTimeout(60); // Reduced from 180 + wifiManager.setConnectTimeout(15); // Faster connection attempts + wifiManager.setConfigPortalTimeout(60); // Shorter portal timeout + Serial.println("Deactivating Brownout detector..."); WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0); //disable brownout detector @@ -737,11 +758,60 @@ void setup() if (wifiManager.autoConnect("HannaBox")) { + /* server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) { request->send_P(200, "text/html charset=UTF-8", index_html, processor); }); + */ + + server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) + { + webrequestActive = true; + deactivateRFID(); + activateSD(); + String htmlPath = "/system/index.html"; + if (SD.exists(htmlPath)) { + AsyncWebServerResponse *response = request->beginResponse(SD, htmlPath, "text/html", false, processor); + response->addHeader("Content-Type", "text/html; charset=UTF-8"); + request->send(response); + } else { + // Fallback: serve minimal error if file not found + request->send(200, "text/plain", "ERROR: /system/index.html on SD Card not found!"); + } + webrequestActive = false; + + }); server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request) - { request->send_P(200, "text/css", css); }); + { + webrequestActive = true; + deactivateRFID(); + activateSD(); + String cssPath = "/system/style.css"; + if (SD.exists(cssPath)) { + request->send(SD, cssPath, "text/css"); + } else { + // Fallback: serve minimal CSS if file not found + request->send(200, "text/css", "body{font-family:Arial;text-align:center;padding:20px;}"); + } + webrequestActive = false; + + }); + + server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request) + { + webrequestActive = true; + deactivateRFID(); + activateSD(); + String jsPath = "/system/script.js"; + if (SD.exists(jsPath)) { + request->send(SD, jsPath, "application/javascript"); + } else { + // Fallback: serve minimal JS if file not found + request->send(200, "application/javascript", "console.log('JavaScript file not found on SD card');"); + } + webrequestActive = false; + + }); server.on("/state", HTTP_GET, [](AsyncWebServerRequest *request) { @@ -806,7 +876,7 @@ void setup() xTaskCreatePinnedToCore( loop2, /* Function to implement the task */ "RFIDTask", /* Name of the task */ - 10000, /* Stack size in words */ + 4096, /* Stack size in words - reduced from 10000 to 4096 (optimization 2) */ NULL, /* Task input parameter */ 0, /* Priority of the task */ &RfidTask, /* Task handle. */ @@ -892,7 +962,7 @@ void loop() start(); } - if (continuePlaying) { + if (continuePlaying && !webrequestActive) { continuePlaying = false; startupSoundPlayed = true; playSongById(currentSongId,currentSongSeconds); @@ -966,7 +1036,7 @@ void loop() - if (loopCounter % RFID_LOOP_INTERVAL == 0) + if (loopCounter % RFID_LOOP_INTERVAL == 0 && !webrequestActive) { deactivateSD(); activateRFID(); @@ -1022,7 +1092,7 @@ void loop2(void *parameter) Serial.println("loop2 started"); loggingDone = true; } - vTaskDelay(1); + //vTaskDelay(1); } } diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..ca3c825 --- /dev/null +++ b/web/index.html @@ -0,0 +1,66 @@ + + + HannaBox + + + + + +

🎵 HannaBox 🎵

+

+
+
+
+ +
+ + +

+
+
+ + + +
+
+ + +
+ + +

+

🎶 Playlist 🎶

+ %DIRECTORY% +

+ +
+ + +
+ +
+ +

Edit RFID Mapping

+
+ +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/web/script.js b/web/script.js new file mode 100644 index 0000000..51fd815 --- /dev/null +++ b/web/script.js @@ -0,0 +1,262 @@ +setInterval(getState, 4000); +setInterval(updateProgress, 500); // Update progress every second + +// Get the
  • elements +var liElements = document.querySelectorAll('ul li'); + +var lastChange = 0; + +var lastStateUpdateTime = Date.now(); +var songStartTime = 0; +var currentSongLength = 0; +var isPlaying = false; +var userIsInteracting = false; // Flag to track user interaction with the slider + +// Add click event listener to each
  • element +liElements.forEach(function(li) { + li.addEventListener('click', function() { + //var liText = this.innerText; + var id = this.dataset.id; + playSongById(id); + }); +}); + +function simpleGetCall(endpoint) { + var xhr = new XMLHttpRequest(); + xhr.open("GET", "/" + endpoint, true); + + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + getState(); // Fetch the latest state right after the button action + } + }; + + xhr.send(); +} + +function postValue(endpoint,value) { + var xhr = new XMLHttpRequest(); + xhr.open("POST", "/" + endpoint, true); + xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); + xhr.send("value="+encodeURIComponent(value)); + + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + getState(); // Fetch the latest state right after the button action + } + }; +} + +function getState() { + var xhr = new XMLHttpRequest(); + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + var state = JSON.parse(xhr.response); + isPlaying = state['playing']; + if (isPlaying) { + songStartTime = Date.now() - state['time'] * 1000; + currentSongLength = state['length'] * 1000; + } + lastStateUpdateTime = Date.now(); + displayState(state); + } + } + xhr.open("GET","/state", true); + xhr.send(); +} + +function updateProgress() { + if (isPlaying && !userIsInteracting) { // Check if user is not interacting + var elapsedTime = Date.now() - songStartTime; + if (elapsedTime >= currentSongLength) { + elapsedTime = currentSongLength; + isPlaying = false; // Stop updating if the song has ended + } + var progressElement = document.getElementById('progressSlider'); + progressElement.value = elapsedTime / 1000; // Convert to seconds + document.getElementById("progressLabel").innerHTML = Math.floor(elapsedTime / 1000); + } +} + +function displayState(state) { + document.getElementById("state").innerHTML = state['title']; + document.getElementById("progressLabel").innerHTML = state['time']; + document.getElementById("voltage").innerHTML = state['voltage']+' mV'; + document.getElementById("heap").innerHTML = state['heap']+' bytes free heap'; + document.getElementById("uid").innerHTML = 'Last NFC ID: '+state['uid']; + var elements = document.getElementsByClassName('play-button'); + var btn = elements[0]; + + if (state['playing']) { + btn.classList.add('paused'); + } else { + btn.classList.remove('paused'); + } + + if (Date.now()-lastChange>1200) { + var progress = document.getElementById('progressSlider'); + progress.value = state['time']; + progress.max = state['length']; + + var volume = document.getElementById('volumeSlider'); + volume.value = state['volume']; + } + updateProgress(); +} + +function playSongById(id) { + var url = "/playbyid"; + var params = "id="+id; + var http = new XMLHttpRequest(); + + http.open("GET", url+"?"+params, true); + http.onreadystatechange = function() + { + if(http.readyState == 4 && http.status == 200) { + getState(); + } + } + http.send(null); +} + +function playNamedSong(song) { + var xhr = new XMLHttpRequest(); + xhr.open("POST", "/playnamed"); + xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); + //application/x-www-form-urlencoded + var body = song; + xhr.send("title="+encodeURIComponent(body)); +} + +function editMapping() { + var rfid = document.getElementById('rfid').value; + var song = document.getElementById('song').value; + var xhr = new XMLHttpRequest(); + xhr.open("POST", "/edit_mapping", true); + xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); + xhr.send("rfid=" + encodeURIComponent(rfid) + "&song=" + encodeURIComponent(song)); + xhr.onreadystatechange = function() { + if (xhr.readyState === 4 && xhr.status === 200) { + alert("Mapping updated successfully!"); + } + }; + } + +// Validate file before upload +function validateFile(file) { + var maxSize = 50 * 1024 * 1024; // 50MB limit + var allowedTypes = ['audio/mpeg', 'audio/wav', 'audio/flac', 'audio/mp4', 'audio/ogg']; + var allowedExtensions = ['.mp3', '.wav', '.flac', '.m4a', '.ogg']; + + if (file.size > maxSize) { + return 'File too large. Maximum size is 50MB.'; + } + + var fileName = file.name.toLowerCase(); + var hasValidExtension = allowedExtensions.some(ext => fileName.endsWith(ext)); + + if (!hasValidExtension) { + return 'Invalid file type. Only audio files (.mp3, .wav, .flac, .m4a, .ogg) are allowed.'; + } + + return null; // No error +} + +// Handle form submission with AJAX to show upload status +document.getElementById('uploadForm').addEventListener('submit', function(event) { + event.preventDefault(); // Prevent the default form submit + + var fileInput = document.getElementById('uploadFile'); + var file = fileInput.files[0]; + + if (!file) { + alert('Please select a file to upload.'); + return; + } + + var validationError = validateFile(file); + if (validationError) { + alert(validationError); + return; + } + + var form = event.target; + var formData = new FormData(form); + var uploadButton = document.getElementById('uploadButton'); + var uploadStatus = document.getElementById('uploadStatus'); + var uploadProgress = document.getElementById('uploadProgress'); + var progressFill = document.getElementById('progressFill'); + var progressText = document.getElementById('progressText'); + + // Disable upload button and show progress + uploadButton.disabled = true; + uploadButton.value = 'Uploading...'; + uploadProgress.style.display = 'block'; + uploadStatus.innerHTML = 'Preparing upload...'; + + var xhr = new XMLHttpRequest(); + xhr.open('POST', '/upload', true); + + xhr.upload.onloadstart = function() { + uploadStatus.innerHTML = 'Upload started...'; + }; + + xhr.upload.onprogress = function(event) { + if (event.lengthComputable) { + var percentComplete = Math.round((event.loaded / event.total) * 100); + progressFill.style.width = percentComplete + '%'; + progressText.innerHTML = percentComplete + '%'; + uploadStatus.innerHTML = 'Uploading: ' + percentComplete + '% (' + + Math.round(event.loaded / 1024) + 'KB / ' + + Math.round(event.total / 1024) + 'KB)'; + } + }; + + xhr.upload.onerror = function() { + uploadStatus.innerHTML = 'Upload failed due to network error.'; + resetUploadForm(); + }; + + xhr.upload.onabort = function() { + uploadStatus.innerHTML = 'Upload was cancelled.'; + resetUploadForm(); + }; + + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { // Request is done + if (xhr.status >= 200 && xhr.status < 300) { // Success status code range + uploadStatus.innerHTML = 'Upload completed successfully!'; + progressFill.style.width = '100%'; + progressText.innerHTML = '100%'; + + setTimeout(function() { + alert('File uploaded successfully!'); + location.reload(); // Reload to get updated playlist + }, 1000); + } else { + var errorMsg = xhr.responseText || 'Unknown error occurred'; + uploadStatus.innerHTML = 'Upload failed: ' + errorMsg; + alert('Upload failed: ' + errorMsg); + resetUploadForm(); + } + } + }; + + xhr.send(formData); // Send the form data using XMLHttpRequest +}); + +function resetUploadForm() { + var uploadButton = document.getElementById('uploadButton'); + var uploadProgress = document.getElementById('uploadProgress'); + var progressFill = document.getElementById('progressFill'); + var progressText = document.getElementById('progressText'); + + uploadButton.disabled = false; + uploadButton.value = 'Upload'; + uploadProgress.style.display = 'none'; + progressFill.style.width = '0%'; + progressText.innerHTML = '0%'; + + // Clear file input + document.getElementById('uploadFile').value = ''; +} diff --git a/web/style.css b/web/style.css new file mode 100644 index 0000000..af7d0e6 --- /dev/null +++ b/web/style.css @@ -0,0 +1,229 @@ +body { + font-family: Arial, sans-serif; + margin: 0 auto; + padding: 20px; + text-align: center; /* Center align elements */ + background-color: #f4f4f4; /* Light background */ +} + +.playlist-container { + max-height: 300px; + overflow-y: auto; + border: 1px solid #ccc; + padding: 10px; + margin-top: 20px; + text-align: left; /* Align playlist text to the left */ +} + +li { + cursor: pointer; + list-style-type: none; +} + +.play-button, .next-button, .prev-button { + border: 0; + background: transparent; + cursor: pointer; + transition: background-color 0.3s ease; /* Smooth transition for hover */ +} + +.play-button { + box-sizing: border-box; + margin: 5% auto; + height: 50px; /* Consistent size for play button */ + border-color: transparent transparent transparent #007bff; + border-style: solid; + border-width: 25px 0 25px 40px; /* Adjusted size */ +} + +.play-button.paused { + border-style: double; + border-width: 25px 0 25px 40px; /* Same size for pause button */ + height: 50px; /* Consistent height */ +} + +.play-button:hover { + border-color: transparent transparent transparent #0056b3; /* Darker blue on hover */ +} + +.next-button, .prev-button { + padding: 0; + margin: 10px; + border-color: transparent #007bff transparent #007bff; + border-style: solid; +} + +.next-button { + border-width: 15px 0 15px 25px; + box-shadow: 8px 0 0 0 #007bff; +} + +.next-button:hover { + border-color: transparent #0056b3 transparent #0056b3; + box-shadow: 8px 0 0 0 #0056b3; +} + +.prev-button { + border-width: 15px 25px 15px 0; + box-shadow: -8px 0 0 0 #007bff; +} + +.prev-button:hover { + border-color: transparent #0056b3 transparent #0056b3; + box-shadow: -8px 0 0 0 #0056b3; +} + +.slider { + width: 90%; /* Make slider wider for easier interaction */ + margin: 10px auto; /* Center align the slider */ +} + +.slidecontainer { + margin: 20px 0; /* Space out elements */ +} + +/* Upload progress bar styles */ +.progress-bar { + width: 100%; + height: 20px; + background-color: #e0e0e0; + border-radius: 10px; + overflow: hidden; + margin: 10px 0; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, #007bff, #0056b3); + width: 0%; + transition: width 0.3s ease; + border-radius: 10px; +} + +#uploadProgress { + margin: 15px 0; + text-align: center; +} + +#progressText { + font-weight: bold; + color: #007bff; + margin-left: 10px; +} + +#uploadStatus { + margin: 10px 0; + padding: 8px; + border-radius: 4px; + font-weight: bold; +} + +#uploadStatus:not(:empty) { + background-color: #e7f3ff; + border: 1px solid #007bff; + color: #0056b3; +} + +/* Form styling improvements */ +#uploadForm { + background-color: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin: 20px 0; +} + +#uploadButton { + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + margin-left: 10px; + transition: background-color 0.3s ease; +} + +#uploadButton:hover:not(:disabled) { + background-color: #0056b3; +} + +#uploadButton:disabled { + background-color: #6c757d; + cursor: not-allowed; +} + +#uploadFile { + padding: 8px; + border: 1px solid #ccc; + border-radius: 4px; + margin-right: 10px; +} + +/* RFID mapping form styling */ +#editMappingForm { + background-color: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin: 20px 0; + text-align: left; +} + +#editMappingForm label { + display: block; + margin: 10px 0 5px 0; + font-weight: bold; +} + +#editMappingForm input[type="text"] { + width: 100%; + padding: 8px; + border: 1px solid #ccc; + border-radius: 4px; + margin-bottom: 10px; + box-sizing: border-box; +} + +#editMappingForm button { + background-color: #28a745; + color: white; + border: none; + padding: 10px 20px; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + margin-top: 10px; + transition: background-color 0.3s ease; +} + +#editMappingForm button:hover { + background-color: #218838; +} + +/* Responsive design improvements */ +@media (max-width: 600px) { + body { + padding: 10px; + } + + .slider { + width: 95%; + } + + #uploadForm, #editMappingForm { + padding: 15px; + } + + #uploadButton, #editMappingForm button { + width: 100%; + margin: 10px 0; + } + + #uploadFile { + width: 100%; + margin: 10px 0; + } +} diff --git a/web/system_script.js b/web/system_script.js new file mode 100644 index 0000000..51fd815 --- /dev/null +++ b/web/system_script.js @@ -0,0 +1,262 @@ +setInterval(getState, 4000); +setInterval(updateProgress, 500); // Update progress every second + +// Get the
  • elements +var liElements = document.querySelectorAll('ul li'); + +var lastChange = 0; + +var lastStateUpdateTime = Date.now(); +var songStartTime = 0; +var currentSongLength = 0; +var isPlaying = false; +var userIsInteracting = false; // Flag to track user interaction with the slider + +// Add click event listener to each
  • element +liElements.forEach(function(li) { + li.addEventListener('click', function() { + //var liText = this.innerText; + var id = this.dataset.id; + playSongById(id); + }); +}); + +function simpleGetCall(endpoint) { + var xhr = new XMLHttpRequest(); + xhr.open("GET", "/" + endpoint, true); + + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + getState(); // Fetch the latest state right after the button action + } + }; + + xhr.send(); +} + +function postValue(endpoint,value) { + var xhr = new XMLHttpRequest(); + xhr.open("POST", "/" + endpoint, true); + xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); + xhr.send("value="+encodeURIComponent(value)); + + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + getState(); // Fetch the latest state right after the button action + } + }; +} + +function getState() { + var xhr = new XMLHttpRequest(); + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + var state = JSON.parse(xhr.response); + isPlaying = state['playing']; + if (isPlaying) { + songStartTime = Date.now() - state['time'] * 1000; + currentSongLength = state['length'] * 1000; + } + lastStateUpdateTime = Date.now(); + displayState(state); + } + } + xhr.open("GET","/state", true); + xhr.send(); +} + +function updateProgress() { + if (isPlaying && !userIsInteracting) { // Check if user is not interacting + var elapsedTime = Date.now() - songStartTime; + if (elapsedTime >= currentSongLength) { + elapsedTime = currentSongLength; + isPlaying = false; // Stop updating if the song has ended + } + var progressElement = document.getElementById('progressSlider'); + progressElement.value = elapsedTime / 1000; // Convert to seconds + document.getElementById("progressLabel").innerHTML = Math.floor(elapsedTime / 1000); + } +} + +function displayState(state) { + document.getElementById("state").innerHTML = state['title']; + document.getElementById("progressLabel").innerHTML = state['time']; + document.getElementById("voltage").innerHTML = state['voltage']+' mV'; + document.getElementById("heap").innerHTML = state['heap']+' bytes free heap'; + document.getElementById("uid").innerHTML = 'Last NFC ID: '+state['uid']; + var elements = document.getElementsByClassName('play-button'); + var btn = elements[0]; + + if (state['playing']) { + btn.classList.add('paused'); + } else { + btn.classList.remove('paused'); + } + + if (Date.now()-lastChange>1200) { + var progress = document.getElementById('progressSlider'); + progress.value = state['time']; + progress.max = state['length']; + + var volume = document.getElementById('volumeSlider'); + volume.value = state['volume']; + } + updateProgress(); +} + +function playSongById(id) { + var url = "/playbyid"; + var params = "id="+id; + var http = new XMLHttpRequest(); + + http.open("GET", url+"?"+params, true); + http.onreadystatechange = function() + { + if(http.readyState == 4 && http.status == 200) { + getState(); + } + } + http.send(null); +} + +function playNamedSong(song) { + var xhr = new XMLHttpRequest(); + xhr.open("POST", "/playnamed"); + xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); + //application/x-www-form-urlencoded + var body = song; + xhr.send("title="+encodeURIComponent(body)); +} + +function editMapping() { + var rfid = document.getElementById('rfid').value; + var song = document.getElementById('song').value; + var xhr = new XMLHttpRequest(); + xhr.open("POST", "/edit_mapping", true); + xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); + xhr.send("rfid=" + encodeURIComponent(rfid) + "&song=" + encodeURIComponent(song)); + xhr.onreadystatechange = function() { + if (xhr.readyState === 4 && xhr.status === 200) { + alert("Mapping updated successfully!"); + } + }; + } + +// Validate file before upload +function validateFile(file) { + var maxSize = 50 * 1024 * 1024; // 50MB limit + var allowedTypes = ['audio/mpeg', 'audio/wav', 'audio/flac', 'audio/mp4', 'audio/ogg']; + var allowedExtensions = ['.mp3', '.wav', '.flac', '.m4a', '.ogg']; + + if (file.size > maxSize) { + return 'File too large. Maximum size is 50MB.'; + } + + var fileName = file.name.toLowerCase(); + var hasValidExtension = allowedExtensions.some(ext => fileName.endsWith(ext)); + + if (!hasValidExtension) { + return 'Invalid file type. Only audio files (.mp3, .wav, .flac, .m4a, .ogg) are allowed.'; + } + + return null; // No error +} + +// Handle form submission with AJAX to show upload status +document.getElementById('uploadForm').addEventListener('submit', function(event) { + event.preventDefault(); // Prevent the default form submit + + var fileInput = document.getElementById('uploadFile'); + var file = fileInput.files[0]; + + if (!file) { + alert('Please select a file to upload.'); + return; + } + + var validationError = validateFile(file); + if (validationError) { + alert(validationError); + return; + } + + var form = event.target; + var formData = new FormData(form); + var uploadButton = document.getElementById('uploadButton'); + var uploadStatus = document.getElementById('uploadStatus'); + var uploadProgress = document.getElementById('uploadProgress'); + var progressFill = document.getElementById('progressFill'); + var progressText = document.getElementById('progressText'); + + // Disable upload button and show progress + uploadButton.disabled = true; + uploadButton.value = 'Uploading...'; + uploadProgress.style.display = 'block'; + uploadStatus.innerHTML = 'Preparing upload...'; + + var xhr = new XMLHttpRequest(); + xhr.open('POST', '/upload', true); + + xhr.upload.onloadstart = function() { + uploadStatus.innerHTML = 'Upload started...'; + }; + + xhr.upload.onprogress = function(event) { + if (event.lengthComputable) { + var percentComplete = Math.round((event.loaded / event.total) * 100); + progressFill.style.width = percentComplete + '%'; + progressText.innerHTML = percentComplete + '%'; + uploadStatus.innerHTML = 'Uploading: ' + percentComplete + '% (' + + Math.round(event.loaded / 1024) + 'KB / ' + + Math.round(event.total / 1024) + 'KB)'; + } + }; + + xhr.upload.onerror = function() { + uploadStatus.innerHTML = 'Upload failed due to network error.'; + resetUploadForm(); + }; + + xhr.upload.onabort = function() { + uploadStatus.innerHTML = 'Upload was cancelled.'; + resetUploadForm(); + }; + + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { // Request is done + if (xhr.status >= 200 && xhr.status < 300) { // Success status code range + uploadStatus.innerHTML = 'Upload completed successfully!'; + progressFill.style.width = '100%'; + progressText.innerHTML = '100%'; + + setTimeout(function() { + alert('File uploaded successfully!'); + location.reload(); // Reload to get updated playlist + }, 1000); + } else { + var errorMsg = xhr.responseText || 'Unknown error occurred'; + uploadStatus.innerHTML = 'Upload failed: ' + errorMsg; + alert('Upload failed: ' + errorMsg); + resetUploadForm(); + } + } + }; + + xhr.send(formData); // Send the form data using XMLHttpRequest +}); + +function resetUploadForm() { + var uploadButton = document.getElementById('uploadButton'); + var uploadProgress = document.getElementById('uploadProgress'); + var progressFill = document.getElementById('progressFill'); + var progressText = document.getElementById('progressText'); + + uploadButton.disabled = false; + uploadButton.value = 'Upload'; + uploadProgress.style.display = 'none'; + progressFill.style.width = '0%'; + progressText.innerHTML = '0%'; + + // Clear file input + document.getElementById('uploadFile').value = ''; +}