[Wiki] Double Gradient article

[lainz]

Go and read it:
http://wiki.lazarus.freepascal.org/Double_Gradient / http://wiki.lazarus.freepascal.org/Gradient_Filler
Double Gradient now has both 'Double Gradient' and 'nGradient', the 'OOGradient' in a separated article 'Gradient Filler'.

Most operating system UI elements are skinned with double gradients (well I can ensure Windows 7) like toolbars - explorer toolbar -, menu backgrounds, explorer statusbar, buttons, combobox and many other components (of course with double gradients and rounded shapes ).

Use 'DoubleGradientFill' procedure to make double gradients. A double gradient have 2 gradients in a rect, you can set color for each one and set individually the gradient direction and the graphic direction (horizontal and vertical), also the relative position betwen gradients (value from 0.00 to 1.00).

Example code:

var
  ABitmap: TBitmap;
begin
  ABitmap:=DoubleGradientFill(Self.ClientRect,clMedGray,clWhite,clSilver,clGray,gdVertical,gdVertical,gdVertical,0.50);
  Self.Canvas.Draw(0,0,ABitmap);
  ABitmap.Free

Easy isn't it.

[xenblaise]

Wow
nice post.


thanks

[asdf]

Go and read it:
http://wiki.lazarus.freepascal.org/Double_Gradient

Could/Should it be added to SVN forever  ?

[xenblaise]

nice picture man, feels great as a Lazarus user.

[mac.1]

Wow.
This Code is so cool thad i had to rewrite it.
Now you can use n Grandients 
I'm preparing a Demo, based on your Demo.
For those who can't wait:

Code: [Select]

function nGradientFill(ARect: TRect;APos: TGradientDirection; AGrandient: array of TnGradientInfo): TBitmap;
var
  i:integer;
  ABitmap: TBitmap; AnRect,OldRect: TRect;
begin
  ABitmap := TBitmap.Create;
  ABitmap.Width:=ARect.Right;
  ABitmap.Height:=ARect.Bottom;
  OldRect := ARect;
  if APos = gdVertical then OldRect.Bottom := ARect.Top
     else OldRect.Right := ARect.Left ;   // upside down...  in case of i = 0...

  for i := 0 to high(AGrandient) do
      begin
      AnRect:=OldRect;
      if APos = gdVertical then
         begin
         AnRect.Bottom:=Round((ARect.Bottom-ARect.Top) * AGrandient[i].endPercent + ARect.Top);
         AnRect.Top:=OldRect.Bottom;
         end
        else
         begin
         AnRect.Right:=Round((ARect.Right-ARect.Left) * AGrandient[i].endPercent + ARect.Left);
         AnRect.Left:=OldRect.Right;
         end;

      ABitmap.Canvas.GradientFill(AnRect,AGrandient[i].StartColor,AGrandient[i].StopColor,AGrandient[i].Direction);
      OldRect := AnRect;
      end;
Result:=ABitmap;
end;

Code: [Select]

  TnGradientInfo = record
    StartColor,StopColor:TColor;
    Direction: TGradientDirection;
    endPercent:single; // This is not the percent of the width, this is the percent of the end ob the rect- which means, if this value is 1 - the rect could be from 0.99 to 1 and need not be from 0 to 1
  end;     

PS: sorry for my bad english

[lainz]

Cool mac.1 finish the Demo and edit the wiki (post new screenshots), or create another article for nGradients.

My english isn't perfect too don't worry  

Edit: here is a weird result

Code: [Select]

var
  ABitmap: TBitmap; AGradInfo: array [0..4] of TnGradientInfo;
begin
  AGradInfo[0].Direction:=gdVertical;
  AGradInfo[0].endPercent:=0.50;
  AGradInfo[0].StartColor:=clBLack;
  AGradInfo[0].StopColor:=clWhite;

  AGradInfo[1].Direction:=gdVertical;
  AGradInfo[1].endPercent:=0.40;
  AGradInfo[1].StartColor:=clGray;
  AGradInfo[1].StopColor:=clNavy;

  AGradInfo[2].Direction:=gdHorizontal;
  AGradInfo[2].endPercent:=0.50;
  AGradInfo[2].StartColor:=clTeal;
  AGradInfo[2].StopColor:=clRed;

  AGradInfo[3].Direction:=gdVertical;
  AGradInfo[3].endPercent:=0.90;
  AGradInfo[3].StartColor:=clYellow;
  AGradInfo[3].StopColor:=clPurple;

  AGradInfo[4].Direction:=gdVertical;
  AGradInfo[4].endPercent:=1.00;
  AGradInfo[4].StartColor:=clPurple;
  AGradInfo[4].StopColor:=clBlack;

  ABitmap:=ngradient.nGradientFill(ClientRect,gdVertical,AGradInfo);
  Canvas.Draw(0,0,ABitmap);
  ABitmap.Free;

[xenblaise]

Oh, good, try to put a transparent button and a transparent listBOX   lol, its hard isn't it.

Ahm, Sorry for that, But even if you got the transparent buttons and transparent BOXes, still doesn't look good, it's fancy, you can't put that in a good application, only for demo's.


BUT it's better than nothing, so post the code now.

[starmate]

Hi everyone,

This is a really good job!

I trid to use this on TPanel but with no luck.
Do you guys have a clue on how to use it on TPanels?

Thanks in advance,

Jon

[xenblaise]

I also tried it in a Tpanel, didn't work out.
It's nice when tpanel is transparent to the form re-painted.

[mac.1]

Ok, here is Version 1.1
I changes some things:
Name to n Gradient Edit, just because it is not any more double...
I doesn't realy understand how to save configs - please corret it. Thanks
I comment the Copy-to-clipboard thing - to lazy to corret it...
i stopped the dpi thing because the editor doesn't look ok on my pc, remove "//" in Form.Create if you want to use it.
I changed the editor for arrays, i use a stringlist.  Double Click on StartColor /StopColor or Gradient for an Combobox / ColorDialog.
I paint on an Image.
The Image is not longer in the middle - i Had some problems, if you could fix it : great.
You can scale the Form.
I tried to seperate render and the rest...



2 Bugfixes: There where 2 codes , how looked loke this:  (Rect.Bottom) *37 and i corrected them to (Rect.Bottom - Rect.Top) * 37 + Rect.Top.
If Top and left was 0 there was no problem ...

Also i just changed the line
GradientPB.Canvas.Draw(0,0,ABitmap);   
to
Panel1.Canvas.Draw(0,0,ABitmap); 

doesn't look nice, but works... 


I run the jedi coe formator, just because i write

Code: [Select]

if True then
   begin
   inc(i);
   end;instead of

Code: [Select]

if True then begin
   inc(i);
end;so there a 2 files inside.

[lainz]

Wiki article updated 

like this one:
http://www.visionary-voyager.com.au/corel/photopaint/tips/custom_fountain_fills.htm

[eny]

Or you OO-ify it a bit so it's easier to re-use, something like:

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

1.   // Gradientfiller for the form background
2.   // It's a 50/50 scale so both gradients meet in the middle.
3.   gfPaint := TGradientFiller.Create(gdHorizontal);
4.   gfPaint.AddGradient(clYellow, clBlue, gdHorizontal, 50);
5.   gfPaint.AddGradient(clBlue, clGreen, gdHorizontal, 50);
6.   //...
7.   // Form paint:
8.   gfPaint.Draw(self.Canvas, self.ClientRect);
9.  

Couldn't resist 

[xenblaise]

Why are you guys attaching codes that are not running?
Attach a code to ran directly, not with errors.
Let as see it with no pain.

[eny]

Why are you guys attaching codes that are not running?

Include binaries for all platforms?
Just download, extract, open project in Lazarus and press F9...

[xenblaise]

Just download, extract, open project in Lazarus and press F9...

Errors, I would not say something, if it worked fine.
Whats on you not on me?  I think where both using Lazarus latest stable version.