CGW-Quote-Builder/TESTING_404R.md

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)

"imageConfig": {
  "useCanvasAPI": true
}

Product 404R (Right-Hinge)

"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.