Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merged With AGV-UI

This commit is contained in:
Poovizhi99 2025-04-29 12:56:20 +05:30
parent 4dd0840980
commit fdf10589a7
5 changed files with 287 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
View File

@ -5,37 +5,40 @@ import { useGLTF } from "@react-three/drei";
import { useSelectedEventSphere } from "../../../../store/simulation/useSimulationStore";
import * as THREE from "three";
import { useThree } from "@react-three/fiber";
import { useVehicleStore } from "../../../../store/simulation/useVehicleStore";
type VehicleUIProps = {
vehicleStatusSample: VehicleEventSchema[];
setVehicleStatusSample: React.Dispatch<
React.SetStateAction<VehicleEventSchema[]>
>;
vehicle: any
};
const VehicleUI: React.FC<VehicleUIProps> = ({
vehicleStatusSample,
setVehicleStatusSample,
vehicle
}) => {
const { scene: startScene } = useGLTF(startPoint) as any;
const { scene: endScene } = useGLTF(startEnd) as any;
const { camera, gl, controls } = useThree();
const { selectedEventSphere } = useSelectedEventSphere();
const { updateVehicle } = useVehicleStore();
const startMarker = useRef<THREE.Group>(null);
const endMarker = useRef<THREE.Group>(null);
const hasInitialized = useRef(false);
const hasInitialized = useRef<boolean>(false);
const raycaster = useRef(new THREE.Raycaster());
const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Y = 0 plane
const mouse = useRef(new THREE.Vector2());
const prevMousePos = useRef({ x: 0, y: 0 });
const [draggedMarker, setDraggedMarker] = useState<"start" | "end" | null>(
null
);
const [dragOffset, setDragOffset] = useState<THREE.Vector3 | null>(null);
const [isRotating, setIsRotating] = useState(false);
const [isRotating, setIsRotating] = useState<boolean>(false);
const raycaster = useRef(new THREE.Raycaster());
const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Y = 0 plane
const mouse = useRef(new THREE.Vector2());
const prevMousePos = useRef({ x: 0, y: 0 });
// Initialize start/end markers
useEffect(() => {
@ -91,9 +94,8 @@ const VehicleUI: React.FC<VehicleUIProps> = ({
pickUpPoint.y,
pickUpPoint.z
);
const worldPos = selectedEventSphere.localToWorld(localPos);
worldPos.y = 0; // Force y to 0
startMarker.current.position.copy(worldPos);
localPos.y = 0; // Force y to 0
startMarker.current.position.copy(localPos);
} else {
const defaultLocal = new THREE.Vector3(0, 0, 1.5);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
@ -108,9 +110,10 @@ const VehicleUI: React.FC<VehicleUIProps> = ({
unLoadPoint.y,
unLoadPoint.z
);
const worldPos = selectedEventSphere.localToWorld(localPos);
worldPos.y = 0; // Force y to 0
endMarker.current.position.copy(worldPos);
localPos.y = 0; // Force y to 0
endMarker.current.position.copy(localPos);
} else {
const defaultLocal = new THREE.Vector3(0, 0, -1.5);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
@ -190,6 +193,7 @@ const VehicleUI: React.FC<VehicleUIProps> = ({
z: intersectPoint.z + dragOffset.z,
};
if (draggedMarker === "start" && startMarker.current) {
startMarker.current.position.set(newPos.x, newPos.y, newPos.z);
} else if (draggedMarker === "end" && endMarker.current) {
@ -215,36 +219,51 @@ const VehicleUI: React.FC<VehicleUIProps> = ({
draggedMarker === "start" ? startMarker.current : endMarker.current;
if (!marker) return;
const worldPos = marker.position.clone();
const localPos = selectedEventSphere.worldToLocal(worldPos);
const worldPos = marker.position;
// Direct update (no snapping, ground level forced at y = 0)
const updatedLocalPos = { x: localPos.x, y: 0, z: localPos.z };
const updatedLocalPos = { x: worldPos.x, y: 0, z: worldPos.z };
console.log('updatedLocalPos: ', updatedLocalPos);
setVehicleStatusSample((prev) =>
prev.map((vehicle) => {
if (
vehicle.modelUuid === selectedEventSphere.userData.modelUuid &&
selectedEventSphere
) {
const updatedVehicle = {
...vehicle,
point: {
...vehicle.point,
action: {
...vehicle.point?.action,
...(draggedMarker === "start"
? { pickUpPoint: updatedLocalPos }
: { unLoadPoint: updatedLocalPos }),
},
},
};
return updatedVehicle;
}
return vehicle;
})
);
console.log('draggedMarker: ', draggedMarker);
// setVehicleStatusSample((prev) =>
// prev.map((vehicle) => {
// if (
// vehicle.modelUuid === selectedEventSphere.userData.modelUuid &&
// selectedEventSphere
// ) {
// const updatedVehicle = {
// ...vehicle,
// point: {
// ...vehicle.point,
// action: {
// ...vehicle.point?.action,
// ...(draggedMarker === "start"
// ? { pickUpPoint: updatedLocalPos }
// : { unLoadPoint: updatedLocalPos }),
// },
// },
// };
// return updatedVehicle;
// }
// return vehicle;
// })
// );
updateVehicle(selectedEventSphere.userData.modelUuid, {
point: {
...vehicle?.point,
action: {
...vehicle?.point?.action,
...(draggedMarker === "start"
? { pickUpPoint: updatedLocalPos }
: { unLoadPoint: updatedLocalPos }),
},
},
});
setDraggedMarker(null);
setDragOffset(null);
};

25
app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
View File

@ -1,11 +1,9 @@
import { useEffect, useRef, useState } from 'react'
import { useFrame, useThree } from '@react-three/fiber';
import { useActiveTool, useFloorItems } from '../../../../../store/store';
import * as THREE from 'three';
import { Line } from '@react-three/drei';
import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
import useModuleStore from '../../../../../store/useModuleStore';
interface VehicleAnimatorProps {
path: [number, number, number][];
@ -17,23 +15,24 @@ interface VehicleAnimatorProps {
}
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
// console.log('path: ', path);
const { decrementVehicleLoad } = useVehicleStore();
const { isPaused } = usePauseButtonStore();
const { isPlaying } = usePlayButtonStore();
const { speed } = useAnimationPlaySpeed();
const { isReset, setReset } = useResetButtonStore();
const [restRotation, setRestingRotation] = useState<boolean>(true);
const [progress, setProgress] = useState<number>(0);
const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
const { scene } = useThree();
const progressRef = useRef<number>(0);
const movingForward = useRef<boolean>(true);
const completedRef = useRef<boolean>(false);
const isPausedRef = useRef<boolean>(false);
const pauseTimeRef = useRef<number | null>(null);
const [restRotation, setRestingRotation] = useState<boolean>(true);
const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
const [progress, setProgress] = useState<number>(0);
const { scene } = useThree();
let startTime: number;
let fixedInterval: number;
let coveredDistance = progressRef.current;
const isPausedRef = useRef(false);
const pauseTimeRef = useRef<number | null>(null);
useEffect(() => {
@ -73,6 +72,9 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
}
}, [isReset, isPlaying])
useEffect(() => {
isPausedRef.current = isPaused;
}, [isPaused]);
useFrame((_, delta) => {
const object = scene.getObjectByProperty('uuid', agvUuid);
@ -152,10 +154,6 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
}
});
useEffect(() => {
isPausedRef.current = isPaused;
}, [isPaused]);
function firstFrame() {
const droppedMaterial = agvDetail.currentLoad;
startTime = performance.now();
@ -182,11 +180,8 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
fixedInterval = ((unLoadDuration / agvDetail.currentLoad) * (1000 / speed));
if (elapsedTime >= fixedInterval) {
console.log('elapsedTime: ', elapsedTime);
let droppedMat = droppedMaterial - 1;
decrementVehicleLoad(agvDetail.modelUuid, 1);
if (droppedMat > 0) {
startTime = performance.now();
requestAnimationFrame(() => step(droppedMat));

7
app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
View File

@ -3,7 +3,7 @@ import VehicleAnimator from '../animator/vehicleAnimator';
import * as THREE from 'three';
import { NavMeshQuery } from '@recast-navigation/core';
import { useNavMesh } from '../../../../../store/store';
import { usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
function VehicleInstance({ agvDetail }: any) {
@ -12,7 +12,7 @@ function VehicleInstance({ agvDetail }: any) {
const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad } = useVehicleStore();
const [currentPhase, setCurrentPhase] = useState<string>('stationed');
const [path, setPath] = useState<[number, number, number][]>([]);
let isIncrememtable = useRef(true);
let isIncrememtable = useRef<boolean>(true);
const computePath = useCallback(
(start: any, end: any) => {
@ -20,7 +20,7 @@ function VehicleInstance({ agvDetail }: any) {
const navMeshQuery = new NavMeshQuery(navMesh);
const { path: segmentPath } = navMeshQuery.computePath(start, end);
return (
segmentPath?.map(({ x, y, z }) => [x, y + 0.1, z] as [number, number, number]) || []
segmentPath?.map(({ x, y, z }) => [x, 0, z] as [number, number, number]) || []
);
} catch {
return [];
@ -41,7 +41,6 @@ function VehicleInstance({ agvDetail }: any) {
setPath([]);
}
const increment = () => {
if (isIncrememtable.current) {
console.log('called');

22
app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
View File

@ -1,14 +1,32 @@
import React from 'react'
import VehicleInstance from './instance/vehicleInstance'
import { useVehicleStore } from '../../../../store/simulation/useVehicleStore'
import VehicleUI from '../../ui/vehicle/vehicleUI';
type VehicleUIProps = {
vehicleStatusSample: VehicleEventSchema[];
setVehicleStatusSample: React.Dispatch<
React.SetStateAction<VehicleEventSchema[]>
>;
};
const VehicleInstances: React.FC<VehicleUIProps> = ({
vehicleStatusSample,
setVehicleStatusSample,
}) => {
function VehicleInstances() {
const { vehicles } = useVehicleStore();
return (
<>
{vehicles.map((val: any, i: any) =>
<VehicleInstance agvDetail={val} key={i} />
<>
<VehicleInstance agvDetail={val} key={i} />
<VehicleUI
setVehicleStatusSample={setVehicleStatusSample}
vehicleStatusSample={vehicleStatusSample}
vehicle={val}
/>
</>
)}
</>

317
app/src/modules/simulation/vehicle/vehicles.tsx
View File

@ -5,133 +5,206 @@ import { useFloorItems } from "../../../store/store";
import { useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
import VehicleUI from "../ui/vehicle/vehicleUI";
function Vehicles() {
const { vehicles, addVehicle } = useVehicleStore();
const { selectedEventSphere } = useSelectedEventSphere();
const { floorItems } = useFloorItems();
const { vehicles, addVehicle } = useVehicleStore();
const [vehicleStatusSample, setVehicleStatusSample] = useState<
VehicleEventSchema[]
>([
{
modelUuid: "68f8dc55-7802-47fe-aa1c-eade54b4320a",
modelName: "AGV",
position: [89.61609306554463, 0, 33.634136622267356],
rotation: [0, 0, 0],
state: "idle",
type: "vehicle",
speed: 2.5,
point: {
uuid: "point-789",
position: [0, 1, 0],
rotation: [0, 0, 0],
action: {
actionUuid: "action-456",
actionName: "Deliver to Zone A",
actionType: "travel",
unLoadDuration: 10,
loadCapacity: 2,
pickUpPoint: null,
unLoadPoint: null,
triggers: [
{
triggerUuid: "trig-001",
triggerName: "Start Travel",
triggerType: "onStart",
delay: 0,
triggeredAsset: {
triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
triggeredPoint: {
pointName: "Pickup Arm Point",
pointUuid: "arm-point-01",
},
triggeredAction: {
actionName: "Grab Widget",
actionUuid: "grab-001",
},
},
},
{
triggerUuid: "trig-002",
triggerName: "Complete Travel",
triggerType: "onComplete",
delay: 2,
triggeredAsset: null,
},
],
const { floorItems } = useFloorItems()
const [vehicleStatusSample, setVehicleStatusSample] = useState<
VehicleEventSchema[]
>([
{
modelUuid: "9356f710-4727-4b50-bdb2-9c1e747ecc74",
modelName: "AGV",
position: [97.9252965204558, 0, 37.96138815638661],
rotation: [0, 0, 0],
state: "idle",
type: "vehicle",
speed: 2.5,
point: {
uuid: "point-789",
position: [0, 1, 0],
rotation: [0, 0, 0],
action: {
actionUuid: "action-456",
actionName: "Deliver to Zone A",
actionType: "travel",
unLoadDuration: 10,
loadCapacity: 2,
pickUpPoint: { x: 98.71483985219794, y: 0, z: 28.66321267938962 },
unLoadPoint: { x: 105.71483985219794, y: 0, z: 28.66321267938962 },
triggers: [
{
triggerUuid: "trig-001",
triggerName: "Start Travel",
triggerType: "onComplete",
delay: 0,
triggeredAsset: {
triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
}
},
{
triggerUuid: "trig-002",
triggerName: "Complete Travel",
triggerType: "onComplete",
delay: 2,
triggeredAsset: null
}
]
}
}
},
},
},
{
modelUuid: "3a8f6da6-da57-4ef5-91e3-b8daf89e5753",
modelName: "forklift",
position: [98.85729337188162, 0, 38.36616546567653],
rotation: [0, 0, 0],
state: "idle",
type: "vehicle",
speed: 2.5,
point: {
uuid: "point-789",
position: [0, 1, 0],
rotation: [0, 0, 0],
action: {
actionUuid: "action-456",
actionName: "Deliver to Zone A",
actionType: "travel",
unLoadDuration: 15,
loadCapacity: 5,
pickUpPoint: null,
unLoadPoint: null,
triggers: [
{
triggerUuid: "trig-001",
triggerName: "Start Travel",
triggerType: "onStart",
delay: 0,
triggeredAsset: {
triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
triggeredPoint: {
pointName: "Pickup Arm Point",
pointUuid: "arm-point-01",
},
triggeredAction: {
actionName: "Grab Widget",
actionUuid: "grab-001",
},
},
},
{
triggerUuid: "trig-002",
triggerName: "Complete Travel",
triggerType: "onComplete",
delay: 2,
triggeredAsset: null,
},
],
{
modelUuid: "b06960bb-3d2e-41f7-a646-335f389c68b4",
modelName: "AGV",
position: [89.61609306554463, 0, 33.634136622267356],
rotation: [0, 0, 0],
state: "idle",
type: "vehicle",
speed: 2.5,
point: {
uuid: "point-789",
position: [0, 1, 0],
rotation: [0, 0, 0],
action: {
actionUuid: "action-456",
actionName: "Deliver to Zone A",
actionType: "travel",
unLoadDuration: 10,
loadCapacity: 2,
pickUpPoint: null,
unLoadPoint: null,
triggers: [
{
triggerUuid: "trig-001",
triggerName: "Start Travel",
triggerType: "onStart",
delay: 0,
triggeredAsset: {
triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
}
},
{
triggerUuid: "trig-002",
triggerName: "Complete Travel",
triggerType: "onComplete",
delay: 2,
triggeredAsset: null
}
]
}
}
},
},
},
]);
// useEffect(())
console.log("vehicleStatusSample", vehicleStatusSample);
useEffect(() => {
addVehicle("123", vehicleStatusSample[0]);
// addVehicle('123', vehicleStatusSample[1]);
// addVehicle('123', vehicleStatusSample[2]);
}, []);
{
modelUuid: "cd7d0584-0684-42b4-b051-9e882c1914aa",
modelName: "AGV",
position: [105.90938758014703, 0, 31.584209911095215],
rotation: [0, 0, 0],
state: "idle",
type: "vehicle",
speed: 2.5,
point: {
uuid: "point-789",
position: [0, 1, 0],
rotation: [0, 0, 0],
action: {
actionUuid: "action-456",
actionName: "Deliver to Zone A",
actionType: "travel",
unLoadDuration: 10,
loadCapacity: 2,
pickUpPoint: null,
unLoadPoint: null,
triggers: [
{
triggerUuid: "trig-001",
triggerName: "Start Travel",
triggerType: "onStart",
delay: 0,
triggeredAsset: {
triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
}
},
{
triggerUuid: "trig-002",
triggerName: "Complete Travel",
triggerType: "onComplete",
delay: 2,
triggeredAsset: null
}
]
}
}
},
// {
// modelUuid: "e729a4f1-11d2-4778-8d6a-468f1b4f6b79",
// modelName: "forklift",
// position: [98.85729337188162, 0, 38.36616546567653],
// rotation: [0, 0, 0],
// state: "idle",
// type: "vehicle",
// speed: 2.5,
// point: {
// uuid: "point-789",
// position: [0, 1, 0],
// rotation: [0, 0, 0],
// action: {
// actionUuid: "action-456",
// actionName: "Deliver to Zone A",
// actionType: "travel",
// unLoadDuration: 15,
// loadCapacity: 5,
// pickUpPoint: null,
// unLoadPoint: null,
// triggers: [
// {
// triggerUuid: "trig-001",
// triggerName: "Start Travel",
// triggerType: "onStart",
// delay: 0,
// triggeredAsset: {
// triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
// triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
// triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
// }
// },
// {
// triggerUuid: "trig-002",
// triggerName: "Complete Travel",
// triggerType: "onComplete",
// delay: 2,
// triggeredAsset: null
// }
// ]
// }
// }
// }
]);
useEffect(() => {
console.log("vehicles", vehicles);
}, [vehicles])
useEffect(() => {
addVehicle("123", vehicleStatusSample[0]);
addVehicle('123', vehicleStatusSample[1]);
addVehicle('123', vehicleStatusSample[2]);
}, []);
useEffect(() => {}, [vehicles]);
return (
<>
<VehicleInstances />
<VehicleUI
setVehicleStatusSample={setVehicleStatusSample}
vehicleStatusSample={vehicleStatusSample}
/>
</>
);
return (
<>
<VehicleInstances setVehicleStatusSample={setVehicleStatusSample}
vehicleStatusSample={vehicleStatusSample} />
{/* <VehicleUI
setVehicleStatusSample={setVehicleStatusSample}
vehicleStatusSample={vehicles}
/> */}
</>
);
}
export default Vehicles;