The colour picker user interface
[Back to the Colour Picker Module]
This page explains the way the user interface for the colour picker is used in Artiste. It is used in conjunction with the colour picker algorithm which selects images based on the inclusion of a selected colour within the image.
The user interface is a Java applet, which means it needs to be run in a browser that supports Java applets, and has applet loading turned on.
The code is downloaded to the browser and run from there. Once the final colours have been selected they are sent back to the Artiste system where the matching takes place. There is a slight delay as the applet starts up, while it generates the colour patch.
For administrators, the code can be run stand-alone, and in this format allows the updating, loading and saving of the colour palette.
The user interface looks similar to above. The main parts of the interface are:
The colour box in the top left shows the current colour being worked on.
The colour sliders allow mixing of a colour using various colour primitives.
The colour patch shows a cross section of Lab space, and colours can be selected directly from the patch.
The selected colours panel shows the colours that will be used during the match, and their relative amounts. Before any colours have been selected, the panel shows a help message.
The tool buttons are used to add a colour to the selected colour panel, show the colour palette, or finish picking colours and continue with the matching.
The colour palette (not shown above - see below) contains a set of predefined colours from which the user can pick.
There are two main methods of colour selection. The colour sliders and the colour patch.
The sliders at the top allow the creation of a colour by mixing the various colour components in different colour spaces. The colour spaces which are available are RGB (red, green, and blue), HSB (hue, saturation and brightness), and CIELab (lightness, redness-greenness, and blueness-yellowness).
The colour patch shows a slice of the perceptually uniform Lab space (across L). The a axis is shown across the patch and the b axis shown down the patch. Colours can be selected directly from the patch just by clicking on it. A small dot shows where the current colour that has been mixed appears in the space.
The image above shows the user has pulled the HSV sliders into a position where the terracotta colour is shown in the colour box. Note that the colour patch has changed to reflect the mixed colour. The colour primitives used in the mixing can be altered by clicking the radio buttons underneath the sliders. The values on the other sliders will represent the selected colour.
When the colour box shows the colour which is wanting to be matched, the Add Colour To Selection button, in the button toolbar, is pressed, and the selected colours panel shows a new colour bar representing the selected colour. This example shows a mint green has been selected, and added to the selected colours panel. The height of the colour bar represents how much of that colour the match should try to find within the image. It defaults to 100% (so it tries to find a mint green image).
More than one colour can be searched for within the dataset. So, in the above example, the orange has also been added to the selected colours panel by clicking the Add Colour To Selection button. The default amount of each colour now defaults to 50% - so the matcher would try to find an image with 50% mint green, and 50% orange (in any distribution). If an image does not contain one, or both, of the colours it is not returned; i.e. only images containing these colours are returned. The number of colours to match against is not limited. Also note that one colour can be added multiple times. This is not recommended and has undefined behaviour.
By pressing the less and more buttons in the selected colours panel, the relative amounts of each colour can be altered. The amounts are altered in steps of 10%. The total amount cannot exceed 100%. If you attempt to increase an amount of a colour when the total amount is already 100%, the other colours in the match will be scaled down accordingly. You may have an amount of colour which sums to less than 100%. In the above example the orange colour has been increased above 50%. This has scaled down the green so that the total amount does not exceed 100%.
If a colour that has been selected is now considered redundant, it can be removed from the match panel so that it will not be searched for. This is achieved by pressing the remove button underneath the corresponding colour bar in the selected colours panel. In the above example we removed the mint green colour from the match. Note that the amount of orange does not return to 100% but stays at the previous value.
The number of colours that can be selected for matching is unlimited. However, it is not recommended that more than 4 are used at once (simply because the match is unlikely to return any results).
Colours can be added multiple times to the selected match panel. This is not recommended and has undefined behaviour. It is likely that the values will be averaged for matching.
Colours that are similar and fall into the same histogram bin for matching will be averaged for matching.
When multiple colours are selected for matching, only images containing all of the colours will be returned as matches. If images contain less than all of the selected colours they are not considered as a match. The matching images will be returned in order of how close to the required amounts the image contains. So, if we submitted our query above with 50% mint green and 50% orange, an image with 40% mint green, and 40% orange, would be returned higher in the results than an image with 40% mint green, and only 20% orange.