Difference between revisions of "ColorPalette"

From Lazarus wiki
Jump to navigationJump to search
(Update to current version)
Line 44: Line 44:
 
   
 
   
 
  0,0,0
 
  0,0,0
  # inserts color r,g,b
+
  # inserts color r,g,b colorname
  255,255,255
+
# colorname is optional.
 +
  255,255,255 White
 
   
 
   
 
  $NONE
 
  $NONE
Line 56: Line 57:
 
</pre>
 
</pre>
  
There are several methods to manipulate and query the entries of the used palette:
+
===Methods and properties for color access===
 +
There are several methods and properties to manipulate and query the entries of the used palette:
  
* <tt>AddColor(AColor: TColor)</tt>: adds a new entry to the palette
+
* <tt>AddColor(AColor: TColor; AColorName: String = &apos;&apos;)</tt>: adds a new entry to the palette. An optional color name can be provided.
 
* <tt>DeleteColor(AIndex: Integer)</tt>: removes the entry with the specified index from the palette
 
* <tt>DeleteColor(AIndex: Integer)</tt>: removes the entry with the specified index from the palette
 
* <tt>ClearColors</tt>: removes all colors from the palette.
 
* <tt>ClearColors</tt>: removes all colors from the palette.
Line 65: Line 67:
 
* <tt>ColorCount</tt> returns the number of colors in the palette.
 
* <tt>ColorCount</tt> returns the number of colors in the palette.
 
* <tt>SelectedColor</tt>: returns the currently selected color
 
* <tt>SelectedColor</tt>: returns the currently selected color
* <tt>SelectedIndex</tt>: returns the index of the currently selected color.
+
* <tt>SelectedIndex</tt>: returns the index of the currently selected color (indexes are counted first along the rows).
 +
* <tt>MouseColor</tt>: returns the color of the button underneath the mouse cursor
 +
* <tt>MouseIndex</tt>: returns the index of the color underneath the mouse cursor (indexes are counted first along the rows).
 +
* <tt>Colors[AIndex: Integer]</tt>: allows to read and write a color at the specified palette index
 +
* <tt>ColorNames[AIndex:Integer]</tt>: allows to read and write the name of the color at the specified palette index. If an empty string is written to the ColorNames property then the colorname defined by the graphics unit is used.
 +
 
 +
===Other properties===
 +
====Layout====
 +
* <tt>ButtonHeight</tt>: height of the color buttons (in pixels). Is used along with <tt>ColumnCount</tt> to define the height of the control.
 +
* <tt>ButtonWidth</tt>: width of the color buttons (in pixels). Is used along with <tt>ColumnCount</tt> to define the width of the control.
 +
* <tt>ButtonDistance</tt>: distance, in pixels, between the individual color buttons.
 +
* <tt>ColumnCount</tt>: Defines how many color buttons are drawn horizontally.
 +
====Visual appearance====
 +
* <tt>ButtonBorderColor</tt>: defines the borderline around a color button. Can be removed by selecting <tt>clNone</tt>.
 +
* <tt>Color</tt>: defines the background color of the component. Note that the background is not visible if <ttButtondistance = 0</tt>.
 +
* <tt>ShowColorHint</tt>: If true a hint popup window is displayed for the color button above which the mouse cursor hovers. The built-in hint text can be modified by means of the <tt>OnGetHintText</tt> event.
 +
* <tt>ShowSelection</tt>: If true a thick border is drawn around the button of the selected color.
 +
* <tt>UseSpacers</tt>: If true <tt>clNone</tt> color entries serve as spacers to arrange groups of colors. If false <tt>clNone</tt> is shown as a crossed-out button meaning "transparent color".
  
 
===Demo project===
 
===Demo project===
Line 79: Line 98:
 
** New color selection
 
** New color selection
 
** "AddColor", "DeleteColor" etc.
 
** "AddColor", "DeleteColor" etc.
 +
** Color names
 
** Builtin palettes
 
** Builtin palettes
** Border color and border width
+
** Color button distance, border color
 
** Color hint window
 
** Color hint window
 +
 
* '''Incompatible changes'''
 
* '''Incompatible changes'''
 
** Different behavior of color selection (the old method corresponds to <tt>PickMode=pmDefault</tt>).
 
** Different behavior of color selection (the old method corresponds to <tt>PickMode=pmDefault</tt>).

Revision as of 22:43, 24 August 2015

English (en) français (fr)

About

ColorPalette

ColorPalette is a cross-platform color palette grid with ability to select a color from a palette. The OnSelectColor event is fired when the user clicks onto a color.

Authors

Tom Gregorovic and Werner Pamler

License

Modified LGPL

Usage

Color selection

When a color is selected by clicking with the mouse onto a color box an event OnSelectColor is generated; the event gets the rgb value of the selected color as a parameter. If the property ShowSelection is turned on then the selected color is highlighted.

The mouse button needed to fire this event is defined by the property PickShift which is a set of ssLeft, ssRight, ssMiddle TShiftState elements. The default value is ssLeft, i.e. the color is selected by the left mouse button.

Light bulb  Note: If a context menu is assigned to the component, for example with commands for color editing or deletion, it is recommended to add ssRight to the PickShift; this way the color box which was clicked for opening the context menu will be selected automatically.

The time flow when exactly the color is selected is determined by another property, PickMode:

  • pmImmediate: The color is selected, and the event is generated, when the mousebutton goes down.
  • pmContinuous: The color is selected, and the event is generated, while the mouse moves (with the button according to PickShift pressed down), and when the mousebutton goes up.
  • pmDefault: The color is selected when the mousebutton goes down, and the event is generated when the mousebutton goes up. Both events must occur at the same location. This mode is a left-over from a previous version of the component and should not be used any more.

Palettes

The components supports a series of built-in palettes as determined by the PaletteKind property:

  • pkStandardPalette: the 16 standard color defined by the graphics unit
  • pkExtendedPalette: the same, but extended by the 4 extra colors clMoneyGreen, clSkyBlue, clCream, clMedGray
  • pkSystemPalette: the 25 system colors defined by the graphics unit
  • pkStandardAndSystemPalette: the standard colors plus the system colors
  • pkExtendedAndSystemPalette: the extended colors plus the system colors
  • pkGradientPalette: "all" colors nicely arranged; use GradientSteps to define the horizontal resolution.
  • pkWebSafePalette: a set of web-safe colors as defined by a wikipedia article.
  • pkWebSafePalette2: another set of web-safe colors.

In addition, a custom palette can be loaded from a file by calling the LoadPalette method. The palette files are simple text files according to this example (see also Default.pal in the component folder):

Custom palette example:
    
 $COLS 8
 # sets count of palette grid columns
 
 0,0,0
 # inserts color r,g,b colorname
 # colorname is optional.
 255,255,255 White
 
 $NONE
 # inserts empty palette grid cell
 
 $BLENDWB 128,128,128 3
 # creates color gradient white -> color -> black with specified steps
 # The specified steps are applied to the transitions between "white" and "color"
 # and between "color" and "black", i.e., in total, there are <tt>2*steps+1</tt> color boxes.

Methods and properties for color access

There are several methods and properties to manipulate and query the entries of the used palette:

  • AddColor(AColor: TColor; AColorName: String = ''): adds a new entry to the palette. An optional color name can be provided.
  • DeleteColor(AIndex: Integer): removes the entry with the specified index from the palette
  • ClearColors: removes all colors from the palette.
  • SavePalette(AFileName: String): saves the currently used palette to a palette file which, in turn, can be re-loaded by means of the LoadPalette method already mentioned.
  • Access individual colors by using the Colors[Index] property.
  • ColorCount returns the number of colors in the palette.
  • SelectedColor: returns the currently selected color
  • SelectedIndex: returns the index of the currently selected color (indexes are counted first along the rows).
  • MouseColor: returns the color of the button underneath the mouse cursor
  • MouseIndex: returns the index of the color underneath the mouse cursor (indexes are counted first along the rows).
  • Colors[AIndex: Integer]: allows to read and write a color at the specified palette index
  • ColorNames[AIndex:Integer]: allows to read and write the name of the color at the specified palette index. If an empty string is written to the ColorNames property then the colorname defined by the graphics unit is used.

Other properties

Layout

  • ButtonHeight: height of the color buttons (in pixels). Is used along with ColumnCount to define the height of the control.
  • ButtonWidth: width of the color buttons (in pixels). Is used along with ColumnCount to define the width of the control.
  • ButtonDistance: distance, in pixels, between the individual color buttons.
  • ColumnCount: Defines how many color buttons are drawn horizontally.

Visual appearance

  • ButtonBorderColor: defines the borderline around a color button. Can be removed by selecting clNone.
  • Color: defines the background color of the component. Note that the background is not visible if <ttButtondistance = 0.
  • ShowColorHint: If true a hint popup window is displayed for the color button above which the mouse cursor hovers. The built-in hint text can be modified by means of the OnGetHintText event.
  • ShowSelection: If true a thick border is drawn around the button of the selected color.
  • UseSpacers: If true clNone color entries serve as spacers to arrange groups of colors. If false clNone is shown as a crossed-out button meaning "transparent color".

Demo project

A demo project is contained in the folder demo of the component installation directory. It shows application of all the features of TColorPalette.

Download and installation

  • Download from Lazarus CCR at SourceForge
  • Install the package LazColorPalette in the Lazarus IDE. The ColorPalette icon is added to the Misc component palette page.

Change Log

Version 0.2

  • New features
    • New color selection
    • "AddColor", "DeleteColor" etc.
    • Color names
    • Builtin palettes
    • Color button distance, border color
    • Color hint window
  • Incompatible changes
    • Different behavior of color selection (the old method corresponds to PickMode=pmDefault).

Version 0.1

  • Initial release

Notes

  • Tested on Windows XP.
  • Tested with gtk1 and gtk2 under Linux (Kubuntu 6.06).