60 lines
2.5 KiB
Markdown
60 lines
2.5 KiB
Markdown
# 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
|