[Wiki] BGRAButton Gallery, cool buttons!

[lainz]

Go and see it:
http://wiki.lazarus.freepascal.org/BGRAButton_Gallery

Those are cool buttons made assigning properties to BGRAButton's. No only images, the source code is available!

Those are the current buttons in the Gallery:
* like Facebook Menu: you know Facebook? Of course here it is their look for lazarus!
* like Google Menu: The fresh google look in lazarus, is an aproximation not the same..
* like Windows 7 Button
* like Windows 7 Explorer ToolBar
* like Office 2010 Button
* like Mac OS X Lion Button (thanks to http://thomasmaier.me/lionbuttons/)

And like Lazarus Custom Drawn Buttons: those are with the 'beta' look of the package..
* dsAndroid
* dsGrad
* dsWinCE
* dsXPTaskBar

Also in this article you can found some tips to do:
* Sphere button
* Button with only one state
* Single gradient button
* Single color button (if you like minimalist look)
* Other tips

And the best button ever made, the 'Lainz' button  
* You can see this button at the top of the article  

[Dibo]

Nice to see what this component can do. I create it only for one case in my application but finally I reject this but publish source (lainz request have influence for this). Open source idea is amazing . Big thanks to lainz for marketing and of course thanks to circular for great BGRABitmap library.

P.S. @Lainz, you missed flash button which I saw in your BGRABitmap tutorials

[fredycc]

Amazing works  , thanks.

Regards 

[garlar27]

I have no words for these buttons: BGRAControls. Come on take a look at them!!!

A DREAM COME TRUE!!!

[lainz]

There is a better way to share buttons, without need to write all properties again 

Add a BGRAButton, edit their properties in the object inspector, when the button is finnished right clic the button in the form > Copy.

Then Paste in a text editor, you will see something like this (this is the default button):

Code: [Select]

object BGRAButton1: TBGRAButton
  Left = 216
  Height = 33
  Top = 67
  Width = 123
  BodyNormal.BorderColor = 11235643
  BodyNormal.Color = clBtnFace
  BodyNormal.Font.Color = 7487786
  BodyNormal.Gradient1.StartColor = 15722194
  BodyNormal.Gradient1.EndColor = 13137169
  BodyNormal.Gradient1.Point1XPercent = 0
  BodyNormal.Gradient1.Point1YPercent = 0
  BodyNormal.Gradient1.Point2XPercent = 0
  BodyNormal.Gradient1.Point2YPercent = 100
  BodyNormal.Gradient2.StartColor = 13137169
  BodyNormal.Gradient2.EndColor = 15722194
  BodyNormal.Gradient2.Point1XPercent = 0
  BodyNormal.Gradient2.Point1YPercent = 0
  BodyNormal.Gradient2.Point2XPercent = 0
  BodyNormal.Gradient2.Point2YPercent = 100
  BodyNormal.Gradient1EndPercent = 35
  BodyHover.BorderColor = 14136983
  BodyHover.Color = clBtnFace
  BodyHover.Font.Color = 7487786
  BodyHover.Gradient1.StartColor = 15722194
  BodyHover.Gradient1.EndColor = 13137169
  BodyHover.Gradient1.Point1XPercent = 0
  BodyHover.Gradient1.Point1YPercent = 0
  BodyHover.Gradient1.Point2XPercent = 0
  BodyHover.Gradient1.Point2YPercent = 100
  BodyHover.Gradient2.StartColor = 13137169
  BodyHover.Gradient2.EndColor = 15722194
  BodyHover.Gradient2.Point1XPercent = 0
  BodyHover.Gradient2.Point1YPercent = 0
  BodyHover.Gradient2.Point2XPercent = 0
  BodyHover.Gradient2.Point2YPercent = 100
  BodyHover.Gradient1EndPercent = 35
  BodyClicked.BorderColor = 11235643
  BodyClicked.Color = clBtnFace
  BodyClicked.Font.Color = 7487786
  BodyClicked.Gradient1.StartColor = 15722194
  BodyClicked.Gradient1.EndColor = 13137169
  BodyClicked.Gradient1.Point1XPercent = 0
  BodyClicked.Gradient1.Point1YPercent = 0
  BodyClicked.Gradient1.Point2XPercent = 0
  BodyClicked.Gradient1.Point2YPercent = 100
  BodyClicked.Gradient2.StartColor = 13137169
  BodyClicked.Gradient2.EndColor = 15722194
  BodyClicked.Gradient2.Point1XPercent = 0
  BodyClicked.Gradient2.Point1YPercent = 0
  BodyClicked.Gradient2.Point2XPercent = 0
  BodyClicked.Gradient2.Point2YPercent = 100
  BodyClicked.Gradient1EndPercent = 35
  Caption = 'BGRAButton1'
  Color = clNone
  ParentColor = False
end

If you copy and paste this code in a Form the button will be added.

Is the same code stored in the .lfm

[circular]

Cool 

[lainz]

Nice to see what this component can do. I create it only for one case in my application but finally I reject this but publish source (lainz request have influence for this). Open source idea is amazing . Big thanks to lainz for marketing and of course thanks to circular for great BGRABitmap library.

P.S. @Lainz, you missed flash button which I saw in your BGRABitmap tutorials

Added.

http://wiki.lazarus.freepascal.org/BGRAButton_Gallery#Flash_Player_Setup

But I need the 'LightColor' (like 'BorderColor') inside the button and over the gradients, if possible with an 'LightOpacity' value. All modern buttons has a light with opacity

Also I need BGRAPanel 'BorderColor' & 'LightColor' if possible, to complete Flash Player Setup in the Gallery.

[circular]

Ask Dibo for it in BGRAControls topic. He may not see your message here.

Now with the flash button the flash progressbar, we have it.

[circular]

I realised you were answering to Dibo. So there is no way he will miss your message.

I guess I'm tired... 

[lainz]

I realised you were answering to Dibo. So there is no way he will miss your message.

I guess I'm tired... 

get a good pillow and rest a while, but do not take the laptop to bed!

[Dibo]

Ask Dibo for it in BGRAControls topic. He may not see your message here.

I saw this message but don't know how to solve it yet . I do not know for sure how it should work. I should add LightColor property for left and top edge? But what with rounded buttons? Method "AddRoundRectangleBorder" have no "light" color so I should use some layer with opacity?

[mWaltari]

Hello,

Good job!

has anyone tested this on WinCE? And could we get the source into the SVN repository?

.-Tee-.

[lainz]

Ask Dibo for it in BGRAControls topic. He may not see your message here.

I saw this message but don't know how to solve it yet . I do not know for sure how it should work. I should add LightColor property for left and top edge? But what with rounded buttons? Method "AddRoundRectangleBorder" have no "light" color so I should use some layer with opacity?

First the properties needed:
* LightColor (tbgrapixel) (or tcolor with separated property for opacity) is just a plane light color, is only one light.
* LightColorSize (default 1px)

With no-rounded buttons of 1px is easy, is just a rectangle with opacity.

Here
http://wiki.lazarus.freepascal.org/Sample_Graphics
are a lot of samples of 1px light

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

1. // Flash Player ProgressBar Light
2. ABitmap2.Rectangle(1,1,ARect.Right-1,ARect.Bottom-1,BGRA(153,212,255,100),dmDrawWithTransparency);
3.  
4. // Win7 Explorer ToolBar Light
5. gradBmp.Rectangle(0,0,Width,Height-2,BGRA(255,255,255,100),dmDrawWithTransparency);
6.  
7. // Flash Player Button Gradient Light
8.   tempbmp2:=TBGRABitmap.Create(btn1.Width,btn1.Height,BGRA(0,0,0,0));
9.   tempbmp2.GradientFill(1,1,btn1.Width-1,btn1.Height-1,
10.   BGRA(255,255,255,34),
11.   BGRA(255,255,255,10), gtLinear,
12.   PointF(btn1.ClientRect.Right,btn1.ClientRect.Top),
13.   PointF(btn1.ClientRect.Right,btn1.ClientRect.Bottom),
14.   dmDrawWithTransparency,True,False);
15.   tempbmp2.AlphaFillRect(2,2,btn1.Width-2,btn1.Height-2,0);
16.  

Flash Player Button Gradient Light is a gradient with AlphaFillRect to left only the border.

With rounded rectangles:
http://wiki.lazarus.freepascal.org/BGRABitmap_tutorial_5

You can use the EraseRoundRectAntialias to left only the border of a rounded layer.

Example of 1px light:
http://www.pslover.com/images/thumb/13088.jpg

[lainz]

See the attached image.

I don't know how to draw this in BGRABitmap, is the expected 'light' inside the button, next to bordercolor, up to gradients.

[circular]

It's not possible to draw this with exact antialiasing, but you can do an approximation with two steps :

- first draw the button with border using TBGRAMultishapeFiller
- then draw the light as a RoundRectangle using light color and using the right size and radius.

Computing the radius of the RoundRectangle can be complicated.

I've just added properties to FillInfo objects, so you can compute it with BGRABitmap. To do your example, you can now do it like this :

Code: [Select]

procedure TForm1.FormPaint(Sender: TObject);
var
  image: TBGRABitmap;
  fiBorder,fiLight: TFillBorderRoundRectInfo; //in BGRAFillInfo
  multi: TBGRAMultishapeFiller;               //in BGRAPolygon
  multiGrad: TBGRAMultiGradient;              //in BGRAGradientScanner
  gradScan: TBGRAGradientScanner;
begin
  image := TBGRABitmap.Create(clientwidth,clientheight,ColorToBGRA(ColorToRGB(clBtnFace)));

  //to avoid undefined when freeing
  multiGrad := nil;
  gradScan := nil;
  //compute information for the bounding round rectangle
  fiBorder := TFillBorderRoundRectInfo.Create(10,10,300,200,40,40,5,[]);
  multi := TBGRAMultishapeFiller.Create;
  multi.AddShape(fiBorder,BGRA(128,128,128)); //fill the border with gray
  //check if there is an inner border (there can be none if the round rectangle is too small)
  if fiBorder.InnerBorder <> nil then
  begin
    //create multigradient (blue-white-red)
    multiGrad := TBGRAMultiGradient.Create([BGRA(128,128,255),BGRAWhite,BGRA(128,0,0)],[0,0.5,1],True);
    //create linear gradient from top to bottom of inner border
    gradScan := TBGRAGradientScanner.Create(multiGrad,gtLinear,PointF(50,fiBorder.InnerBorder.TopLeft.Y),PointF(50,fiBorder.InnerBorder.BottomRight.Y));
    multi.AddShape(fiBorder.InnerBorder,gradScan); //fill round rectangle with gradient
  end;
  //render the round rectangle with border
  multi.Draw(image);
  multi.Free;
  gradScan.Free;
  multiGrad.Free;
  fiBorder.Free;

  //then compute light position : it is 5 pixel wider
  fiLight := TFillBorderRoundRectInfo.Create(10,10,300,200,40,40,5+5,[]);
  //check if there is an inner position
  if fiLight.InnerBorder <> nil then
    with fiLight.InnerBorder do //fill with light
      image.RoundRectAntialias(topleft.x,topleft.y,bottomright.x,bottomright.y,radiusx,radiusY,BGRA(255,255,255,64),5);
  fiLight.free;

  image.Draw(Canvas,0,0,True);
  image.free;
end;