Allow swap cursor to easily spot differences

[markov00]

Is your feature request related to a problem? Please describe.
When having to deal with very small differences between images, is difficult to easily spot them when using the white background.
In my case for example I'm tracking differences in charts where circles are drawn with a slightly different technique or with a slightly different radius. The actual difference is just a few bytes but its interesting can be hardly visible on the current implementation.

Describe the solution you'd like
As provided by the rich diff in GitHub, a swipe function to swipe between the two overlapping images can be very helpful to spot such differences easily and compare the two images.

Describe alternatives you've considered
An alternative is to increase the contrast or at least make configurable the diff color used on the "white background" view. This can increase the contrast with the background and easing the visibility of differences

Additional context
One example of differences that are barely visible

This is anyway already a great and very useful plugin! Thank you

[ehmkah]

Thank you for ypur feedback.

Good idea. The plugin is built very simple. It just uses the image-editor in the middle. This is an intellij-component. I am thinking about your idea.

• Did you try to change from "white background" to "original background"?
• Could you upload those images? Than I can play a little bit with them.
• What do you think of a button - "next different pixel"? (no idea whether is buildable or useable)

[markov00]

Here are two example image, probably it's easier in this case to identify the change but playing with a swipe after going back and forth you can spot it
You can check also other images diffs here and also play with the swipe/onion tools from github: https://github.com/elastic/elastic-charts/pull/996/files?short_path=b58f945#diff-b58f945db63e71b6517126923b90ed61173f3f3fe56fbc2504695c09abbe06fd

I've tried using the original background, but sometimes the background is too confusing due to a lot of other geometries around

What do you think of a button - "next different pixel"? (no idea whether is buildable or useable)

I've seen similar tools having the option to quickly spot the differences making the difference blinking on the screen, using a high contrast color (https://github.com/yahoo/blink-diff, https://medium.com/loftbr/visual-regression-testing-eb74050f3366) or just marking them with a circle around them (I remember one diff tool but can't find it anymore)

The button can be useful but depends if you can group nearby pixels into one unique diff area to avoid having to click a hundred times to find all the pixels

[ehmkah]

First approach I try to create an animiated gif which "blinks" at the difference spots. I am curious how this will look like :-) Some code for showing animated gif can be stolen from https://github.com/howyi/intellij-motivational-gif/blob/master/src/MotivateAction.java

[ehmkah]

Two examples for blinking gifs.

1.) The original image changes with the red marked differences

2.) The original images changes with the changed image.

My first impression is that approach 1 makes it easier to detect the changed spots. What do you think?

[markov00]

Hi @ehmkah first thank you for the efforts on that.
What if instead of making blinking the image, we just blink the red diff keeping the image in the background? it reduces the eye stress when looking at the image (and probably reduce the possibility of an epileptic attack 👀 )

[ehmkah]

Like this. The blinking frequency might be tuned a little bit

[markov00]

Yep definitely, I think this is can be very helpful and less distracting then the other version.
As option or default behaviour instead of blinking the user can just click a button to block one time, as you don't need a pulsating effect but just discover the small diff (if you think of a big diff situation, the blinking can be too aggressive it continuous, instead just blink one time on the user action can be more effective

[ehmkah]

OK - now there is a first draft. If you want you can test it. Its in branch 60 (https://github.com/ehmkah/imgdiff/tree/60) . Just check it out, and run gradle runIde - this starts a new intellij where the plugin is installed without touching your real intellij.

I am playing a little bit and will release it soon as experimentel feature because a lot of things are really uggly

[ehmkah]

i release version 1.9.0 of the plugin. It will be available during the next days - Waiting for your feedback.

@grigala - Thanks for your support implementing this feature :-)

[grigala]

Nice to see it go live! Thanks for the credit. I'm glad if I helped, and I'm excited to work on it further during the next Hackergarten event maybe... 🤙