?  search:
summary | log | graphiclog1 | graphiclog2 | commit | commitdiff | tree | refs | edit | fork
blame | history | raw | HEAD
Updated PaintWeb to the latest snapshot.
[moodle/mihaisucan.git] / lib / paintweb / docs / api-ref / symbols / pwlib.extensions.colormixer.html
blobb709b95676ce56a5d7a18ebd04368d452cb37f6a
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4 <head>
5 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6 <meta name="generator" content="JsDoc Toolkit" />
7
8 <title>JsDoc Reference - pwlib.extensions.colormixer</title>
9
10 <style type="text/css">
11 /* default.css */
12 body
13 {
14 font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
15 width: 800px;
16 }
17
18 .header
19 {
20 clear: both;
21 background-color: #ccc;
22 padding: 8px;
23 }
24
25 h1
26 {
27 font-size: 150%;
28 font-weight: bold;
29 padding: 0;
30 margin: 1em 0 0 .3em;
31 }
32
33 hr
34 {
35 border: none 0;
36 border-top: 1px solid #7F8FB1;
37 height: 1px;
38 }
39
40 pre.code
41 {
42 display: block;
43 padding: 8px;
44 border: 1px dashed #ccc;
45 }
46
47 #index
48 {
49 margin-top: 24px;
50 float: left;
51 width: 160px;
52 position: absolute;
53 left: 8px;
54 background-color: #F3F3F3;
55 padding: 8px;
56 }
57
58 #content
59 {
60 margin-left: 190px;
61 width: 600px;
62 }
63
64 .classList
65 {
66 list-style-type: none;
67 padding: 0;
68 margin: 0 0 0 8px;
69 font-family: arial, sans-serif;
70 font-size: 1em;
71 overflow: auto;
72 }
73
74 .classList li
75 {
76 padding: 0;
77 margin: 0 0 8px 0;
78 }
79
80 .summaryTable { width: 100%; }
81
82 h1.classTitle
83 {
84 font-size:170%;
85 line-height:130%;
86 }
87
88 h2 { font-size: 110%; }
89 caption, div.sectionTitle
90 {
91 background-color: #7F8FB1;
92 color: #fff;
93 font-size:130%;
94 text-align: left;
95 padding: 2px 6px 2px 6px;
96 border: 1px #7F8FB1 solid;
97 }
98
99 div.sectionTitle { margin-bottom: 8px; }
100 .summaryTable thead { display: none; }
101
102 .summaryTable td
103 {
104 vertical-align: top;
105 padding: 4px;
106 border-bottom: 1px #7F8FB1 solid;
107 border-right: 1px #7F8FB1 solid;
108 }
109
110 /*col#summaryAttributes {}*/
111 .summaryTable td.attributes
112 {
113 border-left: 1px #7F8FB1 solid;
114 width: 140px;
115 text-align: right;
116 }
117
118 td.attributes, .fixedFont
119 {
120 line-height: 15px;
121 color: #002EBE;
122 font-family: "Courier New",Courier,monospace;
123 font-size: 13px;
124 }
125
126 .summaryTable td.nameDescription
127 {
128 text-align: left;
129 font-size: 13px;
130 line-height: 15px;
131 }
132
133 .summaryTable td.nameDescription, .description
134 {
135 line-height: 15px;
136 padding: 4px;
137 padding-left: 4px;
138 }
139
140 .summaryTable { margin-bottom: 8px; }
141
142 ul.inheritsList
143 {
144 list-style: square;
145 margin-left: 20px;
146 padding-left: 0;
147 }
148
149 .detailList {
150 margin-left: 20px;
151 line-height: 15px;
152 }
153 .detailList dt { margin-left: 20px; }
154
155 .detailList .heading
156 {
157 font-weight: bold;
158 padding-bottom: 6px;
159 margin-left: 0;
160 }
161
162 .light, td.attributes, .light a:link, .light a:visited
163 {
164 color: #777;
165 font-style: italic;
166 }
167
168 .fineprint
169 {
170 text-align: right;
171 font-size: 10px;
172 }
173 </style>
174 </head>
175
176 <body>
177 <!-- ============================== header ================================= -->
178 <!-- begin static/header.html -->
179 <div id="header">
180 </div>
181 <!-- end static/header.html -->
182
183 <!-- ============================== classes index ============================ -->
184 <div id="index">
185 <!-- begin publish.classesIndex -->
186 <div align="center"><a href="../index.html">Class Index</a>
187 | <a href="../files.html">File Index</a></div>
188 <hr />
189 <h2>Classes</h2>
190 <ul class="classList">
191
192 <li><i><a href="../symbols/_global_.html">_global_</a></i></li>
193
194 <li><a href="../symbols/PaintWeb.html">PaintWeb</a></li>
195
196 <li><a href="../symbols/pwlib.html">pwlib</a></li>
197
198 <li><a href="../symbols/pwlib.appEvent.html">pwlib.appEvent</a></li>
199
200 <li><a href="../symbols/pwlib.appEvent.appDestroy.html">pwlib.appEvent.appDestroy</a></li>
201
202 <li><a href="../symbols/pwlib.appEvent.appInit.html">pwlib.appEvent.appInit</a></li>
203
204 <li><a href="../symbols/pwlib.appEvent.canvasSizeChange.html">pwlib.appEvent.canvasSizeChange</a></li>
205
206 <li><a href="../symbols/pwlib.appEvent.clipboardUpdate.html">pwlib.appEvent.clipboardUpdate</a></li>
207
208 <li><a href="../symbols/pwlib.appEvent.commandRegister.html">pwlib.appEvent.commandRegister</a></li>
209
210 <li><a href="../symbols/pwlib.appEvent.commandUnregister.html">pwlib.appEvent.commandUnregister</a></li>
211
212 <li><a href="../symbols/pwlib.appEvent.configChange.html">pwlib.appEvent.configChange</a></li>
213
214 <li><a href="../symbols/pwlib.appEvent.extensionRegister.html">pwlib.appEvent.extensionRegister</a></li>
215
216 <li><a href="../symbols/pwlib.appEvent.extensionUnregister.html">pwlib.appEvent.extensionUnregister</a></li>
217
218 <li><a href="../symbols/pwlib.appEvent.guiFloatingPanelStateChange.html">pwlib.appEvent.guiFloatingPanelStateChange</a></li>
219
220 <li><a href="../symbols/pwlib.appEvent.guiHide.html">pwlib.appEvent.guiHide</a></li>
221
222 <li><a href="../symbols/pwlib.appEvent.guiResizeEnd.html">pwlib.appEvent.guiResizeEnd</a></li>
223
224 <li><a href="../symbols/pwlib.appEvent.guiResizeStart.html">pwlib.appEvent.guiResizeStart</a></li>
225
226 <li><a href="../symbols/pwlib.appEvent.guiShow.html">pwlib.appEvent.guiShow</a></li>
227
228 <li><a href="../symbols/pwlib.appEvent.guiTabActivate.html">pwlib.appEvent.guiTabActivate</a></li>
229
230 <li><a href="../symbols/pwlib.appEvent.historyUpdate.html">pwlib.appEvent.historyUpdate</a></li>
231
232 <li><a href="../symbols/pwlib.appEvent.imageCrop.html">pwlib.appEvent.imageCrop</a></li>
233
234 <li><a href="../symbols/pwlib.appEvent.imageSave.html">pwlib.appEvent.imageSave</a></li>
235
236 <li><a href="../symbols/pwlib.appEvent.imageSaveResult.html">pwlib.appEvent.imageSaveResult</a></li>
237
238 <li><a href="../symbols/pwlib.appEvent.imageSizeChange.html">pwlib.appEvent.imageSizeChange</a></li>
239
240 <li><a href="../symbols/pwlib.appEvent.imageZoom.html">pwlib.appEvent.imageZoom</a></li>
241
242 <li><a href="../symbols/pwlib.appEvent.selectionChange.html">pwlib.appEvent.selectionChange</a></li>
243
244 <li><a href="../symbols/pwlib.appEvent.shadowAllow.html">pwlib.appEvent.shadowAllow</a></li>
245
246 <li><a href="../symbols/pwlib.appEvent.toolActivate.html">pwlib.appEvent.toolActivate</a></li>
247
248 <li><a href="../symbols/pwlib.appEvent.toolPreactivate.html">pwlib.appEvent.toolPreactivate</a></li>
249
250 <li><a href="../symbols/pwlib.appEvent.toolRegister.html">pwlib.appEvent.toolRegister</a></li>
251
252 <li><a href="../symbols/pwlib.appEvent.toolUnregister.html">pwlib.appEvent.toolUnregister</a></li>
253
254 <li><a href="../symbols/pwlib.appEvents.html">pwlib.appEvents</a></li>
255
256 <li><a href="../symbols/pwlib.browser.html">pwlib.browser</a></li>
257
258 <li><a href="../symbols/pwlib.dom.html">pwlib.dom</a></li>
259
260 <li><a href="../symbols/pwlib.dom.KeyboardEventListener.html">pwlib.dom.KeyboardEventListener</a></li>
261
262 <li><a href="../symbols/pwlib.dom.keyCodes.html">pwlib.dom.keyCodes</a></li>
263
264 <li><a href="../symbols/pwlib.dom.keyCodes_fixes.html">pwlib.dom.keyCodes_fixes</a></li>
265
266 <li><a href="../symbols/pwlib.dom.keyCodes_Safari2.html">pwlib.dom.keyCodes_Safari2</a></li>
267
268 <li><a href="../symbols/pwlib.dom.keyNames.html">pwlib.dom.keyNames</a></li>
269
270 <li><a href="../symbols/pwlib.extensions.html">pwlib.extensions</a></li>
271
272 <li><a href="../symbols/pwlib.extensions.colormixer.html">pwlib.extensions.colormixer</a></li>
273
274 <li><a href="../symbols/pwlib.extensions.moodle.html">pwlib.extensions.moodle</a></li>
275
276 <li><a href="../symbols/pwlib.extensions.mousekeys.html">pwlib.extensions.mousekeys</a></li>
277
278 <li><a href="../symbols/pwlib.fileCache.html">pwlib.fileCache</a></li>
279
280 <li><a href="../symbols/pwlib.gui.html">pwlib.gui</a></li>
281
282 <li><a href="../symbols/pwlib.guiColorInput.html">pwlib.guiColorInput</a></li>
283
284 <li><a href="../symbols/pwlib.guiFloatingPanel.html">pwlib.guiFloatingPanel</a></li>
285
286 <li><a href="../symbols/pwlib.guiResizer.html">pwlib.guiResizer</a></li>
287
288 <li><a href="../symbols/pwlib.guiTabPanel.html">pwlib.guiTabPanel</a></li>
289
290 <li><a href="../symbols/pwlib.tools.html">pwlib.tools</a></li>
291
292 <li><a href="../symbols/pwlib.tools.bcurve.html">pwlib.tools.bcurve</a></li>
293
294 <li><a href="../symbols/pwlib.tools.cpicker.html">pwlib.tools.cpicker</a></li>
295
296 <li><a href="../symbols/pwlib.tools.ellipse.html">pwlib.tools.ellipse</a></li>
297
298 <li><a href="../symbols/pwlib.tools.eraser.html">pwlib.tools.eraser</a></li>
299
300 <li><a href="../symbols/pwlib.tools.hand.html">pwlib.tools.hand</a></li>
301
302 <li><a href="../symbols/pwlib.tools.insertimg.html">pwlib.tools.insertimg</a></li>
303
304 <li><a href="../symbols/pwlib.tools.line.html">pwlib.tools.line</a></li>
305
306 <li><a href="../symbols/pwlib.tools.pencil.html">pwlib.tools.pencil</a></li>
307
308 <li><a href="../symbols/pwlib.tools.polygon.html">pwlib.tools.polygon</a></li>
309
310 <li><a href="../symbols/pwlib.tools.rectangle.html">pwlib.tools.rectangle</a></li>
311
312 <li><a href="../symbols/pwlib.tools.selection.html">pwlib.tools.selection</a></li>
313
314 <li><a href="../symbols/pwlib.tools.text.html">pwlib.tools.text</a></li>
315
316 </ul>
317 <hr />
318 <!-- end publish.classesIndex -->
319 </div>
320
321 <div id="content">
322 <!-- ============================== class title ============================ -->
323 <h1 class="classTitle">
324
325 Class pwlib.extensions.colormixer
326 </h1>
327
328 <!-- ============================== class summary ========================== -->
329 <p class="description">
330
331
332 The Color Mixer extension.
333
334
335 <br /><i>Defined in: </i> <a href="../symbols/src/src_extensions_colormixer.js.html">colormixer.js</a>.
336
337 </p>
338
339 <!-- ============================== constructor summary ==================== -->
340
341 <table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pwlib.extensions.colormixer.">
342 <caption>Class Summary</caption>
343 <thead>
344 <tr>
345 <th scope="col">Constructor Attributes</th>
346 <th scope="col">Constructor Name and Description</th>
347 </tr>
348 </thead>
349 <tbody>
350 <tr>
351 <td class="attributes">&nbsp;</td>
352 <td class="nameDescription" >
353 <div class="fixedFont">
354 <b><a href="../symbols/pwlib.extensions.colormixer.html#constructor">pwlib.extensions.colormixer</a></b>(app)
355 </div>
356 <div class="description"></div>
357 </td>
358 </tr>
359 </tbody>
360 </table>
361
362
363 <!-- ============================== properties summary ===================== -->
364
365
366
367 <table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pwlib.extensions.colormixer.">
368 <caption>Field Summary</caption>
369 <thead>
370 <tr>
371 <th scope="col">Field Attributes</th>
372 <th scope="col">Field Name and Description</th>
373 </tr>
374 </thead>
375 <tbody>
376
377 <tr>
378 <td class="attributes">&lt;private&gt; &nbsp;</td>
379 <td class="nameDescription">
380 <div class="fixedFont">
381 <b><a href="../symbols/pwlib.extensions.colormixer.html#abs_max">abs_max</a></b>
382 </div>
383 <div class="description">The "absolute maximum" value is determined based on the min/max values.</div>
384 </td>
385 </tr>
386
387 <tr>
388 <td class="attributes">&nbsp;</td>
389 <td class="nameDescription">
390 <div class="fixedFont">
391 <b><a href="../symbols/pwlib.extensions.colormixer.html#color">color</a></b>
392 </div>
393 <div class="description">Holds the current color in several formats: RGB, HEX, HSV, CIE Lab, and
394 CMYK.</div>
395 </td>
396 </tr>
397
398 <tr>
399 <td class="attributes">&lt;private&gt; &nbsp;</td>
400 <td class="nameDescription">
401 <div class="fixedFont">
402 <b><a href="../symbols/pwlib.extensions.colormixer.html#context2d">context2d</a></b>
403 </div>
404 <div class="description">Holds a reference to the 2D context of the color mixer Canvas element.</div>
405 </td>
406 </tr>
407
408 <tr>
409 <td class="attributes">&lt;private&gt; &nbsp;</td>
410 <td class="nameDescription">
411 <div class="fixedFont">
412 <b><a href="../symbols/pwlib.extensions.colormixer.html#elems">elems</a></b>
413 </div>
414 <div class="description">Holds references to various DOM elements.</div>
415 </td>
416 </tr>
417
418 <tr>
419 <td class="attributes">&lt;private&gt; &nbsp;</td>
420 <td class="nameDescription">
421 <div class="fixedFont">
422 <b><a href="../symbols/pwlib.extensions.colormixer.html#inputs">inputs</a></b>
423 </div>
424 <div class="description">Holds references to all the DOM input fields, for each color channel.</div>
425 </td>
426 </tr>
427
428 <tr>
429 <td class="attributes">&lt;private&gt; &nbsp;</td>
430 <td class="nameDescription">
431 <div class="fixedFont">
432 <b><a href="../symbols/pwlib.extensions.colormixer.html#panel">panel</a></b>
433 </div>
434 <div class="description">Reference to the Color Mixer floating panel GUI component object.</div>
435 </td>
436 </tr>
437
438 <tr>
439 <td class="attributes">&lt;private&gt; &nbsp;</td>
440 <td class="nameDescription">
441 <div class="fixedFont">
442 <b><a href="../symbols/pwlib.extensions.colormixer.html#panelInputs">panelInputs</a></b>
443 </div>
444 <div class="description">Reference to the Color Mixer tab panel GUI component object which holds the
445 inputs.</div>
446 </td>
447 </tr>
448
449 <tr>
450 <td class="attributes">&lt;private&gt; &nbsp;</td>
451 <td class="nameDescription">
452 <div class="fixedFont">
453 <b><a href="../symbols/pwlib.extensions.colormixer.html#panelSelector">panelSelector</a></b>
454 </div>
455 <div class="description">Reference to the Color Mixer tab panel GUI component object which holds the
456 Canvas used for color space visualisation and the color palettes selector.</div>
457 </td>
458 </tr>
459
460 <tr>
461 <td class="attributes">&nbsp;</td>
462 <td class="nameDescription">
463 <div class="fixedFont">
464 <b><a href="../symbols/pwlib.extensions.colormixer.html#targetInput">targetInput</a></b>
465 </div>
466 <div class="description">Target input hooks.</div>
467 </td>
468 </tr>
469
470 </tbody>
471 </table>
472
473
474
475
476
477 <!-- ============================== methods summary ======================== -->
478
479
480
481 <table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class pwlib.extensions.colormixer.">
482 <caption>Method Summary</caption>
483 <thead>
484 <tr>
485 <th scope="col">Method Attributes</th>
486 <th scope="col">Method Name and Description</th>
487 </tr>
488 </thead>
489 <tbody>
490
491 <tr>
492 <td class="attributes">&nbsp;</td>
493 <td class="nameDescription">
494 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#calc_m1x3">calc_m1x3</a></b>(a, b)
495 </div>
496 <div class="description">Calculate the product of two matrices.</div>
497 </td>
498 </tr>
499
500 <tr>
501 <td class="attributes">&lt;private&gt; &nbsp;</td>
502 <td class="nameDescription">
503 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#calc_m3inv">calc_m3inv</a></b>(m)
504 </div>
505 <div class="description">Calculate the matrix inverse.</div>
506 </td>
507 </tr>
508
509 <tr>
510 <td class="attributes">&lt;private&gt; &nbsp;</td>
511 <td class="nameDescription">
512 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#cmyk2rgb">cmyk2rgb</a></b>()
513 </div>
514 <div class="description">Convert CMYK to RGB (internally).</div>
515 </td>
516 </tr>
517
518 <tr>
519 <td class="attributes">&nbsp;</td>
520 <td class="nameDescription">
521 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#cpalette_load">cpalette_load</a></b>(id)
522 </div>
523 <div class="description">Load a color palette.</div>
524 </td>
525 </tr>
526
527 <tr>
528 <td class="attributes">&lt;private&gt; &nbsp;</td>
529 <td class="nameDescription">
530 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#cpalette_loaded">cpalette_loaded</a></b>(xhr)
531 </div>
532 <div class="description">The <code>onreadystatechange</code> event handler for the color palette
533 XMLHttpRequest object.</div>
534 </td>
535 </tr>
536
537 <tr>
538 <td class="attributes">&lt;private&gt; &nbsp;</td>
539 <td class="nameDescription">
540 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#cpalette_show">cpalette_show</a></b>(colors)
541 </div>
542 <div class="description">Show a color palette.</div>
543 </td>
544 </tr>
545
546 <tr>
547 <td class="attributes">&lt;private&gt; &nbsp;</td>
548 <td class="nameDescription">
549 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#draw_chart">draw_chart</a></b>(updated_ckey)
550 </div>
551 <div class="description">Draw the color space visualisation.</div>
552 </td>
553 </tr>
554
555 <tr>
556 <td class="attributes">&lt;private&gt; &nbsp;</td>
557 <td class="nameDescription">
558 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#draw_slider">draw_slider</a></b>(updated_ckey)
559 </div>
560 <div class="description">Draw the color slider on the Canvas element.</div>
561 </td>
562 </tr>
563
564 <tr>
565 <td class="attributes">&lt;private&gt; &nbsp;</td>
566 <td class="nameDescription">
567 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#ev_canvas">ev_canvas</a></b>(ev)
568 </div>
569 <div class="description">The mouse events handler for the Canvas controls.</div>
570 </td>
571 </tr>
572
573 <tr>
574 <td class="attributes">&lt;private&gt; &nbsp;</td>
575 <td class="nameDescription">
576 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#ev_change_ckey_active">ev_change_ckey_active</a></b>()
577 </div>
578 <div class="description">The <code>change</code> event handler for the Color Mixer inputs of
579 type=radio.</div>
580 </td>
581 </tr>
582
583 <tr>
584 <td class="attributes">&lt;private&gt; &nbsp;</td>
585 <td class="nameDescription">
586 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#ev_change_cpalette">ev_change_cpalette</a></b>(ev)
587 </div>
588 <div class="description">The <code>change</code> event handler for the color palette input element.</div>
589 </td>
590 </tr>
591
592 <tr>
593 <td class="attributes">&lt;private&gt; &nbsp;</td>
594 <td class="nameDescription">
595 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#ev_click_accept">ev_click_accept</a></b>(ev)
596 </div>
597 <div class="description">The <code>click</code> event handler for the Accept button.</div>
598 </td>
599 </tr>
600
601 <tr>
602 <td class="attributes">&lt;private&gt; &nbsp;</td>
603 <td class="nameDescription">
604 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#ev_click_cancel">ev_click_cancel</a></b>(ev)
605 </div>
606 <div class="description">The <code>click</code> event handler for the Cancel button.</div>
607 </td>
608 </tr>
609
610 <tr>
611 <td class="attributes">&lt;private&gt; &nbsp;</td>
612 <td class="nameDescription">
613 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#ev_click_color">ev_click_color</a></b>(ev)
614 </div>
615 <div class="description">The <code>click</code> event handler for colors in the color palette list.</div>
616 </td>
617 </tr>
618
619 <tr>
620 <td class="attributes">&lt;private&gt; &nbsp;</td>
621 <td class="nameDescription">
622 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#ev_click_pickColor">ev_click_pickColor</a></b>(ev)
623 </div>
624 <div class="description">The <code>click</code> event handler for the "Pick color" button.</div>
625 </td>
626 </tr>
627
628 <tr>
629 <td class="attributes">&lt;private&gt; &nbsp;</td>
630 <td class="nameDescription">
631 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#ev_click_saveColor">ev_click_saveColor</a></b>(ev)
632 </div>
633 <div class="description">The <code>click</code> event handler for the "Save color" button.</div>
634 </td>
635 </tr>
636
637 <tr>
638 <td class="attributes">&lt;private&gt; &nbsp;</td>
639 <td class="nameDescription">
640 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#ev_input_change">ev_input_change</a></b>()
641 </div>
642 <div class="description">The <code>input</code> and <code>change</code> event handler for all the
643 Color Mixer inputs.</div>
644 </td>
645 </tr>
646
647 <tr>
648 <td class="attributes">&nbsp;</td>
649 <td class="nameDescription">
650 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#ev_panel_stateChange">ev_panel_stateChange</a></b>(ev)
651 </div>
652 <div class="description">The <code>guiFloatingPanelStateChange</code> event handler for the Color
653 Mixer panel.</div>
654 </td>
655 </tr>
656
657 <tr>
658 <td class="attributes">&lt;private&gt; &nbsp;</td>
659 <td class="nameDescription">
660 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#ev_tabActivate">ev_tabActivate</a></b>(ev)
661 </div>
662 <div class="description">The <code>guiTabActivate</code> event handler for the tab panel which holds
663 the color mixer and the color palettes.</div>
664 </td>
665 </tr>
666
667 <tr>
668 <td class="attributes">&nbsp;</td>
669 <td class="nameDescription">
670 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#extensionRegister">extensionRegister</a></b>(ev)
671 </div>
672 <div class="description">Register the Color Mixer extension.</div>
673 </td>
674 </tr>
675
676 <tr>
677 <td class="attributes">&lt;private&gt; &nbsp;</td>
678 <td class="nameDescription">
679 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#hex2rgb">hex2rgb</a></b>()
680 </div>
681 <div class="description">Convert the hexadecimal representation of color to RGB values (internally).</div>
682 </td>
683 </tr>
684
685 <tr>
686 <td class="attributes">&nbsp;</td>
687 <td class="nameDescription">
688 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#hide">hide</a></b>()
689 </div>
690 <div class="description">Hide the Color Mixer floating panel.</div>
691 </td>
692 </tr>
693
694 <tr>
695 <td class="attributes">&lt;private&gt; &nbsp;</td>
696 <td class="nameDescription">
697 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#hsv2rgb">hsv2rgb</a></b>(no_update, hsv)
698 </div>
699 <div class="description">Convert HSV to RGB.</div>
700 </td>
701 </tr>
702
703 <tr>
704 <td class="attributes">&lt;private&gt; &nbsp;</td>
705 <td class="nameDescription">
706 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#init_lab">init_lab</a></b>()
707 </div>
708 <div class="description">This function calculates lots of values used by the other CIE Lab-related
709 functions.</div>
710 </td>
711 </tr>
712
713 <tr>
714 <td class="attributes">&lt;private&gt; &nbsp;</td>
715 <td class="nameDescription">
716 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#lab2rgb">lab2rgb</a></b>()
717 </div>
718 <div class="description">Convert CIE Lab values to RGB values (internally).</div>
719 </td>
720 </tr>
721
722 <tr>
723 <td class="attributes">&lt;private&gt; &nbsp;</td>
724 <td class="nameDescription">
725 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#lab2xyz">lab2xyz</a></b>(cie_l, cie_a, cie_b)
726 </div>
727 <div class="description">Convert CIE Lab values to XYZ color values.</div>
728 </td>
729 </tr>
730
731 <tr>
732 <td class="attributes">&lt;private&gt; &nbsp;</td>
733 <td class="nameDescription">
734 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#rgb2cmyk">rgb2cmyk</a></b>()
735 </div>
736 <div class="description">Convert RGB to CMYK.</div>
737 </td>
738 </tr>
739
740 <tr>
741 <td class="attributes">&lt;private&gt; &nbsp;</td>
742 <td class="nameDescription">
743 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#rgb2hex">rgb2hex</a></b>()
744 </div>
745 <div class="description">Convert RGB to hexadecimal representation (internally).</div>
746 </td>
747 </tr>
748
749 <tr>
750 <td class="attributes">&lt;private&gt; &nbsp;</td>
751 <td class="nameDescription">
752 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#rgb2hsv">rgb2hsv</a></b>()
753 </div>
754 <div class="description">Convert RGB to HSV (internally).</div>
755 </td>
756 </tr>
757
758 <tr>
759 <td class="attributes">&lt;private&gt; &nbsp;</td>
760 <td class="nameDescription">
761 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#rgb2lab">rgb2lab</a></b>()
762 </div>
763 <div class="description">Convert RGB to CIE Lab (internally).</div>
764 </td>
765 </tr>
766
767 <tr>
768 <td class="attributes">&lt;private&gt; &nbsp;</td>
769 <td class="nameDescription">
770 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#rgb2xyz">rgb2xyz</a></b>(rgb)
771 </div>
772 <div class="description">Convert RGB values to XYZ color values.</div>
773 </td>
774 </tr>
775
776 <tr>
777 <td class="attributes">&nbsp;</td>
778 <td class="nameDescription">
779 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#show">show</a></b>(target, color)
780 </div>
781 <div class="description">Show the Color Mixer.</div>
782 </td>
783 </tr>
784
785 <tr>
786 <td class="attributes">&lt;private&gt; &nbsp;</td>
787 <td class="nameDescription">
788 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#update_canvas">update_canvas</a></b>(updated_ckey, force)
789 </div>
790 <div class="description">Update the color space visualisation.</div>
791 </td>
792 </tr>
793
794 <tr>
795 <td class="attributes">&lt;private&gt; &nbsp;</td>
796 <td class="nameDescription">
797 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#update_ckey_active">update_ckey_active</a></b>(ckey, only_vars)
798 </div>
799 <div class="description">Update the active color key.</div>
800 </td>
801 </tr>
802
803 <tr>
804 <td class="attributes">&nbsp;</td>
805 <td class="nameDescription">
806 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#update_color">update_color</a></b>(ckey)
807 </div>
808 <div class="description">Update the current color.</div>
809 </td>
810 </tr>
811
812 <tr>
813 <td class="attributes">&lt;private&gt; &nbsp;</td>
814 <td class="nameDescription">
815 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#update_dimensions">update_dimensions</a></b>()
816 </div>
817 <div class="description">Recalculate the dimensions and coordinates for the slider and for the color
818 space visualisation within the Canvas element.</div>
819 </td>
820 </tr>
821
822 <tr>
823 <td class="attributes">&lt;private&gt; &nbsp;</td>
824 <td class="nameDescription">
825 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#update_inputs">update_inputs</a></b>()
826 </div>
827 <div class="description">Update the color inputs.</div>
828 </td>
829 </tr>
830
831 <tr>
832 <td class="attributes">&lt;private&gt; &nbsp;</td>
833 <td class="nameDescription">
834 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#update_preview">update_preview</a></b>()
835 </div>
836 <div class="description">Update the color preview.</div>
837 </td>
838 </tr>
839
840 <tr>
841 <td class="attributes">&lt;private&gt; &nbsp;</td>
842 <td class="nameDescription">
843 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#xyz2lab">xyz2lab</a></b>(xyz)
844 </div>
845 <div class="description">Convert XYZ color values into CIE Lab values.</div>
846 </td>
847 </tr>
848
849 <tr>
850 <td class="attributes">&lt;private&gt; &nbsp;</td>
851 <td class="nameDescription">
852 <div class="fixedFont"><b><a href="../symbols/pwlib.extensions.colormixer.html#xyz2rgb">xyz2rgb</a></b>(xyz)
853 </div>
854 <div class="description">Convert XYZ color values to RGB.</div>
855 </td>
856 </tr>
857
858 </tbody>
859 </table>
860
861
862
863
864 <!-- ============================== events summary ======================== -->
865
866
867 <!-- ============================== constructor details ==================== -->
868
869 <div class="details"><a name="constructor"> </a>
870 <div class="sectionTitle">
871 Class Detail
872 </div>
873
874 <div class="fixedFont">
875 <b>pwlib.extensions.colormixer</b>(app)
876 </div>
877
878 <div class="description">
879
880
881 </div>
882
883
884
885
886
887 <dl class="detailList">
888 <dt class="heading">Parameters:</dt>
889
890 <dt>
891 <span class="light fixedFont">{<a href="../symbols/PaintWeb.html">PaintWeb</a>}</span> <b>app</b>
892
893 </dt>
894 <dd>Reference to the main paint application object.</dd>
895
896 </dl>
897
898
899
900
901
902
903
904
905 </div>
906
907
908 <!-- ============================== field details ========================== -->
909
910 <div class="sectionTitle">
911 Field Detail
912 </div>
913
914 <a name="abs_max"> </a>
915 <div class="fixedFont">&lt;private&gt;
916
917
918 <b>abs_max</b>
919
920 </div>
921 <div class="description">
922 The "absolute maximum" value is determined based on the min/max values.
923 For min -100 and max 100, the abs_max is 200.
924
925
926 </div>
927
928
929
930
931
932
933
934
935 <hr />
936
937 <a name="color"> </a>
938 <div class="fixedFont">
939
940 <span class="light">{Object}</span>
941 <b>color</b>
942
943 </div>
944 <div class="description">
945 Holds the current color in several formats: RGB, HEX, HSV, CIE Lab, and
946 CMYK. Except for 'hex', all the values should be from 0 to 1.
947
948
949 </div>
950
951
952
953
954
955
956
957
958 <hr />
959
960 <a name="context2d"> </a>
961 <div class="fixedFont">&lt;private&gt;
962
963 <span class="light">{CanvasRenderingContext2D}</span>
964 <b>context2d</b>
965
966 </div>
967 <div class="description">
968 Holds a reference to the 2D context of the color mixer Canvas element. This
969 is where the color chart and the slider are both drawn.
970
971
972 </div>
973
974
975
976
977
978
979
980
981 <hr />
982
983 <a name="elems"> </a>
984 <div class="fixedFont">&lt;private&gt;
985
986 <span class="light">{Object}</span>
987 <b>elems</b>
988
989 </div>
990 <div class="description">
991 Holds references to various DOM elements.
992
993
994 </div>
995
996
997
998
999
1000
1001
1002
1003 <hr />
1004
1005 <a name="inputs"> </a>
1006 <div class="fixedFont">&lt;private&gt;
1007
1008 <span class="light">{Object}</span>
1009 <b>inputs</b>
1010
1011 </div>
1012 <div class="description">
1013 Holds references to all the DOM input fields, for each color channel.
1014
1015
1016 </div>
1017
1018
1019
1020
1021
1022
1023
1024
1025 <hr />
1026
1027 <a name="panel"> </a>
1028 <div class="fixedFont">&lt;private&gt;
1029
1030 <span class="light">{<a href="../symbols/pwlib.guiFloatingPanel.html">pwlib.guiFloatingPanel</a>}</span>
1031 <b>panel</b>
1032
1033 </div>
1034 <div class="description">
1035 Reference to the Color Mixer floating panel GUI component object.
1036
1037
1038 </div>
1039
1040
1041
1042
1043
1044
1045
1046
1047 <hr />
1048
1049 <a name="panelInputs"> </a>
1050 <div class="fixedFont">&lt;private&gt;
1051
1052 <span class="light">{<a href="../symbols/pwlib.guiTabPanel.html">pwlib.guiTabPanel</a>}</span>
1053 <b>panelInputs</b>
1054
1055 </div>
1056 <div class="description">
1057 Reference to the Color Mixer tab panel GUI component object which holds the
1058 inputs.
1059
1060
1061 </div>
1062
1063
1064
1065
1066
1067
1068
1069
1070 <hr />
1071
1072 <a name="panelSelector"> </a>
1073 <div class="fixedFont">&lt;private&gt;
1074
1075 <span class="light">{<a href="../symbols/pwlib.guiTabPanel.html">pwlib.guiTabPanel</a>}</span>
1076 <b>panelSelector</b>
1077
1078 </div>
1079 <div class="description">
1080 Reference to the Color Mixer tab panel GUI component object which holds the
1081 Canvas used for color space visualisation and the color palettes selector.
1082
1083
1084 </div>
1085
1086
1087
1088
1089
1090
1091
1092
1093 <hr />
1094
1095 <a name="targetInput"> </a>
1096 <div class="fixedFont">
1097
1098 <span class="light">{Object}</span>
1099 <b>targetInput</b>
1100
1101 </div>
1102 <div class="description">
1103 Target input hooks. This object must hold two methods:
1104
1105 <ul>
1106 <li><code>show()</code> which is invoked by this extension when the Color
1107 Mixer panel shows up on screen.
1108
1109 <li><code>hide()</code> which is invoked when the Color Mixer panel is
1110 hidden from the screen.
1111 </ul>
1112
1113 <p>The object must also hold information about the associated configuration
1114 property: <var>configProperty</var>, <var>configGroup</var> and
1115 <var>configGroupRef</var>.
1116
1117
1118 </div>
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131 <!-- ============================== method details ========================= -->
1132
1133 <div class="sectionTitle">
1134 Method Detail
1135 </div>
1136
1137 <a name="calc_m1x3"> </a>
1138 <div class="fixedFont">
1139
1140 <span class="light">{Array}</span>
1141 <b>calc_m1x3</b>(a, b)
1142
1143 </div>
1144 <div class="description">
1145 Calculate the product of two matrices.
1146
1147 <p>Matrices are one-dimensional arrays of the form <code>[a0, a1, a2, ...,
1148 b0, b1, b2, ...]</code> where each element from the matrix is given in
1149 order, from the left to the right, row by row from the top to the bottom.
1150
1151
1152 </div>
1153
1154
1155
1156
1157 <dl class="detailList">
1158 <dt class="heading">Parameters:</dt>
1159
1160 <dt>
1161 <span class="light fixedFont">{Array}</span> <b>a</b>
1162
1163 </dt>
1164 <dd>The first matrix must be one row and three columns.</dd>
1165
1166 <dt>
1167 <span class="light fixedFont">{Array}</span> <b>b</b>
1168
1169 </dt>
1170 <dd>The second matrix must be three rows and three columns.</dd>
1171
1172 </dl>
1173
1174
1175
1176
1177
1178 <dl class="detailList">
1179 <dt class="heading">Returns:</dt>
1180
1181 <dd><span class="light fixedFont">{Array}</span> The matrix product, one row and three columns.</dd>
1182
1183 </dl>
1184
1185
1186
1187
1188 <hr />
1189
1190 <a name="calc_m3inv"> </a>
1191 <div class="fixedFont">&lt;private&gt;
1192
1193 <span class="light">{Array|false}</span>
1194 <b>calc_m3inv</b>(m)
1195
1196 </div>
1197 <div class="description">
1198 Calculate the matrix inverse.
1199
1200 <p>Matrices are one-dimensional arrays of the form <code>[a0, a1, a2, ...,
1201 b0, b1, b2, ...]</code> where each element from the matrix is given in
1202 order, from the left to the right, row by row from the top to the bottom.
1203
1204
1205 </div>
1206
1207
1208
1209
1210 <dl class="detailList">
1211 <dt class="heading">Parameters:</dt>
1212
1213 <dt>
1214 <span class="light fixedFont">{Array}</span> <b>m</b>
1215
1216 </dt>
1217 <dd>The square matrix which must have three rows and three
1218 columns.</dd>
1219
1220 </dl>
1221
1222
1223
1224
1225
1226 <dl class="detailList">
1227 <dt class="heading">Returns:</dt>
1228
1229 <dd><span class="light fixedFont">{Array|false}</span> The computed matrix inverse, or false if the matrix
1230 determinant was 0 - the given matrix is not invertible.</dd>
1231
1232 </dl>
1233
1234
1235
1236
1237 <hr />
1238
1239 <a name="cmyk2rgb"> </a>
1240 <div class="fixedFont">&lt;private&gt;
1241
1242
1243 <b>cmyk2rgb</b>()
1244
1245 </div>
1246 <div class="description">
1247 Convert CMYK to RGB (internally).
1248
1249
1250 </div>
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262 <hr />
1263
1264 <a name="cpalette_load"> </a>
1265 <div class="fixedFont">
1266
1267 <span class="light">{Boolean}</span>
1268 <b>cpalette_load</b>(id)
1269
1270 </div>
1271 <div class="description">
1272 Load a color palette. Loading is performed asynchronously.
1273
1274
1275 </div>
1276
1277
1278
1279
1280 <dl class="detailList">
1281 <dt class="heading">Parameters:</dt>
1282
1283 <dt>
1284 <span class="light fixedFont">{String}</span> <b>id</b>
1285
1286 </dt>
1287 <dd>The color palette ID.</dd>
1288
1289 </dl>
1290
1291
1292
1293
1294
1295 <dl class="detailList">
1296 <dt class="heading">Returns:</dt>
1297
1298 <dd><span class="light fixedFont">{Boolean}</span> True if the load was successful, or false if not.</dd>
1299
1300 </dl>
1301
1302
1303
1304
1305 <hr />
1306
1307 <a name="cpalette_loaded"> </a>
1308 <div class="fixedFont">&lt;private&gt;
1309
1310
1311 <b>cpalette_loaded</b>(xhr)
1312
1313 </div>
1314 <div class="description">
1315 The <code>onreadystatechange</code> event handler for the color palette
1316 XMLHttpRequest object.
1317
1318
1319 </div>
1320
1321
1322
1323
1324 <dl class="detailList">
1325 <dt class="heading">Parameters:</dt>
1326
1327 <dt>
1328 <span class="light fixedFont">{XMLHttpRequest}</span> <b>xhr</b>
1329
1330 </dt>
1331 <dd>The XMLHttpRequest object.</dd>
1332
1333 </dl>
1334
1335
1336
1337
1338
1339
1340
1341
1342 <hr />
1343
1344 <a name="cpalette_show"> </a>
1345 <div class="fixedFont">&lt;private&gt;
1346
1347 <span class="light">{Boolean}</span>
1348 <b>cpalette_show</b>(colors)
1349
1350 </div>
1351 <div class="description">
1352 Show a color palette. This method adds all the colors in the DOM as
1353 individual anchor elements which users can click on.
1354
1355
1356 </div>
1357
1358
1359
1360
1361 <dl class="detailList">
1362 <dt class="heading">Parameters:</dt>
1363
1364 <dt>
1365 <span class="light fixedFont">{Array}</span> <b>colors</b>
1366
1367 </dt>
1368 <dd>The array which holds each color in the palette.</dd>
1369
1370 </dl>
1371
1372
1373
1374
1375
1376 <dl class="detailList">
1377 <dt class="heading">Returns:</dt>
1378
1379 <dd><span class="light fixedFont">{Boolean}</span> True if the operation was successful, or false if not.</dd>
1380
1381 </dl>
1382
1383
1384
1385
1386 <hr />
1387
1388 <a name="draw_chart"> </a>
1389 <div class="fixedFont">&lt;private&gt;
1390
1391
1392 <b>draw_chart</b>(updated_ckey)
1393
1394 </div>
1395 <div class="description">
1396 Draw the color space visualisation.
1397
1398
1399 </div>
1400
1401
1402
1403
1404 <dl class="detailList">
1405 <dt class="heading">Parameters:</dt>
1406
1407 <dt>
1408 <span class="light fixedFont">{String}</span> <b>updated_ckey</b>
1409
1410 </dt>
1411 <dd>The color key that was updated. This is used
1412 to determine if the Canvas needs to be updated or not.</dd>
1413
1414 </dl>
1415
1416
1417
1418
1419
1420
1421
1422
1423 <hr />
1424
1425 <a name="draw_slider"> </a>
1426 <div class="fixedFont">&lt;private&gt;
1427
1428
1429 <b>draw_slider</b>(updated_ckey)
1430
1431 </div>
1432 <div class="description">
1433 Draw the color slider on the Canvas element.
1434
1435
1436 </div>
1437
1438
1439
1440
1441 <dl class="detailList">
1442 <dt class="heading">Parameters:</dt>
1443
1444 <dt>
1445 <span class="light fixedFont">{String}</span> <b>updated_ckey</b>
1446
1447 </dt>
1448 <dd>The color key that was updated. This is used
1449 to determine if the Canvas needs to be updated or not.</dd>
1450
1451 </dl>
1452
1453
1454
1455
1456
1457
1458
1459
1460 <hr />
1461
1462 <a name="ev_canvas"> </a>
1463 <div class="fixedFont">&lt;private&gt;
1464
1465
1466 <b>ev_canvas</b>(ev)
1467
1468 </div>
1469 <div class="description">
1470 The mouse events handler for the Canvas controls. This method determines
1471 the region the user is using, and it also updates the color values for the
1472 active color key. The Canvas and all the inputs in the color mixer are
1473 updated as needed.
1474
1475
1476 </div>
1477
1478
1479
1480
1481 <dl class="detailList">
1482 <dt class="heading">Parameters:</dt>
1483
1484 <dt>
1485 <span class="light fixedFont">{Event}</span> <b>ev</b>
1486
1487 </dt>
1488 <dd>The DOM Event object.</dd>
1489
1490 </dl>
1491
1492
1493
1494
1495
1496
1497
1498
1499 <hr />
1500
1501 <a name="ev_change_ckey_active"> </a>
1502 <div class="fixedFont">&lt;private&gt;
1503
1504
1505 <b>ev_change_ckey_active</b>()
1506
1507 </div>
1508 <div class="description">
1509 The <code>change</code> event handler for the Color Mixer inputs of
1510 type=radio. This method allows users to change the active color key - used
1511 for the color space visualisation.
1512
1513
1514 </div>
1515
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525
1526 <hr />
1527
1528 <a name="ev_change_cpalette"> </a>
1529 <div class="fixedFont">&lt;private&gt;
1530
1531
1532 <b>ev_change_cpalette</b>(ev)
1533
1534 </div>
1535 <div class="description">
1536 The <code>change</code> event handler for the color palette input element.
1537 This loads the color palette the user selected.
1538
1539
1540 </div>
1541
1542
1543
1544
1545 <dl class="detailList">
1546 <dt class="heading">Parameters:</dt>
1547
1548 <dt>
1549 <span class="light fixedFont">{Event}</span> <b>ev</b>
1550
1551 </dt>
1552 <dd>The DOM Event object.</dd>
1553
1554 </dl>
1555
1556
1557
1558
1559
1560
1561
1562
1563 <hr />
1564
1565 <a name="ev_click_accept"> </a>
1566 <div class="fixedFont">&lt;private&gt;
1567
1568
1569 <b>ev_click_accept</b>(ev)
1570
1571 </div>
1572 <div class="description">
1573 The <code>click</code> event handler for the Accept button. This method
1574 dispatches the <a href="../symbols/pwlib.appEvent.configChange.html">pwlib.appEvent.configChange</a> application event for
1575 the configuration property associated to the target input, and hides the
1576 Color Mixer floating panel.
1577
1578
1579 </div>
1580
1581
1582
1583
1584 <dl class="detailList">
1585 <dt class="heading">Parameters:</dt>
1586
1587 <dt>
1588 <span class="light fixedFont">{Event}</span> <b>ev</b>
1589
1590 </dt>
1591 <dd>The DOM Event object.</dd>
1592
1593 </dl>
1594
1595
1596
1597
1598
1599
1600
1601
1602 <hr />
1603
1604 <a name="ev_click_cancel"> </a>
1605 <div class="fixedFont">&lt;private&gt;
1606
1607
1608 <b>ev_click_cancel</b>(ev)
1609
1610 </div>
1611 <div class="description">
1612 The <code>click</code> event handler for the Cancel button. This method
1613 hides the Color Mixer floating panel.
1614
1615
1616 </div>
1617
1618
1619
1620
1621 <dl class="detailList">
1622 <dt class="heading">Parameters:</dt>
1623
1624 <dt>
1625 <span class="light fixedFont">{Event}</span> <b>ev</b>
1626
1627 </dt>
1628 <dd>The DOM Event object.</dd>
1629
1630 </dl>
1631
1632
1633
1634
1635
1636
1637
1638
1639 <hr />
1640
1641 <a name="ev_click_color"> </a>
1642 <div class="fixedFont">&lt;private&gt;
1643
1644
1645 <b>ev_click_color</b>(ev)
1646
1647 </div>
1648 <div class="description">
1649 The <code>click</code> event handler for colors in the color palette list.
1650 This event handler is also used for the "old color" element. This method
1651 updates the color mixer to use the color the user picked.
1652
1653
1654 </div>
1655
1656
1657
1658
1659 <dl class="detailList">
1660 <dt class="heading">Parameters:</dt>
1661
1662 <dt>
1663 <span class="light fixedFont">{Event}</span> <b>ev</b>
1664
1665 </dt>
1666 <dd>The DOM Event object.</dd>
1667
1668 </dl>
1669
1670
1671
1672
1673
1674
1675
1676
1677 <hr />
1678
1679 <a name="ev_click_pickColor"> </a>
1680 <div class="fixedFont">&lt;private&gt;
1681
1682
1683 <b>ev_click_pickColor</b>(ev)
1684
1685 </div>
1686 <div class="description">
1687 The <code>click</code> event handler for the "Pick color" button. This
1688 method activates the color picker tool.
1689
1690
1691 </div>
1692
1693
1694
1695
1696 <dl class="detailList">
1697 <dt class="heading">Parameters:</dt>
1698
1699 <dt>
1700 <span class="light fixedFont">{Event}</span> <b>ev</b>
1701
1702 </dt>
1703 <dd>The DOM Event object.</dd>
1704
1705 </dl>
1706
1707
1708
1709
1710
1711
1712
1713
1714 <hr />
1715
1716 <a name="ev_click_saveColor"> </a>
1717 <div class="fixedFont">&lt;private&gt;
1718
1719
1720 <b>ev_click_saveColor</b>(ev)
1721
1722 </div>
1723 <div class="description">
1724 The <code>click</code> event handler for the "Save color" button. This
1725 method adds the current color into the "_saved" color palette.
1726
1727
1728 </div>
1729
1730
1731
1732
1733 <dl class="detailList">
1734 <dt class="heading">Parameters:</dt>
1735
1736 <dt>
1737 <span class="light fixedFont">{Event}</span> <b>ev</b>
1738
1739 </dt>
1740 <dd>The DOM Event object.</dd>
1741
1742 </dl>
1743
1744
1745
1746
1747
1748
1749
1750
1751 <hr />
1752
1753 <a name="ev_input_change"> </a>
1754 <div class="fixedFont">&lt;private&gt;
1755
1756
1757 <b>ev_input_change</b>()
1758
1759 </div>
1760 <div class="description">
1761 The <code>input</code> and <code>change</code> event handler for all the
1762 Color Mixer inputs.
1763
1764
1765 </div>
1766
1767
1768
1769
1770
1771
1772
1773
1774
1775
1776
1777 <hr />
1778
1779 <a name="ev_panel_stateChange"> </a>
1780 <div class="fixedFont">
1781
1782
1783 <b>ev_panel_stateChange</b>(ev)
1784
1785 </div>
1786 <div class="description">
1787 The <code>guiFloatingPanelStateChange</code> event handler for the Color
1788 Mixer panel. This method ensures the Color Mixer is properly closed.
1789
1790
1791 </div>
1792
1793
1794
1795
1796 <dl class="detailList">
1797 <dt class="heading">Parameters:</dt>
1798
1799 <dt>
1800 <span class="light fixedFont">{<a href="../symbols/pwlib.appEvent.guiFloatingPanelStateChange.html">pwlib.appEvent.guiFloatingPanelStateChange</a>}</span> <b>ev</b>
1801
1802 </dt>
1803 <dd>The application
1804 event object.</dd>
1805
1806 </dl>
1807
1808
1809
1810
1811
1812
1813
1814
1815 <hr />
1816
1817 <a name="ev_tabActivate"> </a>
1818 <div class="fixedFont">&lt;private&gt;
1819
1820
1821 <b>ev_tabActivate</b>(ev)
1822
1823 </div>
1824 <div class="description">
1825 The <code>guiTabActivate</code> event handler for the tab panel which holds
1826 the color mixer and the color palettes. When switching back to the color
1827 mixer, this method updates the Canvas.
1828
1829
1830 </div>
1831
1832
1833
1834
1835 <dl class="detailList">
1836 <dt class="heading">Parameters:</dt>
1837
1838 <dt>
1839 <span class="light fixedFont">{<a href="../symbols/pwlib.appEvent.guiTabActivate.html">pwlib.appEvent.guiTabActivate</a>}</span> <b>ev</b>
1840
1841 </dt>
1842 <dd>The application event object.</dd>
1843
1844 </dl>
1845
1846
1847
1848
1849
1850
1851
1852
1853 <hr />
1854
1855 <a name="extensionRegister"> </a>
1856 <div class="fixedFont">
1857
1858 <span class="light">{Boolean}</span>
1859 <b>extensionRegister</b>(ev)
1860
1861 </div>
1862 <div class="description">
1863 Register the Color Mixer extension.
1864
1865
1866 </div>
1867
1868
1869
1870
1871 <dl class="detailList">
1872 <dt class="heading">Parameters:</dt>
1873
1874 <dt>
1875 <b>ev</b>
1876
1877 </dt>
1878 <dd></dd>
1879
1880 </dl>
1881
1882
1883
1884
1885
1886 <dl class="detailList">
1887 <dt class="heading">Returns:</dt>
1888
1889 <dd><span class="light fixedFont">{Boolean}</span> True if the extension can be registered properly, or
1890 false if not.</dd>
1891
1892 </dl>
1893
1894
1895
1896
1897 <hr />
1898
1899 <a name="hex2rgb"> </a>
1900 <div class="fixedFont">&lt;private&gt;
1901
1902
1903 <b>hex2rgb</b>()
1904
1905 </div>
1906 <div class="description">
1907 Convert the hexadecimal representation of color to RGB values (internally).
1908
1909
1910 </div>
1911
1912
1913
1914
1915
1916
1917
1918
1919
1920
1921
1922 <hr />
1923
1924 <a name="hide"> </a>
1925 <div class="fixedFont">
1926
1927
1928 <b>hide</b>()
1929
1930 </div>
1931 <div class="description">
1932 Hide the Color Mixer floating panel. This method invokes the
1933 <code>hide()</code> method provided by the target input.
1934
1935
1936 </div>
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948 <hr />
1949
1950 <a name="hsv2rgb"> </a>
1951 <div class="fixedFont">&lt;private&gt;
1952
1953 <span class="light">{Array}</span>
1954 <b>hsv2rgb</b>(no_update, hsv)
1955
1956 </div>
1957 <div class="description">
1958 Convert HSV to RGB.
1959
1960
1961 </div>
1962
1963
1964
1965
1966 <dl class="detailList">
1967 <dt class="heading">Parameters:</dt>
1968
1969 <dt>
1970 <span class="light fixedFont">{Boolean}</span> <b>no_update</b>
1971 <i>Optional</i>
1972 </dt>
1973 <dd>Tells the function to not update the internal
1974 RGB color values.</dd>
1975
1976 <dt>
1977 <span class="light fixedFont">{Array}</span> <b>hsv</b>
1978 <i>Optional</i>
1979 </dt>
1980 <dd>The array holding the HSV values you want to convert
1981 to RGB. This array must have three elements ordered as: <var>hue</var>,
1982 <var>saturation</var> and <var>value</var> - all between 0 and 1. If you do
1983 not provide the array, then the internal HSV color values are used.</dd>
1984
1985 </dl>
1986
1987
1988
1989
1990
1991 <dl class="detailList">
1992 <dt class="heading">Returns:</dt>
1993
1994 <dd><span class="light fixedFont">{Array}</span> The RGB values converted from HSV. The array has three
1995 elements ordered as: <var>red</var>, <var>green</var> and <var>blue</var>
1996 - all with values between 0 and 1.</dd>
1997
1998 </dl>
1999
2000
2001
2002
2003 <hr />
2004
2005 <a name="init_lab"> </a>
2006 <div class="fixedFont">&lt;private&gt;
2007
2008 <span class="light">{Boolean}</span>
2009 <b>init_lab</b>()
2010
2011 </div>
2012 <div class="description">
2013 This function calculates lots of values used by the other CIE Lab-related
2014 functions.
2015
2016
2017 </div>
2018
2019
2020
2021
2022
2023
2024
2025
2026 <dl class="detailList">
2027 <dt class="heading">Returns:</dt>
2028
2029 <dd><span class="light fixedFont">{Boolean}</span> True if the initialization was successful, or false if
2030 not.</dd>
2031
2032 </dl>
2033
2034
2035
2036
2037 <hr />
2038
2039 <a name="lab2rgb"> </a>
2040 <div class="fixedFont">&lt;private&gt;
2041
2042
2043 <b>lab2rgb</b>()
2044
2045 </div>
2046 <div class="description">
2047 Convert CIE Lab values to RGB values (internally).
2048
2049
2050 </div>
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062 <hr />
2063
2064 <a name="lab2xyz"> </a>
2065 <div class="fixedFont">&lt;private&gt;
2066
2067 <span class="light">{Array}</span>
2068 <b>lab2xyz</b>(cie_l, cie_a, cie_b)
2069
2070 </div>
2071 <div class="description">
2072 Convert CIE Lab values to XYZ color values.
2073
2074
2075 </div>
2076
2077
2078
2079
2080 <dl class="detailList">
2081 <dt class="heading">Parameters:</dt>
2082
2083 <dt>
2084 <span class="light fixedFont">{Number}</span> <b>cie_l</b>
2085
2086 </dt>
2087 <dd>The color lightness value.</dd>
2088
2089 <dt>
2090 <span class="light fixedFont">{Number}</span> <b>cie_a</b>
2091
2092 </dt>
2093 <dd>The a* color opponent.</dd>
2094
2095 <dt>
2096 <span class="light fixedFont">{Number}</span> <b>cie_b</b>
2097
2098 </dt>
2099 <dd>The b* color opponent.</dd>
2100
2101 </dl>
2102
2103
2104
2105
2106
2107 <dl class="detailList">
2108 <dt class="heading">Returns:</dt>
2109
2110 <dd><span class="light fixedFont">{Array}</span> An array holding the XYZ color values in order:
2111 <var>X</var>, <var>Y</var> and <var>Z</var>.</dd>
2112
2113 </dl>
2114
2115
2116
2117
2118 <hr />
2119
2120 <a name="rgb2cmyk"> </a>
2121 <div class="fixedFont">&lt;private&gt;
2122
2123
2124 <b>rgb2cmyk</b>()
2125
2126 </div>
2127 <div class="description">
2128 Convert RGB to CMYK. This uses the current color RGB values and updates the
2129 CMYK values accordingly.
2130
2131
2132 </div>
2133
2134
2135
2136
2137
2138
2139
2140
2141
2142
2143
2144 <hr />
2145
2146 <a name="rgb2hex"> </a>
2147 <div class="fixedFont">&lt;private&gt;
2148
2149
2150 <b>rgb2hex</b>()
2151
2152 </div>
2153 <div class="description">
2154 Convert RGB to hexadecimal representation (internally).
2155
2156
2157 </div>
2158
2159
2160
2161
2162
2163
2164
2165
2166
2167
2168
2169 <hr />
2170
2171 <a name="rgb2hsv"> </a>
2172 <div class="fixedFont">&lt;private&gt;
2173
2174
2175 <b>rgb2hsv</b>()
2176
2177 </div>
2178 <div class="description">
2179 Convert RGB to HSV (internally).
2180
2181
2182 </div>
2183
2184
2185
2186
2187
2188
2189
2190
2191
2192
2193
2194 <hr />
2195
2196 <a name="rgb2lab"> </a>
2197 <div class="fixedFont">&lt;private&gt;
2198
2199
2200 <b>rgb2lab</b>()
2201
2202 </div>
2203 <div class="description">
2204 Convert RGB to CIE Lab (internally).
2205
2206
2207 </div>
2208
2209
2210
2211
2212
2213
2214
2215
2216
2217
2218
2219 <hr />
2220
2221 <a name="rgb2xyz"> </a>
2222 <div class="fixedFont">&lt;private&gt;
2223
2224 <span class="light">{Array}</span>
2225 <b>rgb2xyz</b>(rgb)
2226
2227 </div>
2228 <div class="description">
2229 Convert RGB values to XYZ color values.
2230
2231
2232 </div>
2233
2234
2235
2236
2237 <dl class="detailList">
2238 <dt class="heading">Parameters:</dt>
2239
2240 <dt>
2241 <span class="light fixedFont">{Array}</span> <b>rgb</b>
2242
2243 </dt>
2244 <dd>The array holding the RGB values in order:
2245 <var>red</var>, <var>green</var> and <var>blue</var>.</dd>
2246
2247 </dl>
2248
2249
2250
2251
2252
2253 <dl class="detailList">
2254 <dt class="heading">Returns:</dt>
2255
2256 <dd><span class="light fixedFont">{Array}</span> An array holding the XYZ color values in order:
2257 <var>X</var>, <var>Y</var> and <var>Z</var>.</dd>
2258
2259 </dl>
2260
2261
2262
2263
2264 <hr />
2265
2266 <a name="show"> </a>
2267 <div class="fixedFont">
2268
2269
2270 <b>show</b>(target, color)
2271
2272 </div>
2273 <div class="description">
2274 Show the Color Mixer.
2275
2276
2277 </div>
2278
2279
2280
2281
2282 <dl class="detailList">
2283 <dt class="heading">Parameters:</dt>
2284
2285 <dt>
2286 <span class="light fixedFont">{Object}</span> <b>target</b>
2287
2288 </dt>
2289 <dd>The target input object.</dd>
2290
2291 <dt>
2292 <span class="light fixedFont">{Object}</span> <b>color</b>
2293
2294 </dt>
2295 <dd>The color you want to set before the Color Mixer is
2296 shown. The object must have four properties: <var>red</var>,
2297 <var>green</var>, <var>blue</var> and <var>alpha</var>. All the values must
2298 be between 0 and 1. This color becomes the "active color" and the "old
2299 color".</dd>
2300
2301 </dl>
2302
2303
2304
2305
2306
2307
2308
2309 <dl class="detailList">
2310 <dt class="heading">See:</dt>
2311
2312 <dd>this.targetInput for more information about the <var>target</var>
2313 object.</dd>
2314
2315 </dl>
2316
2317
2318 <hr />
2319
2320 <a name="update_canvas"> </a>
2321 <div class="fixedFont">&lt;private&gt;
2322
2323 <span class="light">{Boolean}</span>
2324 <b>update_canvas</b>(updated_ckey, force)
2325
2326 </div>
2327 <div class="description">
2328 Update the color space visualisation. This method updates the color chart
2329 and/or the color slider, and the associated controls, each as needed when
2330 a color key is updated.
2331
2332
2333 </div>
2334
2335
2336
2337
2338 <dl class="detailList">
2339 <dt class="heading">Parameters:</dt>
2340
2341 <dt>
2342 <span class="light fixedFont">{String}</span> <b>updated_ckey</b>
2343
2344 </dt>
2345 <dd>The color key that was updated.</dd>
2346
2347 <dt>
2348 <span class="light fixedFont">{Boolean}</span> <b>force</b>
2349 <i>Optional, Default: false</i>
2350 </dt>
2351 <dd>Tells the function to force an update. The
2352 Canvas is not updated when the color mixer panel is not visible.</dd>
2353
2354 </dl>
2355
2356
2357
2358
2359
2360 <dl class="detailList">
2361 <dt class="heading">Returns:</dt>
2362
2363 <dd><span class="light fixedFont">{Boolean}</span> If the operation was successful, or false if not.</dd>
2364
2365 </dl>
2366
2367
2368
2369
2370 <hr />
2371
2372 <a name="update_ckey_active"> </a>
2373 <div class="fixedFont">&lt;private&gt;
2374
2375 <span class="light">{Boolean}</span>
2376 <b>update_ckey_active</b>(ckey, only_vars)
2377
2378 </div>
2379 <div class="description">
2380 Update the active color key. This method updates the Canvas accordingly.
2381
2382
2383 </div>
2384
2385
2386
2387
2388 <dl class="detailList">
2389 <dt class="heading">Parameters:</dt>
2390
2391 <dt>
2392 <span class="light fixedFont">{String}</span> <b>ckey</b>
2393
2394 </dt>
2395 <dd>The color key you want to be active.</dd>
2396
2397 <dt>
2398 <span class="light fixedFont">{Boolean}</span> <b>only_vars</b>
2399 <i>Optional</i>
2400 </dt>
2401 <dd>Tells if you want only the variables to be
2402 updated - no Canvas updates. This is true only during the Color Mixer
2403 initialization.</dd>
2404
2405 </dl>
2406
2407
2408
2409
2410
2411 <dl class="detailList">
2412 <dt class="heading">Returns:</dt>
2413
2414 <dd><span class="light fixedFont">{Boolean}</span> True if the operation was successful, or false if not.</dd>
2415
2416 </dl>
2417
2418
2419
2420
2421 <hr />
2422
2423 <a name="update_color"> </a>
2424 <div class="fixedFont">
2425
2426
2427 <b>update_color</b>(ckey)
2428
2429 </div>
2430 <div class="description">
2431 Update the current color. Once a color value is updated, this method is
2432 called to keep the rest of the color mixer in sync: for example, when a RGB
2433 value is updated, it needs to be converted to HSV, CMYK and all of the
2434 other formats. Additionally, this method updates the color preview, the
2435 controls on the Canvas and the input values.
2436
2437 <p>You need to call this function whenever you update the color manually.
2438
2439
2440 </div>
2441
2442
2443
2444
2445 <dl class="detailList">
2446 <dt class="heading">Parameters:</dt>
2447
2448 <dt>
2449 <span class="light fixedFont">{String}</span> <b>ckey</b>
2450
2451 </dt>
2452 <dd>The color key that was updated.</dd>
2453
2454 </dl>
2455
2456
2457
2458
2459
2460
2461
2462
2463 <hr />
2464
2465 <a name="update_dimensions"> </a>
2466 <div class="fixedFont">&lt;private&gt;
2467
2468
2469 <b>update_dimensions</b>()
2470
2471 </div>
2472 <div class="description">
2473 Recalculate the dimensions and coordinates for the slider and for the color
2474 space visualisation within the Canvas element.
2475
2476 <p>This method is an event handler for the
2477 <a href="../symbols/pwlib.appEvent.canvasSizeChange.html">pwlib.appEvent.canvasSizeChange</a> application event.
2478
2479
2480 </div>
2481
2482
2483
2484
2485
2486
2487
2488
2489
2490
2491
2492 <hr />
2493
2494 <a name="update_inputs"> </a>
2495 <div class="fixedFont">&lt;private&gt;
2496
2497
2498 <b>update_inputs</b>()
2499
2500 </div>
2501 <div class="description">
2502 Update the color inputs. This method takes the internal color values and
2503 shows them in the DOM input elements.
2504
2505
2506 </div>
2507
2508
2509
2510
2511
2512
2513
2514
2515
2516
2517
2518 <hr />
2519
2520 <a name="update_preview"> </a>
2521 <div class="fixedFont">&lt;private&gt;
2522
2523
2524 <b>update_preview</b>()
2525
2526 </div>
2527 <div class="description">
2528 Update the color preview.
2529
2530
2531 </div>
2532
2533
2534
2535
2536
2537
2538
2539
2540
2541
2542
2543 <hr />
2544
2545 <a name="xyz2lab"> </a>
2546 <div class="fixedFont">&lt;private&gt;
2547
2548 <span class="light">{Array}</span>
2549 <b>xyz2lab</b>(xyz)
2550
2551 </div>
2552 <div class="description">
2553 Convert XYZ color values into CIE Lab values.
2554
2555
2556 </div>
2557
2558
2559
2560
2561 <dl class="detailList">
2562 <dt class="heading">Parameters:</dt>
2563
2564 <dt>
2565 <span class="light fixedFont">{Array}</span> <b>xyz</b>
2566
2567 </dt>
2568 <dd>The array holding the XYZ color values in order:
2569 <var>X</var>, <var>Y</var> and <var>Z</var>.</dd>
2570
2571 </dl>
2572
2573
2574
2575
2576
2577 <dl class="detailList">
2578 <dt class="heading">Returns:</dt>
2579
2580 <dd><span class="light fixedFont">{Array}</span> An array holding the CIE Lab values in order:
2581 <var>L</var>, <var>a</var> and <var>b</var>.</dd>
2582
2583 </dl>
2584
2585
2586
2587
2588 <hr />
2589
2590 <a name="xyz2rgb"> </a>
2591 <div class="fixedFont">&lt;private&gt;
2592
2593 <span class="light">{Array}</span>
2594 <b>xyz2rgb</b>(xyz)
2595
2596 </div>
2597 <div class="description">
2598 Convert XYZ color values to RGB.
2599
2600
2601 </div>
2602
2603
2604
2605
2606 <dl class="detailList">
2607 <dt class="heading">Parameters:</dt>
2608
2609 <dt>
2610 <span class="light fixedFont">{Array}</span> <b>xyz</b>
2611
2612 </dt>
2613 <dd>The array holding the XYZ color values in order:
2614 <var>X</var>, <var>Y</var> and <var>Z</var></dd>
2615
2616 </dl>
2617
2618
2619
2620
2621
2622 <dl class="detailList">
2623 <dt class="heading">Returns:</dt>
2624
2625 <dd><span class="light fixedFont">{Array}</span> An array holding the RGB values in order: <var>red</var>,
2626 <var>green</var> and <var>blue</var>.</dd>
2627
2628 </dl>
2629
2630
2631
2632
2633
2634
2635
2636
2637 <!-- ============================== event details ========================= -->
2638
2639
2640 <hr />
2641 </div>
2642
2643
2644 <!-- ============================== footer ================================= -->
2645 <div class="fineprint" style="clear:both">
2646
2647 Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.3.0 on Fri Jul 31 2009 20:23:22 GMT+0300 (EEST)
2648 </div>
2649 </body>
2650 </html>
Mihai Sucan's work on Moodle