Add minimal SVG icon system for signal types

Replace emoji icons with inline SVG for WiFi, Bluetooth, and RF/SDR
indicators. Icons are standard symbols (arc, rune, wave) designed for
screenshot legibility in reports.

- Add Icons utility object in utils.js with SVG generators
- Add icon CSS system with sizing variants and state animations
- Update TSCM scanner indicators and capabilities bar
- Remove decorative sensor type emojis (text labels suffice)
- Keep signal strength SVG bars (already implemented)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-20 22:05:58 +00:00
parent c92f60e0f3
commit 256c30e7cd
5 changed files with 334 additions and 35 deletions

View File

@@ -833,20 +833,10 @@ const SignalCards = (function() {
? createSignalIndicator(rssi, { compact: true })
: '<span class="signal-strength-indicator compact no-data" title="No signal data available">--</span>';
// Determine sensor type icon
let sensorIcon = '📡';
const model = (msg.model || '').toLowerCase();
if (model.includes('weather') || msg.temperature !== undefined) sensorIcon = '🌡️';
else if (model.includes('door') || model.includes('window')) sensorIcon = '🚪';
else if (model.includes('motion') || model.includes('pir')) sensorIcon = '🚶';
else if (model.includes('smoke') || model.includes('fire')) sensorIcon = '🔥';
else if (model.includes('water') || model.includes('leak')) sensorIcon = '💧';
else if (model.includes('car') || model.includes('tire') || model.includes('tpms')) sensorIcon = '🚗';
card.innerHTML = `
<div class="signal-card-header">
<div class="signal-card-badges">
<span class="signal-proto-badge sensor">${sensorIcon} ${escapeHtml(msg.model || 'Unknown')}</span>
<span class="signal-proto-badge sensor">${escapeHtml(msg.model || 'Unknown')}</span>
<span class="signal-freq-badge">ID: ${escapeHtml(msg.id || 'N/A')}</span>
${signalIndicator}
</div>