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.

Task result

• The result should be code

Implementation idea

Here is how this could look:

Related

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

The spectrum

The spectrum should be generated dynamically, rather that reading it from a file. Generally, it is the HSB cylinder, but with a vertical cut and spread wide open. Here is an idea how the spectrum from the wireframe could be generated:

BufferedImage spectrum = new BufferedImage(200, 180, BufferedImage.TYPE_4BYTE_ABGR);
for (int h = 0; h < 360; h += 2) {
	for (int i = 0; i < 200; i++) {
		int s = Math.min(i, 100);
		int v = Math.min(200 - i, 100);
		res.setRGB(i, h / 2, Color.HSBtoRGB((float) h / 360,
				(float) s / 100, (float) v / 100));
	}
}

Having it generated dynamically makes it easy to pinpoint a selected color in the spectrum.

Color picker

• Create the ColorPicker class as BaseSwingVisualElement. That way it will be easy to be added to a HUD or a JFrame for a demo.
• Add a model() value-property, which will contain the current color.
• The color picker should contain BoundTextFields for each component of the color (R, G, B, A). They should depend only on model().
• Since we don't have a SliderBoundControl yet, the Alpha value should also be displayed in BoundTextFields.
• Consider adding the method validateHex to BoundValidation, since the hexadecimal values typed by the user should be validated as well.
• The saved colors should be kept in a value-list property. There should a limit of the number of saved colors, so the list itself acts as a reversed queue.
• A SavedColorPanel should be added, which represenets a saved color from the list. A resource property savedColorsListPanel() will contain all instances of SavedColorPanel.
• Make a resource property spectrumPanel() which draws the spectrum and a circle around the selected color. It should have a MouseListener, so that when it is clicked, the color below the cursor is set as current.
• Make a resource property colorPreviewPanel() which will display the current color. It should have a transparency grid as a background image so that the alpha value is perceivable for the user.

HUD and HALO

• The color picker should be displayed in a HUD rather that a dialog.
• The current situation with HALOs and HUDs makes it mandatory that each HUD is associated with a HALO button. To make matters easy in this revision, a dummy HALO button could be added, which has 1x1 transparent image as an icon, so it is not visible, but is still accessible.
• Add a ColorPickerHud, which is a special type of hud, since it will only be called by BoundColorFields. It should have the following methods:
  • public void show(BoundColorField colorField, ImmColor initColor) - shows the ColorPickerHud
  • public void hideAndSubmit() - closes the ColorPickerHud and submits the selected color
  • public void hide() - closes the ColorPickerHud

Other

• Consider a static method colorToHex(ImmColor) : String[] which returns the 4 components of the given color in hex.
• Consider a static method createColor(int rgb, int alpha) : ImmColor which creates a color on given rgb value and an alpha value.
• Refactor BoundColorField, so that it invokes the show() method of the ColorPickerHud.

Demo: ColorPickerDemo

Unit test: ColorPickerTest

Implementation

Changesets: [3425], [3440], [3535], [3618]

• Commited to trunk in [4074].

Testing

Comments

• If it's too hard to do a color spectrum, a grid of 256 colors would work as well.
• Leave alpha for fnext revision: for this, an transparency slider is added to the top half of the color picker HUD (by default set to 0). Moving this changes the color in the color square. A transparency text field (0-100) is also added to the bottom part of the HUD; changing the number in this moves the slider and changes the color in the color square.
• 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.