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>Betaflight - 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/jquery.nouislider.min.css">
    <link rel="stylesheet" href="src/css/main.css">
    <link rel="stylesheet" href="src/css/header_dialog.css">
    <link rel="stylesheet" href="src/css/keys_dialog.css">
    <link rel="stylesheet" href="src/css/user_settings_dialog.css">
    <link rel="stylesheet" href="src/css/menu.css">
    <script src="/js/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>Welcome to the Enhanced Blackbox Explorer!</h1>
                <p>This tool allows you to view and analyze logs created by Cleanflight's and Betaflight's 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" accept=".bbl,.txt,.cfl,.bfl,.log,.avi,.mov,.mp4,.mpeg,.json" multiple />
                </span>
                <span id="loading-file-text" class="hiddenElement loading-message"></span>
            </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 href="https://github.com/cleanflight/cleanflight" target="_blank" rel="noopener noreferrer">Cleanflight</a> and
                                <a href="https://github.com/betaflight/betaflight/releases" target="_blank" rel="noopener noreferrer">Betaflight</a>, and is supported on most of CF's flight controllers (Naze32, CC3D, SPRacingF3,
                                etc.).
                            </p>
                            <p>
                                To get started with Blackbox recording, read
                                <a href="https://github.com/betaflight/betaflight/blob/master/docs/Blackbox.md" target="_blank" rel="noopener noreferrer">Cleanflight and Betaflight's Blackbox feature documentation</a>.
                            </p>
                            <p>
                                Already have a log recorded? View
                                <a href="https://github.com/betaflight/blackbox-tools/blob/master/Readme.md" target="_blank" rel="noopener noreferrer">the documentation for this log viewer</a> for details on how to best use this tool.
                            </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 href="https://github.com/betaflight/blackbox-log-viewer/issues" target="_blank" rel="noopener noreferrer">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
                                low-pass filter settings.
                            </p>
                            <p>
                                For help and instructions on how to tune your craft, please read some of these resources:
                            </p>
                            <ul>
                                <li>
                                    <a href="http://www.rcgroups.com/forums/showthread.php?t=2439428" target="_blank" rel="noopener noreferrer">Mini quad PID tuning from start to finish</a> by Joshua Bardwell on RCGroups.com
                                </li>
                                <li>
                                    <a href="http://www.rcgroups.com/forums/showthread.php?t=2386267" target="_blank" rel="noopener noreferrer">Blackbox log analyzation/help thread</a> on RCGroups.com
                                </li>
                                <li>
                                    <a href="https://github.com/cleanflight/cleanflight/blob/master/docs/PID%20tuning.md" target="_blank" rel="noopener noreferrer">Cleanflight and Betaflight's PID tuning documentation</a>
                                </li>
                                <li>
                                    <a href="http://www.rcgroups.com/forums/showthread.php?t=2249574" target="_blank" rel="noopener noreferrer">Cleanflight support topic</a> on RCGroups.com
                                </li>
                                <li>
                                    <a href="http://www.rcgroups.com/forums/showthread.php?t=2464844" target="_blank" rel="noopener noreferrer">Betaflight support topic</a> on RCGroups.com
                                </li>
                                <li>
                                    <a href="http://www.rcgroups.com/forums/showthread.php?t=2299805" target="_blank" rel="noopener noreferrer">Blackbox announcement topic (original viewer)</a> on RCGroups.com
                                </li>
                                <li>
                                    <a href="http://www.rcgroups.com/forums/showthread.php?t=2649495" target="_blank" rel="noopener noreferrer">Enhanced Blackbox announcement topic (this viewer)</a> on RCGroups.com
                                </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 href="https://github.com/betaflight/blackbox-tools/" target="_blank" rel="noopener noreferrer">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 href="https://github.com/betaflight/blackbox-tools/" target="_blank" rel="noopener noreferrer">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 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 release 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/betaflight/blackbox-log-viewer/releases/latest" target="_blank" rel="noopener noreferrer">
                                    vX.X.XX </a><br>
                            </p>
                            <p class="viewer-download">
                                The latest version is:<br>
                                <a href="https://blackbox.betaflight.com"
                                target="_blank"
                                rel="noopener noreferrer">blackbox.betaflight.com</a>
                            </p>
                            <p class="viewer-download">
                                The latest development version is:<br>
                                <a href="https://master.blackbox.betaflight.com/"
                                target="_blank"
                                rel="noopener noreferrer">master.blackbox.betaflight.com</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </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&nbsp;Explorer</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 video 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>
                        <a class="btn btn-primary btn-csv-export" data-toggle="tooltip" title="Export your current graphs to CSV file"> Export CSV...</a>
                        <a class="btn btn-primary btn-gpx-export" data-toggle="tooltip" title="Export your flight to GPX file"> Export GPX...</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" accept=".bbl,.txt,.cfl,.bfl,.log,.avi,.mov,.mp4,.mpeg,.json" multiple />
                        </span>
                    </div>
                    <div class="btn-group"  style="display: none;">
                        <button type="button" class="btn btn-default view-zoom-in" data-toggle="tooltip" title="Zoom In Window">
                            <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">
                            <span class="glyphicon glyphicon-zoom-out"></span>
                        </button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-nobg open-user-settings-dialog" data-toggle="tooltip" title="Show Settings">
                            <span class="glyphicon glyphicon-cog"></span>
                        </button>
                        <button type="button" class="btn btn-nobg open-keys-dialog" data-toggle="tooltip" title="Show Shortcuts">
                            <span class="glyphicon glyphicon-question-sign"></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 class="dropdown view-buttons">
                    <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>
                            <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 class="divider"></li>
                        <li class="dropdown-header">Overlay</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>
                            <a href="#" id="auto-hide-menu" class="view-analyser auto-hide-menu" data-toggle="tooltip" title="View/hide analyser display">
                                <span class="glyphicon glyphicon-equalizer"></span> Analyser
                                <span class="pull-right">A</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" id="auto-hide-menu" class="view-map auto-hide-menu" data-toggle="tooltip" title="View/hide map">
                                <span class="glyphicon glyphicon-map-marker"></span> Map
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group view-buttons-expanded" role="group">
                    <button type="button" class="btn btn-default view-config" data-toggle="tooltip" title="View graph">
                        <span class="glyphicon glyphicon-home"></span>
                    </button>
                    <button type="button" class="btn btn-default open-header-dialog" data-toggle="tooltip" title="View log header">
                        <span class="glyphicon glyphicon-info-sign"></span>
                    </button>
                    <button type="button" class="btn btn-default view-table" data-toggle="tooltip" title="View table">
                        <span class="glyphicon glyphicon-list-alt"></span>
                    </button>
                </div>
            </li>
            <li class="log-overlay-panel view-buttons-expanded">
                <h4>Overlay</h4>
                <div>
                    <div class="btn-group" 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-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-map" data-toggle="tooltip" title="View/hide map">
                            <span class="glyphicon glyphicon-map-marker"></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-rate">
                            <div class="dropdown">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="playback-rate">
                                    Speed
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="playback-rate">
                                    <li>
                                        <div class="pull-right">
                                            <div class="panel-body">
                                                <div class="playback-rate-control btn-group btn-group-vertical"></div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="playback-rate-expanded">
                            <div class="playback-rate-control btn-group btn-group-vertical" data-toggle="tooltip" title="Directly set the playback speed"></div>
                        </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">
                                                <div class="graph-zoom-control btn-group btn-group-vertical"></div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="graph-zoom-expanded">
                            <div class="graph-zoom-control btn-group btn-group-vertical" data-toggle="tooltip" title="Directly set the zoom level"></div>
                        </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-object-align-left"></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-vertical"></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" data-toggle="tooltip" title="Start log here">
                                    <span class="glyphicon glyphicon-object-align-left"></span>
                                </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>
            <li class="log-workspace-panel">
                <h4>Workspace</h4>
                <div class="log-workspace-selection"></div>
                <div class="flexDiv">
                    <div class="selectWrapper">
                        <div class="dropdown-content" id="default_workspaces_menu"></div>
                    </div>
                </div>
            </li>
        </ul>
        <div id="screenshot-frame" 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 id="analyser" class="analyser">
                    <canvas width="0" height="0" id="analyserCanvas"></canvas>

                    <span id="spectrumToolbar">
                        <div id="spectrumType" data-toggle="tooltip" title="Type of Spectrum">
                            <select id="spectrumTypeSelect">
                                <option value="0">Frequency</option>
                                <option value="1">Freq. vs Throttle</option>
                                <option value="2">Freq. vs RPM</option>
                                <option value="3">Power Spectral Density</option>
                                <option value="4">PSD vs Throttle</option>
                                <option value="5">PSD vs RPM</option>
                                <option value="6">Error vs Setpoint</option>
                            </select>
                        </div>

                        <div id="overdrawSpectrumType" data-toggle="tooltip" title="Show Filters">
                            <select id="overdrawSpectrumTypeSelect">
                                <option value="0">Show all filters</option>
                                <option value="1">Show only Gyro filters</option>
                                <option value="2">Show only D-Term filters</option>
                                <option value="3">Show only Yaw filters</option>
                                <option value="4">Hide all filters</option>
                                <option value="5">Auto</option>
                            </select>
                        </div>

                        <div id="spectrumComparison" data-toggle="tooltip" title="Spectrum comparison">
                          <button id="btn-spectrum-export" type="button" title="Export spectrum to CSV">Exp</button>
                          <button type="button" onclick="document.getElementById('btn-spectrum-import').click()" title="Import spectrum from CSV">Imp</button>
                          <input type="file" id="btn-spectrum-import" accept=".csv" style="display:none" multiple/>
                          <button type="button" id="btn-spectrum-clear" title="Clear imported spectrums">Clr</button>
                        </div>

                        <div id="analyserResize" class="btn-nobg view-analyser-fullscreen" data-toggle="tooltip" title="Zoom Analyser Window">
                            <span class="glyphicon glyphicon-resize-full"></span>
                            <span class="glyphicon glyphicon-resize-small"></span>
                        </div>
                    </span>

                    <input id="analyserZoomX" class="onlyFullScreen" type="range" name="analyserZoomX" value="100" min="100" max="500" step="10" title="" list="analyserZoomXTicks"
                    />
                    <input id="analyserZoomY" class="onlyFullScreen" type="range" name="analyserZoomY" value="100" min="10" max="1000" step="10" list="analyserZoomYTicks"
                    />
                    <input id="analyserLowLevelPSD" class="onlyFullScreen" type="number" name="analyserLowLevelPSD" value="-40" min="-40" max="10" step="5"
                    />
                    <input id="analyserMaxPSD" class="onlyFullScreen" type="number" name="analyserMaxPSD" value="10" min="-35" max="100" step="5"
                    />
                    <input id="analyserMinPSD" class="onlyFullScreen" type="number" name="analyserMinPSD" value="-40" min="-100" max="5" step="5"
                    />
                    <label id="analyserMaxPSDLabel" name="analyserMaxPSDLabel" class="onlyFullScreen" >
                      Max&nbsp;dBm
                    </label>
                    <label id="analyserMinPSDLabel" name="analyserMinPSDLabel" class="onlyFullScreen" >
                      Min&nbsp;dBm
                    </label>
                    <label id="analyserLowLevelPSDLabel" name="analyserLowLevelPSDLabel" class="onlyFullScreen" >
                      Limit&nbsp;dBm
                    </label>

                    <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>
                <div id="mapContainer" class="map-container"></div>
                <canvas width="0" height="0" id="stickCanvas"></canvas>
                <span class="log-open-legend-dialog glyphicon glyphicon-cog" data-toggle="tooltip" title="Show the legend"></span>
            </div>
            <div class="log-graph-config">
                <h2 id="legend_title">Legend
                    <span class="log-close-legend-dialog glyphicon glyphicon-remove" data-toggle="tooltip" title="Hide the legend"></span>
                </h2>
                <div class="log-index"></div>
                <div class="log-graph-legend">
                </div>

                <div class="btn-group override-button-group" role="group">
                    <button type="button" class="btn btn-nobg btn-svg-icon toggle-expo" data-toggle="tooltip" title="Expo On/Off">
                        <svg width="24" height="24" viewBox="0 0 8.467 8.467">
                            <path fill="none" stroke="#FFF" stroke-linecap="round" stroke-width=".5" d="M0 4.233s2.117 5.292 4.233 0c2.117-5.291 4.234 0 4.234 0"/>
                            <path fill="#FFF" d="M4.233 0L3.175 1.058h2.117L4.233 0zm0 1.058L3.175 2.117h.794V6.35h-.794l1.058 1.058L5.292 6.35h-.794V2.117h.794L4.233 1.058zm0 6.35H3.175l1.058 1.059 1.059-1.059H4.233z"/>
                            </svg>
                    </button>
                    <button type="button" class="btn btn-nobg btn-svg-icon toggle-smoothing" data-toggle="tooltip" title="Smoothing On/Off">
                        <svg width="24" height="24" viewBox="0 0 8.467 8.467">
                            <path fill="none" stroke="#FFF" stroke-linecap="round" stroke-width=".5" d="M0 4.233s2.117 5.292 4.233 0c2.117-5.291 4.234 0 4.234 0"></path>
                            <path fill="none" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".265"
                                d="M0 4.233l1.058 3.97 1.059-2.911 1.058 2.91 1.058-7.144 1.059 4.234L6.35.265l1.058 3.968h1.059"></path>
                        </svg>
                    </button>
                    <button type="button" class="btn btn-nobg btn-svg-icon toggle-grid" data-toggle="tooltip" title="Grid On/Off">
                        <svg width="24" height="24" viewBox="0 0 8.467 8.467">
                            <path fill="none" stroke="#FFF" stroke-linecap="round" stroke-width=".5" d="M0 4.233s2.117 5.292 4.233 0c2.117-5.291 4.234 0 4.234 0"/>
                            <g fill="none" stroke="#FFF" stroke-width=".198">
                                <path d="M0 3.175h8.467M0 7.408h8.467M0 5.292h8.467M0 1.058h8.467" opacity=".75"/>
                            </g>
                            </svg>
                    </button>
                </div>

                <button type="button" class="btn btn-default btn-block open-graph-configuration-dialog" 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>

            <a href="#log-field-values">
                <h4>Statistics</h4>
            </a>
            <table id="stats-table" class="table table-condensed">
                <caption>Min/max values from this log</caption>
                <thead>
                    <tr>
                        <th>&nbsp;</th>
                        <th>Min</th>
                        <th>Max</th>
                        <th>Mean</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 id="log-seek-bar" class="log-seek-bar">
        <canvas width="200" height="100"></canvas>
        <span id="seekbarToolbar" class="non-shift">
            <div id="seekbarType" class="seekBar-selection" data-toggle="tooltip" title="Vaue to plot">
            </div>
        </span>
    </div>
    <!-- Status Bar -->
    <div id="status-bar">
        <div>
            <span class="version">-</span>
        </div>
        <div>
            <span class="log-cells">-</span>
        </div>
        <div>
            <span class="looptime">-</span>
        </div>
        <div>
            <span class="lograte">-</span>
        </div>
        <div>
            <span class="actual-lograte">-</span>
        </div>
        <div>
            <span class="flight-mode">-</span>
        </div>
        <div>
            <span class="marker-offset">00:00.000</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">-</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" padding-left:5px;>
                    <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">Apply 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">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title-craft"></h5>
                    <h5 class="modal-title-revision"></h5>
                </div>
                <div class="modal-body">
                    <form name="header-information" id="pid-tuning">
                        <div class="cf_column half left">
                            <div class="spacer_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 id="pid_main_header" class="parameter cf">
                                            <thead>
                                                <tr>
                                                    <th>PID Values</th>
                                                </tr>
                                            </thead>
                                        </table>

                                        <table id="pid_main" class="pid_tuning">
                                            <tr class = "pid_labels">
                                                <th name="Blank">
                                                    <label>&nbsp;</label>
                                                </th>
                                                <th name="Proportional">
                                                    <label>P</label>
                                                </th>
                                                <th name="Integral">
                                                    <label>I</label>
                                                </th>
                                                <th id="derivativeColumn" name="Derivative">
                                                    <label>D</label>
                                                </th>
                                                <th id="dMaxColumn" name="D_Max">
                                                    <label>D Max</label>
                                                </th>
                                                <th name="Feedforward">
                                                    <label>FF</label>
                                                </th>
                                            </tr>
                                            <tbody id="pid_tbody"></tbody>
                                        </table>
                                        <script>
                                            const axes = ['Roll', 'Pitch', 'Yaw'];
                                            const pidTbody = document.getElementById('pid_tbody');

                                            for (const axis of axes) {
                                                const row = `<tr class="${axis.toLowerCase()}PID">
                                                                <td>${axis}</td>
                                                                <td><input type="text" name="p" step="1" min="0" max="255" /></td>
                                                                <td><input type="text" name="i" step="1" min="0" max="255" /></td>
                                                                <td><input type="text" name="d" step="1" min="0" max="255" /></td>
                                                                <td><input type="text" name="dMax" step="1" min="0" max="255" /></td>
                                                                <td><input type="text" name="f" step="1" min="0" max="255" /></td>
                                                            </tr>`;
                                                pidTbody.innerHTML += row;
                                            }
                                        </script>

                                        <table id="pid_baro_header" class="parameter cf">
                                        <thead>
                                                <tr>
                                                    <th>Baro</th>
                                                </tr>
                                            </thead>
                                        </table>

                                        <table id="pid_baro" class="pid_tuning">
                                            <tr class="altPID">
                                                <!-- 3 -->
                                                <td>ALT</td>
                                                <td>
                                                    <input type="text" name="p" step="0.1" min="0" max="25.5" />
                                                </td>
                                                <td>
                                                    <input type="text" name="i" step="0.001" min="0" max="0.255" />
                                                </td>
                                                <td>
                                                    <input type="text" name="d" step="1" min="0" max="255" />
                                                </td>
                                                <td></td>
                                            </tr>

                                            <tr class="velPID">
                                                <!-- 9 -->
                                                <td>VEL</td>
                                                <td>
                                                    <input type="text" name="p" step="0.1" min="0" max="25.5" />
                                                </td>
                                                <td>
                                                    <input type="text" name="i" step="0.001" min="0" max="0.255" />
                                                </td>
                                                <td>
                                                    <input type="text" name="d" step="1" min="0" max="255" />
                                                </td>
                                                <td></td>
                                            </tr>
                                        </table>

                                        <table id="pid_mag_header" class="parameter cf">
                                        <thead>
                                                <tr>
                                                    <th>Mag</th>
                                                </tr>
                                            </thead>
                                        </table>
                                        <table id="pid_mag" class="pid_tuning">
                                            <tr class="magPID">
                                                <!-- 8 -->
                                                <td>MAG</td>
                                                <td>
                                                    <input type="text" name="p" step="0.1" min="0" max="25.5" />
                                                </td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                        </table>

                                        <table id="pid_gps_header" class="parameter cf">
                                        <thead>
                                                <tr>
                                                    <th>GPS</th>
                                                </tr>
                                            </thead>
                                        </table>
                                        <table id="pid_gps" class="pid_tuning">
                                             <tr class="posPID">
                                                <!-- 4 -->
                                                <td>POS</td>
                                                <td>
                                                    <input type="text" name="p" step="0.01" min="0" max="2.55" />
                                                </td>
                                                <td>
                                                    <input type="text" name="i" step="0.01" min="0" max="2.55" />
                                                </td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr class="posrPID">
                                                <!-- 5 -->
                                                <td>POSR</td>
                                                <td>
                                                    <input type="text" name="p" step="0.1" min="0" max="25.5" />
                                                </td>
                                                <td>
                                                    <input type="text" name="i" step="0.01" min="0" max="2.55" />
                                                </td>
                                                <td>
                                                    <input type="text" name="d" step="0.001" min="0" max="0.255" />
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="navrPID">
                                                <!-- 6 -->
                                                <td>NAVR</td>
                                                <td>
                                                    <input type="text" name="p" step="0.1" min="0" max="25.5" />
                                                </td>
                                                <td>
                                                    <input type="text" name="i" step="0.01" min="0" max="2.55" />
                                                </td>
                                                <td>
                                                    <input type="text" name="d" step="0.001" min="0" max="0.255" />
                                                </td>
                                                <td></td>
                                            </tr>
                                        </table>

                                        <table class="parameter cf">
                                            <thead>
                                                <tr>
                                                    <th colspan="5">PID Sliders</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td name="simplified_pids_mode" class="bf-only">
                                                        <label>Status</label>                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="simplified_pi_gain" class="bf-only">
                                                        <label>PI gain</label>
                                                        <input type="text" step="1" min="0" max="200" />
                                                    </td>
                                                    <td name="simplified_i_gain" class="bf-only">
                                                        <label>I gain</label>
                                                        <input type="text" step="1" min="0" max="200" />
                                                    </td>
                                                    <td name="simplified_d_gain" class="bf-only">
                                                        <label>D gain</label>
                                                        <input type="text" step="1" min="0" max="200" />
                                                    </td>
                                                    <td name="simplified_d_max_gain" class="bf-only">
                                                        <label>D Max</label>
                                                        <input type="text" step="1" min="0" max="200" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td name = blankSimplPIDs>
                                                        <label>&nbsp;&nbsp;&nbsp;</label>
                                                    </td>
                                                    <td name="simplified_feedforward_gain" class="bf-only">
                                                        <label>FF gain</label>
                                                        <input type="text" step="1" min="0" max="200" />
                                                    </td>
                                                    <td name="simplified_pitch_d_gain" class="bf-only">
                                                        <label>Pitch:Roll</label>
                                                        <input type="text" step="1" min="0" max="200" />
                                                    </td>
                                                    <td name="simplified_pitch_pi_gain" class="bf-only">
                                                        <label>Pitch Gain</label>
                                                        <input type="text" step="1" min="0" max="200" />
                                                    </td>
                                                    <td name="simplified_master_multiplier" class="bf-only">
                                                        <label>Master Gain</label>
                                                        <input type="text" step="1" min="0" max="200" />
                                                    </td>
                                                </tr>
                                             </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <thead>
                                                <tr>
                                                    <th scope="row" colspan="6">Feedforward</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td name="feedforwardTransition" class="bf-only">
                                                        <label>Transition</label>
                                                        <input type="text" step="0.01" min="0" max="999" />
                                                    </td>
                                                    <td name="feedforwardAveraging" class="bf-only">
                                                        <label>Average</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="feedforwardSmoothing" class="bf-only">
                                                        <label>Smoothing</label>
                                                        <input type="text" step="0" min="0" max="100" />
                                                    </td>
                                                    <td name="feedforwardJitter" class="bf-only">
                                                        <label>Jitter</label>
                                                        <input type="text" step="0" min="0" max="100" />
                                                    </td>
                                                    <td name="feedforwardBoost" class="bf-only">
                                                        <label>Boost</label>
                                                        <input type="text" step="0" min="0" max="100" />
                                                    </td>
                                                    <td name="feedforwardMaxRate" class="bf-only">
                                                        <label>MaxRate</label>
                                                        <input type="text" step="0" min="0" max="100" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table id="d_max" class="parameter cf">
                                            <thead>
                                                <tr>
                                                    <th colspan="5">D Max</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td name="d_max_gain" class="bf-only">
                                                        <label>Gain</label>
                                                        <input type="text" step="1" min="0" max="100" />
                                                    </td>
                                                    <td name="d_max_advance" class="bf-only">
                                                        <label>Advance</label>
                                                        <input type="text" step="1" min="0" max="200" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <thead>
                                                <tr>
                                                    <th colspan="5">TPA and Airmode</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td name="tpa_rate">
                                                        <label>TPA amount</label>
                                                        <input type="text" step="1" min="0" max="100" />
                                                    </td>
                                                    <td name="tpa-breakpoint">
                                                        <label>TPA Breakpoint</label>
                                                        <input type="text" step="10" min="1000" max="2000" />
                                                    </td>
                                                    <td name="airmode_activate_throttle" class="bf-only">
                                                        <label>Airmode Activate</label>
                                                        <input type="text" step="10" min="1000" max="2000" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <thead>
                                                <tr>
                                                    <th scope="row" colspan="6">AntiGravity</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td name="antiGravityMode" class="bf-only">
                                                        <label>Mode</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="antiGravityGain" class="bf-only">
                                                        <label>Gain</label>
                                                        <input type="text" step="0.01" min="0" max="999" />
                                                    </td>
                                                    <td name="antiGravityThreshold" class="bf-only">
                                                        <label>AG Threshold</label>
                                                        <input type="text" step="0.01" min="0" max="999" />
                                                    </td>
                                                    <td name="anti_gravity_cutoff_hz" class="bf-only">
                                                        <label>Cutoff Hz</label>
                                                        <input type="text" step="2" min="0" max="50" />
                                                    </td>
                                                    <td name="anti_gravity_p_gain" class="bf-only">
                                                        <label>P Gain</label>
                                                        <input type="text" step="1" min="0" max="250" />
                                                    </td>
                                                    <td name="itermWindupPointPercent" class="bf-only">
                                                        <label>Windup Threshold</label>
                                                        <input type="text" step="1" min="0" max="999" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <thead>
                                                <tr>
                                                    <th scope="row" colspan="6">Iterm Relax</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td name="iterm_relax" class="bf-only">
                                                        <label>Mode</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="iterm_relax_type" class="bf-only">
                                                        <label>Type</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="iterm_relax_cutoff" class="bf-only">
                                                        <label>Cutoff</label>
                                                        <input type="text" step="0.01" min="0" max="999" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="gui_box grey debug">
                                    <div class="gui_box_titlebar">
                                        <div class="spacer_box_title">DEBUG MODE</div>
                                    </div>
                                    <div class="spacer_box">

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr>
                                                    <td name='debug_mode'>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="gui_box grey">
                                    <div class="gui_box_titlebar">
                                        <div class="spacer_box_title">RATES</div>
                                    </div>
                                    <div class="spacer_box">

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr>
                                                    <td name="rates_type" class="bf-only">
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="rcRate">
                                                        <label>Rate</label>
                                                    </td>
                                                    <td name="rcSuperRate">
                                                        <label>Super Rate</label>
                                                    </td>
                                                    <td name="rcExpo">
                                                        <label>Expo</label>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td name="rcRollRowName" class="no-inav">
                                                        <label>Roll</label>
                                                    </td>
                                                    <td name="rcRollRate" class="no-inav">
                                                        <input type="text" step="0.01" min="0" max="1.00" />
                                                    </td>
                                                    <td name="rates[0]">
                                                        <input type="text" step="0.01" min="0" max="1.00" />
                                                    </td>
                                                    <td name="rcRollExpo">
                                                        <input type="text" step="0.01" min="0" max="1.00" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td name="rcPitchRowName" class="no-inav">
                                                        <label>Pitch</label>
                                                    </td>
                                                    <td name="rcPitchRate" class="no-inav">
                                                        <input type="text" step="0.01" min="0" max="1.00" />
                                                    </td>
                                                    <td name="rates[1]">
                                                        <input type="text" step="0.01" min="0" max="1.00" />
                                                    </td>
                                                    <td name="rcPitchExpo">
                                                        <input type="text" step="0.01" min="0" max="1.00" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td name="rcYawRowName" class="no-inav">
                                                        <label>Yaw</label>
                                                    </td>
                                                    <td name="rcYawRate" class="no-inav">
                                                        <input type="text" step="0.01" min="0" max="1.00" />
                                                    </td>
                                                    <td name="rates[2]">
                                                        <input type="text" step="0.01" min="0" max="2.55" />
                                                    </td>
                                                    <td name="rcYawExpo">
                                                        <input type="text" step="0.01" min="0" max="1.00" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr>
                                                    <td name="superExpoFactor" class="bf-only">
                                                        <label>RP SuperExpo</label>
                                                        <input type="text" step="0.01" min="0" max="1.00" />
                                                    </td>
                                                    <td name="superExpoFactorYaw" class="bf-only">
                                                        <label>YAW SuperExpo</label>
                                                        <input type="text" step="0.01" min="0" max="1.00" />
                                                    </td>
                                                    <td name='superExpoYawMode' class="bf-only">
                                                        <label>YAW SE Mode</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <body>
                                                <tr>
                                                    <th colspan="3">Rate Limits</th>
                                                </tr>
                                                <tr>
                                                    <td name="rate_limits_roll">
                                                        <label>Roll</label>
                                                        <input type="text" step="1" min="0" />
                                                    </td>
                                                    <td name="rate_limits_pitch">
                                                        <label>Pitch</label>
                                                        <input type="text" step="1" min="0" />
                                                    </td>
                                                    <td name="rate_limits_yaw">
                                                        <label>Yaw</label>
                                                        <input type="text" step="1" min="0" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <body>
                                                <tr>
                                                    <th colspan="2">Deadband</th>
                                                </tr>
                                                <tr>
                                                    <td name="deadband">
                                                        <label>Pitch/Roll</label>
                                                        <input type="text" step="1" min="0" max="32" />
                                                    </td>
                                                    <td name="yaw_deadband">
                                                        <label>Yaw</label>
                                                        <input type="text" step="1" min="0" max="100" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>


                                <div class="gui_box grey debug">
                                    <div class="gui_box_titlebar">
                                        <div class="spacer_box_title">MISCELLANEOUS</div>
                                    </div>
                                    <div class="spacer_box">
                                        <table class="parameter cf">
                                            <tbody">
                                                <tr>
                                                    <td name='pidAtMinThrottle'>
                                                        <label>PID at MinThrottle</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    </td>
                                                    <td name="abs_control_gain">
                                                        <label>Absolute Control</label>
                                                        <input type="text" step="1" min="0" max="999" />
                                                    </td>

                                                    <td name='use_integrated_yaw'>
                                                        <label>Integrated Yaw</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table id="pid_accel_header" class="parameter cf">
                                            <thead>
                                                <tr>
                                                    <th>Angle / Horizon settings</th>
                                                </tr>
                                            </thead>
                                        </table>
                                        <table id="pid_accel" class="pid_tuning">
                                             <tr class = "pid_labels">
                                                <th name="Blank">
                                                    <label>&nbsp;</label>
                                                </th>
                                                <th name="angle_strength">
                                                    <label>Angle strength</label>
                                                </th>
                                                <th name="horizon_strength">
                                                    <label>Horizon strength</label>
                                                </th>
                                                <th name="horizon_transition">
                                                    <label>Horizon transition</label>
                                                </th>
                                            </tr>
                                            <tr class="levelPID">
                                                <!-- 7 -->
                                                <td>LEVEL</td>
                                                <td>
                                                    <input type="text" name="p" step="0.1" min="0" max="25.5" />
                                                </td>
                                                <td>
                                                    <input type="text" name="i" step="0.001" min="0" max="0.255" />
                                                </td>
                                                <td>
                                                    <input type="text" name="d" step="1" min="0" max="255" />
                                                </td>
                                            </tr>
                                        </table>

                                        <table class="parameter cf">
                                            <thead>
                                                <tr>
                                                    <th scope="row" colspan="4">Limits</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td name="pidSumLimit" class="bf-only">
                                                        <label>PIDSum</label>
                                                        <input type="text" step="0.01" min="0" max="999" />
                                                    </td>
                                                    <td name="pidSumLimitYaw" class="bf-only">
                                                        <label>PIDSum Yaw</label>
                                                        <input type="text" step="0.01" min="0" max="999" />
                                                    </td>
                                                    <td name="rateAccelLimit" class="bf-only">
                                                        <label>R/P Accel</label>
                                                        <input type="text" step="1" min="0" max="999" />
                                                    </td>
                                                    <td name="yawRateAccelLimit" class="bf-only">
                                                        <label>Yaw Accel</label>
                                                        <input type="text" step="1" min="0" max="999" />
                                                    </td>
                                                 </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <thead>
                                                <tr>
                                                    <th scope="row" colspan="6">Deprecated</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td name="ptermSRateWeight" class="bf-only">
                                                        <label>P-Term
                                                            <br>&nbsp;</label>
                                                        <input type="text" step="0.01" min="0" max="999" />
                                                    </td>
                                                    <td name="setpointRelaxRatio" class="bf-only">
                                                        <label>Setpoint Relax
                                                            <br>Ratio</label>
                                                        <input type="text" step="0.01" min="0" max="999" />
                                                    </td>
                                                    <td name="dtermSetpointWeight" class="bf-only">
                                                        <label>D Setpoint
                                                            <br>Weight</label>
                                                        <input type="text" step="0.01" min="0" max="999" />
                                                    </td>
                                                    <td name='dynamic_pid' class="bf-only">
                                                        <label>Dyn PID</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <thead class="BFPIDController">
                                                <tr>
                                                    <th colspan="2">P-Term</th>
                                                    <th class="bf-only" colspan="2">I-Term</th>
                                                </tr>
                                            </thead>
                                            <tbody class="BFPIDController">
                                                <tr>
                                                    <td name='dynamic_pterm' class="bf-only">
                                                        <label>Dynamic P</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="rollPitchItermResetRate" class="bf-only">
                                                        <label>Roll/Pitch Reset</label>
                                                        <input type="text" step="1" min="0" max="999" />
                                                    </td>
                                                    <td name="rollPitchItermIgnoreRate" class="bf-only">
                                                        <label>Roll/Pitch Ignore Rate</label>
                                                        <input type="text" step="1" min="0" max="999" />
                                                    </td>
                                                    <td name="yawItermResetRate" class="bf-only">
                                                        <label>Yaw Reset</label>
                                                        <input type="text" step="1" min="0" max="999" />
                                                    </td>
                                                    <td name="yawItermIgnoreRate" class="bf-only">
                                                        <label>Yaw Ignore Rate</label>
                                                        <input type="text" step="1" min="0" max="999" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td name="iterm_reset_offset" class="bf-only">
                                                        <label>Reset Offset</label>
                                                        <input type="text" step="1" min="0" max="999" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </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 class="parameter cf">
                                            <tbody>
                                                <tr>
                                                    <td name='serialrx_provider'>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <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>
                                    </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="loopTime">
                                                        <label>Looptime</label>
                                                        <input type="text" step="25" min="0" max="3000" />
                                                    </td>
                                                    <td name="gyro_sync_denom">
                                                        <label>Gyro Sync</label>
                                                        <input type="text" step="1" min="0" max="8" />
                                                    </td>
                                                    <td name="pid_process_denom">
                                                        <label>PID Process</label>
                                                        <input type="text" step="1" min="0" max="8" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <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>
                                            <tbody>
                                                <tr>
                                                    <td name='gyro_to_use'>
                                                        <label>Selected gyro</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name='gyro_enabled_bitmask'>
                                                        <label>Gyro enable mask</label>
                                                        <input type="text" step="1" min="1" max="255" />
                                                    </td>
                                                    <td name='gyro_hardware_lpf'>
                                                        <label>Hardware gyro LPF</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name='gyro_32khz_hardware_lpf'>
                                                        <label>Gyro 32KHz Hardware LPF</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                               </tr>
                                            </tbody>
                                        </table>

                                        <table class="bf-only" cellpadding="0" cellspacing="0">
                                            <tbody class="static-features noline">
                                                <tr>
                                                    <td name="gyro_cal_on_first_arm">
                                                        <label class="option">
                                                            <input class="ios-switch" type="checkbox" />
                                                            <div>
                                                                <div></div>
                                                            </div>
                                                        </label>
                                                    </td>
                                                    <td>
                                                        <label>GYRO_CAL_ON_FIRST_ARM</label>
                                                    </td>
                                                    <td>
                                                        <span>Calibrate Gyro on first arm</span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="gui_box grey disabled_fields">
                                    <div class="gui_box_titlebar">
                                        <div class="spacer_box_title">DISABLED FIELDS</div>
                                    </div>
                                    <div class="spacer_box">

                                        <table cellpadding="0" cellspacing="0">
                                            <thead class="fields_list disabled_fields noline">
                                                <tr>
                                                    <th class="checkbox"></th>
                                                    <th class="item"></th>
                                                    <th class="description"></th>
                                                </tr>
                                            </thead>
                                            <tbody class="fields_list disabled_fields noline">
                                                <!-- table generated here -->
                                            </tbody>
                                        </table>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="cf_column half right">
                            <div class="spacer_left">

                                <div class="gui_box grey filters">
                                    <div class="gui_box_titlebar">
                                        <div class="spacer_box_title">GYRO SOFTWARE FILTERS</div>
                                    </div>
                                    <div class="spacer_box">

                                        <table class="parameter cf">
                                            <thead>
                                                <tr>
                                                    <th scope="row" colspan="6">Lowpass filters - cutoffs in hz</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td name='gyro_soft_dyn_type'>
                                                        <label>Dynamic</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="gyro_soft_dyn_min_hz">
                                                        <label>Dyn Min</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name="gyro_soft_dyn_max_hz">
                                                        <label>Dyn Max</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name='gyro_soft_type'>
                                                        <label>Static 1</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="gyro_lowpass_hz">
                                                        <label>Cutoff</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name='gyro_soft2_type'>
                                                        <label>Static 2</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="gyro_lowpass2_hz">
                                                        <label>Cutoff</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody class="static-features noline">
                                                <tr>
                                                <thead>
                                                   <tr>
                                                    <th scope="row" colspan="6">Slider settings</th>
                                                   </tr>
                                               </thead>
                                                    <td name='simplified_gyro_filter'>
                                                        <label>Status</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="simplified_gyro_filter_multiplier">
                                                        <label>Slider Position</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <thead>
                                                <tr>
                                                    <th scope="row" colspan="6">Fixed notch filters - cutoff in hz</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td name='gyro_notch_hz'>
                                                        <label>Notch1 Center</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name="gyro_notch_cutoff">
                                                        <label>Notch1 Cutoff</label>
                                                        <input type="text" step="0.1" min="0" max="999.00" />
                                                    </td>
                                                    <td name='gyro_notch_hz_2'>
                                                        <label>Notch2 Center</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name="gyro_notch_cutoff_2">
                                                        <label>Notch2 Cutoff</label>
                                                        <input type="text" step="0.1" min="0" max="999.00" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr class="dyn_filter_required">
                                                <thead>
                                                   <tr>
                                                        <th scope="row" colspan="6">Dynamic notch filters</th>
                                                   </tr>
                                               </thead>
                                                    <td name='dynNotchCount'>
                                                        <label>Count/Width</label>
                                                        <input type="text" step="1" min="0" max="10" />
                                                    </td>
                                                    <td name="dynNotchQ">
                                                        <label>Q factor</label>
                                                        <input type="text" step="1" min="0" max="999.00" />
                                                    </td>
                                                    <td name="dynNotchMinHz">
                                                        <label>Min (Hz)</label>
                                                        <input type="text" step="1" min="0" max="999.00" />
                                                    </td>
                                                    <td name="dynNotchMaxHz">
                                                        <label>Max (Hz)</label>
                                                        <input type="text" step="1" min="0" max="999.00" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr class='dshot_bidir_required'>
                                                <thead>
                                                   <tr>
                                                    <th scope="row" colspan="6">RPM filters - frequency in Hz</th>
                                                   </tr>
                                               </thead>
                                                    <td name='gyro_rpm_notch_harmonics'>
                                                        <label>Harmonics</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name="gyro_rpm_notch_q">
                                                        <label>Q</label>
                                                        <input type="text" step="0.1" min="0" max="999.00" />
                                                    </td>
                                                    <td name='gyro_rpm_notch_min'>
                                                        <label>Min (Hz)</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name='rpm_filter_fade_range_hz'>
                                                        <label>Fade Range</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name='rpm_notch_lpf'>
                                                        <label>Lpf</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="gui_box grey filters">
                                    <div class="gui_box_titlebar">
                                        <div class="spacer_box_title">D-TERM SOFTWARE FILTERS</div>
                                    </div>
                                    <div class="spacer_box">

                                        <table class="parameter cf">
                                            <thead>
                                                <tr>
                                                    <th scope="row" colspan="6">Lowpass filters - cutoffs in hz</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td name='dterm_dyn_type'>
                                                        <label>Dynamic</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="dterm_lpf_dyn_min_hz">
                                                        <label>Dyn Min</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name="dterm_lpf_dyn_max_hz">
                                                        <label>Dyn Max</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name='dterm_filter_type'>
                                                        <label>Static 1</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="dterm_lpf_hz">
                                                        <label>Cutoff</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name='dterm_filter2_type'>
                                                        <label>Static 2</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="dterm_lpf2_hz">
                                                        <label>Cutoff</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name="dterm_average_count" class="bf-only">
                                                        <label>Average Count</label>
                                                        <input type="text" step="1" min="0" max="12" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody class="static-features noline">
                                                <tr>
                                                <thead>
                                                   <tr>
                                                    <th scope="row" colspan="6">Slider settings</th>
                                                   </tr>
                                               </thead>
                                                    <td name='simplified_dterm_filter'>
                                                        <label>Status</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="simplified_dterm_filter_multiplier">
                                                        <label>Position</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr>
                                                <thead>
                                                   <tr>
                                                    <th scope="row" colspan="6">Static notch filter</th>
                                                   </tr>
                                               </thead>
                                                    <td name="dterm_notch_hz">
                                                        <label>Center Hz</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name="dterm_notch_cutoff">
                                                        <label>Cutoff Hz</label>
                                                        <input type="text" step="0.1" min="0" max="999.00" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr class='dshot_bidir_required'>
                                                <thead>
                                                    <tr>
                                                        <th scope="row" colspan="6">D-Term RPM filters</th>
                                                    </tr>
                                                </thead>
                                                    <td name='dterm_rpm_notch_harmonics'>
                                                        <label>Harmonics</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name="dterm_rpm_notch_q">
                                                        <label>Q</label>
                                                        <input type="text" step="0.1" min="0" max="999.00" />
                                                    </td>
                                                    <td name='dterm_rpm_notch_min'>
                                                        <label>Min Hz</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="gui_box grey debug">
                                    <div class="gui_box_titlebar">
                                        <div class="spacer_box_title">OTHER FILTERS</div>
                                    </div>
                                    <div class="spacer_box">

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr>
                                                    <td name="acc_lpf_hz">
                                                        <label>Acc (Hz)</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                    <td name="yaw_lpf_hz" class="bf-only">
                                                        <label>Yaw (Hz)</label>
                                                        <input type="text" step="0.01" min="0" max="999.00" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>


                                <div class="gui_box grey rc_smoothing">
                                    <div class="gui_box_titlebar">
                                        <div class="spacer_box_title">RC SMOOTHING</div>
                                    </div>
                                    <div class="spacer_box">

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr>
                                                    <td name='rcSmoothingMode'>
                                                        <label>On/Off</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="rcSmoothingRxAverage" id="rcSmoothingRxAverage">
                                                        <label>RX Average (ms)</label>
                                                        <input type="text" step="0.1" min="0"/>
                                                    </td>
                                                    <td name="rcSmoothingRxSmoothed" id="rcSmoothingRxSmoothed">
                                                        <label>RX Smoothed (Hz)</label>
                                                        <input type="text" step="1" min="0"/>
                                                    </td>
                                                    <td name='rcSmoothingDebugAxis'>
                                                        <label>Debug Axis</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1" name='rcSmoothingAutoFactorSetpoint'>
                                                        <label>Setpoint auto fact</label>
                                                        <input type="text" step="1" min="0" max="250" />
                                                    </td>
                                                    <td name="rcSmoothingAutoFactorThrottle">
                                                        <label>Throttle auto fact</label>
                                                        <input type="text" step="1" min="0" max="250" />
                                                    </td>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody>
                                                </tr>
                                                    <tr>
                                                        <th scope="row" colspan="3">Manual Cutoffs</th>
                                                    </tr>
                                                <tr>
                                                    <td name="rcSmoothingSetpointHz">
                                                        <label>Setpoint Hz</label>
                                                        <input type="text" step="1" min="0" max="255" />
                                                    </td>
                                                    <td name="rcSmoothingFeedforwardHz" id="rcSmoothingFeedforwardHz">
                                                        <label>Feedforward Hz</label>
                                                        <input type="text" step="1" min="0" max="255" />
                                                    </td>
                                                    <td name="rcSmoothingThrottleHz">
                                                        <label>Throttle Hz</label>
                                                        <input type="text" step="1" min="0" max="255" />
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody>
                                                </tr>
                                                    <tr>
                                                        <th scope="row" colspan="3">Active Values</th>
                                                    </tr>
                                                <tr>
                                                    <td name='rcSmoothingActiveCutoffsSp'>
                                                        <label>Setpoint</label>
                                                        <input type="text" step="1" min="0"/>
                                                    </td>
                                                    <td name='rcSmoothingActiveCutoffsFf' id="rcSmoothingActiveCutoffsFf">
                                                        <label>Feedforward</label>
                                                        <input type="text" step="1" min="0"/>
                                                    </td>
                                                    <td name='rcSmoothingActiveCutoffsThr'>
                                                        <label>Throttle</label>
                                                        <input type="text" step="1" min="0"/>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="noline" cellpadding="0" cellspacing="0">
                                            <tbody class="static-features misc noline">
                                                <tr>
                                                    <td name="rc_smoothing">
                                                        <label class="option">
                                                            <input class="ios-switch orange" type="checkbox" />
                                                            <div>
                                                                <div></div>
                                                            </div>
                                                        </label>
                                                    </td>
                                                    <td>
                                                        <label>RC_SMOOTHING</label>
                                                    </td>
                                                    <td>
                                                        <span>RC Smoothing Enabled</span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="gui_box grey motors">
                                    <div class="gui_box_titlebar">
                                        <div class="spacer_box_title">MOTORS</div>
                                    </div>
                                    <div class="spacer_box">

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr>
                                                    <td name='fast_pwm_protocol'>
                                                        <label>Protocol</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="dshot_bidir">
                                                        <label>D-Shot Bidir</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="motor_output_limit">
                                                        <label>Output Limit</label>
                                                        <input type="text" step="1" min="0" max="32000" />
                                                    </td>
                                                    <td name='unsynced_fast_pwm'>
                                                        <label>Motors</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr>
                                                    <td name="digitalIdleOffset">
                                                        <label>D-Shot Offset %</label>
                                                        <input type="text" step="0.01" min="0" max="1" />
                                                    </td>
                                                    <td name="motor_idle">
                                                        <label>Motor idle %</label>
                                                        <input type="text" step="0.01" min="0" max="1" />
                                                    </td>
                                                    <td name="motorOutputLow">
                                                        <label>D-Shot Motor Low</label>
                                                        <input type="text" step="10" min="0" max="2047" />
                                                    </td>
                                                    <td name="motorOutputHigh">
                                                        <label>D-Shot Motor High</label>
                                                        <input type="text" step="10" min="0" max="2047" />
                                                    </td>
                                                    <td name="motor_pwm_rate">
                                                        <label>Motor PWM</label>
                                                        <input type="text" step="1" min="0" max="32000" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr>
                                                    <td name="motor_poles">
                                                        <label>Motor Poles</label>
                                                        <input type="text" step="1" min="4" max="255" />
                                                    </td>
                                                    <td name="">
                                                        <label></label>
                                                    </td>
                                                    <td name="">
                                                        <label></label>
                                                    </td>
                                                    <td name="">
                                                        <label></label>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr>
                                                <thead>
                                                   <tr>
                                                    <th scope="row" colspan="6">Dynamic Idle</th>
                                                   </tr>
                                               </thead>
                                                    <td name="dynamic_idle_min_rpm">
                                                        <label>Min RPM</label>
                                                        <input type="text" step="1" min="0" max="200" />
                                                    </td>
                                                    <td name='dyn_idle_p_gain'>
                                                        <label>P gain</label>
                                                        <input type="text" step="1" min="0" max="250" />
                                                    </td>
                                                    <td name='dyn_idle_i_gain'>
                                                        <label>I gain</label>
                                                        <input type="text" step="1" min="0" max="250" />
                                                    </td>
                                                    <td name="dyn_idle_d_gain">
                                                        <label>D gain</label>
                                                        <input type="text" step="1" min="0" max="250" />
                                                    </td>
                                                    <td name='dyn_idle_start_increase'>
                                                        <label>Start inc</label>
                                                        <input type="text" step="1" min="0" max="255" />
                                                    </td>
                                                    <td name='dyn_idle_max_increase'>
                                                        <label>Max inc</label>
                                                        <input type="text" step="1" min="0" max="255" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="gui_box grey voltagecurrent">
                                    <div class="gui_box_titlebar">
                                        <div class="spacer_box_title">VOLTAGE & CURRENT</div>
                                    </div>
                                    <div class="spacer_box">
                                        <table class="parameter cf">
                                            <tbody>
                                                <tr>
                                                    <td name="vbat_sag_compensation">
                                                        <label>Vbat Sag Comp</label>
                                                        <input type="text" step="1" min="0" max="150" />
                                                    </td>
                                                    <td name="vbatmaxcellvoltage">
                                                        <label>Max Cell Voltage</label>
                                                        <input type="text" step="0.01" min="0" max="1.00" />
                                                    </td>
                                                    <td name="vbatmincellvoltage">
                                                        <label>Min Cell Voltage</label>
                                                        <input type="text" step="0.01" min="0" max="1.00" />
                                                    </td>
                                                    <td name="vbatwarningcellvoltage">
                                                        <label>Warning Voltage</label>
                                                        <input type="text" step="0.01" min="0" max="2.55" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr>
                                                    <td name="currentMeterScale">
                                                        <label>Current Scale</label>
                                                        <input type="text" step="1" min="0" max="500" />
                                                    </td>
                                                    <td name="currentMeterOffset">
                                                        <label>Current Offset</label>
                                                        <input type="text" step="1" min="0" max="500" />
                                                    </td>
                                                    <td name="vbatscale">
                                                        <label>VBat Scale</label>
                                                        <input type="text" step="1" min="0" max="500" />
                                                    </td>
                                                    <td name="vbatref">
                                                        <label>VBat Ref</label>
                                                        <input type="text" step="1" min="0" max="500" />
                                                    </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>
                                                    <td>
                                                        <label>Vat PID compensation</label>
                                                    </td>
                                                    <td>
                                                        <span>Scale PIDs with voltage</span>
                                                    </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>
                                                <thead>
                                                   <tr>
                                                    <th scope="row" colspan="6">Limits and Boost</th>
                                                   </tr>
                                               </thead>
                                                    <td name='throttle_limit_type'>
                                                        <label>Limit Type</label>
                                                        <select>
                                                            <!-- list generated here -->
                                                        </select>
                                                    </td>
                                                    <td name="throttle_limit_percent">
                                                        <label>Percent</label>
                                                        <input type="text" step="0.01" min="0" max="1" />
                                                    </td>
                                                    <td name="throttle_boost">
                                                        <label>Throttle Boost</label>
                                                        <input type="text" step="10" min="1000" max="2000" />
                                                    </td>
                                                    <td name="throttle_boost_cutoff">
                                                        <label>Cutoff Hz</label>
                                                        <input type="text" step="10" min="1000" max="2000" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <table class="parameter cf">
                                            <tbody>
                                                <tr>
                                                <thead>
                                                   <tr>
                                                    <th scope="row" colspan="6">Curves and range</th>
                                                   </tr>
                                               </thead>
                                                    <td name="thrMid">
                                                        <label>Throttle Mid</label>
                                                        <input type="text" step="0.01" min="0" max="1" />
                                                    </td>
                                                    <td name="thrExpo">
                                                        <label>Throttle Expo</label>
                                                        <input type="text" step="0.01" min="0" max="1" />
                                                    </td>
                                                    <td name="minthrottle">
                                                        <label>Min Throttle</label>
                                                        <input type="text" step="10" min="1000" max="2000" />
                                                    </td>
                                                    <td name="maxthrottle">
                                                        <label>Max Throttle</label>
                                                        <input type="text" step="10" min="1000" max="2000" />
                                                    </td>
                                                </tr>
                                            </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 class="features other noline">
                                                <!-- table generated here -->
                                            </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>
                    </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">Close</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 class="gui_box grey topspacer">
                            <div class="gui_box_titlebar">
                                <div class="spacer_box_title">Analyser</div>
                            </div>
                            <div class="clear-both"></div>
                            <div class="spacer_box">
                                <ul>
                                    <li>
                                        <span class="keys">
                                            <div class="key">Shift</div>
                                        </span>
                                        <div class="description">Shows the frequency under the mouse</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>
                                            <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>
                                                <div class="key">S</div>
                                            </span>
                                            <div class="description">Save the current displayed graph configuration to workspace/favourite key 0 through
                                                9 (this includes all graph smoothing, expo and min/max values etc.). The Shift-S save the configuration to current workspace.</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>
                                        <li>
                                            <span class="keys">
                                                <div class="key">Shift</div>
                                                <div class="key">W</div>
                                            </span>
                                            <div class="description">Show the menu to load default workspace</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>
                                        <li>
                                            <span class="keys">
                                                <div class="key">Alt</div>
                                                <div class="key">S</div>
                                            </span>
                                            <div class="description">Save current graph to PNG file</div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="gui_box grey topspacer">
                                <div class="gui_box_titlebar">
                                    <div class="spacer_box_title">Quick field adjustments</div>
                                </div>
                                <div class="clear-both"></div>
                                <div class="spacer_box">
                                    <ul>
                                        <li>
                                            <span class="keys">
                                                <div class="key">Ctrl</div>
                                                <div class="normal">+</div>
                                                <img src="./images/glyphs/scrollwheel.svg" data-toggle="tooltip" title="Mouse Scroll Wheel" />
                                            </span>
                                            <div class="description">Adjust Smoothing of field in graph by hovering field in legend and scroll</div>
                                        </li>
                                        <li>
                                            <span class="keys">
                                                <div class="key">Shift</div>
                                                <div class="normal">+</div>
                                                <img src="./images/glyphs/scrollwheel.svg" data-toggle="tooltip" title="Mouse Scroll Wheel" />
                                            </span>
                                            <div class="description">Adjust Zoom of field in graph by hovering field in legend and scroll</div>
                                        </li>
                                        <li>
                                            <span class="keys">
                                                <div class="key">Alt</div>
                                                <div class="normal">+</div>
                                                <img src="./images/glyphs/scrollwheel.svg"  data-toggle="tooltip" title="Mouse Scroll Wheel" />
                                            </span>
                                            <div class="description">Adjust Expo of field in graph by hovering field in legend and scroll</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="23.976">23.976 fps</option>
                                    <option value="24">24 fps</option>
                                    <option value="25">25 fps</option>
                                    <option value="29.97">29.97 fps</option>
                                    <option value="30">30 fps</option>
                                    <option value="50">50 fps</option>
                                    <option value="59.94">59.94 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 href="https://github.com/betaflight/blackbox-tools/blob/master/Readme.md" target="_blank" rel="noopener noreferrer">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>
                            </div>
                            <div class="gui_box grey unit-settings">
                                <div class="gui_box_titlebar">
                                    <div class="spacer_box_title">Measurement System</div>
                                </div>
                                <div>
                                    <div class="speed-mode-group">
                                        <table>
                                            <tr>
                                                <td>
                                                    <label>Speed Units</label>
                                                    <input type="radio" name="speed-mode" value="1">m/s</input>
                                                    <br>
                                                    <input type="radio" name="speed-mode" value="2">kph</input>
                                                    <br>
                                                    <input type="radio" name="speed-mode" value="3">mph</input>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="altitude-mode-group">
                                        <table>
                                            <tr>
                                                <td>
                                                    <label>Altitude Units</label>
                                                    <input type="radio" name="altitude-mode" value="1">meters</input>
                                                    <br>
                                                    <input type="radio" name="altitude-mode" value="2">feet</input>
                                                </td>
                                            </tr>
                                        </table>
                                    </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>
                                        <tr>
                                            <td>
                                                <label>Legend</label>
                                            </td>
                                            <td class="position">
                                                <label>Top</label>
                                                <input name="analyser-legend-top" type="number" step="1" min="0"
                                                    max="100" />
                                                <p>%</p>
                                            </td>
                                            <td class="position">
                                                <label>Left</label>
                                                <input name="analyser-legend-left" type="number" step="1" min="0"
                                                    max="100" />
                                                <p>%</p>
                                            </td>
                                            <td class="position">
                                                <label>Width</label>
                                                <input name="analyser-legend-width" type="number" step="1" min="0"
                                                    max="100" />
                                                <p>%</p>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="gui_box grey top-spacer map-settings">
                                <div class="gui_box_titlebar">
                                    <div class="spacer_box_title">Map Settings</div>
                                </div>
                                <div class="spacer_box">
                                    <div>
                                        <label class="option">ACT
                                            <input class="map-trail-altitude-colored ios-switch" type="checkbox" />
                                            <div>
                                                <div></div>
                                            </div>
                                            <span>Use Altitude Colored Trail (slower at loading/changing logs)</span>
                                        </label>
                                    </div>
                                    <table>
                                        <tr>
                                            <td>
                                                <label>Position</label>
                                            </td>
                                            <td class="position">
                                                <label>Top</label>
                                                <input name="map-top" type="number" step="1" min="0" max="100" />
                                                <p>%</p>
                                            </td>
                                            <td class="position">
                                                <label>Left</label>
                                                <input name="map-left" type="number" step="1" min="0" max="100" />
                                                <p>%</p>
                                            </td>
                                            <td class="position">
                                                <label>Size</label>
                                                <input name="map-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 graph-style-settings">
                                <div class="gui_box_titlebar">
                                    <div class="spacer_box_title">Graph Style Settings</div>
                                </div>
                                <div class="spacer_box">
                                    <div>
                                        <label class="option">Gradient
                                            <input class="gradient ios-switch" type="checkbox" />
                                            <div>
                                                <div></div>
                                            </div>
                                            <span>Show the gradient background.</span>
                                        </label>
                                    </div>
                                    <div>
                                        <label class="option">TimeBar
                                            <input class="verticalBar ios-switch" type="checkbox" />
                                            <div>
                                                <div></div>
                                            </div>
                                            <span>Show the vertical timebar.</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/jquery-1.11.3.min.js"></script>
    <script src="/js/jquery-ui-1.11.4.min.js"></script>
    <script src="/js/jquery.ba-throttle-debounce.js"></script>
    <script src="/js/three.min.js"></script>
    <script src="/js/FileSaver.js"></script>
    <script src="/js/semver.js"></script>
    <script src="/js/webm-writer/ArrayBufferDataStream.js"></script>
    <script src="/js/webm-writer/BlobBuffer.js"></script>
    <script src="/js/webm-writer/WebMWriter.js"></script>
    <script type="module" src="src/main.js"></script>
    <dialog class="dialogUpdate">
        <h3>Notice</h4>
        <div class="content">
            <div class="dialogUpdate-content" style="margin-top: 10px;margin-bottom: 10px;"></div>
        </div>
        <div class="buttons">
            <a href="#" class="dialogUpdate-websitebtn regular-button">Go to Release Website</a>
            <a href="#" class="dialogUpdate-closebtn regular-button">Close</a>
        </div>
    </dialog>

    </body>

</html>