Extension:ImageTweaks/UI

We should design and develop the interface for this extension so that its modular. It should be usable both from its special page and as a dialog. That'll make integration with VE (if ever) easier and also give us the option to load a dialog as soon as someone clicks Edit Image from the toolbox.

The specifics of the API are still foggy. We aren't yet sure which service we'll be using and thus what limitations we might have to put in the interface and the user. Even without the technical limitations we don't intend to make a replacement for desktop image editing tools. Editors have some common actions they perform on images, and they'll trust an online tool for only a subset of those actions. Trying to find out what those actions are is essential in making this tool useful.

Scenarios

• Upload: Making edits while uploading a new image, for example through mw.Upload.Dialog.
• Usage: Editing an existing image after selecting it from the Insert Media dialog in Visual Editor. This would effectively also create a derivative work.
• Editing own work: The original uploader of an image wants to edit and update the file.
• Creating derivative work: User creates a derivative work from existing image.

Templates

When saving a derivative work, the following templates (Commons) would be useful to track:

• Derived from
• Retouched: The tool can automatically create a summary of modifications made
• Extracted from: This can be applied only when the crop tool was used

Tools

Looking at the revision history of existing images we can extract at least some information about the required tools. Given that there is an Extracted from template, the crop tool is surely helpful. Edits to photographs usually change brightness, sharpness, contrast and removed chromatic aberration. There are bots to rotate images, but I am unsure of how much its used now that the images with the EXIF rotation error are mostly corrected.

Mock ups

Mock up interface. The dropdown on the right should open up a survey, or a dropdown list of tools we can provide, and then choosing one should send a survey response.

Another mock up. This time the survey is in the toolbar itself, making the feedback loop even smaller. Also making it way more susceptible to spamming.

As this is still an experiment, we could focus on a small set of tools and a clean interface. Integrating a highly visible feedback mechanism in the interface for surveying editors about the tools they want to see will tell us what to work on next (we could use EL for this? but its technically a survery, so…). The bare minimum set of tools could be:

• Crop
• Rotate, only by factors of 90° (this will eliminate the weird background color issue)
• Flip vertical & horizontal (maybe)
• Undo/Redo

In both mock ups the intent to five feedback should open up a form with more details and the tool they picked already selected.

Front end image manipulation libraries

Name	Demo	License	Crop	Rotate	Flip	Undo	Dependencies
CamanJS	http://camanjs.com/examples/	Modified BSD	Plugin	Plugin	Pluging	Not sure	None?
Fabric.js	http://fabricjs.com/demos/	MIT
DarkroomJS	https://mattketmo.github.io/darkroomjs/	MIT	Yes	Yes	No	Yes	Fabric.js
Cropper	http://fengyuanchen.github.io/cropperjs/	MIT	Yes	Yes	Yes	No	There is a version of this library that is dependent on jQuery, and one that claims it isn't. Both seem to have it listed jQuery in their bower.json though. Will need to test to find out for sure.
Croppic	http://www.croppic.net/	MIT	Yes	Yes	No	No	jQuery Mousewheel

Prototype

For the prototype we are using Caman and OO.ui. Fabric had more than we needed and the others already came with a UI without a clear way to add more tools. The current version supports the tools shown in the prototype. You can find the prototype on Github:

• Repository
• Demo
• Documentation

Caveats

• No TIFF support
• The UI of the crop tool is slightly broken on Firefox, it doesn't gray out the cropped part
• The crop tool can be made more robust, locking on aspect ratios, locking on sizes etc.
• Save image just open the image in the browser

Performance

The following numbers aren't averages. When I tried it, the number didn't change too much.

You can check how much time a tool is taking by looking into your developer console.

Macbook Air (1.7GHz Intel i7, 8GB)

Chrome

Image	Image size	File size	Time to rotate(ms)	Time to flip (ms)	Time to crop (ms)
cat.png	160 x 133	53 KB	2	1	1
flower.jpg	2,848 x 4,272	1.2 MB	310	253	63
Konzerthaus Berlin (Nacht) - clone.jpg	4,850 × 3,233	6.88 MB	442	417	110
St Nicholas Church Barfrestone Kent England.jpg	5,472 × 3,648	21.73 MB	576	345	149
Aignan.tif	2,592 × 3,508	26.89 MB	??	??	??
Wetland Succession.png	8,164 × 4,872	12.34 MB	1476	970	170

Firefox

Image	Image size	File size	Time to rotate(ms)	Time to flip (ms)	Time to crop (ms)
cat.png	160 x 133	53 KB	1	1	1
flower.jpg	2,848 x 4,272	1.2 MB	728	437	184
Konzerthaus Berlin (Nacht) - clone.jpg	4,850 × 3,233	6.88 MB	917	588	72
St Nicholas Church Barfrestone Kent England.jpg	5,472 × 3,648	21.73 MB	939	841	242
Aignan.tif	2,592 × 3,508	26.89 MB	??	??	??
Wetland Succession.png	8,164 × 4,872	12.34 MB	2379	1964	221