In Progress

Color and Width Pickers MDI project(repost)

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.

## Deliverables

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

SetWidthToPane(int nWidth);


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.


KEY functionality

1. Single Color picker functionality as above

2. Resizing of the controls to fit any shape of window

Regards 2

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!

Skills: C Programming, Engineering, Microsoft, Project Management, Software Architecture, Software Testing, Windows Desktop

See more: writing linear functions, what is linear programming, what is a method in programming, switch c programming, standard c types, see writing method, rectangle line, project on line free, programming font, programming degree, line rectangle, linear programming project, linear programming example, horizontal line example, hex programming, fashion and you, degree in programming, degree for programming, c programming switch, bottom up programming, best writing apps, best writing app, best programming font, best font for programming, best degree to have

About the Employer:
( 114 reviews ) Australia

Project ID: #3465544

Awarded to:


See private message.

$595 USD in 20 days
(63 Reviews)