Difference between revisions of "Work in progress"

From GIMP GUI Redesign
Jump to: navigation, search
(→‎Text in GIMP)
(add more widgets)
(32 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
==Path tool==  
+
= Tool Options redesign =
  
−
table 1
+
== Vision ==
  
−
{| border="1" cellpadding="5" cellspacing="0"
+
Tools in GIMP enable hands-on manipulation of the compostion, direct on the canvas.
−
!object/ operation
+
 
−
!end node
+
The tool options enable the fine and precise configurations that make the tool fit the job.
−
!multiple nodes
+
 
−
!in-between node
+
Configuring tool parameters can happen anywhere from almost continuously during a work session - to once in a user's lifetime.
−
!segment
+
 
−
!component (sub-path)
+
Changing tool set-ups will never break user’s workflows.
−
!path
+
 
 +
== Tool Option widgets ==
 +
 
 +
All UI elements are built from a few basic UI building blocks called widgets. A list with images of all current available GTK+ 2 widgets can be found at [http://developer.gnome.org/gtk/2.24/ch02.html] and their respective GTK+ 3 counterparts at [http://developer.gnome.org/gtk3/3.4/ch03.html]. Since GIMP has special needs it also has quite a few widgets of it's own, a number of them (the external accessible ones) can be found at [http://developer.gimp.org/api/2.0/libgimpwidgets/libgimpwidgets-gallery.html].
 +
GIMP also has a number of additional internally used widgets, quite a few just extend basic GTK+ widgets for a specific need, without altering the visual look and feel. However, there are also completely new widgets for specific needs like those used for pressure curves or the gimpspinscale, a mix of a spin and scale button that is now used by a lot of tool options. A third category are ''meta'' widgets that mix together a few basic widgets in a certain fashion for a particular purpose, an example is the gimpscaleentry which consists of a label, scale slider and spinbutton (look at Tools->Color Tools->Brightness-Contrast menu).
 +
 
 +
An exhaustive list of widgets is unneeded as most tool options only use a basic subset of aforementioned widgets, the following table is a list of those common widgets used in tool options and their GIMP counterparts if applicable.
 +
 
 +
{| class="wikitable" style="border: 1px solid darkgray;"
 +
|+ List of widgets used by GIMP tools
 +
|-  
 +
! GTK+
 +
! GIMP
 
|-
 
|-
−
|add
+
| GtkLabel
−
|create single end node or extend new segment 
 
 
|
 
|
−
|divide a segment (create 2 new segments instead of the old segment)
 
−
|
 
−
|
 
−
| √
 
 
|-
 
|-
−
|move
+
| GtkComboBox
−
| √
+
| Gimp{Int,Unit,Sttring,ColorProfile,Enum}ComboBox
−
| √
+
|-
−
| √
+
| GtkButton
−
|  
+
| Gimp{,Chain,Pick,Color}Button
−
| √
 
−
| √ (multiple paths by linking)
 
 
|-
 
|-
−
|delete
+
| GtkSpinButton
−
|delete segment
 
−
|delete segments (component is not broken)
 
−
|delete 2 segments, create new segment (non polygonal)
 
−
|√
 
−
|
 
−
|
 
 
|-
 
|-
−
|adjust
 
 
|
 
|
 +
| GimpSpinScale
 +
|-
 +
| GtkExpander
 
|
 
|
 +
|-
 +
| GtkEntry
 
|
 
|
−
| √ (symmetrical handles possible)
+
|-
−
|
+
| GtkToggleButton
 
|
 
|
 
|-
 
|-
−
|join
+
| GtkScale
−
|close component/path or join components --> create new segment
+
|-
−
|
+
| GtkRadioButton
−
|
+
|-
−
|
+
| GtkCheckButton
−
|
 
−
|
 
 
|-
 
|-
−
|merge
 
 
|
 
|
−
|
+
| GimpFrame
−
|
+
|}
−
|
+
 
−
|
+
=== GtkLabel ===
−
|merge visible paths - no segments added
+
 
 +
{| style="border: 1px solid #BBB;"
 +
| [[Image:tkr_GtkLabel.png]]
 +
|}
 +
 
 +
Widget to display small to medium amount of text.
 +
* can be selectable
 +
* can be ellipsized
 +
 
 +
=== GtkComboBox ===
 +
 
 +
{| style="border: 1px solid #BBB;"
 +
| [[Image:tkr_GtkComboBox.png]]
 +
|}
 +
 
 +
Widget used to choose from a list of items
 +
* can have textentry
 +
* relevant GIMP specific subclasses
 +
** GimpUnitComboBox<br>a convience combobox for measurement units
 +
 
 +
=== GtkButton ===
 +
 
 +
{| style="border: 1px solid #BBB;"
 +
| [[Image:tkr_GtkButton.png]]
 
|}
 
|}
  
 +
Widget that creates a signal when clicked on.
 +
* can have image and/or text
 +
* relevant GIMP specific subclasses
 +
** GimpButton<br>adds click modifier keys
 +
** GimpChainButton<br>button for (un)chain action used in conjunction with other widgets
 +
 +
=== GtkToggleButton ===
  
−
table 2
+
{| style="border: 1px solid #BBB;"
−
{| border="1" cellpadding="5" cellspacing="0"
+
| [[Image:tkr_GtkToggleButton.png]]
−
!object/ operation
 
−
!end node
 
−
!multiple nodes
 
−
!in-between node
 
−
!segment
 
−
!component (sub-path)
 
−
!path
 
−
|-
 
−
|stroke
 
−
|
 
−
|
 
−
|
 
−
|
 
−
|
 
−
|√
 
−
|-
 
−
|create from Selection
 
−
|
 
−
|
 
−
|
 
−
|
 
−
|
 
−
|√
 
−
|-
 
−
|convert into Selection
 
−
|
 
−
|
 
−
|
 
−
|
 
−
|
 
−
|replace, Add to, Subtract, or Intersect with current Selection -->close path
 
 
|}
 
|}
  
 +
Similar to GtkButton, but retains state.
  
−
===Shortcuts ===
+
=== GtkSpinButton ===
−
*add end node + adjust segment (polygonal/non-polygonal control)
 
−
*add in-between node + adjust 2 segments
 
  
−
==Text in GIMP==
+
{| style="border: 1px solid #BBB;"
−
high-end text solutions in other programs:
+
| [[Image:tkr_GtkSpinButton.png]]
−
[[Text in InDesign]]
+
|}
−
[[Text in Scribus]]
 
−
[[Text in Photoshop]]
 
  
 +
Widget to retrieve number from user.
  
−
[[Updated Text Functionality in Gimp 2.7.4]]
+
=== GtkEntry ===
  
−
==present UI solutions==
+
{| style="border: 1px solid #BBB;"
 +
| [[Image:tkr_GtkEntry.png]]
 +
|}
  
−
====end node====
+
Widget for single line keyboard entry.
−
* '''add end node (extend a component)'''- activate end node of the component +click
+
* relevant GIMP specific subclass
−
It has to be more clear for the user to know if the new end node will expand the component, or start a new component?
+
** GimpNumberPair<br>entry widget for ratios
−
* '''add end node (start new component)''' – Shift +click
 
−
Could it be done in a different way? For ex. deselecting active end node + click
 
  
−
*There should be just one handle visible when adjusting the end node.
+
=== GtkScale ===
  
−
* '''move node''' – select point and drag (triggers visible handles)
+
{| style="border: 1px solid #BBB;"
−
Handles should not bother user when moving, but should stay visible when finished, for adjusting a segment.
+
| [[Image:tkr_GtkScale.png]]
−
*Handles are difficult to access when the end of the handle is next to the node (so when the segments are almost polygonal). Length of the handles for polygonal shapes can be minimum, not zero. Size of the handles should be discussed, too.
+
|}
  
−
* '''delete node''' - Shift+ CTRL + click
+
Slider widget to select value from a range.
−
*''' join end nodes''' – select 1st end node, Ctrl + 2nd end node
 
−
Could it be done without Ctrl key? You could say GIMP what the segment should it be (polygonal or non polygonal)
 
  
 +
=== GtkRadioButton ===
  
−
====multiple nodes====
+
{| style="border: 1px solid #BBB;"
−
*'''move multiple nodes''' 
+
| [[Image:tkr_GtkRadioButton.png]]
−
Is there a need to make it possible to move multiple nodes?
+
|}
−
*'''delete multiple nodes''' – Shift select + Delete
 
−
This could be done by rectangular selection (drag from right -deletes nodes in selection area; drag from left– deletes all nodes of the path, that is fully in the selection area) + maybe hotkeys to chose – break component or not.
 
  
−
====in-between node====
+
Widget to select one from a multiplechoice options list.
−
*'''add in-between node–''' Ctrl + click on segment
 
−
Could it be possible to just click, and keep click+drag for adjusting the segment?
 
  
−
====segment====
+
=== GtkCheckButton ===
−
*'''delete segment''' – Ctrl+ Shift click
 
−
*'''adjust segment''' – drag segment or adjust handles (activating node triggers visible handles)
 
  
−
====component====
+
{| style="border: 1px solid #BBB;"
−
*'''move component''' – Shift select multiple nodes + Alt
+
| [[Image:tkr_GtkCheckButton.png]]
 +
|}
  
−
====path====
+
Discrete toggle button.
−
*'''add path'''- by path dialog
 
−
*'''move path'''-  Ctrl+Alt move canvas (not the component)
 
−
*'''merge paths'''- by path dialog- merge visible paths
 
−
*convert to selection, create from selection, duplicate– by path dialog
 
−
*'''stroke''' – by path dialog + stroke path dialog window
 
  
−
====general issues====
+
=== GimpSpinScale ===
−
*handles - going out from the canvas-  are not accessible
 
−
Maybe we could change the scaling, etc.
 
  
−
====other enhancements====
+
{| style="border: 1px solid #BBB;"
−
*no possibility to set a 2nd node in a position to make the segment horizontal or vertical
+
| [[Image:tkr_GimpSpinScale.png]]
−
*selecting multiple nodes/components for deleting, moving etc.
+
|}
−
*it’s important to deliver easy zoom in/out
 
  
 +
A mixture of scale and spin button in one.
  
−
==sketches ==
+
=== GimpFrame ===
  
−
[[Image:path01.jpg]],
+
GNOME HIG compliant frame [http://developer.gnome.org/hig-book/3.4/design-window.html.en#window-layout-spacing].
 +
=previously…=
 +
* [[work in progress on text]]
 +
* [[work in progress on paths]]

Revision as of 17:09, 17 May 2012

Tool Options redesign

Vision

Tools in GIMP enable hands-on manipulation of the compostion, direct on the canvas.

The tool options enable the fine and precise configurations that make the tool fit the job.

Configuring tool parameters can happen anywhere from almost continuously during a work session - to once in a user's lifetime.

Changing tool set-ups will never break user’s workflows.

Tool Option widgets

All UI elements are built from a few basic UI building blocks called widgets. A list with images of all current available GTK+ 2 widgets can be found at [1] and their respective GTK+ 3 counterparts at [2]. Since GIMP has special needs it also has quite a few widgets of it's own, a number of them (the external accessible ones) can be found at [3]. GIMP also has a number of additional internally used widgets, quite a few just extend basic GTK+ widgets for a specific need, without altering the visual look and feel. However, there are also completely new widgets for specific needs like those used for pressure curves or the gimpspinscale, a mix of a spin and scale button that is now used by a lot of tool options. A third category are meta widgets that mix together a few basic widgets in a certain fashion for a particular purpose, an example is the gimpscaleentry which consists of a label, scale slider and spinbutton (look at Tools->Color Tools->Brightness-Contrast menu).

An exhaustive list of widgets is unneeded as most tool options only use a basic subset of aforementioned widgets, the following table is a list of those common widgets used in tool options and their GIMP counterparts if applicable.

List of widgets used by GIMP tools
GTK+ GIMP
GtkLabel
GtkComboBox Gimp{Int,Unit,Sttring,ColorProfile,Enum}ComboBox
GtkButton Gimp{,Chain,Pick,Color}Button
GtkSpinButton
GimpSpinScale
GtkExpander
GtkEntry
GtkToggleButton
GtkScale
GtkRadioButton
GtkCheckButton
GimpFrame

GtkLabel

Tkr GtkLabel.png

Widget to display small to medium amount of text.

  • can be selectable
  • can be ellipsized

GtkComboBox

Tkr GtkComboBox.png

Widget used to choose from a list of items

  • can have textentry
  • relevant GIMP specific subclasses
    • GimpUnitComboBox
      a convience combobox for measurement units

GtkButton

Tkr GtkButton.png

Widget that creates a signal when clicked on.

  • can have image and/or text
  • relevant GIMP specific subclasses
    • GimpButton
      adds click modifier keys
    • GimpChainButton
      button for (un)chain action used in conjunction with other widgets

GtkToggleButton

File:Tkr GtkToggleButton.png

Similar to GtkButton, but retains state.

GtkSpinButton

Tkr GtkSpinButton.png

Widget to retrieve number from user.

GtkEntry

Tkr GtkEntry.png

Widget for single line keyboard entry.

  • relevant GIMP specific subclass
    • GimpNumberPair
      entry widget for ratios

GtkScale

Tkr GtkScale.png

Slider widget to select value from a range.

GtkRadioButton

Tkr GtkRadioButton.png

Widget to select one from a multiplechoice options list.

GtkCheckButton

Tkr GtkCheckButton.png

Discrete toggle button.

GimpSpinScale

Tkr GimpSpinScale.png

A mixture of scale and spin button in one.

GimpFrame

GNOME HIG compliant frame [4].

previously…

Retrieved from "https://gui.gimp.org/index.php?title=Work_in_progress&oldid=544"