Trilltechnician/giglez
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Integrate frequency-based device identification system

Browse Source 
Integrated comprehensive device attribution system into GigLez:

1. Simple Device Matcher (src/matcher/simple_matcher.py):
   - Frequency-based device categorization (315/433/868/915 MHz)
   - Protocol-specific identification (Princeton, EV1527, Oregon Scientific, etc.)
   - Modulation + frequency matching (OOK/FSK/ASK)
   - Confidence scoring (0.4-0.95 range)
   - 50+ device types covered

2. API Integration (src/api/main_simple.py):
   - Device matching in upload pipeline
   - Added device fields: device_name, device_category, match_confidence, match_method, device_description
   - Top 5 alternative matches stored per capture
   - New endpoint: GET /api/v1/captures/{id} for detail view

3. Frontend Implementation:
   - Detail modal with comprehensive device information
   - Device identification section with confidence bars
   - Alternative matches display
   - Signal, location, and metadata sections
   - Keyboard (ESC) and click-outside modal closing

4. UI Enhancements (static/css/main.css):
   - Modal overlay with backdrop blur
   - Animated modal slide-in
   - Confidence visualization (green/yellow/red bars)
   - Responsive detail grid layout
   - Device match cards with categories

5. JavaScript Integration:
   - detail-modal.js: Comprehensive detail view renderer
   - Updated map.js and search.js to use detail modal
   - Removed placeholder functions

6. Utilities:
   - scripts/rematch_captures.py: Re-run matcher on existing data
   - Successfully re-matched 20 existing captures

Device Categories Supported:
- Consumer RF (remotes, sensors)
- Automotive (key fobs, TPMS)
- Home Automation (garage/gate openers, blinds)
- Sensors (weather stations, temperature)
- Security (door/window sensors, alarms)
- IoT (smart meters, LoRa devices)
- Industrial (SCADA, telemetry, RFID)

Match Methods:
- Protocol matching (highest confidence: 0.7-0.95)
- Frequency matching (0.4-0.7)
- Modulation + frequency matching (0.5-0.7)

Frontend now displays:
- Device name and category on map markers
- Confidence percentage
- Detailed device information modal
- Alternative device matches
- Match method explanation

All existing captures successfully identified with 60-70% confidence.
This commit is contained in:
priestlypython
2026-01-14 10:51:46 -08:00
parent 5fbe60c76c
commit b083890e96
8 changed files with 872 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+203
View File
@@ -543,6 +543,209 @@ footer p {
margin-bottom: 0.5rem;
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
.modal.active {
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background: white;
border-radius: 0.5rem;
box-shadow: var(--shadow-lg);
max-width: 800px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-header {
padding: 1.5rem;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: start;
}
.modal-header h2 {
margin: 0;
font-size: 1.5rem;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--text-secondary);
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
transition: all 0.2s;
}
.modal-close:hover {
background: var(--light-bg);
color: var(--text-primary);
}
.modal-body {
padding: 1.5rem;
}
.detail-section {
margin-bottom: 2rem;
}
.detail-section:last-child {
margin-bottom: 0;
}
.detail-section h3 {
font-size: 1.125rem;
margin-bottom: 1rem;
color: var(--text-primary);
border-bottom: 2px solid var(--primary-color);
padding-bottom: 0.5rem;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.detail-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.detail-label {
font-size: 0.875rem;
color: var(--text-secondary);
font-weight: 500;
}
.detail-value {
font-size: 1rem;
color: var(--text-primary);
font-weight: 400;
}
.detail-value.highlight {
color: var(--primary-color);
font-weight: 600;
}
.confidence-bar {
height: 8px;
background: var(--light-bg);
border-radius: 4px;
overflow: hidden;
margin-top: 0.5rem;
}
.confidence-fill {
height: 100%;
background: var(--success-color);
transition: width 0.3s ease;
}
.confidence-fill.medium {
background: var(--warning-color);
}
.confidence-fill.low {
background: var(--danger-color);
}
.matched-devices-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.matched-device-item {
padding: 1rem;
background: var(--light-bg);
border-radius: 0.375rem;
border-left: 4px solid var(--primary-color);
}
.matched-device-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.matched-device-name {
font-weight: 600;
color: var(--text-primary);
}
.matched-device-confidence {
background: var(--primary-color);
color: white;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
}
.matched-device-category {
display: inline-block;
background: white;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
.matched-device-description {
font-size: 0.875rem;
color: var(--text-secondary);
margin-top: 0.5rem;
}
.matched-device-method {
font-size: 0.75rem;
color: var(--text-secondary);
margin-top: 0.5rem;
font-style: italic;
}
/* Responsive */
@media (max-width: 768px) {
header .container {
static/js/detail-modal.js
+230
View File
@@ -0,0 +1,230 @@
// GigLez - Capture Detail Modal
async function viewCaptureDetails(captureId) {
const modal = document.getElementById('detail-modal');
const modalBody = document.getElementById('modal-body-content');
// Show loading state
modal.classList.add('active');
modalBody.innerHTML = '<div style="text-align: center; padding: 2rem;">Loading...</div>';
try {
// Fetch capture details
const response = await fetch(`/api/v1/captures/${captureId}`);
if (!response.ok) {
throw new Error('Failed to fetch capture details');
}
const data = await response.json();
if (!data.success) {
throw new Error(data.message);
}
// Render detail view
modalBody.innerHTML = renderCaptureDetail(data.capture);
} catch (error) {
modalBody.innerHTML = `
<div style="text-align: center; padding: 2rem; color: var(--danger-color);">
<p><strong>Error loading details:</strong></p>
<p>${error.message}</p>
</div>
`;
}
}
function renderCaptureDetail(capture) {
const freqMHz = (capture.frequency / 1e6).toFixed(2);
const date = new Date(capture.timestamp || Date.now()).toLocaleString();
// Device identification section
const deviceSection = capture.device_name ? renderDeviceSection(capture) : renderNoDeviceSection();
// Matched devices section
const matchedSection = capture.matched_devices && capture.matched_devices.length > 0
? renderMatchedDevices(capture.matched_devices)
: '';
return `
<!-- Device Identification -->
${deviceSection}
<!-- Signal Information -->
<div class="detail-section">
<h3>Signal Information</h3>
<div class="detail-grid">
<div class="detail-item">
<span class="detail-label">Frequency</span>
<span class="detail-value highlight">${freqMHz} MHz</span>
</div>
<div class="detail-item">
<span class="detail-label">Protocol</span>
<span class="detail-value">${capture.protocol || 'RAW'}</span>
</div>
<div class="detail-item">
<span class="detail-label">Modulation</span>
<span class="detail-value">${capture.preset || 'Unknown'}</span>
</div>
<div class="detail-item">
<span class="detail-label">Filename</span>
<span class="detail-value">${capture.filename}</span>
</div>
</div>
</div>
<!-- Location Information -->
<div class="detail-section">
<h3>Location Information</h3>
<div class="detail-grid">
<div class="detail-item">
<span class="detail-label">Latitude</span>
<span class="detail-value">${capture.latitude.toFixed(6)}</span>
</div>
<div class="detail-item">
<span class="detail-label">Longitude</span>
<span class="detail-value">${capture.longitude.toFixed(6)}</span>
</div>
<div class="detail-item">
<span class="detail-label">GPS Source</span>
<span class="detail-value">${capture.gps_source || 'unknown'}</span>
</div>
<div class="detail-item">
<span class="detail-label">Timestamp</span>
<span class="detail-value">${date}</span>
</div>
</div>
</div>
${matchedSection}
<!-- Metadata -->
<div class="detail-section">
<h3>Metadata</h3>
<div class="detail-grid">
<div class="detail-item">
<span class="detail-label">Capture ID</span>
<span class="detail-value">${capture.id}</span>
</div>
<div class="detail-item">
<span class="detail-label">Data Source</span>
<span class="detail-value">${capture.data_source || 'production'}</span>
</div>
${capture.session_id ? `
<div class="detail-item">
<span class="detail-label">Session ID</span>
<span class="detail-value">${capture.session_id}</span>
</div>
` : ''}
</div>
</div>
`;
}
function renderDeviceSection(capture) {
const confidencePercent = (capture.match_confidence * 100).toFixed(0);
const confidenceClass = capture.match_confidence >= 0.8 ? '' :
capture.match_confidence >= 0.6 ? 'medium' : 'low';
return `
<div class="detail-section">
<h3>Device Identification</h3>
<div class="detail-grid">
<div class="detail-item">
<span class="detail-label">Device Name</span>
<span class="detail-value highlight">${capture.device_name}</span>
</div>
<div class="detail-item">
<span class="detail-label">Category</span>
<span class="detail-value">${capture.device_category}</span>
</div>
<div class="detail-item">
<span class="detail-label">Match Method</span>
<span class="detail-value">${capture.match_method || 'unknown'}</span>
</div>
<div class="detail-item">
<span class="detail-label">Confidence</span>
<span class="detail-value">${confidencePercent}%</span>
<div class="confidence-bar">
<div class="confidence-fill ${confidenceClass}" style="width: ${confidencePercent}%"></div>
</div>
</div>
</div>
${capture.device_description ? `
<div style="margin-top: 1rem; padding: 1rem; background: var(--light-bg); border-radius: 0.375rem;">
<strong>Description:</strong> ${capture.device_description}
</div>
` : ''}
</div>
`;
}
function renderNoDeviceSection() {
return `
<div class="detail-section">
<h3>Device Identification</h3>
<div style="padding: 2rem; text-align: center; background: var(--light-bg); border-radius: 0.375rem;">
<p style="color: var(--text-secondary);">No device match found for this capture.</p>
<p style="color: var(--text-secondary); font-size: 0.875rem; margin-top: 0.5rem;">
This could be an unknown or custom protocol.
</p>
</div>
</div>
`;
}
function renderMatchedDevices(matches) {
if (!matches || matches.length === 0) return '';
const matchesHtml = matches.map(match => {
const confidencePercent = (match.confidence * 100).toFixed(0);
return `
<div class="matched-device-item">
<div class="matched-device-header">
<span class="matched-device-name">${match.device_name}</span>
<span class="matched-device-confidence">${confidencePercent}%</span>
</div>
<span class="matched-device-category">${match.category}</span>
<p class="matched-device-description">${match.description}</p>
<p class="matched-device-method">Matched via: ${match.method}</p>
</div>
`;
}).join('');
return `
<div class="detail-section">
<h3>Alternative Matches</h3>
<div class="matched-devices-list">
${matchesHtml}
</div>
</div>
`;
}
function closeDetailModal() {
const modal = document.getElementById('detail-modal');
modal.classList.remove('active');
}
// Close modal when clicking outside
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('detail-modal');
modal.addEventListener('click', (e) => {
if (e.target === modal) {
closeDetailModal();
}
});
// Close on escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modal.classList.contains('active')) {
closeDetailModal();
}
});
});
// Export for use in other modules
window.viewCaptureDetails = viewCaptureDetails;
window.closeDetailModal = closeDetailModal;
static/js/map.js
+1 -6
View File
@@ -179,7 +179,7 @@ function createPopupContent(capture) {
<p><strong>Captured:</strong> ${date}</p>
<p><strong>Location:</strong> ${capture.latitude.toFixed(6)}, ${capture.longitude.toFixed(6)}</p>
${capture.accuracy ? `<p><strong>Accuracy:</strong> ±${capture.accuracy.toFixed(1)}m</p>` : ''}
<button onclick="viewCaptureDetails('${capture.file_hash}')" class="btn btn-primary" style="margin-top: 0.5rem;">
<button onclick="viewCaptureDetails(${capture.id})" class="btn btn-primary" style="margin-top: 0.5rem;">
View Details
</button>
</div>
@@ -199,10 +199,5 @@ function updateStats() {
document.getElementById('unique-devices').textContent = uniqueDevices;
}
function viewCaptureDetails(fileHash) {
// Navigate to detail page (to be implemented)
alert(`Viewing details for capture: ${fileHash}`);
}
// Export for external use
window.reloadMapData = loadCaptures;
static/js/search.js
+2 -7
View File
@@ -58,7 +58,7 @@ function displaySearchResults(captures) {
function createResultCard(capture) {
const freqMHz = (capture.frequency / 1e6).toFixed(2);
const date = new Date(capture.captured_at).toLocaleString();
const date = new Date(capture.timestamp || Date.now()).toLocaleString();
const deviceName = capture.device_name || 'Unknown Device';
const protocol = capture.protocol || 'RAW';
@@ -67,7 +67,7 @@ function createResultCard(capture) {
: 'N/A';
return `
<div class="result-card" onclick="viewCaptureDetails('${capture.file_hash}')">
<div class="result-card" onclick="viewCaptureDetails(${capture.id})">
<div class="result-header">
<div class="result-title">${deviceName}</div>
<div class="result-frequency">${freqMHz} MHz</div>
@@ -89,8 +89,3 @@ function createResultCard(capture) {
</div>
`;
}
function viewCaptureDetails(fileHash) {
// Show detail modal or navigate to detail page
alert(`Viewing details for: ${fileHash}\n\nDetail view coming soon!`);
}