Skip to content
Snippets Groups Projects
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>&nbsp;&nbsp;</span>
            <button class="btn btn-upArrow"
                    style =     "color:deepskyblue;font-size:50px;text-shadow: 2px 2px";
                onclick="update_data('F')">&#8679;</button>
            <!--span id="upArrow" style='font-size:50px; color:blue;'>&#8679;</span-->
            <br>
            <button class="btn btn-lefArrow"
                style =     "color:deepskyblue;font-size:50px;text-shadow: 2px 2px";
                onclick="update_data('L')">&#8678;</button>
            <!--span id="leftArrow" style='font-size:45px; color:blue;'>&#8678;</span-->
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <button class="btn btn-rightArrow"
                style =     "color:deepskyblue;font-size:50px;";
                onclick="update_data('R')">&#8680;</button>
            <!--span id="rightArrow" style='font-size:45px; color:blue;'>&#8680;</span-->
            <br>
            <span>&nbsp;&nbsp;</span>
            <button class="btn btn-downArrow"
                style =     "color:deepskyblue;font-size:50px;text-shadow: 2px 2px";
                onclick="update_data('D')">&#8681;</button>
            <!--span id="downArrow" style='font-size:50px; color:blue;'>&#8681;</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">&bull;</span> Car Direction: <span id="direction"> </span>
           <br>
           <span id="speed_dot" style="color:green">&bull;</span> Speed: <span id="speed">0.0</span>  
           <br>
           <span id="distance_dot" style="color:green">&bull;</span> Distance Traveled: <span id="distance">0.0</span>
           <br>
           <span id="temprature_dot" style="color:green">&bull;</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>