hannabox/SD_CARD_SETUP.md

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)
|   ├── index.html         (homepage - copy from web/index.html)
│   ├── 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
   • Copy the file web/index.html from this project to system/index.html 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