Recent

Author Topic: Changing Button Color.  (Read 11891 times)

OC DelGuy

  • Full Member
  • ***
  • Posts: 208
  • 123
Changing Button Color.
« on: December 29, 2024, 07:44:22 am »
I've been using TButtons on my applications since I started.  But never have I tried to change the color of a TButton.  So, in a flight of whimsy, I changed the property of the TButton in the Object Inspector to clLime (and I know alot of y'all already know where I'm going with this).  No Lime colored TButton.  So I thought, maybe it's a runtime thing.  Ran the program, no clLime TButton.

What Gives?
Free Pascal Lazarus Version #: 2.2.4
Date: 24 SEP 2022
FPC Version: 3.2.2
Revision: Lazarus_2_2_4
x86_64-win64-win32/win64

LV

  • Sr. Member
  • ****
  • Posts: 303

Joanna

  • Hero Member
  • *****
  • Posts: 1374
Re: Changing Button Color.
« Reply #2 on: December 29, 2024, 11:14:33 am »
I've been using TButtons on my applications since I started.  But never have I tried to change the color of a TButton.  So, in a flight of whimsy, I changed the property of the TButton in the Object Inspector to clLime (and I know alot of y'all already know where I'm going with this).  No Lime colored TButton.  So I thought, maybe it's a runtime thing.  Ran the program, no clLime TButton.

What Gives?
Use tcdbutton in tcdcontrols

lainz

  • Hero Member
  • *****
  • Posts: 4725
  • Web, Desktop & Android developer
    • https://lainz.github.io/
Re: Changing Button Color.
« Reply #3 on: December 29, 2024, 06:13:29 pm »
I've been using TButtons on my applications since I started.  But never have I tried to change the color of a TButton.  So, in a flight of whimsy, I changed the property of the TButton in the Object Inspector to clLime (and I know alot of y'all already know where I'm going with this).  No Lime colored TButton.  So I thought, maybe it's a runtime thing.  Ran the program, no clLime TButton.

What Gives?
Use tcdbutton in tcdcontrols

Provide a drawer with clLime...

How you can change the color of a tcdbutton without a drawer?

Aruna

  • Hero Member
  • *****
  • Posts: 665
Re: Changing Button Color.
« Reply #4 on: December 30, 2024, 06:32:39 am »
What Gives?
What Gives? Please have a careful look at the first screenshot of the Object Inspector. It has a restricted tab. Then take a careful look at the second screenshot, you can get to this by clicking
View-->Restriction Browser.

This will help you understand why things are the way they are:

I am putting together a custom control that will allow you to change the colour of a Tbutton. Will send your way once completed. Hope this helps!
« Last Edit: December 30, 2024, 02:26:47 pm by Aruna »

jamie

  • Hero Member
  • *****
  • Posts: 6989
Re: Changing Button Color.
« Reply #5 on: December 30, 2024, 11:44:38 pm »
If you need key action, you can use a TPanel as a button.

if you don't need key focus, then use a TSpeedButton.

The only true wisdom is knowing you know nothing

OC DelGuy

  • Full Member
  • ***
  • Posts: 208
  • 123
Re: Changing Button Color.
« Reply #6 on: January 03, 2025, 05:58:30 am »
https://forum.lazarus.freepascal.org/index.php/topic,69416.msg538959.html
Thanks LV.  I looked at the topic in your link.  Take aways:
  • Platform Specific - Well, I am on windows.  Dang.
  • BGRA - I had that on my old computer.  I only used TBGRAKnob and TDTAnalogGauge on an application i did back then.  I just loaded BGRA on this computer. I'll get right on it.

Use tcdbutton in tcdcontrols
Hi Joanna, is that the same one in the BGRA Package?

I am putting together a custom control that will allow you to change the colour of a Tbutton. Will send your way once completed. Hope this helps!
Sounds interesting, Aruna.  Looking forward to it.
I'll also read the links you supplied.

If you need key action, you can use a TPanel as a button.
if you don't need key focus, then use a TSpeedButton.
Jamie, I have no clue what Key Action nor Key Focus are or what they mean.
How do I use TPanel as a button?
Free Pascal Lazarus Version #: 2.2.4
Date: 24 SEP 2022
FPC Version: 3.2.2
Revision: Lazarus_2_2_4
x86_64-win64-win32/win64

Joanna

  • Hero Member
  • *****
  • Posts: 1374
Re: Changing Button Color.
« Reply #7 on: January 03, 2025, 12:47:17 pm »
Quote
Quote from: Joanna from IRC on December 29, 2024, 11:14:33 amUse tcdbutton in tcdcontrols
Hi Joanna, is that the same one in the BGRA Package?
Sorry for slow response. Unfortunately I don’t have programming computer with me at moment and I installed these controls a long time ago.From what I can Recall the package for tcdcontrols is provided with Lazarus ide but you need to go into the package menu and add the package to your project then rebuild the Lazarus ide. They should appear on their own tab along with your other rad controls “tcustomdrawncontrols” these are not part of bgra package. {I’ve never tried those buttons so cannot comment.}

Yes it is also possible to create a colored button yourself using tpanel..like this
Type Mybutton = class(tpanel)
If you want the practice you can simulate button press by changing the property of border style. I believe that this is done for you by tcdbutton however It never hurts to practice  O:-)
« Last Edit: January 03, 2025, 12:51:14 pm by Joanna from IRC »

lainz

  • Hero Member
  • *****
  • Posts: 4725
  • Web, Desktop & Android developer
    • https://lainz.github.io/
Re: Changing Button Color.
« Reply #8 on: January 03, 2025, 02:44:27 pm »
Tcdbutton default drawer can change color but is so old school theme like windows 95.
If you want something more modern, create your own theme for custom drawn or use bgracontrols.

Joanna

  • Hero Member
  • *****
  • Posts: 1374
Re: Changing Button Color.
« Reply #9 on: January 03, 2025, 11:38:57 pm »
I never noticed that it was not perfect. As long as it has color I’m happy.
My main problem with tcdcontrols is no multi line on the tpagecontrol...

Aruna

  • Hero Member
  • *****
  • Posts: 665
Re: Changing Button Color.
« Reply #10 on: January 05, 2025, 05:07:07 pm »
I am putting together a custom control that will allow you to change the colour of a Tbutton. Will send your way once completed. Hope this helps!
Sounds interesting, Aruna.  Looking forward to it.
I'll also read the links you supplied.
Hi OC DelGuy ,

1. Please fire up your lazarus IDE
2. Copy and paste the code below into your Unit1.
3. In the object inspector select the Form1
4. Look for the OnCreate event in the events tab for the Form1
5. Click the drop down and select FormCreate.
6. Click run or press F9.

The attached screenshot shows you what to expect :)
I am working on a heavily commented source that explains each line I will post when ready. IF you have any questions please ask..

PS EDIT: Sorry I forgot to attach the zip. It is there now.

Code: Pascal  [Select][+][-]
  1. unit Unit1;
  2.  
  3. interface
  4.  
  5. uses
  6.   Classes, Controls, Graphics, Forms, SysUtils, Dialogs, StdCtrls;
  7.  
  8. type
  9.  
  10.   { TCustomButton }
  11.  
  12.   TCustomButton = class(TCustomControl)
  13.   private
  14.     FMouseOver: Boolean;
  15.     FPressed: Boolean;
  16.     FCaption: string;
  17.     FTextColor: TColor;                    // New property for text color
  18.     procedure SetMouseOver(Value: Boolean);
  19.     procedure SetPressed(Value: Boolean);
  20.     procedure SetTextColor(Value: TColor); // Setter for the text color
  21.   protected
  22.     procedure Paint; override;
  23.     procedure MouseEnter; override;
  24.     procedure MouseLeave; override;
  25.     procedure MouseDown(Button: TMouseButton; Shift: TShiftState; X, Y: Integer); override;
  26.     procedure MouseUp(Button: TMouseButton; Shift: TShiftState; X, Y: Integer); override;
  27.   public
  28.     constructor Create(AOwner: TComponent); override;
  29.     property Caption: string read FCaption write FCaption;
  30.     property TextColor: TColor read FTextColor write SetTextColor; // Exposing TextColor property
  31.  
  32.   end;
  33.  
  34.   { TForm1 }
  35.  
  36.   TForm1 = class(TForm)
  37.     procedure FormCreate(Sender: TObject);
  38.   private
  39.     FButton: TCustomButton;
  40.   public
  41.   end;
  42.  
  43. var
  44.   Form1: TForm1;
  45.  
  46. implementation
  47.  
  48. {$R *.lfm}
  49.  
  50. { TCustomButton }
  51.  
  52. constructor TCustomButton.Create(AOwner: TComponent);
  53. begin
  54.   inherited Create(AOwner);
  55.   FMouseOver := False;
  56.   FPressed := False;
  57.   FTextColor := clBlack;     // Default text color is black
  58.   ControlStyle := ControlStyle + [csCaptureMouse];
  59.   Visible := True;
  60.   Parent := TForm(AOwner);   // Ensure the button is added to the form's control list
  61.   Width := 120;              // Initial width
  62.   Height := 40;              // Initial height
  63.   FCaption := 'Click Me!';   // Default caption
  64. end;
  65.  
  66. procedure TCustomButton.SetMouseOver(Value: Boolean);
  67. begin
  68.   if FMouseOver <> Value then
  69.   begin
  70.     FMouseOver := Value;
  71.     Invalidate;  // Redraw the button on hover state change
  72.   end;
  73. end;
  74.  
  75. procedure TCustomButton.SetPressed(Value: Boolean);
  76. begin
  77.   if FPressed <> Value then
  78.   begin
  79.     FPressed := Value;
  80.     Invalidate;  // Redraw the button on press state change
  81.   end;
  82. end;
  83.  
  84. procedure TCustomButton.SetTextColor(Value: TColor);
  85. begin
  86.   if FTextColor <> Value then
  87.   begin
  88.     FTextColor := Value;
  89.     Invalidate;  // Redraw the button on text color change
  90.   end;
  91. end;
  92.  
  93. procedure TCustomButton.Paint;
  94. var
  95.   R: TRect;
  96.   BtnColorStart, BtnColorEnd: TColor;
  97.   BorderColor: TColor;
  98.   BorderThickness: Integer;
  99. begin
  100.   Width:= canvas.TextWidth(Fcaption)+30;
  101.   R := ClientRect;
  102.   BorderThickness := 1; // Border thickness
  103.  
  104.   // Determine button color based on state
  105.   if FPressed then
  106.   begin
  107.     form1.FButton.TextColor:=clGreen ; // Green;
  108.     BorderThickness := 3;              // Border thickness
  109.     BtnColorStart := clGreen;          // Green
  110.     BtnColorEnd := clLime;             // Lime Green
  111.     BorderColor := clBlack;            // Black Border Color for pressed state
  112.  
  113.     // You can trap mouse clicks here.. or not!
  114.        writeln('mouse click detected');
  115.   end
  116.   else if FMouseOver then
  117.   begin
  118.     form1.FButton.TextColor:=clBlack ;// Black;
  119.     BtnColorStart := clGreen;         // Green
  120.     BtnColorEnd := clLime;            // Lime Green
  121.     BorderColor := clBlack;           // Border Color for hover state
  122.   end
  123.   else
  124.   begin
  125.     form1.FButton.TextColor:=clBlack ;// Black;
  126.     BtnColorStart := clLime;          // Lime Green
  127.     BtnColorEnd := clGreen;           // Green
  128.     BorderColor := clBlack;           // Black Border Color for normal state
  129.   end;
  130.  
  131.   // Manually adjust the rectangle to fit inside the border
  132.   Canvas.GradientFill(R, BtnColorStart, BtnColorEnd, gdVertical);  // Gradient fill
  133.  
  134.   // Draw the border (border should be on top of the gradient)
  135.   Canvas.Pen.Color := BorderColor;
  136.   Canvas.Pen.Width := BorderThickness;  // Border thickness
  137.   Canvas.Pen.Color := clLime;
  138.  
  139.   // Uses WIDTH property to auto adjust caption size
  140.   //draws a rectangle with the top-left corner at (0, 0) and the bottom-right corner at (Width, Height).
  141.   Canvas.Rectangle(R.Left+1, R.Top+1, Width-1, R.Bottom-1);
  142.  
  143.   Canvas.Brush.Style := bsClear; // No fill for the caption COMMENT THIS AND TEST :)
  144.  
  145.   // Draw the button text with customizable color
  146.   Canvas.Font.Color := FTextColor;  // Use the TextColor property
  147.   Canvas.TextOut((Width - Canvas.TextWidth(FCaption)) div 2,
  148.                  (Height - Canvas.TextHeight(FCaption)) div 2,
  149.                  FCaption);
  150. end;
  151.  
  152. procedure TCustomButton.MouseEnter;
  153. begin
  154.   SetMouseOver(True);  // Trigger hover effect
  155. end;
  156.  
  157. procedure TCustomButton.MouseLeave;
  158. begin
  159.   SetMouseOver(False);  // Remove hover effect
  160. end;
  161.  
  162. procedure TCustomButton.MouseDown(Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
  163. begin
  164.   inherited MouseDown(Button, Shift, X, Y);
  165.   SetPressed(True);  // Trigger pressed effect when mouse button is down
  166. end;
  167.  
  168. procedure TCustomButton.MouseUp(Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
  169. begin
  170.   inherited MouseUp(Button, Shift, X, Y);
  171.   SetPressed(False);  // Remove pressed effect when mouse button is up
  172. end;
  173.  
  174. { TForm1 }
  175.  
  176. procedure TForm1.FormCreate(Sender: TObject);
  177. begin
  178.   FButton := TCustomButton.Create(Self);
  179.   FButton.Parent := Self;
  180.   FButton.Left := 20;
  181.   FButton.Top := 20;
  182.   FButton.Caption := ' Custom Button Demo! ';  // Set initial caption
  183. end;
  184.  
  185. end.
« Last Edit: January 05, 2025, 05:22:01 pm by Aruna »

jamie

  • Hero Member
  • *****
  • Posts: 6989
Re: Changing Button Color.
« Reply #11 on: January 05, 2025, 08:43:58 pm »
Sure but then you have this.

Code: Pascal  [Select][+][-]
  1. unit Unit1;
  2.  
  3. {$mode objfpc}{$H+}
  4.  
  5. interface
  6.  
  7. uses
  8.   Classes, SysUtils, Forms, Controls, Graphics, Dialogs, Buttons, ExtCtrls,
  9.   StdCtrls;
  10.  
  11. type
  12.  
  13.   { TForm1 }
  14.  
  15.   TForm1 = class(TForm)
  16.     Button1: TButton;
  17.     Panel1: TPanel;
  18.     procedure FormCreate(Sender: TObject);
  19.     procedure FormKeyPress(Sender: TObject; var Key: char);
  20.     procedure Panel1Click(Sender: TObject);
  21.     procedure Panel1Enter(Sender: TObject);
  22.     procedure Panel1Exit(Sender: TObject);
  23.   private
  24.  
  25.   public
  26.  
  27.   end;
  28.  
  29. var
  30.   Form1: TForm1;
  31.  
  32. implementation
  33.  
  34. {$R *.lfm}
  35.  
  36. { TForm1 }
  37.  
  38. procedure TForm1.FormCreate(Sender: TObject);
  39. begin
  40.   Panel1.ControlStyle := Panel1.ControlStyle-[csNoFocus];
  41.   Panel1.OnKeyPress := @FormKeyPress;
  42. end;
  43.  
  44. procedure TForm1.FormKeyPress(Sender: TObject; var Key: char);
  45. begin
  46.   If Sender =  Panel1 Then Beep;
  47. end;
  48.  
  49. procedure TForm1.Panel1Click(Sender: TObject);
  50. begin
  51.   WIth Sender as TPanel do SetFocus;
  52. end;
  53.  
  54. procedure TForm1.Panel1Enter(Sender: TObject);
  55. begin
  56.  With Sender as TPanel do
  57.      bevelinner := bvLowered;
  58. end;
  59.  
  60. procedure TForm1.Panel1Exit(Sender: TObject);
  61. begin
  62.   With Sender As TPanel do bevelInner := bvNone;
  63. end;
  64.  
  65. end.
  66.  
  67.  
Use panels as buttons.

You can enable it to receive Keyboard input and tabs.
Use the bevel properties to make it look like it's pushed when in focused.

Just drop you panels on the form and direct all the events to these single events instead of making a separate event for each panel.

Panels have a Onpaint event you can use to custom paint it if you wish.

Jamie
The only true wisdom is knowing you know nothing

Aruna

  • Hero Member
  • *****
  • Posts: 665
Re: Changing Button Color.
« Reply #12 on: January 06, 2025, 04:23:23 am »
Sure but then you have this.
<snip>
Jamie thank you for the code, I tweaked your code a wee bit and now we have *this* toggle-button. The screenshots are attached. The source is in the attached zip. (Maybe I should turn this into a custom component?)

Joanna

  • Hero Member
  • *****
  • Posts: 1374
Re: Changing Button Color.
« Reply #13 on: January 06, 2025, 06:05:43 pm »
A toggle button that swaps text and background Colors  when toggled would be a fun project.

 

TinyPortal © 2005-2018