Wikidiagrams

From Audacity Wiki
Revision as of 15:40, 31 January 2020 by James (talk | contribs) (updates.)
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.

Examples

These links take you to the editable wiki specs for the diagrams. Often these show the diagram too. The diagrams can be embedded in any page in wiki. Umm. Many of these are now 'red links' as the software has moved on. Instead try the Toolbox/Examples.

  • Audacity People: Hotspot map to identify people.
  • Toolbox/Spectrograms: Explains sound in a spectrogram. A row of buttons at the top changes the size of the window used in making the histogram, as you hover over the different buttons. The buttons change the backing image.
  • The Ear: A row of buttons changes the complete image including any hotspots by loading a new spec. Shows ear, middle ear and inner ear.
  • Bug Counts: The image, a bar graph, is data driven. Updating values in the wiki page updates the image.

Bonus:

  • Climate Classification: Map of different climate types. This example uses the same image for the basic image and the hotspots. It also shows that using accented characters in the spec-name works. This demo was important in getting rounding of colour values to multiples of 5 to work, as the image is not in pure colours.

Layouts

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.