From Audacity Wiki
Revision as of 16:27, 6 September 2020 by James (talk | contribs) (James moved page Audacity Tool Kit to Wikidiagrams)
Jump to: navigation, search
The Audacity Tool Kit (ATK) is a javascript library for creating interactive diagrams
  • The source for diagrams is stored and edited as text in wiki.
  • The diagrams can contain multiple elements, which are drawn onto a canvas.

The toolkit occupies the middle ground between charting libraries (which make adding custom decoration and interaction to diagrams difficult), and image editors (which make data-driven images difficult). The toolkit can combine data-driven diagrams and custom elements. The interactive diagram is best thought of as a program for drawing an image.


  • Toolbox/Examples shows examples of the different kinds of diagrams.
  • Toolbox/Tutorials is the start of explanatory documentation about Audacity source code and digital audio. These pages soften use static images which later will be replaced by more dynamic ones.


The toolkit uses visual containers to control layout of elements.

  • HStack - A horizontal row of items
  • VStack - A vertical column of items
  • Flow - A layout like that for text, where elements are added left to right, starting a new line if necessary.
  • Overlay - Items 'drawn over' each other.

The number and sizes of items in a container can change, and the positioning will be updated accordingly. This is important for international text, where labels may change in size depending on the language. It also is important for data driven diagrams. If there are more pieces of data, elements can move to show them.

Javascript Safety

Javascript is supported indirectly, so there is no 'eval' of javascript expressions. The tool kit uses JSON.parse to gather data. The toolkit may place text into HTML DOM elements using the innerHTML property. Where it does so, the text is passed through a sanitizer which has a white-list for what HTML elements it allows through.

Phishing Safety

The ATK is flexible enough to draw fake log in and other screens. It cannot draw outside the canvas, so safety versus phishing attempts may require a frame around the canvas, and may depend on details of how and where the canvas can be shown.