HawkWatch/dashboard.html at main · ComputerVision804/HawkWatch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drone Detection Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            background-color: #111;
            color: white;
            font-family: sans-serif;
            text-align: center;
        }
        video, canvas {
            margin: 20px auto;
            border: 2px solid #444;
        }
    </style>
</head>
<body>
    <h1>🚁 Drone Detection Dashboard</h1>

    <img src="{{ url_for('video_feed') }}" width="700"><br>

    <a href="/download_csv" style="color: white;">📁 Download Detection Logs (CSV)</a><br><br>

    <canvas id="detectionChart" width="600" height="200"></canvas>

    <audio id="alertSound" src="{{ url_for('static', filename='alert.mp3') }}"></audio>

    <script>
        const ctx = document.getElementById('detectionChart').getContext('2d');
        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Drone Detections',
                    data: [],
                    borderColor: 'lime',
                    borderWidth: 2,
                    tension: 0.3
                }]
            },
            options: {
                scales: {
                    x: {
                        ticks: { color: 'white' },
                        title: { display: true, text: 'Time', color: 'white' }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: { color: 'white' },
                        title: { display: true, text: 'Count', color: 'white' }
                    }
                },
                plugins: {
                    legend: { labels: { color: 'white' } }
                }
            }
        });

        let lastCount = 0;
        setInterval(() => {
            fetch('/api/detections')
                .then(res => res.json())
                .then(data => {
                    const now = new Date().toLocaleTimeString();
                    chart.data.labels.push(now);
                    chart.data.datasets[0].data.push(data.count);

                    if (chart.data.labels.length > 20) {
                        chart.data.labels.shift();
                        chart.data.datasets[0].data.shift();
                    }

                    chart.update();

                    if (data.count > lastCount) {
                        document.getElementById('alertSound').play();
                    }
                    lastCount = data.count;
                });
        }, 5000);
    </script>
</body>
</html>