From 87382dd5d827848839b595a933abff33439c000a Mon Sep 17 00:00:00 2001 From: csawatzky Date: Tue, 9 Jun 2026 15:47:44 -0600 Subject: [PATCH] cables now start at the top of the sidewall and dont go into the roof, added skeletons to the bin page for when it is loading, also fixed an issue with the camera being very zoomed in sometimes when the page loads --- .../CameraControls/OrbitCameraControls.tsx | 3 +++ src/bin/3dView/Data/BuildCableData.ts | 3 ++- src/bin/3dView/Scene/Bin3dView.tsx | 3 ++- src/bin/binSummary/BinSummary.tsx | 22 +++++++++++++++---- src/pages/Bin.tsx | 3 --- src/pages/BinV2.tsx | 4 ++-- 6 files changed, 27 insertions(+), 11 deletions(-) diff --git a/src/3dModels/CameraControls/OrbitCameraControls.tsx b/src/3dModels/CameraControls/OrbitCameraControls.tsx index 445ab70..d8e323b 100644 --- a/src/3dModels/CameraControls/OrbitCameraControls.tsx +++ b/src/3dModels/CameraControls/OrbitCameraControls.tsx @@ -82,6 +82,9 @@ export default function OrbitCameraControls(props: Props) { }); useEffect(() => { + // Sync radius whenever initialRadius prop changes (e.g. after bin data loads) + spherical.current.radius = initialRadius ?? 10; + const canvas = gl.domElement; canvas.addEventListener("contextmenu", e => e.preventDefault()); diff --git a/src/bin/3dView/Data/BuildCableData.ts b/src/bin/3dView/Data/BuildCableData.ts index 9d65297..0b0ed03 100644 --- a/src/bin/3dView/Data/BuildCableData.ts +++ b/src/bin/3dView/Data/BuildCableData.ts @@ -172,7 +172,8 @@ export function BuildCableData(bin: Bin, dims: BinDims): CableData[] { distributed.forEach(orbit => { const count = orbit.assignedCount ?? 0; - const topY = getTopY(orbit.radius, dims); + // const topY = getTopY(orbit.radius, dims); //this is if we want the cables to start at the roof + const topY = dims.sidewallHeight/2 //this will start the cables at the top of the sidewall const bottomY = getBottomY(orbit.radius, dims); if (orbit.orbit === 0 && count > 0) { diff --git a/src/bin/3dView/Scene/Bin3dView.tsx b/src/bin/3dView/Scene/Bin3dView.tsx index f93c239..e866904 100644 --- a/src/bin/3dView/Scene/Bin3dView.tsx +++ b/src/bin/3dView/Scene/Bin3dView.tsx @@ -70,7 +70,8 @@ export default function Bin3dView(props: Props) { const diameter = dims.diameter / scale; const largestDim = Math.max(totalHeight, diameter); const fovRad = (75 * Math.PI) / 180; - const padding = 1.3; // 30% breathing room + // const padding = 1.3; // 30% breathing room + const padding = 1.3 + (largestDim / 100) * 2; //more dynamic breathing room based on the bin size return (largestDim / (2 * Math.tan(fovRad / 2))) * padding; }, [dims, scale]); diff --git a/src/bin/binSummary/BinSummary.tsx b/src/bin/binSummary/BinSummary.tsx index 615d568..61a71ea 100644 --- a/src/bin/binSummary/BinSummary.tsx +++ b/src/bin/binSummary/BinSummary.tsx @@ -1,4 +1,4 @@ -import { Box, Card, DialogContent, DialogTitle, Grid2, IconButton, LinearProgress, Slider, Switch, Tooltip, Typography } from "@mui/material"; +import { Box, Card, DialogContent, DialogTitle, Grid2, IconButton, LinearProgress, Skeleton, Slider, Switch, Tooltip, Typography } from "@mui/material"; import { useMobile } from "hooks"; import { Bin, Component, Device } from "models"; import Bin3dVisualizer from "../bin3dVisualizer"; @@ -23,6 +23,7 @@ import BinPlayer from "bin/BinPlayer"; interface Props { bin: Bin + loading?: boolean, devices: Device[] cables?: GrainCable[] plenums?: Plenum[] @@ -40,7 +41,7 @@ interface Props { } export default function BinSummary(props: Props){ - const {bin, devices, fans, heaters, permissions, componentDevices, componentMap, binPrefs, updateBinCallback, cables = [], plenums = [], setPreferences, setBin} = props + const {bin, loading, devices, fans, heaters, permissions, componentDevices, componentMap, binPrefs, updateBinCallback, cables = [], plenums = [], setPreferences, setBin} = props //const [currentDevice, setCurrentDevice] = useState(undefined) const isMobile = useMobile() const [openGrainDialog, setOpenGrainDialog] = useState(false) @@ -387,9 +388,12 @@ export default function BinSummary(props: Props){ }} /> setOpenGrainDialog(false)} permissions={permissions} updateBin={updateBinCallback}/> - {isMobile ? inventorySummaryMobile() : inventorySummaryDesktop()} + {loading ? : isMobile ? inventorySummaryMobile() : inventorySummaryDesktop()} + {loading ? + + : } + } + {loading ? + + : + } + {loading ? + + : - + + } + diff --git a/src/pages/Bin.tsx b/src/pages/Bin.tsx index 8998fe8..df3a4a2 100644 --- a/src/pages/Bin.tsx +++ b/src/pages/Bin.tsx @@ -69,7 +69,6 @@ import ButtonGroup from "common/ButtonGroup"; import BinTransactions from "bin/BinTransactions"; import { CO2 } from "models/CO2"; import ObjectInteractions from "objects/objectInteractions/ObjectInteractions"; -import Bin3dView from "bin/3dView/Scene/Bin3dView"; interface TabPanelProps { children?: React.ReactNode; @@ -780,8 +779,6 @@ export default function Bin(props: Props) { ); }; - const [fillPercent, setFillPercent] = useState(0) - const desktopView = () => { return ( diff --git a/src/pages/BinV2.tsx b/src/pages/BinV2.tsx index 25699e5..832c4a5 100644 --- a/src/pages/BinV2.tsx +++ b/src/pages/BinV2.tsx @@ -14,7 +14,7 @@ import { Pressure } from "models/Pressure"; import { CO2 } from "models/CO2"; import moment from "moment"; import { quack } from "protobuf-ts/quack"; -import { Box, Drawer, Grid2 as Grid, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Tab, Tabs, Theme, Tooltip } from "@mui/material"; +import { Box, CircularProgress, Drawer, Grid2 as Grid, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Tab, Tabs, Theme, Tooltip } from "@mui/material"; import { makeStyles } from "@mui/styles"; import NotesIcon from "@mui/icons-material/Notes"; import TasksIcon from "products/Construction/TasksIcon"; @@ -83,7 +83,6 @@ const useStyles = makeStyles((theme: Theme) => { export default function BinV2(){ - const warningThreshold = 6; const isMobile = useMobile(); const binID = useParams<{ binID: string }>()?.binID ?? ""; const binAPI = useBinAPI(); @@ -537,6 +536,7 @@ export default function BinV2(){ {pageHeader()}