Proposal Dynamic Imagemap using Javascript

From Audacity Wiki
Jump to: navigation, search
Proposal pages help us get from feature requests into actual plans. This proposal page is about a dynamic javascript imagemap of Audacity features.
Proposal pages are used on an ongoing basis by the Audacity development team and are open to edits from visitors to the wiki. They are a good way to get community feedback on a proposal.


  • Note: Proposals for Google Summer of Code projects are significantly different in structure, are submitted via Google's web app and may or may not have a corresponding proposal page.

Proposed Feature

This proposal is a bit different to most proposals in that its not for Audacity's executable. Rather it is for javascript code that will power a dynamic image map for Audacity.

  • Acts as a special kind of index page for the manual.
  • Provides dynamic annotation of the interface.
  • 'Treasure hunt' feature.


Developer Backing

  • James Crook


Design

Detailed design and progress is now being tracked at Automation Project Progress#wit

Dimensions

Current minimum screen size is planned to be 1220x720.

  • At a later date we may be able to reduce this by:
  • (a) Making the side panel float on smaller screens.
  • (b) Scaling the UI display to 80% dimensions on smaller screens.

Maintenance

The Imagemap will require mark up in the wiki to indicate content that is and is not suitable for it. This will be like the existing 'noexport' tag, and does not need programming expertise to maintain.

The aspiration is to create an integrated script which:

  • Fetches the relevant images used by the image map
  • Fetches the relevant extracts from the wiki to show in the sidebar
  • Creates the local copy of the manual using the script mw2html
  • Creates the pdf copy of the manual using the html2pdf script
  • Does this nightly, in the same way that the doxy.audacityteam.org creates a doxygenated audacity each night.



Context Help for Buttons

  • The page will dynamically annotate toolbars, menus and buttons as you hover over them. It will add arrows and hyperlinks (in blue) that can tell you more.
EditToolbarAnnotated.png

UndoHint.png

  • The toolbar will probably be in-situ, in the UI, with the rest of the UI faded out, rather than as shown with white background.
    • The current button will have a focus box, and as you move, the text in the sidebar scrolls to the right place.
  • You can click in the sidebar or on the blue text to switch to the relevant page in the manual.


Context Help for Menus

  • The page will have dynamic menus, that open when you click on them. A sidebar will show relevant extracts from the manual.
Edit-Clip BoundariesMenu.png

ClipHint.png

  • The menu will be in-situ, in the UI, with the rest of the UI faded out, rather than as shown with a white background.
    • The current menu item will have focus as shown, and as you move, the text in the sidebar scrolls to the right place.
  • Again, you can click in the sidebar to switch to the relevant page in the manual.


Context Help for Preferences

These will operate similarly to the buttons and menus. You get to the preferences by clicking on the preferences option in the menus.


The Overall Format

The overall format might be something like this, with the clickable image on the left, with relevant part emphasised, and strip from the manual on the right.

ImageMapIdea.png


Getting to the Manual

Probably the "what's that for" page will have a tab for the Audacity user interface and a tab for the manual. So you can mouse around on the user interface and get short help on what the different elements are. If you want to dig deeper, you click on one of the links and be placed in the manual.


Use Cases