Sample Graphics

From Lazarus wiki
Revision as of 17:09, 16 March 2011 by Lainz (talk | contribs)
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.

gdgfx

Name: gdgfx 'Gradient Graphics'

Author: Lainz

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

lazlogo.png

'like lazarus about dialog'. Requires BGRABitmap.

  • ToDO:
    • Smooth text
    • Add 'Project' text down 'Lazarus'
    • Add red alpha gradient under 'Project'
    • Add ellipse & fill ellipse
    • Add footprint
    • Add cheetah

When finished update the file lazlogo.png.

Add a new TPaintBox, set Width = 450, set Height = 300, set 'logo' as name,

Go OnPaint event and add this code:

<delphi>var

 bmp, bmp2, bmp3, bmp4: TBGRABitmap;
 rct: TRect;

begin

 // Rectangle Background
 bmp:= TBGRABitmap.Create(logo.Width,logo.Height);
 bmp.Rectangle(logo.ClientRect,BGRABlack,BGRAWhite,dmSet);
 // Radial Background
 rct:= logo.ClientRect;
 rct.Left:= rct.Left+1;
 rct.Top:= rct.Top+1;
 rct.Right:= rct.Right-1;
 rct.Bottom:= Round(rct.Bottom*0.94);
 bmp2:= TBGRABitmap.Create(rct.Right,rct.Bottom);
 bmp2.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.75),Round(rct.Bottom*0.50)),
 PointF(Round(rct.Left),Round(rct.Bottom)),
 dmSet);
 // Internal Shadow
 bmp3:= TBGRABitmap.Create(logo.Width,logo.Height);
 bmp3.DrawLine(1,logo.Height-2,logo.Width-2,logo.Height-2,BGRA(0,0,0,25),True);
 bmp3.DrawLine(logo.Width-2,1,logo.Width-2,logo.Height-2,BGRA(0,0,0,25),True);
 // Text
 bmp4:= TBGRABitmap.Create(logo.Width,logo.Height);
 // 'Free Pascal'
 bmp4.FontStyle:=[fsBold];
 bmp4.FontHeight:=Round(logo.Height*0.06);
 bmp4.TextOut(Round(logo.Width*0.15),Round(logo.Height*0.025),'Free Pascal',BGRAWhite);
 // 'Lazarus'
 bmp4.FontHeight:=Round(logo.Height*0.18);
 bmp4.TextOut(Round(logo.Width*0.05),Round(logo.Height*0.05),'Lazarus',BGRAWhite);
 // 'Write Once'
 bmp4.FontHeight:=Round(logo.Height*0.07);
 bmp4.TextOut(Round(logo.Width*0.05),Round(logo.Height*0.6),'Write Once',BGRA(255,255,255,100));
 // 'Compile Anywhere'
 bmp4.TextOut(Round(logo.Width*0.3),Round(logo.Height*0.8),'Compile Anywhere',BGRA(255,255,255,100));
 // Merge Bitmaps
 bmp2.Draw(bmp.Canvas,0,0,True);
 bmp3.Draw(bmp.Canvas,0,0,False);
 bmp4.Draw(bmp.Canvas,0,0,False);
 // Draw in Canvas
 bmp.Draw(logo.Canvas,0,0,True);
 // Free Bitmaps
 bmp.Free;
 bmp2.Free;
 bmp3.Free;
 bmp4.Free;

end;</delphi>