| blob | 45db2aea3dcd4b55f3643c1acbaaea9cd5b8deba |
1 <html>
2 <head>
6 <!-- MAIN STUFF -->
13 <!--<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700,300,400italic,300italic,700italic"/>-->
15 <!-- IMPLEMENTS -->
28 <!-- WIDGET -->
31 <!-- MODULES -->
48 <!-- WIDGETS -->
66 <link rel="stylesheet" type="text/css" href="toolkit/templates/default/css/frequencyresponse.css">
102 //window.addEventListener("load", function () {
103 //document.body.innerHTML=""
104 //t = new Table({container:document.body});
105 //t.add_cell({x:2,y:2,width:3,height:3});
106 //t.add_cell({x:5,y:5,width:1,height:1});
108 //});
110 //window.addEventListener('load', TK.seat_all_svg);
111 //window.addEventListener('scroll', TK.seat_all_svg);
112 //window.addEventListener('resize', TK.seat_all_svg);
113 }
114 </script>
118 </style>
120 </head>
121 <body>
125 </ul>
126 </div>
130 <!--
132 <li id="Example" class="widget">
133 <!-- ########################################################### -->
134 <!-- EXAMPLE WIDGET -->
135 <!-- ########################################################### -->
137 <!--<p class="description">
138 <strong>Example</strong> provides stuff.
139 </p>
140 <p class="description">
141 Use example to play with the example in a terminal:
142 <a href="javascript:example.set('state', true)">example.set("state", true)</a>
143 <small>(toggles the state of the widget)</small>
144 </p>
146 <div class="showcase">
147 <div id="sc_example">
149 </div>
150 </div>
152 <div class="buttons"></div>
154 <table class="options collapse" title="⚙ Options">
155 <tr><th>Option</th><th>Description</th><th>Default</th></tr>
156 <tr>
157 <td>example <i class="static">⚓</i></td>
158 <td>description.</td>
159 <td>default</td>
160 </tr>
161 </table>
163 <table class="methods collapse" title="⚒ Methods">
164 <tr><th>Method</th><th>Description</th></tr>
165 <tr>
166 <td>method(options)</td>
167 <td>description.</td>
168 </tr>
169 </table>
171 <table class="domelements collapse" title="⛁ DOM-Elements">
172 <tr><th>Element (class)</th><th>Description</th></tr>
173 <tr>
174 <td>example.element ("div.toolkit-example") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
175 <td>description.</td>
176 </tr>
177 </table>
179 <table class="modules collapse" title="⚛ Modules">
180 <tr><th>Module</th><th>Description</th></tr>
181 <tr>
182 <td>example.module</td>
183 <td>description.</td>
184 </tr>
185 </table>
187 <table class="events collapse" title="⚑ Events">
188 <tr><th>Event</th><th>Description</th></tr>
189 <tr>
190 <td>event</td>
191 <td>description.</td>
192 </tr>
193 </table>
194 </li>
196 -->
197 <li>
198 <!-- ########################################################### -->
199 <!-- MAIN -->
200 <!-- ########################################################### -->
203 <p>
205 for building audio related user interfaces running in modern browsers.
206 <strong>toolkit</strong> is supposed to work in Chrome/Chromium, Safari, Firefox > 4 and Internet Explorer >= 9.
207 </p>
208 <p>
213 </p>
214 <p>
215 This page shows and describes the different widgets of the toolkit See some widgets in action,
216 test things in a terminal (Chrome: CTL+SHIFT+J, FF: Firebug + F12) or just get some information about
217 the different options of the API.
218 </p>
219 <ul>
220 <li><strong>Please note #1:</strong> Options marked with an anchor sign <i class="static">⚓</i> are only available on build time and remain
221 static after the widget was created.
222 </li>
223 <li>
224 <strong>Please note #2:</strong> Options marked with an exchange arrow sign <i class="delegated">⇄</i> point out a DOM element
225 which was delegated to the main widget instance (see <a href="#widget">Widget</a>.delegate() for more details).
226 </li>
227 <li>
228 <strong>Please note #3:</strong> Options marked with a sparkle sign <i class="classified">❇</i> point out a DOM element
229 which was classified to the main widget instance (see <a href="#widget">Widget</a>.classified() for more details).
230 </li>
231 <li>
232 <strong>Please note #4:</strong> Options marked with a pencil sign <i class="stylized">✎</i> point out a DOM element
234 </li>
235 <li>
236 <strong>Please note #5:</strong> This toolkit is in the origination process so it may contain some bugs.
237 It is developed mainly using Chrome so there may be undetected flaws in other browsers.
238 If you find any of them please send a mail to <a href="mail:schmidt@boomshop.net">schmidt@boomshop.net</a>.
239 Thank you very much.
240 </li>
241 </ul>
242 <hr>
243 </li>
253 <p><strong>Widgets</strong> are fully functional elements to build user interfaces. They typically rely on other elements
254 like <a href="#modules">Modules</a> and <a href="#modules">Implements</a> and are somehow based on
256 </li>
266 <!-- ########################################################### -->
267 <!-- BUTTON WIDGET -->
268 <!-- ########################################################### -->
272 of click-related events and consist of a label and an icon. Buttons are used
274 </p>
276 Use button to play with the example in a terminal:
279 </p>
283 </style>
288 </div>
289 </div>
295 <tr>
297 <td>A text or HTML snipped used as a label for the button. Set to false to hide the label element.</td>
299 </tr>
300 <tr>
304 </tr>
305 <tr>
307 <td>Buttons can represent a state (like a toggle button) which is indicated by the class ".toolkit-active"</td>
309 </tr>
310 <tr>
314 </tr>
315 </table>
319 <tr>
320 <td>button.element ("div.toolkit-state") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
321 <td>The base element of the widget. It draws the background color and acts as a container fo the other elements.</td>
322 </tr>
323 <tr>
326 </tr>
327 <tr>
330 </tr>
331 </table>
332 </li>
335 <!-- ########################################################### -->
336 <!-- BUTTON ARRAY WIDGET -->
337 <!-- ########################################################### -->
341 aligned array of buttons. It automatically clips overhanging
342 buttons and adds arrow buttons if the space is too small.
344 </p>
346 Use ba_horiz1, ba_horiz2, ba_vert1 and ba_vert2 to play with the examples in a terminal:
349 </p>
353 /*width: 20%;*/
357 }
362 }
363 </style>
368 </div>
369 </div>
375 <tr>
377 <td>An array of button option objects or label strings. It is used for the initial button list
378 but can be set later to replace the whole button list with a new one.If get is
379 called, the converted list of button instances is returned.</td>
381 </tr>
382 <tr>
386 </tr>
387 <tr>
391 </tr>
392 <tr>
396 </tr>
397 </table>
401 <tr>
405 for more information) or a string for the label, pos is an integer for the position of the button.
406 If pos is omitted, it is added to the end of the list.</td>
407 </tr>
408 <tr>
412 for more information) or strings for the button label</td>
413 </tr>
414 <tr>
417 or an integer.
418 </td>
419 </tr>
420 </table>
424 <tr>
427 </tr>
428 <tr>
431 </tr>
432 </table>
436 <tr>
439 </tr>
440 <tr>
443 </tr>
444 </table>
448 <tr>
451 </tr>
452 <tr>
454 <td>This event is fired when a button is about being removed. Hands over the button instance to destroy.</td>
455 </tr>
456 <tr>
458 <td>This event is fired when the active button changed. Hands over the button instance and the id.</td>
459 </tr>
460 </table>
461 </li>
464 <!-- ########################################################### -->
465 <!-- CHART WIDGET -->
466 <!-- ########################################################### -->
473 </p><p>
474 Use cgraph1, cgraph2 and chart to play with the objects
475 in a terminal: <a href="javascript:cgraph2.set('color', '#fff')">cgraph2.set("color", "#fff")</a>.
476 </p>
481 }
482 </style>
487 </div>
488 </div>
494 <tr>
496 <td>
500 </tr>
501 <tr>
506 </tr>
507 <tr>
509 <td>An array containing objects with the following members for the x axis: <br />{pos:x[, color: "colorstring"[, class: "classname"[, label:"labeltext"]]]}</td>
511 </tr>
512 <tr>
514 <td>An array containing objects with the following members for the y axis: <br />{pos:x[, color: "colorstring"[, class: "classname"[, label:"labeltext"]]]}</td>
516 </tr>
517 <tr>
519 <td>The width of the chart. Set basis of Chart.x for initial width to prevent
522 </tr>
523 <tr>
525 <td>The height of the chart. Set basis of Chart.y for initial height to prevent
528 </tr>
529 <tr>
531 <td>Draw a description for the graphs. Graphs need to have key
532 set, too. Set a position out of these:
533 <ul>
538 </ul>
539 Use false to disable the key.</td>
541 </tr>
542 <tr>
544 <td>Width of the little rectangles displaying the style of a graph
545 in the key</td>
547 </tr>
548 <tr>
552 </tr>
553 <tr>
555 <td>Set the position of the title. Possible values are:
556 <ul>
565 </ul>
566 </td>
568 </tr>
569 </table>
573 <tr>
575 <td>Create a Graph inside the Chart. Options is an object containing
577 options.y is omitted, they are replaced with the internal range objects
578 to provide an overall coodinates system.
579 <br/><br/>
580 It returns the new Graph instance.
581 </td>
582 </tr>
583 <tr>
586 </tr>
587 <tr>
590 </tr>
591 </table>
595 <tr>
598 </tr>
599 <tr>
602 </tr>
603 <tr>
606 </tr>
607 <tr>
610 </tr>
611 </table>
614 <tr>
615 <td>chart.element ("svg.toolkit-chart") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
617 </tr>
618 <tr>
621 </tr>
622 <tr>
625 </tr>
626 <tr>
629 </tr>
630 <tr>
633 </tr>
634 </table>
638 <tr>
641 </tr>
642 <tr>
645 </tr>
646 <tr>
649 </tr>
650 <tr>
653 </tr>
654 </table>
656 </li>
659 <!-- ########################################################### -->
660 <!-- CLOCK WIDGET -->
661 <!-- ########################################################### -->
665 displaying hours, minutes and seconds. It contains three free formatable labels.
666 </p>
668 Use clock to play with the example in a terminal:
671 </p>
676 }
677 </style>
682 </div>
683 </div>
689 <tr>
693 </tr>
694 <tr>
698 </tr>
699 <tr>
703 </tr>
704 <tr>
708 </tr>
709 <tr>
713 </tr>
714 <tr>
718 </tr>
719 <tr>
721 <td>The frequency for updating the clock in milliseconds.
724 </tr>
725 <tr>
727 <td>If timeout is set make the redraw appearing shortly after
729 to have a clock showing seconds 10 ms after the real clock switched
730 to reduce the impact on the CPU (to avoid having the clock calculating things
733 </tr>
734 <tr>
737 This forces clock to run "independently" on the system clock
738 with an offset value. Use this to reduce traffic while having
739 a steady running clock on a client.
740 </td>
742 </tr>
743 <tr>
747 </tr>
748 <tr>
751 <td>["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]</td>
752 </tr>
753 <tr>
757 </tr>
758 <tr>
760 <td>A callback function for displaying the main label receiving the date object, year, month, day of the week, day,
761 hour, minute, second, millisecond, frame, months array and days array.
762 It is expected to return a formatted string.</td>
763 <td>function (_date, year, month, date, day, hour, minute, second, millisecond, frame, months, days) {
765 </tr>
766 <tr>
768 <td>A callback function for displaying the upper label receiving the date object, year, month, day of the week, day,
769 hour, minute, second, millisecond, frame, months array and days array.
770 It is expected to return a formatted string.</td>
771 <td>function (_date, year, month, date, day, hour, minute, second, millisecond, frame, months, days) {
772 return days[day];}</td>
773 </tr>
774 <tr>
776 <td>A callback function for displaying the lower label receiving the date object, year, month, day of the week, day,
777 hour, minute, second, millisecond, frame, months array and days array.
778 It is expected to return a formatted string.</td>
779 <td>function (_date, year, month, date, day, hour, minute, second, millisecond, frame, months, days) {
781 </tr>
782 <tr>
784 <td>Multiplicator for the font size of upper and lower labels
785 calculated from the font size of the main label.</td>
787 </tr>
788 </table>
792 <tr>
794 <td>Obect containing all <a href="#circular">Circulars</a>, namely seconds, minutes and hours.</td>
795 </tr>
796 </table>
800 <tr>
803 and all labels.</td>
804 </tr>
805 <tr>
808 </tr>
809 <tr>
812 </tr>
813 <tr>
816 </tr>
817 </table>
821 <tr>
823 <td>Is fired after the time was drawn. Hands over the widget instance and the time object from its options.</td>
824 </tr>
825 </table>
827 </li>
831 <!-- ########################################################### -->
832 <!-- CONTAINER WIDGET -->
833 <!-- ########################################################### -->
838 </p>
842 <tr>
846 </tr>
847 </table>
850 <tr>
851 <td>container.element ("div.toolkit-container") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
853 </tr>
854 </table>
855 </li>
858 <!-- ########################################################### -->
859 <!-- DYNAMICS WIDGET -->
860 <!-- ########################################################### -->
864 display the characteristics of dynamic processors. They are square
866 Graphs based on fixed values like threshold and ratio are available
867 for compressors, gates, expanders and limiters.
868 </p><p>
869 Use comp, expand and dyna to play with the examples in a terminal.
871 </p>
876 }
877 </style>
882 </div>
883 </div>
889 <tr>
893 </tr>
894 <tr>
898 </tr>
899 <tr>
903 </tr>
904 <tr>
908 </tr>
909 <tr>
911 <td>The scale on the y (dB) axis:
912 <ul>
917 </ul>
918 If a function instead of a constant
919 is handed over, it receives the
920 actual options object as the second
921 argument and is supposed to return a
923 third argument "coef" is true, it is
924 supposed to return a value depending
925 on a coefficient handed over as the
926 first argument.
927 </td>
929 </tr>
930 <tr>
932 <td>type of dynamics display. can be
933 <ul>
939 </ul>
940 If set to false, draw your curves manually.
941 Other constants activate some of the following
942 options:
943 </td>
945 </tr>
946 <tr>
950 </tr>
951 <tr>
955 </tr>
956 <tr>
960 </tr>
961 <tr>
965 </tr>
966 <tr>
970 </tr>
971 </table>
975 <tr>
977 <td>A SVG path created via add_graph() showing
979 </tr>
980 </table>
982 </li>
985 <!-- ########################################################### -->
986 <!-- EQUALIZER WIDGET -->
987 <!-- ########################################################### -->
993 </p>
995 Use eq to play with the example in a terminal:
998 </p>
1003 }
1004 </style>
1009 </div>
1010 </div>
1016 <tr>
1020 </tr>
1021 </table>
1025 <tr>
1027 <td>Create a EqBand inside the Equalizer. Options is an object containing
1029 <br/><br/>
1030 It returns the new EqBand instance.
1031 </td>
1032 </tr>
1033 <tr>
1035 <td>Create a bunch of EqBand inside the Equalizer. The argumnt
1036 is a list of object containing
1038 <br/><br/>
1039 It returns the new EqBand instance.
1040 </td>
1041 </tr>
1042 <tr>
1045 </tr>
1046 <tr>
1049 </tr>
1050 </table>
1054 <tr>
1057 </tr>
1058 </table>
1062 <tr>
1065 </tr>
1066 </table>
1070 <tr>
1073 </tr>
1074 <tr>
1077 </tr>
1078 <tr>
1081 </tr>
1082 </table>
1083 </li>
1086 <!-- ########################################################### -->
1087 <!-- FADER WIDGET -->
1088 <!-- ########################################################### -->
1092 </p>
1094 Use example to play with the example in a terminal:
1097 </p>
1102 }
1103 </style>
1107 </div>
1108 </div>
1114 <tr>
1118 </tr>
1119 </table>
1123 <tr>
1126 </tr>
1127 </table>
1131 <tr>
1132 <td>example.element ("div.toolkit-example") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
1134 </tr>
1135 </table>
1139 <tr>
1142 </tr>
1143 </table>
1147 <tr>
1150 </tr>
1151 </table>
1152 </li>
1155 <!-- ########################################################### -->
1156 <!-- FREQUENCY RESPONSE WIDGET -->
1157 <!-- ########################################################### -->
1161 on the x axis and dB values on the y axis. This widget
1163 </p>
1165 Use fr and frgraph to play with the example in a terminal:
1168 </p>
1173 }
1174 </style>
1179 </div>
1180 </div>
1186 <tr>
1190 </tr>
1191 <tr>
1193 <td>The scale on the y (dB) axis:
1194 <ul>
1199 </ul>
1200 If a function instead of a constant
1201 is handed over, it receives the
1202 actual options object as the second
1203 argument and is supposed to return a
1205 third argument "coef" is true, it is
1206 supposed to return a value depending
1207 on a coefficient handed over as the
1208 first argument.
1209 </td>
1211 </tr>
1212 </table>
1213 </li>
1216 <!-- ########################################################### -->
1217 <!-- GAUGE WIDGET -->
1218 <!-- ########################################################### -->
1222 </p>
1225 <a href="javascript:gauge[0].set('value', Math.random()*10)">gauge[0].set('value', Math.random()*10)</a>
1227 </p>
1233 }
1240 }
1243 }
1246 }
1250 }
1256 }
1259 }
1263 }
1269 }
1272 }
1275 }
1278 }
1282 }
1288 }
1292 }
1295 }
1298 }
1299 </style>
1304 </div>
1305 </div>
1311 <tr>
1315 </tr>
1316 <tr>
1320 </tr>
1321 <tr>
1325 </tr>
1326 <tr>
1328 <td>Title fo the gauge. Object with optional members:
1329 <ul>
1334 </ul>
1335 Or a single string to set the title to.
1336 </td>
1338 </tr>
1339 </table>
1343 <tr>
1344 <td>gauge._svg ("svg.toolkit-gauge") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
1346 </tr>
1347 <tr>
1350 </tr>
1351 </table>
1355 <tr>
1358 </tr>
1359 </table>
1361 </li>
1364 <!-- ########################################################### -->
1365 <!-- KEYBOARD WIDGET -->
1366 <!-- ########################################################### -->
1370 </p>
1372 Use example to play with the example in a terminal:
1375 </p>
1380 </div>
1381 </div>
1387 <tr>
1391 </tr>
1392 </table>
1396 <tr>
1399 </tr>
1400 </table>
1404 <tr>
1405 <td>example.element ("div.toolkit-example") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
1407 </tr>
1408 </table>
1412 <tr>
1415 </tr>
1416 </table>
1420 <tr>
1423 </tr>
1424 </table>
1425 </li>
1429 <!-- ########################################################### -->
1430 <!-- KNOB WIDGET -->
1431 <!-- ########################################################### -->
1437 </p>
1439 Events and classes of DragValue and ScrollValue are delegated to knob._svg.
1440 </p>
1442 Use knob, kno21 and knob2 to play with the examples in a terminal:
1445 </p>
1449 }
1452 }
1455 }
1458 }
1461 }
1466 }
1470 }
1474 }
1475 </style>
1479 </div>
1480 </div>
1486 <tr>
1490 </tr>
1495 </tr>
1500 </tr>
1505 </tr>
1510 </tr>
1515 </tr>
1520 </tr>
1525 </tr>
1526 <tr>
1530 </tr>
1531 <tr>
1533 <td>Used when drag_direction = _TOOLKIT_POLAR. Defines the angle of
1534 the middle of the positive value changes. 0 means straight upward.
1535 E.g. a value of 45 does positive value changes in upper and
1538 </tr>
1539 <tr>
1541 <td>Used when drag_direction = _TOOLKIT_POLAR. Amount of degrees
1542 to separate positive from negative value changes.</td>
1544 </tr>
1545 <tr>
1547 <td>Double clicking the widget resets the value to this one. If undefined,
1548 the initial value is used.</td>
1550 </tr>
1551 </table>
1555 <tr>
1556 <td>knob._svg ("svg.toolkit-knob") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
1558 </tr>
1559 </table>
1563 <tr>
1566 </tr>
1567 <tr>
1570 </tr>
1571 </table>
1573 </li>
1576 <!-- ########################################################### -->
1577 <!-- LABEL WIDGET -->
1578 <!-- ########################################################### -->
1582 </p>
1584 Use label to play with the Label in a terminal:
1587 </p>
1592 </div>
1593 </div>
1599 <tr>
1603 </tr>
1604 </table>
1608 <tr>
1609 <td>label.element ("div.toolkit-label") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
1611 </tr>
1612 </table>
1613 </li>
1616 <!-- ########################################################### -->
1617 <!-- LEVEL METER WIDGET -->
1618 <!-- ########################################################### -->
1621 <strong>LevelMeter</strong> is a fully functional display of numerical values. It is an enhanced
1623 a peak pin with value label and hold markers. LevelMeters
1624 have some automatically triggered functionality like falling and resetting all kinds
1625 of values after a time. All additional elements can be set automatically as soon as
1626 the value rises above them.
1627 </p>
1629 Use meters.[title] to play with the examples in a terminal:
1632 </p>
1637 }
1638 </style>
1643 </div>
1644 <div id="sc_levelmeter_buttons" style="clear: both; text-align: right;margin-top: 30px;width: 700px;display: none;">
1649 <p style="text-align:right; width: 700px;"><small>Please don't expect too much performance with this poorly hacked demo on this overloaded page..</small></p>
1650 </div>
1652 </div>
1658 <tr>
1662 </tr>
1663 <tr>
1667 </tr>
1668 <tr>
1672 </tr>
1673 <tr>
1675 <td>Frames the first falling action takes to start (avoid flickering on steady signals while using external and internal falling)</td>
1677 </tr>
1678 <tr>
1682 </tr>
1683 <tr>
1687 </tr>
1688 <tr>
1692 </tr>
1693 <tr>
1697 </tr>
1698 <tr>
1702 </tr>
1703 <tr>
1707 </tr>
1708 <tr>
1712 </tr>
1713 <tr>
1717 </tr>
1718 <tr>
1720 <td>Activate auto clipping. Set this value to:
1721 <ul>
1725 </ul>
1726 </td>
1728 </tr>
1729 <tr>
1731 <td>Activate auto peak setting. Set this value to:
1732 <ul>
1736 </ul>
1737 </td>
1739 </tr>
1740 <tr>
1742 <td>Activate automatically setting the label. Set this value to:
1743 <ul>
1747 </ul>
1748 </td>
1750 </tr>
1751 <tr>
1753 <td>Activate auto hold (top and bottom). This is an indicator inside the bar.
1754 Set this value to:
1755 <ul>
1759 </ul>
1760 </td>
1762 </tr>
1763 <tr>
1765 <td>A function to format the peak label before it is drawn. Receives the actual value
1766 and is supposed to return a string.</td>
1768 </tr>
1769 <tr>
1773 </tr>
1774 </table>
1778 <tr>
1781 </tr>
1782 <tr>
1785 </tr>
1786 <tr>
1789 </tr>
1790 <tr>
1793 </tr>
1794 <tr>
1797 </tr>
1798 <tr>
1801 </tr>
1802 <tr>
1805 </tr>
1806 </table>
1810 <tr>
1813 </tr>
1814 </table>
1818 <tr>
1821 </tr>
1822 <tr>
1825 </tr>
1826 <tr>
1829 </tr>
1830 <tr>
1833 </tr>
1834 <tr>
1837 </tr>
1838 </table>
1842 <tr>
1845 </tr>
1846 <tr>
1849 </tr>
1850 <tr>
1853 </tr>
1854 <tr>
1857 </tr>
1858 <tr>
1861 </tr>
1862 <tr>
1865 </tr>
1866 <tr>
1869 </tr>
1870 <tr>
1873 </tr>
1874 <tr>
1877 </tr>
1878 <tr>
1881 </tr>
1882 <tr>
1885 </tr>
1886 </table>
1888 </li>
1891 <!-- ########################################################### -->
1892 <!-- METER BASE WIDGET -->
1893 <!-- ########################################################### -->
1898 to draw some labels and markers. MeterBases are used to build different metering
1899 elements from, e.g. LevelMeters, CorrelationMeters and the like. MeterBase
1902 </p>
1904 Use mbvr, mbvl, mbhb and mbht to play with the examples in a terminal:
1905 <a href="javascript:mbvl.set('value', Math.random()*120 - 96)">mbvl.set("value", Math.random()*120 - 96)</a>
1907 </p>
1912 }
1914 }
1918 }
1921 }
1924 }
1927 }
1928 </style>
1933 </div>
1934 </div>
1940 <tr>
1942 <td>Layout of the widget.
1943 <ul>
1948 </ul>
1949 </td>
1951 </tr>
1952 <tr>
1956 </tr>
1957 <tr>
1961 </tr>
1962 <tr>
1966 </tr>
1967 <tr>
1971 </tr>
1972 <tr>
1976 </tr>
1977 <tr>
1981 </tr>
1982 <tr>
1986 </tr>
1987 <tr>
1989 <td>A function to format the label before it is drawn. Receives the actual value
1990 and is supposed to return a string.</td>
1992 </tr>
1993 <tr>
1997 </tr>
1998 <tr>
2000 <td>Array consisting of the multipliers labels and dots for the scale widget can be drawn.
2002 (but not 30 or 80) depending on the available space. Dots are drawn one level lower between the
2003 labels (if there's enough space). The highest level can be drawn at real number multiplicators,
2004 too, lower levels are only possible at the exact division.
2005 </td>
2007 </tr>
2008 <tr>
2010 <td>The base value where drawing of labels and dots for the scale widget starts. Every drawing position
2014 </tr>
2015 <tr>
2019 </tr>
2020 <tr>
2022 <td>A function to format the labels for the scale widget before they are drawn. Receives the actual value
2023 and is supposed to return a string.</td>
2025 </tr>
2026 <tr>
2030 </tr>
2031 <tr>
2035 </tr>
2036 <tr>
2040 </tr>
2041 <tr>
2045 </tr>
2046 <tr>
2050 </tr>
2051 </table>
2055 <tr>
2058 </tr>
2059 </table>
2063 <tr>
2066 </tr>
2067 </table>
2070 <tr>
2071 <td>meterbase.element ("div.toolkit-meter-base") <i class="classified">❇</i> <i class="stylized">✎</i></td>
2072 <td>The base element of the widget. It contains the bar, the scale, the title and the label.</td>
2073 </tr>
2074 <tr>
2077 </tr>
2078 <tr>
2081 </tr>
2082 <tr>
2085 </tr>
2086 <tr>
2089 </tr>
2090 <tr>
2093 </tr>
2094 <tr>
2097 </tr>
2098 <tr>
2101 </tr>
2102 <tr>
2105 </tr>
2106 </table>
2110 <tr>
2113 </tr>
2114 <tr>
2117 </tr>
2118 <tr>
2121 </tr>
2122 <tr>
2125 </tr>
2126 <tr>
2129 </tr>
2130 <tr>
2132 <td>Is fired when any background was set on an element. Hands over
2133 the element, the background string and the firing widget</td>
2134 </tr>
2135 </table>
2137 </li>
2141 <!-- ########################################################### -->
2142 <!-- PAGER WIDGET -->
2143 <!-- ########################################################### -->
2147 </p>
2149 Use example to play with the example in a terminal:
2152 </p>
2159 }
2160 </style>
2165 </div>
2166 </div>
2172 <tr>
2176 </tr>
2177 </table>
2181 <tr>
2184 </tr>
2185 </table>
2189 <tr>
2190 <td>example.element ("div.toolkit-example") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
2192 </tr>
2193 </table>
2197 <tr>
2200 </tr>
2201 </table>
2205 <tr>
2208 </tr>
2209 </table>
2210 </li>
2214 <!-- ########################################################### -->
2215 <!-- RESPONSE HANDLER WIDGET -->
2216 <!-- ########################################################### -->
2221 user interface for equalizers and the like.
2222 </p>
2224 Use handles[n] to play with the example handles in a terminal:
2225 <a href="javascript:handles[14].set('active', !handles[14].get('active'))">handles[14].set('active', !handles[14].get('active'))</a>
2227 </p>
2231 }
2232 </style>
2237 </div>
2238 </div>
2244 <tr>
2247 Technicaly: The overlapping square pixels are multiplied with this factor to determine
2248 the smallest overlapping region.</td>
2250 </tr>
2251 <tr>
2254 Technicaly: The overlapping square pixels are multiplied with this factor to determine
2255 the smallest overlapping region.</td>
2257 </tr>
2258 <tr>
2260 <td>A multiplier for the label hit test. Defines the "weight" of the images boundaries to flee.<br/>
2261 Technicaly: The overlapping square pixels are multiplied with this factor to determine
2262 the smallest overlapping region.</td>
2264 </tr>
2265 <tr>
2269 </tr>
2271 <td>
2275 </tr>
2276 <tr>
2280 </tr>
2281 </table>
2285 <tr>
2287 <td>Create a ResponseHandle inside the ResponseHandler. Options is an object containing
2289 <br/><br/>
2290 It returns the new ResponseHandle instance.
2291 </td>
2292 </tr>
2293 <tr>
2295 <td>Create a bunch of ResponseHandle inside the ResponseHandler. The argument
2296 is a list of objects containing
2298 </td>
2299 </tr>
2300 <tr>
2303 </tr>
2304 <tr>
2307 </tr>
2308 </table>
2312 <tr>
2315 </tr>
2316 <tr>
2319 </tr>
2320 </table>
2324 <tr>
2327 </tr>
2328 </table>
2332 <tr>
2334 <td>Is fired when a ResponseHandle was added. Hands over the new handle and the widget instance.</td>
2335 </tr>
2336 <tr>
2339 </tr>
2340 <tr>
2343 </tr>
2344 </table>
2346 </li>
2349 <!-- ########################################################### -->
2350 <!-- SELECT WIDGET -->
2351 <!-- ########################################################### -->
2355 </p>
2357 Use example to play with the example in a terminal:
2360 </p>
2365 </div>
2366 </div>
2372 <tr>
2376 </tr>
2377 </table>
2381 <tr>
2384 </tr>
2385 </table>
2389 <tr>
2390 <td>example.element ("div.toolkit-example") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
2392 </tr>
2393 </table>
2397 <tr>
2400 </tr>
2401 </table>
2405 <tr>
2408 </tr>
2409 </table>
2410 </li>
2413 <!-- ########################################################### -->
2414 <!-- STATE WIDGET -->
2415 <!-- ########################################################### -->
2418 The <strong>State</strong> widget is a multi-functional adaption of a traditional LED. It is able to show
2419 different colors as well as on/off states. The "brightness" can be set seamlessly. Classes
2421 </p>
2423 Use s1 ... s8 to play with the examples in a terminal:
2426 </p>
2431 }
2435 }
2438 }
2439 </style>
2444 </div>
2445 </div>
2451 <tr>
2453 <td>The state of the element. Can be true or false or a float between 0 and 1 for seamless "brightness".</td>
2455 </tr>
2456 <tr>
2460 </tr>
2461 <tr>
2465 </tr>
2466 </table>
2470 <tr>
2471 <td>state.element ("div.toolkit-state") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
2472 <td>The base element of the widget. It draws the background color and acts as a container fo the other elements.</td>
2473 </tr>
2474 <tr>
2476 <td>An element for designing purposes. It is drawn over the background of the base element and is used
2477 to show a semi-transparent PNG for faking some differences in the distribution of light.</td>
2478 </tr>
2479 <tr>
2481 <td>The mask is used to darken, lighten or flatten the background colour depending on the CSS of it.
2482 Its opacity reacts directly on the state variable.</td>
2483 </tr>
2484 </table>
2488 <tr>
2491 </tr>
2492 <tr>
2495 </tr>
2496 </table>
2497 </li>
2500 <!-- ########################################################### -->
2501 <!-- TOGGLE WIDGET -->
2502 <!-- ########################################################### -->
2507 toggle enabled, so click and hold toggles for the duration of the mousedown.
2509 </p>
2511 Use toggle to play with the 1st example in a terminal:
2513 and press to play with the 2nd example in a terminal:
2516 </p>
2520 }
2521 </style>
2526 </div>
2527 </div>
2533 <tr>
2535 <td>A text or HTML snipped used as a label for the active toggle state. Set to false to use the default label.</td>
2537 </tr>
2538 <tr>
2542 </tr>
2543 <tr>
2545 <td>To enable press toggle set a time in milliseconds after a press is interpreted as a toggle. Releasing the button
2546 after a press toggle resets to the original state.</td>
2548 </tr>
2549 <tr>
2551 <td>Enable or disable toggling, disable for external toggle only or if pure push-to-talk is needed.</td>
2553 </tr>
2554 </table>
2558 <tr>
2561 </tr>
2562 <tr>
2565 </tr>
2566 </table>
2570 <tr>
2572 <td>Is fired when the state of the toggle changed.
2573 Hands over the new state and the widget instance.</td>
2574 </tr>
2575 </table>
2577 </li>
2580 <!-- ########################################################### -->
2581 <!-- VALUE WIDGET -->
2582 <!-- ########################################################### -->
2586 and providing a input text entry for editing the value. Value is based on
2588 </p>
2590 Use value to play with the example in a terminal:
2593 </p>
2596 </style>
2601 </div>
2602 </div>
2608 <tr>
2612 </tr>
2613 <tr>
2617 </tr>
2618 <tr>
2622 </tr>
2623 <tr>
2625 <td>A callback function getting a manually entered value and
2626 returning a processed value or false to disable editing.</td>
2628 </tr>
2629 </table>
2633 <tr>
2634 <td>value.element ("form.toolkit-value") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
2636 </tr>
2637 <tr>
2640 </tr>
2641 </table>
2645 <tr>
2647 <td>Is fired when the input field was clicked and editing starts.
2648 Hands over the actual value and the widget instance.</td>
2649 </tr>
2650 <tr>
2652 <td>Is fired when the input field receives key presses.
2653 Hands over the event, the actual value and the widget instance.</td>
2654 </tr>
2655 <tr>
2658 Hands over the actual value and the widget instance.</td>
2659 </tr>
2660 <tr>
2662 <td>Is fired when the input was entered.
2663 Hands over the actual value and the widget instance.</td>
2664 </tr>
2665 <tr>
2667 <td>Is fired when editing the input field has ended.
2668 Hands over the actual value and the widget instance.</td>
2669 </tr>
2670 </table>
2672 </li>
2675 <!-- ########################################################### -->
2676 <!-- VALUE BUTTON WIDGET -->
2677 <!-- ########################################################### -->
2681 with all options to change it via drag, scroll or keyboard input. ValueButton displays
2682 a little bar element for providing direct optical comparison between different values.
2683 ValueButton extends <a href="#button">Button</a> and implements <a href="#warning">Warning</a> and <a href="#ranged">Ranged</a>.
2684 </p>
2685 <p>
2686 Layout is handled a little sloppy by now, you have to style your valuebuttons via CSS
2687 on your own by now because there are no presets atm.
2688 </p>
2690 Events and classes of DragValue and ScrollValue are delegated to valuebutton.element.
2691 </p>
2693 Use the titles of the buttons to play with the examples in a terminal:
2696 </p>
2700 }
2701 </style>
2706 </div>
2707 </div>
2717 </tr>
2718 <tr>
2722 </tr>
2723 <tr>
2727 </tr>
2728 <tr>
2730 <td>How <a href="#dragvalue">DragValue</a> behaves, _TOOLKIT_VERTICAL, _TOOLKIT_HORIZONTAL or _TOOLKIT_POLAR.</td>
2732 </tr>
2733 <tr>
2735 <td>Used when drag_direction = _TOOLKIT_POLAR. Defines the angle of
2736 the middle of the positive value changes. 0 means straight upward.
2737 E.g. a value of 45 does positive value changes in upper and
2740 </tr>
2741 <tr>
2743 <td>Used when drag_direction = _TOOLKIT_POLAR. Amount of degrees
2744 to separate positive from negative value changes.</td>
2746 </tr>
2747 <tr>
2749 <td>Double clicking the widget resets the value to this one. If undefined,
2750 the initial value is used.</td>
2752 </tr>
2753 </table>
2757 <tr>
2760 </tr>
2761 <tr>
2764 </tr>
2765 <tr>
2768 </tr>
2769 </table>
2773 <tr>
2776 </tr>
2777 <tr>
2780 </tr>
2781 <tr>
2784 </tr>
2785 <tr>
2788 </tr>
2789 <tr>
2792 </tr>
2793 </table>
2797 <tr>
2800 </tr>
2801 <tr>
2803 <td>Is fired when the was double clicked. Hands over the reset value and the widget instance.</td>
2804 </tr>
2805 </table>
2807 </li>
2810 <!-- ########################################################### -->
2811 <!-- VALUE KNOB WIDGET -->
2812 <!-- ########################################################### -->
2816 </p>
2818 Use valueknob to play with the example in a terminal:
2821 </p>
2826 </div>
2827 </div>
2833 <tr>
2837 </tr>
2838 </table>
2842 <tr>
2845 </tr>
2846 </table>
2850 <tr>
2851 <td>example.element ("div.toolkit-example") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
2853 </tr>
2854 </table>
2858 <tr>
2861 </tr>
2862 </table>
2866 <tr>
2869 </tr>
2870 </table>
2871 </li>
2876 <!-- ########################################################### -->
2877 <!-- WIDGET WIDGET -->
2878 <!-- ########################################################### -->
2882 provides basic functionality like delegating events, setting options and
2884 <a target="_blank" href="http://mootools.net/docs/core/Class/Class.Extras#Options">Options</a> and
2886 </p>
2892 <tr>
2896 </tr>
2897 <tr>
2901 </tr>
2902 <tr>
2906 </tr>
2907 <tr>
2909 <td>An object containing CSS style declarations. Can only be used
2910 if any of the widgets elements was stylized via widget.stylize(element).
2911 </td>
2913 </tr>
2914 <tr>
2916 <td>Widgets can be set inactive. Inactive widgets set the class
2917 ".toolkit-disabled" on an eventually stylized element. Widgets
2918 may use this parameter e.g. to restrict events.
2919 </td>
2921 </tr>
2922 </table>
2926 <tr>
2928 <td>Main actions every widget needs to take like setting a id
2929 or the initial options. Argument is the options
2930 object handed over to initialize. Returns the widget. An
2931 Extending widget should call the corresponding parent constructor.
2933 </tr>
2934 <tr>
2937 they have initialized themselves. Fires the "initialized" event.
2938 Returns the widget.</td>
2939 </tr>
2940 <tr>
2942 <td>Set an option. Key is the options name, value the new value
2943 and hold prevents some options to take the default action (like e.g. redraw()).
2944 Returns the widgets instance. An Extending widget should call the corresponding parent constructor
2946 </tr>
2947 <tr>
2949 <td>Get the value of an option. An Extending widget should call the corresponding parent constructor
2951 </tr>
2952 <tr>
2955 to get enhanced by widgets extending this base class.The widget
2956 should call the corresponding parent constructor <em>after</em> it has built all elements.</td>
2957 </tr>
2958 <tr>
2961 to get enhanced by widgets extending this base class. The widget
2962 should call the corresponding parent constructor <em>after</em> it has destroyed the elements.</td>
2963 </tr>
2964 <tr>
2966 <td>Create a widget from a DOM element. Basically it means to add the id
2967 from options and set a basic CSS class. If delegate is true, all events
2968 are delegated to the widgets instance. If classify is true, all CSS functionality
2969 will be bound to the widget instance. Returns the element.</td>
2970 </tr>
2971 <tr>
2973 <td>Takes a DOM element and delegates its main events to the widget class.
2974 Returns the element. The events hand over the event object itself, the widget
2975 instance and the element the events were delegated from.</td>
2976 </tr>
2977 <tr>
2979 <td>Takes a DOM element and delegates its CSS functionality to the widget class.
2980 Returns the element.</td>
2981 </tr>
2982 <tr>
2984 <td>Marks a DOM element as receiver for the options.styles property.
2985 Returns the element.</td>
2986 </tr>
2987 <tr>
2989 <td>If a delegation was executed, addClass adds a CSS class to the delegated
2990 element.</td>
2991 </tr>
2992 <tr>
2994 <td>If a delegation was executed, addClass removes a CSS class from the delegated
2995 element.</td>
2996 </tr>
2997 <tr>
2999 <td>Adds an event listener with a callback function to the Widget. "event" can be an array of descriptors or a string.</td>
3000 </tr>
3001 <tr>
3004 </tr>
3005 <tr>
3007 <td>Fires an event on the Widget.Arguments is a variable or an array with arguments
3008 passed to the callback and delay dealys the execution in milliseconds.</td>
3009 </tr>
3010 </table>
3014 <tr>
3016 <td>Is fired when an instance gets created.
3017 Hands over the widget instance.</td>
3018 </tr>
3019 <tr>
3021 <td>Is fired when an instance was created.
3022 Hands over the widget instance.</td>
3023 </tr>
3024 <tr>
3026 <td>Is fired when the widget wants to redraw.
3027 Hands over the widget instance.</td>
3028 </tr>
3029 <tr>
3031 <td>Is fired when the widget is destroyed.
3032 Hands over the widget instance.</td>
3033 </tr>
3034 <tr>
3036 <td>Is fired when the options are changed.
3037 Hands over the key, the new value, the hold parameter and the widget instance.</td>
3038 </tr>
3039 <tr>
3042 Hands over the new value, the hold parameter and the widget instance.</td>
3043 </tr>
3044 <tr>
3046 <td>Is fired if an option was requested.
3047 Hands over the key, the value and the widget instance.</td>
3048 </tr>
3049 <tr>
3051 <td>Is fired when an element was widgetized..
3052 Hands over the element and the widget instance.</td>
3053 </tr>
3054 <tr>
3056 <td>Is fired when an element delegated all its events to the widgets instance.
3057 Hands over the element and the widget instance.</td>
3058 </tr>
3059 <tr>
3061 <td>Is fired when an element handed all CSS class functionality over to the widgets instance.
3062 Hands over the element and the widget instance.</td>
3063 </tr>
3064 <tr>
3066 <td>Is fired when an element was marked as a receiver for options.styles.
3067 Hands over the element and the widget instance.</td>
3068 </tr>
3069 <tr>
3071 <td>Is fired when the mouse enters the delegating element.
3072 Hands over event, widget instance and the DOM element receiving the event.</td>
3073 </tr>
3074 <tr>
3076 <td>Is fired when the mouse leaves the delegating element.
3077 Hands over event, widget instance and the DOM element receiving the event.</td>
3078 </tr>
3079 <tr>
3081 <td>Is fired when a mouse button is clicked.
3082 Hands over event, widget instance and the DOM element receiving the event.</td>
3083 </tr>
3084 <tr>
3086 <td>Is fired when a mouse button is pressed.
3087 Hands over event, widget instance and the DOM element receiving the event.</td>
3088 </tr>
3089 <tr>
3091 <td>Is fired when a mouse button is released.
3092 Hands over event, widget instance and the DOM element receiving the event.</td>
3093 </tr>
3094 <tr>
3096 <td>Is fired when the mouse is moved inside the element.
3097 Hands over event, widget instance and the DOM element receiving the event.</td>
3098 </tr>
3099 <tr>
3101 <td>Is fired when dragging starts.
3102 Hands over event, widget instance and the DOM element receiving the event.</td>
3103 </tr>
3104 <tr>
3106 <td>Is fired when dragging stops.
3107 Hands over event, widget instance and the DOM element receiving the event.</td>
3108 </tr>
3109 <tr>
3111 <td>Is fired when a finger is put on a touchscreen.
3112 Hands over event, widget instance and the DOM element receiving the event.</td>
3113 </tr>
3114 <tr>
3116 <td>Is fired when a finger is lifted froma touchscreen.
3117 Hands over event, widget instance and the DOM element receiving the event.</td>
3118 </tr>
3119 <tr>
3121 <td>Is fired when a finger moves on a touchscreen.
3122 Hands over event, widget instance and the DOM element receiving the event.</td>
3123 </tr>
3124 <tr>
3126 <td>Is fired when the mouse button was clicked twice.
3127 Hands over event, widget instance and the DOM element receiving the event.</td>
3128 </tr>
3129 <tr>
3131 <td>Is fired when a key is pressed.
3132 Hands over event, widget instance and the DOM element receiving the event.</td>
3133 </tr>
3134 <tr>
3136 <td>Is fired when a key was pressed.
3137 Hands over event, widget instance and the DOM element receiving the event.</td>
3138 </tr>
3139 <tr>
3141 <td>Is fired when a key is released.
3142 Hands over event, widget instance and the DOM element receiving the event.</td>
3143 </tr>
3144 <tr>
3146 <td>Is fired when the element receives a scroll event.
3147 Hands over event, widget instance and the DOM element receiving the event.</td>
3148 </tr>
3149 <tr>
3151 <td>Is fired when the element gets focus.
3152 Hands over event, widget instance and the DOM element receiving the event.</td>
3153 </tr>
3154 <tr>
3156 <td>Is fired when the focus is taken from the element.
3157 Hands over event, widget instance and the DOM element receiving the event.</td>
3158 </tr>
3159 </table>
3161 </li>
3164 <!-- ########################################################### -->
3165 <!-- WINDOW WIDGET -->
3166 <!-- ########################################################### -->
3170 </p>
3172 Use window to play with the example in a terminal:
3173 <a href="javascript:win.set('maximize', {x: true, y: true})">win.set("maximize", {x: true, y: true})</a>
3175 </p>
3180 </div>
3181 </div>
3187 <tr>
3191 </tr>
3192 <tr>
3196 </tr>
3197 <tr>
3201 </tr>
3202 <tr>
3206 </tr>
3207 <tr>
3211 </tr>
3212 <tr>
3214 <td>The coordinates for the position calculations. Can be one out of
3215 <ul>
3225 </ul>
3226 </td>
3228 </tr>
3229 <tr>
3233 </tr>
3234 <tr>
3238 </tr>
3239 <tr>
3243 </tr>
3244 <tr>
3248 </tr>
3249 <tr>
3253 </tr>
3254 <tr>
3258 </tr>
3259 <tr>
3261 <td>Dock the window to a border or corner. Can be one out of:
3262 <ul>
3272 </ul>
3273 Or use false to disable.
3275 </td>
3277 </tr>
3278 <tr>
3280 <td>false for no maximizing at all or object with x and y
3281 as boolean members for indicating maximization in a certain direction.</td>
3283 </tr>
3284 <tr>
3286 <td>Whether the window is minimized or not. Is meant to be used via
3287 a window manager application which keeps track of minimized windows.
3288 Minimized windows will be disposed from the DOM and can be redrawn
3289 by setting this to false again.</td>
3291 </tr>
3292 <tr>
3296 </tr>
3297 <tr>
3299 <td>Initial position of the window. Can be one out of:
3300 <ul>
3310 </ul>
3311 </td>
3313 </tr>
3314 <tr>
3316 <td>The z position of piling windows. Is meant to be used
3317 by a window manager application.</td>
3319 </tr>
3320 <tr>
3324 </tr>
3325 <tr>
3329 </tr>
3330 <tr>
3334 </tr>
3335 <tr>
3339 </tr>
3340 <tr>
3344 </tr>
3345 <tr>
3349 </tr>
3350 <tr>
3352 <td>Update content policy while resizing. Posible values are:
3353 <ul>
3356 </ul>
3357 </td>
3359 </tr>
3360 <tr>
3362 <td>Action to take when title bar receives a double click.
3363 Possible values are:
3364 <ul>
3371 </ul>
3372 Set to false to disable.
3373 </td>
3375 </tr>
3376 <tr>
3378 <td>Single value or array of:
3379 <ul>
3389 </ul>
3390 </td>
3392 </tr>
3393 <tr>
3395 <td>Single value or array of:
3396 <ul>
3406 </ul></td>
3408 </tr>
3409 <tr>
3411 <td>Single value or array of:
3412 <ul>
3422 </ul></td>
3424 </tr>
3425 <tr>
3427 <td>Single value or array of:
3428 <ul>
3438 </ul></td>
3440 </tr>
3441 <tr>
3443 <td>Single value or array of:
3444 <ul>
3454 </ul></td>
3456 </tr>
3457 <tr>
3459 <td>Single value or array of:
3460 <ul>
3470 </ul></td>
3472 </tr>
3473 <tr>
3477 </tr>
3478 <tr>
3482 </tr>
3483 <tr>
3487 </tr>
3488 <tr>
3492 </tr>
3493 <tr>
3497 </tr>
3498 <tr>
3502 </tr>
3503 </table>
3507 <tr>
3509 <td>Toggles the maximize state. If only one direction
3510 is maximized, the other one gets maximized, too.</td>
3511 </tr>
3512 <tr>
3515 </tr>
3516 <tr>
3519 </tr>
3520 <tr>
3523 </tr>
3524 <tr>
3527 </tr>
3528 </table>
3532 <tr>
3533 <td>Window.element ("div.toolkit-window") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
3535 </tr>
3536 <tr>
3538 <td>The header container of the window. Receives
3539 the double click for header_action.</td>
3540 </tr>
3541 <tr>
3544 </tr>
3545 <tr>
3548 </tr>
3549 <tr>
3552 </tr>
3553 <tr>
3556 </tr>
3557 <tr>
3560 </tr>
3561 <tr>
3564 </tr>
3565 <tr>
3568 </tr>
3569 <tr>
3572 </tr>
3573 <tr>
3576 </tr>
3577 <tr>
3580 </tr>
3581 <tr>
3584 </tr>
3585 <tr>
3588 </tr>
3589 </table>
3593 <tr>
3596 </tr>
3597 <tr>
3600 </tr>
3601 <tr>
3604 </tr>
3605 <tr>
3608 </tr>
3609 <tr>
3612 </tr>
3613 <tr>
3616 </tr>
3617 <tr>
3620 </tr>
3621 <tr>
3624 </tr>
3625 </table>
3629 <tr>
3631 <td>Is fired when maximize is toggled via its functions.
3632 Hands over the window instance and the maximize object with x and y as members.</td>
3633 </tr>
3634 <tr>
3636 <td>Is fired when minimize is toggled via its function.
3637 Hands over the window instance and the minimize state.</td>
3638 </tr>
3639 <tr>
3641 <td>Is fired when shrink state is toggled via its function.
3642 Hands over the window instance and the shrink state.</td>
3643 </tr>
3644 <tr>
3646 <td>Is fired when the dimensions of the window changed via API.
3647 Hands over the window instance and a dimensions object.</td>
3648 </tr>
3649 <tr>
3651 <td>Is fired when the position of the window changed via API.
3652 Hands over the window instance and a dimensions object.</td>
3653 </tr>
3654 <tr>
3656 <td>Is fired when the content of the window was resized.
3657 Hands over the window instance.</td>
3658 </tr>
3659 <tr>
3661 <td>Is fired when the header was rebuilt.
3662 Hands over the window instance.</td>
3663 </tr>
3664 <tr>
3666 <td>Is fired when the footer was rebuilt.
3667 Hands over the window instance.</td>
3668 </tr>
3669 <tr>
3671 <td>Is fired when dragging starts.
3672 Hands over the window instance and the event.</td>
3673 </tr>
3674 <tr>
3676 <td>Is fired when dragging ends.
3677 Hands over the window instance and the event.</td>
3678 </tr>
3679 <tr>
3681 <td>Is fired when the window is dragged.
3682 Hands over the window instance and the event.</td>
3683 </tr>
3684 <tr>
3686 <td>Is fired when resizing starts.
3687 Hands over the window instance and the event.</td>
3688 </tr>
3689 <tr>
3691 <td>Is fired when resizing ends.
3692 Hands over the window instance and the event.</td>
3693 </tr>
3694 <tr>
3696 <td>Is fired when the window gets resized.
3697 Hands over the window instance and the event.</td>
3698 </tr>
3699 <tr>
3702 </tr>
3703 <tr>
3705 <td>Is fired when the maximize button is clicked.
3706 Hands over the window instance and the maximize object.</td>
3707 </tr>
3708 <tr>
3710 <td>Is fired when the maximize vertical button is clicked.
3711 Hands over the window instance and the maximize vertical state.</td>
3712 </tr>
3713 <tr>
3715 <td>Is fired when the maximize horizontal button is clicked.
3716 Hands over the window instance and the maximize horizontal state.</td>
3717 </tr>
3718 <tr>
3720 <td>Is fired when the minimize button is clicked.
3721 Hands over the window instance and the minimize state.</td>
3722 </tr>
3723 <tr>
3725 <td>Is fired when the shrink button is clicked.
3726 Hands over the window instance and the shrink state.</td>
3727 </tr>
3728 <tr>
3730 <td>Is fired when a header double click occured.
3731 Hands over the window instance and the header action constant.</td>
3732 </tr>
3733 </table>
3734 </li>
3749 usability of widgets. They may create additional DOM or SVG elements but normally aren't
3750 capable of existing on their own. For example a <a href="#responsehandle">ResponseHandle</a> needs
3752 </li>
3767 <!-- ########################################################### -->
3768 <!-- CIRCULAR MODULE -->
3769 <!-- ########################################################### -->
3773 numerical values in a circular manner. Circular is able to draw labels,
3774 dots and markers and can show a hand. Circular e.g. is implemented by
3775 the clock to draw the hours, minutes and seconds. Circular extends
3779 </p>
3785 <tr>
3789 </tr>
3790 <tr>
3794 </tr>
3795 <tr>
3799 </tr>
3800 <tr>
3804 </tr>
3805 <tr>
3807 <td>An object with the hands dimensions:
3808 <ul>
3812 </ul>
3813 </td>
3815 </tr>
3816 <tr>
3820 </tr>
3821 <tr>
3825 </tr>
3826 <tr>
3828 <td>If base value is set, value ring starts at this point and shows values
3829 above and beneath base value. Set to false to disable based drawing.
3830 </td>
3832 </tr>
3833 <tr>
3837 </tr>
3838 <tr>
3842 </tr>
3843 <tr>
3847 </tr>
3848 <tr>
3852 </tr>
3853 <tr>
3857 </tr>
3858 <tr>
3860 <td>Default settings for markers. Object with the following members:
3861 <ul>
3864 </ul>
3865 </td>
3867 </tr>
3868 <tr>
3870 <td>Array containing objects describing a marker. Members are:
3871 <ul>
3872 <li><strong>from (optional)</strong>: value from where to draw the marker. If omitted, min is used.</li>
3873 <li><strong>to (optional)</strong>: value setting the end of the marker. If omitted, max is used.</li>
3876 <li><strong>margin (optional)</strong>: margin if you want another one as the default (distance from outer size)</li>
3877 <li><strong>thickness (optional)</strong>: thickness if you want another one as the default</li>
3878 </ul>
3879 </td>
3881 </tr>
3882 <tr>
3884 <td>Default settings for dots. Object with the following optional members:
3885 <ul>
3889 </ul>
3890 </td>
3892 </tr>
3893 <tr>
3895 <td>Array containing objects describing a dot. Members are:
3896 <ul>
3900 <li><strong>margin (optional)</strong>: margin if you want another one as the default (distance from outer size)</li>
3903 </ul>
3904 </td>
3906 </tr>
3907 <tr>
3909 <td>Settings for labels. Object with the following optional members:
3910 <ul>
3912 <li><strong>align</strong>: _TOOLKIT_INNER or _TOOLKIT_OUTER describe where to put the anchor of labels. INNER means labels inside a virtual circle at margin, OUTER vice versa.</li>
3913 <li><strong>format</strong>: function receiving the value and returning a string. Used if a label in the list has no label member set.</li>
3914 </ul>
3915 </td>
3917 </tr>
3918 <tr>
3920 <td>Array containing objects describing a label. Members are:
3921 <ul>
3923 <li><strong>label (optional)</strong>: text for the label. If omitted, the value from pos is sent through label.format</li>
3926 <li><strong>margin (optional)</strong>: margin if you want another one as the default (distance from outer size)</li>
3927 </ul>
3928 </td>
3930 </tr>
3931 </table>
3935 <tr>
3936 <td>circular.element ("g.toolkit-circular") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
3938 </tr>
3939 <tr>
3942 </tr>
3943 <tr>
3946 </tr>
3947 <tr>
3950 </tr>
3951 <tr>
3954 </tr>
3955 <tr>
3958 </tr>
3959 <tr>
3962 </tr>
3963 </table>
3968 <tr>
3971 </tr>
3972 <tr>
3975 </tr>
3976 <tr>
3979 </tr>
3980 <tr>
3983 </tr>
3984 </table>
3985 </li>
3988 <!-- ########################################################### -->
3989 <!-- DRAG VALUE MODULE -->
3990 <!-- ########################################################### -->
3997 </p>
4003 <tr>
4007 </tr>
4008 <tr>
4012 </tr>
4013 <tr>
4015 <td>Function returning the element firing the drag event. Set to false to use the main element.</td>
4017 </tr>
4018 <tr>
4022 </tr>
4023 <tr>
4027 </tr>
4028 <tr>
4032 </tr>
4033 <tr>
4037 </tr>
4038 <tr>
4040 <td>Used when direction = _TOOLKIT_POLAR. Defines the angle of
4041 the middle of the positive value changes. 0 means straight upward.
4042 E.g. a value of 45 does positive value changes in upper and
4045 </tr>
4046 <tr>
4048 <td>Used when direction = _TOOLKIT_POLAR. Amount of degrees
4049 to separate positive from negative value changes.</td>
4051 </tr>
4052 <tr>
4056 </tr>
4057 <tr>
4061 </tr>
4062 </table>
4066 <tr>
4068 <td>This event is fired when dragging starts. It gets fired by the
4069 DragValue instance (handing over the DragValue instance and the mousedown event)
4070 and by the element set via "events" option (handing over
4071 the mousedown event, the actual value, the element receiving the drag,
4072 the DragValue instance and the range instance).</td>
4073 </tr>
4074 <tr>
4076 <td>This event is fired when dragging occurs. It gets fired by the
4077 DragValue instance (handing over the DragValue instance and the mousedown event)
4078 and by the element set via "events" option (handing over
4079 the mousedown event, the actual value, the element receiving the drag,
4080 the DragValue instance and the range instance).</td>
4081 </tr>
4082 <tr>
4084 <td>This event is fired when dragging ends. It gets fired by the
4085 DragValue instance (handing over the DragValue instance and the mousedown event)
4086 and by the element set via "events" option (handing over
4087 the mousedown event, the actual value, the element receiving the drag,
4088 the DragValue instance and the range instance).</td>
4089 </tr>
4090 </table>
4091 </li>
4094 <!-- ########################################################### -->
4095 <!-- EQ BAND MODULE -->
4096 <!-- ########################################################### -->
4101 as a fully functional representation of a single equalizer band. EqBand
4103 </p>
4109 <tr>
4111 <td>The type of the filter:
4112 <ul>
4125 </ul>
4126 </td>
4128 </tr>
4129 <tr>
4133 </tr>
4134 <tr>
4138 </tr>
4139 <tr>
4143 </tr>
4144 </table>
4148 <tr>
4151 </tr>
4152 <tr>
4154 <td>Set an option. Key is the options name, value the new value
4155 and hold prevents some options to take the default action (like e.g. redraw()).
4156 Returns the widgets instance.</td>
4157 </tr>
4158 <tr>
4161 </tr>
4162 </table>
4166 <tr>
4169 </tr>
4170 </table>
4171 </li>
4174 <!-- ########################################################### -->
4175 <!-- FILTER MODULE -->
4176 <!-- ########################################################### -->
4180 filter curves for different filter types. Filter implements
4182 <a target="_blank" href="http://mootools.net/docs/core/Class/Class.Extras#Options">Options</a> and
4185 </p>
4191 <tr>
4193 <td>The type of the filter:
4194 <ul>
4207 </ul>
4208 </td>
4210 </tr>
4211 <tr>
4215 </tr>
4216 <tr>
4220 </tr>
4221 <tr>
4225 </tr>
4226 </table>
4230 <tr>
4233 </tr>
4234 <tr>
4236 <td>Set an option. Key is the options name, value the new value
4237 and hold prevents some options to take the default action (like e.g. redraw()).
4238 Returns the widgets instance.</td>
4239 </tr>
4240 <tr>
4243 </tr>
4244 <tr>
4247 </tr>
4248 <tr>
4251 </tr>
4252 <tr>
4255 </tr>
4256 <tr>
4259 </tr>
4260 <tr>
4263 </tr>
4264 <tr>
4267 </tr>
4268 <tr>
4271 </tr>
4272 <tr>
4275 </tr>
4276 <tr>
4279 </tr>
4280 <tr>
4283 </tr>
4284 <tr>
4287 </tr>
4288 <tr>
4291 </tr>
4292 <tr>
4295 </tr>
4296 </table>
4300 <tr>
4302 <td>The initializing process of the widget is complete. hands
4303 over the widget instance.</td>
4304 </tr>
4305 <tr>
4307 <td>Is fired when any option was set. Hands over
4308 the key, the new value, the hold parameter and the firing widget.</td>
4309 </tr>
4310 <tr>
4313 Hands over the new value, the hold parameter and the widget instance.</td>
4314 </tr>
4315 <tr>
4317 <td>Is fired when an option is requested. Hands over
4318 the key, the value and the firing widget.</td>
4319 </tr>
4320 <tr>
4323 </tr>
4324 </table>
4325 </li>
4329 <!-- ########################################################### -->
4330 <!-- GRAPH MODULE -->
4331 <!-- ########################################################### -->
4334 A <strong>Graph</strong> is a single SVG path element. It provides some functions to easily draw
4335 paths inside Charts and other derivates. Graph extends <a href="#widget">Widget</a> and implements
4337 </p>
4343 <tr>
4345 <td>An array containing objects with x and y members: {x:0.1, y:0.5} or a ready-to-use string</td>
4347 </tr>
4348 <tr>
4350 <td>The curving mode of the path:
4351 <ul>
4357 <li>H[n] = smooth horizontal flat; It is like S with y1 = y and x1 between
4358 x and last x with a factor (smoothing) of [n]. [n] should be a int or float
4360 </ul>
4361 </td>
4363 </tr>
4364 <tr>
4366 <td>The drawing mode of the path:
4367 <ul>
4372 <li>_TOOLKIT:VARIABLE: filled from a percentual position on the canvas, provide base option</li>
4373 </ul>
4374 </td>
4376 </tr>
4377 <tr>
4381 </tr>
4382 <tr>
4386 </tr>
4388 <td>
4392 </tr>
4393 <tr>
4398 </tr>
4399 <tr>
4401 <td>The width of the graph. Set basis of Graph.x for initial width to prevent
4404 </tr>
4405 <tr>
4407 <td>The height of the graph. Set basis of Graph.y for initial height to prevent
4410 </tr>
4411 <tr>
4413 <td>If the graph has a key enabled, draw a short description
4414 for this graph. Expects a string or false to disable.</td>
4416 </table>
4420 <tr>
4421 <td>graph.element ("path.toolkit-graph") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
4423 </tr>
4424 </table>
4428 <tr>
4431 </tr>
4432 <tr>
4435 </tr>
4436 </table>
4437 </li>
4440 <!-- ########################################################### -->
4441 <!-- GRID MODULE -->
4442 <!-- ########################################################### -->
4445 A <strong>Grid</strong> creates a couple of lines and labels in a SVG image on the x and y axis.
4448 Graphs need a parent SVG image do draw into. The base element of a Grid is a
4449 SVG group containing all the labels and lines. Grids extend
4451 </p>
4457 <tr>
4459 <td>An array containing objects with the following members for the x axis: <br />{pos:x[, color: "colorstring"[, class: "classname"[, label:"labeltext"]]]}</td>
4461 </tr>
4462 <tr>
4464 <td>An array containing objects with the following members for the y axis: <br />{pos:x[, color: "colorstring"[, class: "classname"[, label:"labeltext"]]]}</td>
4466 </tr>
4467 <tr>
4472 </tr>
4473 <tr>
4478 </tr>
4479 </table>
4483 <tr>
4486 </tr>
4487 <tr>
4490 </tr>
4491 </table>
4494 <tr>
4495 <td>grid.element ("g.toolkit-grid") <i class="delegated">⇄</i> <i class="classified">❇</i></td>
4497 </tr>
4498 <tr>
4501 </tr>
4502 <tr>
4505 </tr>
4506 </table>
4510 <tr>
4513 </tr>
4514 <tr>
4517 </tr>
4518 </table>
4520 </li>
4524 <!-- ########################################################### -->
4525 <!-- RANGE MODULE -->
4526 <!-- ########################################################### -->
4530 Range is useful to build coordinate systems, calculating pixel positions
4531 for different scale types and the like. Ranged is used e.g. in Scale,
4532 MeterBase and Graph to draw elements on a certain position according to
4534 <a target="_blank" href="http://mootools.net/docs/core/Class/Class.Extras#Options">Options</a> and
4536 </p>
4542 <tr>
4544 <td>Is called automatically on instantiation. Argument is on object
4545 containing options to set initially.</td>
4546 </tr>
4547 <tr>
4549 <td>Set an option. Key is the options name, value the new value
4550 and hold prevents some options to take the default action (like e.g. redraw()).
4551 Returns the widgets instance.</td>
4552 </tr>
4553 <tr>
4556 </tr>
4557 </table>
4561 <tr>
4563 <td>The initializing process of the widget is complete. hands
4564 over the widget instance.</td>
4565 </tr>
4566 <tr>
4568 <td>Is fired when any option was set. Hands over
4569 the key, the new value, the hold parameter and the firing widget.</td>
4570 </tr>
4571 <tr>
4574 Hands over the new value, the hold parameter and the widget instance.</td>
4575 </tr>
4576 <tr>
4578 <td>Is fired when an option is requested. Hands over
4579 the key, the value and the firing widget.</td>
4580 </tr>
4581 </table>
4582 </li>
4586 <!-- ########################################################### -->
4587 <!-- RESPONSE HANDLE MODULE -->
4588 <!-- ########################################################### -->
4591 <strong>ResponseHandle</strong> is a controller inside a <a href="#responsehandler">ResponseHandler</a>,
4592 but can manually be used in <a href="#freqeuncyresponse">FrequencyResponse</a> or <a href="#graph">Graph</a>, too.
4593 ResponseHandles have various faces and functions to provide different controls for every
4594 application an alterable Graph may be used in:
4595 <ul>
4597 in x and y direction. Able to show z axis via its size.</li>
4599 while horizontal lines restricted in width may be used as handles for a graphical EQ
4600 with fixed bands. They are able to show the z axis via their size.</li>
4602 filling the space to their boundary. They can't show any z axis except as value in the label.</li>
4603 </ul>
4604 ResponseHandle is based on <a href="#widget">Widget</a> and implements <a href="#ranges">Ranges</a>, <a href="#warning">Warning</a> and <a href="#globalcursor">GlobalCursor</a>.
4605 </p>
4611 <tr>
4613 <td>
4617 </tr>
4618 <tr>
4623 </tr>
4624 <tr>
4626 <td>
4630 </tr>
4631 <tr>
4633 <td>Mode of the ResponseHandle.
4634 <ul>
4642 </ul>
4643 </td>
4645 </tr>
4646 <tr>
4649 Returns a value describing the amount of intersection with other handle elements.
4650 Intersections are weighted depending on the intersecting object. E.g. SVG edges normally have
4651 a very high impact while intersecting in comparison with overlapping handle objects
4652 that have a low impact on intersection.
4653 </td>
4655 </tr>
4656 <tr>
4658 <td>Perferred position of the label. This options is an array containing positions
4659 with a descending priority - the first child will be the most preferred position.<br/>
4660 Possible positions depend on the chosen handle mode:
4661 <ul>
4662 <li><strong>_TOOLKIT_CIRCULAR</strong>: _TOOLKIT_TOP, _TOOLKIT_BOTTOM, _TOOLKIT_LEFT, _TOOLKIT_RIGHT</li>
4663 <li><strong>_TOOLKIT_LINE_VERTICAL</strong>: _TOOLKIT_TOP_LEFT, _TOOLKIT_TOP_RIGHT, _TOOLKIT_LEFT, _TOOLKIT_RIGHT, _TOOLKIT_BOTTOM_LEFT, _TOOLKIT_BOTTOM_RIGHT</li>
4664 <li><strong>_TOOLKIT_LINE_HORIZONTAL</strong>: _TOOLKIT_TOP_LEFT, _TOOLKIT_TOP, _TOOLKIT_TOP_RIGHT, _TOOLKIT_BOTTOM_LEFT, _TOOLKIT_BOTTOM, _TOOLKIT_BOTTOM_RIGHT</li>
4665 <li><strong>_TOOLKIT_BLOCK_[LEFT/RIGHT/TOP/BOTTOM]</strong>: _TOOLKIT_TOP_LEFT, _TOOLKIT_TOP, _TOOLKIT_TOP_RIGHT, _TOOLKIT_LEFT, _TOOLKIT_CENTER, _TOOLKIT_RIGHT, _TOOLKIT_BOTTOM_LEFT, _TOOLKIT_BOTTOM, _TOOLKIT_BOTTOM_RIGHT</li>
4666 </ul>
4667 </td>
4669 </tr>
4670 <tr>
4673 </td>
4674 <td>function (title, x, y, z) { return [ title, "\n", x, " Hz\n", y.toFixed(2), " dB\nQ: ", z.toFixed(2) ].join(""); }</td>
4675 </tr>
4676 <tr>
4680 </tr>
4681 <tr>
4685 </tr>
4686 <tr>
4690 </tr>
4691 <tr>
4695 </tr>
4696 <tr>
4700 </tr>
4701 <tr>
4705 </tr>
4706 <tr>
4710 </tr>
4711 <tr>
4715 </tr>
4716 <tr>
4720 </tr>
4721 <tr>
4725 </tr>
4726 <tr>
4730 </tr>
4731 <tr>
4733 <td>Draw a tiny handle for manipulating the z axis. z_handle has the following
4734 values:
4735 <ul>
4744 </ul>
4745 </td>
4747 </tr>
4748 <tr>
4752 </tr>
4753 <tr>
4755 <td>If the z handle is centered (top, rifght, bottom, left) set it to this size;
4756 Values > 1 are interpreted as pixels, values < 1 declare a percentual value of the main handles width/height
4757 </td>
4759 </tr>
4760 <tr>
4764 </tr>
4765 <tr>
4767 <td>Show a second (_TOOLKIT_LINE_* or _TOOLKIT_BLOCK_*) or both axis (_TOOLKIT_CIRCULAR) while dragging</td>
4769 </tr>
4770 </table>
4774 <tr>
4777 </tr>
4778 <tr>
4781 </tr>
4782 <tr>
4785 </tr>
4786 </table>
4790 <tr>
4791 <td>responsehandle.element ("g.toolkit-response-handle") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
4792 <td>The SVG group element containing all other elements. It may have additional
4793 classes added depending on the state of the handle:
4794 <ul>
4798 </ul>
4799 It may have additional
4800 classes added depending on the mode of the handle:
4801 <ul>
4809 </ul>
4810 </td>
4811 </tr>
4812 <tr>
4815 </tr>
4816 <tr>
4819 </tr>
4820 <tr>
4823 </tr>
4824 <tr>
4827 </tr>
4828 </table>
4832 <tr>
4834 <td>Is fired when a ResponseHandle was clicked.
4835 Hands over an object containing the values and coordinates and
4836 the ResponseHandle instance.</td>
4837 </tr>
4838 <tr>
4840 <td>Is fired when a ResponseHandle was released.
4841 Hands over an object containing the values and coordinates and
4842 the ResponseHandle instance.</td>
4843 </tr>
4844 <tr>
4846 <td>Is fired when a ResponseHandle is dragged.
4847 Hands over an object containing the values and coordinates and
4848 the ResponseHandle instance.</td>
4849 </tr>
4850 <tr>
4852 <td>Is fired when a ResponseHandles z axis starts to change.
4853 Hands over the z value and the ResponseHandle instance.</td>
4854 </tr>
4855 <tr>
4857 <td>Is fired when a ResponseHandles z axis was changed.
4858 Hands over the new z value and the ResponseHandle instance.</td>
4859 </tr>
4860 <tr>
4862 <td>Is fired when a ResponseHandles z axis change has ended.
4863 Hands over the new z value and the ResponseHandle instance.</td>
4864 </tr>
4865 </table>
4867 </li>
4870 <!-- ########################################################### -->
4871 <!-- SCALE MODULE -->
4872 <!-- ########################################################### -->
4876 a fader or a frequency response graph. Depending on some parameters
4877 it tries to decide on its own where to draw labels and dots depending
4878 on the available space and the scale. Scales can be drawn vertically
4879 and horizontally. Scale implements <a href="#ranges">Ranges</a> and extends <a href="#widget">Widget</a>.
4880 </p>
4882 Use scales.left, scales.right, scales.top and scales.bottom to play with the examples in a terminal:
4885 </p>
4890 }
4893 }
4897 }
4900 }
4904 }
4907 }
4911 }
4914 }
4916 }
4917 </style>
4922 </div>
4923 </div>
4929 <tr>
4931 <td>Layout of the widget.
4932 <ul>
4937 </ul>
4938 </td>
4940 </tr>
4941 <tr>
4945 </tr>
4946 <tr>
4948 <td>Array consisting of the multipliers labels and dots can be drawn.
4950 (but not 30 or 80) depending on the available space. Dots are drawn one level lower between the
4951 labels (if there's enough space). The highest level can be drawn at real number multiplicators,
4952 too, lower levels are only possible at the exact division.
4953 </td>
4955 </tr>
4956 <tr>
4958 <td>The base value where drawing of labels and dots starts. Every drawing position
4962 </tr>
4963 <tr>
4965 <td>A function to format the labels before they are drawn. Receives the actual value
4966 and is supposed to return a string.</td>
4968 </tr>
4969 <tr>
4973 </tr>
4974 <tr>
4978 </tr>
4979 <tr>
4983 </tr>
4984 <tr>
4988 </tr>
4989 <tr>
4993 </tr>
4994 <tr>
4998 </tr>
4999 </table>
5003 <tr>
5006 </tr>
5007 <tr>
5010 </tr>
5011 </table>
5015 <tr>
5016 <td>scale.element ("div.toolkit-scale") <i class="delegated">⇄</i> <i class="classified">❇</i> <i class="stylized">✎</i></td>
5018 </tr>
5019 <tr>
5021 <td>Dots are absolutely positioned divs. They can have different additional
5022 CSS classes depending on their position. These classes are:
5023 <ul>
5028 </ul>
5029 </td>
5030 </tr>
5031 <tr>
5033 <td>Labels are absolute positioned spans containing text. They can have the same
5035 </tr>
5036 </table>
5040 <tr>
5043 </tr>
5044 </table>
5046 </li>
5049 <!-- ########################################################### -->
5050 <!-- SCROLL VALUE MODULE -->
5051 <!-- ########################################################### -->
5058 </p>
5064 <tr>
5068 </tr>
5069 <tr>
5073 </tr>
5074 <tr>
5076 <td>A function returning the element firing the scroll event. Set to false to use the main element.</td>
5078 </tr>
5079 <tr>
5083 </tr>
5084 <tr>
5088 </tr>
5089 <tr>
5093 </tr>
5094 <tr>
5098 </tr>
5099 </table>
5103 <tr>
5105 <td>This event is fired when scrolling starts. It gets fired by mousewheel
5106 ScrollValue instance (handing over the ScrollValue instance and the mousedown event)
5107 and by the element set via "events" option (handing over
5108 the mousewheel event, the actual value, the element receiving the drag,
5109 the ScrollValue instance and the range instance).</td>
5110 </tr>
5111 <tr>
5113 <td>This event is fired when scrolling occurs. It gets fired by the
5114 ScrollValue instance (handing over the ScrollValue instance and the mousewheel event)
5115 and by the element set via "events" option (handing over
5116 the mousewheel event, the actual value, the element receiving the drag,
5117 the ScrollValue instance and the range instance).</td>
5118 </tr>
5119 <tr>
5121 <td>This event is fired when scrolling ends. It gets fired by the
5122 ScrollValue instance (handing over the ScrollValue instance and the mousewheel event)
5123 and by the element set via "events" option (handing over
5124 the mousewheel event, the actual value, the element receiving the drag,
5125 the ScrollValue instance and the range instance).</td>
5126 </tr>
5127 </table>
5128 </li>
5145 them gives a widget or module some more functions to do <a href="#audiomath">calculations</a> or
5147 </li>
5161 <!-- ########################################################### -->
5162 <!-- ANCHOR IMPLEMENT -->
5163 <!-- ########################################################### -->
5167 a real position according to x, y, width and height of an element and a
5168 given gravity like _TOOLKIT_BOTTOM_RIGHT.
5170 </p>
5176 <tr>
5178 <td>Translates an anchor to a real position.
5179 anchor can be one out of:
5180 <ul>
5190 </ul>
5191 x, y, width and height are the coordinates of the
5192 widget for which the position is calculated.<br/><br/>
5193 Returns: {x: n, y: n}
5194 </td>
5195 </tr>
5196 </table>
5197 </li>
5200 <!-- ########################################################### -->
5201 <!-- AUDIO MATH IMPLEMENT -->
5202 <!-- ########################################################### -->
5206 logarithmic ones and vice versa. If you need an easy convertion between
5207 dB or Hz and a linear scale implement this class.
5208 </p>
5250 </table>
5251 </li>
5254 <!-- ########################################################### -->
5255 <!-- GLOBAL CURSOR IMPLEMENT -->
5256 <!-- ########################################################### -->
5260 exclusive use of one of the standard cursors (http://www.echoecho.com/csscursors.htm) in
5261 the whole application. Global Cursor implements
5263 GlobalCursor is used e.g. in <a href="#responsehandle">ResponseHandle</a> or <a href="#dragvalue">DragValue</a>.
5264 </p>
5270 <tr>
5273 auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress | not-allowed | no-drop | vertical-text | all-scroll | col-resize | row-resize
5274 </td>
5275 </tr>
5276 <tr>
5279 auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress | not-allowed | no-drop | vertical-text | all-scroll | col-resize | row-resize
5280 </td>
5281 </tr>
5282 </table>
5286 <tr>
5289 </tr>
5290 <tr>
5293 </tr>
5294 </table>
5296 </li>
5299 <!-- ########################################################### -->
5300 <!-- GRADIENT IMPLEMENT -->
5301 <!-- ########################################################### -->
5304 <strong>Gradient</strong> Gradient provides a function to set the background of a DOM element to a
5305 CSS gradient according on the users browser and version. Gradient
5307 </p>
5313 <tr>
5315 <td>Gradient for the background.
5316 Keys are ints or floats as string
5317 corresponding to the chosen scale.
5318 Values are valid CSS color strings
5321 </tr>
5322 <tr>
5326 </tr>
5327 </table>
5331 <tr>
5333 <td>This function generates a string from a given gradient object to set
5334 as a CSS background for a DOM element. If element is given, the function
5335 automatically sets the background. If grad is omitted, the
5336 gradient is taken from options. Fallback is used if no gradient
5337 can be created. If fallback is omitted, options.background is used.
5338 if no range is set Gradient assumes that the implementing instance
5339 has Range functionality.</td>
5340 </tr>
5341 </table>
5345 <tr>
5347 <td>Is fired when any background was set on an element. Hands over
5348 the element, the background string and the firing widget</td>
5349 </tr>
5350 </table>
5352 </li>
5355 <!-- ########################################################### -->
5356 <!-- RANGED IMPLEMENT -->
5357 <!-- ########################################################### -->
5360 <strong>Ranged</strong> provides functions for calculating linear scales from different values.
5361 Ranged is useful to build coordinate systems, calculating pixel positions
5362 for different scale types and the like. Ranged is used e.g. in Scale,
5363 MeterBase and Graph to draw elements on a certain position according to
5365 </p>
5372 <td>What kind of value are we having?
5373 <ul>
5378 </ul>
5379 If a function instead of a constant
5380 is handed over, it receives the
5381 actual options object as the second
5382 argument and is supposed to return a
5384 third argument "coef" is true, it is
5385 supposed to return a value depending
5386 on a coefficient handed over as the
5387 first argument.</td>
5393 <td>Dimensions of the range, set to
5394 width/height in pixels, if you need
5395 it for drawing purposes, to 100 if
5396 you need percentual values or to 1
5397 if you just need a linear
5398 coefficient for a e.g. logarithmic
5399 scale.</td>
5408 <td>Step size, needed for e.g. user
5409 interaction</td>
5412 <td>Multiplier for e.g. SHIFT pressed
5413 while stepping</td>
5416 <td>Multiplier for e.g. SHIFT + CONTROL
5417 pressed while stepping</td>
5420 <td>Snap the value to a virtual grid
5421 with this distance
5422 Using snap option with float values
5423 causes the range to reduce its
5424 minimum and maximum values depending
5425 on the amount of decimal digits
5426 because of the implementation of
5427 math in JavaScript.
5428 Using a step size of e.g. 1.125
5429 reduces the maximum usable value
5432 decimal point)</td>
5435 <td>If snap is set decide how to jump
5436 between snaps. Setting this to true
5437 slips to the next snap if the value
5438 is more than on its half way to it.
5439 Otherwise the value has to reach the
5440 next snap until it is hold there
5441 again.</td>
5444 <td>The factor is used to stretch the
5445 used range of the logarithmic curve</td>
5447 </table>
5453 depending on options.basis</td></tr>
5456 coefficients, ...) based on options.basis</td></tr>
5458 <td>Just a wrapper for having understandable code and backward
5459 compatibility</td></tr>
5461 <td>Just a wrapper for having understandable code and backward
5462 compatibility</td></tr>
5468 <td>Takes a value and returns the corresponding point on the scale
5469 according to basis</td></tr>
5471 <td>Takes a point on the scale according to basis and returns the
5472 corresponding value</td></tr>
5474 <td>If snapping is enabled, snaps the value to the grid.
5475 Returns the snapped value.</td></tr>
5476 </table>
5478 </li>
5481 <!-- ########################################################### -->
5482 <!-- RANGES IMPLEMENT -->
5483 <!-- ########################################################### -->
5487 building coordinate systems and the like. Ranges implements
5490 </p>
5496 <tr><td>add_range(from, name)</t><td>Add a range. From is a function returning a Range instance or an
5497 object containing options for a new Range. If name is set, the range
5498 is added to the main instance and a set function is created.<br />
5502 If name is set and this.options[name] exists, is an object and from
5503 is an object, too, both are merged before a range is created.
5504 Returns the range.</td></tr>
5505 </table>
5509 <tr>
5512 the new Range and the widget instance.</td>
5513 </tr>
5514 </table>
5516 </li>
5519 <!-- ########################################################### -->
5520 <!-- TOOLTIP IMPLEMENT -->
5521 <!-- ########################################################### -->
5525 lists follow the mouse pointer throughout the document and auto-show
5526 and auto-hide automatically according to the amount of single tooltips.
5527 </p>
5533 <tr>
5535 <td>Shows, updates and removes a tooltip.
5536 <ul>
5540 </ul>
5541 Returns the tooltip.
5542 <br/><br/>
5543 Content can be a string interpreted as HTML or a DOM element.
5544 </td>
5545 </tr>
5546 </table>
5550 <tr>
5553 </tr>
5554 </table>
5558 <tr>
5560 <td>Is fired when a single tooltip was removed,
5561 hands over the tooltip and the firing widget.</td>
5562 </tr>
5563 <tr>
5565 <td>Is fired when a single tooltip was removed,
5566 hands over the empty tooltip, the content and the firing widget.</td>
5567 </tr>
5568 <tr>
5570 <td>Is fired when a single tooltip was set,
5571 hands over the tooltip and the firing widget.</td>
5572 </tr>
5573 <tr>
5575 <td>Is fired when the tooltips where shown,
5576 hands over the firing widget.</td>
5577 </tr>
5578 <tr>
5580 <td>Is fired when the tooltips where hidden,
5581 hands over the firing widget.</td>
5582 </tr>
5583 </table>
5584 </li>
5587 <!-- ########################################################### -->
5588 <!-- WARNING IMPLEMENT -->
5589 <!-- ########################################################### -->
5593 used e.g. in <a href="#responsehandle">ResponseHandle</a> or <a href="dragvalue">DragValue</a> when the value exceeds the
5594 range. Warning implements
5596 </p>
5604 amount of milliseconds in timeout. Timeout defaults to 250.
5605 </td></tr>
5606 </table>
5610 <tr>
5612 <td>Is fired when a warning is requested.
5613 Hands over the widget instance.</td>
5614 </tr>
5615 </table>
5617 </li>
5619 </ul>
5620 </body>
5621 </html>