Update heat map guide overlay with 9x9 grid and linear gradient using value converter

[Copilot]

Overview

Updated the heat map guide overlay to implement the composition quality visualization as specified in #57. The heat map now uses a 9x9 grid with a linear gradient from red (bad) to green (good) at 50% opacity, implemented using MVVM pattern with a value converter.

Changes

Heat Map Implementation

• Grid Structure: Expanded from 3x3 to 9x9 cells (81 total) to provide more detailed composition guidance
• Value Converter: Created HeatMapValueToColorConverter that converts double values (0.0-1.0) to color brushes using linear interpolation
• ViewModel Integration: Added HeatMapMatrix property to store heat map values as double[9][9] array using C# 12 collection expressions
• XAML Binding: All rectangles use data binding with converter instead of hard-coded RGB values
• Color Gradient: Implemented mathematically correct linear color interpolation from #FF0000 (red, 0.0) to #00FF00 (green, 1.0)
• Opacity: Set to 50% (0.5) for non-intrusive overlay visualization
• Scaling: Grid automatically scales to match video/image dimensions

Files Modified

1. HeatMapValueToColorConverter.cs (New): Value converter for double → color conversion
2. MainWindowViewModel.cs: Added HeatMapMatrix property with composition quality values
3. MainWindow.xaml: Updated rectangles to use data binding with converter

Rebase and Conflict Resolution

Successfully rebased onto master branch (commit 459f596 - Add window opacity settings #60) and resolved conflicts:

• MainWindowViewModel.cs: Kept both _windowOpacity property (from master) and HeatMapMatrix property (from feature). Code reformatted to use C# 12 collection expressions.
• MainWindow.xaml: Kept both OpacityToBooleanConverter (from master) and HeatMapValueToColorConverter (from feature) in Window.Resources.

Heat Map Matrix

The implementation follows the exact matrix pattern specified:

[0.1, 0.5, 0.1, 1.0, 1.0, 1.0, 1.0, 0.5, 0.1]
[0.2, 0.7, 1.0, 1.0, 1.0, 1.0, 1.0, 0.7, 0.2]
[0.2, 0.7, 1.0, 1.0, 1.0, 1.0, 1.0, 0.7, 0.2]
[0.1, 0.6, 1.0, 1.0, 1.0, 1.0, 1.0, 0.6, 0.1]
[0.1, 0.5, 0.8, 0.8, 0.8, 0.8, 0.8, 0.5, 0.1]
[0.1, 0.2, 0.5, 0.5, 0.5, 0.5, 0.5, 0.2, 0.1]
[0.0, 0.1, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.0]
[0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
[0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]

Composition Guidance

The heat map provides visual guidance aligned with cinematography best practices:

• Green (center-top): Optimal composition area (values 0.7-1.0) - ideal for subject placement
• Yellow/Orange (middle): Acceptable composition zone (values 0.5-0.8)
• Red (bottom): Poor composition area (values 0.0-0.2) - typically avoided for subject placement

Screenshot

Technical Details

• MVVM Pattern: Follows proper separation of concerns with data in ViewModel and presentation in XAML
• Modern C# Syntax: Uses C# 12 collection expressions for cleaner array initialization
• Maintainability: Heat map values defined in one location; easy to modify
• Flexibility: Gradient algorithm can be changed in converter without touching XAML
• No Hard-coded Colors: All colors dynamically generated from double values via converter
• Compatibility: Compatible with master's opacity settings feature
• Existing Functionality: Toggle via View → Heat Map Guide menu item works unchanged
• Test Compatibility: All existing tests remain compatible
• WPF Data Binding: Grid automatically matches video dimensions

Testing

• XAML syntax validated
• All 81 grid cells properly defined and bound to matrix values
• Opacity correctly applied to entire overlay
• Converter produces mathematically correct linear gradient
• Compatible with all existing guide overlay functionality (toggle on/off, Rule of Thirds, etc.)
• Successfully rebased with all conflicts resolved

Fixes #57

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Update heat map</issue_title>
<issue_description>Here is a matrix of what the heat map should look like:
1.0 is good, 0.0 is bad. This should be represented as a linear gradient.

Sample heat map (this is much smaller, and should be scaled out to match the source stream size)

[
  [0.1, 0.5, 0.1, 1.0, 1.0, 1.0, 1.0, 0.5, 0.1]
  [0.2, 0.7, 1.0, 1.0, 1.0, 1.0, 1.0, 0.7, 0.2]
  [0.2, 0.7, 1.0, 1.0, 1.0, 1.0, 1.0, 0.7, 0.2]

  [0.1, 0.6, 1.0, 1.0, 1.0, 1.0, 1.0, 0.6, 0.1]
  [0.1, 0.5, 0.8, 0.8, 0.8, 0.8, 0.8, 0.5, 0.1]
  [0.1, 0.2, 0.5, 0.5, 0.5, 0.5, 0.5, 0.2, 0.1]

  [0.0, 0.1, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.0]
  [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
  [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
]

When the heatmap is selected draw the overlay with 50% opacity.
</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #57

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

---

[Keboo]

@copilot Don't hard code the RGB values. I want the heat map setup with the double values in the view model and use a value converter to set the color of the rectangles in the UI

[Copilot]

@copilot Don't hard code the RGB values. I want the heat map setup with the double values in the view model and use a value converter to set the color of the rectangles in the UI

Refactored to use value converter pattern. Created HeatMapValueToColorConverter for color conversion and added HeatMapMatrix property to ViewModel with the double values. All RGB values removed from XAML.

Commit: [hash]

[Keboo]

@copilot rebase on the master branch and resolve conflicts

[Copilot]

@copilot rebase on the master branch and resolve conflicts

Rebase completed successfully. Resolved conflicts in MainWindowViewModel.cs (kept both _windowOpacity and HeatMapMatrix properties) and MainWindow.xaml (kept both converters). Code reformatted to use C# 12 collection expressions.

Branch is ready locally at commit 71d33c0. A force-push is required to update the remote.