GRADIENT OBJECTS WITH GDI+ REVISITED

Here's the latest version of the GradientObjects class.

Many thanks to: Craig Boyd, Bo Durban, Emerson Reed, Malcolm Greene, Keith Gordijn, Luis Navas, Ana Bisbe, Ailsom Heringer, and all others that have tested the class, providing valuable suggestions and feedback.
The main modification from the previous version is the creation of a new class, as Craig Boyd suggested:

“... create a custom class that provides this functionality rather than have the code directly in the button class. A class that uses bindevents to link itself to the buttons (or whatever ui element is being used) would provide an additional level of abstraction. this would allow developers to use the class with other ui elements (such as a container) and also provide a quick and easy way to add this cool functionality to existing applications where they have their own button subclasses (or are using vfp base class) already existing. Toss the class on the form and set some properties.”

Another important modification was to “turn any optionbutton or checkbox with its style property set to graphical to a gradient button.” as Bo Durban suggested.
Emerson Reed also provided many images showing the desired behavior of the class.

Features :

• drop one instance of the class in the form or container, and all buttons will be converted to gradient. applies to commandbuttons, graphical checkboxes and graphical listboxes

• 9 kinds of gradients
• choose different backcolors when object has the focus and not.
• create greyscale images for disabled buttons
• picture position
• converts picture borders to transparent (no matter what color is used)
• hotkeys (\<) specified in the caption property display normally, and remain functional.

How it was created:

• the class creates a new picture image file that will imitate the original appearance of the button, using all text properties, like caption, fontbold, fontitalic and the original picture, all redrawn in a specified gradient background.
• extensive usage of gdi+ to create images, 100% with direct api calls, to obtain the maximum speed in the creation of the images that will be substituted in the buttons.
• in the first moment, only the main images from the buttons are created. only when the mouse or focus is over a specific object that the class creates the “selected image”. the same happens with the “greyscale disabled pictures”
• many events are controlled using bindevents, such as : mousemove, mouseenter, gotfocus, lostfocus
• three different kinds of gradients were created using different functions.
• for gradientmodes 1 to 4, i used gdipcreatelinebrushfromrecti, to create a simple linear gradient brush with 2 colors.
• for gradientmodes 5 to 8, gdipcreatelinebrushfromrecti was again used in combination of gdipsetlinepresetblend, that according to MSDN "defines arrays of colors and positions used for interpolating color blending in a multicolor gradient". it was used to create a 3 color gradient, starting with backcolor1 property, with backcolor2 in the center and again backcolor1 in the other edge.
• for gradientmode 9, i created a PathGradientBrush, using gdipcreatepath, gdipaddpathrectangle, gdipcreatepathgradientfrompath, gdipsetpathgradientcentercolor and gdipsetpathgradientsurroundcolor. there is a very cool example of this usage in last Craig Boyd's article published in foxtalk 2.0. the surround color is defined by backcolor1 property. The center color is backcolor2.
• the gdi+ imageattributes class is used to apply a color matrix to create the greyscale images for the disabled buttons. It is also used to create the transparent background of the pictures using the remap table function.
• the hotkeys are enabled using the StringFormatHotkeyPrefix
  
  

Properties of the class to be set

Check the favorites tab in the properties window.
         

• BackColor1 - numeric, the RGB value of the starting color of the gradient background when the object does not have the focus and the mouse is not over it.

• BackColor2 - numeric, the RGB value of the destination color of the gradient background when the object does not have the focus or the mouse is not over it.

• SelbackColor1 - numeric, the rgb value of the starting color of the gradient background when the object has the focus or the mouse is over it.

• SelbackColor2 - numeric, the rgb value of the destination color of the gradient background when the object has the focus or the mouse is over it.

• CaptionForeColor - numeric, if set, overrides the forecolor originally set in the controls

• Captionbold - logical, if set, overrides the captionbold originally set in the controls

• CreateBorder - logical, sets the border with the color background1 color

createborder = .T.

          

createborder = .F.

           

• GradientMode - numeric, from 1 to 9, determines the gradient type to be applied to the buttons.

1 - horizontal 2 - vertical 3 - diagonal 1 4 - diagonal 2 using linear gradient brushes with 2 colors
5 - horizontal 6 - vertical 7 - diagonal 1 8 - diagonal 2 using linear gradient brushes with 3 colors, where the surrounding color is backcolor1 and the center color is backcolor2
9 - rectangular pathgradient, where the surrounding color is backcolor1 and the center color is backcolor2

          
         
          

• ReduceColorLevel - numeric, automatically sets the destination color of the gradient (BackColor2 and SelBackColor2) ranging from 0 (no change) to 100 (white). if left to .f., then no change is applied and the original values of BackColor2 and SelBackColor2 will be used.

• CreateDisabledPicture - logical, .t. = create a grayscale picture of buttons to be used when one or more controls are disabled.

         

• MouseDownEffect - logical, determines if the button will become darker or brighter when mouse is down
• MouseDownBrightness - numeric, brightness in percentage. -100 = black; 0 = no change ; +100 = white

• TranspImgBack - logical, determines if the picture will have its background converted to transparent (alpha = 0). by default, the class will admit that the color of the 1st pixel, coordinate (0,0) has the background color, and will substitute all pixel colors that match that color to transparent.

         

Redrawing a specific object

In many cases, we need to change programatically some properties of some buttons, like the caption. When using this class, you need to call the updatecontrol method of the class, like in the example below:

Thisform.CmdButton1.Caption = "new caption"
Thisform.CmdButton1.FontItalic = .t.
Thisform.GradObjects1.UpdateControl(Thisform.CmdButton1)

Assigning different effects to some specific buttons

That's very easy to accomplish. Put the CommandButtons in a separate container, and drop an instance of the class, setting the properties as needed.

Below you can see a form in development mode and the resulting when the form is executed.

         

         

 GradObjects Download - Release 2020 

Disclaimer

This class is totally free. The information provided on this page and the source code related to this article comes without any warranty whatsoever. Use it at your own risk.

VFP Paint Revisited - 2020

Here's a brand new version of VFPPAINT, a sample that I created using the GdiPlusX library that works much like MSPAINT, and creates a canvas that permits you to draw whatever you want with the mouse.

If you are not aware of what I'm talking about, you might be interested in checking this blog post..

VFPPAINT now has become much bigger than the original 50k SCX from the first version. Now it has become a VFP project, and received some important improvements, such as fast and reliable drawing, and the possibility to work with modal forms. many new and cool features were added too.

In this revamped version, I'm introducing the
   Paint Bucket - used to fill an area with single specific color. Select the bucket and position the cursor over the area to be filled and click with the Left mouse button to fill with the Primary color.

That's a cool feature that I introduced to GdiPlusX a long time ago, but forgot to document. I even think that the current release does not bring a sample dealing with it.

First of all, thanks for the positive feedback that many readers have sent, and all the suggestions.



Important requires VFP9 and GdiplusX to run.  
Please make sure that you have the latest version, because VFPPAINT uses some functions that were added recently.

http://www.codeplex.com/vfpx/wiki/view.aspx?title=gdiplusx&referringtitle=home


When you run VFPPAINT.scx it will ask you to select the folder where gdiplusx library is located.



What's new on this version:

1 - main screen may be modal, modeless, toplevel or inscreen - this was a problem in the first version. in that case, to obtain scrollbars in my canvas for the case that the image could not fit in the screen, I created a child form, that worked inside the main form. then the child form was configured to show scrollbars when needed. but working with this configuration, the main form had to be a toplevel form, and it was not possible to make that form modal.

Thanks to Carlos Alloatti and Malcolm Greene for their great "scrollablecontainer", I was able to use just a single control, and concentrate just on the drawing codes, I confess that it was a little bit complicated to control the form scrollbars and the image position in the original way. now this is all done by the scrollable container. Thanks very much Carlos for your support to make it work as I desired. Anyway, some tweaks were needed to be aplied in this control to make it behave exactly as I needed, and I created my customized version. Check the file SCONTAINERTWEAKS.TXT in the "source" folder.



2 - faster image drawing - I confess that the original version worked really sloooooow when direct drawing on the canvas. that's because vfp and gdiplusx has to work a lot in order to draw the image. After detecting the mouse position, cloning the original image for undo purposes, I used gdiplusx to obtain the pictureval of the bitmap, and then the image pictureval property was updated. obtaining the pictureval was the slowest operation. in this new version, I'm using gdi+ to draw du]irectly on the screen, using the hwnd of the form, when the left button of the mouse is pressed. only when the user releases the button or when he leaves the canvas surface is that the pictureval of the image object is updated, check it by yourself, this brought a huge performance gain !



3 - cut, copy and paste - these possibilities were added too. now you can select any portion of the image, cut or copy to the clipboard, and paste in any other application, or even inside vfppaint, moving pieces of images inside the canvas. it supports also that you paste any image from the clipboard. you can capture any screen using the prtscrn key and paste it there.



4 - drag and drop pieces of images. this brings the possibility to apply some effects in the whole image or just in the specified region.

5 - special color effects - there were lots of other cool things that I wanted to add, but no more space was available in the original form, so i've created a child form that agrupates some slidebars that will control the image colors, like: contrast, saturation, brightness, gamma, hue and adjusting each of the basic colors individually.

6 - other color effects - with just one click obtain monochrome, greyscale and invert the colors (negative)

7 - image transformations - another child form permits you to rotate the image by a desired angle, scale and shear vertically or horizontally.



8 - other tweaks, small fixes and optimizations. all methods were revised in order to enhance the performance and reliability.



Main features

- draw points, rectangles lines and ellipses with the mouse.

- text drawing, choose any font, size and style, and it will appear at the place that you click on the image. (drag and drop to choose the best place)

- choose any color, from the palette or directly from the loaded image or canvas and select the pen width that you want to draw.

- select the shape or type of drawing in the graphical option buttons, and then go to the canvas (image object) and click the left mouse button.

- drag and drop is available for rectangles, lines and ellipses.

- basic undo features

- rotate and flip images

- resizing images

- printing and saving images

- scale, shear and rotate images

- apply image effects, like greyscale, saturation, contrast, brightness, and more



Basic commands

    load image to canvas
    save image in desired image format
    print image
    undo last changes

pick color from palette    clear entire canvas with selected color   rotate left (whole or selected image)   rotate right (whole or selected image)    flip image horizontally (whole or selected image)   flip image vertically (whole or selected image)

	no action
	draw points
	draw rectangle
	draw ellipse
	draw line
	fill rectangle
	fill ellipse
	draw string
	select a piece of the image, to be cut, copied, dropped or receive an effect
	pick color from canvas
	select font, size and type

	convert to greyscale
	convert to monochrome
	convert to negative

   calls child form that enables different kinds of resizing

   calls child form that allows scaling, shearing and rotating the image




   calls child form that allows several color effects to the image

    

   send the selected piece of image to the clipboard

   copy the selected piece of image to the clipboard

   paste image from the clipboard to the canvas

   paste special, allowing to choose the destination of the image

   paint bucket is used to fill an area with single specific color. Select the bucket and position the cursor over the area to be filled and click with the Left mouse button to fill with the Primary color.

All images are generated without disk access, using the new pictureval property of the image control. For this specific case, I didn't use the imagecanvas that ships with gdiplusx because I needed some extra customization. after the latest release of gdiplusx, getting the pictureval property of an image has became very simplified, with the new methods added to the image class - getpictureval and getpicturevalfromhbitmap.

As sometimes we need to work with an image that is bigger than our screen, the drawing canvas was put in a "in toplevelform" that has scrollbars.

Another cool feature is the "undo" possibilities. vfppaint stores the previous bitmap in a cache. this can be improved too, maybe you need to "undo" in higher level. for this, very few code is needed.

When drawing on the canvas, try dragging and dropping the objects. for this, the "undo" feature was highly used, because the shape is drawn, and when the user moves the mouse, it restores the original image from the buffer and draws again in the new position.


When a big sized image is loaded, first it asks if the canvas needs to be resized.



Scrollbars appear in the image to help dealing with it. in a first moment, I thought of using the very nice ctl32 scrollable container from Carlos Aloatti and Malcolm Greene, but I gave up because I needed the pictureval property, that is present only in the default image control. So, there are currently 2 forms in the screenshot below. one is a "in TopLevel" form that contains just one image object, and resides in the main VFPPAINT form. the other form is a "TopLevel form". The image object from the "child form" changes its size automatically, depending on the image dimensions. When this object is resized, the child form automatically resizes itself, and shows and adjusts the scrollbars if needed.

Resizing sample:

VFPPAINT also accepts that you pass an image file as a parameter. this way, you'll be able to open the form loading automatically the desired image to edit. run the form like this:

do form vfppaint with "eyes.gif"

In case you pass a gif image as a parameter, it will be automatically converted to 24bpp. that's because gifs are indexed images. a classic example of indexed images are monochrome. pure monochrome images use only 1 bit per pixel. So, in just one byte you can store information of 8 pixels ! in the case of gifs, they are usually 8 bits per pixel, so in one bit we can have a value that ranges from 0 to 255 - that's exactly the quantity of colors supported by GIFs! Unfortunately, the redistributable version of GDI+ has a limitation when working with images created in indexed pixel formats, such as 1bppindexed (0x00030101), 4bppindexed (0x00030402) and 8bppindexed (0x00030803). If you try to draw on this kind of images you'll always receive an error message when you'll create the graphics object, that permits to you to draw on the image. more detailed info about this can be found in this post: drawing on gifs or indexed pixel format images with gdi+  http://weblogs.foxite.com/vfpimaging/archive/2006/03/18/1302.aspx . That's why gifs are converted to a 24bpp format before initializing the painting possibilities.

But the main thing is that this totally customizable. Study the technique that was used, and you'll see that there's not too much code there.




Download link
Download VFP PAINT REVISITED