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.
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)
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
-----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
On 13/08/07, Emanuele D'Arrigo manu3d@gmail.com 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
Moin,
On Monday 13 August 2007 22:57:37 Rob Church wrote:
On 13/08/07, Emanuele D'Arrigo manu3d@gmail.com 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
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 manu3d@gmail.com 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):
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? :)
On 8/13/07, Tels nospam-abuse@bloodgate.com 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.
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):
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
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
------------ Původní zpráva ------------ Od: Jay R. Ashworth jra@baylink.com 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.
On 8/15/07, Michael Daly michaeldaly@kayakwiki.org 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
On 8/15/07, Emanuele D'Arrigo manu3d@gmail.com 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.
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
On 8/13/07, Emanuele D'Arrigo manu3d@gmail.com 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.
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
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
wikitech-l@lists.wikimedia.org