111 lines
3.2 KiB
Markdown
111 lines
3.2 KiB
Markdown
# 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
|