Difference between revisions of "ColorPalette"

From Lazarus wiki
Jump to navigationJump to search
 
(32 intermediate revisions by 9 users not shown)
Line 1: Line 1:
===About===
+
{{ColorPalette}}
ColorPalette is a color palette grid with custom palette support. The OnColorPick event is fired when user picks a color. The LoadPalette procedure loads custom palette.
 
  
 +
==About==
 +
[[Image:ColorPalette.png|right|ColorPalette]]
 +
ColorPalette is a cross-platform color palette grid with ability to select a color from a palette. The OnMouseColorPick event is fired when the user clicks onto a color.
 +
===Authors===
 +
[[User:Tombo|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 <tt>OnColorPick</tt> is generated; the event gets the rgb value of the ''picked color'' as a parameter. Another parameter passes the ''ShiftState'' active during the click; usually this identifies the mouse button pressed. If the property <tt>ShowSelection</tt> is turned on then the picked color is highlighted.
 +
 +
The time flow when exactly the color is selected is determined by the property <tt>PickMode</tt>:
 +
*<tt>pmImmediate</tt>: The color is selected, and the event is generated, when the mouse button goes down.
 +
*<tt>pmContinuous</tt>: The color is selected, and the event is generated, while the mouse moves and when the mouse button goes up.
 +
*<tt>pmDefault</tt>: The color is selected when the mouse button goes down, and the event is generated when the mouse button 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===
 +
==== Built-in palettes ====
 +
The components supports a series of '''built-in palettes''' as determined by the <tt>PaletteKind</tt> property:
 +
 +
* <tt>pkStandardPalette</tt>: the 16 standard color defined by the <tt>graphics</tt> unit
 +
* <tt>pkExtendedPalette</tt>: the same, but extended by the 4 extra colors <tt>clMoneyGreen, clSkyBlue, clCream, clMedGray</tt>
 +
* <tt>pkSystemPalette</tt>: the 25 system colors defined by the <tt>graphics</tt> unit
 +
* <tt>pkStandardAndSystemPalette</tt>: the standard colors plus the system colors
 +
* <tt>pkExtendedAndSystemPalette</tt>: the extended colors plus the system colors
 +
* <tt>pkGradientPalette</tt>: "all" colors nicely arranged; use <tt>GradientSteps</tt> to define the horizontal resolution.
 +
* <tt>pkWebSafePalette</tt>: a set of web-safe colors as defined by a [[wikipedia:Web_colors#Color_table|wikipedia article]].
 +
* <tt>pkWebSafePalette2</tt>: another set of web-safe colors.
 +
 +
==== Custom palettes and palette files====
 +
In addition, a '''custom palette''' can be loaded from a file by calling the <tt>LoadPalette</tt> method. The palette files are simple text files according to this example (see also ''Default.pal'' in the component folder):
 +
 +
<pre>
 
Custom palette example:
 
Custom palette example:
 
      
 
      
Line 8: Line 42:
 
   
 
   
 
  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 16: Line 51:
 
  $BLENDWB 128,128,128 3
 
  $BLENDWB 128,128,128 3
 
  # creates color gradient white -> color -> black with specified steps
 
  # 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.
 +
</pre>
  
 +
A set of '''keywords''' is defined to identify the palette file entries:
 +
* <tt>r,g,b colorname</tt>: Defines the next entry of the color palette by means of its red-green-blue components (0..255). The <tt>colorname</tt> is optional.
 +
* <tt>$NONE</tt>: Is a place-holder for an empty color button. Useful for layout optimization. If the property <tt>UseSpacers</tt> is false then the button can be picked as color <tt>clNone</tt>.
 +
* <tt>$BLENDBW r,g,b n</tt>: creates a series of palette entries corresponding to a gradient from white to the specified color and to black. Each one of the two gradient consists of <tt>n</tt> steps, i.e. in total, <tt>2*n+1</tt> palette entries are created.
 +
* <tt>$COLS value</tt>: defines the number of columns used to display the palette.
 +
* <tt>$BTNDIST value</tt>: specifies the pixel distance between the color palette button tiles (<tt>value</tt> is an <tt>integer</tt>)
 +
* <tt>$BTNWIDTH value</tt>: specifies the pixel width of each color palette button (<tt>value</tt> is an <tt>integer</tt>)
 +
* <tt>$BTNHEIGHT value</tt>: specifies the pixcel height of each color palette button (<tt>value</tt> is an <tt>integer</tt>)
 +
* <tt>$BTNBORDER r,g,b</tt>: specifies the color of the border of a palette button in terms of r, g, b values (<tt>0..255</tt>)
 +
* <tt>$FLIPPED value</tt>: specifies whether the palette is flipped (<tt>value = TRUE</tt>) or not (<tt>value = FALSE</tt>)
 +
* <tt>$SELKIND value</tt>: specifies how the selected palette button is highlighted. <tt>value</tt> can be <tt>NONE</tt>, <tt>THIN</tt>, <tt>THICK</tt>, <tt>THIN-INV</tt>, <tt>THICK-INV</tt>.
 +
* <tt>$SELCOLOR r,g,b</tt>: specifies the color with which the selected button is highlighted if <tt>$SELKIND</tt> is <tt>THIN</tt> or <tt>THICK</tt>. The color is given by its red, green and blue components (<tt>0..255</tt>).
 +
* <tt>#</tt>: defines a comment - all characters in the same line following the <tt>#</tt> are ignored.
  
This component is designed for cross-platform usage.
+
===Methods and properties for color access===
 +
There are several methods and properties to manipulate and query the entries of the used palette:
  
===Sceenshots===
+
* <tt>AddColor(AColor: TColor; AColorName: String = &apos;&apos;)</tt>: adds a new entry to the palette. An optional color name can be provided.
[[Image:ColorPalette.png|ColorPalette]]
+
* <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>LoadPalette(AFileName: String; AItems: TPaletteItems = [])</tt>: load a palette from specified file. The optional parameter <tt>AItems</tt> allows to define which items stored in the palette are loaded: <tt>TPaletteItems = set of [piColors, piColumnCount, piFlipped, piButtonBorder, piButtonSize, piButtonDistance, piSelKind, piSelColor]</tt>. By default, <tt>AItems</tt> is <tt>[piColors, piColumnCount]</tt> which loads all colors and the column count. Use <tt>piAll</tt> as an abbreviation to load all items.
 +
* <tt>SavePalette(AFileName: String)</tt>: saves the currently used palette to a palette file which, in turn, can be re-loaded by means of the <tt>LoadPalette</tt> method.
 +
* Access individual colors by using the <tt>Colors[Index]</tt> property.
 +
* <tt>ColorCount</tt> returns the number of colors in the palette.
 +
* <tt>PickedColor</tt>: returns the currently selected color
 +
* <tt>PickedIndex</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.
  
===Author===
+
===Other properties===
[[User:Tombo|Tom Gregorovic]]
+
====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>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".
 +
==== Hints ====
 +
* <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.
 +
* The <tt>OnGetHintText</tt> event allows to modify the built-in text used for creating the popup hint.
  
===License===
+
===Demo projects===
Modified LGPL
+
Two demo projects are contained in the folder ''demo'' of the component installation directory:
+
* '''GeneralDemo''' shows application of all the features of TColorPalette.
===Download===
+
* '''ToolbarDemo''' adds a ColorPalette to a coolbar/toolar.
Comming soon...
 
  
===Change Log===
+
==Download and installation==
* Version 0.1
+
svn checkout https://svn.code.sf.net/p/lazarus-ccr/svn/components/colorpalette
 +
* Download from [http://sourceforge.net/projects/lazarus-ccr/files/ColorPalette/ Lazarus CCR at SourceForge]
 +
* Install the package <tt>LazColorPalette</tt> in the Lazarus IDE. The ColorPalette icon is added to the ''Misc'' component palette page.
  
===Notes===
+
==Change Log==
Status: Alpha
+
=== Version 0.2===
 +
* '''New features'''
 +
** "AddColor", "DeleteColor" etc.
 +
** Color names
 +
** Builtin palettes
 +
** Highlight selected color
 +
** Color button distance, border color
 +
** Color hint window
 +
** New keywords in palette file
 +
* '''Tested''' on Windows 2000/XP/7/10, and with gtk2 and qt under Linux (Mint 17).
  
Issues:
+
=== Version 0.1 ===
* Tested on Windows XP.
+
* '''Initial release'''
* Tested with gtk1 and gtk2 under Linux (Kubuntu 6.06).
+
* '''Tested''' on Windows XP, and with gtk1 and gtk2 under Linux (Kubuntu 6.06).
  
===Installation===
+
[[Category:Components]]
Install LazColorPalette package in the Lazarus IDE. The ColorPalette is added to the 'Misc' component palette page.
+
[[Category:Lazarus-CCR]]
 +
[[Category:Graphics]]

Latest revision as of 15:09, 21 June 2016

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 OnMouseColorPick 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 OnColorPick is generated; the event gets the rgb value of the picked color as a parameter. Another parameter passes the ShiftState active during the click; usually this identifies the mouse button pressed. If the property ShowSelection is turned on then the picked color is highlighted.

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

  • pmImmediate: The color is selected, and the event is generated, when the mouse button goes down.
  • pmContinuous: The color is selected, and the event is generated, while the mouse moves and when the mouse button goes up.
  • pmDefault: The color is selected when the mouse button goes down, and the event is generated when the mouse button 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

Built-in 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.

Custom palettes and palette files

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.

A set of keywords is defined to identify the palette file entries:

  • r,g,b colorname: Defines the next entry of the color palette by means of its red-green-blue components (0..255). The colorname is optional.
  • $NONE: Is a place-holder for an empty color button. Useful for layout optimization. If the property UseSpacers is false then the button can be picked as color clNone.
  • $BLENDBW r,g,b n: creates a series of palette entries corresponding to a gradient from white to the specified color and to black. Each one of the two gradient consists of n steps, i.e. in total, 2*n+1 palette entries are created.
  • $COLS value: defines the number of columns used to display the palette.
  • $BTNDIST value: specifies the pixel distance between the color palette button tiles (value is an integer)
  • $BTNWIDTH value: specifies the pixel width of each color palette button (value is an integer)
  • $BTNHEIGHT value: specifies the pixcel height of each color palette button (value is an integer)
  • $BTNBORDER r,g,b: specifies the color of the border of a palette button in terms of r, g, b values (0..255)
  • $FLIPPED value: specifies whether the palette is flipped (value = TRUE) or not (value = FALSE)
  • $SELKIND value: specifies how the selected palette button is highlighted. value can be NONE, THIN, THICK, THIN-INV, THICK-INV.
  • $SELCOLOR r,g,b: specifies the color with which the selected button is highlighted if $SELKIND is THIN or THICK. The color is given by its red, green and blue components (0..255).
  • #: defines a comment - all characters in the same line following the # are ignored.

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.
  • LoadPalette(AFileName: String; AItems: TPaletteItems = []): load a palette from specified file. The optional parameter AItems allows to define which items stored in the palette are loaded: TPaletteItems = set of [piColors, piColumnCount, piFlipped, piButtonBorder, piButtonSize, piButtonDistance, piSelKind, piSelColor]. By default, AItems is [piColors, piColumnCount] which loads all colors and the column count. Use piAll as an abbreviation to load all items.
  • 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.
  • Access individual colors by using the Colors[Index] property.
  • ColorCount returns the number of colors in the palette.
  • PickedColor: returns the currently selected color
  • PickedIndex: 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.
  • 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".

Hints

  • 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.
  • The OnGetHintText event allows to modify the built-in text used for creating the popup hint.

Demo projects

Two demo projects are contained in the folder demo of the component installation directory:

  • GeneralDemo shows application of all the features of TColorPalette.
  • ToolbarDemo adds a ColorPalette to a coolbar/toolar.

Download and installation

svn checkout https://svn.code.sf.net/p/lazarus-ccr/svn/components/colorpalette
  • 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
    • "AddColor", "DeleteColor" etc.
    • Color names
    • Builtin palettes
    • Highlight selected color
    • Color button distance, border color
    • Color hint window
    • New keywords in palette file
  • Tested on Windows 2000/XP/7/10, and with gtk2 and qt under Linux (Mint 17).

Version 0.1

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