mytec/rfcp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

@mytec: iter10.2 ready for testing

Browse Source
This commit is contained in:
mytec
2026-01-30 17:03:56 +02:00
parent 05d6b8f13c
commit 652b34571b
2 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/constants/rsrp-thresholds.ts
View File

@@ -18,25 +18,25 @@ export function getSignalQuality(rsrp: number): SignalQuality {
return 'no-service';
}
// Warm color scheme: dark = weak, bright = strong
// Purple → Orange palette: dark purple = weak, bright orange = strong
export const SIGNAL_COLORS: Record<string, string> = {
excellent: '#ffeb3b', // Yellow (excellent)
good: '#ff9800', // Orange (strong)
fair: '#ff4444', // Bright red (fair)
poor: '#cc0000', // Red (weak)
weak: '#8b0000', // Dark red (very weak)
'no-service': '#3c1428', // Deep maroon (no coverage)
excellent: '#ffb74d', // Bright orange (excellent)
good: '#ff6f00', // Dark orange (strong)
fair: '#ff8a65', // Peach (fair)
poor: '#ab47bc', // Light purple (weak)
weak: '#7b1fa2', // Purple (very weak)
'no-service': '#4a148c', // Dark purple (no coverage)
} as const;
export function getRSRPColor(rsrp: number): string {
return SIGNAL_COLORS[getSignalQuality(rsrp)] ?? '#0d47a1';
return SIGNAL_COLORS[getSignalQuality(rsrp)] ?? '#1a0033';
}
export const RSRP_LEGEND = [
{ label: 'Excellent', range: '> -70 dBm', color: '#ffeb3b', description: 'Very strong signal', min: -70 },
{ label: 'Good', range: '-70 to -85 dBm', color: '#ff9800', description: 'Strong signal', min: -85 },
{ label: 'Fair', range: '-85 to -100 dBm', color: '#ff4444', description: 'Acceptable signal', min: -100 },
{ label: 'Poor', range: '-100 to -110 dBm', color: '#cc0000', description: 'Weak signal', min: -110 },
{ label: 'Weak', range: '-110 to -120 dBm', color: '#8b0000', description: 'Very weak signal', min: -120 },
{ label: 'No Service', range: '< -120 dBm', color: '#3c1428', description: 'No coverage', min: -140 },
{ label: 'Excellent', range: '> -70 dBm', color: '#ffb74d', description: 'Very strong signal', min: -70 },
{ label: 'Good', range: '-70 to -85 dBm', color: '#ff6f00', description: 'Strong signal', min: -85 },
{ label: 'Fair', range: '-85 to -100 dBm', color: '#ff8a65', description: 'Acceptable signal', min: -100 },
{ label: 'Poor', range: '-100 to -110 dBm', color: '#ab47bc', description: 'Weak signal', min: -110 },
{ label: 'Weak', range: '-110 to -120 dBm', color: '#7b1fa2', description: 'Very weak signal', min: -120 },
{ label: 'No Service', range: '< -120 dBm', color: '#1a0033', description: 'No coverage', min: -140 },
] as const;

22
frontend/src/utils/colorGradient.ts
View File

@@ -1,10 +1,10 @@
/**
* RSRP → color mapping with smooth gradient interpolation.
*
* Warm-only palette (no cyan/green):
* -130 dBm = dark maroon (no service)
* -90 dBm = orange (fair)
* -50 dBm = bright red (excellent)
* Purple → Orange palette:
* -130 dBm = deep purple (no service)
* -90 dBm = peach (fair)
* -50 dBm = bright orange (excellent)
*
* All functions are pure and allocation-free on the hot path
* (pre-built lookup table for fast per-pixel color resolution).
@@ -18,14 +18,14 @@ interface GradientStop {
}
const GRADIENT_STOPS: GradientStop[] = [
{ value: 0.0, r: 60, g: 20, b: 40 }, // #3c1428 — deep maroon (no service)
{ value: 0.15, r: 100, g: 20, b: 30 }, // #64141e — dark red-brown
{ value: 0.30, r: 139, g: 0, b: 0 }, // #8b0000 — dark red (very weak)
{ value: 0.45, r: 204, g: 0, b: 0 }, // #cc0000 — red (weak)
{ value: 0.60, r: 255, g: 68, b: 68 }, // #ff4444 — bright red (fair)
{ value: 0.75, r: 255, g: 107, b: 53 }, // #ff6b35 — orange-red (good)
{ value: 0.0, r: 26, g: 0, b: 51 }, // #1a0033 — deep purple (no service)
{ value: 0.15, r: 74, g: 20, b: 140 }, // #4a148c — dark purple
{ value: 0.30, r: 123, g: 31, b: 162 }, // #7b1fa2 — purple (very weak)
{ value: 0.45, r: 171, g: 71, b: 188 }, // #ab47bc — light purple (weak)
{ value: 0.60, r: 255, g: 138, b: 101 }, // #ff8a65 — peach (fair)
{ value: 0.75, r: 255, g: 111, b: 0 }, // #ff6f00 — dark orange (good)
{ value: 0.85, r: 255, g: 152, b: 0 }, // #ff9800 — orange (strong)
{ value: 1.0, r: 255, g: 235, b: 59 }, // #ffeb3b — yellow (excellent)
{ value: 1.0, r: 255, g: 183, b: 77 }, // #ffb74d — bright orange (excellent)
];
/**