Jason
106 lines
2.7 KiB
Markdown
106 lines
2.7 KiB
Markdown
# Testing Layer Transforms - Product 404R
|
|
|
|
## Quick Test Guide
|
|
|
|
I've created **product 404R** as a demonstration of the layer transform feature. It uses the same images as product 404 but flips the door and hardware layers horizontally to show a right-hinge configuration.
|
|
|
|
## Test URLs
|
|
|
|
**Left-Hinge (Original):**
|
|
```
|
|
http://localhost:8080/quiz/product/404
|
|
```
|
|
|
|
**Right-Hinge (Flipped):**
|
|
```
|
|
http://localhost:8080/quiz/product/404R
|
|
```
|
|
|
|
## What to Look For
|
|
|
|
When you compare both products:
|
|
|
|
1. **Base layer** - Should be identical (house/background doesn't flip)
|
|
2. **Door layer** - Should be mirrored left-to-right
|
|
3. **Hardware layer** - Should be mirrored to match door position
|
|
4. **Foreground layer** - Should be identical (plants don't flip)
|
|
|
|
## Image Files Used
|
|
|
|
Both products use the same image files from:
|
|
```
|
|
/static/images/window/storm-window/404/
|
|
├── door-white.png
|
|
├── door-black.png
|
|
└── (other color variants)
|
|
|
|
/static/images/window/storm-window/layers/
|
|
├── base.jpg
|
|
├── hardware.png
|
|
└── foreground.png
|
|
```
|
|
|
|
**Zero additional images needed!** The flip is pure CSS.
|
|
|
|
## Configuration Difference
|
|
|
|
### Product 404 (Left-Hinge)
|
|
```json
|
|
"imageConfig": {
|
|
"useCanvasAPI": true
|
|
}
|
|
```
|
|
|
|
### Product 404R (Right-Hinge)
|
|
```json
|
|
"imageConfig": {
|
|
"useCanvasAPI": true,
|
|
"layerTransforms": {
|
|
"door": "flip-horizontal",
|
|
"hardware": "flip-horizontal"
|
|
}
|
|
}
|
|
```
|
|
|
|
## Color Variations
|
|
|
|
Both products support all color options:
|
|
- Black
|
|
- White
|
|
- Bronze
|
|
- Sandstone
|
|
|
|
Select different colors in the dropdown to see the door layer change while maintaining the flip.
|
|
|
|
## Technical Notes
|
|
|
|
- **Performance**: Instant rendering, GPU-accelerated CSS transform
|
|
- **Storage**: No duplicate images required
|
|
- **Bandwidth**: Same image files downloaded once and reused
|
|
- **Compatibility**: Works in all modern browsers
|
|
|
|
## Use Cases
|
|
|
|
This same technique can be applied to:
|
|
- Storm doors with different hinge sides
|
|
- Windows with operable panels on left vs right
|
|
- Sliding doors/windows that open from different sides
|
|
- Any product where a mirror variant is needed
|
|
|
|
## Next Steps
|
|
|
|
1. Restart your Flask server to load the new product data
|
|
2. Visit both URLs to compare
|
|
3. Try different color selections
|
|
4. Open browser DevTools to see the CSS classes applied:
|
|
- `.layer-flip-horizontal` on door and hardware layers for 404R
|
|
- No transform classes on 404
|
|
|
|
## Production Usage
|
|
|
|
When ready for production:
|
|
1. Design all "left-hinge" (or default orientation) images
|
|
2. Add product entries for "right-hinge" variants with `layerTransforms`
|
|
3. No need to create separate images!
|
|
4. Consider naming convention: 404, 404R, 404L, etc.
|