When measuring target charts in Stage 3 (chartread), the real-time swatch grid visualizer (src/js/swatch_grid.js) exhibits three significant usability and layout issues:
Reverse Orientation / Ordering:
Patches within each measured strip and/or strip rows are rendered in reverse orientation compared to the physical printed layout produced by printtarg.
Omission of White Patches:
In swatch_grid.js (line 66), if (patch.is_pad) continue; unconditionally filters out spacer and boundary patches. In many Argyll printtarg layouts, white reference patches (-e white steps) placed at strip headers or margins are flagged as is_pad, causing them to be completely omitted from the UI.
Absence of Intended Color Display:
The swatch element currently displays only a single solid background color (patch.measured.Lab). While a traffic-light border indicates whether the patch is within tolerance, the user cannot visually compare the original intended target color against the actual measured substrate color.
Specific Targets to Address
Target 1: Diagonally Split Swatch Rendering (Intent vs. Measured)
Top-Left Half: Original intended/expected color (derived from patch.expected.Lab or converted from patch.device RGB/CMYK percentages).
Bottom-Right Half: Actual measured color (patch.measured.Lab).
If a patch is unmeasured, render full intended color.
Add CMYK-to-sRGB conversion support in src/js/color_convert.js (deviceCmykToCss) so CMYK targets preview accurate intended colorants.
Maintain traffic-light ΔE₀₀ border styling (Green < 2.0, Amber < 5.0, Red ≥ 5.0) and numerical ΔE badge below the split swatch.
Target 2: Correct Patch & Row Sequence Alignment
Align row ordering (Row A -> Row N) and horizontal column ordering (Col 1 -> Col N) to match the printed target orientation generated by printtarg.
Validate strip reading order across both single-page and multi-page target layouts.
Target 3: White Patch & Boundary Patch Preservation
Refine the is_pad filter in swatch_grid.js so that legitimate white patches (patches with valid measurement data, non-spacer location tags like A1, or expected/measured spectral data) are rendered rather than omitted.
Target 4: Detailed Swatch Inspection Tooltip
Enhance the hover tooltip on .swatch-patch to display:
Patch ID & Location (e.g. Strip A, Patch 3 [A3])
Intended Values (RGB/CMYK device % and expected L*a*b*)
Measured Values (measured L*a*b*)
Colour Difference (ΔE₀₀ value with quality classification)
### Problem Diagnosis & Technical Findings
When measuring target charts in Stage 3 (`chartread`), the real-time swatch grid visualizer ([`src/js/swatch_grid.js`](file:///z:/ICCery/src/js/swatch_grid.js)) exhibits three significant usability and layout issues:
1. **Reverse Orientation / Ordering**:
- Patches within each measured strip and/or strip rows are rendered in reverse orientation compared to the physical printed layout produced by `printtarg`.
2. **Omission of White Patches**:
- In `swatch_grid.js` (line 66), `if (patch.is_pad) continue;` unconditionally filters out spacer and boundary patches. In many Argyll `printtarg` layouts, white reference patches (`-e` white steps) placed at strip headers or margins are flagged as `is_pad`, causing them to be completely omitted from the UI.
3. **Absence of Intended Color Display**:
- The swatch element currently displays only a single solid background color (`patch.measured.Lab`). While a traffic-light border indicates whether the patch is within tolerance, the user cannot visually compare the original intended target color against the actual measured substrate color.
---
### Specific Targets to Address
#### Target 1: Diagonally Split Swatch Rendering (Intent vs. Measured)
* [ ] Update `.swatch-color` in [`src/styles/main.css`](file:///z:/ICCery/src/styles/main.css) and [`src/js/swatch_grid.js`](file:///z:/ICCery/src/js/swatch_grid.js) to render a 135° diagonal split:
* **Top-Left Half**: Original intended/expected color (derived from `patch.expected.Lab` or converted from `patch.device` RGB/CMYK percentages).
* **Bottom-Right Half**: Actual measured color (`patch.measured.Lab`).
* If a patch is unmeasured, render full intended color.
* [ ] Add CMYK-to-sRGB conversion support in [`src/js/color_convert.js`](file:///z:/ICCery/src/js/color_convert.js) (`deviceCmykToCss`) so CMYK targets preview accurate intended colorants.
* [ ] Maintain traffic-light ΔE₀₀ border styling (Green < 2.0, Amber < 5.0, Red ≥ 5.0) and numerical ΔE badge below the split swatch.
#### Target 2: Correct Patch & Row Sequence Alignment
* [ ] Align row ordering (Row A -> Row N) and horizontal column ordering (Col 1 -> Col N) to match the printed target orientation generated by `printtarg`.
* [ ] Validate strip reading order across both single-page and multi-page target layouts.
#### Target 3: White Patch & Boundary Patch Preservation
* [ ] Refine the `is_pad` filter in `swatch_grid.js` so that legitimate white patches (patches with valid measurement data, non-spacer location tags like `A1`, or `expected`/`measured` spectral data) are rendered rather than omitted.
#### Target 4: Detailed Swatch Inspection Tooltip
* [ ] Enhance the hover tooltip on `.swatch-patch` to display:
* **Patch ID & Location** (e.g. `Strip A, Patch 3 [A3]`)
* **Intended Values** (RGB/CMYK device % and expected L\*a\*b\*)
* **Measured Values** (measured L\*a\*b\*)
* **Colour Difference** (ΔE₀₀ value with quality classification)
gronod
changed title from enhancement : Output of read patches does not show intended colour to enhancement: Correct Swatch Grid Orientation, Render White Patches, and Display Diagonally Split Intended vs. Measured Colors (#178)2026-09-02 01:04:06 +01:00
Finalised in `enh/178-swatch-grid` (stacked on `enh/177-button-standardization`):
- Documented the `is_pad` guard so legitimate white reference patches are preserved while empty spacers are skipped.
- Refined the `.swatch-patch` tooltip to show intended and measured Lab values and a verbal ΔE classification.
- Added a smoke test exercising white patch rendering, spacer skipping, and split-gradient swatches.
- Verified row/column ordering matches the `printtarg` output.
Closes #178.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Problem Diagnosis & Technical Findings
When measuring target charts in Stage 3 (
chartread), the real-time swatch grid visualizer (src/js/swatch_grid.js) exhibits three significant usability and layout issues:printtarg.swatch_grid.js(line 66),if (patch.is_pad) continue;unconditionally filters out spacer and boundary patches. In many Argyllprinttarglayouts, white reference patches (-ewhite steps) placed at strip headers or margins are flagged asis_pad, causing them to be completely omitted from the UI.patch.measured.Lab). While a traffic-light border indicates whether the patch is within tolerance, the user cannot visually compare the original intended target color against the actual measured substrate color.Specific Targets to Address
Target 1: Diagonally Split Swatch Rendering (Intent vs. Measured)
.swatch-colorinsrc/styles/main.cssandsrc/js/swatch_grid.jsto render a 135° diagonal split:patch.expected.Labor converted frompatch.deviceRGB/CMYK percentages).patch.measured.Lab).src/js/color_convert.js(deviceCmykToCss) so CMYK targets preview accurate intended colorants.Target 2: Correct Patch & Row Sequence Alignment
printtarg.Target 3: White Patch & Boundary Patch Preservation
is_padfilter inswatch_grid.jsso that legitimate white patches (patches with valid measurement data, non-spacer location tags likeA1, orexpected/measuredspectral data) are rendered rather than omitted.Target 4: Detailed Swatch Inspection Tooltip
.swatch-patchto display:Strip A, Patch 3 [A3])enhancement : Output of read patches does not show intended colourto enhancement: Correct Swatch Grid Orientation, Render White Patches, and Display Diagonally Split Intended vs. Measured Colors (#178)Finalised in
enh/178-swatch-grid(stacked onenh/177-button-standardization):is_padguard so legitimate white reference patches are preserved while empty spacers are skipped..swatch-patchtooltip to show intended and measured Lab values and a verbal ΔE classification.printtargoutput.Closes #178.