diff --git a/assets/static/css/style.css b/assets/static/css/style.css index 3879d96..77623e8 100644 --- a/assets/static/css/style.css +++ b/assets/static/css/style.css @@ -262,21 +262,28 @@ body { } .legend-icon { - width: 16px; - height: 16px; - border-radius: 2px; - border: 1px solid #ffffff; + width: 24px; + height: 24px; + display: inline-flex; + align-items: center; + justify-content: center; + margin-right: 8px; } -.legend-icon.light { background: #00bfff; } /* Sky blue for light aircraft */ -.legend-icon.medium { background: #00ff88; } /* Green for medium aircraft */ -.legend-icon.large { background: #ff8c00; } /* Orange for large aircraft */ -.legend-icon.high-vortex { background: #ff4500; } /* Red-orange for high vortex large */ -.legend-icon.heavy { background: #ff0000; } /* Red for heavy aircraft */ -.legend-icon.helicopter { background: #ff00ff; } /* Magenta for helicopters */ -.legend-icon.military { background: #ff4444; } /* Red-orange for military */ -.legend-icon.ga { background: #ffff00; } /* Yellow for general aviation */ -.legend-icon.ground { background: #888888; } /* Gray for ground vehicles */ +.legend-icon svg { + width: 100%; + height: 100%; +} + +.legend-icon.light svg { color: #00bfff; } /* Sky blue for light aircraft */ +.legend-icon.medium svg { color: #00ff88; } /* Green for medium aircraft */ +.legend-icon.large svg { color: #ff8c00; } /* Orange for large aircraft */ +.legend-icon.high-vortex svg { color: #ff4500; } /* Red-orange for high vortex large */ +.legend-icon.heavy svg { color: #ff0000; } /* Red for heavy aircraft */ +.legend-icon.helicopter svg { color: #ff00ff; } /* Magenta for helicopters */ +.legend-icon.military svg { color: #ff4444; } /* Red-orange for military */ +.legend-icon.ga svg { color: #ffff00; } /* Yellow for general aviation */ +.legend-icon.ground svg { color: #888888; } /* Gray for ground vehicles */ .table-controls { display: flex; diff --git a/assets/static/icons/heavy.svg b/assets/static/icons/heavy.svg new file mode 100644 index 0000000..060d255 --- /dev/null +++ b/assets/static/icons/heavy.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/static/icons/large.svg b/assets/static/icons/large.svg new file mode 100644 index 0000000..f0c916a --- /dev/null +++ b/assets/static/icons/large.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/static/icons/light.svg b/assets/static/icons/light.svg new file mode 100644 index 0000000..b134afd --- /dev/null +++ b/assets/static/icons/light.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/static/icons/medium.svg b/assets/static/icons/medium.svg new file mode 100644 index 0000000..ba07323 --- /dev/null +++ b/assets/static/icons/medium.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/static/index.html b/assets/static/index.html index 2994330..52f00b4 100644 --- a/assets/static/index.html +++ b/assets/static/index.html @@ -112,37 +112,165 @@

ADS-B Categories

- + + + + + + + + + + + + + Light < 7000kg
- + + + + + + + + + + + + + + + Medium 7000-34000kg
- + + + + + + + + + + + + + + + + + Large 34000-136000kg
- + + + + + + + + + + + + + + + + + High Vortex Large
- + + + + + + + + + + + + + + + + + + + Heavy > 136000kg
- + + + + + + + + + + + + + Rotorcraft
- + + + + + + + + + + + + + Glider/Ultralight
- + + + + + + + + + + + Surface Vehicle
+
+ + + + + + + + + + + + + + + + Military +

Sources

diff --git a/assets/static/js/modules/aircraft-manager.js b/assets/static/js/modules/aircraft-manager.js index 78f5ada..d2bbfdd 100644 --- a/assets/static/js/modules/aircraft-manager.js +++ b/assets/static/js/modules/aircraft-manager.js @@ -331,60 +331,48 @@ export class AircraftManager { } getAircraftIconType(aircraft) { - // For icon selection, we still need basic categories - // This determines which SVG shape to use + // For icon selection, determine which SVG shape to use based on category if (aircraft.OnGround) return 'ground'; if (aircraft.Category) { const cat = aircraft.Category.toLowerCase(); - // Map to basic icon types for visual representation + // Specialized aircraft types if (cat.includes('helicopter') || cat.includes('rotorcraft')) return 'helicopter'; if (cat.includes('military') || cat.includes('fighter') || cat.includes('bomber')) return 'military'; - if (cat.includes('cargo') || cat.includes('heavy') || cat.includes('super')) return 'cargo'; - if (cat.includes('light') || cat.includes('glider') || cat.includes('ultralight')) return 'ga'; + if (cat.includes('glider') || cat.includes('ultralight')) return 'ga'; + + // Weight-based categories with specific icons + if (cat.includes('light') && cat.includes('7000')) return 'light'; + if (cat.includes('medium') && cat.includes('7000-34000')) return 'medium'; + if (cat.includes('large') && cat.includes('34000-136000')) return 'large'; + if (cat.includes('heavy') && cat.includes('136000')) return 'heavy'; + if (cat.includes('high vortex')) return 'large'; // Use large icon for high vortex + + // Fallback category matching + if (cat.includes('heavy') || cat.includes('super')) return 'heavy'; + if (cat.includes('large')) return 'large'; + if (cat.includes('medium')) return 'medium'; + if (cat.includes('light')) return 'light'; } - // Default commercial icon for everything else - return 'commercial'; + // Default to medium icon for unknown aircraft + return 'medium'; } getAircraftColor(type, aircraft) { - // Special colors for specific types - if (type === 'military') return '#ff4444'; - if (type === 'helicopter') return '#ff00ff'; - if (type === 'ground') return '#888888'; - if (type === 'ga') return '#ffff00'; - - // For commercial and cargo types, use weight-based colors - if (aircraft && aircraft.Category) { - const cat = aircraft.Category.toLowerCase(); - - // Check for specific weight ranges in the category string - // Light aircraft (< 7000kg) - Sky blue - if (cat.includes('light')) { - return '#00bfff'; - } - // Medium aircraft (7000-34000kg) - Green - if (cat.includes('medium')) { - return '#00ff88'; - } - // High Vortex Large - Red-orange (special wake turbulence category) - if (cat.includes('high vortex')) { - return '#ff4500'; - } - // Large aircraft (34000-136000kg) - Orange - if (cat.includes('large')) { - return '#ff8c00'; - } - // Heavy aircraft (> 136000kg) - Red - if (cat.includes('heavy') || cat.includes('super')) { - return '#ff0000'; - } + // Color mapping based on aircraft type/size + switch (type) { + case 'military': return '#ff4444'; // Red-orange for military + case 'helicopter': return '#ff00ff'; // Magenta for helicopters + case 'ground': return '#888888'; // Gray for ground vehicles + case 'ga': return '#ffff00'; // Yellow for general aviation + case 'light': return '#00bfff'; // Sky blue for light aircraft + case 'medium': return '#00ff88'; // Green for medium aircraft + case 'large': return '#ff8c00'; // Orange for large aircraft + case 'heavy': return '#ff0000'; // Red for heavy aircraft + default: return '#00ff88'; // Default green for unknown } - - // Default to green for unknown commercial aircraft - return '#00ff88'; }