mirror of
https://github.com/smittix/intercept.git
synced 2026-06-17 01:49:45 -07:00
feat(drone): merge Drone Intelligence module
Multi-vector UAV detection mode: Remote ID (WiFi/BLE ASTM F3411), RTL-SDR 433/868MHz control-link detection, HackRF 2.4/5.8GHz wideband. Workers feed a shared observation queue; DroneCorrelator merges into DroneContact objects with TTL store, risk scoring, and SSE streaming. Frontend: two-panel sidebar + Leaflet map with contact cards and trails. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
James Smith
@@ -0,0 +1,86 @@
|
||||
/* Drone Intelligence Styles */
|
||||
|
||||
.drone-vector-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.drone-vector-pill {
|
||||
font-size: 10px;
|
||||
font-family: var(--font-mono);
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.drone-vector-pill.active {
|
||||
background: color-mix(in srgb, var(--accent-cyan) 15%, transparent);
|
||||
color: var(--accent-cyan);
|
||||
border-color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.drone-contact-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.drone-contact-card:hover {
|
||||
border-color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.drone-contact-card.high-risk {
|
||||
border-left: 3px solid var(--accent-red);
|
||||
}
|
||||
|
||||
.drone-contact-card.medium-risk {
|
||||
border-left: 3px solid var(--accent-yellow);
|
||||
}
|
||||
|
||||
.drone-contact-card.low-risk {
|
||||
border-left: 3px solid var(--accent-green);
|
||||
}
|
||||
|
||||
.drone-compliance-badge {
|
||||
font-size: 9px;
|
||||
font-family: var(--font-mono);
|
||||
padding: 2px 6px;
|
||||
border-radius: 2px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.drone-compliance-badge.compliant {
|
||||
background: color-mix(in srgb, var(--accent-green) 20%, transparent);
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.drone-compliance-badge.non-compliant {
|
||||
background: color-mix(in srgb, var(--accent-red) 20%, transparent);
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
.drone-map {
|
||||
height: 280px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color);
|
||||
margin: 0 12px 12px;
|
||||
}
|
||||
|
||||
.drone-marker-high-risk {
|
||||
animation: dsc-distress-pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes dsc-distress-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(1.4); }
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
(function DroneMode() {
|
||||
'use strict';
|
||||
|
||||
let _sse = null;
|
||||
let _map = null;
|
||||
let _markers = {};
|
||||
let _trails = {};
|
||||
let _running = false;
|
||||
|
||||
function init() {
|
||||
document.getElementById('droneStartBtn')?.addEventListener('click', _start);
|
||||
document.getElementById('droneStopBtn')?.addEventListener('click', _stop);
|
||||
_initMap();
|
||||
_connectSSE();
|
||||
_refreshStatus();
|
||||
}
|
||||
|
||||
function _initMap() {
|
||||
if (_map) return;
|
||||
const mapEl = document.getElementById('droneMap');
|
||||
if (!mapEl || typeof L === 'undefined') return;
|
||||
_map = L.map('droneMap', { zoomControl: true }).setView([20, 0], 2);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap',
|
||||
maxZoom: 18,
|
||||
}).addTo(_map);
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
_disconnectSSE();
|
||||
if (_map) {
|
||||
_map.remove();
|
||||
_map = null;
|
||||
}
|
||||
_markers = {};
|
||||
_trails = {};
|
||||
}
|
||||
|
||||
function _connectSSE() {
|
||||
if (_sse) return;
|
||||
_sse = new EventSource('/drone/stream');
|
||||
_sse.addEventListener('message', function (e) {
|
||||
try {
|
||||
const msg = JSON.parse(e.data);
|
||||
if (msg.type === 'contact') _handleContact(msg.data);
|
||||
} catch (_) {}
|
||||
});
|
||||
_sse.onerror = function () {
|
||||
_sse.close();
|
||||
_sse = null;
|
||||
setTimeout(_connectSSE, 3000);
|
||||
};
|
||||
}
|
||||
|
||||
function _disconnectSSE() {
|
||||
if (_sse) { _sse.close(); _sse = null; }
|
||||
}
|
||||
|
||||
function _handleContact(contact) {
|
||||
_upsertCard(contact);
|
||||
if (contact.position) _upsertMapMarker(contact);
|
||||
_updateStats();
|
||||
}
|
||||
|
||||
function _upsertCard(contact) {
|
||||
const listEl = document.getElementById('droneContactList');
|
||||
if (!listEl) return;
|
||||
let card = document.getElementById('drone-card-' + contact.id);
|
||||
if (!card) {
|
||||
card = document.createElement('div');
|
||||
card.id = 'drone-card-' + contact.id;
|
||||
card.className = 'drone-contact-card';
|
||||
card.addEventListener('click', function () { _focusContact(contact.id); });
|
||||
listEl.prepend(card);
|
||||
}
|
||||
card.className = 'drone-contact-card ' + contact.risk_level + '-risk';
|
||||
const complianceLabel = contact.compliant
|
||||
? '<span class="drone-compliance-badge compliant">Remote ID</span>'
|
||||
: '<span class="drone-compliance-badge non-compliant">No Remote ID</span>';
|
||||
const vectors = (contact.detection_vectors || []).map(function (v) {
|
||||
return '<span class="drone-vector-pill active">' + v + '</span>';
|
||||
}).join('');
|
||||
const alt = contact.altitude_m != null ? contact.altitude_m.toFixed(0) + 'm' : '—';
|
||||
const spd = contact.speed_ms != null ? contact.speed_ms.toFixed(1) + 'm/s' : '—';
|
||||
card.innerHTML = [
|
||||
'<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">',
|
||||
' <span style="font-family:var(--font-mono); font-size:11px; color:var(--accent-cyan);">' + (contact.serial_number || contact.id) + '</span>',
|
||||
' ' + complianceLabel,
|
||||
'</div>',
|
||||
'<div class="drone-vector-pills" style="margin-bottom:6px;">' + vectors + '</div>',
|
||||
'<div style="font-size:10px; color:var(--text-dim);">Alt: ' + alt + ' Speed: ' + spd + '</div>',
|
||||
].join('');
|
||||
}
|
||||
|
||||
function _upsertMapMarker(contact) {
|
||||
if (!_map) return;
|
||||
const lat = contact.position[0];
|
||||
const lon = contact.position[1];
|
||||
if (_markers[contact.id]) {
|
||||
_markers[contact.id].setLatLng([lat, lon]);
|
||||
} else {
|
||||
const color = contact.risk_level === 'high' ? 'var(--accent-red)' :
|
||||
contact.risk_level === 'medium' ? 'var(--accent-yellow)' :
|
||||
'var(--accent-cyan)';
|
||||
const icon = L.divIcon({
|
||||
className: 'drone-map-icon' + (contact.risk_level === 'high' ? ' drone-marker-high-risk' : ''),
|
||||
html: '<div style="width:10px;height:10px;border-radius:50%;background:' + color + ';border:2px solid #fff;"></div>',
|
||||
iconSize: [10, 10],
|
||||
iconAnchor: [5, 5],
|
||||
});
|
||||
_markers[contact.id] = L.marker([lat, lon], { icon: icon })
|
||||
.addTo(_map)
|
||||
.bindPopup('<b>' + (contact.serial_number || contact.id) + '</b><br>Risk: ' + contact.risk_level);
|
||||
}
|
||||
const trailPoints = (contact.position_history || []).map(function (p) {
|
||||
return [p.lat, p.lon];
|
||||
});
|
||||
if (_trails[contact.id]) {
|
||||
_trails[contact.id].setLatLngs(trailPoints);
|
||||
} else if (trailPoints.length > 1) {
|
||||
_trails[contact.id] = L.polyline(trailPoints, {
|
||||
color: contact.risk_level === 'high' ? '#ff4444' : '#00ccff',
|
||||
weight: 1.5,
|
||||
opacity: 0.6,
|
||||
}).addTo(_map);
|
||||
}
|
||||
}
|
||||
|
||||
function _focusContact(contactId) {
|
||||
if (_map && _markers[contactId]) {
|
||||
_map.panTo(_markers[contactId].getLatLng());
|
||||
_markers[contactId].openPopup();
|
||||
}
|
||||
}
|
||||
|
||||
function _updateStats() {
|
||||
fetch('/drone/contacts')
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (contacts) {
|
||||
const nonCompliant = contacts.filter(function (c) { return !c.compliant; }).length;
|
||||
const countEl = document.getElementById('droneContactCount');
|
||||
const ncEl = document.getElementById('droneNonCompliantCount');
|
||||
if (countEl) countEl.textContent = contacts.length;
|
||||
if (ncEl) ncEl.textContent = nonCompliant;
|
||||
})
|
||||
.catch(function () {});
|
||||
}
|
||||
|
||||
function _refreshStatus() {
|
||||
fetch('/drone/status')
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
_running = data.running;
|
||||
_setRunningUI(data.running);
|
||||
_updateVectorPills(data.vectors || []);
|
||||
})
|
||||
.catch(function () {});
|
||||
}
|
||||
|
||||
function _start() {
|
||||
const iface = document.getElementById('droneWifiIface')?.value.trim() || null;
|
||||
fetch('/drone/start', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ wifi_iface: iface }),
|
||||
})
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function () { _setRunningUI(true); _refreshStatus(); })
|
||||
.catch(function () {});
|
||||
}
|
||||
|
||||
function _stop() {
|
||||
fetch('/drone/stop', { method: 'POST' })
|
||||
.then(function () { _setRunningUI(false); _refreshStatus(); })
|
||||
.catch(function () {});
|
||||
}
|
||||
|
||||
function _setRunningUI(running) {
|
||||
const startBtn = document.getElementById('droneStartBtn');
|
||||
const stopBtn = document.getElementById('droneStopBtn');
|
||||
const statusEl = document.getElementById('droneStatusText');
|
||||
if (startBtn) startBtn.disabled = running;
|
||||
if (stopBtn) stopBtn.disabled = !running;
|
||||
if (statusEl) {
|
||||
statusEl.textContent = running ? 'Active' : 'Standby';
|
||||
statusEl.style.color = running ? 'var(--accent-green)' : 'var(--accent-yellow)';
|
||||
}
|
||||
}
|
||||
|
||||
function _updateVectorPills(activeVectors) {
|
||||
const pillMap = {
|
||||
'REMOTE_ID': 'dronePillRemoteId',
|
||||
'RTL433': 'dronePill433',
|
||||
'HACKRF': 'dronePillHackrf',
|
||||
};
|
||||
Object.entries(pillMap).forEach(function ([key, id]) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.classList.toggle('active', activeVectors.some(function (v) { return v.includes(key); }));
|
||||
});
|
||||
}
|
||||
|
||||
window.DroneMode = { init: init, destroy: destroy };
|
||||
})();
|
||||
Reference in New Issue
Block a user