deutschesoft/toolkit

toolkit is a JavaScript user interface widget library for professional audio applications

toolkit is a JavaScript widget library with special focus on building low latency user interfaces for audio applications. It contains a wide range of widgets such as faders, knobs, levelmeters and equalizers.

Design Goals

toolkit is written in pure JavaScript and has no external dependencies. It is supposed to run in browsers which support ECMAScript 5 including IE9. toolkit was designed to be lightweight and fast while keeping the full flexibility which comes with CSS. toolkit widgets offer consistent and intuitive APIs.

Documentation

The complete API documentation can be found at [http://docs.deuso.de/]. The documentation contains interactive examples for many Widgets.

Alternatively, the documentation can be directly built from the source code. The documentation in the source files uses the common jsdoc syntax and JSDoc 3. can be used to generate the documentation. If you have jsdoc installed, simply run

make jsdoc

Apart from the documentation inside the source tree, there are several longer introductory articles and usage examples in the directories doc/docs/ and doc/tutorials/. These articles automatically get added to the generated documentation by our jsdoc configuration.

Demos

Several online demos of interfaces using toolkit can be found at [http://demo.deuso.de]. All of those demos are written in AWML, which is a HTML5 based markup language, which can be used to create toolkit-based interfaces.

For most use-cases using AWML is much more convenient than building an interface in JavaScript using toolkit directly.

Reporting Bugs

When you find a bug in this software, please report it to our issue tracker at [https://github.com/DeutscheSoft/toolkit].

License

toolkit is released unter the the terms of the GPLv3. See the file COPYING file for details.

Copyright (c) 2013-2019 Markus Schmidt [email protected]

Copyright (c) 2014-2019 Arne Gödeke [email protected]

toolkit's Issues

Clock redraw refactoring

'snap' option in Ranged

The documentation of the 'snap' option is confusing (to me). It also does not seem to mention all the possible options (e.g. array of values). Lets make is clearer and possibly simplify the API. Less options is often better.

Event handler leaking

There is many places which leak event handlers. One prominent example is Widget class itself, which does not clean up its event handlers on destroy().

Dynamics redraw refactoring

Container (and others): make children aware of parent

Equalizer: refactor redraw

Showcase: prev/next buttons

Add buttons to showcase to step to next or previous widget. Should work with opened examples page, too.

Fader: dragging doesn't work after refactoring

Select redraw refactoring

ButtonArray: refactor layout

ButtonArray uses lots of getBoundingClientRect which possibly can be reduced.

Pager: animation flickering and hidden state problems

this is two issues:

• the default animation may lead to flickering, because after the animation is done, pages go back their initial state briefly
• sometimes pages stick around (this is triggered by some kind of unfortunate timing when changing pages)

Knob: inconsistent use of options.container

Knob itself extends Circular and sets options.container to an internal svg during initialize. This breaks options.container to work correctly, for instance it is not possible to set after widget creation. I don't really see a reason for this, it also make the initialization difficult. Maybe it would be easier to not Extend Circular, but instead have a circular instance locally similarly to the clock widget.

Responsehandler draw delay breaks on Chromium

Chromium recently changed how timer events work in the presence of input events. Essentially, timer events are delayed indefinitely, when there are inputs events firing at the same time. This prevents the delayed draw from happening until the handle is released in the worst case.

Fader: add title and value like meterbase

new API for outer_height et. al.

outer_height and the other similar functions currently exist in two variants. One variant simply calculates the effective dimensions, while the second variants tries to update the style properties in order to set the effective dimensions. Both variants force a relayout, which is not necessary (but can be fixed). Furthermore, the set-variant forces a style recalculation and it would be nice to somehow seperate that step (e.g. by optionally passing the computed style of the element).

'snap' feature and user input

The snap feature currently leads to many subtle bugs in combination with user input. For instance: scrolling happens in pixel values, which are then transformed into the value coordinates, then the value is updated and snapped. Depending on the settings of 'snap' the value might or might not change.

Fader redraw refactoring

Window redraw refactoring

Drag: add option with minimal dragging distance before dragging activates

Fixes maximized Window resize with single click in title bar

ResponseHandle redraw refactoring

Pager DOM does not scale

The current pager implementation, which uses one huge div, which is moved scrolled from one page to the other does harm rendering performance severely. Hiding the pages using visibility:hidden does not help.

Chart autosizing fails on initial draw

Tooltip keep_inside feature

The tooltip keep_inside feature calculates the tooltip width in order to make sure it does not extend across the window boundary. This happens (potentially) on every mousemove event and is very expensive.

Pager: add active page hash to URL

Should work recursively through all nested pagers. Should be switchable by option.

LevelMeter __margin

During initial render, the Levelmeter calculates its __margin. Probably unavoidable.

Meterbase _bar_size()

Calculate the size of the meter bar based on outer_height of label and title.

Chart draw_title()

Chart draw_title() calculates the title bounding box to improve placement. This forces one relayout, can it be removed?

Circular draw_labels()

This function is already optimized to trigger only one relayout (by getBBox()). Can this be improved further?

Fader/Knob: Warning doesn't work

Chart: key background doesn't fit

Use "createDocumentFragment" to build DOM structures wherever possible

https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

Container/Widget: Extract basic child functionality from Container to Widget

...so all widgets can have children. This makes some lately added transitions to Container base class of some items unnecessary. Should fix ValueKnob and ValueButton (missing values).

Using innerHTML

There are many widgets which allow setting html content using innerHTML. Examples are all sorts of labels. This has several disadvantages:

1. generally performance sucks a bit, because the browser has to parse this as html (which it is usually not)
2. it makes it impossible to set text, which is invalid html, for instance something which contains safe chars like '<', etc.

Solution: Allow either setting text content or DOM nodes directly. That way setting 'HTML' content has to be done explicitly.

Chart: draw_key should use scheduler

LevelMeter/MeterBase: switch default CSS from position:absolute to inline-blocks

Pager autosizing

The Pager autosized itself and all contained pages on initialization and resize. This is maybe unavoidable, but could certainly also be done in CSS when doing the layout.

Clock labeling API

I propose a new API for formatting click entries. Instead of passing all individual Date entries, simply pass just the date object itself.

Scale expensive label positioning

Scale calculates the size of every label in order to

• align them correctly to the scale dots
• to make sure the Scale itself is wide/high enough for all labels to fit in

Select set_size

The Select widgets sets its width property to the maximum width of any child entry. This requires calculating their outer_width and forces a relayout.

Fader: refactor to adapt new Scale layout

Scale changed lately so it doesn't fit Fader anymore.

Make all internal methods private functions

Many widgets contain private drawing functions or event callbacks. They are usually prefixed by an underscore. Make them all "private" methods be moving them into the outer function scope. This is purely a cosmetic change, but can improve inlining.

Clock _set_labels()

_set_labels() triggers two relayouts. Can this be reduced?

ButtonArray next/prev arrow placement

The buttonarray has to calculate its own size and the size of all buttons in order to decide whether or not the next/prev buttons should be displayed. Probably unavoidable and also only happens once on initializiation now, which is not so bad.

sprintf vs FORMAT

FORMAT is nice for reusing the same format string. However, it is rather slow when used only once. Write a new sprintf

Graph: refactor redraw method

replace TK.destroy() by node.remove()

The DOM standard defines the node.remove() method, which currently does exactly what TK.destroy() does. It is currently not implemented in IE, but can be replaced by a polyfill. node.remove() is semantically much clearer than TK.destroy().

tooltip handling Fader

The fader tooltip is not updated when dragging the fader outside of its scale

Window: Fix buttons

Grid draw_lines()

Grid draw_lines() calculates the size of labels in order to place lines correctly. Could this be removed, for instance by hiding the grid behind labels some other way?

Levelmeter: clip/peak/label handling

clip, peak and label are currently set from within the redraw() method. This logic is currently slightly broken and the information could also be out of date, because the age of the data is not taken into account.