Buyer requires color picker and width picker functionality to be placed on a CDockable Pane in an MDI based windows app.
The main difference between these pickers and usual color/width pickers is that they must arrange themselves optimally depending on the shape of the CDockable Pane that the user sizes it to.
Controls in the window are seen in example attached image, and include a color picker, Color 'type' buttons (e.g. background color, font color etc), Width picker and width slider. I also require an extra button which I suggest is written first... the? color picker single button (not seen in image but - to click on any color in the ENTIRE desktop).
If the dockable window is sized to be adequately 'square' then a typical color picker type arrangement must be adopted... and suitable layout for width picker.
If the window is sized to be relatively long and thin, then the controls must be laid out to spread them selves out in a more linear fashion and still be usable.
The best layout for this is not fixed in stone and so some degree of creativity is to be commended.
Please refer to image.
Seen is a screenshot of an existing app where part of a CDockablePane based part of the MDI is devoted to showing color picking and width picking functionality.
This exact functionality AND 1 extra button - the single color picker button, are to be put on a separate Dockable Pane, so that they may be resized to any dimensions and still be usable.
In particular if the user elects to stretch them along the left or bottom of the app in almost a linear configuration, the controls will still be functional.
The buttons to be seen include, at top, a toolbar with the 'type' of color that is being selected.
The types include from left to right, a 'font color' (0), 'line color' (1), 'Background color' (2), 'fill color1' (3),'fill color 2'(4) (i.e. for a gradient to show between fill color 1 and 2).
Below that is a typical color picker and a 'more colors' button which opens up a standard windows color picker window.
Below that are the recently chosen special colors.
Below that are width related controls
Firstly - a slider which picks a width from 0 to 50 wide
Secondly as many widths as possible are viewed to be clicked on directly.
An extra button related to color is required to be added in addition to these controls... and this button is KEY to the functionality that you will be writing.
When you click on that 'single color button', the user is then able to click anywhere on the visible screen, including for example the background desktop or other apps, and whereever he/she clicks, the pixel that he/she clicks on, will be the color that is 'picked'.
When a color is picked by any method, the functionality that you will write will be simple... it will print out the 'type' of the color being picked and the hex value... in an AfxMessageBox.
No further functionality is required.
When a width is picked by any method, the functionality will be that you will print in an AfxMessageBox, the width that was picked.
When a width has been picked it should show up as the digit next to the slider and have a thin rectangle around that width if it is visible next to it.
Input of a color and a width to the control should also be possible...
I.e. when the user clicks on an item of a certain color and width I will wish in future to be able to show those on the controller.
Therefore functionality will have to include a
SetColorToPane(int nColorType, COLORREF nColor);
the latter will highlight the color picked AND the type button (0-4).
Implement the single color picker button first, and then use that functionality to pick a color in the standard color picker control also. I.e. if the user clicks anywhere within the normal color picking area, the color of the pixel that has been clicked on is output. That way when you are resizing the color picker window and the layout changes, there is no change in working out what was clicked on.
1. Single Color picker functionality as above
2. Resizing of the controls to fit any shape of window
The user may for example stretch the pane out to be a thin strip along either the bottom of the app or along the left side.
This means that the slider control for width for example will have to switch between being vertical or horizontal.
The existing toolbar component will need to be changed to be buttons WITHIN the pane so that they re-arrange correctly.
Please keep the buttons and slider sizes fixed, but re-arranged.
The color and width dimensions can be re-arranged and resized as you see fit.
An example of what might happen is shown also in the 're-arrangement' images...
Please feel free to improve upon the suggesions.
NOTE: the control must also look good when it is free floating and generally rectangular.
Over to you!