Difference between revisions of "Specifications"

From GIMP GUI Redesign
Jump to: navigation, search
(selection/crop tool specification)
(selection/crop tool specification)
Line 14: Line 14:
 
[[image:2.4_basic_corners.png]]
 
[[image:2.4_basic_corners.png]]
  
what is black in this image shall be rendered inverted on the canvas.
+
what is black in this image shall be rendered inverted on the canvas. note that at any time the marching ants of a selection edge can obscure an inverted line.
  
 
Each corner handle shall enable users to resize the bounding rectangle by dragging one of them, where the diagonally opposite corner of the bounding rectangle shall be the anchor point.
 
Each corner handle shall enable users to resize the bounding rectangle by dragging one of them, where the diagonally opposite corner of the bounding rectangle shall be the anchor point.
  
The rectangle cornered by the corner handles shall be the move area: one big handle where users shall be able to move the bounding rectangle around the canvas by dragging this area:
+
The rectangle cornered by the corner handles shall be the move handle: one big handle where users shall be able to move the bounding rectangle around the canvas by initiating a drag in this handle:
  
 
[[image:2.4_move_area.png‎]]
 
[[image:2.4_move_area.png‎]]
Line 36: Line 36:
 
''the gray area shown here is purely for illustration in this spec and shall not be rendered in GIMP''
 
''the gray area shown here is purely for illustration in this spec and shall not be rendered in GIMP''
  
This makes the size of the side handles predictable where it counts most (their smallest dimension) and uses the largest dimension to leave a gap to reach the corner handles from within.
+
This makes the size of the side handles predictable (and thus 0,5 second faster to use each time) where it counts most (their smallest dimension) and uses the largest dimension to leave a gap to reach the corner handles from within.
  
 
Each side handle shall enable users to resize the bounding rectangle by dragging one of them, moving the side it is attached to, where the middle of the opposite side of the bounding rectangle shall be the anchor point.
 
Each side handle shall enable users to resize the bounding rectangle by dragging one of them, moving the side it is attached to, where the middle of the opposite side of the bounding rectangle shall be the anchor point.
  
What is left now in the bounding rectangle are the dead areas, a drag by users starting in these shall do nothing, neither move, nor resize:
+
What is now left within the bounding rectangle are the dead areas, a drag by users starting in these shall do nothing, neither move, nor resize:
  
 
[[image:2.4_dead_areas.png‎]]
 
[[image:2.4_dead_areas.png‎]]
Line 46: Line 46:
 
''the gray area shown here is purely for illustration in this spec and shall not be rendered in GIMP''
 
''the gray area shown here is purely for illustration in this spec and shall not be rendered in GIMP''
  
In the implementation the size of the dead areas shall be used to compensate for the rounding-off effects in the sizes of the corner and side handles. The dead areas simply  are what is left over in area of the bounding rectangle.
+
In the implementation the size of the dead areas shall be used to compensate for the rounding-off effects in the sizes of the corner and side handles. The dead areas are simply  what is left over in area of the bounding rectangle.
  
 
====highlighting====
 
====highlighting====
  
 +
When the sprite (mouse cursor) hovers over a corner handle, it shall highlight by doubling its perimeter line inwardly, and hiding the other 3 corner handles:
  
 +
[[image:2.4_corner_highlight.png‎]]
  
The highlighting of all handle as implemented is good enough
+
When the sprite hovers over a side handle, it shall highlight along the whole side of the bounding rectangle with a 2-pixel line, to communicate that it moves the whole side. The other dimension of the highlight rectangle shall be that of the corresponding side handle. Also there shall be two single-pixel lines to show the edge of the side handle itself. This is important because this is the only opportunity we have to communicate the size of the handle in a non-obstructive way. The two corner handles on the opposite side shall be hidden:
for rock-n-roll. no change.
+
 
 +
[[image:2.4_side_handles_highlight.png‎]]
 +
 
 +
When the mouse goes down inside a corner handle and dragging commences, it shall be displayed and the other 3 hidden, to achieve a minimal display that gets maximal out of sight:
 +
 
 +
[[image:2.4_corner_drag.png‎]]
 +
 
 +
When the mouse goes down inside aside handle and dragging commences, it shall display a rectangle along the whole side of the bounding rectangle with a 1-pixel line. The other dimension of this rectangle shall be that of the corresponding side handle. The two corner handles on the opposite side shall be hidden:
 +
 
 +
[[image:2.4_side_handles_drag.png‎]]
  
 
When the mouse is over one of the handles, and one of the
 
When the mouse is over one of the handles, and one of the
Line 61: Line 72:
 
in the same direction. This may sound forbidden but it is exactly
 
in the same direction. This may sound forbidden but it is exactly
 
what the user needs.
 
what the user needs.
 
Mouse over rectangle but not over handle? Like above, but move (including the mouse pointer).
 
  
 
====layer/canvas edges====
 
====layer/canvas edges====

Revision as of 18:04, 25 June 2007

Solution models get further developed into UI specifications, ready for implementation.

version 2.4

selection/crop tool specification

This is the specification for the rectangle + oval selection, and the crop tools. It is based on the state of GIMP 2.3.13, and is now updated with the realities of 2.3.18.

handling the bounding rectangle on the canvas

The algorithm for the size of the corner handles as implemented (new handle height = rectangle height / 4, CLAMPed by 5 and 50, handle width = rectangle width / 4, CLAMPed by 5 and 50) allows fast interaction:

2.4 basic corners.png

what is black in this image shall be rendered inverted on the canvas. note that at any time the marching ants of a selection edge can obscure an inverted line.

Each corner handle shall enable users to resize the bounding rectangle by dragging one of them, where the diagonally opposite corner of the bounding rectangle shall be the anchor point.

The rectangle cornered by the corner handles shall be the move handle: one big handle where users shall be able to move the bounding rectangle around the canvas by initiating a drag in this handle:

2.4 move area.png

the gray area shown here is purely for illustration in this spec and shall not be rendered in GIMP

Areas between two adjacent corner handles are called a side handle.

The height of the two horizontal side handles shall be exactly the corner handle height, (new) and their width shall be the (bounding rectangle width - 3 * corner handle width).

The width of the two vertical side handles shall be exactly the corner handle width, (new) and their height shall be the (bounding rectangle height - 3 * corner handle height).

All side handles shall be exactly centred on the side they are attached to. If the side of the of the bounding rectangle is an odd number of pixels long, then the attached side handle shall be an odd number of pixels long. Similarly: if even, then even.

2.4 side handles.png

the gray area shown here is purely for illustration in this spec and shall not be rendered in GIMP

This makes the size of the side handles predictable (and thus 0,5 second faster to use each time) where it counts most (their smallest dimension) and uses the largest dimension to leave a gap to reach the corner handles from within.

Each side handle shall enable users to resize the bounding rectangle by dragging one of them, moving the side it is attached to, where the middle of the opposite side of the bounding rectangle shall be the anchor point.

What is now left within the bounding rectangle are the dead areas, a drag by users starting in these shall do nothing, neither move, nor resize:

2.4 dead areas.png

the gray area shown here is purely for illustration in this spec and shall not be rendered in GIMP

In the implementation the size of the dead areas shall be used to compensate for the rounding-off effects in the sizes of the corner and side handles. The dead areas are simply what is left over in area of the bounding rectangle.

highlighting

When the sprite (mouse cursor) hovers over a corner handle, it shall highlight by doubling its perimeter line inwardly, and hiding the other 3 corner handles:

2.4 corner highlight.png

When the sprite hovers over a side handle, it shall highlight along the whole side of the bounding rectangle with a 2-pixel line, to communicate that it moves the whole side. The other dimension of the highlight rectangle shall be that of the corresponding side handle. Also there shall be two single-pixel lines to show the edge of the side handle itself. This is important because this is the only opportunity we have to communicate the size of the handle in a non-obstructive way. The two corner handles on the opposite side shall be hidden:

2.4 side handles highlight.png

When the mouse goes down inside a corner handle and dragging commences, it shall be displayed and the other 3 hidden, to achieve a minimal display that gets maximal out of sight:

2.4 corner drag.png

When the mouse goes down inside aside handle and dragging commences, it shall display a rectangle along the whole side of the bounding rectangle with a 1-pixel line. The other dimension of this rectangle shall be that of the corresponding side handle. The two corner handles on the opposite side shall be hidden:

2.4 side handles drag.png

When the mouse is over one of the handles, and one of the up/down/right/left cursor keys is pressed, the rectangle shall be resized by one (shift: 15) pixel in that direction. incredibly important: the mouse pointer shall move the same pixels in the same direction. This may sound forbidden but it is exactly what the user needs.

layer/canvas edges

It shall be possible to start a crop/selection rectangle outside the layer/canvas. Unless 'allow growing' for crop is checked (see below) the actual crop/selection rectangle shall be limited by the sides of the layer/canvas, also while the mouse is still down (rubber-banding). This is incredibly important for the 'use ratio' constraint.

For crop there shall be a new checkbox in the options panel: 'allow growing' (default: unchecked). Normally limiting cropping to the exact edges of the layer/canvas has the highest priority, hence the rules above. This checkbox overrides that, and the layer/canvas can be size up by dragging a bigger rectangle around it.

the 'use ratio' constraint and the shift key

Between the 'Expand from centre' and Highlight checkbox there shall be the 'use ratio' control, for the two select tools and crop.

Ratiofield.png

It is a checkbox, combined with a single textfield and the two portrait + landscape icons from the New dialog. The textfield and icons shall be always displayed in the panel.

It is extremely important that the textfield shall be a single textfield with no up/down arrows. This allows for quicker input. The textfield shall accept the formats A/B and A:B, where A and B are two floating point numbers.

The default value for the textfield shall be "1:1" for the selection tools and <current layer/canvas width>:<current layer/canvas height> for the crop tool. When the user enters a value and confirms it by enter/return or removing the input focus from the textfield, this is the override value for this tool. It shall be displayed and used for this tool for the rest of the runtime session, for every file. This enable a pro to work 8 hours a day to cut out hundreds of 16:9 images.

This override value is cleared by clearing any numerical content from the field before confirming. This resets to displaying and using the default value for the tool.

When the checkbox is checked, the ratio shall be enforced while rubber-banding a rectangle. Pressing the shift key while rubber-banding shall toggle the checkbox in the other state.

The two icons shall be just icons, not in pushbuttons like in the New dialog. Clicking one of the icons shall simply enforce portrait or landscape in the textfield by swapping the two number values when necessary.

the tool option panels

From all three tool option panels, remove all the Fix buttons, The line with the Aspect fields, and the three buttons below it.

Selecting more than one of constant ratio/width/height actually sets a constant rectangle size and this makes for wild, chaotic rubber-banding behaviour. We could implement a radioing system for these 3 constraints, but the complexity and UI bandwidth usage is too much. So I chose the simple solution: specific widths and heights shall be typed and confirmed by enter/return or removing the input focus from the textfield. Clearing any numerical content from a field before confirming shall just restore the value displayed before the typing commenced.

All lines that contain textfields shall be sized such that they just fit inside a tool option panel that is 6 tool icons wide (the default, I believe...).

The guides pop-up menu left side shall be aligned with the left sides of the checkboxes, the pop-up menu right side shall be aligned with the left sides of the textfields.

highlight

When the Highlight checkbox is checked, then the darkening effect shall not be displayed during rubber-banding. This allows for precise adjustments.