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>For more information about <b>pan.do/ra</b>, the software behind this website, visit <a href="https://pan.do/ra">pan.do/ra</a>, and <a href="https://pan.do/ra#tour">take a tour</a>.</p>
    <a href="https://pan.do/ra"><img src="/static/jpg/help.help.jpg"></a>
</div>
<div id="accounts">
    <p>If you just want to explore <b>{site.name}</b>, watch {itemName.plural} and browse annotations, you can do so without a user account.</p>
    <p>But in case you want to add your own annotations, create your own lists and make use of some of the site's more advanced features, please {signup}.</p>
    <img src="/static/jpg/help.accounts.jpg">
</div>
<div id="navigation">
    <p><b>{site.name}</b> 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. <b>{site.name}</b> remembers these settings &mdash; the next time you visit the site, everything will be just as you left it.</p>
    <p>You will also notice that the URLs are short and easy to make sense of, and that your browser's back and forward buttons work just as expected.</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>
            <tr><td>Control M</td><td>Open main menu</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 its structure over time, 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>To search <b>{site.name}</b>, just type something in the find box in the upper right corner of the screen, and press enter. The site returns all exact matches, so there is no need to enclose multiple words in quotes.</p>
    <p>The find box also includes a menu that lets you specify what exactly you're searching for &mdash; for example the title of a {itemName.singular}, a particular person, or a specific type of annotation.<p>
    <p>From that menu, you can also access the advanced find options. Below, you can see how to search for "All {itemName.plural} from 1968 that were made in France, Italy, East Germany or West Germany". You can also save any search as a smart list that you can access at any time, and that will update dynamically.</p>
    <img src="/static/jpg/help.find.jpg">
</div>
<div id="filters">
    <p>Often, the easiest way to instantly find what you're looking for is to use filters. Below, you can see how to find, with just three clicks, all German-language {itemName.plural} from either East Germany or West Germany. You can then narrow down you search even further, for example by picking a specific year.</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 <b>{site.name}</b>.</p>
    <img src="/static/jpg/help.lists.jpg">
</div>
<div id="player">
    <p>In the player view, you'll get a video player, including a fullscreen mode, and various controls to set the video's volume, position or resolution. You can also search right in the player, and the results will be highlighted on the timeline. You don't even have to move your mouse &mdash; for what you see below, you can just type F road ENTER G G G SHIFT+G and so on.</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>L</td><td>Loop/Don't Loop</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>Shift P</td><td>Go to poster 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>
            <tr><td>Delete</td><td>Delete annotation</td></tr>
            {addAnnotationShortcuts}
        </table>
    </p>
    <img src="/static/jpg/help.editor.jpg">
</div>
<div id="documents">
    <p>Documentation in progress...</p>
</div>
<div id="entities">
    <p>Documentation in progress...</p>
</div>
<div id="edits">
    <p>Documentation in progress...</p>
</div>
<div id="texts">
    <p>Documentation in progress...</p>
</div>
<div id="embeds">
    <p>Documentation in progress...</p>
</div>