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/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;