Class Index | File Index

Classes


Class pwlib.extensions.colormixer

The Color Mixer extension.
Defined in: colormixer.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
Field Summary
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 Summary
Method Attributes Method Name and Description
 
calc_m1x3(a, b)
Calculate the product of two matrices.
<private>  
Calculate the matrix inverse.
<private>  
Convert CMYK to RGB (internally).
 
Load a color palette.
<private>  
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>  
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>  
The click event handler for the Accept button.
<private>  
The click event handler for the Cancel button.
<private>  
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>  
The guiTabActivate event handler for the tab panel which holds the color mixer and the color palettes.
 
Register the Color Mixer extension.
<private>  
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>  
This function calculates lots of values used by the other CIE Lab-related functions.
<private>  
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>  
Convert RGB to CMYK.
<private>  
Convert RGB to hexadecimal representation (internally).
<private>  
Convert RGB to HSV (internally).
<private>  
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 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:

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.

Documentation generated by JsDoc Toolkit 2.3.0 on Sat Jun 26 2010 21:57:01 GMT+0300 (EEST)