Geckos Documentation

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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 [[http://jscolor.com/|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 :

<code javascript>
"fields": [
    { "name": "myfieldname", "label":"My field", "default": "#226666", "type": "color" }
]
</code>

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 [[https://github.com/tkrotoff/jquery-simplecolorpicker|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 :

<code javascript>
"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" }
      ]
    }
]
</code>

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_Variables|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 [[https://github.com/bgrins/TinyColor|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 [[Advanced_String_Variables#special_values|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 :

<code>
$myField.function1.function2.function3$
</code>

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 :

<code>
$myField.function1.function2.R$
</code>

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 [[https://github.com/bgrins/TinyColor|TinyColor documentation]], or to this [[http://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm|page on Color Theory]].

===== Variable as code =====

You can use Javascript code in a template through the [[Code_Variables]]. A color variable used in such a way will return a [[https://github.com/bgrins/TinyColor|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) :

<code javascript>
"canvasFields": [
    { "type": "textbox", "text": "$name$", "fill": "{{value = tinycolor.mostReadable(card[mainColor].toHexString(), ['#FFF', '#888', '#222']).toHexString();}}" }
]
</code>
Geckos Documentation

User Tools

Site Tools

Page Tools
