| 1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- <!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/config.js"></script>
- <script src="/static/js/jquery-3.7.1.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>MAX_DIST ? 100 : parseInt((100.0*dist)/MAX_DIST);
- bar.style.width=`${percentage}%`;
- bar.textContent = dist;
- }
- window.update_interval = setInterval(updateDistance, 200);
- </script>
- </body>
- </html>
|
