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]

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Panel
  with BGRAPanel1 do begin
    Gradient.StartColor:=RGBToColor(245,250,255);
    Gradient.EndColor:=RGBToColor(221,233,247);
  end;
  // Button
  with BGRAButton1 do begin
    TextShadow:=False;
    RoundX:=2;
    RoundY:=2;
    // Normal
    with BodyNormal do begin
      Font.Color:=clBlack;
      BorderStyle:=bboNone;
      Style:=bbsClear;
    end;
    // Hover
    with BodyHover do begin
      Font.Color:=clBlack;
      Gradient1EndPercent:=50;
      BorderColor:=RGBToColor(187,202,219);
      Gradient1.StartColor:=RGBToColor(248,251,254);
      Gradient1.EndColor:=RGBToColor(237,242,250);
      Gradient2.StartColor:=RGBToColor(215,228,244);
      Gradient2.EndColor:=RGBToColor(193,210,232);
    end;
    // Clicked
    with BodyClicked do begin
      Font.Color:=clBlack;
      Gradient1EndPercent:=55;
      BorderColor:=RGBToColor(187,202,219);
      Gradient1.StartColor:=RGBToColor(226,236,245);
      Gradient1.EndColor:=RGBToColor(216,228,241);
      Gradient2.StartColor:=RGBToColor(207,219,236);
      Gradient2.EndColor:=RGBToColor(207,220,237);
    end;
  end;
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]

procedure TForm.OnCreate(Sender: TObject);

  procedure _DefaultPropertys(AButton: TBGRAButton);
  begin
    AButton.BodyHover.Gradien1.StartColor := clred;
    // etc...
  end;

begin
  _DefaultPropertys(BGRAButton1);
  _DefaultPropertys(BGRAButton2);
  _DefaultPropertys(BGRAButton3);
end;
But I want override procedure "Assign" and copy propertys there. So in next release you just call:

Code: (pascal) [Select]

BGRAButton2.Assign(BGRAButton1);
BGRAButton3.Assign(BGRAButton1);


[ik]

Or simply do something like so:

Code: (pascal) [Select]

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

[lainz]

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

PD: I'm using Windows 7.