visual diff for svg

classic Classic list List threaded Threaded
19 messages Options
Reply | Threaded
Open this post in threaded view
|

visual diff for svg

Emanuele D'Arrigo
Hi everybody,

I just had a bit of a flashbulb going off a few days ago
and I thought I'd share it with you.

I work in the Visual Effects industry and we constantly
have to compare almost identical versions of the same
image. The way we do this, beside a standard side-by-side
comparison, is to quickly (but manually) switch from one
image to the other, back and forth, so that our eyes can
easily pick up the differences (*).

I thought  this could be useful to extend the wiki way
of doing things to images, especially SVGs. The history
interface would remain the same but the browser would
put the two images on two different layers, one obscuring
the other, and a simple button would allow (ideally through
javascript) to swap the two quickly. Of course a standard
diff would then be available to inspect the differences in the
actual code if the image in question is SVG.

What do you think?

Ciao!

Manu



(*) human eyes are excellent at picking up changing details
in an unchanging scene. Interestingly, they are also very
good at picking up still details in a rapidly changing scene.
This is probably due to the first case representing a prey
or a predator in an otherwise unchanging landscape, and
the latter case representing a static prey or predator in
a view with lots of moving features, i.e. leaves and branches.

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Brion Vibber-3
Emanuele D'Arrigo wrote:
> I thought  this could be useful to extend the wiki way
> of doing things to images, especially SVGs. The history
> interface would remain the same but the browser would
> put the two images on two different layers, one obscuring
> the other, and a simple button would allow (ideally through
> javascript) to swap the two quickly.

That sounds pretty useful, and wouldn't be too hard a project for an
interested person. :)

-- brion vibber (brion @ wikimedia.org)


_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Rob Church
In reply to this post by Emanuele D'Arrigo
On 13/08/07, Emanuele D'Arrigo <[hidden email]> wrote:

> I thought  this could be useful to extend the wiki way
> of doing things to images, especially SVGs. The history
> interface would remain the same but the browser would
> put the two images on two different layers, one obscuring
> the other, and a simple button would allow (ideally through
> javascript) to swap the two quickly. Of course a standard
> diff would then be available to inspect the differences in the
> actual code if the image in question is SVG.
>
> What do you think?

I think it sounds like a good idea, and likely very easily doable.

On a related note; I was recently poking the image reversion
interface, and (as anyone who read the code will see), I originally
planned to show the two revisions side-by-side to allow for
comparison. The reason I didn't do this at the time is that I couldn't
find an effective way to quickly transform an old version of a file
(needed for things like SVG, etc.), and I couldn't get hold of Tim
Starling to pester him, so I left it commented out, more or less.


Rob Church

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Aryeh Gregor
In reply to this post by Emanuele D'Arrigo
On 8/13/07, Emanuele D'Arrigo <[hidden email]> wrote:
> I thought  this could be useful to extend the wiki way
> of doing things to images, especially SVGs. The history
> interface would remain the same but the browser would
> put the two images on two different layers, one obscuring
> the other, and a simple button would allow (ideally through
> javascript) to swap the two quickly. Of course a standard
> diff would then be available to inspect the differences in the
> actual code if the image in question is SVG.

Certainly a good feature.  Another thing to add to the long list of
places where MediaWiki could use better image handling.

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Platonides
In reply to this post by Emanuele D'Arrigo
Emanuele D'Arrigo wrote:
> What do you think?

That's the way i use. Ctrl+Click on both images so they show on two new
tabs. Then Ctrl+Tab & Ctrl+Shift+Tab to find out the differences.
You can also try it at image pages, but you will need to set the same
scrolling on both.


_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Tels
In reply to this post by Rob Church
Moin,

On Monday 13 August 2007 22:57:37 Rob Church wrote:

> On 13/08/07, Emanuele D'Arrigo <[hidden email]> wrote:
> > I thought  this could be useful to extend the wiki way
> > of doing things to images, especially SVGs. The history
> > interface would remain the same but the browser would
> > put the two images on two different layers, one obscuring
> > the other, and a simple button would allow (ideally through
> > javascript) to swap the two quickly. Of course a standard
> > diff would then be available to inspect the differences in the
> > actual code if the image in question is SVG.
> >
> > What do you think?
>
> I think it sounds like a good idea, and likely very easily doable.
I think it would be "easily" possible to overlay the two images on top of
each other, with 50% of the top image (new?) transparent, and then let JS
switch the transpareny around or let it wave from 25% to 50%.

Downsides is you need JS and a browser with working transparency.

All the best,

Tels

--
 Signed on Mon Aug 13 23:14:25 2007 with key 0x93B84C15.
 View my photo gallery: http://bloodgate.com/photos
 PGP key on http://bloodgate.com/tels.asc or per email.

 "I don't want to belong to any club that will accept me as a member."

  -- Groucho Marx

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l

attachment0 (492 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Tels
On Monday 13 August 2007 23:15:57 Tels wrote:

> Moin,
>
> On Monday 13 August 2007 22:57:37 Rob Church wrote:
> > On 13/08/07, Emanuele D'Arrigo <[hidden email]> wrote:
> > > I thought  this could be useful to extend the wiki way
> > > of doing things to images, especially SVGs. The history
> > > interface would remain the same but the browser would
> > > put the two images on two different layers, one obscuring
> > > the other, and a simple button would allow (ideally through
> > > javascript) to swap the two quickly. Of course a standard
> > > diff would then be available to inspect the differences in the
> > > actual code if the image in question is SVG.
> > >
> > > What do you think?
> >
> > I think it sounds like a good idea, and likely very easily doable.
>
> I think it would be "easily" possible to overlay the two images on top of
> each other, with 50% of the top image (new?) transparent, and then let JS
> switch the transpareny around or let it wave from 25% to 50%.
>
> Downsides is you need JS and a browser with working transparency.
>
> All the best,
>
> Tels
Here is a hastiyl thrown together proof-of-concept, done with prototype and
script.acoul.us. It would be trivial to add buttons to control the
transparency (but I am too tired):

        http://bloodgate.com/diff/

Tested on Firefox and Opera under Linux.

Konqueror 3.5.6 fails the transparency effect, renders the SVG wrong and
generally takes ages to decompress the JS library. Oh well. But "flashing"
the second image would still work.

All the best,

Tels

PS: The two SVGs were created from the two attached texts by Graph::Easy,
automatically.
PPS: Can you spot the third difference? :)

--
 Signed on Mon Aug 13 23:40:19 2007 with key 0x93B84C15.
 View my photo gallery: http://bloodgate.com/photos
 PGP key on http://bloodgate.com/tels.asc or per email.

 "Blogebrity: Wow, guess what this one stands for? Too easy. Hey, anyone
 can do it: take a blogger who's a chef, and you get: BLEF. A blogger
 who's a dentist? BENTIST. A female blogger with an itch? You guessed it:
 a BITCH."

  -- maddox from xmission

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l

phase1.txt (128 bytes) Download Attachment
phase2.txt (162 bytes) Download Attachment
attachment2 (492 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Aryeh Gregor
On 8/13/07, Tels <[hidden email]> wrote:

> Here is a hastiyl thrown together proof-of-concept, done with prototype and
> script.acoul.us. It would be trivial to add buttons to control the
> transparency (but I am too tired):
>
>         http://bloodgate.com/diff/
>
> Tested on Firefox and Opera under Linux.
>
> Konqueror 3.5.6 fails the transparency effect, renders the SVG wrong and
> generally takes ages to decompress the JS library. Oh well. But "flashing"
> the second image would still work.

I think it would benefit from flipping between the two instead of the
fancy transparency thing you've got going.  It's not so easy to spot
gradual changes: abrupt would be better.  That would also make it a
lot easier to implement, I strongly suspect, with no mucking about
with transparency.

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Michael Daly-3
In reply to this post by Tels
Tels wrote:

> I think it would be "easily" possible to overlay the two images on top of
> each other, with 50% of the top image (new?) transparent, and then let JS
> switch the transparency around or let it wave from 25% to 50%.


I'd be inclined to think that those with a slowish browser/computer
would not benefit as much.

What about just showing the new image and beside it, the new image as a
background, brightened and fogged or frosted with the foreground showing
the new image minus the old image (this is easy with any pixel-based
image - SVG would have to be transformed).  If the changes are few or
localized, the difference will stand out.

This avoids any requirement for JS.

If the changes are significant, just display the two images side by
side, as the difference might be more confusing than edifying.

Mike




_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Phil Boswell
In reply to this post by Tels

Tels wrote
On Monday 13 August 2007 23:15:57 Tels wrote:
[snip]

Here is a hastiyl thrown together proof-of-concept, done with prototype and
script.acoul.us. It would be trivial to add buttons to control the
transparency (but I am too tired):

        http://bloodgate.com/diff/

Tested on Firefox and Opera under Linux.
Seems to work mostly OK on IE7 also.

Would it work better if the intervals were more regular? or even if the "flash" were to come more frequent. I found myself waiting to see whether I'd seen something, and not always looking in the right place.

HTH HAND
--
Phil
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Emanuele D'Arrigo
In reply to this post by Emanuele D'Arrigo
Thanks to everybody for the positive feedback on this.
A few quick notes out of my experience with related tools.

Transparencies and smooth fades are neat but not
functional for this particular purpose. As Simetrical pointed
out abrupt changes are much easier to spot.
From one version to the next the changes might be very
few and very small. An abrupt change between two revisions
of an image will maximize the likelihood for any change to be
noticed, even if it's a single pixel.

Actual per-pixel subtraction gives interesting-looking
results if the difference is large enough, but they can be
sometimes difficult to relate to the original images and
subtle changes will be difficult to spot due to their low
contrast. Also, given a 0 to 255 range in value for each pixel,
the result of a subtraction operation would be in the range
-255 to +255. This then needs to be compressed back
into a displayable 0 to 255 which effectively loses half
of the information.


From an interaction point of view, it really should be a single
button operation: one click on the button and the lower layer
comes forward, covering the previous layer. One more click
and the layers are swapped again. There's no need for automated
repeats of this: the user decides with a single click when to
swap the visible image and how frequently. Generally this tends
to be one or two clicks per seconds initially, to then slow down
to one click every few seconds, while he/she focus on specific
differences.

Hope it helps.

Ciao!

Manu

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Jay Ashworth-2
In reply to this post by Brion Vibber-3
On Mon, Aug 13, 2007 at 04:56:56PM -0400, Brion Vibber wrote:

> Emanuele D'Arrigo wrote:
> > I thought  this could be useful to extend the wiki way
> > of doing things to images, especially SVGs. The history
> > interface would remain the same but the browser would
> > put the two images on two different layers, one obscuring
> > the other, and a simple button would allow (ideally through
> > javascript) to swap the two quickly.
>
> That sounds pretty useful, and wouldn't be too hard a project for an
> interested person. :)

Is that an even politer version of "I look forward to your patch"?  :-)

Cheers,
-- jra
--
Jay R. Ashworth                   Baylink                      [hidden email]
Designer                     The Things I Think                       RFC 2100
Ashworth & Associates     http://baylink.pitas.com                     '87 e24
St Petersburg FL USA      http://photo.imageinc.us             +1 727 647 1274

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Jay Ashworth-2
In reply to this post by Phil Boswell
On Mon, Aug 13, 2007 at 03:08:37PM -0700, Phil Boswell wrote:
> Would it work better if the intervals were more regular? or even if the
> "flash" were to come more frequent. I found myself waiting to see whether
> I'd seen something, and not always looking in the right place.

I'm inclined to think that a .25 to .5s flip rate, with "OLD" and "NEW"
labels physically disjoint, would work best.

Cheers,
-- jra
--
Jay R. Ashworth                   Baylink                      [hidden email]
Designer                     The Things I Think                       RFC 2100
Ashworth & Associates     http://baylink.pitas.com                     '87 e24
St Petersburg FL USA      http://photo.imageinc.us             +1 727 647 1274

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Jay Ashworth-2
In reply to this post by Emanuele D'Arrigo
On Tue, Aug 14, 2007 at 04:55:56PM +0100, Emanuele D'Arrigo wrote:
> Actual per-pixel subtraction gives interesting-looking
> results if the difference is large enough, but they can be
> sometimes difficult to relate to the original images and
> subtle changes will be difficult to spot due to their low
> contrast. Also, given a 0 to 255 range in value for each pixel,
> the result of a subtraction operation would be in the range
> -255 to +255. This then needs to be compressed back
> into a displayable 0 to 255 which effectively loses half
> of the information.

What about that new thing that guy showed off last week on a slashdot
piece with the modified JPEGs of Al Q'aeda?  Is that pertinent here?

Cheers,
-- jra
--
Jay R. Ashworth                   Baylink                      [hidden email]
Designer                     The Things I Think                       RFC 2100
Ashworth & Associates     http://baylink.pitas.com                     '87 e24
St Petersburg FL USA      http://photo.imageinc.us             +1 727 647 1274

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Brion Vibber-3
In reply to this post by Jay Ashworth-2
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Jay R. Ashworth wrote:
> On Mon, Aug 13, 2007 at 04:56:56PM -0400, Brion Vibber wrote:
>> That sounds pretty useful, and wouldn't be too hard a project for an
>> interested person. :)
>
> Is that an even politer version of "I look forward to your patch"?  :-)

Could be anyone's patch. ;)

- -- brion
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.6 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org

iD8DBQFGwgjFwRnhpk1wk44RArunAJ0UFZjjbuX3oRvyzksskrtO+jlqYwCfT6FX
mBIdUXSxyzRx82gEUN3sbeU=
=8jSb
-----END PGP SIGNATURE-----

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Danny B.-2
In reply to this post by Jay Ashworth-2
> ------------ Původní zpráva ------------
> Od: Jay R. Ashworth <[hidden email]>
> Předmět: Re: [Wikitech-l] visual diff for svg
> Datum: 14.8.2007 20:57:55
> ----------------------------------------
> On Mon, Aug 13, 2007 at 03:08:37PM -0700, Phil Boswell wrote:
> > Would it work better if the intervals were more regular? or even if the
> > "flash" were to come more frequent. I found myself waiting to see whether
> > I'd seen something, and not always looking in the right place.
>
> I'm inclined to think that a .25 to .5s flip rate, with "OLD" and "NEW"
> labels physically disjoint, would work best.

Please, keep in mind, that "people with photosensitive epilepsy can have seizures triggered by flickering or flashing in the 4 to 59 flashes per second (Hertz) range with a peak sensitivity at 20 flashes per second as well as quick changes from dark to light (like strobe lights)."

Quoted from http://www.w3.org/TR/WCAG10/#q34


Danny B.

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Michael Daly-3
Danny B. wrote:

> Please, keep in mind, that

Make it user selectable - a control to set the rate would be nice.

Mike




_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Emanuele D'Arrigo
On 8/15/07, Michael Daly <[hidden email]> wrote:
> Make it user selectable - a control to set the rate would be nice.

Still think it's overautomatizing... =)
It's not a feature that needs automatic refresh!
It just needs an intentional refresh!

Ciao!

Manu

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: visual diff for svg

Aryeh Gregor
On 8/15/07, Emanuele D'Arrigo <[hidden email]> wrote:
> Still think it's overautomatizing... =)
> It's not a feature that needs automatic refresh!
> It just needs an intentional refresh!

I agree with this.  There's no need to be super-fancy.  And if JS is
disabled, of course, the "switch images" button can just be a regular
link.

_______________________________________________
Wikitech-l mailing list
[hidden email]
http://lists.wikimedia.org/mailman/listinfo/wikitech-l