Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Improve image diff #1797

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
love-linger merged 5 commits into sourcegit-scm:develop from goran-w:improve_image_diff
Sep 8, 2025
Merged

Conversation

Copy link
Contributor

@goran-w goran-w commented Sep 6, 2025
edited
Loading

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

Similar to the BLEND image-diff mode, but instead blends towards total DIFFERENCE at 50%.
(This way, we can look at the difference in the middle, and slide towards OLD or NEW to view their respective contributions to the diff.)
Copy link
Contributor

Mingun commented Sep 7, 2025

Maybe add screenshots to show the new mode?

goran-w reacted with thumbs up emoji

Copy link
Contributor Author

goran-w commented Sep 7, 2025
edited
Loading

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:
image

After:
image

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

image

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

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) :
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).

Mingun and love-linger reacted with thumbs up emoji

Copy link
Collaborator

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 love-linger self-assigned this Sep 8, 2025
@love-linger love-linger added the enhancement New feature or request label Sep 8, 2025
Copy link
Collaborator

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

Copy link
Contributor Author

goran-w commented Sep 8, 2025
edited
Loading

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

image

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

@love-linger love-linger merged commit 17ea185 into sourcegit-scm:develop Sep 8, 2025
14 checks passed
@goran-w goran-w deleted the improve_image_diff branch September 8, 2025 06:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /