added headspace warning indicators to the bin svg

src/bin/BinCardV2.tsx

@@ -401,6 +401,7 @@ export default function BinCard(props: Props) {
             fillPercentage={bin.fillPercent()}
             lidarEstimate={lidarPercentage}
             cables={cables}
+            co2Sensors={bin.status.co2}
             highTemp={bin.settings.highTemp}
             lowTemp={bin.settings.lowTemp}
             hottestNodeTemp={valDisplay === "high" ? hotNode?.temp : undefined}

src/bin/BinSVGV2.tsx

@@ -30,6 +30,22 @@ const useStyles = makeStyles((theme: Theme) => {
         fill: "#0575E6"
       }
     },
+    "@keyframes headspaceWarning": {
+      from: {
+        fill: "#d18221"
+      },
+      to: {
+        fill: "#9a9d9f"
+      }
+    },
+    "@keyframes headspaceCritical": {
+      from: {
+        fill: "#ff0000"
+      },
+      to: {
+        fill: "#9a9d9f"
+      }
+    },
     outerShell: {
       fill: "url(#outerShellGradient)"
     },
@@ -39,9 +55,17 @@ const useStyles = makeStyles((theme: Theme) => {
     container: {
       fill: "#a1a9b1"
     },
-    headspace: {
+    headspaceNormal: {
       fill: "#9a9d9f"
     },
+    headspaceWarning: {
+      fill: "#9a9d9f",
+      animation: "$headspaceWarning 0.5s alternate infinite"
+    },
+    headspaceCritical: {
+      fill: "#9a9d9f",
+      animation: "$headspaceCritical 0.5s alternate infinite"
+    },
     bottom: {
       fill: "#9c9fa2"
     },
@@ -107,6 +131,7 @@ interface Props {
   fillPercentage: number;
   lidarEstimate?: number;
   cables?: GrainCable[];
+  co2Sensors: pond.BinCO2[];
   hasMinHeight?: boolean;
   highTemp: number;
   lowTemp: number;
@@ -180,7 +205,8 @@ export default function BinSVGV2(props: Props) {
     cableEstimate,
     hottestNodeTemp,
     coldestNodeTemp,
-    inventoryControl
+    inventoryControl,
+    co2Sensors
   } = props;
   const [{ user }] = useGlobalState();
   const [extraDetails, setExtraDetails] = useState<"temps" | "hums">("temps");
@@ -310,6 +336,25 @@ export default function BinSVGV2(props: Props) {
     }
   };
 
+  const headspaceClass = () => {
+    if (!co2Sensors || co2Sensors.length === 0) return classes.headspaceNormal;
+    // let testSensor = [pond.BinCO2.create({
+    //   device: 4,
+    //   key: "testSensor",
+    //   name: "test Sensor",
+    //   ppm: 1600
+    // })]
+    let highestReading = 0;
+    //testSensor.forEach(sensor => {
+    co2Sensors.forEach(sensor => {
+      //if the current sensor is greater the the currently highest reading change it to the current sensor
+      highestReading = sensor.ppm > highestReading ? sensor.ppm : highestReading;
+    });
+    if (highestReading > 1500) return classes.headspaceCritical;
+    if (highestReading > 1000) return classes.headspaceWarning;
+    return classes.headspaceNormal;
+  };
+
   const borderColor = () => {
     //determine color of border based on node status: > high or < low = red, within both = green
     return !cables || cables.length === 0 ? "#000000" : nodeWarning ? "#ff0000" : "#00ff00";
@@ -946,7 +991,7 @@ export default function BinSVGV2(props: Props) {
           />
         )}
         <path
-          className={classes.headspace}
+          className={headspaceClass()}
           d="m 181.82986,106.67809 -127.82986,65.18735 v 0 c 0,0 474,0 474,0 v 0 c 0,0 -127.61538,-65.41933 -127.61538,-65.41933 -69.27693,-35.261481 -149.27783,-35.261481 -218.55476,0 z"
           id="headspace"
         />
@@ -991,7 +1036,7 @@ export default function BinSVGV2(props: Props) {
           id="bottom"
         />
         <path
-          className={classes.headspace}
+          className={headspaceClass()}
           d="m 187.29264,84.203148 -133.24203,69.896852 c 0,0 319.83487,-22.49899 473.94939,0 l -133.15206,-69.996847 c -65.67637,-34.498446 -141.87893,-34.498446 -207.5553,0 z"
           id="headspace"
         />

src/bin/BinVisualizerV2.tsx

@@ -1400,6 +1400,7 @@ export default function BinVisualizer(props: Props) {
                 fillPercentage={fillPercentage ?? 0}
                 lidarEstimate={lidarPercentage}
                 cables={grainCables}
+                co2Sensors={bin.status.co2}
                 highTemp={bin.settings.highTemp}
                 lowTemp={bin.settings.lowTemp}
                 showTempHum={iOS ? nodeDetails : fullScreenHandler.active}