betaflight-configurator/tabs/pid_tuning.html

<div class="tab-pid_tuning toolbar_fixed_bottom">
    <div class="content_wrapper">
        <div class="tab_title" i18n="tabPidTuning"></div>
        <div class="cf_doc_version_bt">
            <a id="button-documentation" href="https://github.com/betaflight/betaflight/releases" target="_blank"></a>
        </div>
        <div class="note" style="margin-bottom: 25px;">
            <div class="note_spacer">
                <p i18n="tuningHelp"></p>
            </div>
        </div>
        <div class="cf_column twothird">
            <div class="controller single-field">
                <div class="head" i18n="pidTuningControllerHead"></div>
                <div class="bottomarea">
                    <select name="controller">
                        <!-- list generated here -->
                    </select>
                </div>
            </div>
            <div class="delta single-field">
                <div class="helpicon cf_tip" i18n_title="PIDTip" style="margin-top: 5px;"></div>
                <div class="head">Derivative Method</div>
                <div class="bottomarea">
                    <select name="delta">
                        <option value="0">Error</option>
                        <option value="1">Measurement</option>
                    </select>
                </div>
            </div>
            <div class="cf_column right">
                <div class="default_btn show">
                    <a href="#" id="showAllPids">Show all PIDs</a>
                </div>
                <div class="default_btn resetbt">
                    <a href="#" id="resetPIDs">Reset PID Controller</a>
                </div>
            </div>
        </div>
        <form name="pid-tuning" id="pid-tuning">
            <div class="clear-both"></div>
            <div class="cf_column twothird">
                <div class="gui_box grey">
                    <table class="pid_titlebar">
                        <tr>
                            <th class="name" i18n="pidTuningName"></th>
                            <th class="proportional" i18n="pidTuningProportional"></th>
                            <th class="integral" i18n="pidTuningIntegral"></th>
                            <th class="derivative" i18n="pidTuningDerivative"></th>
                            <th class="rc_rate" i18n="pidTuningRcRate"></th>
                            <th class="rate" i18n="pidTuningRate"></th>
                            <th class="rc_expo" i18n="pidTuningRcExpo"></th>
                        </tr>
                    </table>
                    <table id="pid_main" class="pid_tuning">
                        <tr>
                            <th colspan="8">
                                <div class="pid_mode" i18n="pidTuningBasic"></div>
                            </th>
                        </tr>
                        <tr class="ROLL">
                            <!-- 0 -->
                            <td></td>
                            <td><input type="number" name="p" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="i" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="d" step="1" min="0" max="255" /></td>
                            <td rowspan="2" style="background-color:white;">
                                <input type="number" name="rc_rate" step="0.01" min="0" max="2.5" />
                                <div class="bracket"></div>
                            </td>
                            <td class="roll_rate"><input type="number" name="roll_rate" step="0.01" min="0" max="1.00" /></td>
                            <td class="roll_pitch_rate" rowspan="2"><input type="number" name="roll_pitch_rate" step="0.01" min="0" max="1.00" /></td>
                            <td rowspan="2" style="background-color:white;">
                                <input type="number" name="rc_expo" step="0.01" min="0" max="1" />
                                <div class="bracket"></div>
                            </td>
                        </tr>
                        <tr class="PITCH">
                            <!-- 1 -->
                            <td></td>
                            <td><input type="number" name="p" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="i" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="d" step="1" min="0" max="255" /></td>
                            <td class="pitch_rate"><input type="number" name="pitch_rate" step="0.01" min="0" max="1.00" /></td>
                        </tr>
                        <tr class="YAW">
                            <!-- 2 -->
                            <td></td>
                            <td><input type="number" name="p" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="i" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="d" step="1" min="0" max="255" /></td>
                            <td rowspan="1"><input type="number" name="rc_rate_yaw" step="0.01" min="0" max="2.5" /></td>
                            <td><input type="number" name="yaw_rate" step="0.01" min="0" max="2.55" /></td>
                            <td><input type="number" name="rc_yaw_expo" step="0.01" min="0" max="1" /></td>
                        </tr>
                    </table>
                </div>
                <div id="pid_optional" class="gui_box grey topspacer pid_tuning">
                    <table class="pid_titlebar">
                        <tr>
                            <th class="name" i18n="pidTuningName"></th>
                            <th class="proportional" i18n="pidTuningProportional"></th>
                            <th class="integral" i18n="pidTuningIntegral"></th>
                            <th class="derivative" i18n="pidTuningDerivative"></th>
                        </tr>
                    </table>
                    <table id="pid_baro" class="pid_tuning">
                        <tr>
                            <th colspan="4">
                                <div class="pid_mode" i18n="pidTuningAltitude"></div>
                            </th>
                        </tr>
                        <tr class="ALT">
                            <!-- 3 -->
                            <td></td>
                            <td><input type="number" name="p" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="i" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="d" step="1" min="0" max="255" /></td>
                        </tr>
                        <tr class="Vario">
                            <!-- 9 -->
                            <td>VEL</td>
                            <td><input type="number" name="p" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="i" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="d" step="1" min="0" max="255" /></td>
                        </tr>
                    </table>
                    <table id="pid_mag" class="pid_tuning">
                        <tr>
                            <th colspan="4">
                                <div class="pid_mode" i18n="pidTuningMag"></div>
                            </th>
                        </tr>
                        <tr class="MAG">
                            <!-- 8 -->
                            <td></td>
                            <td><input type="number" name="p" step="1" min="0" max="255" /></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                    <table id="pid_gps" class="pid_tuning">
                        <tr>
                            <th colspan="4">
                                <div class="pid_mode" i18n="pidTuningGps"></div>
                            </th>
                        </tr>
                        <tr class="Pos">
                            <!-- 4 -->
                            <td></td>
                            <td><input type="number" name="p" step="1" min="0" max="255" /></td>
                            <!-- <td><input type="number" name="i" step="1" min="0" max="255" /></td>  -->
                            <td></td>
                            <td></td>
                        </tr>
                        <tr class="PosR">
                            <!-- 5 -->
                            <td></td>
                            <td><input type="number" name="p" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="i" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="d" step="1" min="0" max="255" /></td>
                        </tr>
                        <tr class="NavR">
                            <!-- 6 -->
                            <td></td>
                            <td><input type="number" name="p" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="i" step="1" min="0" max="255" /></td>
                            <td><input type="number" name="d" step="1" min="0" max="255" /></td>
                        </tr>
                    </table>
                </div>
                <div id="pid_accel" class="gui_box grey topspacer pid_tuning">
                    <table class="pid_titlebar">
                        <tr>
                            <th class="third" i18n="pidTuningName"></th>
                            <th class="third" i18n="pidTuningStrength"></th>
                            <th class="third" i18n="pidTuningTransition"></th>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <th colspan="3">
                                <div class="pid_mode">
				    <div i18n="pidTuningLevel" style="float:left;"></div>
                                    <div class="helpicon cf_tip" i18n_title="pidTuningLevelHelp"></div>
				</div>
                            </th>
                        </tr>
                        <tr class="HORIZON">
                            <!-- 7 -->
                            <td class="third" i18n="pidTuningHorizon"></td>
                            <td class="third"><input type="number" name="p" step="1" min="0" max="255" /></td>
                            <td class="third"><input type="number" name="i" step="1" min="0" max="255" /></td>
                        </tr>
                        <tr class="ANGLE">
                            <!-- 7 -->
                            <td class="third" i18n="pidTuningAngle"></td>
                            <td class="third"><input type="number" name="d" step="1" min="0" max="255" /></td>
			    <td></td>
                        </tr>
                    </table>
                </div>
                <div id="pid_filter" class="gui_box grey topspacer pid_tuning">
                    <table class="pid_titlebar">
                        <tr>
                            <th class="third" i18n="pidTuningGyro"></th>
                            <th class="third" i18n="pidTuningDTerm"></th>
                            <th class="third" i18n="pidTuningYaw"></th>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <th colspan="3">
                                <div class="pid_mode" i18n="pidTuningLfpFilters"> </div>
                            </th>
                        </tr>
                        <tr>
                            <td class="third"><input type="number" name="gyro" step="1" min="0" max="255" /></td>
                            <td class="third"><input type="number" name="dterm" step="1" min="0" max="500" /></td>
                            <td class="third"><input type="number" name="yaw" step="1" min="0" max="500" /></td>
                        </tr>
                    </table>
                </div>
                <div class="cf_column half topspacer">
                    <div>
                        <table class="rc_curve cf">
                            <thead>
                                <tr>
                                    <th i18n="pidTuningRcCurve"></th>
                                </tr>
                            </thead>
                            </tbody>
                            <tr>
                                <td>
                                    <div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
                                        <div class="pitch_roll_curve">
                                            <canvas height="120px" style="width: 100%; height: 100%"></canvas>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="clear-both"></div>
                    </div>
                    <div class="topspacer">
                        <table class="rc_yaw_curve cf">
                            <thead>
                                <tr>
                                    <th i18n="pidTuningRcYawCurve"></th>
                                </tr>
                            </thead>
                            </tbody>
                            <tr>
                                <td>
                                    <div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
                                        <div class="yaw_curve">
                                            <canvas height="120px" style="width: 100%; height: 100%"></canvas>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="clear-both"></div>
                    </div>
                </div>
                <div class="cf_column half topspacer">
                    <div class="spacer_left">
                        <table class="tpa cf">
                            <thead>
                                <tr>
                                    <th i18n="pidTuningRatesPreview" style="font-weight: bold;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="rates_preview_cell">
                                        <div class="rates_preview">
                                            <canvas id="canvas"></canvas>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="cf_column third_right">
                <div class="spacer_left throttle">
                    <table class="cf">
                        <thead>
                            <tr>
                                <th colspan=2 i18n="throttle"></th>
                            </tr>
                        </thead>
                        </tbody>
                        <tr>
                            <td colspan=2>
                                <div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
                                    <div class="throttle_curve">
                                        <canvas height="120px" style="width: 100%; height: 100%"></canvas>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="spacer_left topspacer throttle">
                    <table class="tpa cf">
                        <thead>
                            <tr>
                                <th i18n="receiverThrottleMid"></th>
                                <th i18n="receiverThrottleExpo"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="number" name="mid" step="0.01" min="0" max="1" /></td>
                                <td><input type="number" name="expo" step="0.01" min="0" max="1" /></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="spacer_left topspacer">
                    <table class="tpa cf">
                        <thead>
                            <tr>
                                <th i18n="pidTuningTPA"></th>
                                <th class="tpa-breakpoint" i18n="pidTuningTPABreakPoint"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="leftzero"><input type="number" name="tpa" step="0.01" min="0"
                                    max="1.00" /></td>
                                <td class="tpa-breakpoint"><input type="number" name="tpa-breakpoint" step="10" min="1000" max="2000" /></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </form>
        <div class="clear-both"></div>
    </div>
    <div class="content_toolbar">
        <div class="btn save_btn">
            <a class="update" href="#" i18n="pidTuningButtonSave"></a>
        </div>
        <div class="btn refresh_btn">
            <a class="refresh" href="#" i18n="pidTuningButtonRefresh"></a>
        </div>
    </div>
</div>