<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8">
<link href="components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
td {
text-align: center;
}
td button {
width: 12em;
}
</style>
</head>
<body>
<div class="buttons">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn" data-action="takeoff" data-state="1">takeoff</button>
<button class="btn" data-action="land" data-state="1">land</button>
<button class="btn" data-action="disableEmergency" data-state="1">disableEmergency</button>
</div>
<div class="btn-group">
<button class="btn" data-action="calibrate" data-state="1">calibrate</button>
</div>
</div>
<table>
<tr>
<td><button class="col-3 btn" data-action="front"><i class="icon-arrow-up"></i> front</button></td>
<td><button class="col-3 btn" data-action="back"><i class="icon-arrow-down"></i> back</button></td>
</tr>
<tr>
<td><button class="col-3 btn" data-action="left"><i class="icon-arrow-left"></i> left</button></td>
<td><button class="col-3 btn" data-action="right"><i class="icon-arrow-right"></i> right</button></td>
</tr>
<tr>
<td><button class="col-3 btn" data-action="up"><i class="icon-chevron-up"></i> up</button></td>
<td><button class="col-3 btn" data-action="down"><i class="icon-chevron-down"></i> down</button></td>
</tr>
<tr>
<td><button class="col-3 btn" data-action="clockwise"><i class="icon-refresh"></i>clockwise</button></td>
<td><button class="col-3 btn" data-action="counterClockwise"><i
class="icon-refresh"></i>counterClockwise</button></td>
</tr>
</table>
</div>
<img id="cam" src="default.jpg" />
<pre id="navdata"></pre>
<script src="components/jquery/jquery.js"></script>
<script src="/faye/client.js"></script>
<script src="components/bootstrap/js/bootstrap.min.js"></script>
<script src="/client.js"></script>
</body>
</html>