pandora/static/html/help.html

<div id="help">
    <p>To learn more about the various features of <b>{site.name}</b>, just select a topic on the left.</p>
    <p>Please note that this help section is a work in progress.</p>
    <p>For more information about <b>pan.do/ra</b>, the software behind this website, visit <a href="https://pan.do/ra" target="_blank">pan.do/ra</a>.</p>
    <a href="https://pan.do/ra" target="_blank"><img src="/static/jpg/help.help.jpg"></a>
</div>
<div id="accounts">
    <p>Help is coming soon...</p>
    <img src="/static/jpg/help.accounts.jpg">
</div>
<div id="navigation">
    <p>{site.name} looks, feels and works more like a desktop application than like a usual website. It has a menu on top that shows most of the site's functionality, including keyboard shortcuts. Most other interface elements are resizable, or can be collapsed and expanded, dialogs can be moved around, and any list of {itemName.plural} or clips can be sorted in different ways. {site.name} remembers these settings &mdash; the next time you visit the site, everything will be just as you left it.</p>
    <p>
        <h2>Mouse and Keyboard Shortcuts</h2><br>
        <table>
            <tr><td>Click</td><td>Select an item</td></tr>
            <tr><td>Doubleclick</td><td>Open an item</td></tr>
            <tr><td>Shift Click</td><td>Add one or more items to the current selection</td></tr>
            <tr><td>Command Click</td><td>Toggle an item (select a deselected or deselect a selected item)</td></tr>
            <tr><td>Drag &amp; Drop</td><td>Copy all selected items to another list</td></tr>
            <tr><td>Command Drag &amp; Drop</td><td>Move all selected items from one list to another</td></tr>
            <tr><td></td></tr>
            <tr><td>Up/Down/Left/Right</td><td>Select next item</td></tr>
            <tr><td>Shift Up/Down/Left/Right</td><td>Add next item to the current selection</td></tr>
            <tr><td>Control A</td><td>Select all items</td></tr>
            <tr><td>Shift Control A</td><td>Deselect all items</td></tr>
            <tr><td>Alt Control A</td><td>Toggle all items (select all deselected and deselect all selected items)</td></tr>
            <tr><td>Page Up</td><td>Scroll one page up</td></tr>
            <tr><td>Page Down</td><td>Scroll one page down</td></tr>
            <tr><td>Home</td><td>Scroll to first item</td></tr>
            <tr><td>End</td><td>Scroll to last item</td></tr>
            <tr><td>Control X</td><td>Cut all selected items from a list</td></tr>
            <tr><td>Control C</td><td>Copy all selected items from a list</td></tr>
            <tr><td>Control V</td><td>Paste previously cut or copied items into a list</td></tr>
            <tr><td>Delete</td><td>Delete all selected items from a list</td></tr>
            <tr><td>Space</td><td>Show preview (list of {itemName.plural}) or play/pause video (list of clips)</td></tr>
        </table>
    </p>
    <img src="/static/jpg/help.navigation.jpg">
</div>
<div id="views">
    <p>Lists of {itemName.plural}, and also individual {itemName.singular} 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.</p>
    <p>
        <h2>List Views</h2><br>
        <table>
            <tr><td>as List</td><td>A table with fully configurable columns</td></tr>
            <tr><td>as Grid</td><td>A grid of icons (posters or stills)</td></tr>
            <tr><td>with Timelines</td><td>A list of icons with timelines</td></tr>
            <tr><td>with Clips</td><td>A list of icons with clips</td></tr>
            <tr><td>as Clips</td><td>A grid of video clips that match your current query</td></tr>
            <tr><td>on Map</td><td>A map with all places that appear in your current results</td></tr>
            <tr><td>on Calendar</td><td>A calendar with all events that appear in your current results</td></tr>
        </table>
    </p>
    <p>
        <h2>Item Views</h2><br>
        <table>
            <tr><td>Info</td><td>Basic information about the {itemName.singular}</td></tr>
            <tr><td>Player</td><td>A video player</td></tr>
            <tr><td>Editor</td><td>An editor to add time-based annotations</td></tr>
            <tr><td>Timeline</td><td>A small video player that moves on a large timeline</td></tr>
            <tr><td>Clips</td><td>A grid of all clips of the current {itemName.singular}</td></tr>
            <tr><td>Map</td><td>A map with all places that appear in the current {itemName.singular}</td></tr>
            <tr><td>Calendar</td><td>A calendar with all events that appear in the current {itemName.singular}</td></tr>
        </table>
    </p>
    <img src="/static/jpg/help.views.jpg">
</div>
<div id="timelines">
    <p>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).</p>
    <img src="/static/jpg/help.timelines.jpg">
</div>
<div id="clips">
    <p>Some views don't show lists of {itemName.plural}, but lists of video clips &mdash; for example clips matching your query, or related to a specific location on a map. These clips can be sorted by various properties (like saturation, see below), and 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.</p>
    <img src="/static/jpg/help.clips.jpg">
</div>
<div id="maps">
    <p>Any list of {itemName.plural}, just like every individual {itemName.singular}, can be displayed as a map. This map shows all places that appear in annotations, and selecting a place will display a list of all matching clips.</p>
    <img src="/static/jpg/help.maps.jpg">
</div>
<div id="calendars">
    <p>Calendars work just like maps (you can pan or zoom in and out), but they don't show places on a world map, but historic events on a timeline. Selecting an event will display a list of matching clips.</p>
    <img src="/static/jpg/help.calendars.jpg">
</div>
<div id="find">
    <p>Help is coming soon...</p>
    <img src="/static/jpg/help.views.jpg">
</div>
<div id="filters">
    <p>Help is coming soon...</p>
    <img src="/static/jpg/help.filters.jpg">
</div>
<div id="lists">
    <p>A list is simply a list of {itemName.plural}, and you can create as many lists as you want. These lists behave like folders &mdash; you can add {itemName.plural} to them, either via drag &amp; drop or via copy &amp; paste, and you can also remove any item from a list.</p>
    <p>Smart lists, on the other hand, are saved searches (like "all {itemName.plural} longer than one hour" or "all French {itemName.plural} from the 1960s"), and they will update dynamically.</p>
    <p>All personal lists you create are initially private, but you can share them by making them public, so that other users can find and browse them, and add them to their favorites. Your own favorite lists are initially empty, but if you click on "Manage Favorite Lists", you will see all public lists, and you can add the ones you like to your favorites.</p>
    <p>Finally, there are featured lists, which are selected public lists, picked by {site.name}.</p>
    <img src="/static/jpg/help.lists.jpg">
</div>
<div id="player">
    <p>Help is coming soon...</p>
    <img src="/static/jpg/help.player.jpg">
</div>
<div id="editor">
    <p>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.</p>
    <p>
        <h2>Keyboard Shortcuts</h2>
        <br>
        <table>
            <tr><td>Space</td><td>Play/Pause</td></tr>
            <tr><td>P</td><td>Play from in point to out point</td></tr>
            <tr><td>0</td><td>Mute/Unmute</td></tr>
            <tr><td>-</td><td>Turn volume down</td></tr>
            <tr><td>+</td><td>Turn volume up</td></tr>
            <tr><td>Shift -</td><td>Small video player</td></tr>
            <tr><td>Shift +</td><td>Large video player</td></tr>
            <tr><td>←</td><td>Go one frame back</td></tr>
            <tr><td>→</td><td>Go one frame forward</td></tr>
            <tr><td>Shift ←</td><td>Go one second back</td></tr>
            <tr><td>Shift →</td><td>Go one second forward</td></tr>
            <tr><td>↑</td><td>Go one line up on the timeline</td></tr>
            <tr><td>↓</td><td>Go one line down on the timeline</td></tr>
            <tr><td>Shift ↑</td><td>Go to first frame</td></tr>
            <tr><td>Shift ↓</td><td>Go to last frame</td></tr>
            <tr><td>I</td><td>Set in point</td></tr>
            <tr><td>O</td><td>Set out point</td></tr>
            <tr><td>Shift I</td><td>Go to in point</td></tr>
            <tr><td>Shift O</td><td>Go to out point</td></tr>
            <tr><td>[</td><td>Go to previous annotation</td></tr>
            <tr><td>]</td><td>Go to next annotation</td></tr>
            <tr><td>\</td><td>Select current annotation</td></tr>
            <tr><td>B</td><td>Select previous annotation</td></tr>
            <tr><td>N</td><td>Select next annotation</td></tr>
            <tr><td>&lt;</td><td>Go to previous cut</td></tr>
            <tr><td>&gt;</td><td>Go to next cut</td></tr>
            <tr><td>/</td><td>Select current cut</td></tr>
            <tr><td>F</td><td>Find</td></tr>
            <tr><td>Shift G</td><td>Go to previous result</td></tr>
            <tr><td>G</td><td>Go to next result</td></tr>
            <tr><td>Return</td><td>Edit annotation, submit changes when editing</td></tr>
            <tr><td>Shift Return</td><td>Submit changes (for text annotations with line breaks)</td></tr>
            <tr><td>Escape</td><td>Deselect annotation, revert changes when editing</td></tr>
            {addAnnotationShortcuts}
        </table>
    </p>
    <img src="/static/jpg/help.editor.jpg">
</div>
<div id="edits">
    <p>Help is coming soon...</p>
</div>
<div id="texts">
    <p>Help is coming soon...</p>
</div>
<div id="embeds">
    <p>Help is coming soon...</p>
</div>