index.html

<html>

<head>
    <title>Drone GCS</title>
    <link rel="icon" href="/images/favicon.png">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"></link>
    <link rel="stylesheet" type="text/css" href="/css/custom.css"></link>
    <script type="text/javascript" src="/js/jquery.min.js"></script>   
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>  
    <script type="text/javascript" src="/js/socket.io.js"></script>
    <script type="text/javascript" src="/js/leap-0.6.4.min.js"></script>
    <script type="text/javascript" src="/js/client.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type='text/javascript'>
        var takeoff = false;
        $(document).on('keydown', function(e){
            var pressedKey = e.key;
            if (pressedKey == 't'){
                console.log('Passed key to takeoff.');
                if (takeoff == false){
                    $('#takeoff').click();
                    takeoff = true;
                } else {
                    $('#land').click();
                    takeoff = false;
                }
            } else if(pressedKey == 'w') {
                console.log('Passed key to go up.');
                $('#up').click();
            } else if(pressedKey == 's') {
                console.log('Passed key to go down.');
                $('#down').click();
            } else if(pressedKey == 'a') {
                console.log('Passed key to go counterclockwise.');
                $('#counterClockwise').click();
            } else if(pressedKey == 'd') {
                console.log('Passed key to go clockwise.');
                $('#clockwise').click();
            } else if(pressedKey == 'i') {
                console.log('Passed key to go forward.');
                $('#front').click();
            } else if(pressedKey == 'k') {
                console.log('Passed key to go backward.');
                $('#back').click();
            } else if(pressedKey == 'j') {
                console.log('Passed key to go left.');
                $('#left').click();
            } else if(pressedKey == 'l') {
                console.log('Passed key to go right.');
                $('#right').click();
            } else if (pressedKey == 'f') {
                console.log('Passed key for facedetect.');
                $('#facedetect').click();
            } else {
                console.log('Passed key to hover.');
                $('#hover').click();
            }
        });
    </script>
</head>

<body>
    <nav class="navbar navbar-default custom-navbar">
        <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" style="font-size:30px;color:white" href="#">Drone GCS</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li>
                    <div class="col-md-12" style="margin-top:23px">
                        <button type="button" class="btn btn-default" aria-label="Left Align" id="calibrate" style="padding:8px">
                            <span class="glyphicon glyphicon-screenshot" aria-hidden="true"></span>
                        </button>
                    </div>
                </li>

                <li>
                    <div class="col-md-12" style="margin-top:28px;display:inline;color:white;text-align:center;">
                        <p>Altitude <div id="altitude-value">0</div></p>
                    </div>
                </li>
                <li>
                    <div class="col-md-12" style="margin-top:28px;display:inline;color:white;text-align:center;">
                        <p>Battery <div id="battery-value">0%</div></p>
                    </div>
                </li>

                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" style="background-color:#1d1d1d; color:white" data-toggle="dropdown">Flight Modes<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a id="leap" style="background-color:#1d1d1d; color:white" onmouseover="document.getElementById('leap').style.backgroundColor='gray';" onmouseout="document.getElementById('leap').style.backgroundColor='#1d1d1d';" href="#">Leap Mode</a></li>
                    <li><a id="targetTrack" style="background-color:#1d1d1d; color:white" onmouseover="document.getElementById('targetTrack').style.backgroundColor='gray';" onmouseout="document.getElementById('targetTrack').style.backgroundColor='#1d1d1d';" href="#">Target Track Mode</a></li>
                    <li><a id="facedetect" style="background-color:#1d1d1d; color:white" onmouseover="document.getElementById('facedetect').style.backgroundColor='gray';" onmouseout="document.getElementById('facedetect').style.backgroundColor='#1d1d1d';" href="#">Face Track Mode</a></li>
                  </ul>
                </li>
            </ul>

            </div>
        </div>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">Drone 1 Live Feed</div>
                    <canvas width="640" height="360" style="background-color: rgb(51, 51, 51);" id="placeholder">
                    </canvas>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">Drone 2 Live Feed</div>
                    <canvas width="640" height="360" style="background-color: rgb(51, 51, 51);" id="placeholder2">
                    </canvas>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top:50px">
            <div class="col-md-2">
                <button type="button" class="btn btn-primary btn-lg" aria-label="Left Align" style="margin:5px; margin-top:0px" id="up">
                    <span class="text-center" aria-hidden="true"><strong>U</strong></span>
                </button>
                <div>
                    <button type="button" class="btn btn-primary btn-lg" aria-label="Left Align" style="margin:5px" id="down">
                        <span class="text-center" aria-hidden="true"><strong>D</strong></span>
                    </button>
                </div>
            </div>
            <div class="col-md-2"></div>
            <div class="col-md-4">
                <div class="row">
                    <div class="text-center" style="margin-top:30px;display:inline">
                        <button type="button" class="btn btn-primary" id="takeoff">&nbsp;&nbsp;Take Off&nbsp;&nbsp;</button>
                    </div>
                    <div class="text-center" style="margin-top:30px;display:inline">
                        <button type="button" class="btn btn-warning" id="land">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Land&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                    </div>
                    <div class="text-center" style="margin-top:30px;display:inline">
                        <button type="button" class="btn btn-danger" id="emergency">Emergency</button>
                    </div>
                </div>
                <div class="row" style="margin-top:5px">
                    <div class="text-center" style="display:inline">
                        <button type="button" class="btn btn-success" id="flipLeft">F-L</button>
                    </div>
                    <div class="text-center" style="display:inline">
                        <button type="button" class="btn btn-success" id="flipAhead">F-U</button>
                    </div>
                    <div class="text-center" style="display:inline">
                        <button type="button" class="btn btn-success" id="flipBehind">F-D</button>
                    </div>
                    <div class="text-center" style="display:inline">
                        <button type="button" class="btn btn-success" id="flipRight">F-R</button>
                    </div>
                    <div class="text-center" style="display:inline">
                        <button type="button" class="btn btn-info" style="padding-top:9px;padding-bottom:9px" id="clockwise">
                            <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
                        </button>
                    </div>
                    <div class="text-center" style="display:inline">
                        <button type="button" class="btn btn-info" style="padding-top:9px;padding-bottom:9px" id="counterClockwise">
                            <span class="glyphicon glyphicon-repeat" aria-hidden="true" style="transform: scaleX(-1)"></span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-2"></div>
            <div class="col-md-2 text-center">
                <button type="button" class="btn btn-primary" aria-label="Left Align" id="front">
                    <span class="text-center" aria-hidden="true"><strong>F</strong></span>
                </button>
                <div style="display:block">
                    <button type="button" class="btn btn-primary" aria-label="Left Align" id="left">
                        <span class="text-center" aria-hidden="true"><strong>L</strong></span>
                    </button>
                    <button type="button" class="btn btn-primary" aria-label="Left Align" style="border-radius:15px; margin:5px" id="hover">
                        <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                    </button>
                    <button type="button" class="btn btn-primary" aria-label="Left Align" id="right">
                        <span class="text-center" aria-hidden="true"><strong>R</strong></span>
                    </button>
                </div>
                <button type="button" class="btn btn-primary" aria-label="Left Align" id="back">
                    <span class="text-center" aria-hidden="true"><strong>B</strong></span>
                </button>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="border-radius:20px">
                <div class="modal-header" id="modalHeader">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body" id="myModalBody">
                    ...
                </div>
            </div>
        </div>
    </div>
</body>

</html>