Bookstore

Recent

Author Topic: SOLVED: Is possible a button with 3 states (BGRAControls)?  (Read 683 times)

SaraT

  • Jr. Member
  • **
  • Posts: 80
  • A little student
SOLVED: Is possible a button with 3 states (BGRAControls)?
« on: February 22, 2020, 01:19:33 am »
Hi lainz/friends

How can I use the attached image to create a custom button with 3 states (Normal, hover, pressed)?

Tell me your ideas, tricks or recommendations. Many thanks :)
« Last Edit: February 22, 2020, 02:51:09 pm by SaraT »

trev

  • Hero Member
  • *****
  • Posts: 516
  • Former Delphi 1-7 and 10.2 User
Re: Is possible this button with BGRAControls?
« Reply #1 on: February 22, 2020, 01:34:47 am »
Did you try searching the forum or the wiki? That would be a good start.

For example:

* https://forum.lazarus.freepascal.org/index.php/topic,15634.0.html
* https://wiki.freepascal.org/BGRAControls
o Lazarus v2.1.0 r62775, FPC v3.3.1 r44289, macOS 10.14.6 (with sup update), Xcode 10.3.1
o Lazarus v2.1.0 r61574, FPC v3.3.1 r42318, FreeBSD 12.0 (Parallels VM)
o Lazarus v2.1.0 r61574, FPC v3.0.4, Ubuntu 18.04 (Parallels VM)

winni

  • Hero Member
  • *****
  • Posts: 1112
Re: Is possible this button with BGRAControls?
« Reply #2 on: February 22, 2020, 02:00:12 am »
Hi!

Take time, read this and sit back in amazement:

https://wiki.freepascal.org/BGRAControls

Winni

Oooops - too late
« Last Edit: February 22, 2020, 02:02:37 am by winni »

lainz

  • Hero Member
  • *****
  • Posts: 3498
    • Lainz
Re: Is possible this button with BGRAControls?
« Reply #3 on: February 22, 2020, 02:03:15 am »
Hi, you can use TBCImageButton. But you need a 4th state with the disabled state.

Check attached project.

SaraT

  • Jr. Member
  • **
  • Posts: 80
  • A little student
Re: Is possible this button with BGRAControls?
« Reply #4 on: February 22, 2020, 02:50:23 pm »
Hi, you can use TBCImageButton. But you need a 4th state with the disabled state.

Check attached project.

Many thanks guys. Sample worked like a charm but I can't see any option to add icon/glyph :/
Gonna take a look to the BGRA wiki.

Have a great day.
« Last Edit: February 22, 2020, 03:19:44 pm by SaraT »

lainz

  • Hero Member
  • *****
  • Posts: 3498
    • Lainz
Re: Is possible this button with BGRAControls?
« Reply #5 on: February 22, 2020, 05:32:15 pm »
Hi, you can use TBCImageButton. But you need a 4th state with the disabled state.

Check attached project.

Many thanks guys. Sample worked like a charm but I can't see any option to add icon/glyph :/
Gonna take a look to the BGRA wiki.

Have a great day.

Yes, there's no glyph in that control.

But, you can instead of using an image, create a style for normal TBCButton (that has glyph support), the images you provided are just a 1px border (with 1px rounded corner at top left, top right) and a gradient, so is not that complex.

Check the unit bcsamples.pas

For example how to do an Office 2010 button:

Code: Pascal  [Select]
  1. procedure BCButtonOffice2010(AButton: TBCButton);
  2. begin
  3.   AButton.Rounding.RoundX := 3;
  4.   AButton.Rounding.RoundY := 3;
  5.   AButton.RoundingDropDown.Assign(AButton.Rounding);
  6.  
  7.   with AButton.StateNormal do
  8.   begin
  9.     Background.Gradient1EndPercent := 50;
  10.     Background.Gradient2.Point1XPercent := 0;
  11.     Background.Gradient2.Point1YPercent := 0;
  12.     Background.Gradient2.Point2YPercent := 100;
  13.     Background.Gradient2.GradientType := gtLinear;
  14.     Border.Color := RGBToColor(207, 208, 210);
  15.     Border.LightWidth := 1;
  16.     Border.LightOpacity := 175;
  17.     Border.Style := bboSolid;
  18.     FontEx.Color := clBlack;
  19.     FontEx.Shadow := False;
  20.     FontEx.Style := [];
  21.   end;
  22.  
  23.   AButton.StateHover.Assign(AButton.StateNormal);
  24.   AButton.StateClicked.Assign(AButton.StateNormal);
  25.  
  26.   with AButton.StateNormal do
  27.   begin
  28.     Background.Gradient1.StartColor := RGBToColor(255, 255, 255);
  29.     Background.Gradient1.EndColor := RGBToColor(237, 239, 241);
  30.     Background.Gradient1EndPercent := 100;
  31.   end;
  32.  
  33.   with AButton.StateHover do
  34.   begin
  35.     Background.Gradient1.StartColor := RGBToColor(254, 241, 189);
  36.     Background.Gradient1.EndColor := RGBToColor(254, 228, 134);
  37.     Background.Gradient2.StartColor := RGBToColor(254, 228, 134);
  38.     Background.Gradient2.EndColor := RGBToColor(254, 248, 196);
  39.     Border.Color := RGBToColor(244, 210, 81);
  40.   end;
  41.  
  42.   with AButton.StateClicked do
  43.   begin
  44.     Background.Gradient1.StartColor := RGBToColor(255, 229, 117);
  45.     Background.Gradient1.EndColor := RGBToColor(255, 216, 107);
  46.     Background.Gradient2.StartColor := RGBToColor(255, 216, 107);
  47.     Background.Gradient2.EndColor := RGBToColor(255, 239, 129);
  48.     Border.Color := RGBToColor(194, 161, 63);
  49.     Border.LightWidth := 0;
  50.   end;
  51. end;

Pass a TBCButton to style it.

SaraT

  • Jr. Member
  • **
  • Posts: 80
  • A little student
Re: SOLVED: Is possible a button with 3 states (BGRAControls)?
« Reply #6 on: February 22, 2020, 05:57:21 pm »
Great!
Your component is perfect. I had never used it and it seems is too big. Amazing.  :o
Any button designer?

Many, many thanks.
« Last Edit: February 22, 2020, 06:07:04 pm by SaraT »

lainz

  • Hero Member
  • *****
  • Posts: 3498
    • Lainz
Re: SOLVED: Is possible a button with 3 states (BGRAControls)?
« Reply #7 on: February 22, 2020, 06:12:50 pm »
Great!
Your component is perfect. I had never used it and it seems is too big. Amazing.  :o
Any button designer?

Many, many thanks.

Thanks.

About the button designer, there is no one. One is the designer =)

SaraT

  • Jr. Member
  • **
  • Posts: 80
  • A little student
Re: SOLVED: Is possible a button with 3 states (BGRAControls)?
« Reply #8 on: February 22, 2020, 06:32:21 pm »
Great!
Your component is perfect. I had never used it and it seems is too big. Amazing.  :o
Any button designer?

Many, many thanks.

Thanks.

About the button designer, there is no one. One is the designer =)

Lainz, can you add to your component a new control, lets say: TBCImagePanel?
In this case, what I would like to have are the options
...MarginBottom, MarginTop, MarginLeft, MarginRight

We can do it with this button but I want a panel as a container.

So I could use an image similar to above buttons, to create my custom form style/theme/frame.
Please and many thanks :)
« Last Edit: February 22, 2020, 06:34:21 pm by SaraT »

lainz

  • Hero Member
  • *****
  • Posts: 3498
    • Lainz
Re: SOLVED: Is possible a button with 3 states (BGRAControls)?
« Reply #9 on: February 22, 2020, 09:01:29 pm »
There is already TBCPaperPanel in BCListBox.pas, but is not customizable yet.

Maybe you can try to see how it's made TBCPaperPanel and adapt it to your needs.

Is a really very simple control, you can just copy the code to your form and it will work.

The steps are:
- Add a private variable FShadow: TBGRASliceScaling; 
- Drop a BGRAVirtualScreen
- Add OnRedraw event from the object inspector

Code: Pascal  [Select]
  1. BCRedraw(Sender: TObject; ABitmap: TBGRABitmap);
  2. begin
  3.   FShadow.Draw(ABitmap, 0, 0, ABitmap.Width, ABitmap.Height);
  4. end;

Add this method to your form OnCreate event to load the slice scaling bitmap from resources:

Code: Pascal  [Select]
  1. var
  2.   res: TLazarusResourceStream;
  3. begin
  4.   res := TLazarusResourceStream.Create('SHADOW', nil);
  5.   FShadow := TBGRASliceScaling.Create(res);
  6.   FShadow.Margins := Margins(6, 9, 6, 9);
  7.   res.Free;
  8. end;    

Don't forget to Free the bitmap OnDestroy

Code: Pascal  [Select]
  1. FShadow.Free;

lainz

  • Hero Member
  • *****
  • Posts: 3498
    • Lainz
Re: SOLVED: Is possible a button with 3 states (BGRAControls)?
« Reply #10 on: February 25, 2020, 07:18:30 pm »
I've added a bug report to see if at some time we can implement it
https://github.com/bgrabitmap/bgracontrols/issues/62

SaraT

  • Jr. Member
  • **
  • Posts: 80
  • A little student
Re: SOLVED: Is possible a button with 3 states (BGRAControls)?
« Reply #11 on: February 25, 2020, 08:07:39 pm »
I've added a bug report to see if at some time we can implement it
https://github.com/bgrabitmap/bgracontrols/issues/62
Great news Lainz :D
Hope to see the control soon... it would be very useful to me.

Thanks.

lainz

  • Hero Member
  • *****
  • Posts: 3498
    • Lainz
Re: Is possible this button with BGRAControls?
« Reply #12 on: March 03, 2020, 01:43:00 am »
Hi, you can use TBCImageButton. But you need a 4th state with the disabled state.

Check attached project.

Many thanks guys. Sample worked like a charm but I can't see any option to add icon/glyph :/
Gonna take a look to the BGRA wiki.

Have a great day.

Here another bug report
https://github.com/bgrabitmap/bgracontrols/issues/64

But I don't have much time to implement it. Maybe it's time to get more people working on BGRAControls? Volunteers?