src/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css" />
    <script src="https://cdn.plot.ly/plotly-latest.js"></script>
</head>

<body>

    <button onclick="doIt()">Connect!</button>
    <button onclick="clearIt()">Clear the graphs!</button>
    <button onclick="disconnect()">Disconnect!</button>

    Sample rate:
    <select id="sampleRateSelect">
        <option value="80">80 Hz</option>
        <option value="40">40 Hz</option>
        <option value="20">20 Hz</option>
        <option value="10">10 Hz</option>
        <option value="5" selected>5 Hz</option>
        <option value="0">0 (OFF)</option>
    </select>

    <br />
    Magnetometer sample rate: <span id="sampleRateSpan">?</span>
    Accelerometer sample rate: <span id="acceleroSampleRateSpan">?</span>
    Battery level: <span id="battLevelSpan">?</span>
    Browser frame rate: <span id="frameRateSpan">?</span>

    <hr />

    <div id="magnetoDiv" style="width: 100%;"></div>
    <div id="acceleroDiv" style="width: 100%;"></div>
    <div id="battGraphDiv" style="width: 100%;"></div>

    <script src="receive.js"></script>
</body>

</html>