betaflight-configurator/tabs/receiver.html

<div class="tab-receiver">
    <div class="bars">
        <ul style="color: #00A8F0">
            <li class="name">Throttle</li>
            <li class="meter"><meter min="800" max="2200"></meter></li>
            <li class="value"></li>
        </ul>
        <div class="clear-both"></div>
        <ul style="color: #C0D800">
            <li class="name">Pitch</li>
            <li class="meter"><meter min="800" max="2200"></meter></li>
            <li class="value"></li>
        </ul>
        <div class="clear-both"></div>
        <ul style="color: #CB4B4B">
            <li class="name">Roll</li>
            <li class="meter"><meter min="800" max="2200"></meter></li>
            <li class="value"></li>
        </ul>
        <div class="clear-both"></div>
        <ul style="color: #4DA74D">
            <li class="name">Yaw</li>
            <li class="meter"><meter min="800" max="2200"></meter></li>
            <li class="value"></li>
        </ul>
        <div class="clear-both"></div>
        <ul style="color: #9440ED">
            <li class="name">AUX1</li>
            <li class="meter"><meter min="800" max="2200"></meter></li>
            <li class="value"></li>
        </ul>
        <div class="clear-both"></div>
        <ul style="color: #45147a">
            <li class="name">AUX2</li>
            <li class="meter"><meter min="800" max="2200"></meter></li>
            <li class="value"></li>
        </ul>
        <div class="clear-both"></div>
        <ul style="color: #cf7a26">
            <li class="name">AUX3</li>
            <li class="meter"><meter min="800" max="2200"></meter></li>
            <li class="value"></li>
        </ul>
        <div class="clear-both"></div>
        <ul style="color: #147a66">
            <li class="name">AUX4</li>
            <li class="meter"><meter min="800" max="2200"></meter></li>
            <li class="value"></li>
        </ul>
        <div class="clear-both"></div>
    </div>
    <div class="tunings">
        <table class="throttle">
            <tr>
                <th>Throttle MID</th>
                <th>Throttle EXPO</th>
            </tr>
            <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>
        </table>
        <table class="rate">
            <tr>
                <th>RC Rate</th>
                <th>RC Expo</th>
            </tr>
            <tr>
                <td><input type="number" name="rate" step="0.01" min="0" max="2.5" /></td>
                <td><input type="number" name="expo" step="0.01" min="0" max="1" /></td>
            </tr>
        </table>
        <a class="update" href="#">Save</a>
        <a class="refresh" href="#">Refresh</a>
    </div>
    <div class="curves">
        <div class="throttle_curve">
            <canvas width="220" height="58"></canvas>
        </div>
        <div class="pitch_roll_curve">
            <canvas width="220" height="58"></canvas>
        </div>
    </div>
    <div class="clear-both"></div>
    <select title="Plot refresh rate" name="rx_refresh_rate">
        <option value="10">10 ms</option>
        <option value="20">20 ms</option>
        <option value="30">30 ms</option>
        <option value="40">40 ms</option>
        <option value="50" selected="selected">50 ms</option>
        <option value="100">100 ms</option>
        <option value="250">250 ms</option>
        <option value="500">500 ms</option>
        <option value="1000">1000 ms</option>
    </select>
    <div class="clear-both"></div>
    <svg id="RX_plot">
        <g class="grid x" transform="translate(40, 180)"></g>
        <g class="grid y" transform="translate(40, 10)"></g>
        <g class="data" transform="translate(41, 1)"></g>
        <g class="axis x" transform="translate(40, 180)"></g>
        <g class="axis y" transform="translate(40, 10)"></g>
    </svg>
</div>