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

v2-ui #87

Merged
Vishnu merged 37 commits from v2-ui into main 2025-05-13 14:34:51 +00:00
Conversation 0 Commits 37 Files Changed 115 +391 -413
11 changed files with 391 additions and 413 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 890fdc889f - Show all commits

1
app/.env
View File

@ -9,6 +9,7 @@ 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
# REACT_APP_SERVER_MARKETPLACE_URL=192.168.0.110:3501
# Base URL for the asset library server, used for asset library images and model blob id.
REACT_APP_SERVER_ASSET_LIBRARY_URL=185.100.212.76:50011

9
app/src/modules/market/AssetPreview.tsx
View File

@ -14,11 +14,14 @@ interface SelectedCard {
rating: number;
views: number;
description: string;
AssetID: string
}
// Define the props type for AssetPreview
interface AssetPreviewProps {
selectedCard: SelectedCard;
modelUrl: string;
setSelectedCard: React.Dispatch<React.SetStateAction<SelectedCard | null>>; // Type for setter function
}
@ -33,8 +36,10 @@ function Ui() {
const AssetPreview: React.FC<AssetPreviewProps> = ({
selectedCard,
setSelectedCard,
modelUrl
}) => {
// Ensure rating is a valid number between 0 and 5
console.log('modelUrl: ', modelUrl);
const rating = Math.max(
0,
Math.min(5, isNaN(selectedCard.rating) ? 0 : selectedCard.rating)
@ -63,8 +68,8 @@ const AssetPreview: React.FC<AssetPreviewProps> = ({
}}
>
<Suspense fallback={<Ui />}>
{selectedCard.assetName && (
<GltfLoader fromServer={selectedCard.assetName} />
{selectedCard.assetName && modelUrl && (
<GltfLoader fromServer={modelUrl} assetId={selectedCard?.AssetID} />
)}
<OrbitControls minPolarAngle={0} maxPolarAngle={Math.PI / 2} />
<ContactShadows

14
app/src/modules/market/Card.tsx
View File

@ -19,6 +19,8 @@ interface CardProps {
views: number;
image: string;
description: string;
AssetID: string
modelUrl: string
onSelectCard: (cardData: {
assetName: string;
uploadedOn: number;
@ -26,6 +28,8 @@ interface CardProps {
rating: number;
views: number;
description: string;
AssetID: string;
}) => void;
}
@ -37,10 +41,18 @@ const Card: React.FC<CardProps> = ({
views,
image,
description,
AssetID,
modelUrl,
onSelectCard,
}) => {
const handleCardSelect = () => {
onSelectCard({ assetName, uploadedOn, price, rating, views, description });
console.log('assetName: ', assetName);
console.log('AssetID: ', AssetID);
onSelectCard({
assetName, uploadedOn, price, rating, views, description, AssetID
});
};
return (

15
app/src/modules/market/CardsContainer.tsx
View File

@ -1,6 +1,8 @@
import React, { useEffect, useState } from "react";
import Card from "./Card";
import AssetPreview from "./AssetPreview";
import { getAssetDetails } from "../../services/marketplace/fetchAssetDetails";
import { fetchGltfUrl } from "../../services/marketplace/fetchGltfUrl";
interface ModelData {
CreatedBy: string;
@ -15,6 +17,7 @@ interface ModelData {
uploadDate: number;
_id: string;
price: number;
AssetID: string
}
interface ModelsProps {
models: ModelData[];
@ -28,19 +31,26 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
rating: number;
views: number;
description: string;
AssetID: string;
} | null>(null);
const [modelUrl, setModelUrl] = useState<string>("")
const handleCardSelect = (cardData: {
const handleCardSelect = async (cardData: {
assetName: string;
uploadedOn: number;
price: number;
rating: number;
views: number;
description: string;
AssetID: string
}) => {
setSelectedCard(cardData);
const res = await fetchGltfUrl(cardData.assetName, cardData.AssetID);
console.log('res: ', res);
setModelUrl(res.url)
};
return (
<div className="cards-container-wrapper">
<div className="cards-container-container">
@ -57,7 +67,9 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
views={800}
onSelectCard={handleCardSelect}
image={assetDetail.thumbnail}
AssetID={assetDetail?.AssetID}
description={assetDetail.description}
modelUrl={modelUrl}
/>
))}
{/* <RenderOverlay> */}
@ -65,6 +77,7 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
<AssetPreview
selectedCard={selectedCard}
setSelectedCard={setSelectedCard}
modelUrl={modelUrl}
/>
)}
{/* </RenderOverlay> */}

1
app/src/modules/market/FilterSearch.tsx
View File

@ -16,6 +16,7 @@ interface ModelData {
uploadDate: number;
_id: string;
price: number;
AssetID: string
}
interface ModelsProps {

6
app/src/modules/market/GltfLoader.tsx
View File

@ -11,6 +11,7 @@ interface GltfLoaderProps {
setAnimations?: (animations?: string[]) => void;
selectedAnimation?: string;
setSelectedAnimation?: (animation: string) => void;
assetId: string
}
// const getGLTFUrl = (url: string) => url; // Placeholder for your actual function
@ -20,9 +21,10 @@ const GltfLoader: React.FC<GltfLoaderProps> = ({
fromServer,
setAnimations,
selectedAnimation,
assetId
}) => {
const modelUrl: any = fromServer ? fetchGltfUrl(fromServer) : glbdata;
const { scene, animations } = useGLTF(modelUrl ?? "") as {
// const modelUrl: any = fromServer ? fetchGltfUrl(fromServer, assetId) : glbdata;
const { scene, animations } = useGLTF(fromServer ?? "") as {
scene: Object3D;
animations: THREE.AnimationClip[];
};

2
app/src/modules/market/MarketPlace.tsx
View File

@ -17,6 +17,7 @@ interface ModelData {
uploadDate: number;
_id: string;
price: number;
AssetID: string
}
const MarketPlace = () => {
const [models, setModels] = useState<ModelData[]>([]);
@ -33,6 +34,7 @@ const MarketPlace = () => {
try {
const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6");
setModels(filt.items);
console.log('filt.items: ', filt.items);
setFilteredModels(filt.items);
setisLoading(false);
} catch {

97
app/src/modules/scene/controls/selectionControls/distanceFindingControls.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef } from "react";
import React, { useRef, useState } from "react";
import {
Vector3,
Raycaster,
@ -21,6 +21,17 @@ const DistanceFindingControls = ({
object,
}: DistanceFindingControlsProps) => {
const { camera, scene } = useThree();
const [labelValues, setLabelValues] = useState<{
textPosX: any;
textNegX: any;
textPosZ: any;
textNegZ: any;
}>({
textPosX: "",
textNegX: "",
textPosZ: "",
textNegZ: "",
});
// Refs for measurement lines
const line1 = useRef<Line>(null);
@ -167,13 +178,14 @@ const DistanceFindingControls = ({
}
}
}
// Update line geometry
if (points[1]) {
geometry.dispose();
geometry.setFromPoints([points[0], points[1]]);
line.geometry = geometry;
// Calculate the distance only once
const distance = points[0].distanceTo(points[1]).toFixed(2);
// Update measurement text
if (mesh?.current) {
geometry.computeBoundingSphere();
@ -181,9 +193,28 @@ const DistanceFindingControls = ({
if (center) {
mesh.current.position.copy(center);
}
const label = document.getElementById(mesh.current.name);
if (label) {
label.innerText = `${points[0].distanceTo(points[1]).toFixed(2)}m`;
label.innerText = `${distance}m`;
// Update specific label state based on the label ID
switch (label.id) {
case "textPosX":
setLabelValues((prevState) => ({ ...prevState, textPosX: distance }));
break;
case "textNegX":
setLabelValues((prevState) => ({ ...prevState, textNegX: distance }));
break;
case "textPosZ":
setLabelValues((prevState) => ({ ...prevState, textPosZ: distance }));
break;
case "textNegZ":
setLabelValues((prevState) => ({ ...prevState, textNegZ: distance }));
break;
default:
break;
}
}
}
} else {
@ -191,9 +222,31 @@ const DistanceFindingControls = ({
geometry.dispose();
geometry.setFromPoints([new Vector3(), new Vector3()]);
line.geometry = geometry;
const label = document.getElementById(mesh?.current?.name ?? "");
if (label) label.innerText = "";
if (label) {
label.innerText = "";
// Clear the corresponding label value in the state
switch (label.id) {
case "textPosX":
setLabelValues((prevState) => ({ ...prevState, textPosX: "" }));
break;
case "textNegX":
setLabelValues((prevState) => ({ ...prevState, textNegX: "" }));
break;
case "textPosZ":
setLabelValues((prevState) => ({ ...prevState, textPosZ: "" }));
break;
case "textNegZ":
setLabelValues((prevState) => ({ ...prevState, textNegZ: "" }));
break;
default:
break;
}
}
}
};
const Material = new LineBasicMaterial({ color: "#d2baff" });
@ -208,39 +261,54 @@ const DistanceFindingControls = ({
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[1, 0]}
style={{ pointerEvents: "none" }}
style={{
pointerEvents: "none",
visibility: labelValues.textPosX === "" ? "hidden" : "visible",
}}
>
<div className="distance-label" id="textPosX"></div>
<div className="distance-label" id="textPosX">{labelValues.textPosX}</div>
</Html>
</group>
<group name="textNegX" ref={textNegX}>
<Html
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[1, 0]}
style={{ pointerEvents: "none" }}
style={{
pointerEvents: "none",
visibility: labelValues.textNegX === "" ? "hidden" : "visible",
}}
>
<div className="distance-label" id="textNegX"></div>
<div className="distance-label" id="textNegX">{labelValues.textNegX}</div>
</Html>
</group>
<group name="textPosZ" ref={textPosZ}>
<Html
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[2, 0]}
style={{ pointerEvents: "none" }}
style={{
pointerEvents: "none",
visibility: labelValues.textPosZ === "" ? "hidden" : "visible",
}}
>
<div className="distance-label" id="textPosZ"></div>
<div className="distance-label" id="textPosZ">{labelValues.textPosZ}</div>
</Html>
</group>
<group name="textNegZ" ref={textNegZ}>
<Html
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[1, 0]}
style={{ pointerEvents: "none" }}
style={{
pointerEvents: "none",
visibility: labelValues.textNegZ === "" ? "hidden" : "visible",
}}
>
<div className="distance-label" id="textNegZ"></div>
<div className="distance-label" id="textNegZ">{labelValues.textNegZ}</div>
</Html>
</group>
@ -262,7 +330,8 @@ const DistanceFindingControls = ({
ref={line4}
/>
</>
)}
)
}
</>
);
};

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

@ -11,7 +11,10 @@ import { useProductStore } from '../../../../../store/simulation/useProductStore
import { useSelectedProduct } from '../../../../../store/simulation/useSimulationStore';
import { useTriggerHandler } from '../../../triggers/triggerHandler/useTriggerHandler';
import MaterialAnimator from '../animator/materialAnimator';
type Timer = {
start: number | null;
active: boolean;
};
function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>) {
const { navMesh } = useNavMesh();
const { isPlaying } = usePlayButtonStore();
@ -20,20 +23,16 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
const { triggerPointActions } = useTriggerHandler();
const { getActionByUuid, getEventByModelUuid, getTriggerByUuid } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { vehicles, setVehicleActive, setVehicleState, setVehiclePicking, clearCurrentMaterials, setVehicleLoad, decrementVehicleLoad, removeLastMaterial, incrementIdleTime, incrementActiveTime } = useVehicleStore();
const { vehicles, setVehicleActive, setVehicleState, setVehiclePicking, clearCurrentMaterials, setVehicleLoad, decrementVehicleLoad, removeLastMaterial } = useVehicleStore();
const [currentPhase, setCurrentPhase] = useState<string>('stationed');
const [path, setPath] = useState<[number, number, number][]>([]);
const pauseTimeRef = useRef<number | null>(null);
const idleTimeRef = useRef<number>(0);
const activeTimeRef = useRef<number>(0);
const isPausedRef = useRef<boolean>(false);
let startTime: number;
let fixedInterval: number;
const { speed } = useAnimationPlaySpeed();
const { isPaused } = usePauseButtonStore();
useEffect(() => {
isPausedRef.current = isPaused;
}, [isPaused]);
@ -55,7 +54,7 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
);
function vehicleStatus(modelId: string, status: string) {
// console.log(`${modelId} , ${status}`);
//
}
// Function to reset everything
@ -121,157 +120,6 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [vehicles, currentPhase, path, isPlaying]);
const previousTimeRef = useRef<number | null>(null); // Tracks the last frame time
const isActiveRef = useRef(agvDetail.isActive); // Tracks the previous isActive state
const animationFrameIdRef = useRef<number | null>(null); // Tracks the animation frame ID
// // Animate function (moved outside useEffect)
// function animate(currentTime: number) {
// if (previousTimeRef.current === null) {
// // Initialize previousTime on the first frame
// previousTimeRef.current = currentTime;
// }
// const deltaTime = (currentTime - previousTimeRef.current) / 1000; // Time difference in seconds
// previousTimeRef.current = currentTime;
// if (idleTimeRef.current == 0) {
// activeTimeRef.current += deltaTime * speed; // Scale active time by speed
// const roundedActiveTime = Math.round(activeTimeRef.current); // Round to nearest integer
// console.log('Active Time:', roundedActiveTime, 'seconds');
// incrementActiveTime(agvDetail.modelUuid, roundedActiveTime);
// incrementIdleTime(agvDetail.modelUuid, 0);
// } else if (activeTimeRef.current = 0) {
// idleTimeRef.current += deltaTime * speed; // Scale idle time by speed
// const roundedIdleTime = Math.round(idleTimeRef.current); // Round to nearest integer
// console.log('Idle Time:', roundedIdleTime, 'seconds');
// incrementIdleTime(agvDetail.modelUuid, roundedIdleTime);
// incrementActiveTime(agvDetail.modelUuid, 0);
// }
// // Request the next animation frame
// animationFrameIdRef.current = requestAnimationFrame(animate);
// }
// useEffect(() => {
// // Reset timers when transitioning between states
// if (!agvDetail.isActive) {
// activeTimeRef.current = 0;
// } else {
// idleTimeRef.current = 0;
// }
// if (animationFrameIdRef.current === null) {
// animationFrameIdRef.current = requestAnimationFrame(animate);
// }
// console.log("veh", vehicles);
// // Cleanup function to stop the animation loop
// return () => {
// if (animationFrameIdRef.current !== null) {
// cancelAnimationFrame(animationFrameIdRef.current);
// animationFrameIdRef.current = null; // Reset the animation frame ID
// }
// };
// }, [agvDetail.isActive]);
// Animate function (moved outside useEffect)
function animate(currentTime: number) {
if (previousTimeRef.current === null) {
// Initialize previousTime on the first frame
previousTimeRef.current = currentTime;
}
const deltaTime = (currentTime - previousTimeRef.current) / 1000; // Time difference in seconds
previousTimeRef.current = currentTime;
if (agvDetail.isActive) {
// AGV is active: Increment active time
activeTimeRef.current += deltaTime * speed; // Scale active time by speed
const roundedActiveTime = Math.round(activeTimeRef.current); // Round to nearest integer
} else {
idleTimeRef.current += deltaTime * speed; // Scale idle time by speed
const roundedIdleTime = Math.round(idleTimeRef.current); // Round to nearest integer
}
// Request the next animation frame
animationFrameIdRef.current = requestAnimationFrame(animate);
}
useEffect(() => {
// Start or stop the animation based on the isActive state
if (!agvDetail.isActive) {
// Transitioning to idle: Reset idle time
const roundedIdleTime = Math.round(idleTimeRef.current); // Get the final rounded idle time
console.log('Final Idle Time:', roundedIdleTime, 'seconds');
incrementIdleTime(agvDetail.modelUuid, roundedIdleTime);
activeTimeRef.current = 0;
} else {
// Transitioning to active: Finalize idle time and pass it to incrementIdleTime
const roundedActiveTime = Math.round(activeTimeRef.current); // Round to nearest integer
console.log('Active Time:', roundedActiveTime, 'seconds');
incrementActiveTime(agvDetail.modelUuid, roundedActiveTime);
idleTimeRef.current = 0; // Reset idle time
}
// Start the animation loop if not already running
if (animationFrameIdRef.current === null) {
animationFrameIdRef.current = requestAnimationFrame(animate);
}
// Cleanup function to stop the animation loop
return () => {
if (animationFrameIdRef.current !== null) {
cancelAnimationFrame(animationFrameIdRef.current);
animationFrameIdRef.current = null; // Reset the animation frame ID
}
};
}, [agvDetail.isActive]);
// let position = 0;
// let previousTime: number;
// function animate(currentTime: number) {
// previousTime = performance.now();
// const deltaTime = (currentTime - previousTime) / 1000;
// previousTime = currentTime;
// position += speed * deltaTime;
// console.log('deltaTime: ', deltaTime);
// console.log('position: ', position);
// if (idleTimeRef.current === 0) {
// activeTimeRef.current = position;
// console.log('position: active', position);
// console.log(' activeTimeRef.current: ', activeTimeRef.current);
// incrementActiveTime(agvDetail.modelUuid, position)
// incrementIdleTime(agvDetail.modelUuid, idleTimeRef.current)
// }
// else if (activeTimeRef.current === 0) {
// idleTimeRef.current = position;
// console.log('position:idle ', position);
// console.log(' idleTimeRef.current: ', idleTimeRef.current);
// incrementActiveTime(agvDetail.modelUuid, activeTimeRef.current)
// incrementIdleTime(agvDetail.modelUuid, position)
// }
// }
// useEffect(() => {
// if (agvDetail.isActive) {
// idleTimeRef.current = 0;
// activeTimeRef.current = performance.now();
// requestAnimationFrame(animate);
// } else {
// activeTimeRef.current = 0;
// idleTimeRef.current = performance.now();
// requestAnimationFrame(animate);
// }
// console.log('vehicles: ', vehicles);
// }, [agvDetail.isActive]);
function handleCallBack() {
if (currentPhase === 'stationed-pickup') {
@ -299,6 +147,9 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
}
}
function startUnloadingProcess() {
if (agvDetail.point.action.triggers.length > 0) {
const trigger = getTriggerByUuid(selectedProduct.productId, agvDetail.point.action.triggers[0].triggerUuid);

1
app/src/services/marketplace/fetchAssetDetails.ts
View File

@ -1,5 +1,6 @@
let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
export const getAssetDetails = async (filename: string) => {
console.log('filename: ', filename);
try {
const response = await fetch(`${BackEnd_url}/api/v1/assetDetails`, {
method: "POST",

29
app/src/services/marketplace/fetchGltfUrl.ts
View File

@ -1,7 +1,28 @@
let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
export const fetchGltfUrl = (filename: string) => {
if (filename) {
return `${BackEnd_url}/api/v1/getAssetFile/${filename}`;
export const fetchGltfUrl = async (filename: string, AssetID: string) => {
try {
const response = await fetch(
`${BackEnd_url}/api/v2/assetDetails/${filename}/${AssetID}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
// body: JSON.stringify(assetData),
}
);
if (!response.ok) {
throw new Error("Failed to fetch asset details");
}
const result = await response.json();
// console.log("result: preview", result);
return result;
} catch (error: any) {
//
throw new Error(error.message);
}
return null; // or handle the case when filename is not provided
};