VFP-X GDI+ code samples for "Recreating One Note Tabs in VFP9" from Bernard

2007-oct-23 - Updated, based on "BMPs with transparent backgrounds"

Now Bernard Bout is owing me 2 blog posts :-))
Below are some pictures from Bernard Bout, showing some very cool forms that he created. To ease his job, I'll show how to create on the fly the image files that he uses to create these examples, using the new classes from the gdiplus-x project, available for download at codeplex.

More information can be obtained in Bernard's blog post:"Recreating One Note Tabs in VFP9"





sample 1: on_bigtab

target image enlarged 8 times :



target image in original size :



** creates an image on_bigtab.png to be used in the "one note tabs"
** example from Bernard bout
** - a 112x20 pixel image, with an irregular polygon with a blue
** border and filled with a gradient orange color

do locfile("system.app")

* define the colors to be used
local lnrgbstartgradclr, lnrgbendgradclr
lnrgbstartgradclr = rgb(253,233,218) && light orange
lnrgbendgradclr = rgb(247,182,131) && orange
lnrgbborderclr = rgb(59,97,156) && dark blue

with _screen.system.drawing
local lobitmap as xfcbitmap
local logfx as xfcgraphics
local logradbrush as xfclineargradientbrush
local lopen as xfcpen
local lorect as xfcrectangle

* create a new 112x20 bitmap in the default pixelformat - 32bppargb
lobitmap = .bitmap.new(112,20, 0, .imaging.pixelformat.format24bpprgb)

* create a graphics object to be able to draw in the bitmap
logfx = .graphics.fromimage(lobitmap)
logfx.clear(.color.white) && white

* create a rectangle for the linear gradient brush
lorect = .rectangle.new(0,0,112,19) && size of bitmap

* create a linear gradient brush
logradbrush = .drawing2d.lineargradientbrush.new(lorect,;
.color.fromrgb(lnrgbstartgradclr), .color.fromrgb(lnrgbendgradclr),1)

dimension lapoints(6)
lapoints(1) = .point.new(0,20)
lapoints(2) = .point.new(17,4)
lapoints(3) = .point.new(21,2)
lapoints(4) = .point.new(109,2)
lapoints(5) = .point.new(110,4)
lapoints(6) = .point.new(110,20)

* fill the polygon with gradient brush
logfx.fillpolygon(logradbrush, @lapoints)

* create a blue pen object to draw border
lopen = .pen.new(.color.fromrgb(lnrgbborderclr),1)

* draws the blue border
lapoints(1) = .point.new(0,19)
lapoints(2) = .point.new(17,2)
lapoints(3) = .point.new(22,0)
lapoints(4) = .point.new(109,0)
lapoints(5) = .point.new(111,2)
lapoints(6) = .point.new(111,18)

logfx.drawlines(lopen, @lapoints)

* draw bottom-right pixels
lobitmap.setpixel(111,19,.color.fromrgb(lnrgbendgradclr))
lobitmap.setpixel(110,19,.color.fromrgb(lnrgbendgradclr))

* save the image
lobitmap.save("c:\on_bigtab.png", .imaging.imageformat.png)
endwith

 

 

sample 2: on_smalltab

target image enlarged 8 times :



target image in original size :



 

** creates an image on_smalltab.png to be used in the "one note tabs"
** example from Bernard bout
** - a 16x8 pixel image, with an irregular polygon with a blue border
** and filled with a gradient orange color

do locfile("system.app")

* define the colors to be used
local lnrgbstartgradclr, lnrgbendgradclr
lnrgbstartgradclr = rgb(255,232,197) && light orange
lnrgbendgradclr = rgb(255,179,15) && orange
lnrgbborderclr = rgb(26,57,86) && dark blue

with _screen.system.drawing
local lobitmap as xfcbitmap
local logfx as xfcgraphics
local logradbrush as xfclineargradientbrush
local lopen as xfcpen
local lorect as xfcrectangle

* create a new 16x8 bitmap in the default pixelformat - 32bppargb
lobitmap = .bitmap.new(16,8,0, .imaging.pixelformat.format24bpprgb)

* create a graphics object to be able to draw in the bitmap
logfx = .graphics.fromimage(lobitmap)
logfx.clear(.color.fromrgb(rgb(255,255,255))) && white

* create a rectangle for the linear gradient brush
lorect = .rectangle.new(0,0,16,8) && size of bitmap

* create a linear gradient brush
logradbrush = .drawing2d.lineargradientbrush.new(lorect,;
.color.fromrgb(lnrgbstartgradclr), .color.fromrgb(lnrgbendgradclr),1)

dimension lapoints(5)
lapoints(1) = .point.new(0,7)
lapoints(2) = .point.new(0,2)
lapoints(3) = .point.new(2,0)
lapoints(4) = .point.new(8,0)
lapoints(5) = .point.new(15,7)

* fill the polygon with gradient brush
logfx.fillpolygon(logradbrush, @lapoints)

* create a blue pen object to draw border
lopen = .pen.new(.color.fromrgb(lnrgbborderclr),1)

* draws the polygon
logfx.drawpolygon(lopen, @lapoints)

* save the image
lobitmap.save("c:\on_smalltab.png", .imaging.imageformat.png)
endwith

 

 

sample 3: on_smallbutton

original image enlarged 8 times: target image enlarged 8 times :



original image in normal size: target image in original size :



 

** loads an image and draws a customized rectangle using a
** lineargradientbrush; creates image file on_smallbutton.png
** to be used in the "one note tabs" example from Bernard bout
** - a 112x20 pixel image, with an irregular polygon with a blue
** border and filled with a gradient orange color

do locfile("system.app")

* define the colors to be used
local lnrgbstartgradclr, lnrgbendgradclr
lnrgbstartgradclr = rgb(253,232,197) && light orange
lnrgbendgradclr = rgb(255,179,15) && orange

with _screen.system.drawing
local lobitmap as xfcbitmap
local logfx as xfcgraphics
local logradbrush as xfclineargradientbrush
local lorect as xfcrectangle

* load the image file
lobitmap = .image.fromfile(getpict())

* create a graphics object to be able to draw in the bitmap
logfx = .graphics.fromimage(lobitmap)

* create a rectangle for the linear gradient brush
lorect = .rectangle.new(0,0,12,18)

* create a linear gradient brush
logradbrush = .drawing2d.lineargradientbrush.new(lorect,;
.color.fromrgb(lnrgbstartgradclr), .color.fromrgb(lnrgbendgradclr),1)

* fill the polygon with gradient brush
logfx.fillrectangle(logradbrush, 3, 1, 12, 17)

* save the image
lobitmap.save("c:\on_smallbutton.png", .imaging.imageformat.png)
endwith

 

Again, let's wait for Bernard's next appearances !

New VFP-X GDI+ classes

In the last weeks I've been doing some extensive tests and creating some examples using the new VFP-X GdiplusX library. These classes are terrific, completely insane. this library is already making my life with gdi+ a lot easier.

The more I use it, the more I like it. I'm really having fun.

As Craig Boyd said in one of his blog posts: "the GdiplusX library is a pure Visual FoxPro reproduction of the drawing related namespaces in .NET. We've coded well over 40,000 lines of vfp code and the library consists of 80+ classes now. at nearly 95% complete. It is safe to say that no other library on the planet gives visual foxpro developers the functionality and power that this one does when working with gdi+. " - That's totally true.

 

If you're planning to start a new project and will need to use GDI+, or are interested to help in the project, coding, testing making suggestions, I strongly recommend to enter the codeplex vfp-x page, select the "releases" tab, and download the most recent stable version available.

Start running the file demo.prg in the samples folder, and you'll have a good idea of the power of the class.

By the way, the VFP-X project now has a new logo too !

From now on, I'll use this space to show some examples using these classes. You may use the comments space of this blog to make this kind of requests.

Code samples

My first sample comes to attend Bernard Bout, to create an image to be used in his "blueglass" example. You can obtain more information at this link: http://weblogs.foxite.com/bernardbout/archive/2006/06/15/1838.aspx

Create a 2x2 pixel image, with a blue background and a magenta pixel at (0,0)

Here's the code:

** creates an image to be used in the "blueglass" example 
** from Bernard Bout 
** 2x2 pixel image, with blue background and a magenta pixel at (0,0)        

LOCAL lnRgbBackgClr, lnRgbPointClr
DO LOCFILE("System.app")

* define the colors to be used 
m.lnRgbPointClr = RGB(0,0,255) && blue
m.lnRgbBackgClr = RGB(255,0,255) && magenta

WITH _SCREEN.SYSTEM.Drawing
    LOCAL loBitmap AS xfcBitmap
    LOCAL loColor AS xfcColor
    LOCAL loGfx AS xfcGraphics

    * create a new 2x2 bitmap in the default pixelformat - 32bppargb 
    m.loBitmap = .BITMAP.New(2,2)

    * create a graphics object to be able to use the clear function, 
    * that will fill all the bitmap with the desired color. 
    * for this case that is not fundamental, because the bitmap is 
    * small, so we could calls "setpixel" 4 times to cover the bitmap. 
    m.loGfx = .Graphics.FromImage(m.loBitmap)
    m.loGfx.CLEAR(.COLOR.fromrgb(m.lnRgbBackgClr))

    * draw the pixel 
    m.loBitmap.setpixel(0,0, .COLOR.fromrgb(m.lnRgbPointClr))

    * save the image as png 
    m.loBitmap.SAVE("c:\blueglass.png", .Imaging.ImageFormat.Png)
ENDWITH

And here's the image created in a bigger size.