<!DOCTYPE html>
<html lang='en'>
<head>
<title>Rover Command Center</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<style>
* {
      box-sizing: border-box;
    }

.section_container {
  float: left;
  width: 50%;
  padding: 10px;
}
.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 0px;
  margin-bottom: 0px;
}

:is(h1, h2, h3, h4, h5, h6, label, strong, meter) {
    font-family: Arial, Helvetica, sans-serif;
}
.movement_control {
    text-align: center;
}

.sensor_data {
    text-align: center;
}

meter{
    width: 100%;
    height: 40px;
    transform: translateY(-8px);
}

meter::after {
 content : attr(value) attr(title);
 top:-28px;
 left:0px;
 position:relative;
}

.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: rgb(255, 255, 255);
  background-color: #161616;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px rgb(161, 161, 161);
}

.button:hover {background-color: #585858}

.button:active {
  background-color: #107C10;
  box-shadow: 0 5px rgb(161, 161, 161);
  transform: translateY(4px);
}

.pressed {
  background-color: #107C10;
  box-shadow: 0 5px rgb(161, 161, 161);
  transform: translateY(4px);
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

</style>
<script>

var connection = new WebSocket('ws://'+location.hostname+':81/');

var MVM_F_status = 0;
var MVM_L_status = 0;
var MVM_R_status = 0;
var MVM_B_status = 0;

var BTRY_VOLT = 0;
var ODO_DIST = 0;

function round(value, precision) {
    var multiplier = Math.pow(10, precision || 0);
    return Math.round(value * multiplier) / multiplier;
}

connection.onmessage = function(event){
    var raw_data = event.data;
    console.log(raw_data);
    var data = JSON.parse(raw_data);
    digiBTRY_VOLT = data.BTRY_VOLT;
    BTRY_VOLT = round((digiBTRY_VOLT*(4.8e-4)+4), 1)
    ODO_DIST = data.ODO_DIST;
    document.getElementById("btry_meter").value = BTRY_VOLT;
    document.getElementById("Odometer").innerHTML = ODO_DIST;
}

function send_data()
{
  var raw_data = '{"MVM_F":'+MVM_F_status+',"MVM_L":'+MVM_L_status+',"MVM_R":'+MVM_R_status+',"MVM_B":'+MVM_B_status+'}';
  connection.send(raw_data);
  console.log(raw_data);
}

function left_pressed(){
    MVM_L_status = 1;
    send_data();
}
function left_unpressed(){
    MVM_L_status = 0;
    send_data();
}
function up_pressed(){
    MVM_F_status = 1;
    send_data();
}
function up_unpressed(){
    MVM_F_status = 0;
    send_data();
}
function right_pressed(){
    MVM_R_status = 1;
    send_data();
}
function right_unpressed(){
    MVM_R_status = 0;
    send_data();
}
function down_pressed(){
    MVM_B_status = 1;
    send_data();
}
function down_unpressed(){
    MVM_B_status = 0;
    send_data();
}

var timer = null;

function up_mouseDown() {
  timer = setInterval(up_pressed, 100);
}
function up_mouseUp() {
    clearInterval(timer);
    up_unpressed();
}

function down_mouseDown() {
  timer = setInterval(down_pressed, 100);
}
function down_mouseUp() {
    clearInterval(timer);
    down_unpressed();
}

function right_mouseDown() {
  timer = setInterval(right_pressed, 100);
}
function right_mouseUp() {
    clearInterval(timer);
    right_unpressed();
}

function left_mouseDown() {
  timer = setInterval(left_pressed, 100);
}
function left_mouseUp() {
    clearInterval(timer);
    left_unpressed();
}


document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            document.getElementById("left_arrow").className = "button pressed";
            left_pressed();
            break;
        case 38:
            document.getElementById("up_arrow").className = "button pressed";
            up_pressed();
            break;
        case 39:
            document.getElementById("right_arrow").className = "button pressed";
            right_pressed();
            break;
        case 40:
            document.getElementById("down_arrow").className = "button pressed";
            down_pressed();
            break;
    }
};
document.onkeyup = function(e) {
    switch (e.keyCode) {
        case 37:
            document.getElementById("left_arrow").className = "button";
            left_unpressed();
            break;
        case 38:
            document.getElementById("up_arrow").className = "button";
            up_unpressed();
            break;
        case 39:
            document.getElementById("right_arrow").className = "button";
            right_unpressed();
            break;
        case 40:
            document.getElementById("down_arrow").className = "button";
            down_unpressed();
            break;
    }
};

</script>
</head>
<body>

<h1 style="text-align:center;">ROVER COMMAND CENTER</h1>

<div class="clearfix">

    <div class="section_container">
    <div class ="movement_control">
        <h2>Movement Control</h2>
        <div style="transform: translateY(0px);">
            <button id="up_arrow" onmousedown="up_mouseDown()" onmouseup="up_mouseUp()" class="button" ><span>&#8679;</span></button>
        </div>
        <div style="transform: translateY(13px);">
            <button id="left_arrow" onmousedown="left_mouseDown()" onmouseup="left_mouseUp()" class="button"><span>&#8678;</span></button>
            <button id="down_arrow" onmousedown="down_mouseDown()" onmouseup="down_mouseUp()" class="button"><span>&#8681;</span></button>
            <button id="right_arrow" onmousedown="right_mouseDown()" onmouseup="right_mouseUp()" class="button"><span>&#8680;</span></button>
        </div>
        
    </div>
    </div>

    <div class="section_container">
        <div id="bleh" class="sensor_data">
            <h2>Sensor Data</h2>
            <ul>

                <li><div class="section_container">
                    <label>Battery Voltage</label>
                </div>
                <div class="section_container">
                    <meter id="btry_meter" min="4.0" max="6.0" low ="4.5" optimum="5.0" high="4.8" value="5.8" title="V"></meter>
                </div>
                </li>

                
                <li><div class="section_container">
                    <label>Odometer</label>
                </div>
                <div class="section_container">
                    <strong id="Odometer">28</strong><strong>mm</strong>
                </div>
                </li>

            </ul>        
        </div>
        
    </div>

</div>

</body>
</html>