Colored Buttons - Quick Hack
lazarus / 39-Graphics

----------------------------------------------------------------------
winni · 2019-10-23 22:05

Hi!

There is always the question for colored buttons. The answer is NO -
with the standard components. There are very impressive buttons in
BGRAcontrols and other libs, but sometime you want a simple and quick
solution. That's what I did.

I "misstreat" the BitButton. A little.

I use the glyph inside the TBitbtn and paint the deserved color on it.
The I write the caption on the glyph.
I store the caption string in the tag property and set the caption to
length=0.
If I would not do that, the Button will try to write the caption a
second time - not nice.

So at design time

* set all properties like always
* color and  font  are respected
* set Margin and Spacing to Zero
* dont care ,about Layout - it is not used

All you have to do is to init the BitButton with this procedure:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.Bitinit(B : TBitBtn);var R : Trect;    cap: string;    dx,dy :
integer;    P: Pstring; begin  if B.Caption <> '' then    begin      
     cap := B.Caption;             B.Tag := PtrInt(@cap);           
 B.Caption := '';   end else // already done    begin             P :=
Pointer(B.Tag);            if B.Tag <> 0 then cap := P^ else cap :=
'???';    end;   B.glyph.SetSize(B.width,B.height);  R :=
Rect(0,0,B.width,B.height);  B.Glyph.Canvas.brush.Color := B.Color; 
B.Glyph.Canvas.FillRect(R);   B.Glyph.Canvas.Font := B.Font;  dx
:=(B.glyph.Width - B.Glyph.Canvas.TextWidth(cap)) div 2;  dy :=
(B.glyph.Height - B.Glyph.Canvas.TextHeight(cap)) div 2; 
B.Glyph.Canvas.TextOut(dx,dy,cap);end; 
Then everything is fixed. As the glyph is a TBitmap you dont have to
care about repainting - it is done automatic by the TBitmap.

If you have only on Button then use

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
Bitinit(BitBtn1);
If you have some more TBitBtn on your Form, you can do the init in a
loop in FormCreate:

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.FormCreate(Sender: TObject);var i : integer;begin  for i := 0
to ComponentCount - 1 do    begin      if Components[i] is TBitBtn
then                                             BitInit
(TBitBtn(Components[i]));        end;// iend; 
Little image attached.

Have some fun with colored Buttons!

Winni

----------------------------------------------------------------------
lainz · 2019-10-24 00:18

Nice hack =)

You can also use a TSpeedButton, and add OnPaint event:

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.SpeedButton1Paint(Sender: TObject);var  btn: TSpeedButton; 
style: TTextStyle;begin  btn := TSpeedButton(Sender); 
btn.Canvas.Brush.Color := clRed;  btn.Canvas.Rectangle(10, 10,
btn.Width - 10, btn.Height - 10);  btn.Canvas.Font.Color := clBlack; 
style.Alignment:=taCenter;  style.Layout:=tlCenter; 
btn.Canvas.TextRect(Rect(0, 0, btn.Width, btn.Height), 0, 0,
btn.Caption, style);end;

----------------------------------------------------------------------
papsim · 2019-10-24 05:20

Kudos to all developers of Lazarus and packages.

Coming from the old DOS world with monochrome monitors
and loving color, yes, Buttons were a problem.

My solution is to use a TBCPanel from BgraControls coupled with
a Label, and playing with the background to give 3D or 2D looks.

Sample Project attached.

Regards.

----------------------------------------------------------------------
circular · 2019-10-24 07:20

Hmm ok. While we're at it, why not use a TPanel?

Code: Delphi  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i unit
Unit1; {$mode objfpc}{$H+} interface uses  Classes, SysUtils, Forms,
Controls, Graphics, Dialogs, ExtCtrls; type   { TForm1 }   TForm1 =
class(TForm)    Panel1: TPanel;    procedure Panel1Click(Sender:
TObject);    procedure Panel1MouseDown(Sender: TObject; Button:
TMouseButton;      Shift: TShiftState; X, Y: Integer);    procedure
Panel1MouseEnter(Sender: TObject);    procedure
Panel1MouseLeave(Sender: TObject);    procedure Panel1MouseUp(Sender:
TObject; Button: TMouseButton;      Shift: TShiftState; X, Y:
Integer);  private   public   end; var  Form1:
TForm1; implementation {$R *.lfm} const  clNormal = $9393ff;  clHover
= $8080ff;  clDown = $4040d0; { TForm1 } procedure
TForm1.Panel1MouseDown(Sender: TObject; Button: TMouseButton;  Shift:
TShiftState; X, Y: Integer);begin  if Button = mbLeft then  begin   
Panel1.Color := clDown;    Panel1.BevelOuter:= bvLowered; 
end;end; procedure TForm1.Panel1Click(Sender: TObject);begin 
ShowMessage('You clicked me');end; procedure
TForm1.Panel1MouseEnter(Sender: TObject);begin  Panel1.Color :=
clHover;end; procedure TForm1.Panel1MouseLeave(Sender: TObject);begin 
Panel1.Color := clNormal;end; procedure TForm1.Panel1MouseUp(Sender:
TObject; Button: TMouseButton;  Shift: TShiftState; X, Y:
Integer);begin  if Button = mbLeft then  begin    Panel1.Color :=
clHover;    Panel1.BevelOuter:= bvRaised;  end;end; end.

----------------------------------------------------------------------
Thaddy · 2019-10-24 07:22

Quote from: winni on October 24, 2019, 12:05:56 amI "misstreat" the
BitButton. A little.
That's a known work-around since Delphi 1, winni! It is also platform
because this is Windows only: without theming it is a restriction of 
Windows button widget.
Glad to see I am not the only one re-inventing wheels every now and
then ....

----------------------------------------------------------------------
winni · 2019-10-24 08:21

@Thaddy

Developed and tested on Linux yesterday. So: Windows only????

The blind man talks about colors.

Winni

----------------------------------------------------------------------
lucamar · 2019-10-24 08:33

Quote from: winni on October 24, 2019, 10:21:46 amDeveloped and tested
on Linux yesterday. So: Windows only????
He probably means that in Linux you shouldn't have any problem setting
Color for buttons, so the "workaround" is useful only for Windows.
That is, it's a solution to a known Windows-only problem.

----------------------------------------------------------------------
winni · 2019-10-24 08:51

@Lucamar

That was right: On elder Linux versions the simple TButtons could get
colored.

With my current version this is not possible anymore (Suse Tumbleweed,
64 Bit, gtk2).

That's why I made that. Yesterday!

Winni

----------------------------------------------------------------------
Thaddy · 2019-10-24 09:12

@winni
I have no problem at all to set the colors on Raspbian Buster (most
recent Debian).

----------------------------------------------------------------------
winni · 2019-10-24 09:27

@Thaddy

Hmm - just tested again: only gray. So this might be a problem (again)
with KDE Plasma !?
It is full of errors.

Winni

----------------------------------------------------------------------
Thaddy · 2019-10-24 09:30

Yes, KDE can be a problem but you wrote you were using GTK?

----------------------------------------------------------------------
winni · 2019-10-24 16:48

Hm, unclear question.

I mean:

Project --> Preferences -->Compiler --> Configuration
shows:

LCL-Widgetset: "gtk2"

----------------------------------------------------------------------
zeljko · 2019-10-24 17:44

With qt/qt5 you can change TButton/TBitBtn color to anything on
win,linux and mac.