diff --git a/frontend/public/icons/humidity-empty.svg b/frontend/public/icons/humidity-empty.svg new file mode 100644 index 000000000..7eec039c9 --- /dev/null +++ b/frontend/public/icons/humidity-empty.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/public/icons/humidity-full.svg b/frontend/public/icons/humidity-full.svg new file mode 100644 index 000000000..458efe292 --- /dev/null +++ b/frontend/public/icons/humidity-full.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/public/icons/humidity-half.svg b/frontend/public/icons/humidity-half.svg new file mode 100644 index 000000000..6c926e012 --- /dev/null +++ b/frontend/public/icons/humidity-half.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/components/control/AMSSectionDual.tsx b/frontend/src/components/control/AMSSectionDual.tsx index fd8a7ff90..dc549fe2f 100644 --- a/frontend/src/components/control/AMSSectionDual.tsx +++ b/frontend/src/components/control/AMSSectionDual.tsx @@ -29,6 +29,26 @@ function isLightColor(hex: string | null): boolean { return luminance > 0.5; } +// Single humidity icon that fills based on level +// <25% = empty (dry/good) +// <40% = half filled +// >=40% = full (wet/bad) +function HumidityIcon({ humidity }: { humidity: number }) { + const getIconSrc = (): string => { + if (humidity < 25) return '/icons/humidity-empty.svg'; + if (humidity < 40) return '/icons/humidity-half.svg'; + return '/icons/humidity-full.svg'; + }; + + return ( + + ); +} + interface AMSPanelContentProps { units: AMSUnit[]; side: 'left' | 'right'; @@ -54,20 +74,16 @@ function AMSPanelContent({ return (
-
- {side === 'left' ? 'Left Nozzle' : 'Right Nozzle'} -
- {/* AMS Tab Selectors */} -
+
{units.map((unit, index) => (