Intro

Thumbnails in Decapod are a little different from a typical thumbnail of a single image in a image manager for the desktop.

For each capture in Decapod, two images are produced: one from Camera 1, and one from Camera 2 (aka. the "stereo pair"). Each of these images will show the same page spread but from two different perspectives.

After Decapod's processing, these stereo pair are replaced by two images: one of the left page, and one of the right page.

This transformation from stereo pair to a single pair occurs while the user is doing their work. This wireframe captures this interaction as it would appear to the user.

Thumbnail Layout Behaviour

Prototype v8 - Detailed View

Prototype v8 - Thumbnail View

Prototype v9
Instead of two thumbnails side-by-side, the thumbnails
are stacked and can be flipped to reveal the corresponding
image pair.

A detailed look at how the thumbnail is to be laid out:

If there are any unprocessed images and the user saves a PDF, then all images are processed (dewarped and split) as part of the save process.

Thumbnail Interactions

Only 1 selection is allowed at a time (in the future, we could allow for multiple selections).
Only the selected thumbnail has a "Delete" button overlaid the image.
Reordering is possible by drag and drop, or by keyboard interaction.
Thumbnails will be a fixed size. But in the future we could accommodate a thumbnail size adjustment. The smallest thumbnail size will depend on the size of the delete buttons and length of text to displayed in the thumbnail header.
There is a keyboard cut and paste interaction. See Thumbnail Cut and Paste wireframe.

Tooltips:

Dwelling over the thumbnail image and empty space inside the thumbnail border will reveal a tooltip giving Decapod thumbnail metadata: page number(s), queued or processing, and other relevant information that may be useful for non-visual feedback.
Dwelling over the Delete key will reveal: "Delete picture. (Keyboard: Delete key)"
Dwelling over the Zoom key will reveal: "Show larger version of this picture. (Keyboard: Enter key)" (Zoom removed in v9 protoype).

Reordering Thumbnails

Mouse interaction:

drag and drop using any space that is not the overlaid delete button. (For example of keyboard interaction, see Image Reorderer)
Alternatively, the page can be moved by activating the page order inline edit (double-click the page number, or by pressing F2) and typing the new position.

Keyboard interaction:

following Image Reorderer) keyboard interactions using CTRL+I,J,K,M. (to be tested with ORCA)
Alternatively, the page can be moved by activating the page order inline edit (double-click the page number, or by pressing F2) and typing the new position.

Using Inline Edit to reorder a page.

Audio interaction (mouse):

start move: "Moving page x."
dragging: "<current page location>" i.e. "4... 5... "
end move: "Moved page x to y."

Audio interaction (keyboard):

start move: "Moving page x."
while move modifier key is still activated: "<current page location>" i.e. "4... 5... "
end move: "Moved page x to y."

Adding / Inserting Images

*Can be done by performing a capture and then cut/paste, reorder the new image.

See: Thumbnail Cut and Paste

Deleting Thumbnails / Images

Mouse Keyboard interaction:

Press Delete key or by selecting the Delete overlaid button with the mouse.
Note: keyboard focusing the delete overlay button may cause some undesired interactions. To be tested.

Browser not supported