[CLOSED] BGRAControls

[fabienwang]

Excellent work Dibo, I really like these new components
Do you plan to extend it to other components like TEdit, TMemo, etc. ?

The Speedbutton is working for me (with latest version of brgabitmap).

[circular]

Hello Dibo,

Nice work !

I saw that you were looking for an idea with gradients on buttons.

Here is suggestion for DrawBasicBody procedure in BGRAButton :

Code: [Select]

  case ABody.FStyle of
    bbsClear, bbsColor:
      { Solid background color }
      FBGRA.RoundRectAntialias(ARect.Left,ARect.Top,ARect.Right,ARect.Bottom,FRoundX,FRoundY,
        borcolor, FBorderWidth, backcolor);
    bbsGradient:
      begin
        { Using multishape filler to merge background gradient and border }
        multi := TBGRAMultishapeFiller.Create;
        multi.PolygonOrder := poFirstOnTop; { Border will replace background }

        if borcolor.alpha <> 0 then { Let the background be wider with transparent border }
          multi.AddRoundRectangleBorder(ARect.Left,ARect.Top,ARect.Right,ARect.Bottom,FRoundX,FRoundY,
            FBorderWidth, borcolor);

        { Gradients }
        back := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRAPixelTransparent);
        grect1 := ARect;
        grect2 := ARect;
        { Gradient 1 }
        if ABody.FGradient1EndPercent>0 then
        begin
          grect1.Bottom := Round((grect1.Bottom/100)*ABody.FGradient1EndPercent);
          gra := CreateGradient(ABody.FGradient1, grect1);
          back.FillRect(grect1.Left,grect1.Top,grect1.Right,grect1.Bottom,
            gra,dmSet
          );
          gra.Free;
        end;
        { Gradient 2 }
        if ABody.FGradient1EndPercent<100 then
        begin
          if grect1.Bottom<ARect.Bottom then
            grect2.Top := grect1.Bottom-1;
          gra := CreateGradient(ABody.FGradient2, grect2);
          back.FillRect(grect2.Left,grect2.Top,grect2.Right,grect2.Bottom,
            gra,dmSet
          );
          gra.Free;
        end;

        multi.AddRoundRectangle(ARect.Left,ARect.Top,ARect.Right,ARect.Bottom,FRoundX,FRoundY, back);

        multi.Draw(FBGRA);
        multi.Free;

        back.Free;
      end;
  end;     

[Dibo]

Thanks! I will try it

[circular]

You're welcome.

For TImageList, here is a way to handle better grayscale effect and transparency selection :

Code: [Select]

{*** BGRA Drawing *** }
  case ADrawEffect of
    gdeDisabled:
      begin
        GetBitmap(AIndex, FBmp, gdeNormal);
        FBGRA.Assign(FBmp);
        BGRAReplace(FBGRA, FBGRA.FilterGrayscale);
      end;
    else
    begin
      GetBitmap(AIndex, FBmp, ADrawEffect);
      FBGRA.Assign(FBmp);
    end;
  end;
  if ADrawingStyle in[dsFocus, dsSelected] then FBGRA.ApplyGlobalOpacity(128);
  FBGRA.Draw(ACanvas, AX, AY, False);          
Here on Windows 7 64-bit, I've got some issues of white background. Did you encounter this already ?

EDIT: I noticed the glyph on TBGRAButton is shifted vertically when vertical align is not btvaCenter.

[lainz]

New version 1.0.8.0

First thank you again 

Then i got this for you, like Windows 7 explorer toolbar button, add a BGRAPanel with a BGRAButton inside, then go OnCreate event of Form1 and add this code:

Code: Pascal  [Select][+][-]

1. procedure TForm1.FormCreate(Sender: TObject);
2. begin
3.   // Panel
4.   with BGRAPanel1 do begin
5.     Gradient.StartColor:=RGBToColor(245,250,255);
6.     Gradient.EndColor:=RGBToColor(221,233,247);
7.   end;
8.   // Button
9.   with BGRAButton1 do begin
10.     TextShadow:=False;
11.     RoundX:=2;
12.     RoundY:=2;
13.     // Normal
14.     with BodyNormal do begin
15.       Font.Color:=clBlack;
16.       BorderStyle:=bboNone;
17.       Style:=bbsClear;
18.     end;
19.     // Hover
20.     with BodyHover do begin
21.       Font.Color:=clBlack;
22.       Gradient1EndPercent:=50;
23.       BorderColor:=RGBToColor(187,202,219);
24.       Gradient1.StartColor:=RGBToColor(248,251,254);
25.       Gradient1.EndColor:=RGBToColor(237,242,250);
26.       Gradient2.StartColor:=RGBToColor(215,228,244);
27.       Gradient2.EndColor:=RGBToColor(193,210,232);
28.     end;
29.     // Clicked
30.     with BodyClicked do begin
31.       Font.Color:=clBlack;
32.       Gradient1EndPercent:=55;
33.       BorderColor:=RGBToColor(187,202,219);
34.       Gradient1.StartColor:=RGBToColor(226,236,245);
35.       Gradient1.EndColor:=RGBToColor(216,228,241);
36.       Gradient2.StartColor:=RGBToColor(207,219,236);
37.       Gradient2.EndColor:=RGBToColor(207,220,237);
38.     end;
39.   end;
40. end;  

See attached image 'bgratoolwin7.png'.

Suggestion:
* Add 'LightColor' for BGRAButton, is a light inside the button (next to BorderColor).

[Dibo]

Nice . I see it is worth developing further

[lainz]

Nice . I see it is worth developing further

I created an article in the Wiki:
http://wiki.lazarus.freepascal.org/BGRAControls

And a gallery of buttons created with BGRAButton:
http://wiki.lazarus.freepascal.org/BGRAButton_Gallery

Feel free to edit!  

[Dibo]

Wow thanks! I never did wiki pages so I could not find time for this. Thanks again

[circular]

Hello people,

Here is a knob button control I've made. Dibo, can you include it in the next version of your package ?

By the way, nice work Lainz. 

[circular]

Here is a screenshot :

[Dibo]

Sure. Thanks

[lainz]

Is possible to set the same properties for all TBGRAButtons in a form at the same time?

[Dibo]

Temporary you could create some sub procedure like:

Code: Pascal  [Select][+][-]

1. procedure TForm.OnCreate(Sender: TObject);
2.  
3.   procedure _DefaultPropertys(AButton: TBGRAButton);
4.   begin
5.     AButton.BodyHover.Gradien1.StartColor := clred;
6.     // etc...
7.   end;
8.  
9. begin
10.   _DefaultPropertys(BGRAButton1);
11.   _DefaultPropertys(BGRAButton2);
12.   _DefaultPropertys(BGRAButton3);
13. end;
14.  

But I want override procedure "Assign" and copy propertys there. So in next release you just call:

Code: Pascal  [Select][+][-]

1. BGRAButton2.Assign(BGRAButton1);
2. BGRAButton3.Assign(BGRAButton1);
3.  

[ik]

Or simply do something like so:

Code: Pascal  [Select][+][-]

1. ...
2. for i := 0 to Form1.ComponantCount -1 do
3.     if Form1.Components[i] is TBGRAButton then
4.       Form1.Components[i].BodyHover.Gradien1.StartColor := clred;
5. ...

[lainz]

Why if I set RoundX & RoundY to 0 background isn't displayed?

PD: I'm using Windows 7.