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

finished tweaking the bin players visual aspect and controls, made some smaller visual adjustments and added a checkbox for showing labels

Browse source
This commit is contained in:
csawatzky 2026-06-08 16:58:47 -06:00
parent d30ed99ca7
commit f6de509561
6 changed files with 241 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/bin/3dView/Data/BuildCableData.ts
View file

@ -163,7 +163,7 @@ export function BuildCableData(bin: Bin, dims: BinDims): CableData[] {
const layout = getLayoutFromDiameter(dims.diameter);
const distributed = distributeCables(cables.length, layout);
const cableRadius = 5;
const cableRadius = 3;
const result: CableData[] = [];

2
src/bin/3dView/Data/BuildNodeData.ts
View file

@ -21,7 +21,7 @@ export interface NodeData {
}
export function BuildNodeData(cables: CableData[]): NodeData[] {
const nodeRadius = 15
const nodeRadius = 10
let nodeData: NodeData[] = []
cables.forEach((cable, cableIndex) => {

9
src/bin/3dView/Systems/Cables/CableNode.tsx
View file

@ -24,9 +24,10 @@ export default function CableNode(props: Props) {
const { camera } = useThree();
const [{ user }] = useGlobalState();
// const [showLabel, setShowLabel] = useState(false);
const ROW_HEIGHT = 45;
const PADDING = 15;
const LABEL_WIDTH = 220;
const ROW_HEIGHT = 35;
const PADDING = 5;
const LABEL_WIDTH = 200;
const FONT_SIZE = 25;
const flagRef = React.useRef<Group>(null);
useFrame(() => {
@ -170,7 +171,7 @@ export default function CableNode(props: Props) {
<Text
key={i}
position={[0, getRowY(i), 0]}
fontSize={35}
fontSize={FONT_SIZE}
fontWeight={650}
color={row.color}
anchorX="center"

225
src/bin/BinPlayer.tsx
View file

@ -1,4 +1,6 @@
import { Button } from "@mui/material";
import { DateRange, PlayArrow, Start, Stop } from "@mui/icons-material";
import { Box, Button, DialogActions, DialogContent, FormControl, IconButton, LinearProgress, MenuItem, Select, TextField, Typography } from "@mui/material";
import ResponsiveDialog from "common/ResponsiveDialog";
import { GetDefaultDateRange } from "common/time/DateRange";
import { cloneDeep } from "lodash";
import { Bin } from "models";
@ -12,6 +14,7 @@ const CHECKPOINT_COUNT = 10;
interface StatusCheckpoint {
time: Moment;
timeString: string;
cables: pond.GrainCable[];
}
@ -211,6 +214,11 @@ function buildGrainCableFromReadings(
): pond.GrainCable {
const cable = pond.GrainCable.fromObject(cloneDeep(template));
// Clear template values so empty checkpoints don't inherit live data
cable.celcius = [];
cable.relativeHumidity = [];
cable.moisture = [];
if (readings.temperature) {
cable.celcius = [...readings.temperature.values];
}
@ -238,6 +246,7 @@ function buildStatusCheckpoints(
count: number = CHECKPOINT_COUNT
): StatusCheckpoint[] {
const times = buildCheckpointTimes(start, end, count);
console.log(times)
const cableKeys = templates.map(c => c.key);
const buckets = assignMeasurementsToCheckpoints(
cableKeys,
@ -259,8 +268,26 @@ function buildStatusCheckpoints(
carriedByCable.set(key, merged);
return buildGrainCableFromReadings(template, merged, time);
});
return { time, cables };
});
return { time, cables, timeString: time.toISOString() };
}).filter(checkpoint => //filter the checkpoints to only include ones that have readings
checkpoint.cables.some(cable =>
cable.celcius.length > 0 ||
cable.relativeHumidity.length > 0 ||
cable.moisture.length > 0
));
}
/**
* Calculates the number of checkpoints to create based on the start and end dates.
* Is hard coded to space the checkpoints 6 hours apart.
* @param start - The start date
* @param end - The end date
* @returns The number of checkpoints to create
*/
function checkpointCountFromRange(start: Moment, end: Moment): number {
const hours = end.diff(start, 'hours');
return Math.max(1, Math.floor(hours / 6) + 1);
}
/**
@ -272,14 +299,52 @@ function buildStatusCheckpoints(
export default function BinPlayer(props: Props) {
const { bin, componentDevices, setBin } = props;
const componentAPI = useComponentAPI();
const defaultDateRange = GetDefaultDateRange();
const [startDate, setStartDate] = useState<Moment>(defaultDateRange.start);
const [endDate, setEndDate] = useState<Moment>(defaultDateRange.end);
// const [statusCheckpoints, setStatusCheckpoints] = useState<StatusCheckpoint[]>([]);
//the default start and end dates are 1 week ago and now
const [dateSelect, setDateSelect] = useState<number>(0);
const [startDate, setStartDate] = useState<Moment>(moment().subtract(1, 'week'));
const [endDate, setEndDate] = useState<Moment>(moment);
const [dateRangeDialog, setDateRangeDialog] = useState(false);
const [tempStartDate, setTempStartDate] = useState<Moment>(moment().subtract(1, 'week'));
const [tempEndDate, setTempEndDate] = useState<Moment>(moment());
const [currentCheckpointTime, setCurrentCheckpointTime] = useState<Moment | undefined>(undefined)
const [displayProgress, setDisplayProgress] = useState(0);
const totalCheckpoints = useRef(0);
const checkpointStartTime = useRef(0);
const currentCheckpointIndex = useRef(0);
const isPlaying = useRef(false);
const PLAYBACK_INTERVAL = 2000 //playback time between checkpoints
const [isPlayingState, setIsPlayingState] = useState(false);
const stopPlayer = () => { isPlaying.current = false; };
const originalBin = useRef<Bin | null>(null);
useEffect(() => {
if (!isPlayingState) return;
const fps = 30;
const interval = 1000 / fps;
const stepDuration = PLAYBACK_INTERVAL; // must match your setTimeout delay
const timer = setInterval(() => {
if (!isPlayingState) {
clearInterval(timer);
setDisplayProgress(0);
return;
}
const total = totalCheckpoints.current;
if (total === 0) return;
const idx = currentCheckpointIndex.current;
// and change the progress formula to account for the last checkpoint reaching 100%:
const elapsed = Date.now() - checkpointStartTime.current;
const stepProgress = Math.min(elapsed / stepDuration, 1);
// use (total - 1) as denominator so the last checkpoint goes from ~end to 100%
const raw = total <= 1 ? 100 : ((idx + stepProgress) / (total - 1)) * 100;
setDisplayProgress(Math.min(raw, 100));
}, interval);
return () => clearInterval(timer);
}, [isPlayingState]); // re-run when playing state changes
/**
* Fetches sampled unit measurements for every grain cable in the current bin status,
* then builds `statusCheckpoints` for playback over [startDate, endDate].
@ -289,10 +354,11 @@ const startPlayer = async () => {
console.log(endDate.toISOString())
originalBin.current = cloneDeep(bin); // capture before async work begins
isPlaying.current = true;
setIsPlayingState(true)
const sampleRequests = bin.status.grainCables.map(cable => {
const deviceID = componentDevices.get(cable.key) ?? 0;
return componentAPI.sampleUnitMeasurements(deviceID, cable.key, startDate, endDate, 100);
return componentAPI.sampleUnitMeasurements(deviceID, cable.key, startDate, endDate, 100, undefined, undefined, undefined, undefined, true);
});
const responses = await Promise.all(sampleRequests);
@ -300,29 +366,162 @@ const startPlayer = async () => {
bin.status.grainCables,
responses.map(r => r.data),
startDate,
endDate
endDate,
checkpointCountFromRange(startDate, endDate)
);
console.log(responses)
console.log(checkpoints)
for (const checkpoint of checkpoints) {
for (let i = 0; i < checkpoints.length; i++) {
if (!isPlaying.current) {
setBin(originalBin.current!);
setCurrentCheckpointTime(undefined);
setIsPlayingState(false)
return;
}
currentCheckpointIndex.current = i;
totalCheckpoints.current = checkpoints.length;
checkpointStartTime.current = Date.now();
const newBin = cloneDeep(originalBin.current!);
newBin.status.grainCables = checkpoint.cables;
newBin.status.grainCables = checkpoints[i].cables;
setBin(newBin);
await new Promise(res => setTimeout(res, 2000));
setCurrentCheckpointTime(checkpoints[i].time)
await new Promise(res => setTimeout(res, PLAYBACK_INTERVAL));
console.log("next step")
}
isPlaying.current = false;
setIsPlayingState(false)
setBin(originalBin.current!);
setCurrentCheckpointTime(undefined);
};
const datePickerDialog = () => {
return (
<ResponsiveDialog
open={dateRangeDialog}
onClose={() => setDateRangeDialog(false)}
aria-labelledby="date-range-dialog">
<DialogContent>
<TextField
fullWidth
margin="normal"
type="date"
label="Start Date"
value={tempStartDate.format("YYYY-MM-DD")}
onChange={e => {
setTempStartDate(moment(e.target.value));
}}
/>
<TextField
fullWidth
margin="normal"
type="date"
label="End Date"
value={tempEndDate.format("YYYY-MM-DD")}
onChange={e => {
setTempEndDate(moment(e.target.value));
}}
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setDateRangeDialog(false)} color="primary">
Close
</Button>
<Button onClick={() => {
const now = moment();
setStartDate(tempStartDate.clone().set({
hour: now.hour(),
minute: now.minute(),
second: now.second()
}));
setEndDate(tempEndDate.clone().set({
hour: now.hour(),
minute: now.minute(),
second: now.second()
}));
setDateRangeDialog(false);
}} color="primary">
Submit
</Button>
</DialogActions>
</ResponsiveDialog>
);
};
const dateSelector = () => {
return (
<Box display="flex" flexDirection="row" justifyContent="space-between">
<FormControl fullWidth>
<Select
value={dateSelect}
sx={{
borderRadius: 1,
bgcolor: 'rgba(255,255,255,0.08)',
'& .MuiSelect-select': {
py: 1.5,
},
'& .MuiOutlinedInput-notchedOutline': { border: 'none' },
'&:hover .MuiOutlinedInput-notchedOutline': { border: 'none' },
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' },
}}
onChange={event => {
setDateSelect(event.target.value as number);
let currentDate = moment();
setEndDate(currentDate);
switch (event.target.value) {
case 0:
setStartDate(currentDate.clone().subtract(1, 'week'));
break;
case 1:
setStartDate(currentDate.clone().subtract(2, 'weeks'));
break;
case 2:
setStartDate(currentDate.clone().subtract(4, 'weeks'));
break;
}
}}
>
<MenuItem value={0}>1 Week</MenuItem>
<MenuItem value={1}>2 Weeks</MenuItem>
<MenuItem value={2}>4 Weeks</MenuItem>
<MenuItem value={3}>Custom</MenuItem>
</Select>
</FormControl>
{dateSelect === 3 && (
<Button onClick={() => setDateRangeDialog(true)} color="primary"><DateRange /></Button>
)}
</Box>
)
}
return (
<React.Fragment>
<Button onClick={startPlayer}>play</Button>
{datePickerDialog()}
<Box display="flex" flexDirection="row" justifyContent="space-between" width="100%" gap={2} alignContent={"center"} alignItems={"center"}>
{/* start/stop button */}
<Box>
{isPlayingState ? (
<IconButton color="primary" sx={{ border: "1px solid", borderRadius: "50%", padding: 1 }} onClick={stopPlayer}><Stop /></IconButton>
) : (
<IconButton color="primary" sx={{ border: "1px solid", borderRadius: "50%", padding: 1 }} onClick={startPlayer}><PlayArrow /></IconButton>
)}
</Box>
{/* progress bar and date display */}
<Box sx={{ flexGrow: 1 }}>
<Typography textAlign={"center"}>{currentCheckpointTime ? currentCheckpointTime.format("MMM D, YYYY h:mm A") : moment().format("MMM D, YYYY h:mm A")}</Typography>
<LinearProgress value={displayProgress} variant="determinate" />
<Box display="flex" flexDirection="row" justifyContent="space-between">
<Typography>{startDate.format("MMM D, YYYY")}</Typography>
<Typography>{endDate.format("MMM D, YYYY")}</Typography>
</Box>
</Box>
{/* date range selector */}
<Box>
{dateSelector()}
</Box>
</Box>
</React.Fragment>
);
}

23
src/bin/bin3dVisualizer.tsx
View file

@ -1,4 +1,4 @@
import { Box, Checkbox, FormControl, MenuItem, List, ListItem, InputLabel, Select, Typography, Stack } from "@mui/material";
import { Box, Checkbox, FormControl, MenuItem, List, ListItem, InputLabel, Select, Typography, Stack, FormControlLabel } from "@mui/material";
import Bin3dView from "bin/3dView/Scene/Bin3dView";
import { Bin, Component, Device } from "models";
import { Controller } from "models/Controller";
@ -42,6 +42,7 @@ export default function bin3dVisualizer(props: Props){
const [openNodeControls, setOpenNodeControls] = useState(false)
const [devMap, setDevMap] = useState<Map<number, Device>>(new Map())
const [modeChangeInProgress, setModeChangeInProgress] = useState(false)
const [showLabels, setShowLabels] = useState(true)
const isMobile = useMobile()
useEffect(()=>{
@ -102,7 +103,21 @@ export default function bin3dVisualizer(props: Props){
const heatmapDisplay = () => {
return (
<Box>
<Typography sx={{fontWeight: 650, fontSize: isMobile ? 13 : 20}}>Heatmap Display</Typography>
<Box display="flex" alignContent="center" alignItems={"center"} justifyContent={"space-between"}>
<Typography noWrap sx={{fontWeight: 650, fontSize: isMobile ? 13 : 20}}>Heatmap Display</Typography>
<FormControlLabel
labelPlacement="start"
control={
<Checkbox
checked={showLabels}
onChange={(e, checked) => {
setShowLabels(checked)
}}
/>
}
label={<Typography noWrap sx={{fontSize: 11}}>Show Values</Typography>}
/>
</Box>
<FormControl fullWidth>
{/* <InputLabel>Display</InputLabel> */}
<Select
@ -380,8 +395,8 @@ export default function bin3dVisualizer(props: Props){
scale={100}
showTempHeatmap={showHeatmap}
showMoistureHeatmap={showMoistureHeatmap}
showTemp={showTemp}
showMoisture={showMoisture}
showTemp={showTemp && showLabels}
showMoisture={showMoisture && showLabels}
// showGrain={showFill}
// showHotspots={showHotspots}
xOffset={isMobile ? undefined : -150}

5
src/bin/binSummary/BinSummary.tsx
View file

@ -402,8 +402,9 @@ export default function BinSummary(props: Props){
binPrefs={binPrefs}
updateBinCallback={updateBinCallback}
/>
{setBin &&
<Box position="absolute" bottom={10}>
{/* only show the player on desktop */}
{setBin && !isMobile &&
<Box paddingX={2} position="absolute" bottom={10} width="100%">
<BinPlayer bin={bin} componentDevices={componentDevices} setBin={setBin}/>
</Box>
}