Merge remote-tracking branch 'origin/simulation-agv' into simulation

This commit is contained in:
Jerald-Golden-B 2025-03-31 14:29:04 +05:30
commit b71fdbddbb
15 changed files with 581 additions and 519 deletions

View File

@ -8,7 +8,8 @@ REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
# Base URL for the server marketplace API.
REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
# REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
REACT_APP_SERVER_MARKETPLACE_URL=192.168.0.111:3501
# base url for IoT socket server
REACT_APP_IOT_SOCKET_SERVER_URL =185.100.212.76:5010

View File

@ -1,20 +1,39 @@
import React, { useState } from "react";
import React, { useEffect, useMemo, useState } from "react";
import Search from "../../ui/inputs/Search";
import vehicle from "../../../assets/image/vehicles.png";
import workStation from "../../../assets/image/workStation.png";
import machines from "../../../assets/image/machines.png";
import feneration from "../../../assets/image/feneration.png";
import worker from "../../../assets/image/worker.png";
import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
import arch from "../../../assets/gltf-glb/arch.glb";
import door from "../../../assets/gltf-glb/door.glb";
import window from "../../../assets/gltf-glb/window.glb";
interface AssetProp {
filename: string;
thumbnail?: string;
category: string;
description?: string;
tags?: string;
url?: String;
uploadDate?: number;
isArchieve?: boolean;
animated?: boolean;
price?: number;
CreatedBy?: String;
}
const Assets: React.FC = () => {
const [searchValue, setSearchValue] = useState<string>("");
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
const handleSearchChange = (value: string) => {
setSearchValue(value);
setSelectedCategory(null); // Reset selected category when search changes
};
const categoryList = [
const categoryList = useMemo(
() => [
{
assetName: "Doors",
assetImage: "",
@ -33,73 +52,44 @@ const Assets: React.FC = () => {
category: "Feneration",
categoryImage: feneration,
},
{
assetName: "Forklift",
assetImage: "",
category: "Vehicles",
categoryImage: vehicle,
},
{
assetName: "AGV",
assetImage: "",
category: "Vehicles",
categoryImage: vehicle,
},
{
assetName: "Pallet",
assetImage: "",
category: "Workstation",
categoryImage: workStation,
},
{
assetName: "Controller",
assetImage: "",
category: "Workstation",
categoryImage: workStation,
},
{
assetName: "Conveyor",
assetImage: "",
category: "Workstation",
categoryImage: workStation,
},
{
assetName: "VMC",
assetImage: "",
category: "Machines",
categoryImage: machines,
},
{
assetName: "CMC",
assetImage: "",
category: "Machines",
categoryImage: machines,
},
{
assetName: "Male Worker",
assetImage: "",
category: "Workers",
categoryImage: worker,
},
{
assetName: "Female Worker",
assetImage: "",
category: "Workers",
categoryImage: worker,
},
];
// Get unique categories
const uniqueCategories = Array.from(
new Set(categoryList.map((asset) => asset.category))
{ category: "Vehicles", categoryImage: vehicle },
{ category: "Workstation", categoryImage: workStation },
{ category: "Machines", categoryImage: machines },
{ category: "Workers", categoryImage: worker },
],
[]
);
// Filter assets based on the selected category
const filteredAssets =
selectedCategory !== null
? categoryList.filter((asset) => asset.category === selectedCategory)
: [];
const fetchCategoryAssets = async (asset: any) => {
setSelectedCategory(asset);
if (asset === "Feneration") {
const localAssets: AssetProp[] = [
{
filename: "arch",
category: "Feneration",
url: arch,
},
{
filename: "door",
category: "Feneration",
url: door,
},
{
filename: "window",
category: "Feneration",
url: window,
},
];
setFilteredAsset(localAssets);
} else {
try {
const res = await getCategoryAsset(asset);
setFilteredAsset(res || []); // Ensure it's always an array
} catch (error) {}
}
};
useEffect(() => {}, [filteredAsset]);
return (
<div className="assets-container">
<Search onChange={handleSearchChange} />
@ -118,14 +108,25 @@ const Assets: React.FC = () => {
</div>
<h2>{selectedCategory}</h2>
<div className="assets-container">
{filteredAssets.map((asset, index) => (
{filteredAsset &&
filteredAsset?.map((asset: any, index: number) => (
<div key={index} className="assets">
{asset?.thumbnail && (
<img
src={asset.assetImage}
alt={asset.assetName}
src={asset?.thumbnail}
alt={asset.filename}
className="asset-image"
/>
<div className="asset-name">{asset.assetName}</div>
)}
<div className="asset-name">
{asset.filename
.split("_")
.map(
(word: any) =>
word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</div>
</div>
))}
</div>
@ -134,7 +135,9 @@ const Assets: React.FC = () => {
<div className="assets-wrapper">
<h2>Categories</h2>
<div className="categories-container">
{uniqueCategories.map((category, index) => {
{Array.from(
new Set(categoryList.map((asset) => asset.category))
).map((category, index) => {
const categoryInfo = categoryList.find(
(asset) => asset.category === category
);
@ -142,7 +145,7 @@ const Assets: React.FC = () => {
<div
key={index}
className="category"
onClick={() => setSelectedCategory(category)}
onClick={() => fetchCategoryAssets(category)}
>
<img
src={categoryInfo?.categoryImage || ""}
@ -161,4 +164,3 @@ const Assets: React.FC = () => {
};
export default Assets;

View File

@ -27,7 +27,14 @@ const RenderAnalysisInputs: React.FC<InputRendererProps> = ({
);
}
if (preset.type === "range") {
return <InputRange key={index} label={preset.inputs.label} />;
return (
<InputRange
key={index}
label={preset.inputs.label}
min={0}
max={0}
/>
);
}
return null;
})}

View File

@ -17,12 +17,6 @@ const AssetProperties: React.FC = () => {
const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
const [nextId, setNextId] = useState(1); // Unique ID for new entries
const { selectedFloorItem } = useselectedFloorItem();
let xValue = selectedFloorItem.position.x;
let zValue = selectedFloorItem.position.z;
let rotationRad = selectedFloorItem.rotation.y;
let rotationDeg = THREE.MathUtils.radToDeg(rotationRad);
// useEffect(() => {}, [selectedFloorItem]);
// Function to handle adding new user data
const handleAddUserData = () => {
const newUserData: UserData = {
@ -57,10 +51,15 @@ const AssetProperties: React.FC = () => {
<PositionInput
onChange={() => {}}
value1={xValue.toFixed(5)}
value2={zValue.toFixed(5)}
value1={selectedFloorItem.position.x.toFixed(5)}
value2={selectedFloorItem.position.z.toFixed(5)}
/>
<RotationInput
onChange={() => {}}
value={parseFloat(
THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
)}
/>
<RotationInput onChange={() => {}} value={rotationDeg} />
<div className="split"></div>

View File

@ -16,7 +16,7 @@ import {
useWallVisibility,
} from "../../../../store/store";
import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
import * as CONSTANTS from "../../../../types/world/worldConstants";
const GlobalProperties: React.FC = () => {
const { toggleView, setToggleView } = useToggleView();
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
@ -29,18 +29,20 @@ const GlobalProperties: React.FC = () => {
const { renderDistance, setRenderDistance } = useRenderDistance();
const { socket } = useSocketStore();
const [limitDistance, setLimitDistance] = useState(false);
const [distance, setDistance] = useState<number>(5);
const [distance, setDistance] = useState<number>(30);
const [limitGridDistance, setLimitGridDistance] = useState(false);
const [gridDistance, setGridDistance] = useState<number>(5);
function optimizeScene() {
setLimitDistance(true);
setDistance(5);
setDistance(30);
}
function updateDistance(value: number) {
console.log("value: ", value);
setDistance(value);
setRenderDistance(value);
}
function updateGridDistance(value: number) {
@ -134,6 +136,15 @@ const GlobalProperties: React.FC = () => {
}
};
// function changeRenderDistance(e: any) {
// if (parseInt(e.target.value) < 20) {
// setRenderDistance(20);
// } else if (parseInt(e.target.value) > 75) {
// setRenderDistance(75);
// } else {
// setRenderDistance(parseInt(e.target.value));
// }
// }
return (
<div className="global-properties-container">
<div className="header">Environment</div>
@ -169,7 +180,7 @@ const GlobalProperties: React.FC = () => {
/>
<div className="split"></div>
{/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */}
<InputToggle
inputKey="4"
label="Limit Render Distance"
@ -183,6 +194,8 @@ const GlobalProperties: React.FC = () => {
disabled={!limitDistance}
value={distance}
key={"5"}
min={CONSTANTS.distanceConfig.minDistance}
max={CONSTANTS.distanceConfig.maxDistance}
onChange={(value: number) => updateDistance(value)}
/>

View File

@ -68,7 +68,7 @@ const Tools: React.FC = () => {
: true
);
}, []);
useEffect(() => {}, [activeModule]);
useEffect(() => {
setActiveTool(activeSubTool);
setActiveSubTool(activeSubTool);
@ -433,8 +433,6 @@ const Tools: React.FC = () => {
</div>
)}
</div>
{activeModule === "builder" && (
<>
<div className="split"></div>
<div
className={`toggle-threed-button${
@ -442,19 +440,13 @@ const Tools: React.FC = () => {
}`}
onClick={toggleSwitch}
>
<div
className={`toggle-option${!toggleThreeD ? " active" : ""}`}
>
<div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
2d
</div>
<div
className={`toggle-option${toggleThreeD ? " active" : ""}`}
>
<div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
3d
</div>
</div>
</>
)}
</div>
</>
) : (

View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import * as CONSTANTS from "../../../types/world/worldConstants";
interface InputToggleProps {
label: string; // Represents the toggle state (on/off)
min?: number;
@ -14,8 +14,8 @@ const InputRange: React.FC<InputToggleProps> = ({
label,
onClick,
onChange,
min = 0,
max = 10,
min,
max,
disabled,
value = 5,
}) => {
@ -23,6 +23,7 @@ const InputRange: React.FC<InputToggleProps> = ({
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
const newValue = parseInt(e.target.value); // Parse the value to an integer
setRangeValue(newValue); // Update the local state
if (onChange) {

View File

@ -94,7 +94,7 @@ const AssetPreview: React.FC<AssetPreviewProps> = ({
<div className="asset-details">
<div className="asset-name">{selectedCard.assetName}</div>
<div className="asset-description">
{`${selectedCard.assetName} is used in factories to improve efficiency and production speed It is designed to handle heavy workloads and perform repetitive tasks with precision. Many industries rely on this machine to manufacture products quickly and accurately. It reduces human effort and minimizes errors in the production process. Regular maintenance is required to keep the machine in good working condition.With advanced technology, this machine continues to enhance industrial operations and increase productivity.`}
{`${selectedCard.description}`}
</div>
<div className="asset-review">
<div className="asset-rating">

View File

@ -14,6 +14,7 @@ interface ModelData {
thumbnail: string;
uploadDate: number;
_id: string;
price: number;
}
interface ModelsProps {
models: ModelData[];
@ -50,7 +51,7 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
key={assetDetail._id}
assetName={assetDetail?.filename}
uploadedOn={assetDetail.uploadDate}
price={36500}
price={assetDetail?.price}
rating={4.5}
views={800}
onSelectCard={handleCardSelect}

View File

@ -17,6 +17,7 @@ interface ModelData {
thumbnail: string;
uploadDate: number;
_id: string;
price: number;
}
interface ModelsProps {
models: ModelData[];

View File

@ -15,6 +15,7 @@ interface ModelData {
thumbnail: string;
uploadDate: number;
_id: string;
price: number;
}
const MarketPlace = () => {
const [models, setModels] = useState<ModelData[]>([]);
@ -24,6 +25,7 @@ const MarketPlace = () => {
const filteredAssets = async () => {
try {
const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6");
setModels(filt.items);
setFilteredModels(filt.items);
} catch {}

View File

@ -1,9 +1,16 @@
import * as THREE from 'three'
import { EffectComposer, N8AO, Outline } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'
import { useDeletableFloorItem, useSelectedActionSphere, useSelectedPath, useSelectedWallItem, useselectedFloorItem } from '../../../store/store';
import * as Types from '../../../types/world/worldTypes'
import * as CONSTANTS from '../../../types/world/worldConstants';
import * as THREE from "three";
import { EffectComposer, N8AO, Outline } from "@react-three/postprocessing";
import { BlendFunction } from "postprocessing";
import {
useDeletableFloorItem,
useSelectedActionSphere,
useSelectedPath,
useSelectedWallItem,
useselectedFloorItem,
} from "../../../store/store";
import * as Types from "../../../types/world/worldTypes";
import * as CONSTANTS from "../../../types/world/worldConstants";
import { useEffect } from "react";
export default function PostProcessing() {
const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
@ -14,7 +21,7 @@ export default function PostProcessing() {
function flattenChildren(children: any[]) {
const allChildren: any[] = [];
children.forEach(child => {
children.forEach((child) => {
allChildren.push(child);
if (child.children && child.children.length > 0) {
allChildren.push(...flattenChildren(child.children));
@ -26,8 +33,16 @@ export default function PostProcessing() {
return (
<>
<EffectComposer autoClear={false}>
<N8AO color="black" aoRadius={20} intensity={7} distanceFalloff={4} aoSamples={32} denoiseRadius={6} denoiseSamples={16} />
{deletableFloorItem &&
<N8AO
color="black"
aoRadius={20}
intensity={7}
distanceFalloff={4}
aoSamples={32}
denoiseRadius={6}
denoiseSamples={16}
/>
{deletableFloorItem && (
<Outline
selection={flattenChildren(deletableFloorItem.children)}
selectionLayer={10}
@ -41,14 +56,12 @@ export default function PostProcessing() {
blur={true}
xRay={true}
/>
}
{selectedWallItem &&
)}
{selectedWallItem && (
<Outline
selection={
selectedWallItem.children[1].children[0].children.filter(
selection={selectedWallItem.children[1].children[0].children.filter(
(child: Types.Mesh) => child.name !== "CSG_REF"
)
}
)}
selectionLayer={10}
width={3000}
blendFunction={BlendFunction.ALPHA}
@ -59,8 +72,9 @@ export default function PostProcessing() {
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
blur={true}
xRay={true}
/>}
{selectedFloorItem &&
/>
)}
{selectedFloorItem && (
<Outline
selection={flattenChildren(selectedFloorItem.children)}
selectionLayer={10}
@ -74,8 +88,8 @@ export default function PostProcessing() {
blur={true}
xRay={true}
/>
}
{selectedActionSphere &&
)}
{selectedActionSphere && (
<Outline
selection={[selectedActionSphere.point]}
selectionLayer={10}
@ -89,8 +103,8 @@ export default function PostProcessing() {
blur={true}
xRay={true}
/>
}
{selectedPath &&
)}
{selectedPath && (
<Outline
selection={flattenChildren(selectedPath.group.children)}
selectionLayer={10}
@ -104,8 +118,8 @@ export default function PostProcessing() {
blur={true}
xRay={true}
/>
}
)}
</EffectComposer>
</>
)
);
}

View File

@ -0,0 +1,19 @@
let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
export const getCategoryAsset = async (categoryName: any) => {
try {
const response = await fetch(
`${BackEnd_url}/api/v2/getCatagoryAssets/${categoryName}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
const result = await response.json();
return result;
} catch (error: any) {
throw new Error(error.message);
}
};

View File

@ -1029,10 +1029,14 @@
}
.asset-image {
height: 100%;
width: 100%;
position: absolute;
top: 50%;
right: 5px;
transform: translate(0, -50%);
// top: 50%;
// right: 5px;
// transform: translate(0, -50%);
top: 0;
left: 0;
z-index: 2;
}
}

View File

@ -56,7 +56,6 @@ export type ThreeDimension = {
rightMouse: number;
};
export type GridConfig = {
size: number;
divisions: number;
@ -65,7 +64,7 @@ export type GridConfig = {
position2D: [x: number, y: number, z: number];
position3D: [x: number, y: number, z: number];
}
};
export type PlaneConfig = {
position2D: [x: number, y: number, z: number];
@ -75,27 +74,27 @@ export type PlaneConfig = {
width: number;
height: number;
color: string;
}
};
export type ShadowConfig = {
shadowOffset: number,
shadowOffset: number;
shadowmapSizewidth: number,
shadowmapSizeheight: number,
shadowcamerafar: number,
shadowcameranear: number,
shadowcameratop: number,
shadowcamerabottom: number,
shadowcameraleft: number,
shadowcameraright: number,
shadowbias: number,
shadownormalBias: number,
shadowmapSizewidth: number;
shadowmapSizeheight: number;
shadowcamerafar: number;
shadowcameranear: number;
shadowcameratop: number;
shadowcamerabottom: number;
shadowcameraleft: number;
shadowcameraright: number;
shadowbias: number;
shadownormalBias: number;
shadowMaterialPosition: [x: number, y: number, z: number],
shadowMaterialRotation: [x: number, y: number, z: number],
shadowMaterialPosition: [x: number, y: number, z: number];
shadowMaterialRotation: [x: number, y: number, z: number];
shadowMaterialOpacity: number,
}
shadowMaterialOpacity: number;
};
export type SkyConfig = {
defaultTurbidity: number;
@ -105,12 +104,12 @@ export type SkyConfig = {
mieCoefficient: number;
mieDirectionalG: number;
skyDistance: number;
}
};
export type AssetConfig = {
defaultScaleBeforeGsap: [number, number, number];
defaultScaleAfterGsap: [number, number, number];
}
};
export type PointConfig = {
defaultInnerColor: string;
@ -124,7 +123,7 @@ export type PointConfig = {
zoneOuterColor: string;
snappingThreshold: number;
}
};
export type LineConfig = {
tubularSegments: number;
@ -146,50 +145,52 @@ export type LineConfig = {
aisleColor: string;
zoneColor: string;
helperColor: string;
}
};
export type WallConfig = {
defaultColor: string;
height: number;
width: number;
}
};
export type FloorConfig = {
defaultColor: string;
height: number;
textureScale: number;
}
};
export type RoofConfig = {
defaultColor: string;
height: number;
}
};
export type AisleConfig = {
width: number;
height: number;
defaultColor: number;
}
};
export type ZoneConfig = {
defaultColor: string;
color: string;
}
};
export type ColumnConfig = {
defaultColor: string;
}
};
export type OutlineConfig = {
assetSelectColor: number;
assetDeleteColor: number;
}
};
export type DistanceConfig = {
minDistance: number;
maxDistance: number;
};
export const firstPersonControls: Controls = {
azimuthRotateSpeed: 0.3, // Speed of rotation around the azimuth axis
@ -261,7 +262,7 @@ export const gridConfig: GridConfig = {
position2D: [0, 0.1, 0], // Position of the grid in 2D view
position3D: [0, -0.5, 0], // Position of the grid in 3D view
}
};
export const planeConfig: PlaneConfig = {
position2D: [0, -0.5, 0], // Position of the plane
@ -270,8 +271,8 @@ export const planeConfig: PlaneConfig = {
width: 300, // Width of the plane
height: 300, // Height of the plane
color: "#f3f3f3" // Color of the plane
}
color: "#f3f3f3", // Color of the plane
};
export const shadowConfig: ShadowConfig = {
shadowOffset: 50, // Offset of the shadow
@ -292,8 +293,8 @@ export const shadowConfig: ShadowConfig = {
shadowMaterialPosition: [0, 0.01, 0], // Position of the shadow material
shadowMaterialRotation: [-Math.PI / 2, 0, 0], // Rotation of the shadow material
shadowMaterialOpacity: 0.1 // Opacity of the shadow material
}
shadowMaterialOpacity: 0.1, // Opacity of the shadow material
};
export const skyConfig: SkyConfig = {
defaultTurbidity: 10.0, // Default turbidity of the sky
@ -302,13 +303,13 @@ export const skyConfig: SkyConfig = {
defaultRayleigh: 1.9, // Default Rayleigh scattering coefficient
mieCoefficient: 0.1, // Mie scattering coefficient
mieDirectionalG: 1.0, // Mie directional G
skyDistance: 2000 // Distance of the sky
}
skyDistance: 2000, // Distance of the sky
};
export const assetConfig: AssetConfig = {
defaultScaleBeforeGsap: [0.1, 0.1, 0.1], // Default scale of the assets
defaultScaleAfterGsap: [1, 1, 1] // Default scale of the assets
}
defaultScaleAfterGsap: [1, 1, 1], // Default scale of the assets
};
export const pointConfig: PointConfig = {
defaultInnerColor: "#ffffff", // Default inner color of the points
@ -322,7 +323,7 @@ export const pointConfig: PointConfig = {
zoneOuterColor: "#007BFF", // Outer color of the zone points
snappingThreshold: 1, // Threshold for snapping
}
};
export const lineConfig: LineConfig = {
tubularSegments: 64, // Number of tubular segments
@ -343,42 +344,47 @@ export const lineConfig: LineConfig = {
floorColor: "#808080", // Color of the floor lines
aisleColor: "#FBBC05", // Color of the aisle lines
zoneColor: "#007BFF", // Color of the zone lines
helperColor: "#C164FF" // Color of the helper lines
}
helperColor: "#C164FF", // Color of the helper lines
};
export const wallConfig: WallConfig = {
defaultColor: "white", // Default color of the walls
height: 7, // Height of the walls
width: 0.05, // Width of the walls
}
};
export const floorConfig: FloorConfig = {
defaultColor: "grey", // Default color of the floors
height: 0.1, // Height of the floors
textureScale: 0.1, // Scale of the floor texture
}
};
export const roofConfig: RoofConfig = {
defaultColor: "grey", // Default color of the roofs
height: 0.1 // Height of the roofs
}
height: 0.1, // Height of the roofs
};
export const aisleConfig: AisleConfig = {
width: 0.1, // Width of the aisles
height: 0.01, // Height of the aisles
defaultColor: 0xffff00 // Default color of the aisles
}
defaultColor: 0xffff00, // Default color of the aisles
};
export const zoneConfig: ZoneConfig = {
defaultColor: "black", // Default color of the zones
color: "blue" // Color of the zones
}
color: "blue", // Color of the zones
};
export const columnConfig: ColumnConfig = {
defaultColor: "White", // Default color of the columns
}
};
export const outlineConfig: OutlineConfig = {
assetSelectColor: 0x0054fE, // Color of the selected assets
assetDeleteColor: 0xFF0000 // Color of the deleted assets
}
assetSelectColor: 0x0054fe, // Color of the selected assets
assetDeleteColor: 0xff0000, // Color of the deleted assets
};
export const distanceConfig: DistanceConfig = {
minDistance: 20,
maxDistance: 75,
};