VFP IMAGING

Change the shape of your pictures with GdiPlusX

cesarchalom — Wed, 01 Jul 2009 03:46:00 GMT

The samples below use the Graphics.SetClip function to draw shaped borders in your pictures.

The trick here is to use the CombineMode.XOR enumeration, that forces the drawing to the external part of the shape, like in the samples below.

Playing with the source image below:

Prerequisites
Visual FoxPro 9 and the GdiPlusX library from VFPX

Please make sure that you have the latest version, because this sample may be using some functions that were added or fixed recently.
http://www.codeplex.com/VFPX/Wiki/View.aspx?title=GDIPlusX&referringTitle=Home

Sample 1: Ellipse shape

Sample 2: Doughnut shape

DO LOCFILE("System.app")
WITH _Screen.System.Drawing
* Get an image file
LOCAL loBmp as xfcBitmap
loBmp = .Bitmap.FromFile(GETPICT())
* Create a Gfx object that will allow us to make the transformation
LOCAL loGfx as xfcGraphics
loGfx = .Graphics.FromImage(loBmp)
LOCAL lnWidth, lnHeight
lnWidth = loBmp.Width
lnHeight = loBmp.Height

* Create GraphicsPath object.
LOCAL loClipPath as xfcGraphicsPath
loClipPath = .Drawing2D.GraphicsPath.New()

* A Doughnut slice shape
loClipPath.AddEllipse(0, 0, lnWidth, lnHeight * 2)
loClipPath.AddEllipse(lnWidth / 4, lnHeight / 2, lnWidth/2, lnHeight * 4)

* Set clipping region to path.
* CombineMode enumeration
* http://msdn.microsoft.com/en-us/library/system.drawing.drawing2d.combinemode.aspx
* CombineMode.Xor - Two clipping regions are combined by taking only the areas
* enclosed by one or the other region, but not both.
loGfx.SetClip(loClipPath, ;
_Screen.System.Drawing.Drawing2D.CombineMode.Xor)
* Fill rectangle to demonstrate clipping region.
loGfx.FillRectangle( .Brushes.White, 0, 0, loBmp.Width, loBmp.Height)
* Save the image to the disk and show
loBmp.Save("Clipped.Jpg", "image/jpeg")
RUN /n Explorer.Exe Clipped.Jpg
ENDWITH

Sample 3: Star shape

DO LOCFILE("System.app")
WITH _Screen.System.Drawing
* Get an image file
LOCAL loBmp as xfcBitmap
loBmp = .Bitmap.FromFile(GETPICT())
* Create a Gfx object that will allow us to make the transformation
LOCAL loGfx as xfcGraphics
loGfx = .Graphics.FromImage(loBmp)
LOCAL lnWidth, lnHeight
lnWidth = loBmp.Width
lnHeight = loBmp.Height

* Create GraphicsPath object.
LOCAL loClipPath as xfcGraphicsPath
loClipPath = .Drawing2D.GraphicsPath.New()

* Source for the star drawing
* http://www.java2s.com/Code/VB/2D/GraphicsPathDrawwithFillModeWinding.htm
LOCAL lnRadius, lnPi, lnRadian72, n, lnEdges
lnRadius = lnHeight / 2
lnPi = 3.141592
lnEdges = 5
lnRadian72 = (lnPi * 4.0 ) / lnEdges
LOCAL laPoints(lnEdges)
FOR n = 1 TO lnEdges
laPoints(n) = .Point.New(;
+ lnRadius * SIN( n * lnRadian72 ) + lnRadius , ;
- lnRadius * COS( n * lnRadian72 ) + lnRadius )
ENDFOR
loClipPath.AddPolygon(@laPoints)
* Set the Clip Mode to Winding
* ClipMode enumeration
*http://msdn.microsoft.com/en-us/library/system.drawing.drawing2d.fillmode.aspx
loClipPath.FillMode = _Screen.System.Drawing.Drawing2D.FillMode.Winding

* Set clipping region to path.
* CombineMode enumeration
* http://msdn.microsoft.com/en-us/library/system.drawing.drawing2d.combinemode.aspx
* CombineMode.Xor - Two clipping regions are combined by taking only the areas
* enclosed by one or the other region, but not both.
loGfx.SetClip(loClipPath, ;
_Screen.System.Drawing.Drawing2D.CombineMode.Xor)
* Fill rectangle to demonstrate clipping region.
loGfx.FillRectangle( .Brushes.White, 0, 0, loBmp.Width, loBmp.Height)
* Save the image to the disk and show
loBmp.Save("Clipped.Jpg", "image/jpeg")
RUN /n Explorer.Exe Clipped.Jpg
ENDWITH

Notice that the only difference between the code samples is the shape definition !

Circular Gauge chart with GdiPlusX

cesarchalom — Fri, 24 Apr 2009 02:28:00 GMT

Drawing shapes with GdiPlusX is super easy, and we can very easilly transport this to solve some of our chart needs.

In this post I'm sending you a very primitive sample for creating Circular Gauge charts. Obviously I hope to apply the techniques shown here in FoxCharts. But FoxCharts is getting big, and I confess that learning from the methods in FoxCharts may not be easy for people that are not that familiar with GdiPlusX.

Please note that this is an unfinished sample. I'm posting it here to let people see that drawing is not that complicated. Just using some imagination, merging it with some geometrical thoughts, and voilá !

Download the Gauge sample, unzip and run TESTGAUGE.SCX ! I'm including the GdiPlusX sources to let everybody immediately run the samples.

Notice that you can control the colors of the background and pointer.

The pointer shape can be modified too. Play with all the spinners to modify the shape and size! And please tell me which you like most. I'll apreciate receiving some image samples with some desired gauge charts.

Below is the relevant code for the circular gauge drawing. You'll find it in the "BeforeDraw()" event of the ImageCanvas class. It extracts the information from the form controls, and it's very easy to adapt it to your needs.

LOCAL lnAngle, lnBaseW, lnBaseX, lnBaseY, lnTopW, lnHeightPercent, lnTopY
LOCAL lnType, lnPointClr, lnBackClr, lnTicks
lnTicks = Thisform.SpnTicks.Value
lnType = Thisform.OptShape.Value
lnAngle = Thisform.SpnAngle.Value
lnBaseW = Thisform.SpnBottomW.Value
lnTopW = Thisform.SpnTopW.Value
lnBaseX = This.Width/2 -lnBaseW/2
lnBaseY = This.Height/2
lnHeightPercent = Thisform.SpnHeight.Value / 100
lnTopY = lnBaseY - (lnBaseY * lnHeightPercent) + lnTopW / 2
lnPointClr = Thisform.ShpPointerColor.BackColor
lnBackClr = Thisform.ShpBackColor.BackColor
LOCAL loGfx as xfcGraphics
loGfx = This.oGfx

WITH _Screen.System.Drawing
LOCAL loBrush as xfcSolidBrush
loBrush = .SolidBrush.New(.Color.FromRGB(lnPointClr))

loGfx.Clear(.Color.FromRGB(Thisform.BackColor))

   * Create a Shape for the pointer
   LOCAL loPath as xfcGraphicsPath
   loPath = .Drawing2D.GraphicsPath.New()
   loPath.StartFigure()
   loGfx.FillEllipse(.SolidBrush.New(.Color.FromRGB(lnBackClr)), ;
         This.Rectangle)

   IF lnType = 1
      loPath.AddArc(lnBaseX, This.Height/2 -lnBaseW/2, lnBaseW, lnBaseW, 0, 180)
   ENDIF

   loPath.AddLine(lnBaseX, lnBaseY, This.Width/2 - lnTopW/2, lnTopY)
   IF lnType = 1
      LOCAL laPoints(3)
      laPoints(1) = .Point.New(This.Width/2 - lnTopW/2, lnTopY)
      laPoints(2) = .Point.New(This.Width/2 , lnTopY - lnTopW / 2)
      laPoints(3) = .Point.New(This.Width/2 + lnTopW/2, lnTopY)
      loPath.AddCurve(@laPoints)
   ENDIF

loPath.AddLine( This.Width/2 + lnTopW/2, lnTopY, lnBaseX + lnBaseW, lnBaseY)
loPath.CloseFigure()

   * Rotate the shape pointer
   loGfx.TranslateTransform(This.Width/2, This.Height/2)
   loGfx.RotateTransform(lnAngle)
   loGfx.TranslateTransform(- This.Width/2, - This.Height/2)

* Draw the pointer
loGfx.FillPath(loBrush, loPath)

* Restore the original Gfx rotation state
loGfx.ResetTransform()

IF lnTicks > 0
FOR lnAngle = 0 TO 360 STEP 360 / lnTicks

         * Rotate the Gfx
         loGfx.TranslateTransform(This.Width/2, This.Height/2)
         loGfx.RotateTransform(lnAngle)
         loGfx.TranslateTransform(- This.Width/2, - This.Height/2)

* Draw the ticks
loGfx.DrawLine(.Pens.Black, This.Width/2, 0, This.Width/2, 10)

         * Restore the original Gfx rotation state
         loGfx.ResetTransform()
      ENDFOR
   ENDIF

ENDWITH

Enjoy !!!

Download Gauge Prototype sample with GdiPlusX

Drawing Unicode texts with GdiPlusX

cesarchalom — Sun, 01 Mar 2009 11:58:00 GMT

We forgot to add to GdiPlusX a specific function to allow sending Unicodes directly, similar to the function DrawString.

But as you'll see below, it's really simple to adapt the original function and provide this possibility:

In the sample below you'll see the function "DrawStringW", that is just an adapted version from the original xfcGraphics.DrawString function.

It accepts the same parameters and overloads from the original function - the sole difference is the first parameter that was introduced - the Graphics object.

Another helper function - "HexToUnicode" was introduced. It converts a string containing Hex values separated by a space into the Unicode needed by GdiPlus.dll to draw the string.

Just run the script and you'll obtain a result similar to the one below:

Prerequisites
Visual FoxPro 9 and the GdiPlusX library from VFPX

DO LOCFILE("System.App")

LOCAL n, x, y, lnColor
LOCAL loBmp as xfcBitmap, loGfx as xfcGraphics, loFont as xfcFont
LOCAL loBrush as xfcSolidBrush
LOCAL laWords(9,2)
* Greek
laWords(1,1) = "Greek"
laWords(1,2) = "03B5 03B9 03C1 03AE 03BD 03B7"
* Korean
laWords(2,1) = "Korean"
laWords(2,2) = "D3C9 D654"
* Hebrew
laWords(3,1) = "Hebrew"
laWords(3,2) = "05E9 05DC 05D5 05DD"
* Bulgarian
laWords(4,1) = "Bulgarian"
laWords(4,2) = "043C 0438 0440"
* Arabic
laWords(5,1) = "Arabic"
laWords(5,2) = "0633 0644 0627 0645"
* Simplified Chinese
laWords(6,1) = "Chinese"
laWords(6,2) = "548C 5E73"
* Thai
laWords(7,1) = "Thai"
laWords(7,2) = "0E04 0E27 0E32 0E21 0E2A 0E07 0E1A"
* Russian
laWords(8,1) = "Russian"
laWords(8,2) = "043C 0438 0440"
* Japanese
laWords(9,1) = "Japanese"
laWords(9,2) = "5E73 548C"

WITH _Screen.System.Drawing
loFont = .Font.New("Tahoma", 18)
loBmp = .Bitmap.New(350,370)
loGfx = .Graphics.FromImage(loBmp)
loGfx.Clear(.Color.White)
loGfx.DrawString("Gdi+X Drawing Unicodes", loFont,;
   .Brushes.Black, 10,5)

FOR n = 1 TO 9
   y = n * 35
   x = 160

   lnColor = RGB(RAND() * 255, RAND() * 255, RAND() * 255)
   * Create a SolidBrush with randomic color
   loBrush = .SolidBrush.New(.Color.FromRGB(lnColor))

   * Draw the language name
   loGfx.DrawString(laWords(n,1), .Font.New("Tahoma", 10),;
         .Brushes.Black, 65, y + 5)

   * Draw the text in Unicodes
   =DrawStringW(loGfx, HexToUnicode(laWords(n,2)), loFont,;
         loBrush, x, y)
ENDFOR
loBmp.Save("TestUnicodes.Png", .Imaging.ImageFormat.Png)

ENDWITH

FUNCTION DrawStringW(toGfx, ;
   tcString, toFont AS xfcFont, toBrush AS xfcBrush, tnX, tnY ;
   , toFormat AS xfcStringFormat)
   *********** tcString, toFont AS xfcFont, toBrush AS xfcBrush, toPoint AS xfcPointF ;
   , toFormat AS xfcStringFormat
   *********** tcString, toFont AS xfcFont, toBrush AS xfcBrush, toRectangle AS xfcRectangleF ;
   , toFormat AS xfcStringFormat

LOCAL lqLayoutRect
LOCAL lnWidth, lnHeight, loPoint AS xfcPointF, loRect AS xfcRectangleF
LOCAL lhFormat
STORE 0 TO lnWidth, lnHeight
STORE NULL TO loPoint, loRect
m.lqLayoutRect = 0h00

** Handle overload parameters
DO CASE
CASE VARTYPE(tnX) = "N"

CASE VARTYPE(tnX) = "O" AND INLIST(tnX.BaseName,"Point","PointF")
   m.loPoint = m.tnX
   m.toFormat = m.tnY
   m.loPoint.GetExtent(@tnX, @tnY)

CASE VARTYPE(tnX) = "O" AND INLIST(tnX.BaseName,"Rectangle","RectangleF")
   m.loRect = m.tnX
   m.toFormat = m.tnY
   m.loRect.GetExtent(@tnX, @tnY, @lnWidth, @lnHeight)
ENDCASE

** Optional parameter
** The C++ classes show this parameter as NULL if not specified
IF VARTYPE(m.toFormat) = "O"
   m.lhFormat = m.toFormat.Handle
ELSE
   m.lhFormat = 0
ENDIF

m.lqLayoutRect = BINTOC(m.tnX,"F")+BINTOC(m.tnY,"F")+;
   BINTOC(m.lnWidth,"F")+BINTOC(m.lnHeight,"F")

=xfcGdipDrawString(toGfx.Handle, m.tcString+0h00, LENC(tcString)/2, ;
   m.toFont.Handle, @lqLayoutRect, m.lhFormat, m.toBrush.Handle)
ENDFUNC

FUNCTION HexToUnicode(tcHex)
   LOCAL n, lcHex, lcUnicode
   lcUnicode = SPACE(0)
   FOR n = 1 TO GETWORDCOUNT(tcHex, SPACE(1))
      lcHex = EVALUATE("0x" + GETWORDNUM(tcHex, n, SPACE(1)))
      lcUnicode = lcUnicode + BINTOC(lcHex, "4RS")
   ENDFOR
   RETURN lcUnicode
ENDFUNC

Convert your buttons to BMPs keeping transparency with GdiPlusX - REVISITED

cesarchalom — Mon, 15 Dec 2008 01:49:00 GMT

This is just an update for an old post with the same title. Erik Gomez and Russel Campbell had some problems on the conversions of some specific PNG images, so I recoded this function, this time using a safer code.

NEW UPDATE:

Thanks to Bernard Bout and Craig Boyd, I've updated the code below. In fact it contained a small bug, that was not adjusting the White colors. Now it seems to be working nice. Thanks !

This runs a little bit slower than the other aproach, but in my tests, the success was 100%.

The function below converts any button image to a BMP to be used in VFP forms.

There are lots of cool and free icons available on the web, but the vast majority are in .ICO, GIF or PNG image formats, that are not very familiar and reliable to be used in VFP. For us, the best image format, for a lot of reasons, is the BMP format.

Some transformations are needed to make this BMP to show exactly how we desire, specially when converting source images in a PNG, GIF or ICO formats.

VFP shows the pure white - RGB(255,255,255) as transparent in our buttons and image objects. The code below first converts the original whites to RGB(254,254,254) that is visually the same, but does not become transparent, and eliminates the need to create a mask image (.MSK) and next, converts the background color of the original bitmap to pure white, that will show transparent in VFP forms.

For more details, please check these prior posts:

BMPs with Transparent Backgrounds

How to put one image over another in a form

IMPORTANT
Requires VFP9 and GdiPlusX to run.
Please make sure that you have the latest version, because this sample may be using some functions that were added or fixed recently.
http://www.codeplex.com/VFPX/Wiki/View.aspx?title=GDIPlusX&referringTitle=Home

Save the program below as BUTTON2BMP.PRG, and call it this way:

Button2Bmp(GETPICT(), "c:\NewIcon.bmp")

When you compile this program in your executable, please don't forget to remove the LOCFILE() command, and just use a DO System.App instead

LPARAMETERS tcSourceFile, tcDestFile

* tcSourcefile = GETPICT()
* tcDestFile = FORCEEXT(tcSourceFile, "Bmp")

DO LOCFILE("System.App")

LOCAL loBmp AS xfcBitmap
LOCAL loGfx AS xfcGraphics
LOCAL loBorderClr AS xfcColor
LOCAL loRect AS xfcRectangle
LOCAL loAttr AS xfcImageAttributes
LOCAL loColorMap AS xfcColorMap
LOCAL loDestBmp as xfcBitmap
 
WITH _SCREEN.SYSTEM.Drawing
	loColorMap = .Imaging.ColorMap.New()
	loAttr = .Imaging.ImageAttributes.New()
	loBmp = .Bitmap.FromFile(tcSourceFile)
	loGfx = .Graphics.FromImage(loBmp)

	loDestBmp = .Bitmap.New(loBmp.Width, loBmp.Height, .Imaging.PixelFormat.Format24bppRGB)
	loDestGfx = .Graphics.FromImage(loDestBmp)

	* Clear the new bitmap
	loDestGfx.Clear(.Color.White)

	* By Craig Boyd - For enhancing the smoothless and quality
	loDestGfx.SmoothingMode     = .Drawing2D.SmoothingMode.HighQuality 
	loDestGfx.InterpolationMode = .Drawing2D.InterpolationMode.HighQualityBicubic
	loDestGfx.PixelOffsetMode   = .Drawing2D.PixelOffsetMode.HighQuality

	loRect = loBmp.GetBounds()

	* Get the top left pixel color, presuming this color is the BackGround color to become transparent
	* For our BMP case, this will become PURE WHITE - RGB(255,255,255)
	* that becomes transparent when used in VFP objects
	loBorderClr = loBmp.GetPixel(0,0)

	* Convert original Whites RGB(255,255,255) to OFF WHITE - RGB(254,254,254)
	* this way, the whites will remain without the need of a mask
	loColorMap.OldColor = .Color.White
	loColorMap.NewColor = .Color.FromARGB(255,254,254,254)

	loAttr.SetRemapTable(loColorMap)
	loDestGfx.DrawImage(loBmp, loRect, loRect, .GraphicsUnit.Pixel, loAttr)

	* Next step, convert the borders to pure White, RGB(255,255,255) that will become transparent in buttons
	loColorMap.OldColor = loBorderClr
	loColorMap.NewColor = .Color.White
	loAttr.SetRemapTable(loColorMap)

	loDestGfx.DrawImage(loDestBmp, loRect, loRect, .GraphicsUnit.Pixel, loAttr)

	loDestBmp.Save(tcDestFile, .Imaging.ImageFormat.Bmp)
ENDWITH

FoxCharts 0.40 BETA Released

cesarchalom — Mon, 30 Jun 2008 04:50:00 GMT

New features:
- Vertical lines and bars in the scale background
- Alpha allowed in all of the chart shapes and in scale background
- Triangular and cylinder bar charts
- Angles compensation for pie and doughnut charts, allowing charts with good precision when width is bigger than the height (by Bo Durban).
- New sample, see: FoxCharts_New, that allows you to interactively change almost every property of the charts, creating lots of different and interesting charts.
- Included an EXE sample project, for testing purposes
- BackGround line of chart can be set in width, and also use some predefined dotted lines
- Hiding slices from pies or doughnuts allowed
- MemberData scripts for picking colors - in the properties window, double clicking any property that receives a color, will fire the colorpicker window
- Colors may be passed using the RGB value, or using a VFP expression, like: "=RGB(0,0,255)" or even just like the way VFP uses for its native color properties: "0,0,255".

Lots of fixes were applied in this version
- Fixed cylinder and bars positions.
- Fixed font assignment
- Fixed class initialization that caused erros
- Now the class does not show the "X" image in the class initialization
- Fixed plain gradient Pie chart bug, that sometimes did not show the chart
- Fixed print command
- FoxCharts resizes faster
- .... and many minor other fixes

SPECIAL THANKS:
To the FoxBrazilian friends: Peter Wagner, Grego, Emerson Reed, Minari, Moshe, Arcadio, Edgar, Paulo Henrique, Ninja Takehana, Walfrans, Joni and others for their extensive testing, and for providing important suggestions.
And also:
Bo Durban (the best) and Carlos Alloatti (always there, with great insights)
These guys have been providing important help and support. THANKS VERY MUCH !

Any feedback will be very much appreciated.
If you would like to contribute, find any bug or would like to have some specific features, feel free to post in the VFPX Discussions forum or send directly a message to vfpimaging@hotmail.com

Get the latest release directly from the VFPX / FoxCharts page at Codeplex:

http://www.codeplex.com/VFPX/Release/ProjectReleases.aspx?ReleaseId=14851

Below are some pictures showing what FoxCharts can do so far:

Enjoy !