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 !