From 5cef9bdb8aacc1ebd29e5a28d1a4868a64e64e1f Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Tue, 15 Apr 2025 14:15:39 +0530 Subject: [PATCH 1/4] Refactor simulation types and update imports - Renamed simulation type imports from `simulation` to `simulationTypes` across multiple files for consistency. - Consolidated simulation type definitions into a new `simulationTypes.d.ts` file. - Updated relevant components (e.g., `ArmBot`, `IkInstances`, `PathConnector`, etc.) to use the new type definitions. - Removed the old `simulation.d.ts` file to clean up the codebase. - Adjusted function signatures and state management in components to align with the new type structure. --- .../mechanics/ArmBotMechanics.tsx | 25 +- .../mechanics/ConveyorMechanics.tsx | 2 +- .../mechanics/StaticMachineMechanics.tsx | 2 +- .../mechanics/VehicleMechanics.tsx | 2 +- .../ui/inputs/InputWithDropDown.tsx | 5 +- .../geomentries/assets/addAssetModel.ts | 2 +- .../geomentries/assets/deleteFloorItems.ts | 2 +- .../scene/IntialLoad/loadInitialFloorItems.ts | 3 +- .../controls/selection/copyPasteControls.tsx | 2 +- .../selection/duplicationControls.tsx | 2 +- .../scene/controls/selection/moveControls.tsx | 2 +- .../controls/selection/rotateControls.tsx | 2 +- .../controls/selection/selectionControls.tsx | 3 +- app/src/modules/simulation/armbot/ArmBot.tsx | 14 +- .../simulation/armbot/ArmBotInstances.tsx | 63 +++- .../armbot/IKAnimationController.tsx | 269 ++++++++++++++---- .../modules/simulation/armbot/IkInstances.tsx | 62 ++-- .../modules/simulation/path/pathConnector.tsx | 3 +- .../modules/simulation/path/pathCreation.tsx | 42 +-- .../simulation/process/processCreator.tsx | 2 +- app/src/modules/simulation/simulation.tsx | 61 ++-- app/src/store/store.ts | 2 +- .../{simulation.d.ts => simulationTypes.d.ts} | 0 23 files changed, 383 insertions(+), 189 deletions(-) rename app/src/types/{simulation.d.ts => simulationTypes.d.ts} (100%) diff --git a/app/src/components/layout/sidebarRight/mechanics/ArmBotMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/ArmBotMechanics.tsx index e157d07..70e297b 100644 --- a/app/src/components/layout/sidebarRight/mechanics/ArmBotMechanics.tsx +++ b/app/src/components/layout/sidebarRight/mechanics/ArmBotMechanics.tsx @@ -2,7 +2,7 @@ import React, { useRef, useMemo, useCallback, useState } from "react"; import { InfoIcon, AddIcon, RemoveIcon, ResizeHeightIcon } from "../../../icons/ExportCommonIcons"; import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; import { useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store"; -import * as SimulationTypes from '../../../../types/simulation'; +import * as SimulationTypes from '../../../../types/simulationTypes'; import LabledDropdown from "../../../ui/inputs/LabledDropdown"; import { handleResize } from "../../../../functions/handleResizePannel"; @@ -224,19 +224,28 @@ const ArmBotMechanics: React.FC = () => { }, [selectedPoint, selectedProcessIndex, handleProcessChange]); const handleTriggerSelect = useCallback((displayName: string, index: number) => { - const selected = connectedTriggers.find(t => t.displayName === displayName); + const availableOptions = getFilteredTriggerOptions(index); + const selectedDisplayIndex = availableOptions.indexOf(displayName); + + const filteredTriggers = connectedTriggers.filter(trigger => + !selectedPoint?.actions.processes + ?.filter((_, i) => i !== index) + .map(p => p.triggerId) + .includes(trigger.uuid) + ); + + const selected = filteredTriggers[selectedDisplayIndex]; + if (!selected || !selectedPoint?.actions.processes) return; const oldProcess = selectedPoint.actions.processes[index]; const updatedProcesses = [...selectedPoint.actions.processes]; - - // Only reset start/end if new trigger invalidates them (your logic can expand this) updatedProcesses[index] = { ...oldProcess, triggerId: selected.uuid, - startPoint: oldProcess.startPoint || "", // preserve if exists - endPoint: oldProcess.endPoint || "" // preserve if exists + startPoint: oldProcess.startPoint || "", + endPoint: oldProcess.endPoint || "" }; handleProcessChange(updatedProcesses); @@ -298,8 +307,10 @@ const ArmBotMechanics: React.FC = () => { handleSpeedChange(parseInt(value))} + onChange={(value) => handleSpeedChange(parseFloat(value))} />
diff --git a/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx index 080aba5..5e84d10 100644 --- a/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx +++ b/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx @@ -17,7 +17,7 @@ import { useSocketStore, } from "../../../../store/store"; import * as THREE from "three"; -import * as SimulationTypes from "../../../../types/simulation"; +import * as SimulationTypes from "../../../../types/simulationTypes"; import InputToggle from "../../../ui/inputs/InputToggle"; import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt"; diff --git a/app/src/components/layout/sidebarRight/mechanics/StaticMachineMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/StaticMachineMechanics.tsx index 812ed54..6342bac 100644 --- a/app/src/components/layout/sidebarRight/mechanics/StaticMachineMechanics.tsx +++ b/app/src/components/layout/sidebarRight/mechanics/StaticMachineMechanics.tsx @@ -2,7 +2,7 @@ import React, { useRef, useMemo, useCallback } from "react"; import { InfoIcon } from "../../../icons/ExportCommonIcons"; import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; import { useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store"; -import * as SimulationTypes from '../../../../types/simulation'; +import * as SimulationTypes from '../../../../types/simulationTypes'; import LabledDropdown from "../../../ui/inputs/LabledDropdown"; import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt"; diff --git a/app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx index 73199c9..147d5cb 100644 --- a/app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx +++ b/app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx @@ -2,7 +2,7 @@ import React, { useRef, useMemo } from "react"; import { InfoIcon } from "../../../icons/ExportCommonIcons"; import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store"; -import * as SimulationTypes from '../../../../types/simulation'; +import * as SimulationTypes from '../../../../types/simulationTypes'; import PositionInput from "../customInput/PositionInputs"; import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt"; import LabeledButton from "../../../ui/inputs/LabledButton"; diff --git a/app/src/components/ui/inputs/InputWithDropDown.tsx b/app/src/components/ui/inputs/InputWithDropDown.tsx index b0fc135..b672313 100644 --- a/app/src/components/ui/inputs/InputWithDropDown.tsx +++ b/app/src/components/ui/inputs/InputWithDropDown.tsx @@ -4,7 +4,8 @@ import RenameInput from "./RenameInput"; type InputWithDropDownProps = { label: string; value: string; - min?: number + min?: number; + step?: number; defaultValue?: string; options?: string[]; // Array of dropdown options activeOption?: string; // The currently active dropdown option @@ -18,6 +19,7 @@ const InputWithDropDown: React.FC = ({ label, value, min, + step, defaultValue, options, activeOption, @@ -45,6 +47,7 @@ const InputWithDropDown: React.FC = ({
{ diff --git a/app/src/modules/builder/geomentries/assets/addAssetModel.ts b/app/src/modules/builder/geomentries/assets/addAssetModel.ts index 97adec3..0db803f 100644 --- a/app/src/modules/builder/geomentries/assets/addAssetModel.ts +++ b/app/src/modules/builder/geomentries/assets/addAssetModel.ts @@ -5,7 +5,7 @@ import { toast } from 'react-toastify'; import TempLoader from './tempLoader'; import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; import * as Types from "../../../../types/world/worldTypes"; -import * as SimulationTypes from "../../../../types/simulation"; +import * as SimulationTypes from "../../../../types/simulationTypes"; import { retrieveGLTF, storeGLTF } from '../../../../utils/indexDB/idbUtils'; // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; import { Socket } from 'socket.io-client'; diff --git a/app/src/modules/builder/geomentries/assets/deleteFloorItems.ts b/app/src/modules/builder/geomentries/assets/deleteFloorItems.ts index e904947..dbd7e9b 100644 --- a/app/src/modules/builder/geomentries/assets/deleteFloorItems.ts +++ b/app/src/modules/builder/geomentries/assets/deleteFloorItems.ts @@ -2,7 +2,7 @@ import { toast } from 'react-toastify'; import * as THREE from 'three'; import * as Types from "../../../../types/world/worldTypes"; -import * as SimulationTypes from "../../../../types/simulation"; +import * as SimulationTypes from "../../../../types/simulationTypes"; // import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi'; import { Socket } from 'socket.io-client'; import { getFloorAssets } from '../../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi'; diff --git a/app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts b/app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts index 08bed84..7ca7db9 100644 --- a/app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts +++ b/app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts @@ -5,7 +5,7 @@ import * as THREE from 'three'; import * as CONSTANTS from '../../../types/world/worldConstants'; import { toast } from 'react-toastify'; import * as Types from "../../../types/world/worldTypes"; -import * as SimulationTypes from "../../..//types/simulation"; +import * as SimulationTypes from "../../../types/simulationTypes"; import { initializeDB, retrieveGLTF, storeGLTF } from '../../../utils/indexDB/idbUtils'; import { getCamera } from '../../../services/factoryBuilder/camera/getCameraApi'; import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi'; @@ -228,7 +228,6 @@ function processEventData(item: SimulationTypes.EventData, setSimulationStates: } else if (item.eventData?.type === 'StaticMachine') { const data: any = item.eventData; - item.eventData.points.position = [0, 1.5, 1] data.modeluuid = item.modeluuid; data.modelName = item.modelname; data.position = item.position; diff --git a/app/src/modules/scene/controls/selection/copyPasteControls.tsx b/app/src/modules/scene/controls/selection/copyPasteControls.tsx index 87ed646..84d6047 100644 --- a/app/src/modules/scene/controls/selection/copyPasteControls.tsx +++ b/app/src/modules/scene/controls/selection/copyPasteControls.tsx @@ -5,7 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore, import { toast } from "react-toastify"; // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; import * as Types from "../../../../types/world/worldTypes"; -import * as SimulationTypes from "../../../../types/simulation"; +import * as SimulationTypes from "../../../../types/simulationTypes"; import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys"; const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, selectionGroup, setDuplicatedObjects, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) => { diff --git a/app/src/modules/scene/controls/selection/duplicationControls.tsx b/app/src/modules/scene/controls/selection/duplicationControls.tsx index 41bbce3..5ce0603 100644 --- a/app/src/modules/scene/controls/selection/duplicationControls.tsx +++ b/app/src/modules/scene/controls/selection/duplicationControls.tsx @@ -5,7 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore, import { toast } from "react-toastify"; // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; import * as Types from "../../../../types/world/worldTypes"; -import * as SimulationTypes from "../../../../types/simulation"; +import * as SimulationTypes from "../../../../types/simulationTypes"; import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys"; diff --git a/app/src/modules/scene/controls/selection/moveControls.tsx b/app/src/modules/scene/controls/selection/moveControls.tsx index 99b9a43..d717ecb 100644 --- a/app/src/modules/scene/controls/selection/moveControls.tsx +++ b/app/src/modules/scene/controls/selection/moveControls.tsx @@ -5,7 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore, // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; import { toast } from "react-toastify"; import * as Types from "../../../../types/world/worldTypes"; -import * as SimulationTypes from "../../../../types/simulation"; +import * as SimulationTypes from "../../../../types/simulationTypes"; import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys"; function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) { diff --git a/app/src/modules/scene/controls/selection/rotateControls.tsx b/app/src/modules/scene/controls/selection/rotateControls.tsx index 611d14b..f602bc4 100644 --- a/app/src/modules/scene/controls/selection/rotateControls.tsx +++ b/app/src/modules/scene/controls/selection/rotateControls.tsx @@ -5,7 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore, // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; import { toast } from "react-toastify"; import * as Types from "../../../../types/world/worldTypes"; -import * as SimulationTypes from "../../../../types/simulation"; +import * as SimulationTypes from "../../../../types/simulationTypes"; import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, boundingBoxRef }: any) { diff --git a/app/src/modules/scene/controls/selection/selectionControls.tsx b/app/src/modules/scene/controls/selection/selectionControls.tsx index d1eed1e..d26889d 100644 --- a/app/src/modules/scene/controls/selection/selectionControls.tsx +++ b/app/src/modules/scene/controls/selection/selectionControls.tsx @@ -8,7 +8,7 @@ import BoundingBox from "./boundingBoxHelper"; import { toast } from "react-toastify"; // import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi'; import * as Types from "../../../../types/world/worldTypes"; -import * as SimulationTypes from "../../../../types/simulation"; +import * as SimulationTypes from "../../../../types/simulationTypes"; import DuplicationControls from "./duplicationControls"; import CopyPasteControls from "./copyPasteControls"; @@ -199,6 +199,7 @@ const SelectionControls: React.FC = () => { setDuplicatedObjects([]); setSelectedAssets([]); }; + const updateBackend = async (updatedPaths: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => { if (updatedPaths.length === 0) return; const email = localStorage.getItem("email"); diff --git a/app/src/modules/simulation/armbot/ArmBot.tsx b/app/src/modules/simulation/armbot/ArmBot.tsx index db0f956..2e77206 100644 --- a/app/src/modules/simulation/armbot/ArmBot.tsx +++ b/app/src/modules/simulation/armbot/ArmBot.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import { useThree } from "@react-three/fiber"; import useModuleStore from "../../../store/useModuleStore"; import { useSimulationStates } from "../../../store/store"; -import * as SimulationTypes from '../../../types/simulation'; +import * as SimulationTypes from '../../../types/simulationTypes'; import { ArmbotInstances } from "./ArmBotInstances"; interface ArmBotState { @@ -12,14 +12,18 @@ interface ArmBotState { status: string; material: string; triggerId: string; - connections: any + actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; }; } -const ArmBot: React.FC = () => { +interface ArmBotProps { + armBots: ArmBotState[]; + setArmBots: React.Dispatch>; +} + +const ArmBot = ({ armBots, setArmBots }: ArmBotProps) => { const { activeModule } = useModuleStore(); const { scene } = useThree(); const { simulationStates } = useSimulationStates(); - const [armBots, setArmBots] = useState([]); useEffect(() => { const filtered = simulationStates.filter((s): s is SimulationTypes.ArmBotEventsSchema => s.type === "ArmBot"); @@ -30,7 +34,7 @@ const ArmBot: React.FC = () => { status: "idle", material: "default", triggerId: '', - connections: bot.points.connections + actions: bot.points.actions })); setArmBots(initialStates); }, [simulationStates]); diff --git a/app/src/modules/simulation/armbot/ArmBotInstances.tsx b/app/src/modules/simulation/armbot/ArmBotInstances.tsx index 6ce4e01..8a1380b 100644 --- a/app/src/modules/simulation/armbot/ArmBotInstances.tsx +++ b/app/src/modules/simulation/armbot/ArmBotInstances.tsx @@ -1,5 +1,15 @@ import IkInstances from "./IkInstances"; import armModel from "../../../assets/gltf-glb/rigged/ik_arm_4.glb"; +import { useEffect, useState } from "react"; +import { useThree } from "@react-three/fiber"; +import { Vector3 } from "three"; + +interface Process { + triggerId: string; + startPoint?: Vector3; + endPoint?: Vector3; + speed: number; +} interface ArmBotState { uuid: string; @@ -8,18 +18,65 @@ interface ArmBotState { status: string; material: string; triggerId: string; - connections: any + actions: { + uuid: string; + name: string; + speed: number; + processes: { + triggerId: string; + startPoint: string; + endPoint: string; + }[]; + }; } interface ArmbotInstancesProps { index: number; armBot: ArmBotState; - setArmBots: (armBots: ArmBotState[]) => void; + setArmBots: React.Dispatch>; } export const ArmbotInstances: React.FC = ({ index, armBot, setArmBots }) => { + const { scene } = useThree(); + const [processes, setProcesses] = useState([]); + + useEffect(() => { + + if (armBot.actions.processes.length > 0) { + const mappedProcesses = armBot.actions.processes.map((process) => { + return { + triggerId: process.triggerId, + startPoint: scene.getObjectByProperty('uuid', process.startPoint)?.getWorldPosition(new Vector3()), + endPoint: scene.getObjectByProperty('uuid', process.endPoint)?.getWorldPosition(new Vector3()), + speed: armBot.actions.speed + }; + }); + setProcesses(mappedProcesses); + } else { + setProcesses([]); + } + }, [armBot, scene]); + + const updateArmBotStatus = (status: string) => { + setArmBots((prevArmBots) => { + return prevArmBots.map(bot => { + if (bot.uuid === armBot.uuid) { + return { ...bot, status }; + } + return bot; + }); + }); + }; return ( - + ); }; \ No newline at end of file diff --git a/app/src/modules/simulation/armbot/IKAnimationController.tsx b/app/src/modules/simulation/armbot/IKAnimationController.tsx index 45d482f..538f0aa 100644 --- a/app/src/modules/simulation/armbot/IKAnimationController.tsx +++ b/app/src/modules/simulation/armbot/IKAnimationController.tsx @@ -1,96 +1,245 @@ -import { useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo, useState, useRef } from "react"; import { useFrame } from "@react-three/fiber"; import * as THREE from "three"; +import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; + +type IKAnimationControllerProps = { + ikSolver: any; + process: { + triggerId: string; + startPoint: THREE.Vector3; + endPoint: THREE.Vector3; + speed: number; + }[]; + selectedTrigger: string; + targetBoneName: string; + uuid: string; + logStatus: (status: string) => void; + groupRef: React.RefObject; + updateArmBotStatus: (status: string) => void; +} const IKAnimationController = ({ ikSolver, process, selectedTrigger, targetBoneName, -}: { - ikSolver: any; - process: { - trigger: string; - start: THREE.Vector3; - end: THREE.Vector3; - speed: number; - }[]; - selectedTrigger: string; - targetBoneName: string; -}) => { + uuid, + logStatus, + groupRef, + updateArmBotStatus +}: IKAnimationControllerProps) => { const [progress, setProgress] = useState(0); + const [initialProgress, setInitialProgress] = useState(0); + const [needsInitialMovement, setNeedsInitialMovement] = useState(true); + const [isInitializing, setIsInitializing] = useState(true); const restSpeed = 0.1; + const restPosition = new THREE.Vector3(0, 2, 1.6); + const { isPlaying } = usePlayButtonStore(); + + // Track previous states for comparison + const prevStateRef = useRef({ + isInitializing: true, + needsInitialMovement: true, + selectedTrigger: "", + progress: 0 + }); + + // Track previous status for comparison + const prevStatusRef = useRef(""); + + const initialCurveRef = useRef(null); + const initialStartPositionRef = useRef(null); useEffect(() => { setProgress(0); }, [selectedTrigger]); - const processedCurves = useMemo(() => { - const restPosition = new THREE.Vector3(0.2, 2.3, 1.6); - return process.map((p) => { - const mid = new THREE.Vector3( - (p.start.x + p.end.x) / 1, - Math.max(p.start.y, p.end.y) + 0.8, - (p.start.z + p.end.z) / 0.9 + useEffect(() => { + if (ikSolver) { + const targetBone = ikSolver.mesh.skeleton.bones.find( + (b: any) => b.name === targetBoneName ); - const points = [ - restPosition.clone(), - p.start.clone(), - mid.clone(), - p.end.clone(), - restPosition.clone(), - ]; - const curve = new THREE.CatmullRomCurve3(points); - const restToStartDist = points[0].distanceTo(points[1]); - const startToEndDist = points[1].distanceTo(points[3]); - const endToRestDist = points[3].distanceTo(points[4]); + if (targetBone) { + initialStartPositionRef.current = targetBone.position.clone(); + calculateInitialCurve(targetBone.position); + logStatus(`[Arm ${uuid}] Initializing IK system, starting position: ${targetBone.position.toArray()}`); + } + } + }, [ikSolver]); - const totalDist = restToStartDist + startToEndDist + endToRestDist; - const restToStartRange = [0, restToStartDist / totalDist]; - const startToEndRange = [ - restToStartRange[1], - restToStartRange[1] + startToEndDist / totalDist, - ]; - const endToRestRange = [startToEndRange[1], 1]; + // Log state changes + useEffect(() => { + const prev = prevStateRef.current; - return { - trigger: p.trigger, - curve, - speed: p.speed, - restToStartRange, - startToEndRange, - endToRestRange, - }; + if (prev.isInitializing !== isInitializing) { + if (!isInitializing) { + logStatus(`[Arm ${uuid}] Completed initialization, now at rest position`); + } + } + + if (prev.needsInitialMovement !== needsInitialMovement && !needsInitialMovement) { + logStatus(`[Arm ${uuid}] Reached rest position, ready for animation`); + } + + if (prev.selectedTrigger !== selectedTrigger) { + logStatus(`[Arm ${uuid}] Processing new trigger: ${selectedTrigger}`); + } + + // Update previous state + prevStateRef.current = { + isInitializing, + needsInitialMovement, + selectedTrigger, + progress + }; + }, [isInitializing, needsInitialMovement, selectedTrigger, progress]); + + const calculateInitialCurve = (startPosition: THREE.Vector3) => { + const direction = new THREE.Vector3().subVectors(restPosition, startPosition); + const distance = direction.length(); + direction.normalize(); + + const perpendicular = new THREE.Vector3(-direction.z, 0, direction.x).normalize(); + + const midHeight = 0.5; + const tiltAmount = 1; + const mid = new THREE.Vector3() + .addVectors(startPosition, restPosition) + .multiplyScalar(0.5) + .add(perpendicular.clone().multiplyScalar(distance * 0.3 * tiltAmount)) + .add(new THREE.Vector3(0, midHeight, 0)); + + initialCurveRef.current = new THREE.CatmullRomCurve3([ + startPosition, + new THREE.Vector3().lerpVectors(startPosition, mid, 0.33), + mid, + new THREE.Vector3().lerpVectors(mid, restPosition, 0.66), + restPosition + ]); + }; + + const processedCurves = useMemo(() => { + return process.map((p) => { + const tempLift = 0.5; + const localStart = groupRef.current?.worldToLocal(p.startPoint.clone().add(new THREE.Vector3(0, tempLift, 0))); + const localEnd = groupRef.current?.worldToLocal(p.endPoint.clone().add(new THREE.Vector3(0, tempLift, 0))); + + if (localStart && localEnd) { + + const mid = new THREE.Vector3( + (localStart.x + localEnd.x) / 1, + Math.max(localStart.y, localEnd.y) + 0.8, + (localStart.z + localEnd.z) / 0.9 + ); + + const points = [ + restPosition.clone(), + localStart.clone(), + mid.clone(), + localEnd.clone(), + restPosition.clone(), + ]; + const curve = new THREE.CatmullRomCurve3(points); + const restToStartDist = points[0].distanceTo(points[1]); + const startToEndDist = points[1].distanceTo(points[3]); + const endToRestDist = points[3].distanceTo(points[4]); + + const totalDist = restToStartDist + startToEndDist + endToRestDist; + const restToStartRange = [0, restToStartDist / totalDist]; + const startToEndRange = [ + restToStartRange[1], + restToStartRange[1] + startToEndDist / totalDist, + ]; + const endToRestRange = [startToEndRange[1], 1]; + + return { + trigger: p.triggerId, + curve, + speed: p.speed, + restToStartRange, + startToEndRange, + endToRestRange, + }; + } }); - }, [process]); + }, [process, groupRef]); const activeCurve = useMemo(() => { - return processedCurves.find((c) => c.trigger === selectedTrigger); + return processedCurves.find((c) => c?.trigger === selectedTrigger); }, [processedCurves, selectedTrigger]); + // Initial movement to rest position useFrame((_, delta) => { - if (!ikSolver || !activeCurve) return; + if (!ikSolver || !needsInitialMovement || !isInitializing || !initialCurveRef.current) return; - const { curve, speed, startToEndRange } = activeCurve; + const targetBone = ikSolver.mesh.skeleton.bones.find( + (b: any) => b.name === targetBoneName + ); + if (!targetBone) return; + + setInitialProgress((prev) => { + const next = prev + delta * 0.5; + if (next >= 1) { + targetBone.position.copy(restPosition); + setNeedsInitialMovement(false); + setIsInitializing(false); + return 1; + } + targetBone.position.copy(initialCurveRef.current!.getPoint(next)); + return next; + }); + + ikSolver.update(); + }); + + // Main animation loop + useFrame((_, delta) => { + if (!ikSolver || !activeCurve || isInitializing) return; + + const { curve, speed, restToStartRange, startToEndRange, endToRestRange } = activeCurve; const targetBone = ikSolver.mesh.skeleton.bones.find( (b: any) => b.name === targetBoneName ); if (!targetBone) return; let currentSpeed = restSpeed; - if (progress >= startToEndRange[0] && progress < startToEndRange[1]) { + let currentStatus = "idle"; // Default status + + // Determine current phase and status + if (progress < restToStartRange[1]) { + currentSpeed = restSpeed; + currentStatus = "moving"; // Moving to start point + } else if (progress >= startToEndRange[0] && progress < startToEndRange[1]) { currentSpeed = speed; + currentStatus = "moving"; // Moving between points + } else if (progress >= endToRestRange[0] && progress < 1) { + currentSpeed = restSpeed; + currentStatus = "moving"; // Returning to rest + } else if (progress >= 1) { + currentStatus = "idle"; // Completed cycle } - setProgress((prev) => { - const next = prev + delta * currentSpeed; - if (next >= 1) { - targetBone.position.copy(curve.getPoint(1)); - return 1; - } - targetBone.position.copy(curve.getPoint(next)); - return next; - }); + // Update status when it changes + if (prevStatusRef.current !== currentStatus) { + updateArmBotStatus(currentStatus); + prevStatusRef.current = currentStatus; + } + + // Only update progress if we're not already at the end + if (progress < 1) { + setProgress((prev) => { + const next = prev + delta * currentSpeed; + return Math.min(next, 1); // Cap at 1 + }); + } + + // Update bone position based on progress + if (progress < 1) { + targetBone.position.copy(curve.getPoint(progress)); + } else { + targetBone.position.copy(curve.getPoint(1)); + } ikSolver.update(); }); @@ -98,4 +247,4 @@ const IKAnimationController = ({ return null; }; -export default IKAnimationController; +export default IKAnimationController; \ No newline at end of file diff --git a/app/src/modules/simulation/armbot/IkInstances.tsx b/app/src/modules/simulation/armbot/IkInstances.tsx index b789f3a..7b02941 100644 --- a/app/src/modules/simulation/armbot/IkInstances.tsx +++ b/app/src/modules/simulation/armbot/IkInstances.tsx @@ -1,43 +1,40 @@ import * as THREE from "three"; import { useEffect, useMemo, useRef, useState } from "react"; -import { useLoader } from "@react-three/fiber"; +import { useFrame, useLoader } from "@react-three/fiber"; import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { clone } from "three/examples/jsm/utils/SkeletonUtils"; import { CCDIKSolver, CCDIKHelper, } from "three/examples/jsm/animation/CCDIKSolver"; import IKAnimationController from "./IKAnimationController"; +import { TransformControls } from "@react-three/drei"; -const IkInstances = ({ modelUrl, position, rotation }: { modelUrl: string; position: [number, number, number]; rotation: [number, number, number]; }) => { +const IkInstances = ({ + uuid, + modelUrl, + processes, + position, + rotation, + updateArmBotStatus +}: { + uuid: string; + modelUrl: string; + processes: any; + position: [number, number, number]; + rotation: [number, number, number]; + updateArmBotStatus: (status: string) => void; +}) => { const [ikSolver, setIkSolver] = useState(null); - const [selectedTrigger, setSelectedTrigger] = useState("idle"); + const [selectedTrigger, setSelectedTrigger] = useState(""); const gltf = useLoader(GLTFLoader, modelUrl, (loader) => { const draco = new DRACOLoader(); - draco.setDecoderPath( - "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/" - ); + draco.setDecoderPath("https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/"); loader.setDRACOLoader(draco); }); const cloned = useMemo(() => clone(gltf.scene), [gltf]); const groupRef = useRef(null); - const [selectedArm, setSelectedArm] = useState(); const targetBoneName = "Target"; const skinnedMeshName = "link_0"; - const process = useMemo(() => [ - { - trigger: "Trigger1", - start: new THREE.Vector3(-0.75, 1.5, -2.2), - end: new THREE.Vector3(0, 1.2, 2.2), - speed: 0.25, - }, - { - trigger: "Trigger2", - start: new THREE.Vector3(0, 1.2, 2.2), - end: new THREE.Vector3(0.75, 1.5, -2.2), - speed: 0.22, - } - ], []); - useEffect(() => { if (!gltf) return; const OOI: any = {}; @@ -86,7 +83,7 @@ const IkInstances = ({ modelUrl, position, rotation }: { modelUrl: string; posit }, [gltf]); useEffect(() => { - const triggers = ['Trigger1', 'Trigger2']; + const triggers = ["9f4a9b8b-e60d-4754-8c99-d71979da0e71", "b77b4f0a-ce55-4fe0-a181-a43ab3d01c83"]; let index = 0; const cycleTriggers = setInterval(() => { @@ -97,30 +94,33 @@ const IkInstances = ({ modelUrl, position, rotation }: { modelUrl: string; posit return () => clearInterval(cycleTriggers); }, []); + const logStatus = (status: string) => { + // console.log(status); + } + return ( <> { - e.stopPropagation(); - setSelectedArm(groupRef.current?.getObjectByName(targetBoneName)) - }} + position={position} + rotation={rotation} > - {/* {selectedArm && } */} ); }; diff --git a/app/src/modules/simulation/path/pathConnector.tsx b/app/src/modules/simulation/path/pathConnector.tsx index 0071240..0008a73 100644 --- a/app/src/modules/simulation/path/pathConnector.tsx +++ b/app/src/modules/simulation/path/pathConnector.tsx @@ -2,7 +2,7 @@ import { useFrame, useThree } from '@react-three/fiber'; import React, { useEffect, useRef, useState } from 'react'; import * as THREE from 'three'; import * as Types from '../../../types/world/worldTypes'; -import * as SimulationTypes from '../../../types/simulation'; +import * as SimulationTypes from '../../../types/simulationTypes'; import { QuadraticBezierLine } from '@react-three/drei'; import { useDeleteTool, useIsConnecting, useRenderDistance, useSimulationStates, useSocketStore } from '../../../store/store'; import useModuleStore from '../../../store/useModuleStore'; @@ -982,7 +982,6 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec setSimulationStates(updatedStates); }; - return ( {simulationStates.flatMap(path => { diff --git a/app/src/modules/simulation/path/pathCreation.tsx b/app/src/modules/simulation/path/pathCreation.tsx index 4a8da49..1e9601d 100644 --- a/app/src/modules/simulation/path/pathCreation.tsx +++ b/app/src/modules/simulation/path/pathCreation.tsx @@ -1,5 +1,5 @@ import * as THREE from "three"; -import * as SimulationTypes from "../../../types/simulation"; +import * as SimulationTypes from "../../../types/simulationTypes"; import { useRef, useState, useEffect, useMemo } from "react"; import { Sphere, TransformControls } from "@react-three/drei"; import { @@ -66,45 +66,6 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec }); }); - const updateSimulationPaths = () => { - if (!selectedActionSphere) return; - - const updatedPaths = simulationStates.map((path) => { - if (path.type === "Conveyor") { - return { - ...path, - points: path.points.map((point) => - point.uuid === selectedActionSphere.points.uuid - ? { - ...point, - position: [ - selectedActionSphere.points.position.x, - selectedActionSphere.points.position.y, - selectedActionSphere.points.position.z, - ], - rotation: [ - selectedActionSphere.points.rotation.x, - selectedActionSphere.points.rotation.y, - selectedActionSphere.points.rotation.z, - ], - } - : point - ), - }; - } else { - return path; - } - }) as SimulationTypes.ConveyorEventsSchema[]; - - const updatedPath = updatedPaths.find( - (path) => path.type === "Conveyor" && path.points.some((point) => point.uuid === selectedActionSphere.points.uuid) - ); - - // console.log("Updated Path:", updatedPath); - - setSimulationStates(updatedPaths); - }; - useFrame(() => { if (eyeDropMode) { raycaster.setFromCamera(pointer, camera); @@ -445,7 +406,6 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec ref={transformRef} object={selectedActionSphere.points} mode={transformMode} - onMouseUp={updateSimulationPaths} /> )} diff --git a/app/src/modules/simulation/process/processCreator.tsx b/app/src/modules/simulation/process/processCreator.tsx index f7f9974..068b5ce 100644 --- a/app/src/modules/simulation/process/processCreator.tsx +++ b/app/src/modules/simulation/process/processCreator.tsx @@ -458,7 +458,7 @@ import { useThree } from "@react-three/fiber"; import { ConveyorEventsSchema, VehicleEventsSchema, -} from "../../../types/simulation"; +} from "../../../types/simulationTypes"; import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; // Type definitions diff --git a/app/src/modules/simulation/simulation.tsx b/app/src/modules/simulation/simulation.tsx index b1f961e..f13fdf4 100644 --- a/app/src/modules/simulation/simulation.tsx +++ b/app/src/modules/simulation/simulation.tsx @@ -7,39 +7,50 @@ import ProcessContainer from "./process/processContainer"; import Agv from "../builder/agv/agv"; import ArmBot from "./armbot/ArmBot"; +interface ArmBotState { + uuid: string; + position: [number, number, number]; + rotation: [number, number, number]; + status: string; + material: string; + triggerId: string; + actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; }; +} + function Simulation() { - const { activeModule } = useModuleStore(); - const pathsGroupRef = useRef() as React.MutableRefObject; - const [processes, setProcesses] = useState([]); - const agvRef = useRef([]); - const MaterialRef = useRef([]); + const { activeModule } = useModuleStore(); + const pathsGroupRef = useRef() as React.MutableRefObject; + const [armBots, setArmBots] = useState([]); + const [processes, setProcesses] = useState([]); + const agvRef = useRef([]); + const MaterialRef = useRef([]); - return ( - <> - {activeModule === "simulation" && ( + return ( <> - + {activeModule === "simulation" && ( + <> + - + - + - + + + )} + - )} - - - ); + ); } export default Simulation; diff --git a/app/src/store/store.ts b/app/src/store/store.ts index 0b15b3e..765712b 100644 --- a/app/src/store/store.ts +++ b/app/src/store/store.ts @@ -1,6 +1,6 @@ import * as THREE from "three"; import * as Types from "../types/world/worldTypes"; -import * as SimulationTypes from "../types/simulation"; +import * as SimulationTypes from "../types/simulationTypes"; import { create } from "zustand"; import { io } from "socket.io-client"; diff --git a/app/src/types/simulation.d.ts b/app/src/types/simulationTypes.d.ts similarity index 100% rename from app/src/types/simulation.d.ts rename to app/src/types/simulationTypes.d.ts From 109f88949cbc65294c0587454ca8ca883d5b71fa Mon Sep 17 00:00:00 2001 From: gabriel Date: Tue, 15 Apr 2025 18:05:01 +0530 Subject: [PATCH 2/4] bug fix --- app/.env | 4 ++-- .../IotInputCards/BarChartInput.tsx | 4 ++++ .../FleetEfficiencyInputComponent.tsx | 4 ++++ .../IotInputCards/FlotingWidgetInput.tsx | 4 ++++ .../IotInputCards/LineGrapInput.tsx | 4 ++++ .../IotInputCards/PieChartInput.tsx | 4 ++++ .../IotInputCards/Progress1Input.tsx | 4 ++++ .../IotInputCards/Progress2Input.tsx | 4 ++++ .../WarehouseThroughputInputComponent.tsx | 4 ++++ .../IotInputCards/Widget2InputCard3D.tsx | 4 ++++ .../IotInputCards/Widget3InputCard3D.tsx | 4 ++++ .../IotInputCards/Widget4InputCard3D.tsx | 4 ++++ .../ui/inputs/MultiLevelDropDown.tsx | 23 +++++++++++-------- .../widgets/2d/DraggableWidget.tsx | 17 +++++++++++--- app/src/store/useDroppedObjectsStore.ts | 2 ++ 15 files changed, 76 insertions(+), 14 deletions(-) diff --git a/app/.env b/app/.env index c50d174..0e57725 100644 --- a/app/.env +++ b/app/.env @@ -2,10 +2,10 @@ PORT=8200 # Base URL for the server socket API, used for real-time communication (e.g., WebSockets). -REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000 +REACT_APP_SERVER_SOCKET_API_BASE_URL=192.168.0.102:8000 # Base URL for the server REST API, used for HTTP requests to the backend server. -REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000 +REACT_APP_SERVER_REST_API_BASE_URL=192.168.0.102:5000 # Base URL for the server marketplace, used for market place model blob. REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011 diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx index e5debde..8e2d4f1 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx @@ -21,14 +21,17 @@ const BarChartInput = (props: Props) => { const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0] + const [isLoading, setLoading] = useState(true); useEffect(() => { const fetchZoneData = async () => { try { + setLoading(true) const response = await axios.get(`http://${iotApiUrl}/floatinput`); if (response.status === 200) { // console.log("dropdown data:", response.data); setDropDownData(response.data); + setLoading(false); } else { console.log("Unexpected response:", response); } @@ -148,6 +151,7 @@ const BarChartInput = (props: Props) => { onSelect={(selectedData) => handleSelect(inputKey, selectedData)} onUnselect={() => handleSelect(inputKey, null)} selectedValue={selections[inputKey]} // Load from Zustand + isLoading={isLoading} />
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx index 55ae422..af6f735 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx @@ -21,14 +21,17 @@ const FleetEfficiencyInputComponent = (props: Props) => { const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0] + const [isLoading, setLoading] = useState(true); useEffect(() => { const fetchZoneData = async () => { try { const response = await axios.get(`http://${iotApiUrl}/floatinput`); + setLoading(true) if (response.status === 200) { // console.log("dropdown data:", response.data); setDropDownData(response.data); + setLoading(false) } else { console.log("Unexpected response:", response); } @@ -149,6 +152,7 @@ const FleetEfficiencyInputComponent = (props: Props) => { onSelect={(selectedData) => handleSelect(inputKey, selectedData)} onUnselect={() => handleSelect(inputKey, null)} selectedValue={selections[inputKey]} // Load from Zustand + isLoading={isLoading} />
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx index 1164a84..53ddbcc 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx @@ -21,14 +21,17 @@ const FlotingWidgetInput = (props: Props) => { const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0] + const [isLoading, setLoading] = useState(true); useEffect(() => { const fetchZoneData = async () => { try { + setLoading(true) const response = await axios.get(`http://${iotApiUrl}/floatinput`); if (response.status === 200) { // console.log("dropdown data:", response.data); setDropDownData(response.data); + setLoading(false); } else { console.log("Unexpected response:", response); } @@ -149,6 +152,7 @@ const FlotingWidgetInput = (props: Props) => { onSelect={(selectedData) => handleSelect(inputKey, selectedData)} onUnselect={() => handleSelect(inputKey, null)} selectedValue={selections[inputKey]} // Load from Zustand + isLoading={isLoading} />
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx index 6ab5ec3..3cf647e 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx @@ -140,14 +140,17 @@ const LineGrapInput = (props: Props) => { const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0] + const [isLoading, setLoading] = useState(true); useEffect(() => { const fetchZoneData = async () => { try { + setLoading(true) const response = await axios.get(`http://${iotApiUrl}/floatinput`); if (response.status === 200) { // console.log("dropdown data:", response.data); setDropDownData(response.data); + setLoading(false) } else { console.log("Unexpected response:", response); } @@ -267,6 +270,7 @@ const LineGrapInput = (props: Props) => { onSelect={(selectedData) => handleSelect(inputKey, selectedData)} onUnselect={() => handleSelect(inputKey, null)} selectedValue={selections[inputKey]} // Load from Zustand + isLoading={isLoading} />
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx index 56ef990..1d16358 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx @@ -21,14 +21,17 @@ const PieChartInput = (props: Props) => { const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0] + const [isLoading, setLoading] = useState(true); useEffect(() => { const fetchZoneData = async () => { try { + setLoading(true) const response = await axios.get(`http://${iotApiUrl}/floatinput`); if (response.status === 200) { // console.log("dropdown data:", response.data); setDropDownData(response.data); + setLoading(false) } else { console.log("Unexpected response:", response); } @@ -148,6 +151,7 @@ const PieChartInput = (props: Props) => { onSelect={(selectedData) => handleSelect(inputKey, selectedData)} onUnselect={() => handleSelect(inputKey, null)} selectedValue={selections[inputKey]} // Load from Zustand + isLoading={isLoading} />
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx index cd347b3..5d9dd58 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx @@ -21,14 +21,17 @@ const Progress1Input = (props: Props) => { const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0] + const [isLoading, setLoading] = useState(true); useEffect(() => { const fetchZoneData = async () => { try { + setLoading(true) const response = await axios.get(`http://${iotApiUrl}/floatinput`); if (response.status === 200) { // console.log("dropdown data:", response.data); setDropDownData(response.data); + setLoading(false) } else { console.log("Unexpected response:", response); } @@ -142,6 +145,7 @@ const Progress1Input = (props: Props) => { onSelect={(selectedData) => handleSelect(inputKey, selectedData)} onUnselect={() => handleSelect(inputKey, null)} selectedValue={selections[inputKey]} // Load from Zustand + isLoading={isLoading} />
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx index ba56e27..bc6059c 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx @@ -21,14 +21,17 @@ const Progress2Input = (props: Props) => { const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0] + const [isLoading, setLoading] = useState(true); useEffect(() => { const fetchZoneData = async () => { try { + setLoading(true) const response = await axios.get(`http://${iotApiUrl}/floatinput`); if (response.status === 200) { // console.log("dropdown data:", response.data); setDropDownData(response.data); + setLoading(false) } else { console.log("Unexpected response:", response); } @@ -142,6 +145,7 @@ const Progress2Input = (props: Props) => { onSelect={(selectedData) => handleSelect(inputKey, selectedData)} onUnselect={() => handleSelect(inputKey, null)} selectedValue={selections[inputKey]} // Load from Zustand + isLoading={isLoading} />
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx index d3ed377..8d5e717 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx @@ -21,14 +21,17 @@ const WarehouseThroughputInputComponent = (props: Props) => { const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0] + const [isLoading, setLoading] = useState(true); useEffect(() => { const fetchZoneData = async () => { try { + setLoading(true) const response = await axios.get(`http://${iotApiUrl}/floatinput`); if (response.status === 200) { // console.log("dropdown data:", response.data); setDropDownData(response.data); + setLoading(false) } else { console.log("Unexpected response:", response); } @@ -149,6 +152,7 @@ const WarehouseThroughputInputComponent = (props: Props) => { onSelect={(selectedData) => handleSelect(inputKey, selectedData)} onUnselect={() => handleSelect(inputKey, null)} selectedValue={selections[inputKey]} // Load from Zustand + isLoading={isLoading} />
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget2InputCard3D.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget2InputCard3D.tsx index a32d227..a1b4360 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget2InputCard3D.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget2InputCard3D.tsx @@ -21,14 +21,17 @@ const Widget2InputCard3D = (props: Props) => { const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0] + const [isLoading, setLoading] = useState(true); useEffect(() => { const fetchZoneData = async () => { try { + setLoading(true) const response = await axios.get(`http://${iotApiUrl}/floatinput`); if (response.status === 200) { // console.log("dropdown data:", response.data); setDropDownData(response.data); + setLoading(false) } else { console.log("Unexpected response:", response); } @@ -147,6 +150,7 @@ const Widget2InputCard3D = (props: Props) => { onSelect={(selectedData) => handleSelect(inputKey, selectedData)} onUnselect={() => handleSelect(inputKey, null)} selectedValue={selections[inputKey]} // Load from Zustand + isLoading={isLoading} />
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget3InputCard3D.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget3InputCard3D.tsx index 95fdc33..43f8e55 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget3InputCard3D.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget3InputCard3D.tsx @@ -19,14 +19,17 @@ const Widget3InputCard3D = () => { const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0] + const [isLoading, setLoading] = useState(true); useEffect(() => { const fetchZoneData = async () => { try { + setLoading(true) const response = await axios.get(`http://${iotApiUrl}/getinput`); if (response.status === 200) { // console.log("dropdown data:", response.data); setDropDownData(response.data); + setLoading(false) } else { console.log("Unexpected response:", response); } @@ -140,6 +143,7 @@ const Widget3InputCard3D = () => { onSelect={(selectedData) => handleSelect(inputKey, selectedData)} onUnselect={() => handleSelect(inputKey, null)} selectedValue={selections[inputKey]} // Load from Zustand + isLoading={isLoading} />
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget4InputCard3D.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget4InputCard3D.tsx index bfd2edd..4aa9855 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget4InputCard3D.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget4InputCard3D.tsx @@ -21,14 +21,17 @@ const Widget4InputCard3D = (props: Props) => { const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0] + const [isLoading, setLoading] = useState(true); useEffect(() => { const fetchZoneData = async () => { try { + setLoading(true) const response = await axios.get(`http://${iotApiUrl}/floatinput`); if (response.status === 200) { // console.log("dropdown data:", response.data); setDropDownData(response.data); + setLoading(false) } else { console.log("Unexpected response:", response); } @@ -147,6 +150,7 @@ const Widget4InputCard3D = (props: Props) => { onSelect={(selectedData) => handleSelect(inputKey, selectedData)} onUnselect={() => handleSelect(inputKey, null)} selectedValue={selections[inputKey]} // Load from Zustand + isLoading={isLoading} />
diff --git a/app/src/components/ui/inputs/MultiLevelDropDown.tsx b/app/src/components/ui/inputs/MultiLevelDropDown.tsx index f2be121..1293e4a 100644 --- a/app/src/components/ui/inputs/MultiLevelDropDown.tsx +++ b/app/src/components/ui/inputs/MultiLevelDropDown.tsx @@ -203,6 +203,7 @@ interface MultiLevelDropdownProps { onSelect: (selectedData: { name: string; fields: string }) => void; onUnselect: () => void; selectedValue?: { name: string; fields: string }; + isLoading?: boolean; } // Main Multi-Level Dropdown Component @@ -211,6 +212,7 @@ const MultiLevelDropdown = ({ onSelect, onUnselect, selectedValue, + isLoading = false, }: MultiLevelDropdownProps) => { const [open, setOpen] = useState(false); const dropdownRef = useRef(null); @@ -261,19 +263,22 @@ const MultiLevelDropdown = ({
{/* loading list */} - {/*
*/} + {/* Unselect Option */} {/* Nested Dropdown Items */} - {Object.entries(data).map(([key, value]) => ( - - ))} + { + isLoading ?
: + Object.entries(data).map(([key, value]) => ( + + )) + }
)} diff --git a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx index 7e6ad6d..f865719 100644 --- a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx +++ b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx @@ -100,6 +100,8 @@ export const DraggableWidget = ({ const deleteSelectedChart = async () => { try { + console.log("delete"); + const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; let deleteWidget = { @@ -109,7 +111,9 @@ export const DraggableWidget = ({ }; if (visualizationSocket) { + setSelectedChartId(null) visualizationSocket.emit("v2:viz-widget:delete", deleteWidget); + console.log("delete widget",selectedChartId); } const updatedWidgets = selectedZone.widgets.filter( (w: Widget) => w.id !== widget.id @@ -120,7 +124,6 @@ export const DraggableWidget = ({ widgets: updatedWidgets, })); setOpenKebabId(null); - // const response = await deleteWidgetApi(widget.id, organization); // if (response?.message === "Widget deleted successfully") { // const updatedWidgets = selectedZone.widgets.filter( @@ -175,6 +178,7 @@ export const DraggableWidget = ({ const duplicatedWidget: Widget = { ...widget, + title: name === '' ? widget.title : name, Data: { duration: duration, measurements: { ...measurements }, @@ -187,6 +191,7 @@ export const DraggableWidget = ({ zoneId: selectedZone.zoneId, widget: duplicatedWidget, }; + if (visualizationSocket) { visualizationSocket.emit("v2:viz-widget:add", duplicateWidget); } @@ -306,7 +311,10 @@ export const DraggableWidget = ({ : undefined, }} ref={chartWidget} - onClick={() => setSelectedChartId(widget)} + onClick={() => {setSelectedChartId(widget) + console.log('click'); + + }} > {/* Kebab Icon */}
@@ -327,7 +335,10 @@ export const DraggableWidget = ({
Duplicate
-
+
{ + e.stopPropagation() + deleteSelectedChart(); + }}>
diff --git a/app/src/store/useDroppedObjectsStore.ts b/app/src/store/useDroppedObjectsStore.ts index ca39d9f..0c03eec 100644 --- a/app/src/store/useDroppedObjectsStore.ts +++ b/app/src/store/useDroppedObjectsStore.ts @@ -101,6 +101,7 @@ export const useDroppedObjectsStore = create((set) => ({ let visualizationSocket = socketState.visualizationSocket; let iotMeasurements = iotData.flotingMeasurements; let iotDuration = iotData.flotingDuration; + let iotHeader = iotData.header if (!zone) return; @@ -117,6 +118,7 @@ export const useDroppedObjectsStore = create((set) => ({ measurements: iotMeasurements, duration: iotDuration, }, + header: iotHeader, id: `${originalObject.id}-copy-${Date.now()}`, // Unique ID position: { ...originalObject.position, From e2fd4ef15d173e8a9ec98dbec498ff6f24ed1897 Mon Sep 17 00:00:00 2001 From: gabriel Date: Tue, 15 Apr 2025 18:06:31 +0530 Subject: [PATCH 3/4] updated ip --- app/.env | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/.env b/app/.env index 0e57725..c50d174 100644 --- a/app/.env +++ b/app/.env @@ -2,10 +2,10 @@ PORT=8200 # Base URL for the server socket API, used for real-time communication (e.g., WebSockets). -REACT_APP_SERVER_SOCKET_API_BASE_URL=192.168.0.102:8000 +REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000 # Base URL for the server REST API, used for HTTP requests to the backend server. -REACT_APP_SERVER_REST_API_BASE_URL=192.168.0.102:5000 +REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000 # Base URL for the server marketplace, used for market place model blob. REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011 From 5b42bd9c40f080af2db06d25e42e883d672f477b Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Tue, 15 Apr 2025 18:34:43 +0530 Subject: [PATCH 4/4] feat: Enhance simulation with StaticMachine integration and ArmBot updates - Added StaticMachine component to manage static machine states and interactions. - Implemented StaticMachineInstances for handling individual machine behaviors. - Updated ArmBot and related components to support interactions with static machines. - Refactored process handling to include ArmBot actions and trigger management. - Improved type definitions for simulation types to accommodate new features. --- .../geomentries/assets/addAssetModel.ts | 3 +- .../controls/selection/copyPasteControls.tsx | 27 ++-- .../selection/duplicationControls.tsx | 29 ++-- app/src/modules/simulation/armbot/ArmBot.tsx | 32 ++-- .../simulation/armbot/ArmBotInstances.tsx | 16 +- .../armbot/IKAnimationController.tsx | 149 +++++++++++++----- .../modules/simulation/armbot/IkInstances.tsx | 47 ++++-- .../simulation/process/processAnimator.tsx | 16 +- .../simulation/process/processContainer.tsx | 16 ++ app/src/modules/simulation/process/types.ts | 14 +- .../process/useProcessAnimations.tsx | 94 +++++++---- app/src/modules/simulation/simulation.tsx | 15 +- .../staticMachine/staticMachine.tsx | 77 +++++++++ .../staticMachine/staticMachineInstances.tsx | 33 ++++ app/src/types/simulationTypes.d.ts | 4 +- 15 files changed, 437 insertions(+), 135 deletions(-) create mode 100644 app/src/modules/simulation/staticMachine/staticMachine.tsx create mode 100644 app/src/modules/simulation/staticMachine/staticMachineInstances.tsx diff --git a/app/src/modules/builder/geomentries/assets/addAssetModel.ts b/app/src/modules/builder/geomentries/assets/addAssetModel.ts index 0db803f..29b0627 100644 --- a/app/src/modules/builder/geomentries/assets/addAssetModel.ts +++ b/app/src/modules/builder/geomentries/assets/addAssetModel.ts @@ -225,7 +225,6 @@ async function handleModelLoad( eventData as SimulationTypes.ConveyorEventsSchema ]); - console.log('data: ', data); socket.emit("v2:model-asset:add", data); } else if (res.type === "Vehicle") { @@ -365,7 +364,7 @@ async function handleModelLoad( uuid: pointUUID, position: res.points.position as [number, number, number], rotation: res.points.rotation as [number, number, number], - actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', speed: 1, processes: [] }, + actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', speed: 0.2, processes: [] }, triggers: { uuid: THREE.MathUtils.generateUUID(), name: 'Trigger 1', type: 'OnComplete' }, connections: { source: { modelUUID: model.uuid, pointUUID: pointUUID }, targets: [] }, } diff --git a/app/src/modules/scene/controls/selection/copyPasteControls.tsx b/app/src/modules/scene/controls/selection/copyPasteControls.tsx index 84d6047..1f83513 100644 --- a/app/src/modules/scene/controls/selection/copyPasteControls.tsx +++ b/app/src/modules/scene/controls/selection/copyPasteControls.tsx @@ -332,8 +332,8 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas } else if (eventData.type === 'StaticMachine' && eventData) { const createStaticMachinePoint = () => { const pointUUID = THREE.MathUtils.generateUUID(); - const vehiclePoint = (eventData as SimulationTypes.StaticMachineEventsSchema)?.points; - const hasActions = vehiclePoint?.actions !== undefined; + const staticMachinePoint = (eventData as SimulationTypes.StaticMachineEventsSchema)?.points; + const hasActions = staticMachinePoint?.actions !== undefined; const defaultAction = { uuid: THREE.MathUtils.generateUUID(), @@ -344,11 +344,11 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas return { uuid: pointUUID, - position: vehiclePoint?.position, - // rotation: vehiclePoint?.rotation, + position: staticMachinePoint?.position, + rotation: staticMachinePoint?.rotation, actions: hasActions ? { - ...vehiclePoint.actions, + ...staticMachinePoint.actions, uuid: THREE.MathUtils.generateUUID() } : defaultAction, @@ -410,8 +410,8 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas } else if (eventData.type === 'ArmBot' && eventData) { const createArmBotPoint = () => { const pointUUID = THREE.MathUtils.generateUUID(); - const vehiclePoint = (eventData as SimulationTypes.ArmBotEventsSchema)?.points; - const hasActions = vehiclePoint?.actions !== undefined; + const armBotPoint = (eventData as SimulationTypes.ArmBotEventsSchema)?.points; + const hasActions = armBotPoint?.actions !== undefined; const defaultAction = { uuid: THREE.MathUtils.generateUUID(), @@ -422,18 +422,19 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas return { uuid: pointUUID, - position: vehiclePoint?.position, - // rotation: vehiclePoint?.rotation, + position: armBotPoint?.position, + rotation: armBotPoint?.rotation, actions: hasActions ? { - ...vehiclePoint.actions, - uuid: THREE.MathUtils.generateUUID() + ...armBotPoint.actions, + uuid: THREE.MathUtils.generateUUID(), + processes: [] } : defaultAction, triggers: { uuid: THREE.MathUtils.generateUUID(), - name: vehiclePoint.triggers.name, - type: vehiclePoint.triggers.type, + name: armBotPoint.triggers.name, + type: armBotPoint.triggers.type, }, connections: { source: { modelUUID: obj.uuid, pointUUID }, diff --git a/app/src/modules/scene/controls/selection/duplicationControls.tsx b/app/src/modules/scene/controls/selection/duplicationControls.tsx index 5ce0603..915cb61 100644 --- a/app/src/modules/scene/controls/selection/duplicationControls.tsx +++ b/app/src/modules/scene/controls/selection/duplicationControls.tsx @@ -246,7 +246,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb return { uuid: pointUUID, position: vehiclePoint?.position, - // rotation: vehiclePoint?.rotation, + rotation: vehiclePoint?.rotation, actions: hasActions ? { ...vehiclePoint.actions, @@ -311,8 +311,8 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb } else if (eventData.type === 'StaticMachine' && eventData) { const createStaticMachinePoint = () => { const pointUUID = THREE.MathUtils.generateUUID(); - const vehiclePoint = (eventData as SimulationTypes.StaticMachineEventsSchema)?.points; - const hasActions = vehiclePoint?.actions !== undefined; + const staticMachinePoint = (eventData as SimulationTypes.StaticMachineEventsSchema)?.points; + const hasActions = staticMachinePoint?.actions !== undefined; const defaultAction = { uuid: THREE.MathUtils.generateUUID(), @@ -323,11 +323,11 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb return { uuid: pointUUID, - position: vehiclePoint?.position, - // rotation: vehiclePoint?.rotation, + position: staticMachinePoint?.position, + rotation: staticMachinePoint?.rotation, actions: hasActions ? { - ...vehiclePoint.actions, + ...staticMachinePoint.actions, uuid: THREE.MathUtils.generateUUID() } : defaultAction, @@ -389,8 +389,8 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb } else if (eventData.type === 'ArmBot' && eventData) { const createArmBotPoint = () => { const pointUUID = THREE.MathUtils.generateUUID(); - const vehiclePoint = (eventData as SimulationTypes.ArmBotEventsSchema)?.points; - const hasActions = vehiclePoint?.actions !== undefined; + const armBotPoint = (eventData as SimulationTypes.ArmBotEventsSchema)?.points; + const hasActions = armBotPoint?.actions !== undefined; const defaultAction = { uuid: THREE.MathUtils.generateUUID(), @@ -401,18 +401,19 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb return { uuid: pointUUID, - position: vehiclePoint?.position, - // rotation: vehiclePoint?.rotation, + position: armBotPoint?.position, + rotation: armBotPoint?.rotation, actions: hasActions ? { - ...vehiclePoint.actions, - uuid: THREE.MathUtils.generateUUID() + ...armBotPoint.actions, + uuid: THREE.MathUtils.generateUUID(), + processes: [] } : defaultAction, triggers: { uuid: THREE.MathUtils.generateUUID(), - name: vehiclePoint.triggers.name, - type: vehiclePoint.triggers.type, + name: armBotPoint.triggers.name, + type: armBotPoint.triggers.type, }, connections: { source: { modelUUID: obj.uuid, pointUUID }, diff --git a/app/src/modules/simulation/armbot/ArmBot.tsx b/app/src/modules/simulation/armbot/ArmBot.tsx index 2e77206..a6d8d23 100644 --- a/app/src/modules/simulation/armbot/ArmBot.tsx +++ b/app/src/modules/simulation/armbot/ArmBot.tsx @@ -15,27 +15,38 @@ interface ArmBotState { actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; }; } +interface StaticMachineState { + uuid: string; + status: string; + actions: { uuid: string; name: string; buffer: number; material: string; }; + machineTriggerId: string; + connectedArmBot: string; +} + interface ArmBotProps { armBots: ArmBotState[]; setArmBots: React.Dispatch>; + setStaticMachines: React.Dispatch>; } -const ArmBot = ({ armBots, setArmBots }: ArmBotProps) => { +const ArmBot = ({ armBots, setArmBots, setStaticMachines }: ArmBotProps) => { const { activeModule } = useModuleStore(); const { scene } = useThree(); const { simulationStates } = useSimulationStates(); useEffect(() => { const filtered = simulationStates.filter((s): s is SimulationTypes.ArmBotEventsSchema => s.type === "ArmBot"); - const initialStates: ArmBotState[] = filtered.map(bot => ({ - uuid: bot.modeluuid, - position: bot.position, - rotation: bot.rotation, - status: "idle", - material: "default", - triggerId: '', - actions: bot.points.actions - })); + const initialStates: ArmBotState[] = filtered + .filter(bot => bot.points.connections.targets.length > 0) + .map(bot => ({ + uuid: bot.modeluuid, + position: bot.position, + rotation: bot.rotation, + status: "idle", + material: "default", + triggerId: '', + actions: bot.points.actions + })); setArmBots(initialStates); }, [simulationStates]); @@ -57,6 +68,7 @@ const ArmBot = ({ armBots, setArmBots }: ArmBotProps) => { index={i} armBot={bot} setArmBots={setArmBots} + setStaticMachines={setStaticMachines} /> ))} diff --git a/app/src/modules/simulation/armbot/ArmBotInstances.tsx b/app/src/modules/simulation/armbot/ArmBotInstances.tsx index 8a1380b..10a49f6 100644 --- a/app/src/modules/simulation/armbot/ArmBotInstances.tsx +++ b/app/src/modules/simulation/armbot/ArmBotInstances.tsx @@ -30,13 +30,22 @@ interface ArmBotState { }; } +interface StaticMachineState { + uuid: string; + status: string; + actions: { uuid: string; name: string; buffer: number; material: string; }; + machineTriggerId: string; + connectedArmBot: string; +} + interface ArmbotInstancesProps { index: number; armBot: ArmBotState; setArmBots: React.Dispatch>; + setStaticMachines: React.Dispatch>; } -export const ArmbotInstances: React.FC = ({ index, armBot, setArmBots }) => { +export const ArmbotInstances: React.FC = ({ index, armBot, setArmBots, setStaticMachines }) => { const { scene } = useThree(); const [processes, setProcesses] = useState([]); @@ -61,7 +70,7 @@ export const ArmbotInstances: React.FC = ({ index, armBot, setArmBots((prevArmBots) => { return prevArmBots.map(bot => { if (bot.uuid === armBot.uuid) { - return { ...bot, status }; + return { ...bot, status, triggerId: status === 'idle' ? '' : armBot.triggerId }; } return bot; }); @@ -72,10 +81,13 @@ export const ArmbotInstances: React.FC = ({ index, armBot, ); diff --git a/app/src/modules/simulation/armbot/IKAnimationController.tsx b/app/src/modules/simulation/armbot/IKAnimationController.tsx index 538f0aa..1044540 100644 --- a/app/src/modules/simulation/armbot/IKAnimationController.tsx +++ b/app/src/modules/simulation/armbot/IKAnimationController.tsx @@ -2,6 +2,35 @@ import { useEffect, useMemo, useState, useRef } from "react"; import { useFrame } from "@react-three/fiber"; import * as THREE from "three"; import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; +import { useSimulationStates } from "../../../store/store"; + + +interface StaticMachineState { + uuid: string; + status: string; + actions: { uuid: string; name: string; buffer: number; material: string; }; + machineTriggerId: string; + connectedArmBot: string; +} + +interface ArmBotState { + uuid: string; + position: [number, number, number]; + rotation: [number, number, number]; + status: string; + material: string; + triggerId: string; + actions: { + uuid: string; + name: string; + speed: number; + processes: { + triggerId: string; + startPoint: string; + endPoint: string; + }[]; + }; +} type IKAnimationControllerProps = { ikSolver: any; @@ -16,6 +45,8 @@ type IKAnimationControllerProps = { uuid: string; logStatus: (status: string) => void; groupRef: React.RefObject; + armBot: ArmBotState; + setStaticMachines: React.Dispatch>; updateArmBotStatus: (status: string) => void; } @@ -27,6 +58,8 @@ const IKAnimationController = ({ uuid, logStatus, groupRef, + armBot, + setStaticMachines, updateArmBotStatus }: IKAnimationControllerProps) => { const [progress, setProgress] = useState(0); @@ -36,6 +69,7 @@ const IKAnimationController = ({ const restSpeed = 0.1; const restPosition = new THREE.Vector3(0, 2, 1.6); const { isPlaying } = usePlayButtonStore(); + const { simulationStates } = useSimulationStates(); // Track previous states for comparison const prevStateRef = useRef({ @@ -120,54 +154,56 @@ const IKAnimationController = ({ }; const processedCurves = useMemo(() => { - return process.map((p) => { - const tempLift = 0.5; - const localStart = groupRef.current?.worldToLocal(p.startPoint.clone().add(new THREE.Vector3(0, tempLift, 0))); - const localEnd = groupRef.current?.worldToLocal(p.endPoint.clone().add(new THREE.Vector3(0, tempLift, 0))); + if (isPlaying) + return process.map((p) => { + const tempLift = 0.5; + const localStart = groupRef.current?.worldToLocal(p.startPoint.clone().add(new THREE.Vector3(0, tempLift, 0))); + const localEnd = groupRef.current?.worldToLocal(p.endPoint.clone().add(new THREE.Vector3(0, tempLift, 0))); - if (localStart && localEnd) { + if (localStart && localEnd) { - const mid = new THREE.Vector3( - (localStart.x + localEnd.x) / 1, - Math.max(localStart.y, localEnd.y) + 0.8, - (localStart.z + localEnd.z) / 0.9 - ); + const mid = new THREE.Vector3( + (localStart.x + localEnd.x) / 1, + Math.max(localStart.y, localEnd.y) + 0.8, + (localStart.z + localEnd.z) / 0.9 + ); - const points = [ - restPosition.clone(), - localStart.clone(), - mid.clone(), - localEnd.clone(), - restPosition.clone(), - ]; - const curve = new THREE.CatmullRomCurve3(points); - const restToStartDist = points[0].distanceTo(points[1]); - const startToEndDist = points[1].distanceTo(points[3]); - const endToRestDist = points[3].distanceTo(points[4]); + const points = [ + restPosition.clone(), + localStart.clone(), + mid.clone(), + localEnd.clone(), + restPosition.clone(), + ]; + const curve = new THREE.CatmullRomCurve3(points); + const restToStartDist = points[0].distanceTo(points[1]); + const startToEndDist = points[1].distanceTo(points[3]); + const endToRestDist = points[3].distanceTo(points[4]); - const totalDist = restToStartDist + startToEndDist + endToRestDist; - const restToStartRange = [0, restToStartDist / totalDist]; - const startToEndRange = [ - restToStartRange[1], - restToStartRange[1] + startToEndDist / totalDist, - ]; - const endToRestRange = [startToEndRange[1], 1]; + const totalDist = restToStartDist + startToEndDist + endToRestDist; + const restToStartRange = [0, restToStartDist / totalDist]; + const startToEndRange = [ + restToStartRange[1], + restToStartRange[1] + startToEndDist / totalDist, + ]; + const endToRestRange = [startToEndRange[1], 1]; - return { - trigger: p.triggerId, - curve, - speed: p.speed, - restToStartRange, - startToEndRange, - endToRestRange, - }; - } - }); - }, [process, groupRef]); + return { + trigger: p.triggerId, + curve, + speed: p.speed, + restToStartRange, + startToEndRange, + endToRestRange, + }; + } + }); + }, [process, groupRef, isPlaying]); const activeCurve = useMemo(() => { - return processedCurves.find((c) => c?.trigger === selectedTrigger); - }, [processedCurves, selectedTrigger]); + if (isPlaying && processedCurves) + return processedCurves.find((c) => c?.trigger === selectedTrigger); + }, [processedCurves, selectedTrigger, isPlaying]); // Initial movement to rest position useFrame((_, delta) => { @@ -195,7 +231,7 @@ const IKAnimationController = ({ // Main animation loop useFrame((_, delta) => { - if (!ikSolver || !activeCurve || isInitializing) return; + if (!ikSolver || !activeCurve || isInitializing || !isPlaying) return; const { curve, speed, restToStartRange, startToEndRange, endToRestRange } = activeCurve; const targetBone = ikSolver.mesh.skeleton.bones.find( @@ -213,6 +249,35 @@ const IKAnimationController = ({ } else if (progress >= startToEndRange[0] && progress < startToEndRange[1]) { currentSpeed = speed; currentStatus = "moving"; // Moving between points + if (1 - progress < 0.05) { + // Find the process that matches the current trigger + const currentProcess = process.find(p => p.triggerId === selectedTrigger); + if (currentProcess) { + const triggerId = currentProcess.triggerId; + + const endPoint = armBot.actions.processes.find((process) => process.triggerId === triggerId)?.endPoint; + + // Search simulationStates for a StaticMachine that has a point matching this endPointId + const matchedStaticMachine = simulationStates.find( + (state) => + state.type === "StaticMachine" && + state.points?.uuid === endPoint// check for static machine with matching point uuid + ) as any; + + if (matchedStaticMachine) { + setStaticMachines((machines) => { + return machines.map((machine) => { + if (machine.uuid === matchedStaticMachine.modeluuid) { + return { ...machine, status: "running" }; + } else { + return machine; + } + }); + }); + } + } + + } } else if (progress >= endToRestRange[0] && progress < 1) { currentSpeed = restSpeed; currentStatus = "moving"; // Returning to rest diff --git a/app/src/modules/simulation/armbot/IkInstances.tsx b/app/src/modules/simulation/armbot/IkInstances.tsx index 7b02941..50b8ffb 100644 --- a/app/src/modules/simulation/armbot/IkInstances.tsx +++ b/app/src/modules/simulation/armbot/IkInstances.tsx @@ -8,23 +8,55 @@ import { CCDIKSolver, CCDIKHelper, } from "three/examples/jsm/animation/CCDIKSol import IKAnimationController from "./IKAnimationController"; import { TransformControls } from "@react-three/drei"; +interface StaticMachineState { + uuid: string; + status: string; + actions: { uuid: string; name: string; buffer: number; material: string; }; + machineTriggerId: string; + connectedArmBot: string; +} + +interface ArmBotState { + uuid: string; + position: [number, number, number]; + rotation: [number, number, number]; + status: string; + material: string; + triggerId: string; + actions: { + uuid: string; + name: string; + speed: number; + processes: { + triggerId: string; + startPoint: string; + endPoint: string; + }[]; + }; +} + const IkInstances = ({ uuid, + selectedTrigger, modelUrl, processes, position, rotation, + armBot, + setStaticMachines, updateArmBotStatus }: { uuid: string; + selectedTrigger: string; modelUrl: string; processes: any; position: [number, number, number]; rotation: [number, number, number]; + armBot: ArmBotState; + setStaticMachines: React.Dispatch>; updateArmBotStatus: (status: string) => void; }) => { const [ikSolver, setIkSolver] = useState(null); - const [selectedTrigger, setSelectedTrigger] = useState(""); const gltf = useLoader(GLTFLoader, modelUrl, (loader) => { const draco = new DRACOLoader(); draco.setDecoderPath("https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/"); @@ -82,17 +114,6 @@ const IkInstances = ({ }, [gltf]); - useEffect(() => { - const triggers = ["9f4a9b8b-e60d-4754-8c99-d71979da0e71", "b77b4f0a-ce55-4fe0-a181-a43ab3d01c83"]; - let index = 0; - - const cycleTriggers = setInterval(() => { - setSelectedTrigger(triggers[index]); - index = (index + 1) % triggers.length; - }, 10000); - - return () => clearInterval(cycleTriggers); - }, []); const logStatus = (status: string) => { // console.log(status); @@ -119,6 +140,8 @@ const IkInstances = ({ uuid={uuid} logStatus={logStatus} groupRef={groupRef} + armBot={armBot} + setStaticMachines={setStaticMachines} updateArmBotStatus={updateArmBotStatus} /> diff --git a/app/src/modules/simulation/process/processAnimator.tsx b/app/src/modules/simulation/process/processAnimator.tsx index c1063c3..460de49 100644 --- a/app/src/modules/simulation/process/processAnimator.tsx +++ b/app/src/modules/simulation/process/processAnimator.tsx @@ -11,11 +11,23 @@ import { ProcessData } from "./types"; import { useSimulationStates } from "../../../store/store"; import { retrieveGLTF } from "../../../utils/indexDB/idbUtils"; +interface ArmBotState { + uuid: string; + position: [number, number, number]; + rotation: [number, number, number]; + status: string; + material: string; + triggerId: string; + actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; }; +} + interface ProcessContainerProps { processes: ProcessData[]; setProcesses: React.Dispatch>; agvRef: any; MaterialRef: any; + armBots: ArmBotState[]; + setArmBots: React.Dispatch>; } const ProcessAnimator: React.FC = ({ @@ -23,6 +35,8 @@ const ProcessAnimator: React.FC = ({ setProcesses, agvRef, MaterialRef, + armBots, + setArmBots }) => { const gltf = useLoader(GLTFLoader, crate) as GLTF; const groupRef = useRef(null); @@ -42,7 +56,7 @@ const ProcessAnimator: React.FC = ({ getPointDataForAnimationIndex, processes: processedProcesses, checkAndCountTriggers, - } = useProcessAnimation(processes, setProcesses, agvRef); + } = useProcessAnimation(processes, setProcesses, agvRef, armBots, setArmBots); const baseMaterials = useMemo(() => ({ Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }), diff --git a/app/src/modules/simulation/process/processContainer.tsx b/app/src/modules/simulation/process/processContainer.tsx index 1cbc75b..4cc7edf 100644 --- a/app/src/modules/simulation/process/processContainer.tsx +++ b/app/src/modules/simulation/process/processContainer.tsx @@ -2,11 +2,23 @@ import React, { useState } from "react"; import ProcessCreator from "./processCreator"; import ProcessAnimator from "./processAnimator"; +interface ArmBotState { + uuid: string; + position: [number, number, number]; + rotation: [number, number, number]; + status: string; + material: string; + triggerId: string; + actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; }; +} + interface ProcessContainerProps { processes: any[]; setProcesses: React.Dispatch>; agvRef: any; MaterialRef: any; + armBots: ArmBotState[]; + setArmBots: React.Dispatch>; } const ProcessContainer: React.FC = ({ @@ -14,6 +26,8 @@ const ProcessContainer: React.FC = ({ setProcesses, agvRef, MaterialRef, + armBots, + setArmBots }) => { return ( <> @@ -23,6 +37,8 @@ const ProcessContainer: React.FC = ({ setProcesses={setProcesses} agvRef={agvRef} MaterialRef={MaterialRef} + armBots={armBots} + setArmBots={setArmBots} /> ); diff --git a/app/src/modules/simulation/process/types.ts b/app/src/modules/simulation/process/types.ts index 6f935fc..9c9a1bc 100644 --- a/app/src/modules/simulation/process/types.ts +++ b/app/src/modules/simulation/process/types.ts @@ -21,15 +21,15 @@ export interface PointAction { } export interface ProcessPoint { - uuid: string; + uuid: string; position: number[]; - rotation: number[]; - actions: PointAction[]; + rotation: number[]; + actions: PointAction[]; connections: { - source: { modelUUID: string; pointUUID: string }; - targets: { modelUUID: string; pointUUID: string }[]; + source: { modelUUID: string; pointUUID: string }; + targets: { modelUUID: string; pointUUID: string }[]; }; - triggers?: Trigger[]; + triggers?: Trigger[]; } export interface ProcessPath { modeluuid: string; @@ -38,7 +38,7 @@ export interface ProcessPath { pathPosition: number[]; pathRotation: number[]; speed: number; - type: "Conveyor" | "Vehicle"; + type: "Conveyor" | "Vehicle" | "ArmBot"; isActive: boolean } diff --git a/app/src/modules/simulation/process/useProcessAnimations.tsx b/app/src/modules/simulation/process/useProcessAnimations.tsx index 032d013..8c0f20d 100644 --- a/app/src/modules/simulation/process/useProcessAnimations.tsx +++ b/app/src/modules/simulation/process/useProcessAnimations.tsx @@ -39,10 +39,22 @@ interface PlayAgvState { setPlayAgv: (data: any) => void; } +interface ArmBotState { + uuid: string; + position: [number, number, number]; + rotation: [number, number, number]; + status: string; + material: string; + triggerId: string; + actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; }; +} + export const useProcessAnimation = ( processes: ProcessData[], setProcesses: React.Dispatch>, - agvRef: any + agvRef: any, + armBots: ArmBotState[], + setArmBots: React.Dispatch> ) => { // State and refs initialization const { isPlaying, setIsPlaying } = usePlayButtonStore(); @@ -438,6 +450,8 @@ export const useProcessAnimation = ( [handleMaterialSwap] ); + const deferredArmBotUpdates = useRef<{ uuid: string; triggerId: string }[]>([]); + // Trigger counting system const checkAndCountTriggers = useCallback( ( @@ -457,46 +471,54 @@ export const useProcessAnimation = ( const point = getPointDataForAnimationIndex(process, currentPointIndex); if (!point?.triggers) return prev; - const onHitTriggers = point.triggers.filter( - (t: Trigger) => t.type === "On-Hit" && t.isUsed - ); + const onHitTriggers = point.triggers.filter((t: Trigger) => t.type === "On-Hit" && t.isUsed); + if (onHitTriggers.length === 0) return prev; let newTriggerCounts = { ...processState.triggerCounts }; const newTriggerLogs = [...processState.triggerLogs]; let shouldLog = false; - // Find all vehicle paths for this process - const vehiclePaths = process.paths.filter( - (path) => path.type === "Vehicle" - ); + const vehiclePaths = process.paths.filter((path) => path.type === "Vehicle"); + const armBotPaths = process.paths.filter((path) => path.type === "ArmBot"); - // Check if any vehicle is active for this process - const activeVehicles = vehiclePaths.filter(path => { + const activeVehicles = vehiclePaths.filter((path) => { const vehicleId = path.modeluuid; - const vehicleEntry = agvRef.current.find( - (v: any) => v.vehicleId === vehicleId && v.processId === processId - ); + const vehicleEntry = agvRef.current.find((v: any) => v.vehicleId === vehicleId && v.processId === processId); return vehicleEntry?.isActive; }); - // Only count triggers if no vehicles are active for this process + // Check if any ArmBot is active for this process + // const activeArmBots = armBotPaths.filter((path) => { + // const armBotId = path.modeluuid; + // const armBotEntry = armBots.find((a: any) => a.uuid === armBotId); + // return armBotEntry; + // }); + + // Only count triggers if no vehicles and no ArmBots are active for this process + if (activeVehicles.length === 0) { onHitTriggers.forEach((trigger: Trigger) => { - const triggerKey = `${point.uuid}-${trigger.uuid}`; - newTriggerCounts[triggerKey] = (newTriggerCounts[triggerKey] || 0) + 1; - shouldLog = true; - newTriggerLogs.push({ - timestamp: currentTime, - pointId: point.uuid, - objectId, - triggerId: trigger.uuid, + const connections = point.connections?.targets || []; + + connections.forEach((connection) => { + const connectedModelUUID = connection.modelUUID; + + const matchingArmPath = armBotPaths.find((path) => path.modeluuid === connectedModelUUID); + + if (matchingArmPath) { + deferredArmBotUpdates.current.push({ + uuid: connectedModelUUID, + triggerId: trigger.uuid, + }); + } }); }); } let processTotalHits = Object.values(newTriggerCounts).reduce((a, b) => a + b, 0); + // Handle logic for vehicles and ArmBots when a trigger is hit if (shouldLog) { vehiclePaths.forEach((vehiclePath) => { if (vehiclePath.points?.length > 0) { @@ -506,7 +528,10 @@ export const useProcessAnimation = ( if (maxHitCount !== undefined) { const vehicleId = vehiclePath.modeluuid; - let vehicleEntry = agvRef.current.find((v: any) => v.vehicleId === vehicleId && v.processId === processId); + let vehicleEntry = agvRef.current.find( + (v: any) => + v.vehicleId === vehicleId && v.processId === processId + ); if (!vehicleEntry) { vehicleEntry = { @@ -515,14 +540,13 @@ export const useProcessAnimation = ( maxHitCount: maxHitCount, isActive: false, hitCount: 0, - status: 'stationed' + status: "stationed", }; agvRef.current.push(vehicleEntry); } - // if (!vehicleEntry.isActive && vehicleEntry.status === 'picking') { if (!vehicleEntry.isActive) { - vehicleEntry.hitCount = processTotalHits; + vehicleEntry.hitCount++; vehicleEntry.lastUpdated = currentTime; if (vehicleEntry.hitCount >= vehicleEntry.maxHitCount) { @@ -546,9 +570,21 @@ export const useProcessAnimation = ( }, }; }); - }, - [] - ); + }, []); + + useEffect(() => { + if (deferredArmBotUpdates.current.length > 0) { + const updates = [...deferredArmBotUpdates.current]; + deferredArmBotUpdates.current = []; + + setArmBots((prev) => + prev.map((bot) => { + const update = updates.find((u) => u.uuid === bot.uuid); + return update ? { ...bot, triggerId: update.triggerId } : bot; + }) + ); + } + }, [animationStates]); // Utility functions const hasNonInheritActions = useCallback( diff --git a/app/src/modules/simulation/simulation.tsx b/app/src/modules/simulation/simulation.tsx index f13fdf4..2f66ab8 100644 --- a/app/src/modules/simulation/simulation.tsx +++ b/app/src/modules/simulation/simulation.tsx @@ -6,6 +6,7 @@ import useModuleStore from "../../store/useModuleStore"; import ProcessContainer from "./process/processContainer"; import Agv from "../builder/agv/agv"; import ArmBot from "./armbot/ArmBot"; +import StaticMachine from "./staticMachine/staticMachine"; interface ArmBotState { uuid: string; @@ -17,10 +18,19 @@ interface ArmBotState { actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; }; } +interface StaticMachineState { + uuid: string; + status: string; + actions: { uuid: string; name: string; buffer: number; material: string; }; + machineTriggerId: string; + connectedArmBot: string; +} + function Simulation() { const { activeModule } = useModuleStore(); const pathsGroupRef = useRef() as React.MutableRefObject; const [armBots, setArmBots] = useState([]); + const [staticMachines, setStaticMachines] = useState([]); const [processes, setProcesses] = useState([]); const agvRef = useRef([]); const MaterialRef = useRef([]); @@ -38,6 +48,8 @@ function Simulation() { setProcesses={setProcesses} agvRef={agvRef} MaterialRef={MaterialRef} + armBots={armBots} + setArmBots={setArmBots} /> )} - + + ); } diff --git a/app/src/modules/simulation/staticMachine/staticMachine.tsx b/app/src/modules/simulation/staticMachine/staticMachine.tsx new file mode 100644 index 0000000..ba9b4f0 --- /dev/null +++ b/app/src/modules/simulation/staticMachine/staticMachine.tsx @@ -0,0 +1,77 @@ +import React, { useEffect } from 'react' +import * as SimulationTypes from '../../../types/simulationTypes'; +import { useSimulationStates } from '../../../store/store'; +import StaticMachineInstances from './staticMachineInstances'; + +interface ArmBotState { + uuid: string; + position: [number, number, number]; + rotation: [number, number, number]; + status: string; + material: string; + triggerId: string; + actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; }; +} + +interface StaticMachineState { + uuid: string; + status: string; + actions: { uuid: string; name: string; buffer: number; material: string; }; + machineTriggerId: string; + connectedArmBot: string; +} + +type StaticMachineProps = { + setArmBots: React.Dispatch>; + staticMachines: StaticMachineState[]; + setStaticMachines: React.Dispatch>; +} + +function StaticMachine({ setArmBots, staticMachines, setStaticMachines }: StaticMachineProps) { + + const { simulationStates } = useSimulationStates(); + + useEffect(() => { + const filtered = simulationStates.filter((s): s is SimulationTypes.StaticMachineEventsSchema => s.type === "StaticMachine"); + const initialStates: StaticMachineState[] = filtered + .filter(machine => machine.points.connections.targets.length > 0) + .map(machine => ({ + uuid: machine.modeluuid, + status: "idle", + actions: machine.points.actions, + machineTriggerId: machine.points.triggers.uuid, + connectedArmBot: machine.points.connections.targets[0].modelUUID + })); + setStaticMachines(initialStates); + }, [simulationStates]); + + const updateArmBotTriggerAndMachineStatus = (armBotUuid: string, triggerId: string, machineId: string) => { + setArmBots((prevArmBots) => { + return prevArmBots.map(bot => { + if (bot.uuid === armBotUuid) { + return { ...bot, triggerId: triggerId }; + } + return bot; + }); + }); + setStaticMachines((prevStaticMachines) => { + return prevStaticMachines.map(machine => { + if (machine.uuid === machineId) { + return { ...machine, status: "idle" }; + } else { + return machine; + } + }); + }); + } + + return ( + <> + {staticMachines.map((machine, index) => ( + + ))} + + ) +} + +export default StaticMachine; \ No newline at end of file diff --git a/app/src/modules/simulation/staticMachine/staticMachineInstances.tsx b/app/src/modules/simulation/staticMachine/staticMachineInstances.tsx new file mode 100644 index 0000000..94a2faa --- /dev/null +++ b/app/src/modules/simulation/staticMachine/staticMachineInstances.tsx @@ -0,0 +1,33 @@ +import React, { useEffect } from 'react' +import { useAnimationPlaySpeed } from '../../../store/usePlayButtonStore'; + +interface StaticMachineState { + uuid: string; + status: string; + actions: { uuid: string; name: string; buffer: number; material: string; }; + machineTriggerId: string; + connectedArmBot: string; +} + +type StaticMachineInstancesProps = { + machine: StaticMachineState, + updateArmBotTriggerAndMachineStatus: (armBotUuid: string, triggerId: string, machineId: string) => void; +} + +function StaticMachineInstances({ machine, updateArmBotTriggerAndMachineStatus }: StaticMachineInstancesProps) { + const { speed } = useAnimationPlaySpeed(); + + useEffect(() => { + if (machine.status === 'running') { + setTimeout(() => { + updateArmBotTriggerAndMachineStatus(machine.connectedArmBot, machine.machineTriggerId, machine.uuid); + }, machine.actions.buffer * 1000 * speed); + } + }, [machine]) + + return ( + <> + ) +} + +export default StaticMachineInstances \ No newline at end of file diff --git a/app/src/types/simulationTypes.d.ts b/app/src/types/simulationTypes.d.ts index bea52fa..75efcd3 100644 --- a/app/src/types/simulationTypes.d.ts +++ b/app/src/types/simulationTypes.d.ts @@ -64,7 +64,7 @@ interface StaticMachineEventsSchema { uuid: string; position: [number, number, number]; rotation: [number, number, number]; - actions: { uuid: string; name: string; buffer: number | string; material: string; isUsed: boolean; }; + actions: { uuid: string; name: string; buffer: number; material: string; }; triggers: { uuid: string; name: string; type: string }; connections: { source: { modelUUID: string; pointUUID: string }; @@ -103,7 +103,7 @@ export type EventData = { isLocked: boolean; isVisible: boolean; eventData?: - | { + { type: "Conveyor"; points: { uuid: string;