Memory Optimizations

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