Difference between revisions of "Toolbox/Flow Chart"

From Audacity Wiki
Jump to: navigation, search
(explanation.)
(tweak.)
Line 5: Line 5:
  
  
−
This page is the equivalent of a wikicommons page that holds an image for use in other articles.  However rather than the actual image it holds text, a spec, that generates the image.  This example is the spec for the interactive diagram which shows a flow chart for producing the Audacity manual:
+
This page is the equivalent of a wikicommons page that holds an image for use in wikipedia articles.  However, rather than the actual image it holds text, a spec, that generates the image.  This example is the spec for the interactive diagram which shows a flow chart for producing the Audacity manual:
  
 
Here's the result:
 
Here's the result:

Revision as of 10:16, 25 March 2020


This is an example interactive diagram created using the Wikidiagrams library. One aim of the project is to provide interactive diagrams that explain everything to do with Audacity. The code is also expected to be useful for other code projects, and eventually for Wikipedia too, for biochemical pathways and other interactive diagrams.


This page is the equivalent of a wikicommons page that holds an image for use in wikipedia articles. However, rather than the actual image it holds text, a spec, that generates the image. This example is the spec for the interactive diagram which shows a flow chart for producing the Audacity manual:

Here's the result:

The detailed data for the chart follows. 

START
ADD:DATA=
{"HStack":[
    {"VStack":[
        {"HStack":[
            {"VStack":[
                {"Rectangle":"WIT Shortcuts"},
                {"Rectangle":"WIT Tooltips"},
                {"Rectangle":"WIT Menus"}
                ]},
            {"VStack":[
                {"Circle":"WIT","sizeAs":2},
                {"Rectangle":"Toolbar Images"}
                ]},
            {"VStack":[
                {"Rectangle":"Image Templates"},
                {"Rectangle":"Big Pages"},
                {"Rectangle":"Menu Images"}
                ]},
            {"Spacer":0.5}
            ]},

        {"HStack":[
            {"VStack":[
                {"Circle":"Audacity",
                 "sizeAs":1.3},
                {"Circle":"Scripting"}
                ],
                "sizeAs":0.8
                },
            {"VStack":[
                {"Rectangle":"Preferences Images"},
                {"Rectangle":"EGA Images"},
                {"Rectangle":"Track Images"}
                ]},
            {"VStack":[
                {"Circle":"File Upload"}
                ]}
            ]}
        ],
        "sizeAs":3,
        "margins":7
        },
    {"VStack":[
        {"Circle":"Cut & Paste","sizeAs":2},
        {"Rectangle":"Alpha Manual"},
        {"Spacer":0.35}
        ]},
    {"Arrows":[
        "WIT Shortcuts","WIT",
        "WIT Tooltips","WIT",
        "WIT Menus","WIT",
        "WIT","Toolbar Images",
        "WIT","Image Templates",
        "WIT","Big Pages",
        "WIT","Menu Images",
        "Audacity","WIT Menus",
        "Scripting","Audacity",
        "Audacity","Preferences Images",
        "Audacity","EGA Images",
        "Scripting","Track Images",
        "Toolbar Images","File Upload",
        "Menu Images","File Upload",
        "Preferences Images","File Upload",
        "EGA Images","File Upload",
        "Track Images","File Upload",
        "File Upload","Alpha Manual",
        "Image Templates","Cut & Paste",
        "Big Pages","Cut & Paste",
        "Cut & Paste","Alpha Manual"
        ]}
    ]}

With the layout established, the details that follow customise the objects. 

NEXTOBJECT:
   colour:rgb(255,230,205)
   bcolour:rgb(215,155,0)
   cornerRadius:15
   tip=

WIT Shortcuts

Raw data listing the shortcuts. Each shortcut is associated with a menu item. Most of this data is in the menus file, so this list just lists the key combinations for optional shortcuts. 

NEXTOBJECT:
   colour:rgb(255,230,205)
   bcolour:rgb(215,155,0)
   cornerRadius:15
   tip=

WIT Tooltips

Raw data, one item for each tooltip explaining what one menu item does. 

NEXTOBJECT:
   colour:rgb(255,230,205)
   bcolour:rgb(215,155,0)
   cornerRadius:15
   tip=

WIT Menus

Raw data that specifies the full tree-like structure of the Audacity menus. There is an entry in the raw data for each menu item. 

NEXTOBJECT:
   colour:rgb(255,230,205)
   bcolour:rgb(215,155,0)
   cornerRadius:15
   tip=

WIT

Wit is a web application that shows "What is That?" for many of the user interface fetures in Audacity. It also has a hidden feature where it can generate images and tables for use in the Audacity manual.

Wit consumes information stored in our Wiki as raw JSON data, and produces images and formatted tables which can be uploaded to the wiki for our manual. 

NEXTOBJECT:
   colour:rgb(215,230,210)
   bcolour:rgb(130,180,100)
   tip=

Toolbar Images

Annotated images of 9 of our toolbars in .png format. These are extracted from the master image and have labels and arrows positioned and drawn by WIT. <p>One example: 

NEXTOBJECT:
   colour:rgb(215,230,210)
   bcolour:rgb(130,180,100)
   tip=

Templates

Wiki templates generated by WIT providing image maps. We have templates for: 

NEXTOBJECT:
   colour:rgb(215,230,210)
   bcolour:rgb(130,180,100)
   tip=

Big Pages

WIT-generated formatted wiki-text for the large pages. 

NEXTOBJECT:
   colour:rgb(215,230,210)
   bcolour:rgb(130,180,100)
   tip=

Menu Images

Around 50 images (.png files) of menus in Audacity, showing different submenus open. These are drawn by WIT, based on the raw menu information.

One example: 


NEXTOBJECT:
   colour:rgb(220,230,250)
   bcolour:rgb(108,140,190)
   tip=

Audacity

Audacity generates raw data used by WIT. For example, Get Info gets information about the menu structure and create a data file for that. Audacity also generates the 'list of boxes' for the locations and dimensions of tool icons and toolbars. 

NEXTOBJECT:
   colour:rgb(220,230,250)
   bcolour:rgb(108,140,190)
   tip=

Scripting

Audacity has a plug-in, mod-script-pipe, which accepts scripting commands sent over a pipe from python. Python scripts create and capture a large number of [https://wit.audacityteam.org/images.htm images of tracks]. 

NEXTOBJECT:
   colour:rgb(220,230,250)
   bcolour:rgb(108,140,190)
   tip=

Preferences Images

Audacity Screenshot Tool captures images of all the preferences screens. 

NEXTOBJECT:
   colour:rgb(220,230,250)
   bcolour:rgb(108,140,190)
   tip=

EGA Images

Audacity Screenshot Tool captures images of all the Effects, Generators and Analysers (EGAs). 

NEXTOBJECT:
   colour:rgb(220,230,250)
   bcolour:rgb(108,140,190)
   tip=

Track Images

Track Images are generated by Audacity scripting. The script sets up different configurations of tracks and then calls the screenshot tool to capture an image of each. 


NEXTOBJECT:
   colour:rgb(225,210,230)
   bcolour:rgb(150,115,165)
   tip=

File Upload

Small numbers of WIT-generated image files are uploaded to our wiki by hand. For larger numbers, we use a pywikibot script. 

NEXTOBJECT:
   colour:rgb(225,210,230)
   bcolour:rgb(150,115,165)
   tip=

Cut & Paste

Tables and template definitions in textual form generated by WIT are always pasted into the manual by hand. 

NEXTOBJECT:
   colour:rgb(225,210,230)
   bcolour:rgb(150,115,165)
   cornerRadius:15
   tip=

Alpha Manual

The manual for the current alpha edition of Audacity is maintained in wiki. When it is ready we use the mw2html script to convert it to static html pages, which are included with the Audacity installer, and also uploaded to the current online copy. 

CREDITS:
   CAPTION=Flowchart of Making the Audacity Manual;
   tip=

Instructions

  • Hover over boxes in the image for more details.
  • Hold shift down to keep the detail box still, so that you can click the hyperlinks in it


Credits: James Crook ©2020; Flowchart Image placed in Public Domain

Retrieved from "https://wiki.audacityteam.org/w/index.php?title=Toolbox/Flow_Chart&oldid=40439"