Creating the VFP Base Classes with GDI+x - The 3D Option Buttons
Following on from my previous post about creating check boxes completely with GDI+x I decided to try something a bit different and create a 3D Option Button set with colour schemes. What follows is about this class as well as how to set it up and also to create your own colour schemes, in addition to the ten schemes included.
Important:
The GDI+X classes that are used in this class use Functions in system.app that are fixed and you will get errors if you use the release version. As pointed out by Cesar, the latest update with bugs fixed has been posted on the CODEPLEX/VFPX site.
Please download the updated SYSTEM.APP from this link as provided by Cesar:
http://vfpx.codeplex.com/WorkItem/View.aspx?WorkItemId=20164
Before you begin, you should know that this class uses the GDI+x classes found at the codeplex site which you need to download. Also to use the ColourSelector tool to create your own schemes, you must include the system.app from the GDI+x classes in the same directory as the tool.
Also you need VFP9Sp2 since this class uses Transparency.
You must also resolve the location of GDIPLUS.VCX in my class, to where you have extracted it.
Before we begin, here is a sample of the class with all the colour schemes.
To use the class is simplicity itself so follow along.
Open a new form and drop the class onto the form. Resize it but note that the class also resizes itself at runtime to accommodate the number of option buttons defined.
The image below shows you the only properties you need to set.
Value - this tells the class which button is to be shown as selected.
ButtonCount - the number of buttons to be drawn
ButtonSize - In pixels the size of the button. Don't make them too small as then detail may be lost. The size entered here determines the final height of the class as well as the size of the font used.
Captions - Comma delimited string of the captions.
ColourScheme - Enter the string here exactly as per the description of the property.
Enabled - .T. or .F. This can also be changed at runtime.
These are the only properties that need to be set. The class has a Value property that will show which button was selected by the user.
Unfortunately I have not added the option of showing what the class will look at design time, but that may come later with a builder.
Here is another sample of the different schemes including the Enabled = .F. at the top right.
Creating your own schemes
Creating your own schemes is not that difficult provided you follow exactly this tutorial on how to do it. You can either replace a scheme with one of your own or add an additional one or two or more.
First, if you want to add an additional scheme, these are the steps, as you will need to edit the class.
1. Open the class for editing and open the method SetupColourSchemes.
Change the number of schemes and add your own.
DIMENSION This.colourschemes[10]
With This
.colourschemes[1] = "Brown"
.colourschemes[2] = "Blue"
.colourschemes[3] = "Purple"
.colourschemes[4] = "Green"
.colourschemes[5] = "Gold"
.colourschemes![Devil [6]](/emoticons/emotion-14.gif)
= "Aqua"
.colourschemes[7] = "Steel"
.colourschemes![Music [8]](/emoticons/emotion-29.gif)
= "Violet"
.colourschemes[9] = "Brick"
.colourschemes[10] = "Crimson"
So if you wanted to add a scheme say Myscheme you would need to re-dimension the array
DIMENSION This.colourschemes[11]
and add the scheme after Crimson
.colourschemes[11] = "Myscheme"
Next you need to add a property to the class called colourscheme11 to store the colours for this new scheme.
There are 18 different colours used in the class and these need to be assigned to this property as the return value of a RGB colour. This is the number you'd get if you typed at the command prompt:
?RGB(234,222,128) which would give you 8445674
The 18 colours need to be entered into this property as a comma delimited list of numbers as the schemes 1 to 10 have already been done by me. While this may seem difficult, just read on and see how easy I have made it to do.
The following image shows where the colours are used, their order and sequence. This sequence must be strictly followed from 1 to 18.
Colour Scheme Key
The easiest way is to first get the colours you will use as an image. You can download and use the image below and change the Hue & Saturation to get different shades in any paint program. Click on it first to get the proper resolution and then save it.
Once saved change the Hue/Saturation to get your desired colour scheme and then save with a new name as a BMP.
The same image with a Hue = +30 and Saturation = +130 applied is shown at the very end.
Included in the download is an EXE - colourselector.exe. This needs system.app in the same directory. Just run it and click the button to load the image you just saved.
Select your new colourscheme11 property and click the magnifying glass icon to open the property in an edit box as shown below.
Now referring to the image of the Colour Scheme Key from above to get the sequence and location, move your mouse over the area of the image in the colourselector and click to select your colour. Once you are satisfied it is the correct colour, click inside the Properties editbox and (Ctrl+v) paste the colour number. Do this in sequence for each of the 18 colours, separating them with commas. When you are done save the class. Make sure there is no comma after the last number.
Now to use that scheme just change the property colourscheme of my class to the name of your new scheme. In the example above it will be Myscheme.
Nothing could be simpler.
If you have any problems please let me know as well as any comments or improvements and any additional properties. I'll see what I can do.
Enjoy
Class has been updated to V1.02
Fixes:
1. Removed redundant code from Sample forms
2. Updated class so clicking on caption also fires.
3. Moved checking code out of BeforeDraw to avoid flicker
2&3 were made on suggestions by Yousfi. Thank Yousfi.