index.html

<!DOCTYPE html>
<html class="no-js isBF">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>INAV - Blackbox Explorer</title>
<link rel="icon" type="image/png" href="images/bf_icon_128.png">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/jquery.nouislider.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/header_dialog.css">
<link rel="stylesheet" href="css/keys_dialog.css">
<link rel="stylesheet" href="css/user_settings_dialog.css">

<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
	<!--  Welcome Page -->
    <div class="welcome-pane">
        <div class="container">
            <div class="jumbotron">
                <h1>INAV Blackbox Explorer!</h1>
                <p>This tool allows you to view and analyze logs created by INAV Blackbox feature.</p>
                <span class="btn btn-primary btn-lg btn-file"  data-toggle="tooltip" title="Start by opening a log or video file"> Open log file/video <input type="file" class="file-open" multiple></span>
            </div>
        </div>
        <div class="container">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Help the project
                </div>
                <div class="panel-body">
                    <table>
                        <tbody>
                          <tr>
                            <td><a target="_blank" href="https://inavflight.com/shop/u/bg"><img src="https://lh3.googleusercontent.com/TiHXyUiZ2COk7OmceBgo1qeRN2APAjWL5qUydGc-U3LqkJb3n13EhYEJ8Dpz_IACNHU" width="57"> Support us on Banggood</a></td>
                          </tr>
                        </tbody>
                      </table>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Introduction to Blackbox
                        </div>
                        <div class="panel-body">
                            <p>
                                The Blackbox feature is built in to <a target="_blank" href="https://github.com/iNavFlight/inav/blob/master/docs/Blackbox.md">INAV</a>
                                and is supported on most flight controllers..
                            </p>
                            <p>
                                Already have a log recorded? Open it and start analyzing.
                            </p>
                            <p>
                                If you believe you've found a bug in this viewer (e.g. the viewer crashes upon attempting to
                                open a log file), or you have a suggestion, please add it to
                                <a target="_blank" href="https://github.com/iNavFlight/blackbox-log-viewer/issues">the viewer's GitHub bug tracker</a>.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Tuning your craft
                        </div>
                        <div class="panel-body">
                            <p>
                                The Blackbox can deliver insights on your flight performance that will allow you to tune
                                variables such as your PIDs and filters settings.
                            </p>
                            <p>
                                For help and instructions on how to tune your craft, please read some of these resources:
                            </p>
                            <ul>
                                <li>
                                    <a target="_blank" href="https://www.youtube.com/playlist?list=PLOUQ8o2_nCLlgiLaIeNWKoWqndrkJ4uOT">Blackbox tuning and troubleshooting YouTube playlist</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Other tools
                        </div>
                        <div class="panel-body">
                            <p>
                                If you want to analyze your logs with your own mathematics package (such as Matlab)
                                you can use the separate <a target="_blank" href="https://github.com/iNavFlight/blackbox-tools">blackbox_decode tool</a>
                                to convert your log file into a CSV file for analysis.
                            </p>
                            <p>
                                If you want to share your log as a video, you can use the "export video" button at the
                                top to render a WebM video, or use the commandline
                                <a target="_blank" href="https://github.com/iNavFlight/blackbox-tools">blackbox_render tool</a>
                                tool to turn your log into a series of PNG files, or use a
                                screen recording tool to record the playback of this log viewer.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Version
                        </div>
                        <div class="panel-body">
                            <p>
                                <div id="viewer-version"><!-- current version shown here --></div>
                            </p>
                            <p class="viewer-download">
								The latest official version is <a class="btn btn-default btn-md btn-viewer-download"  data-toggle="tooltip" title="Goto the latest version download page" href="https://github.com/iNavFlight/blackbox-log-viewer/releases/latest" target="_blank"> vX.X.XX </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- the changelog floats outside of the page. -->
    <div id="changelog">
        <div class="button">
            <a id="changelog_toggle" href="https://github.com/iNavFlight/blackbox-log-viewer/releases" target="_blank">Changelog</a>
        </div>
    </div>
    <!-- Navigation Bar -->
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container header-pane">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                </button>
                <div class="navbar-logo">
                    <div>
                        <img src="./images/cf_logo_white.svg" class="navbar-brand"/>
                        <span>Blackbox&nbspExplorer</span>
                    </div>
                    <a class="navbar-brand log-filename" html="#"></a>
                </div>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <div class="navbar-form navbar-right" role="form">
                    <div class="btn-group">
                        <a class="btn btn-default btn-new-window" data-toggle="tooltip" title="Open a new Blackbox Log Viewer window"> New Window </a>
                        <a class="btn btn-primary btn-video-export" data-toggle="tooltip" title="Export your vide and chart setup to file"> Export video...</a>
                        <a class="btn btn-primary btn-workspaces-export" data-toggle="tooltip" title="Export your workspace configurations to file"> Export Workspaces...</a>
                        <span class="btn btn-primary btn-file" data-toggle="tooltip" title="Open another log file, video file, exported workspace file or configuration dump file"> Open log file/video <input type="file" class="file-open" multiple></span>
                        <button type="button" class="btn btn-default view-zoom-in" data-toggle="tooltip" title="Zoom In Window" style="display: none;">
                            <span class="glyphicon glyphicon-zoom-in"></span>
                        </button>
                        <button type="button" class="btn btn-default view-zoom-out" data-toggle="tooltip" title="Zoom Out Window" style="display: none;">
                            <span class="glyphicon glyphicon-zoom-out"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>
	<!-- Main Page -->
    <div class="container-fluid main-pane">
        <ul class="video-top-controls list-unstyled">
            <li class="log-view-panel">
                <h4>View</h4>
                <div>
                    <div class="btn-group view-buttons" role="group">
                        <button type="button" class="btn btn-default open-header-dialog" data-toggle="tooltip" title="View/hide header">
                            <span class="glyphicon glyphicon-info-sign"></span>
                        </button>
                    </div>
                    <div class="btn-group view-menu">
                        <div class="dropdown">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="view-menu" >
                                View <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu"  aria-labelledby="view-menu">
                                <li>
                                    <a href="#" class="open-header-dialog auto-hide-menu" data-toggle="tooltip" title="View/hide header">
                                        <span class="glyphicon glyphicon-info-sign"></span> Header<span class="pull-right">H</span>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Overlays</li>
                                <li>
                                    <a href="#"  id="auto-hide-menu" class="view-video auto-hide-menu" data-toggle="tooltip" title="View/hide video display">
                                        <span class="glyphicon glyphicon-film"></span> Video
                                    </a>
                                </li>
                                <li>
                                    <a href="#"  id="auto-hide-menu" class="view-craft auto-hide-menu" data-toggle="tooltip" title="View/hide craft display">
                                        <span class="glyphicon glyphicon-plane"></span> Craft
                                    </a>
                                </li>
                                <li>
                                    <a href="#"  id="auto-hide-menu" class="view-sticks auto-hide-menu" data-toggle="tooltip" title="View/hide stick display">
                                        <span class="glyphicon glyphicon-pawn"></span> Sticks
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Details</li>
                                <li>
                                    <a href="#" class="view-table auto-hide-menu" data-toggle="tooltip" title="View/hide statistics display">
                                        <span class="glyphicon glyphicon-list-alt"></span> Values Table<span class="pull-right">T</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="view-config auto-hide-menu" data-toggle="tooltip" title="View/hide configuration file">
                                        <span class="glyphicon glyphicon-list-alt"></span> Config<span class="pull-right">C</span>
                                    </a>
                                </li>
                                <li class="divider has-analyser"></li>
                                <li class="dropdown-header has-analyser">Analyser</li>
                                <li>
                                    <a href="#" class="view-analyser auto-hide-menu" data-toggle="tooltip" title="View/hide analyser display">
                                        <span class="glyphicon glyphicon-equalizer"></span> Show/Hide<span class="pull-right">A</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="view-analyser-fullscreen auto-hide-menu" data-toggle="tooltip" title="Zoom Analyser Window">
                                        <span class="glyphicon glyphicon-resize-full"></span><span class="glyphicon glyphicon-resize-small"></span> Re-size<span class="pull-right">&#x21E7;A</span>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#" class="open-user-settings-dialog auto-hide-menu" data-toggle="tooltip" title="Show User Settings">
                                        <span class="glyphicon glyphicon-cog"></span> Preferences
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="btn-group view-buttons-expanded" role="group">
                        <button type="button" class="btn btn-default view-video" data-toggle="tooltip" title="View/hide video display">
                            <span class="glyphicon glyphicon-film"></span>
                        </button>
                        <button type="button" class="btn btn-default view-craft" data-toggle="tooltip" title="View/hide craft display">
                            <span class="glyphicon glyphicon-plane"></span>
                        </button>
                        <button type="button" class="btn btn-default view-sticks" data-toggle="tooltip" title="View/hide stick display">
                            <span class="glyphicon glyphicon-pawn"></span>
                        </button>
                        <button type="button" class="btn btn-default view-table" data-toggle="tooltip" title="View/hide statistics display">
                            <span class="glyphicon glyphicon-list-alt"></span>
                        </button>
                        <button type="button" class="btn btn-default view-analyser-sticks" style="display:none" data-toggle="tooltip" title="View/hide stick analyser">
                            <span class="glyphicon glyphicon-screenshot"></span>
                        </button>
                        <button type="button" class="btn btn-default view-analyser" data-toggle="tooltip" title="View/hide analyser display">
                            <span class="glyphicon glyphicon-equalizer"></span>
                        </button>
                        <button type="button" class="btn btn-default view-analyser-fullscreen" data-toggle="tooltip" title="Zoom Analyser Window">
                            <span class="glyphicon glyphicon-resize-full"></span><span class="glyphicon glyphicon-resize-small"></span>
                        </button>
                    </div>
                </div>
            </li>
            <li class="log-playback-panel">
                <h4>Playback</h4>
                <div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default video-jump-start" data-toggle="tooltip" title="Jump to start of video">
                            <span class="glyphicon glyphicon-fast-backward"></span> <span class="glyphicon-text-alike">VID</span>
                        </button>
                        <button type="button" class="btn btn-default log-jump-start" data-toggle="tooltip" title="Jump to start of log">
                            <span class="glyphicon glyphicon-fast-backward"></span>
                        </button>
                        <button type="button" class="btn btn-default log-jump-back" data-toggle="tooltip" title="Jump back">
                            <span class="glyphicon glyphicon-step-backward"></span>
                        </button>
                        <button type="button" class="btn btn-default log-play-pause" data-toggle="tooltip" title="Play/Pause log/video">
                            <span class="glyphicon glyphicon-play"></span>
                        </button>
                        <button type="button" class="btn btn-default log-jump-forward" data-toggle="tooltip" title="Jump forward">
                            <span class="glyphicon glyphicon-step-forward"></span>
                        </button>
                        <button type="button" class="btn btn-default log-jump-end" data-toggle="tooltip" title="Jump to end of log">
                            <span class="glyphicon glyphicon-fast-forward"></span>
                        </button>
                        <button type="button" class="btn btn-default video-jump-end" data-toggle="tooltip" title="Jump to end of video">
                            <span class="glyphicon-text-alike">VID</span> <span class="glyphicon glyphicon-fast-forward"></span>
                        </button>
                    </div>
                </div>
            </li>
            <li class="log-playback-rate-panel">
                <h4>Speed</h4>
                <div class="form-inline">
                    <div class="form-group">
                        <div class="btn-group playback-menu">
                            <div class="dropdown">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="playback-menu" >
                                    Speed <span class="caret"></span></button>
                                <ul class="dropdown-menu pull-right" role="menu"  aria-labelledby="playback-menu">
                                    <li>
                                        <div class="pull-right">
                                            <div class="panel-body">
                                                Speed
                                                <div class="playback-rate-control btn-group btn-group-vertical"></div>
                                                <input type="text" class="form-control playback-rate small-screen" value="1.0" size="5" data-toggle="tooltip" title="Directly set the playback speed">
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="playback-rate-expanded">
                            <div class="playback-rate-control btn-group btn-group-vertical"></div>
                            <input type="text" class="form-control playback-rate small-screen" value="1.0" size="5" data-toggle="tooltip" title="Directly set the playback speed">
                        </div>
                    </div>
                </div>
            </li>
            <li class="log-chart-zoom-panel">
                <h4>Zoom</h4>
                <div class="form-inline">
                    <div class="form-group">
                        <div class="btn-group zoom-menu">
                            <div class="dropdown">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="zoom-menu" >
                                    Zoom <span class="caret"></span></button>
                                <ul class="dropdown-menu pull-right" role="menu"  aria-labelledby="zoom-menu">
                                    <li>
                                        <div class="pull-right">
                                            <div class="panel-body">
                                                Zoom
                                                <div class="graph-zoom-control btn-group btn-group-vertical"></div>
                                                <input type="text" class="form-control graph-zoom small-screen" value="-" size="6" data-toggle="tooltip" title="Directly set the zoom level"/>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"  class="toggle-smoothing auto-hide-menu" data-toggle="tooltip" title="Smoothing On/Off">
                                            <span class="glyphicon glyphicon-ok has-smoothing-override"></span> Disable Smoothing<span class="pull-right">S</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"  class="toggle-expo auto-hide-menu" data-toggle="tooltip" title="Expo On/Off">
                                            <span class="glyphicon glyphicon-ok has-expo-override"></span> Disable Expo<span class="pull-right">X</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"  class="toggle-grid auto-hide-menu" data-toggle="tooltip" title="Grid On/Off">
                                            <span class="glyphicon glyphicon-ok has-grid-override"></span> Disable Grid Lines<span class="pull-right">G</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="graph-zoom-expanded">
                            <div class="graph-zoom-control btn-group btn-group-vertical"></div>
                            <input type="text" class="form-control graph-zoom small-screen" value="-" size="6" data-toggle="tooltip" title="Directly set the zoom level">
                        </div>
                    </div>
                </div>
            </li>
            <li class="log-chart-time-panel small-screen">
                <h4>Time</h4>
                <div class="form-inline">
                    <div class="form-group">
                        <input type="text" class="form-control graph-time" value="1.0" size="8" data-toggle="tooltip" title="Enter a time to jump to">
                    </div>
                </div>
            </li>
            <li class="log-sync-panel">
                <h4>Log sync</h4>
                <div class="form-inline">
                    <div class="form-group">
                        <div class="btn-group sync-menu">
                            <div class="dropdown">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="sync-menu" >
                                    Sync <span class="caret"></span></button>
                                <ul class="dropdown-menu pull-right" role="menu"  aria-labelledby="sync-menu">
                                    <li>
                                        <div class="pull-right">
                                            <div class="panel-body">
                                                Sync
                                                <button type="button" class="btn btn-default log-sync-back" data-toggle="tooltip" title="Move log earlier">
                                                    <span class="glyphicon glyphicon-step-backward"></span>
                                                </button>
                                                <input type="text" class="form-control video-offset" value="+0.0" size="7" data-toggle="tooltip" title="Enter a time offset">
                                                <button type="button" class="btn btn-default log-sync-forward" data-toggle="tooltip" title="Move log later">
                                                    <span class="glyphicon glyphicon-step-forward"></span>
                                                </button>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"  class="log-sync-here auto-hide-menu" data-toggle="tooltip" title="Set the log start to this video frame">
                                            <span class="glyphicon glyphicon-fast-backward"></span> Start Log Here
                                        </a>
                                    </li>
                                    <li  class="has-marker">
                                        <a href="#"  class="log-smart-sync auto-hide-menu" data-toggle="tooltip" title="Set the marked position to here...">
                                            <span class="glyphicon glyphicon-object-align-left"></span> Smart Sync<span class="pull-right">&#x2325;M</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="log-sync-expanded">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-default log-sync-back" data-toggle="tooltip" title="Move log earlier">
                                    <span class="glyphicon glyphicon-step-backward"></span>
                                </button>
                                <button type="button" class="btn btn-default log-sync-here">Start log here</button>
                                <button type="button" class="btn btn-default log-sync-forward" data-toggle="tooltip" title="Move log later">
                                    <span class="glyphicon glyphicon-step-forward"></span>
                                </button>
                            </div>
                            <input type="text" class="form-control video-offset" value="+0.0" size="7" data-toggle="tooltip" title="Enter a time offset">
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="graph-row">
            <div class="log-graph">
                <video></video>
                <canvas width="200" height="100" id="graphCanvas"></canvas>
                <canvas width="0" height="0" id="craftCanvas"></canvas>
                <div class="analyser">
                	<canvas width="0" height="0" id="analyserCanvas"></canvas>
                	<input id="analyserZoomX" type="range" name="analyserZoomX" value="100" min="100" max="500" step="10" title="" list="analyserZoomXTicks"/>
					<input id="analyserZoomY" type="range" name="analyserZoomY" value="100" min="10" max="1000" step="10" list="analyserZoomYTicks"/>
                    <datalist id="analyserZoomXTicks">
                        <option>100</option>
                        <option>200</option>
                        <option>300</option>
                        <option>400</option>
                        <option>500</option>
                    </datalist>
                    <datalist id="analyserZoomYTicks">
                        <option>100</option>
                    </datalist>
				</div>
                <canvas width="0" height="0" id="analyserStickCanvas"></canvas>
                <span class="log-open-legend-dialog glyphicon glyphicon-cog" data-toggle="tooltip" title="Show the legend"></span>
            </div>
            <div class="log-graph-config no-wheel">
                <h2 class="no-wheel">Legend <span class="log-close-legend-dialog glyphicon glyphicon-remove no-wheel" data-toggle="tooltip" title="Hide the legend"></span><span class="open-keys-dialog glyphicon glyphicon-question-sign no-wheel" data-toggle="tooltip" title="Show the keyboard shortcuts"></span></h2>
				<div class="log-index no-wheel"></div>
                <div class="log-graph-legend no-wheel">
                </div>
                <button type="button" class="btn btn-default btn-block open-graph-configuration-dialog no-wheel" data-toggle="tooltip" title="Setup chart pens">Graph setup</button>
            </div>
            <div class="mouseNotification"></div>
        </div>
        <div class="log-field-values" id="log-field-values">
            <a href="#log-field-values"><h4>Field values</h4></a>
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th>&nbsp;</th>
                        <th>Raw value</th>
                        <th>Decoded</th>
                        <th>&nbsp;</th>
                        <th>Raw value</th>
                        <th>Decoded</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><!-- auto filled by updateValues function --></tr>
                </tbody>
            </table>
        </div>
        <div class="configuration-file" id="configuration-file">
			<!-- auto filled by configuration function -->
        </div>
	</div>
    <!-- Log Scroll bar -->
    <div class="log-seek-bar">
        <canvas width="200" height="100"></canvas>
    </div>
    <!-- Status Bar -->
    <div id="status-bar">
        <div>
            <span class="version" title="iNav Version / Target">-</span>
        </div>
        <div>
            <span class="log-cells" title="Battery Cells">-</span>
        </div>
        <div>
            <span class="looptime" title="Looptime">-</span>
        </div>
        <div>
            <span class="lograte" title="Log Sample Rate">-</span>
        </div>
        <div>
            <span class="flight-mode" title="Flight Mode">-</span>
        </div>
        <div>
            <span class="nav-state" title="Navigation State">-</span>
        </div>
        <div>
            <span class="marker-offset" title="Marker Offset">00:00.000</span>
        </div>
        <div>
            <span class="overrides"></span>
        </div>
        <div class="bookmark-1">
            <span>1</span>
        </div>
        <div class="bookmark-2">
            <span>2</span>
        </div>
        <div class="bookmark-3">
            <span>3</span>
        </div>
        <div class="bookmark-4">
            <span>4</span>
        </div>
        <div class="bookmark-5">
            <span>5</span>
        </div>
        <div class="bookmark-6">
            <span>6</span>
        </div>
        <div class="bookmark-7">
            <span>7</span>
        </div>
        <div class="bookmark-8">
            <span>8</span>
        </div>
        <div class="bookmark-9">
            <span>9</span>
        </div>
        <div class="bookmark-clear">
            <span>Clear All</span>
        </div>
        <div>
            <span class="configuration-file-name">-</span>
        </div>
        <div>
            <span class="viewer-version" title="Blackbox Explorer Version">-</span>
        </div>
    </div>
	<!-- Dialog Boxes and Popup Windows -->
    <div class="modal fade graph-configuration-dialog" id="dlgGraphConfiguration">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-toggle="tooltip" title="Close without saving changes">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Configure graphs</h4>
                </div>
                <div class="modal-body">
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle config-graphs-add" data-toggle="dropdown" aria-expanded="false">
                            <span class="glyphicon glyphicon-plus"></span> Add graph <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                        </ul>
                    </div>
                    <button type="button" class="btn btn-default config-graphs-remove-all-graphs pull-right" style="display:none;" ><span class="glyphicon glyphicon-trash"></span> Remove all graphs</button>
                    <ul class="list-unstyled config-graphs-list">
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default graph-configuration-dialog-cancel" data-dismiss="modal" data-toggle="tooltip" title="Close without saving changes">Cancel</button>
                    <button type="button" class="btn btn-primary graph-configuration-dialog-save" data-dismiss="modal" data-toggle="tooltip" title="Close and save changes">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade header-dialog" id="dlgHeaderDialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-toggle="tooltip" title="Close without saving changes">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Log Header Information</h4>
                    <h5 class="modal-title-revision"></h5>
                    <h5 class="modal-title-date"></h5>
                    <h5 class="modal-title-craft"></h5>
                </div>
                <div class="modal-body">
					<form name="header-information" id="pid-tuning">
						<div class="cf_column half left">
							<div class="gui_box grey PID-settings">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">PID Settings</div>
								</div>
								<div class="spacer_box">
									<table class="pid_titlebar">
										<tr>
											<th class="name">Name</th>
											<th class="proportional">Proportional</th>
											<th class="integral">Integral</th>
											<th class="derivative">Derivative</th>
											<th class="derivative">FeedForward</th>
										</tr>
									</table>
									<table id="pid_main" class="pid_tuning">
										<tr>
											<th colspan="5">
												<div class="pid_mode">Basic/Acro</div>
											</th>
										</tr>
										<tr class="rollPID">
											<!-- 0 -->
											<td>ROLL</td>
											<td><input type="number" name="p" step="1" min="0" max="255" readonly/></td>
											<td><input type="number" name="i" step="1" min="0" max="255" readonly /></td>
											<td><input type="number" name="d" step="1" min="0" max="255" readonly /></td>
											<td><input type="number" name="f" step="1" min="0" max="255" readonly /></td>
										</tr>
										<tr class="pitchPID">
											<!-- 1 -->
											<td>PITCH</td>
											<td><input type="number" name="p" step="1" min="0" max="255" readonly /></td>
											<td><input type="number" name="i" step="1" min="0" max="255" readonly /></td>
											<td><input type="number" name="d" step="1" min="0" max="255" readonly /></td>
											<td><input type="number" name="f" step="1" min="0" max="255" readonly /></td>
										</tr>
										<tr class="yawPID">
											<!-- 2 -->
											<td>YAW</td>
											<td><input type="number" name="p" step="1" min="0" max="255" readonly /></td>
											<td><input type="number" name="i" step="1" min="0" max="255" readonly /></td>
											<td><input type="number" name="d" step="1" min="0" max="255" readonly /></td>
											<td><input type="number" name="f" step="1" min="0" max="255" readonly /></td>
										</tr>
									</table>
									<table id="pid_baro" class="pid_tuning">
										<tr>
											<th colspan="4">
												<div class="pid_mode">Barometer & Sonar/Altitude</div>
											</th>
										</tr>
										<tr class="altPID">
											<!-- 3 -->
											<td>ALT</td>
											<td><input type="number" name="p" step="0.1" min="0" max="25.5"  readonly/></td>
											<td><input type="number" name="i" step="0.001" min="0" max="0.255"  readonly/></td>
											<td><input type="number" name="d" step="1" min="0" max="255"  readonly /></td>
										</tr>
										<tr class="velPID">
											<!-- 9 -->
											<td>VEL</td>
											<td><input type="number" name="p" step="0.1" min="0" max="25.5"  readonly/></td>
											<td><input type="number" name="i" step="0.001" min="0" max="0.255"  readonly/></td>
											<td><input type="number" name="d" step="1" min="0" max="255" readonly /></td>
										</tr>
									</table>
									<table id="pid_mag" class="pid_tuning">
										<tr>
											<th colspan="4">
												<div class="pid_mode">Heading</div>
											</th>
										</tr>
										<tr class="magPID">
											<!-- 8 -->
											<td>MAG</td>
											<td><input type="number" name="p" step="0.1" min="0" max="25.5"  readonly/></td>
											<td></td>
											<td></td>
										</tr>
									</table>
									<table id="pid_gps" class="pid_tuning">
										<tr>
											<th colspan="4">
												<div class="pid_mode">GPS</div>
											</th>
										</tr>
										<tr class="posPID">
											<!-- 4 -->
											<td>POS</td>
											<td><input type="number" name="p" step="0.01" min="0" max="2.55"  readonly/></td>
											<td><input type="number" name="i" step="0.01" min="0" max="2.55"  readonly/></td>
											<td></td>
										</tr>
										<tr class="posrPID">
											<!-- 5 -->
											<td>POSR</td>
											<td><input type="number" name="p" step="0.1" min="0" max="25.5"  readonly/></td>
											<td><input type="number" name="i" step="0.01" min="0" max="2.55"  readonly/></td>
											<td><input type="number" name="d" step="0.001" min="0" max="0.255"  readonly/></td>
										</tr>
									</table>
									<table id="pid_accel" class="pid_tuning">
										<tr>
											<th colspan="4">
												<div class="pid_mode borderleft">
													<div class="textleft">
														<div class="pidTuningLevel">Angle/Horizon</div>
													</div>
													<div class="pids">Strength (Angle)</div>
													<div class="pids">Strength (Horizon)</div>
													<div class="pids">Transition (Horizon)</div>
												</div>
											</th>
										</tr>
										<tr class="levelPID">
											<!-- 7 -->
											<td>LEVEL</td>
											<td><input type="number" name="p" step="0.1" min="0" max="25.5"  readonly/></td>
											<td><input type="number" name="i" step="0.001" min="0" max="0.255"  readonly/></td>
											<td><input type="number" name="d" step="1" min="0" max="255"  readonly/></td>
										</tr>
									</table>
								</div>
							</div>
							<div class="gui_box grey rxMode">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">Receiver Mode</div>
								</div>
								<div class="spacer_box">
									<table cellpadding="0" cellspacing="0">
										<thead class="rxMode noline">
											<tr>
												<th class="cbox"></th>
												<th class="item"></th>
												<th class="description"></th>
											</tr>
										</thead>
										<tbody class="features rxMode noline">
											<!-- table generated here -->
										</tbody>
									</table>
									<table class="parameter cf">
										<tbody>
											<tr>
												<td name='serialrx_provider'><label>Provider</label><select><!-- list generated here --></select></td>
											</tr>
										</tbody>
									</table>

								</div>
							</div>
							<div class="gui_box grey hardware">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">Hardware Options</div>
								</div>
								<div class="spacer_box">
									<table class="parameter cf">
										<tbody>
											<tr>
												<td name='acc_hardware'><label>Accelerometer</label><select><!-- list generated here --></select></td>
												<td name='mag_hardware'><label>Magnetometer</label><select><!-- list generated here --></select></td>
												<td name='baro_hardware'><label>Barometer</label><select><!-- list generated here --></select></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
                            <div class="gui_box grey debug">
                                <div class="gui_box_titlebar">
                                    <div class="spacer_box_title">Debug Settings</div>
                                </div>
                                <div class="spacer_box">
                                    <table class="parameter cf">
                                        <tbody>
                                        <tr>
                                            <td name='debug_mode'><label>Debug Mode</label><select><!-- list generated here --></select></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="gui_box grey unknown">
                                <div class="gui_box_titlebar">
                                    <div class="spacer_box_title">Unknown Header Fields</div>
                                </div>
                                <div class="spacer_box">
                                    <table class="parameter cf">
                                        <tr>
                                            <td>Name</td>
                                            <td>Value</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
						</div>
						<div class="cf_column half right">
							<div class="spacer_left">
								<div class="gui_box grey rates">
									<div class="gui_box_titlebar">
										<div class="spacer_box_title">RC Command and Motor Protocols</div>
									</div>
									<div class="spacer_box">
										<table class="parameter cf">
											<thead>
												<tr>
													<th colspan="3">ROLL/PITCH</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td name="rcRate" class="no-inav"><label>Rate</label><input type="number" step="0.01" min="0" max="1.00"/></td>
													<td name="rcExpo"><label>Expo</label><input type="number" step="0.01" min="0" max="1.00"/></td>
													<td name="deadband"><label>Deadband</label><input type="number" step="1" min="0" max="32"/></td>
												</tr>
												<tr>
													<th colspan="3">YAW</th>
												</tr>
												<tr>
													<td name="rcYawRate" class="no-inav"><label>Rate</label><input type="number" step="0.01" min="0" max="1.00"/></td>
													<td name="rcYawExpo" ><label>Expo</label><input type="number" step="0.01" min="0" max="1.00"/></td>
													<td name="yaw_deadband" ><label>Deadband</label><input type="number" step="1" min="0" max="100"/></td>
												</tr>
											</tbody>
										</table>
										<table class="parameter cf">
											<thead>
												<tr>
													<th colspan="5">Rates</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td name="rates[0]"><label>ROLL Rate</label><input type="number" step="0.01" min="0" max="1.00" readonly /></td>
													<td name="rates[1]"><label>PITCH Rate</label><input type="number" step="0.01" min="0" max="1.00" readonly /></td>
													<td name="rates[2]"><label>YAW Rate</label><input type="number" step="0.01" min="0" max="2.55" readonly /></td>
												</tr>

											</tbody>
										</table>
										<table class="parameter cf">
											<thead>
												<tr>
													<th colspan="5">Motors</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td name='motor_pwm_protocol'><label>Protocol</label><select><!-- list generated here --></select></td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
								<div class="gui_box grey throttle">
									<div class="gui_box_titlebar">
										<div class="spacer_box_title">Throttle</div>
									</div>
									<div class="spacer_box">
										<table class="parameter cf">
											<tbody>
												<tr>
													<td name="thrMid"><label>Throttle Mid</label><input type="number" step="0.01" min="0" max="1" /></td>
													<td name="thrExpo"><label>Throttle Expo</label><input type="number" step="0.01" min="0" max="1" /></td>
													<td name="minthrottle"><label>Min Throttle</label><input type="number" step="10" min="1000" max="2000" /></td>
													<td name="maxthrottle"><label>Max Throttle</label><input type="number" step="10" min="1000" max="2000" /></td>
												</tr>
											</tbody>
                                        </table>
                                        <table class="parameter cf">
											<tbody>
												<tr>
													<td name="dynThrPID"><label>TPA</label><input type="number" step="0.01" min="0" max="1.00" /></td>
													<td name="tpa-breakpoint"><label>TPA&nbsp;Breakpoint</label><input type="number" step="10" min="1000" max="2000" /></td>
													<td name="airmode_activate_throttle" class="bf-only"><label>Airmode Activate</label><input type="number" step="10" min="1000" max="2000" /></td>
												</tr>
											</tbody>
										</table>
                                        <table class="parameter cf" style="display: none">
                                            <tbody>
                                            <tr>
                                                <td name="digitalIdleOffset"><label>D-Shot Offset (%)</label><input type="number" step="0.01" min="0" max="1" /></td>
                                                <td name="motorOutputLow"><label>D-Shot Motor Low</label><input type="number" step="10" min="0" max="2047" /></td>
                                                <td name="motorOutputHigh"><label>D-Shot Motor High</label><input type="number" step="10" min="0" max="2047" /></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
								</div>
								<div class="gui_box grey voltagecurrent">
									<div class="gui_box_titlebar">
										<div class="spacer_box_title">Voltage and Current</div>
									</div>
									<div class="spacer_box">
									<table class="parameter cf">
										<tbody>
											<tr>
												<td name="currentMeterScale"><label>Current Scale</label><input type="number" step="1" min="0" max="500" /></td>
												<td name="currentMeterOffset"><label>Current Offset</label><input type="number" step="1" min="0" max="500" /></td>
											</tr>
										</tbody>
										<tbody>
											<tr>
												<td name="vbatscale"><label>VBat Scale</label><input type="number" step="1" min="0" max="500" /></td>
												<td name="vbatref"><label>VBat Ref</label><input type="number" step="1" min="0" max="500" /></td>
											</tr>
										</tbody>
										<tbody>
											<tr>
												<td name="vbatmincellvoltage"><label>Min Cell Voltage</label><input type="number" step="0.01" min="0" max="1.00"/></td>
												<td name="vbatwarningcellvoltage"><label>Warning Voltage</label><input type="number" step="0.01" min="0" max="2.55" /></td>
                                                <td name="vbatmaxcellvoltage"><label>Max Cell Voltage</label><input type="number" step="0.01" min="0" max="1.00"/></td>
											</tr>
										</tbody>
										</table>
									<table class="noline bf-only" cellpadding="0" cellspacing="0">
										<tbody class="static-features misc noline">
											<tr>
												<td name="vbat_pid_compensation"><label class="option"><input class="ios-switch orange" type="checkbox"/><div><div></div></div></label>
												<td><label>VBAT_PID_COMPENSATION</label></td>
												<td><span>Scale PID parameters based upon current battery voltage</span></td>
											</tr>
										</tbody>
									</table>
									<table cellpadding="0" cellspacing="0">
										<tbody class="features battery noline">
											<!-- table generated here -->
										</tbody>
									</table>
									</div>
								</div>
								<div class="gui_box grey other">
									<div class="gui_box_titlebar">
										<div class="spacer_box_title">Other Features</div>
									</div>
									<div class="spacer_box">
										<table cellpadding="0" cellspacing="0">
											<thead class="features other noline">
												<tr>
													<th class="checkbox"></th>
													<th class="item"></th>
													<th class="description"></th>
												</tr>
											</thead>
											<tbody id="features-list" class="features other noline">
												<!-- table generated here -->
											</tbody>
										</table>
									</div>
								</div>

							</div>
						</div>
					</form>
                	<div class="clear-both"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default header-dialog-toggle"  data-toggle="tooltip" title="Change the header display for the respective firmware type">Cleanflight</button>
                    <button type="button" class="btn btn-default header-dialog-cancel" data-dismiss="modal" data-toggle="tooltip" title="Close without saving changes">Cancel</button>
                    <button type="button" class="btn btn-primary header-dialog-save" style="display:none;" data-dismiss="modal" data-toggle="tooltip" title="Close and save changes">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade keys-dialog" id="dlgKeysDialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-toggle="tooltip" title="Close the dialog box">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Shortcut Keys</h4>
                </div>
                <div class="modal-body">
                    <div class="cf_column half left">
						<div class="clear-both"></div>
							<div class="gui_box grey">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">Scrolling, Zooming, Play and Pause</div>
								</div>
								<div class="clear-both"></div>
								<div class="spacer_box">
									<ul>
										<li><span class=keys"><div class="key">Home</div><div class="normal">and</div><div class="key">End</div></span>
													<div class="description">Go to the start or end of the current log.</div></li>
										<li><span class=keys"><div class="key">&larr;</div><div class="normal">and</div><div class="key">&rarr;</div></span>
													<div class="description">Moves through log backwards and forwards by exactly 100ms.</div></li>
										<li><span class=keys"><div class="key">Alt</div><div class="key">&larr;</div><div class="normal">and</div><div class="key">&rarr;</div></span>
													<div class="description">Moves through log backwards and forwards by exactly one frame. If a video is loaded, then scroll one video frame otherwise scroll one log frame.</div></li>
										<li><span class=keys"><div class="key">PgUp</div><div class="normal">and</div><div class="key">PgDn</div></span>
													<div class="description">Moves through log backwards and forwards fast.</div></li>
									</ul>
									<ul>
										<li><span class=keys"><div class="key">Shift</div><div class="key">&larr;</div><div class="normal">and</div><div class="key">&rarr;</div></span>
													<div class="description">Zoom Log Out and In.</div></li>
										<li><span class=keys"><div class="key">Shift</div><div class="key">Alt</div><div class="key">&larr;</div><div class="normal">and</div><div class="key">&rarr;</div></span>
													<div class="description">Zoom Log Out and In but faster.</div></li>
									</ul>
									<ul>
										<li><span class=keys"><div class="key">Spacebar</div></span><div class="description">Starts / Pauses Log and/or Video</div></li>
									</ul>
								</div>
							</div>
                			<div class="gui_box grey topspacer">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">Quick Modes</div>
								</div>
								<div class="clear-both"></div>
								<div class="spacer_box">
									<ul>
										<li><span class=keys"><div class="key">Z</div></span>
													<div class="description">Toggle QuickZoom. Quickly Zoom out to Max and back</div></li>
										<li><span class=keys"><div class="key">S</div></span>
													<div class="description">Toggle QuickSmooth, Quickly override graph smoothing and force all graph smoothing to zero.</div></li>
										<li><span class=keys"><div class="key">X</div></span>
													<div class="description">Toggle QuickExpo, Quickly override graph expo and force all graph expo to linear.</div></li>
										<li><span class=keys"><div class="key">G</div></span>
													<div class="description">Toggle QuickGrid, Quickly override graph grid view's and force all grids to disappear.</div></li>
										<li><span class=keys"><div class="key">T</div></span>
													<div class="description">Toggle QuickTable, Quickly show the field values table.</div></li>
										<li><span class=keys"><div class="key">C</div></span>
													<div class="description">Toggle QuickConfig, Quickly show the configuration dump file (if loaded).</div></li>
									</ul>
								</div>
							</div>
						</div>
                    <div class="cf_column half right">
						<div class="spacer_left">
                			<div class="clear-both"></div>
							<div class="gui_box grey">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">Marking, Smart Sync</div>
								</div>
								<div class="clear-both"></div>
								<div class="spacer_box">
									<ul>
										<li><span class=keys"><div class="key">M</div></span>
													<div class="description">Toggles a Marker on the log at the current time. As you scroll, time from marker (offset) is displayed on the toolbar. (Useful for measuring times between events.)</div></li>
										<li><span class=keys"><div class="key">Alt</div><div class="key">M</div></span>
													<div class="description">Smart Sync. With both a log AND a video loaded, Press 'M' to place a marker on the log where an event occurs (such as the exact start of a roll). Then scroll backwards and forwards until your video shows the exaxt same start of event. Now press 'Alt M' to sync the log and video at this point.</div></li>
									</ul>
									<ul>
										<li></li>
										<li><span class=keys"><div class="key">I</div></span>
													<div class="description">Mark the start of (IN) video export or analyser start.</div></li>
										<li><span class=keys"><div class="key">O</div></span>
													<div class="description">Mark the end of (OUT) video export or analyser end.</div></li>
									</ul>
								</div>
							</div>
                			<div class="gui_box grey topspacer">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">Workspaces / Favourites</div>
								</div>
								<div class="clear-both"></div>
								<div class="spacer_box">
									<ul>
										<li><span class=keys"><div class="key">Shift</div><div class="key">0</div><div class="normal">to</div><div class="key">9</div></span>
													<div class="description">Save the current displayed graph configuration to workspace/favourite key 0 through 9 (this includes all graph smoothing and expo etc.).</div></li>
										<li><span class=keys"><div class="key">0</div><div class="normal">to</div><div class="key">9</div></span>
													<div class="description">Recall workspace/favourite stored in keys 0 through 9. Very fast graph configuration swapping useful for comparing traces.</div></li>
									</ul>
									<ul>
										<li><span class=keys"><div class="key">Ctrl</div><div class="key">Z</div></span>
													<div class="description">Swap back to your last graph configuration. Repeatedly pressing Ctrl-Z will toggle the last two graph configurations.</div></li>
									</ul>
									<ul>
										<li><span class=keys"><div class="key">Alt</div><div class="key">Shift</div><div class="key">1</div><div class="normal">to</div><div class="key">9</div></span>
													<div class="description">Save the current time to Bookmark hotkeys 1 through 9</div></li>
										<li><span class=keys"><div class="key">Alt</div><div class="key">1</div><div class="normal">to</div><div class="key">9</div></span>
													<div class="description">Recall Bookmark 1 though 9 to jump to specific time quickly.</div></li>
										<li><span class=keys"><div class="key">Alt</div><div class="key">0</div></span>
													<div class="description">Special Case, clear all bookmarks</div></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
                	<div class="clear-both"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default keys-dialog-cancel" data-dismiss="modal" data-toggle="tooltip" title="Close the dialog box">Cancel</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade video-export-dialog" id="dlgVideoExport">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Export video</h4>
                </div>
                <div class="modal-body">
                    <div class="pane-video-settings form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Video duration</label>
                            <div class="col-sm-9">
                                <p class="form-control-static video-duration"></p>
                                <p>You can use the I (In) and O (Out) keys while
                                viewing the log to mark the start and end points of the video</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Framerate</label>
                            <div class="col-sm-9">
                                <select class="form-control video-frame-rate">
                                    <option value="15">15 fps</option>
                                    <option value="30">30 fps</option>
                                    <option value="60">60 fps</option>
                                    <option value="120">120 fps</option>
                                    <option value="240">240 fps</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Resolution</label>
                            <div class="col-sm-9">
                                <select class="form-control video-resolution">
                                    <option value="854x480">480p</option>
                                    <option value="1280x720">720p</option>
                                    <option value="1920x1080">1080p</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group video-dim-section">
                            <label class="col-sm-3 control-label">Dim flight video</label>
                            <div class="col-sm-9">
                                <select class="form-control video-dim">
                                    <option value="0.0">0%</option>
                                    <option value="0.2">20%</option>
                                    <option value="0.4">40%</option>
                                    <option value="0.5">50%</option>
                                    <option value="0.6">60%</option>
                                    <option value="0.8">80%</option>
                                    <option value="1.0">100%</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Video format</label>
                            <div class="col-sm-9">
                                <p class="form-control-static video-format">WebM</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Audio format</label>
                            <div class="col-sm-9">
                                <p class="form-control-static audio-format">Not supported yet (no audio will be included)</p>
                            </div>
                        </div>
                        <div class="form-group jumpy-video-note">
                            <label class="col-sm-3 control-label">Note</label>
                            <div class="col-sm-9">
                                <p class="form-control-static">
                                    If you experience problems with the background flight video being glitchy
                                    in the exported video, <a target="_blank" href="https://github.com/cleanflight/blackbox-log-viewer/blob/master/Readme.md">follow
                                    the instructions here</a> to re-encode your flight video.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="pane-video-progress">
                        <progress max="100" value="0"></progress>

                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Rendered frames</label>
                                <div class="col-sm-9">
                                    <p class="form-control-static video-export-rendered-frames"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">File size</label>
                                <div class="col-sm-9">
                                    <p class="form-control-static video-export-size"></p>
                                    <div class="alert alert-danger" role="alert">You must install this tool as a Chrome App in order to export videos larger than 500MB</div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Remaining time</label>
                                <div class="col-sm-9">
                                    <p class="form-control-static video-export-remaining"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pane-video-complete">
                        <p class="video-export-result"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default video-export-dialog-cancel" data-dismiss="modal" data-toggle="tooltip" title="Cancel video generation">Cancel</button>
                    <button type="button" class="btn btn-default video-export-dialog-close" data-dismiss="modal" data-toggle="tooltip" title="Close dialog box">Close</button>
                    <button type="button" class="btn btn-primary video-export-dialog-start" data-toggle="tooltip" title="Start generating video file">Begin export</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade user-settings-dialog" id="dlgUserSettings">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Advanced User Settings</h4>
                </div>
                <div class="modal-body">
                	<div class="cf_column half left">
	                    <div class="pane-user-settings form-horizontal">
							<div class="gui_box grey mixer-settings">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">Mixer Settings</div>
								</div>
								<div class="spacer_box">
		                            <div>
		                               <label class="option">Custom<input class="custom-mixes ios-switch" type="checkbox"/><div><div></div></div><span>Select custom craft display.</span></label>
		                            </div>
		                            <div class="custom-mixes-group">
										<table>
											<tr>
												<td><label>Mixer Type</label><select class="mixerList"><!-- list generated here --></select></td>
												<td class="mixerPreview"><img src="./images/motor_order/quad_x.svg"/></td>
											</tr>
										</table>
										<table class="motorList">
											<!-- list generated here -->
										</table>
										<p>The custom mixer settings ONLY affect the craft icon that is displayed over the log. Please set the closest craft type (e.g. QuadX)
										and then identify which motors are connected to which motor outputs. If you deselect the custom setting, then the viewer will function
										as per the original method (i.e. it will autocalculate the craft model based upon the number of motors found in the log.)
										</p>
									</div>
								</div>
							</div>
							<div class="gui_box grey stick-settings">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">Stick Settings</div>
								</div>
								<div class="spacer_box">
									<div>
		                               <label class="option">Units<input class="stick-units ios-switch" type="checkbox"/><div><div></div></div><span>Display actual units on stick display.</span></label>
		                            </div>
									<div>
		                               <label class="option">Stick Trails<input class="stick-trails ios-switch" type="checkbox"/><div><div></div></div><span>Show stick trails.</span></label>
		                            </div>
                                    <div>
                                        <label class="option">Invert Yaw<input class="invert-yaw ios-switch" type="checkbox"/><div><div></div></div><span>Invert Yaw in Stick Display</span></label>
                                    </div>
		                            <div class="stick-mode-group">
										<table>
											<tr>
												<td>
														<label>Mode</label>
													  	<input type="radio" name="stick-mode" value="1">Mode 1</input><br>
		  												<input type="radio" name="stick-mode" value="2">Mode 2</input><br>
		  												<input type="radio" name="stick-mode" value="3">Mode 3</input><br>
		  												<input type="radio" name="stick-mode" value="4">Mode 4</input><br>
												</td>
												<td class="modePreview"><img src="./images/stick_modes/Mode_2.png"/></td>
											</tr>
										</table>
										<table>
											<tr>
												<td>
													<label>Position</label>
												</td>
												<td class="position">
													<label>Top</label><input name="stick-top" type="number" step="1" min="0" max="100"/><p>%</p>
												</td>
												<td class="position">
													<label>Left</label><input  name="stick-left" type="number" step="1" min="0" max="100"/><p>%</p>
												</td>
												<td class="position">
													<label>Size</label><input name="stick-size" type="number" step="1" min="0" max="100"/><p>%</p>
												</td>
											</tr>
										</table>
									</div>
								</div>
							</div>
                            <div class="gui_box grey legend-settings">
                                <div class="gui_box_titlebar">
                                    <div class="spacer_box_title">Legend Settings</div>
                                </div>
                                <div class="spacer_box">
                                    <div>
                                        <label class="option">Units<input class="legend-units ios-switch" type="checkbox"/><div><div></div></div><span>Display actual units on legend.</span></label>
                                    </div>
                                    <div>
										<label class="option">Velocity
										  <select class="velocity-units">
										    <option value="D">m/s</option>
										    <option value="M">kph</option>
										    <option value="I">mph</option>
										  </select>
										</label>
									</div>
                                </div>
                            </div>
	                    </div>
					</div>
                	<div class="cf_column half right">
						<div class="spacer_left">
							<div class="gui_box grey craft-settings">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">Craft Settings</div>
								</div>
								<div class="spacer_box">
									<table>
										<tr>
											<td>
												<label>Position</label>
											</td>
											<td class="position">
												<label>Top</label><input name="craft-top" type="number" step="1" min="0" max="100"/><p>%</p>
											</td>
											<td class="position">
												<label>Left</label><input name="craft-left" type="number" step="1" min="0" max="100"/><p>%</p>
											</td>
											<td class="position">
												<label>Size</label><input name="craft-size" type="number" step="1" min="0" max="100"/><p>%</p>
											</td>
										</tr>
									</table>
								</div>
							</div>
							<div class="gui_box grey top-spacer analyser-settings">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">Analyser Settings</div>
								</div>
								<div class="spacer_box">
                                    <div>
                                        <label class="option">Hanning<input class="analyser-hanning ios-switch" type="checkbox"/><div><div></div></div><span>Use Hanning Window for Analyser</span></label>
                                    </div>
                                    <table>
										<tr>
											<td>
												<label>Position</label>
											</td>
											<td class="position">
												<label>Top</label><input name="analyser-top" type="number" step="1" min="0" max="100"/><p>%</p>
											</td>
											<td class="position">
												<label>Left</label><input name="analyser-left" type="number" step="1" min="0" max="100"/><p>%</p>
											</td>
											<td class="position">
												<label>Size</label><input name="analyser-size" type="number" step="1" min="0" max="100"/><p>%</p>
											</td>
										</tr>
									</table>
								</div>
							</div>
							<div class="gui_box grey top-spacer watermark-settings">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">Watermark Settings</div>
								</div>
								<div class="spacer_box">
									<div>
		                               <label class="option">Watermark<input class="watermark ios-switch" type="checkbox"/><div><div></div></div><span>Show the watermark.</span></label>
		                            </div>
		                            <div class="watermark-group">
										<table>
											<tr>
												<td>
													<label>Logo</label>
												</td>
												<td>
													<div class="watermark-logo-button">
														<input type='file' id="watermark-logo-load" />
													</div>
												</td>
											</tr>
											<tr>
												<td>
												</td>
												<td class="watermark-logo-image">
												    <img id="watermark-logo" src="./images/logo.png" alt="choose your own logo"/>
												</td>
											</tr>
										</table>
										<table>
											<tr>
												<td>
													<label>Position</label>
												</td>
												<td class="position">
													<label>Top</label><input name="watermark-top" type="number" step="1" min="0" max="100"/><p>%</p>
												</td>
												<td class="position">
													<label>Left</label><input  name="watermark-left" type="number" step="1" min="0" max="100"/><p>%</p>
												</td>
												<td class="position">
													<label>Size</label><input name="watermark-size" type="number" step="1" min="0" max="100"/><p>%</p>
												</td>
											</tr>
											<tr>
												<td>
													<label>Transparency</label>
												</td>
												<td class="position">
													<input name="watermark-transparency" type="number" step="1" min="0" max="100"/><p>%</p>
												</td>
												<td></td>
												<td></td>
												<td></td>
											</tr>
										</table>
									</div>
								</div>
							</div>
							<div class="gui_box grey top-spacer laptimer-settings">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">Lap Timer Settings</div>
								</div>
								<div class="spacer_box">
									<div>
		                               <label class="option">Lap Timer<input class="laptimer ios-switch" type="checkbox"/><div><div></div></div><span>Show the lap timer.</span></label>
		                            </div>
		                            <div class="laptimer-group">
										<table>
											<tr>
												<td>
													<label>Position</label>
												</td>
												<td class="position">
													<label>Top</label><input name="laptimer-top" type="number" step="1" min="0" max="100"/><p>%</p>
												</td>
												<td class="position">
													<label>Left</label><input  name="laptimer-left" type="number" step="1" min="0" max="100"/><p>%</p>
												</td>
												<td class="position">
												</td>
											</tr>
											<tr>
												<td>
													<label>Transparency</label>
												</td>
												<td class="position">
													<input name="laptimer-transparency" type="number" step="1" min="0" max="100"/><p>%</p>
												</td>
												<td></td>
												<td></td>
												<td></td>
											</tr>
										</table>
										<p>To use the lap timer feature, you MUST set a "start time" bookmark at the beginning
										of the log/video (where the race starts for example) plus additional bookmarks to mark the start of each lap.
										Bookmark the video frames where you actually cross the start/finish line for best results.
										</p>
									</div>
								</div>
							</div>
                            <div class="gui_box grey top-spacer logdata-settings">
								<div class="gui_box_titlebar">
									<div class="spacer_box_title">Log Data Settings</div>
								</div>
                                <div class="spacer_box">
                                    <div>
                                        <label class="option">GPS<input class="logdata-gps ios-switch" type="checkbox"/><div><div></div></div><span>Show GPS Data</span></label>
                                    </div>
                                </div>
							</div>
						</div>
					</div>
                	<div class="clear-both"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default user-settings-dialog-cancel" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary user-settings-dialog-save" data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div>
	<!-- Scripts -->
    <script src="js/complex.js"></script>
    <script src="js/real.js"></script>
    <script src="js/vendor/jquery-1.11.3.min.js"></script>
    <script src="js/vendor/jquery-ui-1.11.4.min.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/vendor/jquery.ba-throttle-debounce.js"></script>
    <script src="js/vendor/three.min.js"></script>
    <script src="js/vendor/jquery.nouislider.all.min.js"></script>
    <script src="js/vendor/FileSaver.js"></script>
    <script src="js/vendor/webm-writer-0.1.1.js"></script>
    <script src="js/vendor/semver.js"></script>
    <script src="js/pref_storage.js"></script>
    <script src="js/tools.js"></script>
    <script src="js/cache.js"></script>
    <script src="js/expo.js"></script>
    <script src="js/datastream.js"></script>
    <script src="js/decoders.js"></script>
    <script src="js/craft_2d.js"></script>
    <script src="js/craft_3d.js"></script>
    <script src="js/flightlog_fielddefs.js"></script>
    <script src="js/flightlog_fields_presenter.js"></script>
    <script src="js/flightlog_parser.js"></script>
    <script src="js/flightlog_index.js"></script>
    <script src="js/flightlog.js"></script>
    <script src="js/grapher.js"></script>
    <script src="js/graph_config.js"></script>
    <script src="js/graph_legend.js"></script>
    <script src="js/graph_config_dialog.js"></script>
    <script src="js/graph_spectrum.js"></script>
    <script src="js/header_dialog.js"></script>
    <script src="js/keys_dialog.js"></script>
    <script src="js/user_settings_dialog.js"></script>
    <script src="js/seekbar.js"></script>
    <script src="js/video_export_dialog.js"></script>
    <script src="js/flightlog_video_renderer.js"></script>
    <script src="js/graph_config.js"></script>
    <script src="js/configuration.js"></script>
    <script src="js/laptimer.js"></script>
    <script src="js/main.js"></script>
</body>
</html>