wiki:APP_COLOR_PICKER_R0

Version 9 (modified by danvisel, 16 years ago) (diff)

--

Error: Macro BackLinksMenu(None) failed
compressed data is corrupt

Error: Macro TicketQuery(summary=APP_COLOR_PICKER_R0, format=table, col=summary|owner|status|type|component|priority|effort|importance, rows=description|analysis_owners|analysis_reviewers|analysis_score|design_owners|design_reviewers|design_score|implementation_owners|implementation_reviewers|implementation_score|test_owners|test_reviewers|test_score|) failed
current transaction is aborted, commands ignored until end of transaction block

Analysis

Overview

The user should be able to pick custom color as well as predefined swatches from the color picker HUD. The color picker HUD is called from other HUDs.

Task requirements

The color picker HUD has a top half and a bottom half. The top half shows basic functionality; the bottom half shows more advanced functionality. The bottom half should be hidden unless the user chooses to display it.

The top half of the HUD has three basic parts:

  • The color spectrum rectangle. This is a rectangle that displays the color spectrum. Clicking on it sets the current color.
  • The current color square. This is a square
  • The save color button. This button is next to the current color square. If this button is clicked, the current color is added to the saved color squares.
  • Ten saved color squares. These colors are saved colors; these start out as white, and as the user saves colors, the saved colors are moved into this list. (This could be a first-in, first-out stack.) These squares are selectable; if the user clicks one of these color squares, the saved color is set as the current color. If the user selects a color square and presses DELETE, it could be deleted from the list of saved colors.

The bottom half of the HUD has these sections:

  • A text box that shows the current color's value in RGB as 6 hex digits; this can be edited. If this is changed, the color in the current color square changes (and vice versa).
  • Two text boxes that show the current color's R value in hex and decimal; these can be edited. If either of these are changed, the current color square also changes (and vice versa).
  • Two text boxes that show the current color's G value in hex and decimal; these can be edited. If either of these are changed, the current color square also changes (and vice versa).
  • Two text boxes that show the current color's B value in hex and decimal; these can be edited. If either of these are changed, the current color square also changes (and vice versa).

When any changes are made to the current color, the changes are also immediately reflected in whatever the color is an attribute of.

old version

There are 3 main parts

  • The preview - The changes of the selected color should be visible run time. It will be best if the previous color is visible as well as the new one.
  • Swatches section - user should be able to select from predefined as well as from custom defined swatches. Also there should be ability for the user to add, delete end edit the set of custom swatches. It will be great if he could save and load these sets. The predefined swatches should be visible all the time.
  • Color select section - user should be able to select the color from color plane and horizontal color slider. Also he could type the exact value via RGB, HSB and hex number. There should be input fields for red, green, blue, hue, saturation, brightness and hex number. There should be restrictions for these fields as follows:
    • red, green and blue - value can be number between 0 and 255
    • brightness and saturation - value can be number form 0 to 100
    • hue - value can be number between 0 and 359
    • hex number text field - only hex numbers are allowed

In front of every input field (except the hex number)should be a radio button that represents current channel in the color slider. All elements in 'color select section' should update them selfs runtime. It will be great if vertical slider appears after the user rolls over the right part of the input fields that allowed only numbers values.

Task result

  • The result should be code

Implementation idea

Here is scheme that could guide you.
source:trunk/sophie2-platform/doc/userdoc-images/RELEASE_4/colorPickerDialog.jpg
source:trunk/sophie2-platform/doc/userdoc-images/RELEASE_4/colorPickerDialogSwatches.jpg

BASE_DIALOGS?

How to demo

  • start the application
  • insert text frame
  • type some text
  • select part of typed text
  • try to change the color
  • the color of the text should be changed runtime.

Design

Implementation

(Implementation results should be described and linked here (from the wiki or the repository))

Testing

Comments

  • Leave alpha for next revision: for this, an alpha slider is added to the top half of the color picker HUD. An opacity field (0-100) is also added to the bottom part of the HUD.
  • If it's easy, it would be nice to have sliders for the R, G, B values in the bottom half of the color picker HUD.
  • If there's room, it would be nice to have HSB and CMYK color values in the bottom half of the color picker HUD, but these aren't used nearly as often and aren't very important.