brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more visual tweaks and design, fixed a coule bugs and removed some console logs

Browse source
This commit is contained in:
csawatzky 2026-06-11 16:48:00 -06:00
parent f04213af1e
commit ea13f97c57
8 changed files with 257 additions and 293 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/bin/bin3dVisualizer.tsx
View file

@ -1,4 +1,4 @@
import { Box, Checkbox, FormControl, MenuItem, List, ListItem, InputLabel, Select, Typography, Stack, FormControlLabel } from "@mui/material";
import { Box, Checkbox, FormControl, MenuItem, List, ListItem, InputLabel, Select, Typography, Stack, FormControlLabel, useTheme } from "@mui/material";
import Bin3dView from "bin/3dView/Scene/Bin3dView";
import { Bin, Component, Device } from "models";
import { Controller } from "models/Controller";
@ -26,6 +26,7 @@ interface Props {
}
export default function bin3dVisualizer(props: Props){
const {bin, fans, heaters, permissions, devices, componentDevices, componentMap, binPrefs, updateBinCallback} = props
const theme = useTheme()
const [showHeatmap, setShowHeatmap] = useState(true)
// const [showHotspots, setShowHotspots] = useState(false)
// const [showFill, setShowFill] = useState(false)
@ -68,16 +69,17 @@ export default function bin3dVisualizer(props: Props){
const binModeControl = () => {
return (
<Box>
<Typography sx={{fontWeight: 650, fontSize: isMobile ? 13 : 20}}>{bin.name()}</Typography>
<Typography sx={{fontWeight: 650, fontSize: isMobile ? 13 : 17}}>{bin.name()}</Typography>
<FormControl fullWidth>
<Select
value={binMode}
disabled={modeChangeInProgress}
sx={{
borderRadius: 1,
bgcolor: 'rgba(255,255,255,0.08)',
bgcolor: '#151E27',
'& .MuiSelect-select': {
py: 1.5,
py: isMobile ? 0.5 : 1.5,
fontSize: 13
},
'& .MuiOutlinedInput-notchedOutline': { border: 'none' },
'&:hover .MuiOutlinedInput-notchedOutline': { border: 'none' },
@ -103,7 +105,7 @@ export default function bin3dVisualizer(props: Props){
const heatmapDisplay = () => {
return (
<Box>
<Typography noWrap sx={{fontWeight: 650, fontSize: isMobile ? 13 : 20}}>
<Typography noWrap sx={{fontWeight: 650, fontSize: isMobile ? 13 : 17}}>
Heatmap
</Typography>
<FormControl fullWidth>
@ -111,8 +113,11 @@ export default function bin3dVisualizer(props: Props){
value={binDisplay}
sx={{
borderRadius: 1,
bgcolor: 'rgba(255,255,255,0.08)',
'& .MuiSelect-select': { py: 1.5 },
bgcolor: '#151E27',
'& .MuiSelect-select': {
py: isMobile ? 0.5 : 1.5,
fontSize: 13
},
'& .MuiOutlinedInput-notchedOutline': { border: 'none' },
'&:hover .MuiOutlinedInput-notchedOutline': { border: 'none' },
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' },
@ -173,9 +178,12 @@ export default function bin3dVisualizer(props: Props){
}
const controllerDisplay = () => {
if (fans && fans.length > 1 || heaters && heaters.length > 1){
return (
<Box>
<Typography sx={{fontWeight: 650, fontSize: isMobile ? 13 : 20}}>
<Box width="100%">
<Typography sx={{fontWeight: 650, fontSize: isMobile ? 13 : 17}}>
Controllers
</Typography>
{fans && fans.map(fan => {
@ -187,15 +195,16 @@ export default function bin3dVisualizer(props: Props){
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
bgcolor: 'rgba(255,255,255,0.05)',
// bgcolor: 'rgba(255,255,255,0.05)',
bgcolor: '#151E27',
borderRadius: 1,
px: 2,
py: 1,
}}
>
<Typography sx={{fontSize: isMobile ? 13 : 15}}>{fan.name()}</Typography>
<Typography sx={{fontSize: 13}}>{fan.name()}</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography sx={{fontWeight: 650, fontSize: isMobile ? 13 : 15}}>
<Typography sx={{fontWeight: 650, fontSize: 13}}>
{isOn ? "ON" : "OFF"}
</Typography>
<Box sx={{
@ -216,15 +225,16 @@ export default function bin3dVisualizer(props: Props){
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
bgcolor: 'rgba(255,255,255,0.05)',
// bgcolor: 'rgba(255,255,255,0.05)',
bgcolor: '#151E27',
borderRadius: 1,
px: 2,
py: 1,
}}
>
<Typography sx={{fontSize: isMobile ? 13 : 15}}>{heater.name()}</Typography>
<Typography sx={{fontSize: 13}}>{heater.name()}</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography sx={{fontWeight: 650, fontSize: isMobile ? 13 : 15}}>
<Typography sx={{fontWeight: 650, fontSize: 13}}>
{isOn ? "ON" : "OFF"}
</Typography>
<Box sx={{
@ -240,11 +250,14 @@ export default function bin3dVisualizer(props: Props){
// loop through controllers displaying each one
)
}else{
return
}
}
const desktopHUD = () => {
return (
<Box position={"absolute"} top={20} left={30} height={"80%"} width={"30%"} padding={2}>
<Box position={"absolute"} top={20} left={25} height={"75%"} width={"25%"}>
<Stack direction={"column"} justifyContent={"space-between"} sx={{height: "100%", width: "100%"}}>
{binModeControl()}
{heatmapDisplay()}
@ -397,7 +410,7 @@ export default function bin3dVisualizer(props: Props){
showMoisture={showMoisture && showLabels}
// showGrain={showFill}
// showHotspots={showHotspots}
xOffset={isMobile ? undefined : -150}
xOffset={isMobile ? undefined : -120}
/>
{isMobile ? mobileHUD() : desktopHUD()}
</Box>