Class pwlib.extensions.colormixer
The Color Mixer extension.
Defined in: colormixer.js.
| Constructor Attributes | Constructor Name and Description |
|---|---|
| Field Attributes | Field Name and Description |
|---|---|
| <private> |
The "absolute maximum" value is determined based on the min/max values.
|
|
Holds the current color in several formats: RGB, HEX, HSV, CIE Lab, and
CMYK.
|
|
| <private> |
Holds a reference to the 2D context of the color mixer Canvas element.
|
| <private> |
Holds references to various DOM elements.
|
| <private> |
Holds references to all the DOM input fields, for each color channel.
|
| <private> |
Reference to the Color Mixer floating panel GUI component object.
|
| <private> |
Reference to the Color Mixer tab panel GUI component object which holds the
inputs.
|
| <private> |
Reference to the Color Mixer tab panel GUI component object which holds the
Canvas used for color space visualisation and the color palettes selector.
|
|
Target input hooks.
|
| Method Attributes | Method Name and Description |
|---|---|
|
calc_m1x3(a, b)
Calculate the product of two matrices.
|
|
| <private> |
calc_m3inv(m)
Calculate the matrix inverse.
|
| <private> |
cmyk2rgb()
Convert CMYK to RGB (internally).
|
|
cpalette_load(id)
Load a color palette.
|
|
| <private> |
cpalette_loaded(xhr)
The
onreadystatechange event handler for the color palette
XMLHttpRequest object. |
| <private> |
cpalette_show(colors)
Show a color palette.
|
| <private> |
draw_chart(updated_ckey)
Draw the color space visualisation.
|
| <private> |
draw_slider(updated_ckey)
Draw the color slider on the Canvas element.
|
| <private> |
ev_canvas(ev)
The mouse events handler for the Canvas controls.
|
| <private> |
The
change event handler for the Color Mixer inputs of
type=radio. |
| <private> |
The
change event handler for the color palette input element. |
| <private> |
ev_click_accept(ev)
The
click event handler for the Accept button. |
| <private> |
ev_click_cancel(ev)
The
click event handler for the Cancel button. |
| <private> |
ev_click_color(ev)
The
click event handler for colors in the color palette list. |
| <private> |
The
click event handler for the "Pick color" button. |
| <private> |
The
click event handler for the "Save color" button. |
| <private> |
The
input and change event handler for all the
Color Mixer inputs. |
|
The
guiFloatingPanelStateChange event handler for the Color
Mixer panel. |
|
| <private> |
ev_tabActivate(ev)
The
guiTabActivate event handler for the tab panel which holds
the color mixer and the color palettes. |
|
Register the Color Mixer extension.
|
|
| <private> |
hex2rgb()
Convert the hexadecimal representation of color to RGB values (internally).
|
|
hide()
Hide the Color Mixer floating panel.
|
|
| <private> |
hsv2rgb(no_update, hsv)
Convert HSV to RGB.
|
| <private> |
init_lab()
This function calculates lots of values used by the other CIE Lab-related
functions.
|
| <private> |
lab2rgb()
Convert CIE Lab values to RGB values (internally).
|
| <private> |
lab2xyz(cie_l, cie_a, cie_b)
Convert CIE Lab values to XYZ color values.
|
| <private> |
rgb2cmyk()
Convert RGB to CMYK.
|
| <private> |
rgb2hex()
Convert RGB to hexadecimal representation (internally).
|
| <private> |
rgb2hsv()
Convert RGB to HSV (internally).
|
| <private> |
rgb2lab()
Convert RGB to CIE Lab (internally).
|
| <private> |
rgb2xyz(rgb)
Convert RGB values to XYZ color values.
|
|
show(target, color)
Show the Color Mixer.
|
|
| <private> |
update_canvas(updated_ckey, force)
Update the color space visualisation.
|
| <private> |
update_ckey_active(ckey, only_vars)
Update the active color key.
|
|
update_color(ckey)
Update the current color.
|
|
| <private> |
Recalculate the dimensions and coordinates for the slider and for the color
space visualisation within the Canvas element.
|
| <private> |
Update the color inputs.
|
| <private> |
Update the color preview.
|
| <private> |
xyz2lab(xyz)
Convert XYZ color values into CIE Lab values.
|
| <private> |
xyz2rgb(xyz)
Convert XYZ color values to RGB.
|
Class Detail
pwlib.extensions.colormixer(app)
- Parameters:
- {PaintWeb} app
- Reference to the main paint application object.
Field Detail
<private>
abs_max
The "absolute maximum" value is determined based on the min/max values.
For min -100 and max 100, the abs_max is 200.
{Object}
color
Holds the current color in several formats: RGB, HEX, HSV, CIE Lab, and
CMYK. Except for 'hex', all the values should be from 0 to 1.
<private>
{CanvasRenderingContext2D}
context2d
Holds a reference to the 2D context of the color mixer Canvas element. This
is where the color chart and the slider are both drawn.
<private>
{Object}
elems
Holds references to various DOM elements.
<private>
{Object}
inputs
Holds references to all the DOM input fields, for each color channel.
<private>
{pwlib.guiFloatingPanel}
panel
Reference to the Color Mixer floating panel GUI component object.
<private>
{pwlib.guiTabPanel}
panelInputs
Reference to the Color Mixer tab panel GUI component object which holds the
inputs.
<private>
{pwlib.guiTabPanel}
panelSelector
Reference to the Color Mixer tab panel GUI component object which holds the
Canvas used for color space visualisation and the color palettes selector.
{Object}
targetInput
Target input hooks. This object must hold two methods:
show()which is invoked by this extension when the Color Mixer panel shows up on screen.hide()which is invoked when the Color Mixer panel is hidden from the screen.
The object must also hold information about the associated configuration property: configProperty, configGroup and configGroupRef.
Method Detail
{Array}
calc_m1x3(a, b)
Calculate the product of two matrices.
Matrices are one-dimensional arrays of the form [a0, a1, a2, ...,
b0, b1, b2, ...] where each element from the matrix is given in
order, from the left to the right, row by row from the top to the bottom.
- Parameters:
- {Array} a
- The first matrix must be one row and three columns.
- {Array} b
- The second matrix must be three rows and three columns.
- Returns:
- {Array} The matrix product, one row and three columns.
<private>
{Array|false}
calc_m3inv(m)
Calculate the matrix inverse.
Matrices are one-dimensional arrays of the form [a0, a1, a2, ...,
b0, b1, b2, ...] where each element from the matrix is given in
order, from the left to the right, row by row from the top to the bottom.
- Parameters:
- {Array} m
- The square matrix which must have three rows and three columns.
- Returns:
- {Array|false} The computed matrix inverse, or false if the matrix determinant was 0 - the given matrix is not invertible.
<private>
cmyk2rgb()
Convert CMYK to RGB (internally).
{Boolean}
cpalette_load(id)
Load a color palette. Loading is performed asynchronously.
- Parameters:
- {String} id
- The color palette ID.
- Returns:
- {Boolean} True if the load was successful, or false if not.
<private>
cpalette_loaded(xhr)
The
onreadystatechange event handler for the color palette
XMLHttpRequest object.
- Parameters:
- {XMLHttpRequest} xhr
- The XMLHttpRequest object.
<private>
{Boolean}
cpalette_show(colors)
Show a color palette. This method adds all the colors in the DOM as
individual anchor elements which users can click on.
- Parameters:
- {Array} colors
- The array which holds each color in the palette.
- Returns:
- {Boolean} True if the operation was successful, or false if not.
<private>
draw_chart(updated_ckey)
Draw the color space visualisation.
- Parameters:
- {String} updated_ckey
- The color key that was updated. This is used to determine if the Canvas needs to be updated or not.
<private>
draw_slider(updated_ckey)
Draw the color slider on the Canvas element.
- Parameters:
- {String} updated_ckey
- The color key that was updated. This is used to determine if the Canvas needs to be updated or not.
<private>
ev_canvas(ev)
The mouse events handler for the Canvas controls. This method determines
the region the user is using, and it also updates the color values for the
active color key. The Canvas and all the inputs in the color mixer are
updated as needed.
- Parameters:
- {Event} ev
- The DOM Event object.
<private>
ev_change_ckey_active()
The
change event handler for the Color Mixer inputs of
type=radio. This method allows users to change the active color key - used
for the color space visualisation.
<private>
ev_change_cpalette(ev)
The
change event handler for the color palette input element.
This loads the color palette the user selected.
- Parameters:
- {Event} ev
- The DOM Event object.
<private>
ev_click_accept(ev)
The
click event handler for the Accept button. This method
dispatches the pwlib.appEvent.configChange application event for
the configuration property associated to the target input, and hides the
Color Mixer floating panel.
- Parameters:
- {Event} ev
- The DOM Event object.
<private>
ev_click_cancel(ev)
The
click event handler for the Cancel button. This method
hides the Color Mixer floating panel.
- Parameters:
- {Event} ev
- The DOM Event object.
<private>
ev_click_color(ev)
The
click event handler for colors in the color palette list.
This event handler is also used for the "old color" element. This method
updates the color mixer to use the color the user picked.
- Parameters:
- {Event} ev
- The DOM Event object.
<private>
ev_click_pickColor(ev)
The
click event handler for the "Pick color" button. This
method activates the color picker tool.
- Parameters:
- {Event} ev
- The DOM Event object.
<private>
ev_click_saveColor(ev)
The
click event handler for the "Save color" button. This
method adds the current color into the "_saved" color palette.
- Parameters:
- {Event} ev
- The DOM Event object.
<private>
ev_input_change()
The
input and change event handler for all the
Color Mixer inputs.
ev_panel_stateChange(ev)
The
guiFloatingPanelStateChange event handler for the Color
Mixer panel. This method ensures the Color Mixer is properly closed.
- Parameters:
- {pwlib.appEvent.guiFloatingPanelStateChange} ev
- The application event object.
<private>
ev_tabActivate(ev)
The
guiTabActivate event handler for the tab panel which holds
the color mixer and the color palettes. When switching back to the color
mixer, this method updates the Canvas.
- Parameters:
- {pwlib.appEvent.guiTabActivate} ev
- The application event object.
{Boolean}
extensionRegister(ev)
Register the Color Mixer extension.
- Parameters:
- ev
- Returns:
- {Boolean} True if the extension can be registered properly, or false if not.
<private>
hex2rgb()
Convert the hexadecimal representation of color to RGB values (internally).
hide()
Hide the Color Mixer floating panel. This method invokes the
hide() method provided by the target input.
<private>
{Array}
hsv2rgb(no_update, hsv)
Convert HSV to RGB.
- Parameters:
- {Boolean} no_update Optional
- Tells the function to not update the internal RGB color values.
- {Array} hsv Optional
- The array holding the HSV values you want to convert to RGB. This array must have three elements ordered as: hue, saturation and value - all between 0 and 1. If you do not provide the array, then the internal HSV color values are used.
- Returns:
- {Array} The RGB values converted from HSV. The array has three elements ordered as: red, green and blue - all with values between 0 and 1.
<private>
{Boolean}
init_lab()
This function calculates lots of values used by the other CIE Lab-related
functions.
- Returns:
- {Boolean} True if the initialization was successful, or false if not.
<private>
lab2rgb()
Convert CIE Lab values to RGB values (internally).
<private>
{Array}
lab2xyz(cie_l, cie_a, cie_b)
Convert CIE Lab values to XYZ color values.
- Parameters:
- {Number} cie_l
- The color lightness value.
- {Number} cie_a
- The a* color opponent.
- {Number} cie_b
- The b* color opponent.
- Returns:
- {Array} An array holding the XYZ color values in order: X, Y and Z.
<private>
rgb2cmyk()
Convert RGB to CMYK. This uses the current color RGB values and updates the
CMYK values accordingly.
<private>
rgb2hex()
Convert RGB to hexadecimal representation (internally).
<private>
rgb2hsv()
Convert RGB to HSV (internally).
<private>
rgb2lab()
Convert RGB to CIE Lab (internally).
<private>
{Array}
rgb2xyz(rgb)
Convert RGB values to XYZ color values.
- Parameters:
- {Array} rgb
- The array holding the RGB values in order: red, green and blue.
- Returns:
- {Array} An array holding the XYZ color values in order: X, Y and Z.
show(target, color)
Show the Color Mixer.
- Parameters:
- {Object} target
- The target input object.
- {Object} color
- The color you want to set before the Color Mixer is shown. The object must have four properties: red, green, blue and alpha. All the values must be between 0 and 1. This color becomes the "active color" and the "old color".
- See:
- this.targetInput for more information about the target object.
<private>
{Boolean}
update_canvas(updated_ckey, force)
Update the color space visualisation. This method updates the color chart
and/or the color slider, and the associated controls, each as needed when
a color key is updated.
- Parameters:
- {String} updated_ckey
- The color key that was updated.
- {Boolean} force Optional, Default: false
- Tells the function to force an update. The Canvas is not updated when the color mixer panel is not visible.
- Returns:
- {Boolean} If the operation was successful, or false if not.
<private>
{Boolean}
update_ckey_active(ckey, only_vars)
Update the active color key. This method updates the Canvas accordingly.
- Parameters:
- {String} ckey
- The color key you want to be active.
- {Boolean} only_vars Optional
- Tells if you want only the variables to be updated - no Canvas updates. This is true only during the Color Mixer initialization.
- Returns:
- {Boolean} True if the operation was successful, or false if not.
update_color(ckey)
Update the current color. Once a color value is updated, this method is
called to keep the rest of the color mixer in sync: for example, when a RGB
value is updated, it needs to be converted to HSV, CMYK and all of the
other formats. Additionally, this method updates the color preview, the
controls on the Canvas and the input values.
You need to call this function whenever you update the color manually.
- Parameters:
- {String} ckey
- The color key that was updated.
<private>
update_dimensions()
Recalculate the dimensions and coordinates for the slider and for the color
space visualisation within the Canvas element.
This method is an event handler for the pwlib.appEvent.canvasSizeChange application event.
<private>
update_inputs()
Update the color inputs. This method takes the internal color values and
shows them in the DOM input elements.
<private>
update_preview()
Update the color preview.
<private>
{Array}
xyz2lab(xyz)
Convert XYZ color values into CIE Lab values.
- Parameters:
- {Array} xyz
- The array holding the XYZ color values in order: X, Y and Z.
- Returns:
- {Array} An array holding the CIE Lab values in order: L, a and b.
<private>
{Array}
xyz2rgb(xyz)
Convert XYZ color values to RGB.
- Parameters:
- {Array} xyz
- The array holding the XYZ color values in order: X, Y and Z
- Returns:
- {Array} An array holding the RGB values in order: red, green and blue.