Enhance simulation components with time tracking and performance metrics

- Added idle and active time tracking to ConveyorInstance, PillarJibInstance, HumanInstance, RoboticArmInstance, and StorageUnitInstance.
- Integrated animation play speed and pause functionality into simulation components.
- Updated simulation types to include cost and energy metrics for various analyses.
- Improved performance tracking with additional metrics such as load utilization and efficiency calculations.
This commit is contained in:
2025-12-15 14:16:20 +05:30
parent 2026248a4c
commit 0bc5222ba6
7 changed files with 1078 additions and 371 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -1,6 +1,8 @@
import { useEffect } from "react";
import { useEffect, useRef } from "react";
import { useFrame } from "@react-three/fiber";
import { useSceneContext } from "../../../../scene/sceneContext";
import { usePauseButtonStore } from "../../../../../store/ui/usePlayButtonStore";
import { useAnimationPlaySpeed, usePlayButtonStore } from "../../../../../store/ui/usePlayButtonStore";
// import { findConveyorSubsequence } from '../../../simulator/functions/getConveyorSequencesInProduct';
@@ -8,7 +10,70 @@ function ConveyorInstance({ conveyor }: { readonly conveyor: ConveyorStatus }) {
const { materialStore, conveyorStore, productStore } = useSceneContext();
const { getProductById, selectedProduct } = productStore();
const { getMaterialsByCurrentModelUuid } = materialStore();
const { setConveyorPaused } = conveyorStore();
const { setConveyorPaused, conveyors, incrementActiveTime, incrementIdleTime } = conveyorStore();
const { isPlaying } = usePlayButtonStore();
const idleTimeRef = useRef<number>(0);
const activeTimeRef = useRef<number>(0);
const previousTimeRef = useRef<number | null>(null);
const animationFrameIdRef = useRef<number | null>(null);
const isSpeedRef = useRef<number>(0);
const isPausedRef = useRef<boolean>(false);
const { speed } = useAnimationPlaySpeed();
const { isPaused } = usePauseButtonStore();
useEffect(() => {
isPausedRef.current = isPaused;
}, [isPaused]);
useEffect(() => {
isSpeedRef.current = speed;
}, [speed]);
function animate(currentTime: number) {
if (previousTimeRef.current === null) {
previousTimeRef.current = currentTime;
}
const deltaTime = (currentTime - previousTimeRef.current) / 1000;
previousTimeRef.current = currentTime;
if (!conveyor.isPaused) {
if (!isPausedRef.current) {
activeTimeRef.current += deltaTime * isSpeedRef.current;
}
} else {
if (!isPausedRef.current) {
idleTimeRef.current += deltaTime * isSpeedRef.current;
}
}
animationFrameIdRef.current = requestAnimationFrame(animate);
}
useEffect(() => {
if (!isPlaying) return;
if (!conveyor.isPaused) {
const roundedActiveTime = Math.round(activeTimeRef.current);
incrementActiveTime(conveyor.modelUuid, roundedActiveTime);
activeTimeRef.current = 0;
} else {
const roundedIdleTime = Math.round(idleTimeRef.current);
incrementIdleTime(conveyor.modelUuid, roundedIdleTime);
idleTimeRef.current = 0;
}
if (animationFrameIdRef.current === null) {
animationFrameIdRef.current = requestAnimationFrame(animate);
}
return () => {
if (animationFrameIdRef.current !== null) {
cancelAnimationFrame(animationFrameIdRef.current);
animationFrameIdRef.current = null;
}
};
}, [conveyor, conveyors, isPlaying]);
useFrame(() => {
const product = getProductById(selectedProduct.productUuid);

View File

@@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
import { useEffect, useRef, useState } from "react";
import * as THREE from "three";
import { usePlayButtonStore } from "../../../../../store/ui/usePlayButtonStore";
import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore } from "../../../../../store/ui/usePlayButtonStore";
import { useSceneContext } from "../../../../scene/sceneContext";
import { useTriggerHandler } from "../../../triggers/triggerHandler/useTriggerHandler";
@@ -13,7 +13,7 @@ function PillarJibInstance({ crane }: { readonly crane: CraneStatus }) {
const { craneStore, productStore, humanStore, assetStore } = useSceneContext();
const { triggerPointActions } = useTriggerHandler();
const { getActionByUuid, selectedProduct } = productStore();
const { setCurrentPhase, setCraneActive, setIsCaryying, removeCurrentAction, removeLastMaterial, decrementCraneLoad } = craneStore();
const { cranes, setCurrentPhase, setCraneActive, setIsCaryying, removeCurrentAction, removeLastMaterial, decrementCraneLoad, incrementActiveTime, incrementIdleTime } = craneStore();
const { setCurrentPhase: setCurrentPhaseHuman, setHumanActive, setHumanState, getHumanById } = humanStore();
const { setCurrentAnimation, getAssetById } = assetStore();
const [animationPhase, setAnimationPhase] = useState<string>("idle");
@@ -24,6 +24,68 @@ function PillarJibInstance({ crane }: { readonly crane: CraneStatus }) {
const humanAsset = getAssetById(humanId || "");
const humanAction = getActionByUuid(selectedProduct.productUuid, actionTriggers?.[0]?.triggeredAsset?.triggeredAction?.actionUuid ?? "");
const idleTimeRef = useRef<number>(0);
const activeTimeRef = useRef<number>(0);
const previousTimeRef = useRef<number | null>(null);
const animationFrameIdRef = useRef<number | null>(null);
const isSpeedRef = useRef<number>(0);
const isPausedRef = useRef<boolean>(false);
const { speed } = useAnimationPlaySpeed();
const { isPaused } = usePauseButtonStore();
useEffect(() => {
isPausedRef.current = isPaused;
}, [isPaused]);
useEffect(() => {
isSpeedRef.current = speed;
}, [speed]);
function animate(currentTime: number) {
if (previousTimeRef.current === null) {
previousTimeRef.current = currentTime;
}
const deltaTime = (currentTime - previousTimeRef.current) / 1000;
previousTimeRef.current = currentTime;
if (crane.isActive) {
if (!isPausedRef.current) {
activeTimeRef.current += deltaTime * isSpeedRef.current;
}
} else {
if (!isPausedRef.current) {
idleTimeRef.current += deltaTime * isSpeedRef.current;
}
}
animationFrameIdRef.current = requestAnimationFrame(animate);
}
useEffect(() => {
if (!isPlaying) return;
if (crane.isActive) {
const roundedActiveTime = Math.round(activeTimeRef.current);
incrementActiveTime(crane.modelUuid, roundedActiveTime);
activeTimeRef.current = 0;
} else {
const roundedIdleTime = Math.round(idleTimeRef.current);
incrementIdleTime(crane.modelUuid, roundedIdleTime);
idleTimeRef.current = 0;
}
if (animationFrameIdRef.current === null) {
animationFrameIdRef.current = requestAnimationFrame(animate);
}
return () => {
if (animationFrameIdRef.current !== null) {
cancelAnimationFrame(animationFrameIdRef.current);
animationFrameIdRef.current = null;
}
};
}, [crane, cranes, isPlaying]);
useEffect(() => {
if (isPlaying) {
const human = getHumanById(humanId || "");
@@ -42,7 +104,13 @@ function PillarJibInstance({ crane }: { readonly crane: CraneStatus }) {
setHumanState(humanId, "running");
setCurrentAnimation(humanId, "working_standing", true, false, false);
}
} else if (crane.currentPhase === "dropping" && crane.currentMaterials.length > 0 && action.maxPickUpCount <= crane.currentMaterials.length && crane.isCarrying && human.currentPhase === "hooking") {
} else if (
crane.currentPhase === "dropping" &&
crane.currentMaterials.length > 0 &&
action.maxPickUpCount <= crane.currentMaterials.length &&
crane.isCarrying &&
human.currentPhase === "hooking"
) {
setCurrentPhaseHuman(humanId, "loadPoint-unloadPoint");
} else if (human.state === "running" && human.currentPhase === "unhooking") {
if (humanAsset?.animationState?.current === "working_standing" && humanAsset?.animationState?.isCompleted) {
@@ -83,7 +151,15 @@ function PillarJibInstance({ crane }: { readonly crane: CraneStatus }) {
return (
<>
<PillarJibAnimator key={crane.modelUuid} crane={crane} points={points} setPoints={setPoints} animationPhase={animationPhase} setAnimationPhase={setAnimationPhase} onAnimationComplete={handleAnimationComplete} />
<PillarJibAnimator
key={crane.modelUuid}
crane={crane}
points={points}
setPoints={setPoints}
animationPhase={animationPhase}
setAnimationPhase={setAnimationPhase}
onAnimationComplete={handleAnimationComplete}
/>
<MaterialAnimator crane={crane} />

View File

@@ -11,7 +11,7 @@ function HumanInstance({ human }: { readonly human: HumanStatus }) {
const { isPlaying } = usePlayButtonStore();
const { humanStore, productStore } = useSceneContext();
const { getActionByUuid, selectedProduct } = productStore();
const { incrementIdleTime, incrementActiveTime } = humanStore();
const { incrementIdleTime, incrementActiveTime, humans } = humanStore();
const idleTimeRef = useRef<number>(0);
const activeTimeRef = useRef<number>(0);
@@ -73,7 +73,7 @@ function HumanInstance({ human }: { readonly human: HumanStatus }) {
animationFrameIdRef.current = null;
}
};
}, [human, isPlaying]);
}, [human, humans, isPlaying]);
return (
<>

View File

@@ -19,7 +19,7 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
const { materialStore, armBotStore, vehicleStore, storageUnitStore, productStore, assetStore } = useSceneContext();
const { resetAsset } = assetStore();
const { setArmBotActive, setArmBotState, removeCurrentAction, incrementActiveTime, incrementIdleTime } = armBotStore();
const { setArmBotActive, setArmBotState, removeCurrentAction, incrementActiveTime, incrementIdleTime, armBots } = armBotStore();
const { decrementVehicleLoad, removeLastMaterial } = vehicleStore();
const { removeLastMaterial: removeLastStorageMaterial, updateCurrentLoad } = storageUnitStore();
const { getMaterialById, setIsVisible } = materialStore();
@@ -186,7 +186,7 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
animationFrameIdRef.current = null; // Reset the animation frame ID
}
};
}, [armBot, currentPhase, isPlaying]);
}, [armBot, armBots, currentPhase, isPlaying]);
useEffect(() => {
const targetBones = ikSolver?.mesh.skeleton.bones.find((b: any) => b.name === targetBone);
@@ -320,7 +320,15 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
{!isReset && isPlaying && (
<>
<IKInstance setIkSolver={setIkSolver} armBot={armBot} />
<RoboticArmAnimator HandleCallback={HandleCallback} restPosition={restPosition} ikSolver={ikSolver} targetBone={targetBone} armBot={armBot} path={path} currentPhase={currentPhase} />
<RoboticArmAnimator
HandleCallback={HandleCallback}
restPosition={restPosition}
ikSolver={ikSolver}
targetBone={targetBone}
armBot={armBot}
path={path}
currentPhase={currentPhase}
/>
</>
)}
<MaterialAnimator ikSolver={ikSolver} armBot={armBot} currentPhase={currentPhase} />

View File

@@ -1,15 +1,80 @@
import { useEffect } from 'react'
import MaterialAnimator from '../animator/MaterialAnimator'
import { useEffect, useRef } from "react";
import MaterialAnimator from "../animator/MaterialAnimator";
import { useSceneContext } from "../../../../scene/sceneContext";
import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore } from "../../../../../store/ui/usePlayButtonStore";
function StorageUnitInstance({ storageUnit }: Readonly<{ storageUnit: StorageUnitStatus }>) {
const { storageUnitStore } = useSceneContext();
const { storageUnits, incrementActiveTime, incrementIdleTime } = storageUnitStore();
const { isPlaying } = usePlayButtonStore();
const idleTimeRef = useRef<number>(0);
const activeTimeRef = useRef<number>(0);
const previousTimeRef = useRef<number | null>(null);
const animationFrameIdRef = useRef<number | null>(null);
const isSpeedRef = useRef<number>(0);
const isPausedRef = useRef<boolean>(false);
const { speed } = useAnimationPlaySpeed();
const { isPaused } = usePauseButtonStore();
useEffect(() => {
isPausedRef.current = isPaused;
}, [isPaused]);
useEffect(() => {
isSpeedRef.current = speed;
}, [speed]);
function animate(currentTime: number) {
if (previousTimeRef.current === null) {
previousTimeRef.current = currentTime;
}
const deltaTime = (currentTime - previousTimeRef.current) / 1000;
previousTimeRef.current = currentTime;
if (storageUnit.isActive) {
if (!isPausedRef.current) {
activeTimeRef.current += deltaTime * isSpeedRef.current;
}
} else {
if (!isPausedRef.current) {
idleTimeRef.current += deltaTime * isSpeedRef.current;
}
}
animationFrameIdRef.current = requestAnimationFrame(animate);
}
useEffect(() => {
if (!isPlaying) return;
if (storageUnit.isActive) {
const roundedActiveTime = Math.round(activeTimeRef.current);
incrementActiveTime(storageUnit.modelUuid, roundedActiveTime);
activeTimeRef.current = 0;
} else {
const roundedIdleTime = Math.round(idleTimeRef.current);
incrementIdleTime(storageUnit.modelUuid, roundedIdleTime);
idleTimeRef.current = 0;
}
if (animationFrameIdRef.current === null) {
animationFrameIdRef.current = requestAnimationFrame(animate);
}
return () => {
if (animationFrameIdRef.current !== null) {
cancelAnimationFrame(animationFrameIdRef.current);
animationFrameIdRef.current = null;
}
};
}, [storageUnit, storageUnits, isPlaying]);
useEffect(() => {
// console.log('storageUnit: ', storageUnit);
}, [storageUnit])
}, [storageUnit]);
return (
<MaterialAnimator storage={storageUnit} />
)
return <MaterialAnimator storage={storageUnit} />;
}
export default StorageUnitInstance
export default StorageUnitInstance;

View File

@@ -736,6 +736,14 @@ interface RoboticArmAnalysis {
placeAccuracy: number;
};
// Cost
costMetrics: CostMetrics;
// Energy
energyMetrics: EnergyMetrics & {
energyPerUnit: number; // Energy per item processed
};
// Historical Data
historicalData: {
timestamp: string;
@@ -784,6 +792,17 @@ interface MachineAnalysis {
quality: QualityMetrics & {
defectRate: number;
reworkRate: number;
scrapRate: number;
};
// Cost
costMetrics: CostMetrics & {
costPerUnit: number; // Cost per item processed
};
// Energy
energyMetrics: EnergyMetrics & {
energyPerUnit: number; // Energy per item processed
};
// Historical Data
@@ -821,6 +840,7 @@ interface StorageAnalysis {
averageOccupancy: number;
peakOccupancy: number;
turnoverRate: number; // Store/retrieve frequency
occupancyTrend: number; // Change in occupancy over time
};
// Throughput
@@ -838,6 +858,17 @@ interface StorageAnalysis {
// Quality
quality: QualityMetrics;
// Cost
costMetrics: CostMetrics & {
costPerUnit: number; // Cost per item processed
costPerStorageHour: number; // Cost per hour of storage
};
// Energy
energyMetrics: EnergyMetrics & {
energyPerUnit: number; // Energy per item processed
};
// Occupancy Trends
occupancyTrends: {
timestamp: string;
@@ -871,6 +902,7 @@ interface HumanAnalysis {
actionUuid: string;
actionName: string;
} | null;
loadUtilization: number;
};
// Time Metrics
@@ -887,6 +919,8 @@ interface HumanAnalysis {
actionsPerHour: number;
averageActionTime: number;
distanceTraveled: number;
averageSpeed: number;
loadEfficiency: number; // Current load / max capacity
};
// Workload Distribution
@@ -906,6 +940,17 @@ interface HumanAnalysis {
// Quality
quality: QualityMetrics;
// Cost
costMetrics: CostMetrics & {
costPerAction: number; // Cost per action performed
costPerHour: number; // Cost per hour of labor
};
// Energy
energyMetrics: EnergyMetrics & {
energyPerAction: number; // Energy per action performed
};
// Historical Data
historicalData: {
timestamp: string;
@@ -935,6 +980,7 @@ interface CraneAnalysis {
materialType: string | null;
materialId: string | null;
} | null;
loadUtilization: number;
};
// Time Metrics
@@ -957,6 +1003,8 @@ interface CraneAnalysis {
totalLifts: number;
averageLiftHeight: number;
movementEfficiency: number;
loadEfficiency: number;
cycleEfficiency: number;
};
// Efficiency
@@ -971,6 +1019,17 @@ interface CraneAnalysis {
positioningAccuracy: number;
};
// Cost
costMetrics: CostMetrics & {
costPerLift: number; // Cost per lift operation
costPerCycle: number; // Cost per operational cycle
};
// Energy
energyMetrics: EnergyMetrics & {
energyPerLift: number; // Energy per lift operation
};
// Historical Data
historicalData: {
timestamp: string;
@@ -1033,8 +1092,10 @@ interface SystemPerformance {
activeAssets: number;
totalAssets: number;
assetsInError: number;
assetsIdle: number;
averageIdleTime: number;
totalDowntime: number;
systemUptime: number;
};
}
@@ -1095,5 +1156,10 @@ interface AnalysisSchema {
lastUpdated: string;
dataPoints: number;
analysisVersion: string;
totalCost: number;
totalValueAdded: number;
totalEnergyConsumed: number;
energyCost: number;
carbonFootprint: number;
};
}