2006-06-22

Gradient Backgrounds in your forms with GDI+ Part2

In my previous post with the same title, I showed how to create vertical gradient backgrounds in forms. as commented by Malcolm Greene, that same technique can be used to VFP containers.

According to MSDN, "the lineargradientbrush class defines a brush that paints a color gradient in which the color changes evenly from the starting boundary line of the linear gradient brush to the ending boundary line of the linear gradient brush. the boundary lines of a linear gradient brush are two parallel straight lines. The color gradient is perpendicular to the boundary lines of the linear gradient brush, changing gradually across the stroke from the starting boundary line to the ending boundary line. The color gradient has one color at the starting boundary line and another color at the ending boundary line."

The main parameters to be passed to the LinearGradientBrush are:

  • point1 starting point of the gradient. the starting boundary line passes through the starting point.
  • point2 ending point of the gradient. the ending boundary line passes through the ending point.
  • color1 argb color at the starting boundary line of this linear gradient brush.
  • color2 argb color at the ending boundary line of this linear gradient brush.

In that case, i created a one pixel wide image, with the form height. then i created a linear gradientbrush, using coordinate (0,0) as point1, coordinate (0,thisform.height) as point2. Color1 was the argb of any selected color, and color2 was white(rgb(255,255,255)). Inside this narrow image, I have drawn a rectangle using the lineargradientbrush, and saved in bmp format. VFP's image object was responsible to "stretch" this narrow image to fit the width of the form. That technique permitted to have a small image file.

1000.107.1893.Vertical

Gdi+ provides horizontal, vertical, and diagonal linear gradients too ! So, using the same techniques, we can easily create other cool effects.

horizontal gradients

For horizontal, we need to pass as point1 and point2 two coordinates with the same "y". It is fundamental that the two points have the same second coordinate (y) to make the line connecting them horizontal.

1000.107.1894.Horizontal

diagonal gradients

For diagonal gradients, the two coordinates must create a diagonal line, like point (0,0) and point (50,50). This will create a diagonal line between those two points, starting from the top-left till the bottom-right edge of the form, like in the form below:

1000.107.1895.Diagonal

If we change the coordinates to coordinates (0,50) and (50,0), the diagonal line will end in the top edge of the form:

1000.107.1911.diagonal41

So, in our case, I just did this modification in the original code from the previous post:


lngradpixels = 100 && width of the gradient line
lngradmode = 4 && ranges from 1 to 4
do case
case
lngradmode = 1 && vertical
   x1 = 0
   y1 = 0
   x2 = 1
   y2 = lngradpixels

case lngradmode = 2 && horizontal
   x1 = 0
   y1 = 0
   x2 = lngradpixels
   y2 = 1

case lngradmode = 3 && diagonal topleft –> bottomright
   x1 = 0
   y1 = 0
   x2 = lngradpixels
   y2 = lngradpixels

case lngradmode = 4 && diagonal bottomleft –> topright
   x1 = 0
   y1 = lngradpixels
   x2 = lngradpixels
   y2 = 0

endcase

lnwidth = iif(lngradmode = 1, 1, lngradpixels)
lnheight = iif(lngradmode = 2, 1, lngradpixels)

The lineargradientbrush will be created using the coordinates (x1,y1) and (x2,y2). The image will have the size lnwidth, lnheight. The variable lngradpixels means the size in pixels of the image to be created. In the previous post, i used "thisform.height". After some tests, I've seen that using 60 pixels will create a good quality gradient to be expanded by the image object to fit the whole form.

So, create any form, and add the following codes to load and destroy events. change the value of the variable lngradmode to any value between 1 and 4, to see the form drawn with 4 types of gradients. also change lnGradPixels to 5, 20, and 60. don't forget to resize the form.

 

load event

local lcgradfile, lngradmode, lngradpixels, x1, y1, x2, y2, lnwidth, lnheight
lcgradfile = addbs(sys(2023))+sys(2015)+".bmp"
this.addproperty("ctempgradfile",lcgradfile)

lngradpixels = 60
lngradmode = 4
do case
case
lngradmode = 1 && vertical
   x1 = 0
   y1 = 0
   x2 = 1
   y2 = lngradpixels

case lngradmode = 2 && horizontal
   x1 = 0
   y1 = 0
   x2 = lngradpixels
   y2 = 1

case lngradmode = 3 && diagonal topleft –> bottomright
   x1 = 0
   y1 = 0
   x2 = lngradpixels
   y2 = lngradpixels

case lngradmode = 4 && diagonal bottomleft –> topright
   x1 = 0
   y1 = lngradpixels
   x2 = lngradpixels
   y2 = 0

endcase

lnwidth = iif(lngradmode = 1, 1, lngradpixels)
lnheight = iif(lngradmode = 2, 1, lngradpixels)

if file(lcgradfile)
   clear resources (lcgradfile)
endif

local lnrgbcolor1
lnrgbcolor1 = rgb(0,128,255) && blue

* create gradient image
set classlib to home() + "ffc/_gdiplus.vcx" additive

* create a colorobject and store argb color values to variables
local loclr as gpcolor of home() + "ffc/_gdiplus.vcx"
local lncolor1, lncolor2
loclr = createobject("gpcolor")
loclr.foxrgb = lnrgbcolor1
lncolor1 = loclr.argb
loclr.foxrgb = rgb(255,255,255) && white
lncolor2 = loclr.argb

* create a bitmap
local lobmp as gpbitmap of home() + "ffc/_gdiplus.vcx"
lobmp = createobject("gpbitmap")
lobmp.create(lnwidth, lnheight)

* get a bitmab graphics object
local logfx as gpgraphics of home() + "ffc/_gdiplus.vcx"
logfx = createobject("gpgraphics")
logfx.createfromimage(lobmp)

* declare api
declare long gdipcreatelinebrushi in gdiplus.dll ;
   string point1, string point2, ;
   long color1, long color2, ;
   long wrapmode, long @linegradient

* get a gradient brush
local lobrush as gpbrush of home() + "ffc/_gdiplus.vcx"
local hbrush && brush handle
hbrush = 0
=gdipcreatelinebrushi(bintoc(x1,"4rs")+bintoc(y1,"4rs"), ;
   bintoc(x2,"4rs")+bintoc(y2,"4rs"), ;
   lncolor1, lncolor2, 0, @hbrush)
lobrush = createobject("gpbrush")
lobrush.sethandle(hbrush, .t.)

* fill the bitmap with our gradient
logfx.fillrectangle(lobrush,0,0,lnwidth, lnheight)
lobmp.savetofile(lcgradfile,"image/bmp")

thisform.addobject("imgbackground","image")
with thisform.imgbackground
   .stretch = 2 && stretch
   .width = thisform.width
   .height = thisform.height
   .anchor = 15 && resize width and height

   .picture = lcgradfile
   * .pictureval = filetostr(lcgradfile)
   * .pictureval = loadpicture(lcgradfile)
   * erase (lcgradfile)

   .zorder(1)
   .visible = .t.
endwith

return

 

destroy event

with thisform
   if file
(.ctempgradfile)
      clear resources (.ctempgradfile)
      erase (.ctempgradfile)
   endif
endwith

A slight modification was the addiction of the zorder(1), to make sure the image object added is the first one, and staying in the back of all objects of the form. Thanks Aílsom !

Thanks to Malcolm Greene, the codes from resize event were removed, and substituted with .anchor = 15 && resize width and height. VFP9 brought so many cool features, and I must admit that i've tested just a few of them till this moment.

Malcolm also suggested sending the binaries from the image created to the pictureval property of the image object. I don't know why, but in some machines the picture appeared rotated in a 90 degree. Also, in Windows NT, the white part of the gradient was replaced with transparency. So, for this moment, I'm keeping the codes at the destroy event to make sure the image created is deleted from the disk.

I'm sure that there is a good solution for that, maybe someone can explain that to me ?

 

New Gdi+ classes

Craig and Bo added to the new library apart from all the GDI+ functions, some other classes, that will make the use of gdi+ really easy and, most important, very intuitive. There will be no more need to make direct API calls to Gdi+, manage object handles. The creation of images will become really intuitive.

One of the main addictions is the imagecanvas class. That's a subclass of the image native class, that was created to receive the drawn image. the advantage to use this class is that it renders graphics super fast (according to Bo and Craig about up to 30 times faster than saving an image to disk and loading to an image object). There will be no disk access, once all the image is manipulated directly from the memory. The user will have only to put the codes to draw the image in the "beforedraw" method of the object and that's all.

In the case of gradient backgrounds of forms, we will have just to add the "imagecanvas" object, and in the beforedraw method of this object put this code. only 5 lines !!! Thanks to Craig Boyd for sending this sample to me.

 

beforedraw event

local lobrush as xfclineargradientbrush
with _screen.system.drawing
   lobrush = .drawing2d.lineargradientbrush.new(this.rectangle,;
   .color.fromrgb(0,128,255), .color.white,;
   .drawing2d.lineargradientmode.forwarddiagonal)
   this.ogfx.fillrectangle(lobrush, this.rectangle)
endwith

 

How do you fill using these classes ?

There are many more cool effects to create with lineargradientbrushes. By default, the color in a linear gradient changes uniformly. However, it is possible to customize a linear gradient so that the color changes in a non-uniform fashion, creating gradients using more than two colors.

From now on, i'll try to show these features using the new classes. I must confess that i don't feel smart to code in the way that I just presented in this post when I can replace more than 70 lines of code with 5 !

In the attached file I'm sending 2 forms. The first, gradient.scx creates a simple form, with codes in load and destroy events. Try also the form gradient2.scx, that will permit you to customize the gradient colors and directions on the fly.

1000.107.1908.imagem1

7 comments:

  1. Super. Now if only you can show me how to gradient fill an irregular shape....bounded say by a black or other single color...


    Also is it possible to get a gradient fill for a rectangle :

    Colour2 -> Colour1 -> Colour2   ???


    Pretty please.

    ReplyDelete
  2. Tem como baixar algum download do exemplo citados?
    Check the download available in the "Attachments" (link direto para baixar os arquivos):

    ReplyDelete
  3. Cesar,

    Another super cool post. Thank you.


    Bernard,

    Maybe you can try Hatch values for an irregular shape - polygon filled with a bitmap.


    Vassilis Aggelakos

    ReplyDelete
  4. Hi Cesar!


    QUOTE: "I must confess that I don't feel smart to code in the way that I just presented in this post when I can substitute more than 70 lines of code with 5"


    In the US there's a story that goes something like this:


    "A refinery was unexpectedly shut down and management was in a panic. Management called in an internationally known consultant who arrived at the site, strolled through the gate, asked for a hammer and proceeded to hit valve #6B on the third deck of the catalytic cracker. Suddenly the refinery came to life and product was flowing again. When management got the bill for $10,000 they protested, "But you only spent 5 minutes at the site and just hit a valve with a hammer. Why did you charge so much?" The consultant responded, " I only charged you $25 to hit the valve, the rest was for knowing what to hit."


    You are the VFP communty's GDI hammer! :)


    Thank you for another great article!


    Malcolm


    PS: Oh yeah, what Bernard Bout said, too :)

    ReplyDelete
  5. Héctor Lizarraga RoblesAugust 15, 2006 at 5:17 PM

    Superb!!! The effect is excelent and the time to create the bmp is minimal.

    I´m working with forms that have a scrollbar and I notice that the gradient does not show in the hided-not scrolled part of the form. How can this be solved?

    Great work, thanks Cesar!
    Thanks for the kind words, I'm glad to know you liked it.
    I didn't try it yet, but maybe you could try making your image object bigger, to occupy the whole form width ???

    ReplyDelete
  6. man..that's incredible... sorry about my so bad english
    but... y just see the gdi+ in action on forms... tell me... can i use that on a... i don't know... shape or image... o something?... please... i need this information... because i'm working in my university tesis... and i wanna use it... thanks... your ideas are great!!!
    From Asuncion - Paraguay...
    Guille
    Hola Guille,
    Yes, you can apply gradients on any object. That may be a form, a container, a commandbutton, picture. What exactly are you triyng to do?
    Saludos
    Cesar

    ReplyDelete
  7. Versión en Español de este artículo en / Spanish version at http://www.portalfox.com/article.php?sid=2251

    ReplyDelete