added pause-play-rest-exit functionality
This commit is contained in:
parent
4b4fe53ee4
commit
3e1fc1c919
|
@ -17,10 +17,9 @@ interface VehicleAnimatorProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
|
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
|
||||||
const { decrementVehicleLoad, vehicles } = useVehicleStore();
|
const { decrementVehicleLoad } = useVehicleStore();
|
||||||
const { isPaused } = usePauseButtonStore();
|
const { isPaused } = usePauseButtonStore();
|
||||||
const { isPlaying, setIsPlaying } = usePlayButtonStore();
|
const { isPlaying } = usePlayButtonStore();
|
||||||
const { activeModule } = useModuleStore();
|
|
||||||
const { speed } = useAnimationPlaySpeed();
|
const { speed } = useAnimationPlaySpeed();
|
||||||
const { isReset, setReset } = useResetButtonStore();
|
const { isReset, setReset } = useResetButtonStore();
|
||||||
const [restRotation, setRestingRotation] = useState<boolean>(true);
|
const [restRotation, setRestingRotation] = useState<boolean>(true);
|
||||||
|
@ -31,11 +30,8 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
||||||
const movingForward = useRef<boolean>(true);
|
const movingForward = useRef<boolean>(true);
|
||||||
const completedRef = useRef<boolean>(false);
|
const completedRef = useRef<boolean>(false);
|
||||||
let startTime: number;
|
let startTime: number;
|
||||||
let pausedTime: number;
|
|
||||||
let fixedInterval: number;
|
let fixedInterval: number;
|
||||||
let coveredDistance = progressRef.current;
|
let coveredDistance = progressRef.current;
|
||||||
let accumulatedDistance = 0;
|
|
||||||
let index = 0;
|
|
||||||
const isPausedRef = useRef(false);
|
const isPausedRef = useRef(false);
|
||||||
const pauseTimeRef = useRef<number | null>(null);
|
const pauseTimeRef = useRef<number | null>(null);
|
||||||
|
|
||||||
|
@ -54,8 +50,9 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
||||||
setProgress(0);
|
setProgress(0);
|
||||||
completedRef.current = false;
|
completedRef.current = false;
|
||||||
}, [currentPath]);
|
}, [currentPath]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isReset) {
|
if (isReset || !isPlaying) {
|
||||||
reset();
|
reset();
|
||||||
setCurrentPath([]);
|
setCurrentPath([]);
|
||||||
setProgress(0);
|
setProgress(0);
|
||||||
|
@ -74,30 +71,8 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
||||||
object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
|
object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [isReset])
|
}, [isReset, isPlaying])
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log('isPlaying: ', isPlaying);
|
|
||||||
if (!isPlaying) {
|
|
||||||
reset();
|
|
||||||
setCurrentPath([]);
|
|
||||||
setProgress(0);
|
|
||||||
completedRef.current = false;
|
|
||||||
movingForward.current = true;
|
|
||||||
progressRef.current = 0;
|
|
||||||
startTime = 0;
|
|
||||||
coveredDistance = 0;
|
|
||||||
setReset(false);
|
|
||||||
setRestingRotation(true);
|
|
||||||
decrementVehicleLoad(agvDetail.modelUuid, 0);
|
|
||||||
const object = scene.getObjectByProperty('uuid', agvUuid);
|
|
||||||
if (object) {
|
|
||||||
object.position.set(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2])
|
|
||||||
let objectRotation = agvDetail.point.rotation
|
|
||||||
object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [isPlaying])
|
|
||||||
|
|
||||||
useFrame((_, delta) => {
|
useFrame((_, delta) => {
|
||||||
const object = scene.getObjectByProperty('uuid', agvUuid);
|
const object = scene.getObjectByProperty('uuid', agvUuid);
|
||||||
|
@ -106,6 +81,8 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
||||||
|
|
||||||
let totalDistance = 0;
|
let totalDistance = 0;
|
||||||
const distances = [];
|
const distances = [];
|
||||||
|
let accumulatedDistance = 0;
|
||||||
|
let index = 0;
|
||||||
|
|
||||||
for (let i = 0; i < currentPath.length - 1; i++) {
|
for (let i = 0; i < currentPath.length - 1; i++) {
|
||||||
const start = new THREE.Vector3(...currentPath[i]);
|
const start = new THREE.Vector3(...currentPath[i]);
|
||||||
|
@ -115,11 +92,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
||||||
totalDistance += segmentDistance;
|
totalDistance += segmentDistance;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
while (index < distances.length && coveredDistance > accumulatedDistance + distances[index]) {
|
||||||
while (
|
|
||||||
index < distances.length &&
|
|
||||||
coveredDistance > accumulatedDistance + distances[index]
|
|
||||||
) {
|
|
||||||
accumulatedDistance += distances[index];
|
accumulatedDistance += distances[index];
|
||||||
index++;
|
index++;
|
||||||
}
|
}
|
||||||
|
@ -178,85 +151,54 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
let pauseTime: number = 0;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Update the pause state in the ref
|
|
||||||
isPausedRef.current = isPaused;
|
isPausedRef.current = isPaused;
|
||||||
}, [isPaused]);
|
}, [isPaused]);
|
||||||
|
|
||||||
function firstFrame() {
|
function firstFrame() {
|
||||||
const unLoadDuration = agvDetail.point.action.unLoadDuration;
|
|
||||||
const droppedMaterial = agvDetail.currentLoad;
|
const droppedMaterial = agvDetail.currentLoad;
|
||||||
fixedInterval = ((unLoadDuration / droppedMaterial) * 1000) / speed;
|
|
||||||
// fixedInterval = (unLoadDuration / droppedMaterial) * 1000;
|
|
||||||
startTime = performance.now();
|
startTime = performance.now();
|
||||||
step(droppedMaterial);
|
step(droppedMaterial);
|
||||||
}
|
}
|
||||||
|
|
||||||
function step(droppedMaterial: number) {
|
function step(droppedMaterial: number) {
|
||||||
if (isPausedRef.current) {
|
if (isPausedRef.current) {
|
||||||
// Handle pause logic
|
|
||||||
if (!pauseTimeRef.current) {
|
if (!pauseTimeRef.current) {
|
||||||
pauseTimeRef.current = performance.now(); // Set pause time only once
|
pauseTimeRef.current = performance.now();
|
||||||
}
|
}
|
||||||
requestAnimationFrame(() => step(droppedMaterial)); // Continue calling step during pause
|
requestAnimationFrame(() => step(droppedMaterial));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (pauseTimeRef.current) {
|
if (pauseTimeRef.current) {
|
||||||
// Adjust start time after resuming from pause
|
|
||||||
const pauseDuration = performance.now() - pauseTimeRef.current;
|
const pauseDuration = performance.now() - pauseTimeRef.current;
|
||||||
startTime += pauseDuration;
|
startTime += pauseDuration;
|
||||||
pauseTimeRef.current = null; // Clear pause time
|
pauseTimeRef.current = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const elapsedTime = performance.now() - startTime; // Calculate elapsed time
|
const elapsedTime = performance.now() - startTime;
|
||||||
|
const unLoadDuration = agvDetail.point.action.unLoadDuration;
|
||||||
|
fixedInterval = ((unLoadDuration / agvDetail.currentLoad) * (1000 / speed));
|
||||||
|
|
||||||
if (elapsedTime >= fixedInterval) {
|
if (elapsedTime >= fixedInterval) {
|
||||||
|
console.log('elapsedTime: ', elapsedTime);
|
||||||
|
|
||||||
let droppedMat = droppedMaterial - 1;
|
let droppedMat = droppedMaterial - 1;
|
||||||
decrementVehicleLoad(agvDetail.modelUuid, 1); // Decrement vehicle load
|
decrementVehicleLoad(agvDetail.modelUuid, 1);
|
||||||
|
|
||||||
if (droppedMat > 0) {
|
if (droppedMat > 0) {
|
||||||
// Reset start time for the next step
|
|
||||||
startTime = performance.now();
|
startTime = performance.now();
|
||||||
requestAnimationFrame(() => step(droppedMat)); // Continue with the next step
|
requestAnimationFrame(() => step(droppedMat));
|
||||||
} else {
|
} else {
|
||||||
|
return;
|
||||||
return; // Exit when all materials are dropped
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
requestAnimationFrame(() => step(droppedMaterial)); // Continue animation
|
requestAnimationFrame(() => step(droppedMaterial));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// function firstFrame() {
|
|
||||||
// const unLoadDuration = agvDetail.point.action.unLoadDuration;
|
|
||||||
// const droppedMaterial = agvDetail.currentLoad;
|
|
||||||
// fixedInterval = (unLoadDuration / droppedMaterial) * 1000;
|
|
||||||
// startTime = performance.now();
|
|
||||||
// step(droppedMaterial);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// function step(droppedMaterial: number) {
|
|
||||||
// const elapsedTime = (performance.now() - startTime) * speed;
|
|
||||||
// if (elapsedTime >= fixedInterval) {
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// let droppedMat = droppedMaterial - 1;
|
|
||||||
// decrementVehicleLoad(agvDetail.modelUuid, 1);
|
|
||||||
// if (droppedMat === 0) return;
|
|
||||||
// startTime = performance.now();
|
|
||||||
// requestAnimationFrame(() => step(droppedMat));
|
|
||||||
// } else {
|
|
||||||
// requestAnimationFrame(() => step(droppedMaterial));
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{currentPath.length > 0 && (
|
{currentPath.length > 0 && (
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useCallback, useEffect, useState } from 'react';
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||||
import VehicleAnimator from '../animator/vehicleAnimator';
|
import VehicleAnimator from '../animator/vehicleAnimator';
|
||||||
import * as THREE from 'three';
|
import * as THREE from 'three';
|
||||||
import { NavMeshQuery } from '@recast-navigation/core';
|
import { NavMeshQuery } from '@recast-navigation/core';
|
||||||
|
@ -8,11 +8,11 @@ import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore
|
||||||
|
|
||||||
function VehicleInstance({ agvDetail }: any) {
|
function VehicleInstance({ agvDetail }: any) {
|
||||||
const { navMesh } = useNavMesh();
|
const { navMesh } = useNavMesh();
|
||||||
const { isPlaying, setIsPlaying } = usePlayButtonStore();
|
const { isPlaying } = usePlayButtonStore();
|
||||||
const { isReset } = useResetButtonStore();
|
|
||||||
const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad } = useVehicleStore();
|
const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad } = useVehicleStore();
|
||||||
const [currentPhase, setCurrentPhase] = useState<string>('stationed');
|
const [currentPhase, setCurrentPhase] = useState<string>('stationed');
|
||||||
const [path, setPath] = useState<[number, number, number][]>([]);
|
const [path, setPath] = useState<[number, number, number][]>([]);
|
||||||
|
let isIncrememtable = useRef(true);
|
||||||
|
|
||||||
const computePath = useCallback(
|
const computePath = useCallback(
|
||||||
(start: any, end: any) => {
|
(start: any, end: any) => {
|
||||||
|
@ -30,8 +30,9 @@ function VehicleInstance({ agvDetail }: any) {
|
||||||
);
|
);
|
||||||
|
|
||||||
function vehicleStatus(modelId: string, status: string) {
|
function vehicleStatus(modelId: string, status: string) {
|
||||||
// console.log(`AGV ${modelId}: ${status}`);
|
console.log(`AGV ${modelId}: ${status}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Function to reset everything
|
// Function to reset everything
|
||||||
function reset() {
|
function reset() {
|
||||||
setCurrentPhase('stationed');
|
setCurrentPhase('stationed');
|
||||||
|
@ -40,15 +41,14 @@ function VehicleInstance({ agvDetail }: any) {
|
||||||
setPath([]);
|
setPath([]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// console.log('isReset: ', isReset);
|
|
||||||
// if (isReset) {
|
|
||||||
// reset();
|
|
||||||
// }
|
|
||||||
// }, [isReset]);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const increment = () => {
|
||||||
|
if (isIncrememtable.current) {
|
||||||
|
console.log('called');
|
||||||
|
incrementVehicleLoad(agvDetail.modelUuid, 2);
|
||||||
|
isIncrememtable.current = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isPlaying) {
|
if (isPlaying) {
|
||||||
|
@ -58,19 +58,15 @@ function VehicleInstance({ agvDetail }: any) {
|
||||||
agvDetail.point.action.pickUpPoint
|
agvDetail.point.action.pickUpPoint
|
||||||
);
|
);
|
||||||
setPath(toPickupPath);
|
setPath(toPickupPath);
|
||||||
setVehicleActive(agvDetail.modelUuid, true);
|
|
||||||
setVehicleState(agvDetail.modelUuid, 'running');
|
|
||||||
setCurrentPhase('stationed-pickup');
|
setCurrentPhase('stationed-pickup');
|
||||||
|
setVehicleState(agvDetail.modelUuid, 'running');
|
||||||
|
setVehicleActive(agvDetail.modelUuid, true);
|
||||||
vehicleStatus(agvDetail.modelUuid, 'Started from station, heading to pickup');
|
vehicleStatus(agvDetail.modelUuid, 'Started from station, heading to pickup');
|
||||||
return;
|
return;
|
||||||
} else if (
|
} else if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'picking') {
|
||||||
!agvDetail.isActive &&
|
|
||||||
agvDetail.state === 'idle' &&
|
|
||||||
currentPhase === 'picking'
|
|
||||||
) {
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
incrementVehicleLoad(agvDetail.modelUuid, 2);
|
increment();
|
||||||
}, 5000);
|
}, 5000);
|
||||||
|
|
||||||
if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity) {
|
if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity) {
|
||||||
|
@ -79,49 +75,46 @@ function VehicleInstance({ agvDetail }: any) {
|
||||||
agvDetail.point.action.unLoadPoint
|
agvDetail.point.action.unLoadPoint
|
||||||
);
|
);
|
||||||
setPath(toDrop);
|
setPath(toDrop);
|
||||||
setVehicleActive(agvDetail.modelUuid, true);
|
|
||||||
setVehicleState(agvDetail.modelUuid, 'running');
|
|
||||||
setCurrentPhase('pickup-drop');
|
setCurrentPhase('pickup-drop');
|
||||||
|
setVehicleState(agvDetail.modelUuid, 'running');
|
||||||
|
setVehicleActive(agvDetail.modelUuid, true);
|
||||||
vehicleStatus(agvDetail.modelUuid, 'Started from pickup point, heading to drop point');
|
vehicleStatus(agvDetail.modelUuid, 'Started from pickup point, heading to drop point');
|
||||||
}
|
}
|
||||||
} else if (
|
} else if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'dropping' && agvDetail.currentLoad === 0) {
|
||||||
!agvDetail.isActive &&
|
|
||||||
agvDetail.state === 'idle' &&
|
|
||||||
currentPhase === 'dropping' &&
|
|
||||||
agvDetail.currentLoad === 0
|
|
||||||
) {
|
|
||||||
const dropToPickup = computePath(
|
const dropToPickup = computePath(
|
||||||
agvDetail.point.action.unLoadPoint,
|
agvDetail.point.action.unLoadPoint,
|
||||||
agvDetail.point.action.pickUpPoint
|
agvDetail.point.action.pickUpPoint
|
||||||
);
|
);
|
||||||
setPath(dropToPickup);
|
setPath(dropToPickup);
|
||||||
setVehicleActive(agvDetail.modelUuid, true);
|
|
||||||
setVehicleState(agvDetail.modelUuid, 'running');
|
|
||||||
setCurrentPhase('drop-pickup');
|
setCurrentPhase('drop-pickup');
|
||||||
|
setVehicleState(agvDetail.modelUuid, 'running');
|
||||||
|
setVehicleActive(agvDetail.modelUuid, true);
|
||||||
vehicleStatus(agvDetail.modelUuid, 'Started from dropping point, heading to pickup point');
|
vehicleStatus(agvDetail.modelUuid, 'Started from dropping point, heading to pickup point');
|
||||||
|
|
||||||
|
isIncrememtable.current = true;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
reset()
|
reset()
|
||||||
}
|
}
|
||||||
}, [vehicles, currentPhase, path, isPlaying, isReset]);
|
}, [vehicles, currentPhase, path, isPlaying]);
|
||||||
|
|
||||||
function handleCallBack() {
|
function handleCallBack() {
|
||||||
if (currentPhase === 'stationed-pickup') {
|
if (currentPhase === 'stationed-pickup') {
|
||||||
setVehicleActive(agvDetail.modelUuid, false);
|
|
||||||
setVehicleState(agvDetail.modelUuid, 'idle');
|
|
||||||
setCurrentPhase('picking');
|
setCurrentPhase('picking');
|
||||||
|
setVehicleState(agvDetail.modelUuid, 'idle');
|
||||||
|
setVehicleActive(agvDetail.modelUuid, false);
|
||||||
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point, waiting for material');
|
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point, waiting for material');
|
||||||
setPath([]);
|
setPath([]);
|
||||||
} else if (currentPhase === 'pickup-drop') {
|
} else if (currentPhase === 'pickup-drop') {
|
||||||
setVehicleActive(agvDetail.modelUuid, false);
|
|
||||||
setVehicleState(agvDetail.modelUuid, 'idle');
|
|
||||||
setCurrentPhase('dropping');
|
setCurrentPhase('dropping');
|
||||||
|
setVehicleState(agvDetail.modelUuid, 'idle');
|
||||||
|
setVehicleActive(agvDetail.modelUuid, false);
|
||||||
vehicleStatus(agvDetail.modelUuid, 'Reached drop point');
|
vehicleStatus(agvDetail.modelUuid, 'Reached drop point');
|
||||||
setPath([]);
|
setPath([]);
|
||||||
} else if (currentPhase === 'drop-pickup') {
|
} else if (currentPhase === 'drop-pickup') {
|
||||||
setVehicleActive(agvDetail.modelUuid, false);
|
|
||||||
setVehicleState(agvDetail.modelUuid, 'idle');
|
|
||||||
setCurrentPhase('picking');
|
setCurrentPhase('picking');
|
||||||
|
setVehicleState(agvDetail.modelUuid, 'idle');
|
||||||
|
setVehicleActive(agvDetail.modelUuid, false);
|
||||||
setPath([]);
|
setPath([]);
|
||||||
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point again, cycle complete');
|
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point again, cycle complete');
|
||||||
}
|
}
|
||||||
|
|
|
@ -97,7 +97,6 @@ function Vehicles() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
modelUuid: "e729a4f1-11d2-4778-8d6a-468f1b4f6b79",
|
modelUuid: "e729a4f1-11d2-4778-8d6a-468f1b4f6b79",
|
||||||
modelName: "forklift",
|
modelName: "forklift",
|
||||||
|
@ -151,7 +150,7 @@ function Vehicles() {
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('vehicles: ', vehicles);
|
// console.log('vehicles: ', vehicles);
|
||||||
}, [vehicles])
|
}, [vehicles])
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue