-
Ashley George authoredAshley George authored
index.html 3.17 KiB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container{
display: flex;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2>CS498: IoT -- Lab 2</h2>
<!-- <video class="center" width="600" height="400" controls>
<source src="samplevid.mp4" type="video/mp4">
Your browser does not support the video tag.
</video> -->
<img src="./media/default_background.jpg" width="1000" height="600" id='pics'>
</div>
</div>
<div class="row">
<div class="container">
<div class="jumbotron text-center col-md-6">
<span> </span>
<button class="btn btn-upArrow"
style = "color:deepskyblue;font-size:50px;text-shadow: 2px 2px";
onclick="update_data('F')">⇧</button>
<!--span id="upArrow" style='font-size:50px; color:blue;'>⇧</span-->
<br>
<button class="btn btn-lefArrow"
style = "color:deepskyblue;font-size:50px;text-shadow: 2px 2px";
onclick="update_data('L')">⇦</button>
<!--span id="leftArrow" style='font-size:45px; color:blue;'>⇦</span-->
<span> </span>
<button class="btn btn-stop"
style = "background-color:red;color:white;font-size:15px;text-shadow: 2px 2px";
onclick="update_data('S')">STOP</button>
<span> </span>
<button class="btn btn-rightArrow"
style = "color:deepskyblue;font-size:50px;";
onclick="update_data('R')">⇨</button>
<!--span id="rightArrow" style='font-size:45px; color:blue;'>⇨</span-->
<br>
<span> </span>
<button class="btn btn-downArrow"
style = "color:deepskyblue;font-size:50px;text-shadow: 2px 2px";
onclick="update_data('D')">⇩</button>
<!--span id="downArrow" style='font-size:50px; color:blue;'>⇩</span-->
</div>
<div class="jumbotron text-left col-md-6">
<button class="btn btn-success" onclick="register()">Connect</button>
<p>
<span id="direction_dot" style="color:Green">•</span> Car Direction: <span id="direction"> </span>
<br>
<span id="speed_dot" style="color:green">•</span> Speed: <span id="speed">0.0</span>
<br>
<span id="distance_dot" style="color:green">•</span> Distance Traveled: <span id="distance">0.0</span>
<br>
<span id="temprature_dot" style="color:green">•</span> Temperature of the Pi: <span id="temperature">0.0</span>
<br>
Bluetooth return value: <span id="bluetooth"> </span>
</p>
</div>
</div>
</div>
</body>
</html>