TColorEdit

Programs sometimes need to store a color value. In Delphi, a hexadecimal representation of the form is used to record color:

$AABBGGRRCode language: PHP (php)

• AA – transparency
• BB – blue component of color
• GG – green component of color
• RR – red component of color

Since My Visual Database does not have a component for displaying and editing colors, we will create it ourselves using the TdbEdit component.

Design

To the standard input field (1), we will add a panel (TdbPanel) to display color (2), which will be located above our base component, visually to the right inside the input field. We also need a button (TdbButton) (2), clicking which will bring up a standard Windows dialog for selecting a color.

Scripts

We will need several scripts, but only one will be called explicitly, which will turn a regular input field into a new component.

Note. The code uses auxiliary functions and procedures, the implementation and description of which can be found in the ClearApp project.

ColorEdit_Create()

const
  CED_BUTTON_NAME = 'Palette'; // buttons name

procedure ColorEdit_Create(AEdit: TdbEdit);
// color editing
// color is stored as text: $00BBGGRR
var
  tmpForm: TAForm; // form
  tmpName: string; // name
  tmpButton: TdbButton; // color selection button
  tmpPanel: TdbPanel; // color swatch panel
begin
  try
    CForm(AEdit, tmpForm);
    tmpName := T_BUTTON + CED_BUTTON_NAME + '_' + AEdit.Name;
    FindC(tmpForm, tmpName ,tmpButton,False);
    // the procedure is called once, but if called again
    // then there will be no errors or duplicates
    if tmpButton = nil then
    begin
      AEdit.OnChange := 'ColorEdit_Edit_OnChange';
      AEdit.OnExit := 'ColorEdit_Edit_OnExit';
      AEdit.TextHint := '$AABBGGRR';
      tmpButton := TdbButton.Create( tmpForm );
      with tmpButton do // create button
      begin
        name := tmpName;
        parent := AEdit.Parent;
        Caption := '';
        imageAlignment := iaCenter;
        Top := AEdit.Top - 1;
        Height := AEdit.Height + 2;
        Width := Height + 2 ;
        Left := AEdit.Left + AEdit.Width - Width;
        onClick := 'ColorEdit_btnSelectColor_OnClick';
        AEdit.Width := AEdit.Width - Width;
      end;
      Images_SetButton(tmpButton);
      tmpPanel := TdbPanel.Create( tmpForm );
      with tmpPanel do // color swatch panel
      begin
        name := T_PANEL + CED_BUTTON_NAME + '_' + AEdit.Name;
        parent := AEdit.Parent;
        Caption := '';
        BevelWidth := 0;
        Color := AEdit.Color;
        Top := AEdit.Top + 1;
        Height := AEdit.Height - 2;
        Width := Height - 2 ;
        Left := AEdit.Left + AEdit.Width - Width - 1;
      end;
    end;
  except
    RaiseException('ColorEdit_Create() ' + ExceptionMessage);
  end;
end;
Code language: PHP (php)

• CForm – defines the form on which the component is located
• FindC – Finds a component by name
• Images_SetButton – places an image on a button

In order for a picture to appear on the button, you need to place two pictures in the \images\buttons folder

• palette.png – regular picture
• palettes.png – the image that will appear when you hover over the button

The operating logic is provided by event handlers that are called when a button is pressed, text is changed, or when the input focus leaves the data entry field.

procedure ColorEdit_Edit_OnChange(Sender: TObject);
// checking and displaying the selected value
var
  tmpForm: TAForm;
  tmpName: string;
  tmpEdit: TdbEdit;
  tmpPanel: TdbPanel; // color marker
begin
  try
    tmpEdit := TdbEdit(Sender);
    tmpForm := TAForm(TComponent(Sender).Owner);
    tmpName := T_PANEL + CED_BUTTON_NAME + '_' + tmpEdit.Name;
    FindC(tmpForm, tmpName, tmpPanel);
    tmpPanel.Color := StrToColor(tmpEdit.Text);
  except
    RaiseException('ColorEdit_Edit_OnChange ' + ExceptionMessage);
  end;
end;

procedure ColorEdit_Edit_OnExit(Sender: TObject);
// checking and displaying the selected value
var
  tmpForm: TAForm;
  tmpName: string;
  tmpEdit: TdbEdit;
  tmpPanel: TdbPanel; 
begin
  try
    tmpEdit := TdbEdit(Sender);
    tmpForm := TAForm(TComponent(Sender).Owner);
    tmpName := T_PANEL + CED_BUTTON_NAME + '_' + tmpEdit.Name;
    FindC(tmpForm, tmpName, tmpPanel);
    tmpPanel.Color := StrToColor(tmpEdit.Text);
    tmpEdit.Text := ColorToStr(tmpPanel.Color);
  except
    RaiseException('ColorEdit_Edit_OnChange ' + ExceptionMessage);
  end;
end;Code language: JavaScript (javascript)

These two handlers differ in one line and serve to ensure that the indicator panel turns into the color that the user entered or selected. If during manual input the user made a mistake (entered an incorrect character or an invalid sequence), then after losing focus the edit field is automatically set to $00000000 (black color).

procedure ColorEdit_btnSelectColor_OnClick( Sender: TObject; var Cancel:boolean );
// open color dialog
var
  tmpName: string;
  tmpForm: TAForm;
  tmpEdit: TdbEdit;
  d: TColorDialog;
begin
  try
    CForm(Sender, tmpForm);
    tmpName := DeletePrefix(TComponent(Sender).Name);
    FindC(tmpForm, tmpName, tmpEdit);
    d := TColorDialog.Create(tmpForm);
    try
      d.Color := StrToColor( tmpEdit.Text );
      if d.Execute then
      begin
        tmpEdit.Text := ColorToStr(d.Color);
      end;
    finally
      d.free;
    end;
  except
    RaiseException('ColorEdit_btnSelectColor_OnClick() ' + ExceptionMessage);
  end;
end;Code language: JavaScript (javascript)

The button click handler calls the color picker dialog and writes the selected value as text to the input field.

To convert color to text and vice versa, the StrToColor() and ColorToStr() functions are used. If you want to use a different format for textual representation of color (such as the one used by web designers), then you will only need to modify these two functions.

function StrToColor( AText: string): TColor;
var
  R: Byte;
  G: Byte;
  B: Byte;
begin
  try
    B := StrToInt( '$'+copy( AText, 4,2 ) );
    G := StrToInt( '$'+copy( AText, 6,2 ) );
    R := StrToInt( '$'+copy( AText, 8,2 ) );
    Result := RGB(R,G,B);
  except
    Result := 0;
  end;
end;

function ColorToStr( AColor:TColor ): string;
begin
  Result := '$00' + IntToHex(AColor, 6);
end;
Code language: PHP (php)

Since we may need color data in a table view, the Grid_ShowColor() function, which visualizes the color, will not be superfluous. It has only two parameters: a table (TdbStringGrid component) and a column in which the color values are located.

procedure Grid_ShowColor(Sender: TObject; ACol: integer);
// display the color in the column
var
  i: integer;
  tmpGrid: TdbStringGridEx;
begin
  tmpGrid := TdbStringGridEx(Sender);
  for i:=0 to tmpGrid.RowCount - 1 do
  begin
    tmpGrid.cell[ACol,i].Color := StrToColor( tmpGrid.cells[ACol,i] );
    tmpGrid.cells[ACol,i] := '';
  end;
end;Code language: JavaScript (javascript)

Usage

Before the form can be displayed, the color editing component must be initialized. You also need to add an OnChange event handler, in which to place a call to the Grid_ShowColor() procedure

ColorEdit_Create(efmSoundLetter.edtColor);
DTF_GetGrid('dtfSoundLetter').dbOnChange := 'dtfSoundLetter_OnChange';

...

procedure dtfSoundLetter_OnChange(Sender: TObject);
begin
  Grid_ShowColor( Sender, 2);
end;
Code language: JavaScript (javascript)