76 lines
3.1 KiB
PHP
76 lines
3.1 KiB
PHP
<?php
|
|
session_start();
|
|
|
|
$page_title = "Dashboard";
|
|
$page_description = "Live and historical data visualization.";
|
|
|
|
include 'partials/header.php';
|
|
|
|
$channel_id = $_SESSION['channel_id'] ?? null;
|
|
$api_key = $_SESSION['api_key'] ?? null;
|
|
|
|
?>
|
|
|
|
<div class="container mt-5">
|
|
<div class="px-4 py-5 my-5 text-center">
|
|
<h1 class="display-5 fw-bold">Dashboard</h1>
|
|
<div class="col-lg-6 mx-auto">
|
|
<p class="lead mb-4">This is where the synchronized polar and Cartesian plots will be displayed.</p>
|
|
<?php if ($channel_id && $api_key): ?>
|
|
<div id="proximityAlert" class="alert alert-danger d-none" role="alert">
|
|
<strong>Warning!</strong> An object is detected at a distance of <span id="closestDistance"></span> units.
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-7">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
Radar View
|
|
</div>
|
|
<div class="card-body d-flex justify-content-center">
|
|
<canvas id="radarCanvas" width="500" height="500" style="background-color: #0b1220;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
Detected Objects
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Distance (m)</th>
|
|
<th scope="col">Angle (°)</th>
|
|
<th scope="col">Timestamp</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="objectsTableBody">
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<details class="card">
|
|
<summary class="card-header">
|
|
Raw ThingSpeak Data
|
|
</summary>
|
|
<div class="card-body">
|
|
<pre class="text-start"><code id="rawDataContainer">Fetching data...</code></pre>
|
|
</div>
|
|
</details>
|
|
<?php else: ?>
|
|
<div class="alert alert-warning" role="alert">
|
|
Please <a href="connect.php" class="alert-link">connect to a channel</a> first to see live data.
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php include 'partials/footer.php'; ?>
|