nimrodkerrett
/
eye-of-beholder


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445
							<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Distance measurement</title>
  <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/h-ticker.css" rel="stylesheet">
  <link rel="icon" href="/static/gfx/antenna.png">
</head>
<body data-bs-theme="dark">
  <div class="container-fluid text-center">
    <div class="row">
      <div class="col12">
        <h1>Distance measurement</h1>
        <div class="progress" role="progressbar" aria-label="Success striped example" style="height: 4rem">
          <div id="distance-bar" class="progress-bar h2 progress-bar-striped progress-bar-animated bg-success" style="width: 25%"></div>
        </div>
      </div>
    </div>
  </div>
  <script src="/static/js/jquery-3.7.1.min.js"></script>
  <script src="/static/js/jquery.marquee.min.js"></script>
  <script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script>
    async function getDistance() {
      try {
        let response = await fetch("/d");
        let data = await response.json();
        return data.distance;
      } catch {
        return 0;
      }
    };
    async function updateDistance() {
      var dist = await getDistance();
      var bar = document.getElementById("distance-bar");
      var percentage = dist>2000 ? 100 : parseInt((100.0*dist)/2000.0);
      bar.style.width=`${percentage}%`;
      bar.textContent = dist;
    }
    window.update_interval = setInterval(updateDistance, 200);
  </script>
</body>
</html>