Difference between revisions of "Proposal Dynamic Imagemap using Javascript"

From Audacity Wiki
Jump to: navigation, search
(Draft version.)
 
(Basic idea.)
Line 5: Line 5:
  
 
* Acts as a special kind of index page for the manual.
 
* Acts as a special kind of index page for the manual.
** Show a clickable image of Audacity screen.
+
* Provides dynamic annotation of the interface.
** Connects into the wiki manual.
+
* 'Treasure hunt' feature.
* Additional Active features (relative to wiki clickable imagemap)
 
** Active menus, so that we can explore menus and ask what each menu and menu item is for.
 
** Active buttons, e.g. on Transport Toolbar, that show play / play looped up / down etc.
 
** Active preferences panel, so that we can explore preferences.
 
* Tip panel that tracks what the cursor is hovering over
 
* Stepwise Topic panel that allows topic look up e.g:
 
** Annotation indicating how to select Audio, and apply an effect.
 
 
 
  
  
Line 23: Line 15:
  
 
==Design==
 
==Design==
 +
 +
===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.
 +
 +
{|
 +
|style="width: 450px;"|[[Image:EditToolbarAnnotated.png]]
 +
|
 +
[[Image: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. 
 +
 +
{|
 +
|style="width: 450px;"|[[Image:Edit-Clip_BoundariesMenu.png]]
 +
|
 +
[[Image: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.
 +
 +
 +
===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.
  
 
== Screenshots of Experiments ==
 
== Screenshots of Experiments ==

Revision as of 19:25, 17 November 2017

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

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.


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.

Screenshots of Experiments

Use Cases

Summary of Current State