Class: ColorPicker

ColorPicker~ColorPicker()

new ColorPicker()

Pure JavaScript color picker.
Source:
See:

Members

(readonly) paletteIndexes :number

enumeration of available palettes.
Type:
  • number
Properties:
Name Type Description
BGYW number blue, green, yellow, white palette. This is the default palette
monochrome number monochrome palette
bidirectional number red, black, green palette
rainbow number rainbow palette
Source:

Methods

create(elSliderWrapper, optionsopt)

creates an instance of ColorPicker
Parameters:
Name Type Attributes Description
elSliderWrapper string | HTMLElement id of the ColorPicker element or ColorPicker element
options object <optional>
 followed options is availablee
Properties
Name Type Attributes Description
palette paletteIndexes | Array.<object> | Palette <optional>
 Palette index or palette array or Palette. The following indexes are available: 
ColorPicker.paletteIndexes.BGYW: 0 - blue, green, yellow, white palette.
ColorPicker.paletteIndexes.monochrome: 1,
ColorPicker.paletteIndexes.bidirectional: 2,//red, black, green
ColorPicker.paletteIndexes.rainbow: 3,
Default is paletteIndexes.BGYW index.
Example of palette array:
		[
			{ percent: 0, r: 0, g: 0, b: 0, },
			{ percent: 10, r: 0xff, g: 255, b: 0xff, },
			{ percent: 100, r: 0xff, g: 255, b: 0xff, },
		]
Palette see function Palette( options ) for details
orientation object <optional>
 orientation of the element. Available "horizontal" or "vertical" orientation
direction object <optional>
 true - position of the mouse pointer relative left side for 'horizontal' slider or bottom side for 'vertical' slider in the percents.

false - position of the mouse pointer relative right side for 'horizontal' slider or relative top side for 'vertical' slider in the percents.

Default is true.
style object <optional>
 style statements
Properties
Name Type Attributes Description
width object <optional>
 width of the element. Default is 200px for options.orientation = "horizontal" and 30px for options.orientation = "vertical".
height object <optional>
 height of the element. Default is 30px for options.orientation = "horizontal" and 200px for options.orientation = "vertical".
border string <optional>
 elSliderWrapper border. Example: '1px solid black'
sliderIndicator object <optional>
 adds a slider-indicator element for choose by mouse a color from palette. Default is undefuned
Properties
Name Type Attributes Description
callback callback <optional>
 Called whenever the color is changed provided chosen color in RGB HEX format.
value number <optional>
 Initial position of the slider indicator in percent. Default is 0.
onError onError <optional>
 Called whenever an error has occurred.
duplicate boolean <optional>
 true - allow to create two or more palettes on your web page.
Source:

getPalette() → {Array.<object>}

Source:
Returns:
palette array
Type
Array.<object>

getPaletteIndex()

Source:
Returns:
Index of palette. 
0 - BGYW
1 - monochrome
2 - bidirectional
3 - rainbow

hsv2rgb(stringPercent, minopt, maxopt) → {object}

converts a percent or value from min to max to object with r, g, b, hex and percent.
Parameters:
Name Type Attributes Description
stringPercent number coordinate of color from palette in percent or value from min to max
min number <optional>
 min stringPercent.
max number <optional>
 max stringPercent.
Source:
Returns:
object with r, g, b, hex and percent
Type
object

isPalette()

Source:
Returns:
true

palette(optionsopt)

create palette
Parameters:
Name Type Attributes Description
options object <optional>
 the following options are available
Properties
Name Type Attributes Description
palette paletteIndexes | Array.<object> <optional>
 Palette index or palette array. The following indexes are available: 
paletteIndexes.BGYW: 0 - blue, green, yellow, white palette.
paletteIndexes.monochrome: 1,
paletteIndexes.bidirectional: 2,//red, black, green
paletteIndexes.rainbow: 3,
Default is paletteIndexes.BGYW index.
Example of palette array:
		[
			{ percent: 0, r: 0, g: 0, b: 0, },
			{ percent: 10, r: 0xff, g: 255, b: 0xff, },
			{ percent: 100, r: 0xff, g: 255, b: 0xff, },
		]
Source:

toColor(value, minopt, maxopt) → {THREE.Color}

converts a value in percentages to color.
Parameters:
Name Type Attributes Description
value number coordinate of color from palette in percent. Default value range from 0 to 100.
min number <optional>
 minimal value
max number <optional>
 maximal value
Source:
Returns:
color
Type
THREE.Color