User Tools

Site Tools

Translations of this page?:

en:template:color_picker

Color Picker

Color Picker fields are controls limited to the selection of a color. The selected color can then be used in the definition of the canvas elements.

Two versions of this field exist.

The first one is a frame with the RGB Color Palette, in which you can click to select any color. This control comes from JSColor. This method is a good one when you want the final user to be able to select any color he wants. To create such a field, here's the code needed :

"fields": [
    { "name": "myfieldname", "label":"My field", "default": "#226666", "type": "color" }
]

The second one is a dropdown menu with a choice of colors. Those colors are defined inside the template, and the user can only select on of those. The control comes from JQuery.SimpleColorPicker. This method is to used when you want to limit the colors to a defined palette (for example, the colours of the faction of your game's universe). To create such a field, here's the code needed :

"fields": [
    { "name": "myfieldname", "label":"My field", "default": "#226666", "type": "color",
      "options": [
        { "text": "Color 1", "colorValue": "#98F614" },
        { "text": "Color 2", "colorValue": "#226666" },
        { "text": "Color 3", "colorValue": "#9944DD" }
      ]
    }
]

In both methods, the default property is set to a RGB value, with the starting #. If a list of options is defined, this default value needs to be from the list (if not, or if no default is set, the first one will be used as default).

Any amount of colors can be put in the list of options.

Using the variable

With each Color Picker field created, a variable is created. To use it in the canvasFields, have the value of a property set to the string $myfieldname. It will be replaced by the value set in the field.

Note that this value will not create a color, because of the missing # character. But you can set an Advanced String Variable in the form of #$myfieldname$ to set a valid color. The properties fill, backgroundColor, stroke are perfect match for this kind of variable.

Special Values

Geckos uses the TinyColor library to manipulate the colors. With the Advanced String Variable of a color field, many functions are available.

As stated above, the classic $myField$ variable will be replaced by the hexadecimal value of the color, without the # character. But some Special Values are also available.

Simple values

$myField.text$ returns the hexadecimal value of the color : FF0000 for red for example.

$myField.hexa$ returns the hexadecimal code of the color : #FF0000 for red for example.

Consecutive values

In addition of the classic values above, a Color variable has multiple properties than can be used consecutively. What does that mean ? Well, for example, you might want to darken a color, and then apply an alpha value to it, or get the complement of a color, and lighten that value.

The following functions / properties can all be called consecutively. The functions will be called one after the other, the first one being the one on the left :

$myField.function1.function2.function3$

This kind of call will always return a rgb value of the color : rgb(R, G, B) or rgba(R, G, B, A) (if there is alpha transparency). This type of string will work with the FabricJS engine that creates the image card.

It is also possible to only get the Red, Green or Blue values of a color. Finish the Consecutive calls by the functions R, G or B to get an integer value between 0 and 255 :

$myField.function1.function2.R$

Now, let's see the list of functions you can use with a color variable.

You can set the transparency of your color with the alpha function. You need to add a value between 0 and 100 (a percentage) to set the value of the transparency. 0 will render a full transparent color, 100 will have no transparency. For example, you can use $myColor.alpha50$.

You can darken a color with the darken function. You can set the amount of dark you add, from 0 to 99 (99 will be the darkest). By default, this value is set to 10. For example, $myColor.darken$ is similar to $myColor.darken10$.

You can lighten a color with the lighten function. You can set the amount of light you add, from 0 to 99 (99 will be the lightest). By default, this value is set to 10. For example, $myColor.lighten$ is similar to $myColor.lighten10$.

You can brighten a color with the brighten function. You can set the amount of bright you add, from 0 to 99 (99 will be the brightest). By default, this value is set to 10. For example, $myColor.brighten$ is similar to $myColor.brighten10$.

You can desaturate a color with the desaturate function. You can set the degree of desaturation, from 0 to 99 (99 will be the most desaturate). By default, this value is set to 10. For example, $myColor.desaturate$ is similar to $myColor.desaturate10$.

You can saturate a color with the saturate function. You can set the degree of saturation, from 0 to 99 (99 will be the most saturate). By default, this value is set to 10. For example, $myColor.saturate$ is similar to $myColor.saturate10$.

You can get the greyscale value of a color with the greyscale function : $myColor.greyscale$.

You can get the complement value of a color with the complement function : $myColor.complement$.

You can get the split-complement values of a color with the splitcomplement function. $myColor.splitcomplement1$ will return the base color, and is pretty useless. $myColor.splitcomplement2$ and $myColor.splitcomplement3$ will return the two Split Complement of your base color.

You can get the triad values of a color with the triad function. $myColor.triad1$ will return the base color, and is pretty useless. $myColor.triad2$ and $myColor.triad3$ will return the two additional colors of the Triad containing your base color.

You can get the tetrad values of a color with the tetrad function. $myColor.tetrad1$ will return the base color, and is pretty useless. $myColor.tetrad2$, $myColor.tetrad3$ and $myColor.tetrad4$ will return the three additional colors of the Tetrad containing your base color.

You can get the analoguous values of a color with the analogous function. $myColor.analogous1$ will return the base color, and is pretty useless. $myColor.analogousX$, X being a value from 2 to 6, will return an analoguous color of your base color.

For a more complete description of each of these functions, look at the TinyColor documentation, or to this page on Color Theory.

Variable as code

You can use Javascript code in a template through the Javascript code in Variables. A color variable used in such a way will return a TinyColor object, with all the resulting functions. Even the ones that are not documented above. For example, you could want to set the color of a text to the best readable color of a list, depending on the color background (which the user can define) :

"canvasFields": [
    { "type": "textbox", "text": "$name$", "fill": "{{value = tinycolor.mostReadable(card[mainColor].toHexString(), ['#FFF', '#888', '#222']).toHexString();}}" }
]
en/template/color_picker.txt · Last modified: 2017/07/21 11:22 by Nicolas Ronvel