diff options
| author | Jakob Stendahl <jakobste@uio.no> | 2021-01-11 19:49:01 +0100 |
|---|---|---|
| committer | Jakob Stendahl <jakobste@uio.no> | 2021-01-11 19:49:01 +0100 |
| commit | cee3d11da77a1754768fcbd58cca2b61874bcef8 (patch) | |
| tree | b1f98d5293b0db106cd1005e455a3d64501fadd2 /index.html | |
| parent | c852786742f7d9e9fc0ca1109c0fddba4f3e80df (diff) | |
| download | hoverbit-ble-cee3d11da77a1754768fcbd58cca2b61874bcef8.tar.gz hoverbit-ble-cee3d11da77a1754768fcbd58cca2b61874bcef8.zip | |
:sparkles: Make first version of interface
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..9bb2147 --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <title>HOVER:BIT Controller</title> + <link rel="stylesheet" type="text/css" href="styles.css"> + <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> + + <script type="text/javascript" src="microbit.umd.js"></script> + </head> + <body> + + <div class="info"> + <h1>HOVER:BIT Controller</h1> + <div class="info-device"> + <span class="connection"> + <i class="material-icons">bluetooth</i> + <span class="connection-status">Disconnected</span> + </span> + <span class="battery"> + <i class="material-icons">battery_std</i> + <span class="connection-status">0%</span> + </span> + <span class="arm"> + <i class="material-icons">warning</i> + <span class="arm-status">Disarmed</span> + </span> + </div> + </div> + + <div class="options"> + <button id="btn_connect">Connect</button> + <button style="display:none;" id="btn_disconnect">Disconnect</button> + <button style="display:none;" id="btn_arm">Arm</button> + <button style="display:none;" id="btn_disarm">Disarm</button> + <button style="display:none;" id="btn_sticky">Sticky controls</button> + </div> + + <div class="throttle"> + <div class="throttle-thumb"></div> + </div> + + <div class="rudder"> + <div class="rudder-thumb"></div> + </div> + + <div class="log"> + <pre id="logEl"></pre> + </div> + + <script type="text/javascript" src="script.js"></script> + </body> +</html> |