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"
.colourschemesdevil [6] = "aqua"
.colourschemes[7] = "steel"
.colourschemesmusic [8] = "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.

Download

 

2 Responses to Creating the VFP Base Classes with GDI+x – The 3D Option Buttons

  • Hi Bernard
    this is my comments after styudy your beautifule class.
    1-for avoiding the effect to draw the controls one after one i add in method imgcanvas.setup “this draw”

    That will work too. But I prefer this went in the gdiplusx.vcx class in case I forget to add it.

    LOCAL n as Integer
    FOR n = 1 TO This.buttonCount
    This.AddProperty(“Opt”+TRANSFORM(n),.NULL.)
    ENDFOR
    This.Height = 20 + (This.ButtonCount*This.buttonsize) + This.buttonsize/4*(This.ButtonCount-1)
    This.SetupColourSchemes()
    this.draw

    the show is better (all controls drawn in same time)

    2-there is also a flicker on controls because the method draw is called in mousemove(draw all times and causes a visual effect).

    I actually put that in because I wanted to highlight the button the mouse was moved over but disabled the code later. Yes the DRAW is not needed there now and I will take it out.
    I recommend
    -to cut the line draw in mousemove
    -to cut in before draw the last code with loop
    – and change the click method by this
    ***************************************
    This.nMouseOverButton = 0
    FOR n = 1 TO This.buttonCount
    rx = EVALUATE(“This.opt”+TRANSFORM(n))

    *IF rx.contains(p)  &&causes error in my gdiplusX
    if between(this.nx,rx.left,rx.left+rx.width) and between  &&i replace with this line(this.ny,rx.top,rx.top+rx.height)
    This.nMouseOverButton = n
    EXIT
    * WAIT WINDOW NOWAIT “Mouse is in Option”+TRANSFORM(n)
    ENDIF
    ENDFOR
    ****************************************
    * mouse is over a button
    IF This.nMouseOverButton > 0
    * only if a change is needed
    IF This.Value # This.nMouseOverButton
    This.Value = This.nMouseOverButton
    This.buttonclicked = .T.
    This.Draw
    This.buttonclicked = .F.
    ENDIF
    ENDIF 

    3-on a native vfp optionGroup, clicking on caption is the same thing clicking on button himself (the two must work).
    here only the button click work,the caption no.
    then i change in click method above:

    if between(this.nx,rx.left,rx.left+this.width) and between(this.ny,rx.top,rx.top+rx.height)

    that integrate the caption to the click
    you can put exact dimensions for rectangle button+caption.

    you can also draw the caption rectangle if selected (as native with dash—)…maybe no. 
    I have also changed the code so now the click activates over the caption as well.

    4-If the options buttons are objects you can add mousenter abd mouseleave to implement different colors….(like themed native optionGroup).Maybe that must add many imgcanvas objetcs (one by option) in a container….more complexity.

    Too slow as well for drawing and much too complex. I wanted a single pure GDI+X solution.

    5-why you add the code in two demo forms ?the class is suffisent ? can cut all properties/methods of class put on the 2forms.
    ( not used method createColorMatrix ??).
    That is code left in and not needed. My mistake. I design everything visually and when happy I SaveAs Class. The code in the form is not needeed so I will remove it. Thanks.

    Conclusion: you are a great designer.congratulations for this nice one!Smile <img src=” src=”/emoticons/emotion-1.gif”>

  • Excelente

Leave a Reply

Your email address will not be published. Required fields are marked *