Merge branch 'tag_fix' into dev_environment

package-lock.json

@@ -52,7 +52,6 @@
         "react-dom": "^18.3.1",
         "react-emoji-render": "^2.0.1",
         "react-error-boundary": "^5.0.0",
-        "react-full-screen": "^1.1.1",
         "react-horizontal-scrolling-menu": "^7.1.1",
         "react-infinite-scroller": "^1.2.6",
         "react-joyride": "^2.9.3",
@@ -8617,12 +8616,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/fscreen": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
-      "integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==",
-      "license": "MIT"
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -11517,21 +11510,6 @@
         "is-lite": "^0.8.2"
       }
     },
-    "node_modules/react-full-screen": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/react-full-screen/-/react-full-screen-1.1.1.tgz",
-      "integrity": "sha512-xoEgkoTiN0dw9cjYYGViiMCBYbkS97BYb4bHPhQVWXj1UnOs8PZ1rPzpX+2HMhuvQV1jA5AF9GaRbO3fA5aZtg==",
-      "license": "MIT",
-      "dependencies": {
-        "fscreen": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": ">= 16.8.0"
-      }
-    },
     "node_modules/react-horizontal-scrolling-menu": {
       "version": "7.1.8",
       "resolved": "https://registry.npmjs.org/react-horizontal-scrolling-menu/-/react-horizontal-scrolling-menu-7.1.8.tgz",

package.json

@@ -65,7 +65,6 @@
     "react-dom": "^18.3.1",
     "react-emoji-render": "^2.0.1",
     "react-error-boundary": "^5.0.0",
-    "react-full-screen": "^1.1.1",
     "react-horizontal-scrolling-menu": "^7.1.1",
     "react-infinite-scroller": "^1.2.6",
     "react-joyride": "^2.9.3",

src/bin/BinVisualizerV2.tsx

@@ -36,7 +36,6 @@ import { pond } from "protobuf-ts/pond";
 import { quack } from "protobuf-ts/quack";
 import { useGlobalState, useSnackbar } from "providers";
 import React, { useCallback, useEffect, useState } from "react";
-import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import moment, { Moment } from "moment";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { getThemeType } from "theme";
@@ -72,6 +71,7 @@ import ButtonGroup from "common/ButtonGroup";
 import ModeChangeDialog from "./conditioning/modeChangeDialog";
 import CustomGrainSelector from "grain/CustomGrainSelector";
 import BinControllerDisplay from "./BinControllerDisplay";
+import { useFullScreen } from "hooks/FullScreenHandle";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -217,7 +217,7 @@ export default function BinVisualizer(props: Props) {
   const isMobile = useMobile();
   const classes = useStyles();
   const theme = useTheme();
-  const fullScreenHandler = useFullScreenHandle();
+  const {fullScreenHandler, FullScreenWrapper} = useFullScreen()
   const viewport = useViewport();
   const { openSnack } = useSnackbar();
   const [fillPercentage, setFillPercentage] = useState<number | null>(0);
@@ -1344,7 +1344,7 @@ export default function BinVisualizer(props: Props) {
 
     return (
       <Box display="flex" width={1} justifyContent="flex-end">
-        <FullScreen handle={fullScreenHandler}>
+        <FullScreenWrapper>
           <Box
             position="relative"
             height={1}
@@ -1441,7 +1441,7 @@ export default function BinVisualizer(props: Props) {
               />
             </Box>
           </Box>
-        </FullScreen>
+        </FullScreenWrapper>
       </Box>
     );
   };

src/component/ComponentCard.tsx

@@ -190,6 +190,17 @@ export default function ComponentCard(props: Props) {
         cableID = "Cable: " + (component.settings.addressType - 8);
       }
       return port + " " + cableID;
+    } else if (component.settings.addressType === quack.AddressType.ADDRESS_TYPE_I2C) {
+      let description = ""
+      let type = getFriendlyAddressTypeName(component.settings.addressType);
+      description = type
+      if(component.settings.expansionLine){
+        description = description + ": Exp Line " + component.settings.expansionLine
+      }
+      if(component.settings.muxLine){
+        description = description + " ,Mux Line " + component.settings.muxLine
+      }
+      return description
     }else{
       return getFriendlyAddressTypeName(component.settings.addressType);
     }

src/device/autoDetect/DeviceScannedComponents.tsx

@@ -12,6 +12,7 @@ import ResponsiveDialog from "common/ResponsiveDialog";
 import { useComponentAPI, useDeviceAPI, useSnackbar } from "hooks";
 import { ConfigurablePin } from "pbHelpers/AddressTypes";
 import ScannedOneWirePort from "./OneWire/ScannedOneWirePort";
+import I2CExpander from "./I2CExpander";
 
 interface Props {
   scannedComponents: pond.ComponentAddressMap
@@ -27,6 +28,7 @@ interface CompStep {
 }
 
 let i2cBlacklistAddresses: number[] = [0x70]
+let i2cExpanderAddresses: number[] = [0x71]
 
 export default function DeviceScannedComponents(props: Props){
   const {scannedComponents, device, availablePositions, availableOffsets, refreshCallback} = props
@@ -35,6 +37,7 @@ export default function DeviceScannedComponents(props: Props){
   const [scannedI2C, setScannedI2C] = useState<pond.DetectI2C>() //the unmodified scan of addresses
   const [scannedOneWire, setScannedOneWire] = useState<pond.DetectOneWire[]>([])
   const [validI2CCompAddresses, setValidI2CComponentAddresses] = useState<quack.AddressData[]>([]) //the filtered array of address data
+  const [expanderAddresses, setExpanderAddresses] = useState<quack.AddressData[]>([])
   const [components, setComponents] = useState<Component[]>([])
   const [steps, setSteps] = useState<CompStep[]>([]);
   const { error, success } = useSnackbar();
@@ -69,18 +72,23 @@ export default function DeviceScannedComponents(props: Props){
 
   useEffect(()=>{
     let valid: quack.AddressData[] = []
+    let expanders: quack.AddressData[] = []
     //filter the address data
     let addr = scannedI2C?.settings?.foundAddresses
     console.log(addr)
     if(addr){
       addr.forEach(addrData => {
         if(!i2cBlacklistAddresses.includes(addrData.address)){
-          if(!(addrData.address === 0x71 && addrData.expansionLine === undefined)){
+            if(i2cExpanderAddresses.includes(addrData.address) && addrData.expansionLine === 0){
+              expanders.push(addrData)
+            }else{
               valid.push(addrData)
             }
         }
       })
     }
+    console.log(valid)
+    setExpanderAddresses(expanders)
     setValidI2CComponentAddresses(valid)
   },[scannedI2C])
 
@@ -257,16 +265,32 @@ export default function DeviceScannedComponents(props: Props){
         {scannedI2C !== undefined && 
           <Box marginBottom={5}>
           <Box justifyContent="space-between" display="flex">
-            <Typography sx={{fontWeight: 650}}>
+            <Typography sx={{fontWeight: 650, fontSize: 20}}>
-              I2C Sensors
+              I2C Scan
             </Typography>
             <Button variant="contained" color="primary" onClick={()=>{removeScan(scannedI2C.key, pond.ObjectType.OBJECT_TYPE_DETECT_I2C)}}>Clear Scan</Button>
           </Box>
-          {validI2CCompAddresses.length > 0 ? validI2CCompAddresses.map((addr, index) => {
+          {expanderAddresses.length > 0 && 
+            <Box marginBottom={3}>
+              <Typography fontWeight={650}>Detected Expanders</Typography>
+              {expanderAddresses.map((expAddr, index) => {
+                return (
+                  <I2CExpander key={index} address={expAddr}/>
+                )
+              })}
+            </Box>
+          }
+
+          {validI2CCompAddresses.length > 0 ?
+            <Box>
+              <Typography fontWeight={650}>Detected Sensors</Typography>
+              {validI2CCompAddresses.map((addr, index) => {
                 return (
                   <ScannedI2C key={index} sensorNum={index+1} addressData={addr} deviceProduct={device.settings.product} componentSelectionCallback={componentSelection} availablePositions={availablePositions.get(quack.AddressType.ADDRESS_TYPE_I2C) ?? new Map<quack.ComponentType, number[]>()}/>
                 )
-          }) :
+              })}
+            </Box>
+          :
             <Box sx={{
                 margin: 1,
                 display: "flex",
@@ -283,7 +307,7 @@ export default function DeviceScannedComponents(props: Props){
           <Box>
             <Box justifyContent="space-between" display="flex">
               <Typography sx={{fontWeight: 650}}>
-                Pin Port Sensors
+                Pin Port Scan
               </Typography>
             </Box>
             {scannedOneWire.map((scan,i) => {

src/device/autoDetect/I2CExpander.tsx

@@ -0,0 +1,27 @@
+import { Box, Typography } from "@mui/material"
+import { quack } from "protobuf-ts/quack"
+
+interface Props {
+    address: quack.AddressData
+}
+
+
+
+export default function I2CExpander(props: Props) {
+    const {address} = props
+
+    const expanderType = () => {
+        switch(address.address){
+            case 0x71:
+                return "Grain Cable Expander"
+            default:
+                return "Unknown Expander"
+        }
+    }
+
+    return (
+        <Box sx={{marginY: 1}}>
+            <Typography>{expanderType()} {address.muxLine ? "Mux Line: " + address.muxLine : ""}</Typography>
+        </Box>
+    )
+}

src/device/autoDetect/ScannedI2C.tsx

@@ -108,6 +108,7 @@ export default function ScannedI2C(props: Props){
     <Box sx={{marginY: 1}}>
       {sensorNum && <Typography>Sensor {sensorNum}</Typography>}
       <Typography variant="caption">{addressData.expansionLine !== 0 && "Expansion Line: " + addressData.expansionLine}</Typography>
+      {/* may also want to specify the mux line, not sure if the sensors will have a mux line though */}
       {types.length > 0 ?
       <React.Fragment>
         <Grid2 container direction="row" alignItems="center" justifyContent="space-between">

src/hooks/FullScreenHandle.tsx

@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Drop-in replacement for react-full-screen's useFullScreenHandle + FullScreen component.
+ *
+ * Motivation: react-full-screen 1.1.1 doesn't debounce fullscreenchange events, so on
+ * Windows systems with DPI scaling > 100%, the resize triggered during fullscreen entry
+ * fires a fullscreenchange event that the library misinterprets as an exit, immediately
+ * popping back out of fullscreen.
+ *
+ * This hook bypasses the library entirely and calls the native Fullscreen API directly,
+ * ignoring fullscreenchange events fired within DEBOUNCE_MS of entry to absorb the
+ * DPI-scaling resize blip.
+ *
+ * Usage — replace in BinVisualizerV2.tsx:
+ *
+ *   // Remove:
+ *   import { FullScreen, useFullScreenHandle } from "react-full-screen";
+ *   const fullScreenHandler = useFullScreenHandle();
+ *   <FullScreen handle={fullScreenHandler}> ... </FullScreen>
+ *
+ *   // Add:
+ *   import { useFullScreen } from "hooks/useFullScreen";
+ *   const { fullScreenHandler, FullScreenWrapper } = useFullScreen();
+ *   <FullScreenWrapper> ... </FullScreenWrapper>
+ *
+ *   // Everything else (fullScreenHandler.active, .enter(), .exit()) stays the same.
+ */
+
+const DEBOUNCE_MS = 500;
+
+export interface FullScreenHandle {
+  active: boolean;
+  enter: () => void;
+  exit: () => void;
+}
+
+export function useFullScreen(): {
+  fullScreenHandler: FullScreenHandle;
+  FullScreenWrapper: React.FC<{ children: React.ReactNode }>;
+} {
+  const [active, setActive] = useState(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  // Timestamp of the last enter() call — used to debounce spurious exit events
+  const enterTimeRef = useRef<number>(0);
+
+  const enter = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    enterTimeRef.current = Date.now();
+    if (el.requestFullscreen) {
+      el.requestFullscreen().catch(() => {
+        // Some browsers (e.g. iOS Safari) reject the promise — silently ignore
+      });
+    } else if ((el as any).webkitRequestFullscreen) {
+      (el as any).webkitRequestFullscreen();
+    } else if ((el as any).mozRequestFullScreen) {
+      (el as any).mozRequestFullScreen();
+    } else if ((el as any).msRequestFullscreen) {
+      (el as any).msRequestFullscreen();
+    }
+  }, []);
+
+  const exit = useCallback(() => {
+    if (document.exitFullscreen) {
+      document.exitFullscreen().catch(() => {});
+    } else if ((document as any).webkitExitFullscreen) {
+      (document as any).webkitExitFullscreen();
+    } else if ((document as any).mozCancelFullScreen) {
+      (document as any).mozCancelFullScreen();
+    } else if ((document as any).msExitFullscreen) {
+      (document as any).msExitFullscreen();
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleChange = () => {
+      const fullscreenEl =
+        document.fullscreenElement ||
+        (document as any).webkitFullscreenElement ||
+        (document as any).mozFullScreenElement ||
+        (document as any).msFullscreenElement;
+
+      const isNowFullscreen = fullscreenEl === containerRef.current;
+
+      // If we just called enter() and this event fires within DEBOUNCE_MS,
+      // and it looks like an exit, ignore it — it's the DPI-scaling resize blip
+      if (!isNowFullscreen && Date.now() - enterTimeRef.current < DEBOUNCE_MS) {
+        return;
+      }
+
+      setActive(isNowFullscreen);
+    };
+
+    document.addEventListener("fullscreenchange", handleChange);
+    document.addEventListener("webkitfullscreenchange", handleChange);
+    document.addEventListener("mozfullscreenchange", handleChange);
+    document.addEventListener("MSFullscreenChange", handleChange);
+
+    return () => {
+      document.removeEventListener("fullscreenchange", handleChange);
+      document.removeEventListener("webkitfullscreenchange", handleChange);
+      document.removeEventListener("mozfullscreenchange", handleChange);
+      document.removeEventListener("MSFullscreenChange", handleChange);
+    };
+  }, []);
+
+  const FullScreenWrapper: React.FC<{ children: React.ReactNode }> = useCallback(
+    ({ children }) => (
+      <div ref={containerRef} style={{ width: "100%", height: "100%" }}>
+        {children}
+      </div>
+    ),
+    []
+  );
+
+  return {
+    fullScreenHandler: { active, enter, exit },
+    FullScreenWrapper,
+  };
+}