Difference between revisions of "Wikidiagrams"

From Audacity Wiki
Jump to: navigation, search
(updates.)
(Remove dead links section)
Line 8: Line 8:
 
==Examples==
 
==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]]
+
* [[Toolbox/Examples]] shows examples of the different kinds of diagrams.
 
+
* [[Toolbox/Tutorials]] is the start of explanatory documentation about Audacity source code and digital audioThese pages soften use static images which later will be replaced by more dynamic ones.
* '''[[Toolbox/AudacityPeople|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.
 
* '''[[Toolbox/The_Ear|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.
 
* '''[[Toolbox/Bug_Counts|Bug Counts]]:''' The image, a bar graph, is data driven.  Updating values in the wiki page updates the image.
 
 
 
'''Bonus:'''
 
* '''[[Toolbox/Köppen_Globe|Climate Classification]]:''' Map of different climate types.  This example uses the same image for the basic image and the hotspotsIt 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==
 
==Layouts==

Revision as of 23:18, 9 March 2020

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

  • 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.

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.