# Web Interface Files Setup

This directory contains the web interface files that will be uploaded to the ESP32's LittleFS filesystem.

## Structure

```
data/
├── index.html              # Main HTML page
├── css/
│   ├── bootstrap.min.css   # Bootstrap CSS (local copy)
│   └── style.css           # Custom styles
└── js/
    ├── bootstrap.bundle.min.js  # Bootstrap JS (local copy)
    └── app.js              # Application JavaScript
```

## How to Upload Files to ESP32

### Method 1: Using PlatformIO (Recommended)

1. **Install LittleFS Uploader**:
   - In VS Code, open PlatformIO Home
   - Go to Platforms → Espressif 32
   - Make sure it's installed/updated

2. **Download Bootstrap Files** (if not already present):
   
   Download these files and place them in the appropriate directories:
   
   - **Bootstrap CSS** (v5.3.0):
     - URL: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css
     - Save to: `data/css/bootstrap.min.css`
   
   - **Bootstrap JS** (v5.3.0):
     - URL: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js
     - Save to: `data/js/bootstrap.bundle.min.js`

3. **Upload Filesystem**:
   - In VS Code, click PlatformIO icon
   - Under PROJECT TASKS → env:wemos_d1_mini32
   - Click "Upload Filesystem Image"
   - Wait for upload to complete

### Method 2: Manual Download and Upload

If you need to download Bootstrap files manually:

```bash
# Navigate to data directories
cd data/css
wget https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

cd ../js
wget https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js
```

Or use curl:

```bash
cd data/css
curl -o bootstrap.min.css https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

cd ../js
curl -o bootstrap.bundle.min.js https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js
```

### Verifying Upload

After uploading, you can verify the files are present by:

1. Opening Serial Monitor (115200 baud)
2. Look for "LittleFS mounted successfully" message
3. Access the web interface and check browser console for any 404 errors

## File Sizes (Approximate)

- `bootstrap.min.css`: ~190 KB
- `bootstrap.bundle.min.js`: ~220 KB
- `style.css`: ~1 KB
- `app.js`: ~4 KB
- `index.html`: ~4 KB

**Total**: ~420 KB (ESP32 has 1.5MB+ available for LittleFS)

## Benefits of LittleFS Approach

✅ **Better Organization**: Separate HTML, CSS, and JS files
✅ **Offline Operation**: Works without internet connection
✅ **Easier Maintenance**: Edit files without recompiling firmware
✅ **Faster Updates**: Only upload filesystem when web files change
✅ **Better Performance**: No need to parse embedded strings
✅ **Standard Development**: Use familiar web development workflow

## Troubleshooting

### LittleFS Mount Failed
- Ensure filesystem is properly formatted
- Try uploading filesystem image again
- Check serial output for detailed error messages

### 404 Errors on Static Files
- Verify files are in correct directories
- Check file names match exactly (case-sensitive)
- Re-upload filesystem image

### Bootstrap Not Loading
- Download Bootstrap files to `data/css/` and `data/js/`
- Upload filesystem image
- Clear browser cache and reload