Difference between revisions of "Sample Graphics"
Line 104: | Line 104: | ||
myBitmap.Free; | myBitmap.Free; | ||
end;</delphi> | 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 ==== | ||
+ | [[Image:flprogressbar.png]] | ||
+ | 'Like flash player setup progress bar'. Requires [[BGRABitmap]] and [[Double Gradient]] with Alpha. | ||
+ | |||
+ | 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); | ||
+ | |||
+ | // Draw Bitmap | ||
+ | progressbar.Canvas.Draw(0,0,ABitmap.Bitmap); | ||
+ | |||
+ | // 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> |
Revision as of 18:29, 14 March 2011
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.
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);
// Paint in Canvas btn1.Canvas.Draw(0,0,tempbmp1.Bitmap);
// 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.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
'Like flash player setup progress bar'. Requires BGRABitmap and Double Gradient with Alpha.
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);
// Draw Bitmap progressbar.Canvas.Draw(0,0,ABitmap.Bitmap);
// 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>