CGW-Quote-Builder/VISUAL_LAYER_REFERENCE.md

Visual Test Images - Layer Reference

Image Overview

All images created with 800x600px canvas dimensions for perfect alignment.

Layers Created

1. Base Layer (/layers/base.jpg)

• Sky blue background (#87CEEB)
• Green grass at bottom
• Tan house with dark brown roof
• Two side windows with dividers
• Door opening in center (lighter tan rectangle)
• Opaque JPG - the foundation layer

2. Door Layer (/404/door-{color}.png)

Created in 4 colors:

• door-white.png - White door (#FFFFFF)
• door-black.png - Dark gray/black door (#2C2C2C)
• door-bronze.png - Bronze door (#8B6914)
• door-tan.png - Tan door (#D2B48C)

Each door has:

• Rectangular shape positioned in the door opening
• Two decorative panels (outlined rectangles)
• Small black circle on right side marking handle position
• Transparent PNG - shows house through transparent areas

3. Hardware Layer (/layers/hardware.png)

• Gold circle (#FFD700) for door handle
• Bronze backplate (#B8860B) behind handle
• Light highlight for 3D effect
• Positioned on right side (for left-hinge door)
• Transparent PNG - only handle visible

4. Foreground Layer (/layers/foreground.png)

• Green bushes at bottom corners (#228B22)
• Pink flowers with gold centers
• Plants overlap bottom of door realistically
• Transparent PNG - plants appear in front

How They Stack (z-index order)

Layer 5: Foreground (plants) - On top, in front of everything
Layer 3: Hardware (handle)   - Above door
Layer 2: Door (colored)       - In door opening
Layer 1: Base (house)         - Background, always visible

Left-Hinge vs Right-Hinge

Product 404 (Left-Hinge)

• Door handle on right side of door
• Door opens to the right
• Uses images as created

Product 404R (Right-Hinge)

• Door and hardware layers flipped horizontally
• Door handle appears on left side of door
• Door opens to the left
• Same image files, just CSS transformed!

Visual Features to Notice

1. Door positioning: The door rectangle fits perfectly in the lighter opening on the house
2. Handle alignment: The small black dot on the door matches the gold handle position
3. Plants overlap: The foreground plants appear in front of the door bottom
4. Color changes: Select different colors to see door change while everything else stays the same
5. Flip effect: Compare 404 vs 404R to see the door and handle swap sides

Technical Details

• Canvas size: 800x600 pixels (all layers)
• Format: JPG for base (opaque), PNG for others (transparency)
• Color depth: RGB/RGBA
• Positioning: Centered with object-fit: contain

Test Checklist

When viewing the products, verify:

• ✅ House background always visible
• ✅ Door fits in opening
• ✅ Door color changes when selected
• ✅ Gold handle appears on door
• ✅ Plants appear in front of door
• ✅ 404R has flipped door and handle
• ✅ No white gaps or misalignment

File Locations

app/static/images/
└── window/
    └── storm-window/
        ├── 404/
        │   ├── door-white.png
        │   ├── door-black.png
        │   ├── door-bronze.png
        │   └── door-tan.png
        └── layers/
            ├── base.jpg
            ├── hardware.png
            └── foreground.png

Creating Similar Images

Use the script create_visual_test_images.py as a template:

1. Set canvas dimensions (CANVAS_WIDTH, CANVAS_HEIGHT)
2. Design each layer with proper positioning
3. Use transparent PNGs for layered elements
4. Export base layer as JPG, others as PNG
5. Keep all layers at same canvas size