ESP32

<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Settings for DB for ESP32">
    <meta name="author" content="Wolfgang Christl">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DB for ESP32 Settings</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="skeleton.css">
    <link rel="stylesheet" href="toastify/toastify.css">

    <link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <meta name="theme-color" content="#ffffff">

    <script src="db_settings.js"></script>
    <script src="toastify/toastify.js"></script>
    <style>
        html {
            min-height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            background-repeat: no-repeat;
            background-attachment: fixed;
            color: white;
            background: rgb(0,49,102);
            background: linear-gradient(180deg, rgba(0,49,102,1) 0%, rgba(19,91,168,1) 100%);
        }

        form {
            margin-bottom: 0.5rem;
        }

        h2 {
            font-size: x-large;
            padding-top: 2rem;
            margin-bottom: 0.8rem;
        }

        button.button-primary {
            background-color: #FF7900;
            border-color: grey;
        }

        button.button-primary:hover {
            background-color: #003166;
            color: #FF7900;
            border-color: #FF7900;
        }

        button.button-primary:focus {
            background-color: #FF7900;
            border-color: #003166;
        }

        input, select {
            color: black;
        }

        .dot_green {
            height: 0.8rem;
            width: 0.8rem;
            background-color: #68b838;
            border-radius: 50%;
            display: inline-block;
        }

        .dot_red {
            height: 0.8rem;
            width: 0.8rem;
            background-color: #f63e3e;
            border-radius: 50%;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <div class="twelve columns">
        <img src="DroneBridgeLogo.png" alt="DB Logo">
    </div>
</div>
<div class="container">
    <form id="settings_form">
        <div>
            <h2>Statistics</h2>
            <div class="row">
                <div style="font-size: 1.3rem" id="web_conn_status" class="six columns">
                </div>
            </div>
            <div class="row">
                <div class="four columns">
                    <label for="read_bytes">UART received bytes</label>
                    <div id="read_bytes">-</div>
                </div>
                <div class="four columns">
                    <label for="tcp_connected">Connected TCP clients</label>
                    <div id="tcp_connected">-</div>
                </div>
                <div class="four columns">
                    <label for="udp_connected">Connected UDP clients</label>
                    <div id="udp_connected">-</div>
                </div>
            </div>
        </div>
        <div>
            <h2>Settings</h2>
            <div class="row">
                <div class="six columns">
                    <label for="wifi_ssid">Wifi SSID</label>
                    <input type="text" name="wifi_ssid" value="" id="wifi_ssid">
                </div>
                <div class="six columns">
                    <label for="wifi_pass">Wifi Password</label>
                    <input type="text" name="wifi_pass" value="" id="wifi_pass">
                </div>
            </div>
            <div class="row">
                <div class="twelve columns">
                    <label for="ap_channel">Wifi Channel</label>
                    <input type="text" name="ap_channel" value="" id="ap_channel">
                </div>
            </div>
            <div class="row">
                <div class="six columns">
                    <label for="tx_pin">UART TX Pin</label>
                    <input type="text" name="tx_pin" value="" id="tx_pin">
                </div>
                <div class="six columns">
                    <label for="rx_pin">UART RX Pin</label>
                    <input type="text" name="rx_pin" value="" id="rx_pin">
                </div>
            </div>
            <div class="row">
                <div class="six columns">
                    <label for="telem_proto">UART serial protocol</label>
                    <select id="telem_proto" name="telem_proto" form="settings_form">
                        <option value="1">MSP/LTM</option>
                        <option value="4">Transparent/MAVLink</option>
                    </select>
                </div>
                <div class="six columns">
                    <label for="baud">UART baud</label>
                    <select name="baud" id="baud" form="settings_form">
                        <option value="5000000">5000000</option>
                        <option value="1500000">1500000</option>
                        <option value="1000000">1000000</option>
                        <option value="500000">500000</option>
                        <option value="115200">115200</option>
                        <option value="57600">57600</option>
                        <option value="38400">38400</option>
                        <option value="19200">19200</option>
                        <option value="9600">9600</option>
                        <option value="4800">4800</option>
                        <option value="2400">2400</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="six columns">
                    <label for="msp_ltm_port">MSP & LTM to same port</label>
                    <select id="msp_ltm_port" name="msp_ltm_port" form="settings_form">
                        <option value="0">No - MSP: 1607 LTM: 1604</option>
                        <option value="1">Yes - all: 1607</option>
                    </select>
                </div>
                <div class="six columns">
                    <label for="ltm_pp">LTM frames per packet</label>
                    <select id="ltm_pp" name="ltm_pp" form="settings_form">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="4">4</option>
                        <option value="6">6</option>
                        <option value="10">10</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="twelve columns">
                    <label for="trans_pack_size">Transparent packet size</label>
                    <select id="trans_pack_size" name="trans_pack_size" form="settings_form">
                        <option value="16">16</option>
                        <option value="32">32</option>
                        <option value="64">64</option>
                        <option value="128">128</option>
                        <option value="256">256</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="six columns">
                    <label for="ap_ip">Gateway IP address</label>
                    <input type="text" name="ap_ip" value="" id="ap_ip">
                </div>
            </div>
        </div>
    </form>
    <div class="row">
        <div class="six columns">
            <button class="button-primary" onclick="save_settings()">Save Settings</button>
        </div>
        <div class="six columns">
            <button class="button-primary" onclick="trigger_reboot()">Reboot ESP32</button>
        </div>
    </div>
</div>
<div class="container">
    <div id="about" style="margin-top: 1rem" class="row">DroneBridge for ESP32 - waiting for response from the ESP32
    </div>
    <div style="margin-bottom: 2rem" class="row">&copy; Wolfgang Christl 2018 - Apache 2.0 License</div>
</div>
<script>
    // get settings once upon page load
    get_system_info()
    get_settings()
    // get stats every half a second
    setInterval(get_stats, 500)
    setInterval(update_conn_status, 500)
</script>
</body>
</html>