Color Formatting

Designing the Form
  1. Start a new application
  2. Resize the form and design it as follows:
     
  3. From the Standard property sheet of the Component Palette, click the Panel and click on the form.
  4. Position the panel at Left = 16 and Top = 24
  5. Change its Color value to clSilver
  6. Change the name of the panel to pnlPreview
  7. On the Component Palette, click ScrollBar and click on the form. In the same way, place two more scroll bars on the from.
  8. Change the names of the scroll bars from left to right to scrRed, scrGreen, and scrBlue respectively.
  9. Change the Min value of each ScrollBar control to 0
  10. Change the Max value of each ScrollBar control to 255
  11. Change the Position value of each ScrollBar control to 192
  12. On the Component Palette, click the GroupBox and click under the panel on the form. Change the caption of the group box to RGB
  13. Inside the group box on the form, add three labels with captions of &Red, &Green, and &Blue respectively.
  14. Again inside the group box on the form, add three Edit controls, each on the right side of the previously added labels.
  15. Change the names of the new edit boxes to edtRGBRed, edtRGBGreen, and edtRGBBlue respectively.
  16. Change the Text value of each Edit control to CO
  17. On the form, click the group box to select it.
  18. Press Ctrl + C to copy the selection.
  19. Press Ctrl + V to paste the selection.
  20. Move the newly pasted group box and its hosted controls under the scroll bars.
  21. Change the caption of the right group box to Numeric.
  22. Change the names of the right edit boxes to edtRed, edtGreen, and edtBlue respectively.
  23. Change the Text value of each of the newly pasted Edit controls to 192
  24. In the lower section of the form, add a new label with a caption of &Color:
  25. Add a new Edit control on the right side of the Color label.
  26. Change its name to edtColor and Change its Text value to #COCOCO
  27. Add a button to the form and change its name to btnClose
  28. To test it, press F9. 

Coding the Application
  1. On the form, double-click the Red scroll bar to access its OnChange() event.
  2. Inplmenet the event as follows (the comments explain what the code is doing):
      
    //---------------------------------------------------------------------------
void __fastcall TForm1::scrRedChange(TObject *Sender)
{
    // While the user is scrolling the Red scroll bar
    // get the integer value or position of the scroll bar
    edtRed->Text = scrRed->Position;

    // Get the Position value of the Red scroll bar.
    // Format it to a HEX value
    // Display the result in the Red Edit control of the RGB section
    edtRGBRed->Text = IntToHex(scrRed->Position, 2);

    // Get the current Position of each scroll bar
    // Combine these values to create an RGB color
    // Preview the resulting color in the Panel
    pnlPreview->Color = TColor(RGB(scrRed->Position,
                                   scrGreen->Position,
                                   scrBlue->Position));

    // Get the current Position of each scroll bar
    // Convert this Position to a HEX value
    // Using these HEX values, create an RGB (Web) color
    // Display the resulting RGB color in the Color edit box,
    // preceded by a # sign
    edtColor->Text = "#" + IntToHex(scrRed->Position, 2)
                         + IntToHex(scrGreen->Position, 2)
                         + IntToHex(scrBlue->Position, 2);
}
//---------------------------------------------------------------------------
  3. To test the program again, press F9. Scroll the Red scroll bar and observe the Preview panel. Also observe the edit boxes.
  4. Return to Bcb
  5. Implement the OnChange() event of the scroll bars:
      
    //---------------------------------------------------------------------------
void __fastcall TForm1::scrGreenChange(TObject *Sender)
{
    edtGreen->Text = scrGreen->Position;

    edtRGBGreen->Text = IntToHex(scrGreen->Position, 2);

    pnlPreview->Color = TColor(RGB(scrRed->Position,
                                   scrGreen->Position,
                                   scrBlue->Position));

    edtColor->Text = "#" + IntToHex(scrRed->Position, 2)
                         + IntToHex(scrGreen->Position, 2)
                         + IntToHex(scrBlue->Position, 2);
}
//---------------------------------------------------------------------------
void __fastcall TForm1::scrBlueChange(TObject *Sender)
{
    edtBlue->Text = scrBlue->Position;

    edtRGBBlue->Text = IntToHex(scrBlue->Position, 2);

    pnlPreview->Color = TColor(RGB(scrRed->Position,
                                   crGreen->Position,
                                   scrBlue->Position));

    edtColor->Text = "#" + IntToHex(scrRed->Position, 2)
                         + IntToHex(scrGreen->Position, 2)
                         + IntToHex(scrBlue->Position, 2);
}
//---------------------------------------------------------------------------
  6. Test the program and return to Bcb.

 

 

 

Configuring the Numeric Edit Controls
  1. We will now give the user the ability to change the value of a color using the Numeric edit boxes. When the user changes a value, we will retrieve the integer that the user typed and apply it to the corresponding scroll bar. After the scroll bar has received the new position, we can invoke the OnChange() event of the scroll bar to behave as if the scroll bar had been physically scrolled. This would apply the behavior that was implemented in the OnChange event of the scroll bar.
    To see an example, on the form, double-click the Red edit box of the Numeric section to access its OnChange() event.
  2. Implement the event as follows:
      
    //---------------------------------------------------------------------------
void __fastcall TForm1::edtRedChange(TObject *Sender)
{
    scrRed->Position = edtRed->Text.ToInt();
    scrRedChange(Sender);
}
//---------------------------------------------------------------------------
  3. In the same way, implement the OnChange() events of the other Numeric edit boxes as follows:
      
    //---------------------------------------------------------------------------
void __fastcall TForm1::edtGreenChange(TObject *Sender)
{
    scrRed->Position = edtRed->Text.ToInt();
    scrRedChange(Sender);
}
//---------------------------------------------------------------------------
void __fastcall TForm1::edtBlueChange(TObject *Sender)
{
    scrRed->Position = edtRed->Text.ToInt();
    scrRedChange(Sender);
}
//---------------------------------------------------------------------------
  4. The big problem we have now is that the user still can type an invalid (numeric) value in one of the Numeric edit boxes.
    When the user types a character, an OnKeyPress() event is sent to the operating system. We can intercept that event, find out what key the user had pressed, then accept or deny it.
    After the key has been validated, we can update the position of the corresponding scroll bar and apply the OnChange() event of the scrollbar.
    On the form, click the Red edit box of the Numeric section. On the Object Inspector, click the Events tab.
  5. Double-click the event field of OnKeyPress.
  6. Repeat the same steps for the Green and Blue edit boxes of the Numeric section.
  7. Implement the events as follows:
      
    //---------------------------------------------------------------------------
void __fastcall TForm1::edtRedKeyPress(TObject *Sender, char &Key)
{
    if( (Key != '0') &&
        (Key != '1') &&
        (Key != '2') &&
        (Key != '3') &&
        (Key != '4') &&
        (Key != '5') &&
        (Key != '6') &&
        (Key != '7') &&
        (Key != '8') &&
        (Key != '9') &&
        (Key != VK_DELETE) &&
        (Key != VK_BACK) )
        Key = '\0';

    scrRed->Position = edtRed->Text.ToInt();
    scrRedChange(Sender);
}
//---------------------------------------------------------------------------
void __fastcall TForm1::edtGreenKeyPress(TObject *Sender, char &Key)
{
    if( (Key != '0') &&
        (Key != '1') &&
        (Key != '2') &&
        (Key != '3') &&
        (Key != '4') &&
        (Key != '5') &&
        (Key != '6') &&
        (Key != '7') &&
        (Key != '8') &&
        (Key != '9') &&
        (Key != VK_DELETE) &&
        (Key != VK_BACK) )
        Key = '\0';

    scrRed->Position = edtRed->Text.ToInt();
    scrRedChange(Sender);
}
//---------------------------------------------------------------------------
void __fastcall TForm1::edtBlueKeyPress(TObject *Sender, char &Key)
{
    if( (Key != '0') &&
        (Key != '1') &&
        (Key != '2') &&
        (Key != '3') &&
        (Key != '4') &&
        (Key != '5') &&
        (Key != '6') &&
        (Key != '7') &&
        (Key != '8') &&
        (Key != '9') &&
        (Key != VK_DELETE) &&
        (Key != VK_BACK) )
        Key = '\0';

    scrRed->Position = edtRed->Text.ToInt();
    scrRedChange(Sender);
}
//---------------------------------------------------------------------------
  8. Finally, we need to control how many characters the user can enter in an edit control. We need to make sure that the edit box can display at least 0 if everything has been deleted; this is because we have previously configured the scroll bars to update the edit boxes. Also, we need to prevent a value greater than 255.
    In the Object Inspector, change the MaxLength value of each of the Numeric edit boxes to 3.
  9. Change the OnChange() event of each of the Numeric edit boxes as follows:
      
    //---------------------------------------------------------------------------
void __fastcall TForm1::edtRedChange(TObject *Sender)
{
    if( edtRed->Text.IsEmpty() )
        edtRed->Text = IntToStr(0);
    else if( edtRed->Text.ToInt() > 255 )
        edtRed->Text = 255;

    scrRed->Position = edtRed->Text.ToInt();
    scrRedChange(Sender);
}
//---------------------------------------------------------------------------
void __fastcall TForm1::edtGreenChange(TObject *Sender)
{
    if( edtGreen->Text.IsEmpty() )
        edtGreen->Text = IntToStr(0);
    else if( edtGreen->Text.ToInt() > 255 )
        edtGreen->Text = 255;

    scrGreen->Position = edtGreen->Text.ToInt();
    scrGreenChange(Sender);
}
//---------------------------------------------------------------------------
void __fastcall TForm1::edtBlueChange(TObject *Sender)
{
    if( edtBlue->Text.IsEmpty() )
        edtBlue->Text = IntToStr(0);
    else if( edtBlue->Text.ToInt() > 255 )
        edtBlue->Text = 255;

    scrBlue->Position = edtBlue->Text.ToInt();
    scrBlueChange(Sender);
}
//---------------------------------------------------------------------------
  10. Test the program and return to Bcb.

Configuring the HEX Edit Controls
The last thing we need to take care of is the ability to change the HEX values of the color. This can be done using the Red, Green, and Blue edit boxes of the RGB section, the same way we did with the Numeric edit boxes.
Copyright © 2003-2007 FunctionX, Inc.