[VB6] Wheel Color Picker

Note: this project is no longer maintained/updated and has been superseded by ColorDialog.


This is a replacement of the standard color dialog. It does more or less the same function but with some different features. The most noticeable difference is that it presents a wheel instead of a rectangle for choosing the colors.

The dialog box can work using HSV or HSL color systems.

Attachment 172439

The interface is through a class module named ColorDialog.

The dialog is customizable, the properties are:

ColorSystem:
Allows to switch between HSV and HSL color systems.
The colors of the wheel differ between systems, and also the value of the parameters and their full scales.
The default is HSV.

DialogTitle:
The title for the dialog that will be displayed on the window caption.
If not set, the default is "Color Picker".

DialogSizeBig:
If True, the wheel and the dialog will be bigger.
The default is False.

RecentColorsVisible:
If False, the recent colors are not displayed.
The default is True.

ColorParametersVisible:
If False, the controls to see or sets the color parameters such as RGB, HLS are not displayed.
The default is True.

HexValueVisible:
If False, the control to see/change the color by its Hex value is not visible.
The default is True.
If ColorParametersVisible is False, the hex control is not visible either regardless of this setting.

SelectionParameter:
Determines what will be selected with the third parameter bar and slider. It may be any of the six parameters: value/luminance, hue, saturation, red, green or blue.
The default is luminance.

Screenshot selecting Hue:

Attachment 172441

DrawFixed:
If False, the colors of the wheel or of the third parameter selection bar will be updated with the selection of the other. If True they will be fixed.
The default value is True.

SelectionParametersAvailable:
Determines whether will be displayed a combo control from which the user can select the SelectionParameter and what parameters will be available to select.
The default setting is to show the combo and allow to select Luminance/value or saturation.

DrawFixedControlVisible:
Determines whether will be displayed a control from which the user can toggle DrawFixed on/off.

ColorSystemControlVisible:
Determines whether will be displayed a control from which the user can switch from HSV to HSL color system.

Color:
Used to set the initial color and to get the chosen color.

Context:
You can set a string that sets the "context". It is used to save the recent colors in different lists for different contexts.

Canceled (read only):
Returns True if the user didn't press the OK button.

Changed (read only):
Returns True if the user changed the color and pressed the OK button
It can be used instead of the return value of the Show function.

The function to show the dialog is:

Show:
Returns True if the user actually changed the color and pressed the OK button.

Methods:

SetCompact:
It is a helper method that sets DialogSizeBig (the default is False), RecentColorsVisible, ColorParametersVisible and SelectionParametersAvailable in a handy way.

The result:

Attachment 172443

SetComplete:
It is a helper method that sets SelectionParametersAvailable, DrawFixedControlVisible and ColorSystemControlVisible in a handy way.

The result:

Attachment 172445

SetCaption:
Can be used to change the captions of the dialog for the translation to other languages.
See an example in the next post.

for example:

Code:

---

iDlg.SetCaption cdCaptionGreen, "Verde"

---

A simple usage of the dialog would be:

Code:

---

    Dim oDlg As New ColorDialog
   
    oDlg.Color = Picture1.BackColor
    If oDlg.Show Then
        Picture1.BackColor = oDlg.Color
    End If

---

Note: In the project there is an UserControl, named ColorWheel, that can be used outside this color dialog in cases where there is the need to select colors.

To use this color dialog, the files that you need to add to your project are three:
1) ColorWheel.ctl (also copy its companion file ColorWheel.ctx)
2) frmWheelColorDialog.frm
3) ColorDialog.cls

When you attempt to add the frmWheelColorDialog.frm file to your project, you'll experience an error message saying "error loading, read the log file for details" and in the log file it says that ColorDialogTest.ColorWheel was not a loaded control class.
To avoid that message:

Option 1:
a) Open your project, go to menu Project, Properties. See what's the project's name (not title, but name, on the first tab), copy it.
b) Manually edit the frmWheelColorDialog.frm with Notepad.
Find the line: Begin ColorDialogTest.ColorWheel ColorWheel1 and replace it with Begin YourProjectName.ColorWheel ColorWheel1.
c) Save
d) Add to your project the files in this order: ColorWheel.ctl, frmWheelColorDialog.frm and ColorDialog.cls.

Option 2:
a) Open your project, go to menu Project, Properties. See what's the project's name (not title, but name, on the first tab), copy it.
b) Open the project that you downloaded here, the file is ColorDialog_Test.vbp.
c) Go to menu Project, Properties, and in the first tab go to the name of the project, it will say "ColorDialogTest", then change that with the name of your project that you have copied. Click OK.
d) Save. The name of the vbp file does not matter. Close the project.
e) Now go to your project and add the files in this order: ColorWheel.ctl, frmWheelColorDialog.frm and ColorDialog.cls.

Download from GitHub.

If you need to show these color dialogs in more than one place in the program, and need to translate the captions to another language(s), you can use a procedure like the following, placing it in a module.
This sample is for Spanish:

Code:

---

Public Sub SetColorDialogCaptions(nDialog As ColorDialog)
    With nDialog
        If .DialogTitle = "" Then .DialogTitle = "Seleccionar color"
        .SetCaption cdCaptionBlue, "Azul"
        .SetCaption cdCaptionCancel, "Cancelar"
        .SetCaption cdCaptionColor, "Color"
        .SetCaption cdCaptionCurrent, "actual"
        .SetCaption cdCaptionFixed, "Fijos"
        .SetCaption cdCaptionFixedToolTipText, "Refleja o no visualmente los cambios de colores"
        .SetCaption cdCaptionGreen, "Verde"
        .SetCaption cdCaptionHex, "Hex"
        .SetCaption cdCaptionHue, "Matiz"
        .SetCaption cdCaptionInvalidColorMessage, "El color no es válido"
        .SetCaption cdCaptionLum, "Lum."
        .SetCaption cdCaptionMenuForgetRecent, "Olvidar"
        .SetCaption cdCaptionMenuClearAllRecent, "Borrar colores recientes"
        .SetCaption cdCaptionMode, "Modo"
        .SetCaption cdCaptionNew, "nuevo"
        .SetCaption cdCaptionOK, "Aceptar"
        .SetCaption cdCaptionRecent, "Recientes"
        .SetCaption cdCaptionRed, "Rojo"
        .SetCaption cdCaptionSat, "Sat."
        .SetCaption cdCaptionSelectionParameterToolTipText, "Seleccionar parámetro"
        .SetCaption cdCaptionVal, "Valor"
        .SetCaption cdCaptionToolTipMouseWheelBeginning, "Mantenga presionada la tecla Control para navegar"
        .SetCaption cdCaptionToolTipMouseWheelEnding, "con la rueda del mouse, Mayúsculas para ir lento"
    End With
End Sub

---

Then before calling the dialog, add this line:

Code:

---

    Dim oDlg As New ColorDialog

    SetColorDialogCaptions oDlg
    oDlg.Show

---

Thank you, Eduardo.

I tested your code and it's great. There is a small problem: the color selection probe (color selection point) does not appear at the position where the mouse clicked. But it can be dragged to the correct position by the mouse.

Quote:

---

Originally Posted by dreammanor

Thank you, Eduardo.

I tested your code and it's great. There is a small problem: the color selection probe (color selection point) does not appear at the position where the mouse clicked. But it can be dragged to the correct position by the mouse.

---

Fixed and updated.

You are a good tester dreammanor, you don't overlook anything! :thumb:

Updated. Added HSV color system that now it is the default.

I would expect when clicking directly on the vertical bar to have the same effect than clicking on the arrow. (like in the MS color dialog)
Only clicking the arrow does a change. Direct click on the bar will change nothing currently.

Attachment 172303

Quote:

---

Originally Posted by Krool

I would expect when clicking directly on the vertical bar to have the same effect than clicking on the arrow. (like in the MS color dialog)
Only clicking the arrow does a change. Direct click on the bar will change nothing currently.

Attachment 172303

---

It works that way.
Perhaps you downloaded it in a moment that I saw that bug (the slider control had lost its properties and went back to the default ones -for some reason-). Then I had put a note in red at the end of the post saying not to download and wait that I was fixing a bug, it took me like 15 minutes to fix it and uploaded the file again, but I saw that someone had downloadet it. Perhaps you didnt notice the note and downloaded it in that moment.

I just tested it and it is working right.
Please download it again.

Quote:

---

Originally Posted by Eduardo-

It works that way.
Perhaps you downloaded it in a moment that I saw that bug (the slider control had lost its properties and went back to the default ones -for some reason-). Then I had put a note in red at the end of the post saying not to download and wait that I was fixing a bug, it took me like 15 minutes to fix it and uploaded the file again, but I saw that someone had downloadet it. Perhaps you didnt notice the note and downloaded it in that moment.

I just tested it and it is working right.
Please download it again.

---

Or may be another issue. Because I see from your image that the grip of the slider has the blue border, and another thing that was lost was that.

Can you prease confirm Krool that it is not working for you? Thanks.

Quote:

---

Originally Posted by Eduardo-

Or may be another issue. Because I see from your image that the grip of the slider has the blue border, and another thing that was lost was that.

Can you prease confirm Krool that it is not working for you? Thanks.

---

On Win10 32 bit wondows, the clicki on slider is very slow to response or no effect as Krool's report.
On Win10 64 bit, it is OK.

Thanks for the reports guys, they are important.

First issue: what Krool reported had nothing to do with the slider control (which was what I had said before).
It is in the Picturebox that is next to it.

The issue is (thanks DaveDavis for making me test it in 32 bits) that in Windows 64 bits, the picturebox control, for each MouseDown event also generates a MouseMove event, even if the mouse didn't move. But in Windows 32 bits it does not.

Second issue, the slowness that DaveDavis reported:
I'm not sure whether it has to do with Windows 32 bits or with the machine, I mean the speed of the processor.
I am able to test it only on Windows XP 32 bits (I don't have a Windows 10 32 bits right now), and with an old machine. And yes, I saw the problem. But it is a Pentium 4, this processor is much slower than the one that I'm using on Windows 10 64 bits. At least in my case I think drawing of the wheel is slower because of the speed of the processor and I don't think it is related to Windows 32 bits.

And the issue is not related to the slider control itself, but it is the drawing procedure that takes time. Here I measured 0.15 s for the normal size dialog and 0.27 s for the big one (uncompiled, compiled it is a lot faster). That is in XP with a Pentium 4. In my other machine with Windows 10 64 bits with a new processor it is quite faster, uncompiled and compiled (about 10 x).
Anyway I already made some changes that improve the way it works and it is working fine now here in Windows XP.
Aside from that, if you test it compiled it works a lot faster.

I still haven't updated the project file here, I'll do it maybe later today.

Thank you.

Updated.

Fixed the bug that Krool reported.
Fixed other bugs.
Added an antialiased border to the wheel so it looks smoother.

About the slowness in 32 bits, I tested it on XP and the rendering of the wheel is improved (the response when moving the slider). I think uncompiled is acceptable (for the IDE) and compiled it is fast enough.
But please report how it behaves in Windows 10 32 bits. Please also say what hardware it is, and if you tested compiled/uncompiled.

Thank you.

Quote:

---

Originally Posted by DaveDavis

On Win10 32 bit wondows, the clicki on slider is very slow to response or no effect as Krool's report.
On Win10 64 bit, it is OK.

---

OK now.
A bit weird for me is that call MouseMove in MouseDown. I never used such logic before.

hello good very good control but I have the following problem.
the following line error Error 11 "Division by zero" and can not run or compile
greetings and good job

Code:

---

Private Sub DrawGrip()
    Dim iPoints() As POINTAPI
   
    If mGripStyle = tgGripStyleTriangle Then
        ReDim iPoints(2)
        If mGripOrientation = tgGripOrientationLeft Then
            iPoints(0).Y = (UserControl.ScaleHeight - mGripLenght) / (mMax - mMin) * (mValue - mMin) + mGripLenght / 2

---

sorry for my language

Quote:

---

Originally Posted by yokesee

hello good very good control but I have the following problem.
the following line error Error 11 "Division by zero" and can not run or compile
greetings and good job

Code:

---

Private Sub DrawGrip()
    Dim iPoints() As POINTAPI
   
    If mGripStyle = tgGripStyleTriangle Then
        ReDim iPoints(2)
        If mGripOrientation = tgGripOrientationLeft Then
            iPoints(0).Y = (UserControl.ScaleHeight - mGripLenght) / (mMax - mMin) * (mValue - mMin) + mGripLenght / 2

---

sorry for my language

---

Thank you for your report yokesee.

I don't know how that happened but it was because the value of the Max property of the control "SimpleSlider1" was equal to the value of the Min property.
But I already decided to put all the code of the slider inside the UserControl of the wheel (ColorWheel control) to avoid one UserControl using another UserControl because thal cause issues.
It makes it difficult to add this dialog to existing projects, because unless the name of the project is "ColorDialogTest", even if you follow the right sequence that is first to add the SimpleSlider control, then to add the ColorWheel control, and then the other two files, when you attempt to add the ColorWheel control, it raises an error "error loading, read the log file for details" because ColorDialogTest.SimpleSlider was not a loaded control class.

Then better not to use a control that uses another one. VB6 could have been made more clever to offer you to use the existing SimpleSlider already loaded but it is not (if anyone knows a workaround to this issue please advice).

I'll add the code of the slider into the other UserControl. I'll issue an update when it is done.

About your error of division by zero, to fix it now, go to the control SimpleSlider1 that is inside the ColorWheel UserControl, and set its Max property value to 100.

Quote:

---

Originally Posted by DaveDavis

OK now.
A bit weird for me is that call MouseMove in MouseDown. I never used such logic before.

---

I needed to do in the MouseDown the same that was already coded in the MouseMove.
There are these options:
1) To duplicate all the code.
2) To add a third procedure, move the code there, and call it from the other two.
3) To call the first procedure where it is already coded, even if this a an event procedure (that is not a problem, it works the same way as any other procedure).

What woud you prefer to do?

Updated. Removed the slider UserControl, now the code for the slider is inside the same UserControl of the wheel.
Some other improvements too.

At the end of the first post, I added instructions about how to add this dialog to existing projects.

thanks for improvements and fix errors.
better I can think of is using the mouse wheel to control the slider you would have better accuracy but is not very relevant.
greetings and good work

Hi Eduardo, I saw that your new version uses anti-aliasing algorithms, which is great.

Quote:

---

Originally Posted by yokesee

thanks for improvements and fix errors.
better I can think of is using the mouse wheel to control the slider you would have better accuracy but is not very relevant.
greetings and good work

---

Updated.

I added the mouse wheel support, for the slider and for the wheel.
I had to add subclassing code for doing that.
To have "accuracy" you need to hold the Shift key pressed while scrolling with the mouse wheel.

Quote:

---

Originally Posted by dreammanor

Hi Eduardo, I saw that your new version uses anti-aliasing algorithms, which is great.

---

It adds a two pixels outer border for the anti aliasing effect, but it does not change any of the pixels colors of the wheel.
The border is not evident because it is painted with the colors that are nearby inside the wheel.

Updated.

I've been testing the dialog in a real program and I found that it is a big difficult to select poorly saturated colors, because these colors are all near the center of the wheel.
The solution was to allow the user to change the parameter of the slider to saturation, but I didn't want to overwhelm the user with many options, so that I wanted just to offer to select saturation instead of value with the slider.

In the previous version there was a property SelectionParameterControlVisible, but now it was replaced by the property SelectionParametersAvailable, which has these options:

Code:

---

    cdSelectionParametersNone
    cdSelectionParametersLumAndSat
    cdSelectionParametersHueLumAndSat
    cdSelectionParametersAll

---

If the setting is cdSelectionParametersNone, the combo control below the slider doesn't appear, and with any of the other options it does.
The default is cdSelectionParametersLumAndSat, that offers to select just between Luminance/Value and Saturation.

If no bugs are reported I'll consider this version stable.

Updated.
Now the Slider (at the side) can be changed with the keyboard (Up and Down keys), and also some bugs were fixed.