kh-hsvpicker

Examples

<kh-hsvpicker type="wheel"/>

Default width = 178, height = 178.
You can specify a custom width for the wheel with the width attribute of the element (max = 400).

<kh-hsvpicker type="h-sv"/>

<kh-rgbpicker type="s-hv"/>

<kh-hsvpicker type="v-hs"/>

live examples:

Attributes

h

type: integer

The initial value of the hue of the color (in [0, 360]). Default = 0

If you want to get or set the hue value later, use the "h" property instead.

s

type: integer

The initial value of the saturation of the color (in [0, 100]). Default = 100

If you want to get or set the saturation value later, use the "s" property instead.

v

type: integer

The initial value of the value of the color (in [0, 100]). Default = 100

If you want to get or set this value later, use the "v" property instead.

type

type: one of these values

wheel: display an triangle inside a rainbow ring
h-sv: a vertical scale to select hue, and a square to select saturation and value
s-hv: a vertical scale to select saturation, and a square to select hue and value
v-hs: a vertical scale to select value, and a square to select hue and saturation

ringwidth

Only available for type "wheel"

type: integer

The initial width in pixel of the ring in the wheel selector. Default = 16, minimum = 6, maximum = 50.

xypickerwidth

Only available for types "h_sv", "h_sv", "v_hs"

type: integer

The width in pixel of the kh-xypicker. Default = 156

xypickerheight

Only available for types "h_sv", "h_sv", "v_hs"

type: integer

The height in pixel of the kh-xypicker. Default = 156

scalewidth

Only available for types "h_sv", "h_sv", "v_hs" i

type: integer

The width in pixel of the vertical scale. Default = 22

scaleheight

Only available for types "h_sv", "h_sv", "v_hs"

type: integer

The height in pixel of the vertical scale. Default = 156

Properties

h

type: integer

Get and set the hue of the selected color, in [0, 360]

s

type: integer

Get and set the saturation of the selected color, in [0, 100]

v

type: integer

Get and set the value of the selected color, in [0, 100]

wheelWidth

readonly

available only for type "wheel"

type: integer

The width of the wheel selector. When the element is constructed, the width attribute is used to calculate it, if any. Default is 178, maximum is 400. Note: The height of the wheel is the same value.

ringWidth

readonly

available only for type "wheel"

type: integer

The width of the ring for the wheel selector. When the element is constructed, the ringwidth attribute is used to calculate it, if any, default is 16.

FLAGS

readonly (constants)

type: integer

these flags are used when change events are fired by the element, event.detail may contain one of this value:

KH_FLAG_UNKNOWN: 0
KH_FLAG_H: 1
KH_FLAG_S: 2
KH_FLAG_V: 3
KH_FLAG_SV: 4
KH_FLAG_HV: 5
KH_FLAG_HS: 6

Methods

void setHSV(int h, int s, int v, optional boolean silently)

Set the h, s, v properties. If the parameter silently is set as true, no change event will be dispatched.

void setH(int h, optional boolean silently)

Set the h property. If the parameter silently is set as true, no change event will be dispatched.

void setS(int s, optional boolean silently)

Set the s property. If the parameter silently is set as true, no change event will be dispatched.

void setV(int v, optional boolean silently)

Set the v property. If the parameter silently is set as true, no change event will be dispatched.

void setHS(int h, int s, int silently)

Only available for type "v-hs"

Set the h and s properties. If the parameter silently is set as true, no change event will be dispatched.

void setHV(int h, int v, optional boolean silently)

Only available for type "s-hv"

Set the h and v properties. If the parameter silently is set as true, no change event will be dispatched.

void setSV(int s, int v, optional boolean silently)

Only available for type "wheel" and "h-sv"

Set the s and v properties. If the parameter silently is set as true, no change event will be dispatched.