From a95633b878808288954b0ee9a431eedca8bb535c Mon Sep 17 00:00:00 2001 From: rolux Date: Tue, 5 Mar 2013 09:33:15 +0000 Subject: [PATCH] update help dialog, help html and help config --- pandora/config.0xdb.jsonc | 19 ++-- pandora/config.indiancinema.jsonc | 19 ++-- pandora/config.padma.jsonc | 19 ++-- pandora/config.pandora.jsonc | 19 ++-- static/html/help.html | 173 +++++++++++++++++++++++------- static/js/pandora/helpDialog.js | 35 ++++-- 6 files changed, 199 insertions(+), 85 deletions(-) diff --git a/pandora/config.0xdb.jsonc b/pandora/config.0xdb.jsonc index 4812c6c1..81733535 100644 --- a/pandora/config.0xdb.jsonc +++ b/pandora/config.0xdb.jsonc @@ -91,19 +91,20 @@ "help": [ {"id": "help", "title": "Help"}, {"id": "accounts", "title": "Accounts"}, - {"id": "annotations", "title": "Annotations"}, - {"id": "calendars", "title": "Calendars"}, + {"id": "navigation", "title": "Navigation"}, + {"id": "views", "title": "Views"}, + {"id": "timelines", "title": "Timelines"}, {"id": "clips", "title": "Clips"}, - {"id": "edits", "title": "Edits"}, + {"id": "maps", "title": "Maps"}, + {"id": "calendars", "title": "Calendars"}, + {"id": "find", "title": "Find"}, {"id": "filters", "title": "Filters"}, {"id": "lists", "title": "Lists"}, - {"id": "maps", "title": "Maps"}, - {"id": "navigation", "title": "Navigation"}, - {"id": "search", "title": "Search"}, + {"id": "player", "title": "Player"}, + {"id": "editor", "title": "Editor"}, + {"id": "edits", "title": "Edits"}, {"id": "texts", "title": "Texts"}, - {"id": "timelines", "title": "Timelines"}, - {"id": "video", "title": "Video"}, - {"id": "views", "title": "Views"} + {"id": "embeds", "title": "Embeds"} ], /* An itemKey must have the following properties: diff --git a/pandora/config.indiancinema.jsonc b/pandora/config.indiancinema.jsonc index ef327ade..c3c2ce9e 100644 --- a/pandora/config.indiancinema.jsonc +++ b/pandora/config.indiancinema.jsonc @@ -97,19 +97,20 @@ "help": [ {"id": "help", "title": "Help"}, {"id": "accounts", "title": "Accounts"}, - {"id": "annotations", "title": "Annotations"}, - {"id": "calendars", "title": "Calendars"}, + {"id": "navigation", "title": "Navigation"}, + {"id": "views", "title": "Views"}, + {"id": "timelines", "title": "Timelines"}, {"id": "clips", "title": "Clips"}, - {"id": "edits", "title": "Edits"}, + {"id": "maps", "title": "Maps"}, + {"id": "calendars", "title": "Calendars"}, + {"id": "find", "title": "Find"}, {"id": "filters", "title": "Filters"}, {"id": "lists", "title": "Lists"}, - {"id": "maps", "title": "Maps"}, - {"id": "navigation", "title": "Navigation"}, - {"id": "search", "title": "Search"}, + {"id": "player", "title": "Player"}, + {"id": "editor", "title": "Editor"}, + {"id": "edits", "title": "Edits"}, {"id": "texts", "title": "Texts"}, - {"id": "timelines", "title": "Timelines"}, - {"id": "video", "title": "Video"}, - {"id": "views", "title": "Views"} + {"id": "embeds", "title": "Embeds"} ], /* An itemKey must have the following properties: diff --git a/pandora/config.padma.jsonc b/pandora/config.padma.jsonc index b8118842..0bce62ca 100644 --- a/pandora/config.padma.jsonc +++ b/pandora/config.padma.jsonc @@ -87,19 +87,20 @@ "help": [ {"id": "help", "title": "Help"}, {"id": "accounts", "title": "Accounts"}, - {"id": "annotations", "title": "Annotations"}, - {"id": "calendars", "title": "Calendars"}, + {"id": "navigation", "title": "Navigation"}, + {"id": "views", "title": "Views"}, + {"id": "timelines", "title": "Timelines"}, {"id": "clips", "title": "Clips"}, - {"id": "edits", "title": "Edits"}, + {"id": "maps", "title": "Maps"}, + {"id": "calendars", "title": "Calendars"}, + {"id": "find", "title": "Find"}, {"id": "filters", "title": "Filters"}, {"id": "lists", "title": "Lists"}, - {"id": "maps", "title": "Maps"}, - {"id": "navigation", "title": "Navigation"}, - {"id": "search", "title": "Search"}, + {"id": "player", "title": "Player"}, + {"id": "editor", "title": "Editor"}, + {"id": "edits", "title": "Edits"}, {"id": "texts", "title": "Texts"}, - {"id": "timelines", "title": "Timelines"}, - {"id": "video", "title": "Video"}, - {"id": "views", "title": "Views"} + {"id": "embeds", "title": "Embeds"} ], /* An itemKey must have the following properties: diff --git a/pandora/config.pandora.jsonc b/pandora/config.pandora.jsonc index 79d5e6b5..dc8ec19c 100644 --- a/pandora/config.pandora.jsonc +++ b/pandora/config.pandora.jsonc @@ -84,19 +84,20 @@ "help": [ {"id": "help", "title": "Help"}, {"id": "accounts", "title": "Accounts"}, - {"id": "annotations", "title": "Annotations"}, - {"id": "calendars", "title": "Calendars"}, + {"id": "navigation", "title": "Navigation"}, + {"id": "views", "title": "Views"}, + {"id": "timelines", "title": "Timelines"}, {"id": "clips", "title": "Clips"}, - {"id": "edits", "title": "Edits"}, + {"id": "maps", "title": "Maps"}, + {"id": "calendars", "title": "Calendars"}, + {"id": "find", "title": "Find"}, {"id": "filters", "title": "Filters"}, {"id": "lists", "title": "Lists"}, - {"id": "maps", "title": "Maps"}, - {"id": "navigation", "title": "Navigation"}, - {"id": "search", "title": "Search"}, + {"id": "player", "title": "Player"}, + {"id": "editor", "title": "Editor"}, + {"id": "edits", "title": "Edits"}, {"id": "texts", "title": "Texts"}, - {"id": "timelines", "title": "Timelines"}, - {"id": "video", "title": "Video"}, - {"id": "views", "title": "Views"} + {"id": "embeds", "title": "Embeds"} ], /* An itemKey must have the following properties: diff --git a/static/html/help.html b/static/html/help.html index 7247fcd8..518db66e 100644 --- a/static/html/help.html +++ b/static/html/help.html @@ -1,45 +1,142 @@
-
Help is coming soon...
+

To learn more about the various features of {site.name}, just select a topic on the left.

+

(Please note that this help section is a work in progress.)

-
Help is coming soon...
-
-
-
Help is coming soon...
-
-
-
Help is coming soon...
-
-
-
Help is coming soon...
-
-
-
Help is coming soon...
-
-
-
Help is coming soon...
-
-
-
Help is coming soon...
-
-
-
Help is coming soon...
+

Coming soon...

- -
-
Help is coming soon...
-
-
-
Help is coming soon...
-
-
-
Help is coming soon...
+

+

Mouse and Keyboard Shortcuts


+ + + + + + + + + + + + + + + + + + + + + + +
ClickSelect an item
DoubleclickOpen an item
Shift ClickAdd one or more items to the current selection
Command ClickToggle an item (select a deselected or deselect a selected item)
Drag & DropCopy all selected items to another list
Command Drag & DropMove all selected items from one list to another
Up/Down/Left/RightSelect next item
Shift Up/Down/Left/RightAdd next item to the current selection
Control ASelect all items
Shift Control ADeselect all items
Alt Control AToggle all items (select all deselected and deselect all selected items)
Page UpScroll one page up
Page DownScroll one page down
HomeScroll to first item
EndScroll to last item
Control XCut all selected items from a list
Control CCopy all selected items from a list
Control VPaste previously cut or copied items into a list
DeleteDelete all selected items from a list
SpaceShow preview (list of {itemName.plural}) or play/pause video (clip)
+

-
Help is coming soon...
-
\ No newline at end of file +

Lists of {itemName.plural}, and also individual {itemName.plural} themselves, can be displayed in different views. Both for lists and for {itemName.plural}, you'll find the menu to switch between views in the toolbar near the top of the screen.

+

+

List Views


+ + + + + + + + +
as ListA table with fully configurable columns
as GridA grid of icons (posters or stills)
with TimelinesA list of icons with timelines
with ClipsA list of icons with clips
as ClipsA grid of video clips that match your current query
on MapA map with all places that appear in your current results
on CalendarA calendar with all events that appear in your current results
+

+

+

Item Views


+ + + + + + + + +
InfoBasic information about the {itemName.singular}
PlayerA video player
EditorAn editor to add time-based annotations
TimelineA small video player that moves on a large timeline
ClipsA grid of all clips of the current {itemName.singular}
MapA map with all places that appear in the current {itemName.singular}
CalendarA calendar with all events that appear in the current {itemName.singular}
+

+ +
+

A timeline is a visual signature of a {itemName.singular}. It provides an instant overview of what is happening in a {itemName.singular}, and can be used for navigation. You can switch between different types of timelines: anti-alias (average colors), slit-scan (see below), keyframes (full frames) and waveform (audio).

+ +
+
+

Some views don't show lists of {itemName.plural}, but lists of video clips — for example clips matching your query, or related to a specific location on a map. Each clip is a video player. The video will load once you've selected it, and you can then simply click to play. If you doubleclick, you'll get to the {itemName.singular} itself, and its video player will be at the very position of the clip.

+
+
+

Coming soon...

+
+
+

Coming soon...

+
+
+

Coming soon...

+
+
+

Coming soon...

+
+
+

Coming soon...

+
+
+

Coming soon...

+
+
+

In the editor view, you can add and edit time-based annotations. Just set an in point and an out point, and pick one of the different types of annotations to add.

+

+

Keyboard Shortcuts

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {addAnnotationShortcuts} +
SpacePlay/Pause
PPlay from in point to out point
0Mute/Unmute
-Turn volume down
+Turn volume up
Shift -Small video player
Shift +Large video player
←Go one frame back
→Go one frame forward
Shift ←Go one second back
Shift →Go one second forward
↑Go one line up on the timeline
↓Go one line down on the timeline
Shift ↑Go to first frame
Shift ↓Go to last frame
ISet in point
OSet out point
Shift IGo to in point
Shift OGo to out point
[Go to previous annotation
]Go to next annotation
\Select current annotation
BSelect previous annotation
NSelect next annotation
<Go to previous cut
>Go to next cut
/Select current cut
FFind
Shift GGo to previous result
GGo to next result
ReturnEdit annotation, submit changes when editing
Shift ReturnSubmit changes (for text annotations with line breaks)
EscapeDeselect annotation, revert changes when editing
+

+
+
+

Coming soon...

+
+
+

Coming soon...

+
+
+

Coming soon...

+
+
+

Coming soon...

+
diff --git a/static/js/pandora/helpDialog.js b/static/js/pandora/helpDialog.js index 2c780065..a05bc275 100644 --- a/static/js/pandora/helpDialog.js +++ b/static/js/pandora/helpDialog.js @@ -72,13 +72,17 @@ pandora.ui.helpDialog = function() { Ox.get('/static/html/help.html', function(html) { - pandora.site.itemName = Ox.map(pandora.site.itemName, function(v) { + var $html = $('
'), + strings = Ox.clone(pandora.site, true); + + strings.itemName = Ox.map(strings.itemName, function(v) { return v.toLowerCase(); }); - var $html = $('
').html(Ox.formatString(html, pandora.site)); - pandora.site.itemName = Ox.map(pandora.site.itemName, function(v) { - return Ox.toTitleCase(v); - }); + strings.addAnnotationShortcuts = strings.layers.map(function(layer, index) { + return '' + index + 'Add ' + layer.item.toLowerCase() + ''; + }).join('\n'); + + $html.html(Ox.formatString(html, strings)); pandora.site.help.forEach(function(section) { var html = $html.find('#' + section.id).html(); @@ -115,7 +119,11 @@ pandora.ui.helpDialog = function() { $text = Ox.Element() .css({ padding: '16px', - overflowY: 'auto' + // fontSize: '12px', + lineHeight: '16px', + overflowY: 'auto', + MozUserSelect: 'text', + WebkitUserSelect: 'text' }); $panel = Ox.SplitPanel({ @@ -133,11 +141,16 @@ pandora.ui.helpDialog = function() { that.select = function(id) { $text.html(text[id]); - $text.find('td:first-child').css({ - height: '16px', - paddingRight: '8px', - textAlign: 'right' - }); + $text.find('img') + .css({ + width: '100%' + }); + $text.find('td:first-child') + .css({ + height: '16px', + paddingRight: '8px', + textAlign: 'right' + }); return that; }