Improve image diff

[goran-w]

• Removed decimals from % values shown for ImageBlendSlider (visual noise, not needed).
• Swapped placement of % value and OLD text to the left of ImageBlendSlider, for symmetry and to remove "jumping" UI.
• Added tick-marks on ImageBlendSlider, at 0%, 50% and 100%, to make it easier to find the 50% mark again.
• Added new image-diff mode DIFFERENCE:
  • Similar to the BLEND image-diff mode, but instead blends towards total image per-pixel DIFFERENCE at 50%.
  • This mode lets us examine the difference-image in the middle, and then slide towards left/OLD or right/NEW to view their respective contributions to the difference-image.
• Last selected image-diff mode is now persistent/remembered (even between session), which makes it much more convenient to compare several images in sequence using the same diff-mode.

[Mingun]

Maybe add screenshots to show the new mode?

[goran-w]

Maybe add screenshots to show the new mode?

First off, here are the modifications I made to the BLEND slider and values...
(The same slider is re-used for the new DIFFERENCE mode.)

Before:

After:

To show the DIFFERENCE mode, I'm borrowing the following images from https://www.textcompare.org/blog/how-to-compare-images/ :

Here's how that looks at 50% (full difference) in the new DIFFERENCE mode:

By moving the slider slightly to the left / right, we start to blend in the corresponding OLD / NEW image, to show the difference-spots in context (while moving it all the way to the left / right would show only the original corresponding image) :

NOTE: This new DIFFERENCE comparison mode uses the BitmapBlendingMode.Difference option on the right/NEW image (and BitmapBlendingMode.Source on the left/OLD image), which was easy to implement as a slight modification of the BLEND comparison mode (the alpha values use different curves, with alpha = 1.0 for both images at 50% on the slider). There are other more sophisticated ways to produce the per-pixel DIFFERENCE image (XOR:ing, highlighting color-distances above a threshold etc) which could be added later (in a "Method" drop-down).

[love-linger]

I really like the new DIFFERENCE mode. The only reason it hasn't been merged yet is whether we need to keep the BLEND mode, or directly delete it and replace it with the latest DIFFERENCE mode?

[love-linger]

Or keep SIDE-BY-SIDE, BLEND, and DIFFERENCE, and remove SWIPE. Because I don't think SWIPE can achieve a good comparison effect.

[goran-w]

Or keep SIDE-BY-SIDE, BLEND, and DIFFERENCE, and remove SWIPE. Because I don't think SWIPE can achieve a good comparison effect.

I think all these modes have their strengths - it all depends on the nature of the two images we're trying to compare, sometimes the differences are very subtle but at other times the two images can be almost completely different. Sometimes we already know where the differences lies, like a color-change of an object, and then Blend and Swipe are both good (also common and popular) ways for comparing before-and-after. If there is text in the image, the Swipe mode can make it easier (than the Blend mode) to check for wording differences.

I'm coming from the Plastic SCM version control system, where their built-in image-diff tool has 4 quite similar modes to the ones we're discussing (though their Differences mode instead uses an "inverted XOR" method) :

• Side-by-side
• Onion skin (= blend)
• Differences
• Swipe

See them in action here:
https://youtu.be/FpVTP3J__Yg?si=h4Fc8dM3GzHOIkYs