Sample Graphics

From Lazarus wiki
Revision as of 19:46, 17 March 2011 by Circular (talk | contribs) (→‎Lazarus About: update)
Jump to navigationJump to search

Template:Graphics Gallery

Graphics Gallery

This gallery is to show the designs can be created from Lazarus and drawing tools, like BGRABitmap.

Gradient Graphics

Description: Shows how to create buttons and gradients with and without transparency in Lazarus using BGRABitmap and an enhanced version of Double Gradient that supports alpha.

Notes: Tested on Win32. Download Includes used version of BGRABitmap & DoubleGradient. Tested on Linux with Kubuntu and Qt, work fine

Win32:

gdgfx.png

Kubuntu 10.04 with Qt:

gdgfx qt.png

Top-Left: 'like flash player setup button' / Top-Right: 'like win7 explorer toolbar' / Bottom: double gradient with alpha / Background: same as bottom.

Download: gdgfx.7z (60.01 KB)

Flash Player Button

Add a new TPaintBox, set 'btn1' as name. Go OnPaint event and add this code:

<delphi>var

 tempbmp1, tempbmp2: TBGRABitmap;

begin

 // Background Gradient
 tempbmp1:=TBGRABitmap.Create(btn1.Width,btn1.Height,BGRA(104,104,104,255));
 tempbmp1.Canvas.GradientFill(Rect(1,Round(btn1.Height*0.25),btn1.Width-1,btn1.Height-1),$686868,$404040,gdVertical);
 // Frame Border
 tempbmp1.Canvas.Brush.Color:=$181818;
 tempbmp1.Canvas.FrameRect(btn1.ClientRect);
 // Light Gradient
 tempbmp2:=TBGRABitmap.Create(btn1.Width,btn1.Height,BGRA(0,0,0,0));
 tempbmp2.GradientFill(1,1,btn1.Width-1,btn1.Height-1,
 BGRA(255,255,255,34),
 BGRA(255,255,255,10), gtLinear,
 PointF(btn1.ClientRect.Right,btn1.ClientRect.Top),
 PointF(btn1.ClientRect.Right,btn1.ClientRect.Bottom),
 dmDrawWithTransparency,True,False);
 tempbmp2.AlphaFillRect(2,2,btn1.Width-2,btn1.Height-2,0);
 // Merge Bitmaps
 //tempbmp1.Canvas.Draw(0,0,tempbmp2.Bitmap);
 tempbmp2.Draw(tempbmp1.Canvas,0,0,False);
 // Paint in Canvas
 //btn1.Canvas.Draw(0,0,tempbmp1.Bitmap);
 tempbmp1.Draw(btn1.Canvas,0,0,False);
 // Free Bitmaps
 tempbmp1.Free;
 tempbmp2.Free;

end;</delphi>

Windows 7 Explorer Toolbar

Add a new TPaintBox, set 'btn2' as name. Go OnPaint event and add this code:

<delphi>var

 backBmp, lightBmp: TBGRABitmap;
 gradBmp: TBitmap;

begin

 // Background Gradient
 gradBmp := DoubleGradientFill(
             btn2.ClientRect,
             $FFFAF5,$FAF0E6,
             $F4E6DC,$F7E9DD,
             gdVertical,gdVertical,gdVertical,0.5);
 // Use as background
 backBmp := TBGRABitmap.Create(gradBmp);
 gradBmp.Free;
 // Light Gradient
 lightBmp:= TBGRABitmap.Create(btn2.Width,btn2.Height,BGRA(0,0,0,0));
 lightBmp.Rectangle(0,0,btn2.Width,btn2.Height-2,
    BGRA(255,255,255,100),
    dmSet);
 lightBmp.SetHorizLine(0,btn2.Height-1,btn2.Width-1,BGRA(160,175,195,255));
 lightBmp.SetHorizLine(0,btn2.Height-2,btn2.Width-1,BGRA(205,218,234,255));
 // Merge Bitmaps
 backBmp.PutImage(0,0,lightBmp,dmDrawWithTransparency);
 lightBmp.Free;
 // Paint in Canvas
 backBmp.Draw(btn2.Canvas,0,0,True);
 backBmp.Free;

end;</delphi>

Double Gradient with Alpha

Add a new TPaintBox, set 'btn3' as name. Go OnPaint event and add this code:

<delphi>var

 myBitmap: TBGRABitmap;

begin

 myBitmap:= DoubleGradientAlphaFill(
 btn3.ClientRect,
 BGRA(0,0,0,100),BGRA(255,255,255,100),
 BGRA(100,100,100,100),BGRA(150,150,150,100),
 gdVertical,gdVertical,gdVertical,0.5);
 //btn3.Canvas.Draw(0,0,myBitmap.Bitmap);
 myBitmap.Draw(btn3.Canvas,0,0,False);
 myBitmap.Free;

end;</delphi>

Progress Bars

A progress bar is a component in a graphical user interface used to convey the progress of a task, such as a download or file transfer.

Flash Player Progress Bar

flprogressbar.png 'Like flash player setup progress bar'. Requires BGRABitmap and Double Gradient with Alpha.

Notes: Tested on Win32, Kubuntu 10.04 with GTK and Qt.

Add a new TPaintBox, set 'progressbar' as name. Go OnPaint event and add this code:

<delphi>var

 ABitmap, ABitmap2: TBGRABitmap; ARect: TRect;

begin

 // Initialization
 // Self.Color:=$004D4D4D;
 ABitmap:=TBGRABitmap.Create(progressbar.Width,progressbar.Height);
 ARect:=progressbar.ClientRect;
 // Percent of Progress
 ARect.Right:=Round(ABitmap.Width*0.75);
 // Background Gradient
 ABitmap.Canvas.GradientFill(progressbar.ClientRect,$303030,$323232,gdVertical);
 // Background Border
 ABitmap.Rectangle(0,0,ABitmap.Width,ABitmap.Height,BGRA(28,28,28,255),dmSet);
 // Progress Gradient
 ABitmap2:=DoubleGradientAlphaFill(
 ARect,
 BGRA(102,163,226,255),BGRA(83,135,186,255),
 BGRA(75,121,175,255),BGRA(56,93,135,255),
 gdVertical,gdVertical,gdVertical,0.5);
 // Progress Border
 ABitmap2.Rectangle(0,0,ARect.Right,ARect.Bottom,BGRA(28,28,28,255),dmSet);
 // Progress Light
 ABitmap2.Rectangle(1,1,ARect.Right-1,ARect.Bottom-1,BGRA(153,212,255,100),dmDrawWithTransparency);
 // Merge Bitmaps
 //ABitmap.Canvas.Draw(0,0,ABitmap2.Bitmap);
 ABitmap2.Draw(ABitmap.Canvas,0,0,False);
 // Draw Bitmap
 //progressbar.Canvas.Draw(0,0,ABitmap.Bitmap);
 ABitmap.Draw(progressbar.Canvas,0,0,False);
 // Free Bitmap
 ABitmap.Free;
 ABitmap2.Free;

end;</delphi>

You can change the 'Percent' of progress changing this line:

<delphi> // Percent of Progress - 33%

 ARect.Right:=Round(ABitmap.Width*0.33);
 // Percent of Progress - 90%
 ARect.Right:=Round(ABitmap.Width*0.90);</delphi>

About Dialogs

"The Generic application includes an About dialog box. Every application should include an About dialog box. The dialog box displays such information as the application's name and copyright information." Definition

Lazarus About

Description: Lazarus-like about dialog. lazlogo.png

Requires BGRABitmap.

  • ToDO:
    • Smooth text
    • Bitmap with leopard
    • Paw

Add a new TPaintBox, and set Width = 450, set Height = 300, set Name = 'logo'

(you can set another width and height, for example 900 x 600)

Go OnPaint event and add this code:

<delphi>procedure TForm1.logoPaint(Sender: TObject); var

 bmp, bmp2, bmp3, bmp4, bmp5: TBGRABitmap;
 rct: TRect;
 procedure DrawBackground;
 begin
   // Background
   bmp:= TBGRABitmap.Create(logo.Width,logo.Height,BGRAWhite);
   rct:= logo.ClientRect;
   rct.Left:= 1;
   rct.Top:= 1;
   rct.Right:= logo.Width-1;
   rct.Bottom:= Round(logo.Height*0.935);
   //radial
   bmp.GradientFill(
   rct.Left,rct.Top,rct.Right,rct.Bottom,
   BGRA(117,172,224,255),
   BGRA(49,74,132,255),
   gtRadial,
   PointF(Round(rct.Right*0.85),Round(rct.Bottom*0.50)),
   PointF(Round(rct.Left),Round(rct.Bottom)),
   dmSet);
 end;
 procedure DrawEclipse;
 begin
   bmp2:= TBGRABitmap.Create(rct.Right,rct.Bottom);
   bmp2.FillEllipseAntialias(
   Round(rct.Right*0.57),
   Round(rct.Bottom*0.58),
   Round(rct.Right*0.31),
   Round(rct.Bottom*0.53),
   BGRA(255,255,255,30));
   bmp2.EraseEllipseAntialias(
   Round(rct.Right*0.585),
   Round(rct.Bottom*0.58),
   Round(rct.Right*0.31*0.88),
   Round(rct.Bottom*0.53*0.88),
    255);
 end;
 procedure ThinCircleAndFrame;
 var mask: TBGRABitmap;
 begin
   bmp5:= TBGRABitmap.Create(rct.Right,rct.Bottom);
   bmp5.GradientFill(0,0,bmp5.width,bmp5.Height,
   BGRA(117,172,224,255),
   BGRA(49,74,132,255),
   gtLinear,
   PointF(Round(rct.Right*0.5),Round(rct.Bottom*0.50)),
   PointF(Round(rct.Right),Round(rct.Bottom)),
   dmSet);
   mask:= TBGRABitmap.Create(rct.Right,rct.Bottom, BGRABlack);
   mask.EllipseAntialias(
     Round(rct.Right*0.53),
     Round(rct.Bottom*0.50),
     Round(rct.Right*0.40),
     Round(rct.Bottom*0.65),
     BGRA(255,255,255,192),
     0.6);
   bmp5.ApplyMask(mask);
   mask.free;
   // Frame
   bmp3:= TBGRABitmap.Create(logo.Width,logo.Height);
   bmp3.Rectangle(logo.ClientRect,BGRABlack,BGRA(0,0,0,0),dmDrawWithTransparency);
   bmp3.DrawLine(1,logo.Height-2,logo.Width-2,logo.Height-2,BGRA(0,0,0,75),True);
   bmp3.DrawLine(logo.Width-2,1,logo.Width-2,logo.Height-2,BGRA(0,0,0,75),True);
 end;
 procedure DrawText;
 begin
   // Text
   bmp4:= TBGRABitmap.Create(logo.Width,logo.Height);
   // 'Free Pascal'
   bmp5.FontStyle:=[fsBold];
   bmp5.FontHeight:=Round(logo.Height*0.065);
   bmp5.TextOut(Round(logo.Width*0.15),Round(logo.Height*0.045),'Free Pascal',BGRAWhite);
   // 'Lazarus'
   bmp5.FontHeight:=Round(logo.Height*0.18);
   bmp5.TextOut(Round(logo.Width*0.05),Round(logo.Height*0.07),'Lazarus',BGRAWhite);
   // 'Project'
   bmp4.FontHeight:=Round(logo.Height*0.052);
   bmp4.TextOut(Round(logo.Width*0.20),Round(logo.Height*0.27),'Project',BGRAWhite);
   // 'Write Once'
   bmp4.FontHeight:=Round(logo.Height*0.07);
   bmp4.TextOut(Round(logo.Width*0.02),Round(logo.Height*0.57),'Write Once',BGRA(255,255,255,100));
   bmp4.GradientFill(Round(logo.Width*0.02),Round(logo.Height*0.66),
                     Round(logo.Width*0.46),Round(logo.Height*0.66)+1,
                     BGRA(255,255,255,20),BGRA(0,0,0,30),gtLinear,
                     PointF(logo.Width*0.22,0),PointF(logo.Width*0.48,0),
                     dmDrawWithTransparency);
   // 'Compile Anywhere'
   bmp4.TextOut(Round(logo.Width*0.26),Round(logo.Height*0.8),'Compile Anywhere',BGRA(255,255,255,100));
   bmp4.GradientFill(Round(logo.Width*0.26),Round(logo.Height*0.89),
                     Round(logo.Width*0.70),Round(logo.Height*0.89)+1,
                     BGRA(255,255,255,20),BGRA(0,0,0,50),gtLinear,
                     PointF(logo.Width*0.26,0),PointF(logo.Width*0.70,0),
                     dmDrawWithTransparency);
 end;
 procedure RedRectangle;
 var
   rct2: TRect;
   x1,x2: integer;
 begin
   // Red Alpha Gradient
   rct2:= logo.ClientRect;
   rct2.Left:= Round(rct2.Right*0.06);
   rct2.Top:= Round(rct2.Bottom*0.27);
   rct2.Right:= Round(rct2.Right*0.48);
   rct2.Bottom:= Round(rct2.Bottom*0.337);
   x1 := rct2.Left;
   x2 := (rct2.Left*3+rct2.right) div 4;
   bmp3.GradientFill(x1,rct2.top,x2,rct2.Bottom,BGRAPixelTransparent,BGRA(255,0,0,255),gtLinear,
     PointF(x1,rct2.Top),PointF(x2,rct2.Top),dmDrawWithTransparency);
   x1 := x2;
   x2 := (rct2.Left+rct2.right*3) div 4;
   bmp3.GradientFill(x1,rct2.top,x2,rct2.Bottom,BGRA(160,0,0,180),BGRA(255,0,0,255),gtReflected,
     PointF((x1+x2) div 2,rct2.Top),PointF(x2,rct2.Top),dmDrawWithTransparency);
   x1 := x2;
   x2 := rct2.right;
   bmp3.GradientFill(x1,rct2.top,x2,rct2.Bottom,BGRA(255,0,0,255),BGRAPixelTransparent,gtLinear,
     PointF(x1,rct2.Top),PointF(x2,rct2.Top),dmDrawWithTransparency);
 end;

begin

 DrawBackground;
 DrawEclipse;
 ThinCircleAndFrame;
 DrawText;
 RedRectangle;
 // Merge Bitmaps
 bmp.PutImage(0,0,bmp2,dmDrawWithTransparency);
 bmp.PutImage(0,0,bmp3,dmDrawWithTransparency);
 bmp.PutImage(0,0,bmp4,dmDrawWithTransparency);
 bmp.PutImage(0,0,bmp5,dmDrawWithTransparency);
 // Draw in Canvas
 bmp.Draw(logo.Canvas,0,0,True);
 // Free Bitmaps
 bmp.Free;
 bmp2.Free;
 bmp3.Free;
 bmp4.Free;
 bmp5.Free;

end; </delphi>