From e1200f52d0eb1ffb0d30595829947c4e8adb905a Mon Sep 17 00:00:00 2001 From: Poovizhi99 Date: Mon, 31 Mar 2025 12:07:25 +0530 Subject: [PATCH 1/2] assets added based on categoryin builder --- app/.env | 3 +- .../components/layout/sidebarLeft/Assets.tsx | 93 ++- .../analysis/RenderAnalysisInputs.tsx | 9 +- .../properties/AssetProperties.tsx | 17 +- .../properties/GlobalProperties.tsx | 21 +- app/src/components/ui/Tools.tsx | 76 ++- app/src/components/ui/inputs/InputRange.tsx | 7 +- .../scene/postProcessing/postProcessing.tsx | 228 ++++---- .../assest/assets/getCategoryAsset.ts | 23 + app/src/types/world/worldConstants.ts | 544 +++++++++--------- 10 files changed, 543 insertions(+), 478 deletions(-) create mode 100644 app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts diff --git a/app/.env b/app/.env index 153338d..ff2cfb0 100644 --- a/app/.env +++ b/app/.env @@ -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 diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx index 01b8c8e..5cd32f1 100644 --- a/app/src/components/layout/sidebarLeft/Assets.tsx +++ b/app/src/components/layout/sidebarLeft/Assets.tsx @@ -1,13 +1,29 @@ -import React, { useState } from "react"; +import React, { useEffect, 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"; + +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(""); const [selectedCategory, setSelectedCategory] = useState(null); + const [filteredAsset, setFilteredAsset] = useState([]); const handleSearchChange = (value: string) => { setSearchValue(value); @@ -34,56 +50,18 @@ const Assets: React.FC = () => { 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, }, @@ -94,12 +72,13 @@ const Assets: React.FC = () => { new Set(categoryList.map((asset) => asset.category)) ); - // Filter assets based on the selected category - const filteredAssets = - selectedCategory !== null - ? categoryList.filter((asset) => asset.category === selectedCategory) - : []; - + const fetchCategoryAssets = async (asset: any) => { + try { + setSelectedCategory(asset); + const res = await getCategoryAsset(asset); + setFilteredAsset(res); + } catch (error) {} + }; return (
@@ -118,16 +97,17 @@ const Assets: React.FC = () => {

{selectedCategory}

- {filteredAssets.map((asset, index) => ( -
- {asset.assetName} -
{asset.assetName}
-
- ))} + {filteredAsset && + filteredAsset?.map((asset: any, index: number) => ( +
+ {asset.filename} +
{asset.filename}
+
+ ))}
) : ( @@ -142,7 +122,7 @@ const Assets: React.FC = () => {
setSelectedCategory(category)} + onClick={() => fetchCategoryAssets(category)} > { }; export default Assets; - diff --git a/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx b/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx index aea58eb..3ab886f 100644 --- a/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx +++ b/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx @@ -27,7 +27,14 @@ const RenderAnalysisInputs: React.FC = ({ ); } if (preset.type === "range") { - return ; + return ( + + ); } return null; })} diff --git a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx index c47fd81..474ee71 100644 --- a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx @@ -17,12 +17,6 @@ const AssetProperties: React.FC = () => { const [userData, setUserData] = useState([]); // 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 = { @@ -59,10 +53,15 @@ const AssetProperties: React.FC = () => { {}} - value1={xValue.toFixed(5)} - value2={zValue.toFixed(5)} + value1={selectedFloorItem.position.x.toFixed(5)} + value2={selectedFloorItem.position.z.toFixed(5)} + /> + {}} + value={parseFloat( + THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5) + )} /> - {}} value={rotationDeg} />
diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx index 633b144..bd7e5c1 100644 --- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx @@ -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(5); + const [distance, setDistance] = useState(30); const [limitGridDistance, setLimitGridDistance] = useState(false); const [gridDistance, setGridDistance] = useState(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 (
Environment
@@ -169,7 +180,7 @@ const GlobalProperties: React.FC = () => { />
- + {/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */} { disabled={!limitDistance} value={distance} key={"5"} + min={CONSTANTS.distanceConfig.minDistance} + max={CONSTANTS.distanceConfig.maxDistance} onChange={(value: number) => updateDistance(value)} /> diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index c86164c..89f1553 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -62,9 +62,15 @@ const Tools: React.FC = () => { // Reset activeTool whenever activeModule changes useEffect(() => { - setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true) + setToggleUI( + localStorage.getItem("navBarUi") + ? localStorage.getItem("navBarUi") === "true" + : true + ); }, []); - + useEffect(() => { + console.log("activeModule", activeModule); + }, [activeModule]); useEffect(() => { setActiveTool(activeSubTool); setActiveSubTool(activeSubTool); @@ -80,7 +86,11 @@ const Tools: React.FC = () => { } else { setToggleView(false); } - setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true) + setToggleUI( + localStorage.getItem("navBarUi") + ? localStorage.getItem("navBarUi") === "true" + : true + ); setToggleThreeD(!toggleThreeD); setActiveSubTool("cursor"); setActiveTool("cursor"); @@ -202,8 +212,9 @@ const Tools: React.FC = () => {
{activeSubTool == "cursor" && (
{ setActiveTool("cursor"); }} @@ -213,8 +224,9 @@ const Tools: React.FC = () => { )} {activeSubTool == "free-hand" && (
{ setActiveTool("free-hand"); }} @@ -224,8 +236,9 @@ const Tools: React.FC = () => { )} {activeSubTool == "delete" && (
{ setActiveTool("delete"); }} @@ -297,8 +310,9 @@ const Tools: React.FC = () => {
{ setActiveTool("draw-wall"); }} @@ -307,8 +321,9 @@ const Tools: React.FC = () => {
{ setActiveTool("draw-zone"); }} @@ -317,8 +332,9 @@ const Tools: React.FC = () => {
{ setActiveTool("draw-aisle"); }} @@ -327,8 +343,9 @@ const Tools: React.FC = () => {
{ setActiveTool("draw-floor"); }} @@ -344,8 +361,9 @@ const Tools: React.FC = () => {
{ setActiveTool("measure"); }} @@ -361,8 +379,9 @@ const Tools: React.FC = () => {
{ setActiveTool("pen"); }} @@ -394,8 +413,9 @@ const Tools: React.FC = () => {
{ setActiveTool("comment"); }} @@ -404,8 +424,9 @@ const Tools: React.FC = () => {
{toggleThreeD && (
{ setIsPlaying(!isPlaying); }} @@ -416,8 +437,9 @@ const Tools: React.FC = () => {
diff --git a/app/src/components/ui/inputs/InputRange.tsx b/app/src/components/ui/inputs/InputRange.tsx index b46d9b4..a09a782 100644 --- a/app/src/components/ui/inputs/InputRange.tsx +++ b/app/src/components/ui/inputs/InputRange.tsx @@ -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 = ({ label, onClick, onChange, - min = 0, - max = 10, + min, + max, disabled, value = 5, }) => { @@ -23,6 +23,7 @@ const InputRange: React.FC = ({ function handleChange(e: React.ChangeEvent) { const newValue = parseInt(e.target.value); // Parse the value to an integer + setRangeValue(newValue); // Update the local state if (onChange) { diff --git a/app/src/modules/scene/postProcessing/postProcessing.tsx b/app/src/modules/scene/postProcessing/postProcessing.tsx index e1fc501..15597b8 100644 --- a/app/src/modules/scene/postProcessing/postProcessing.tsx +++ b/app/src/modules/scene/postProcessing/postProcessing.tsx @@ -1,111 +1,125 @@ -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(); - const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem(); - const { selectedFloorItem, setselectedFloorItem } = useselectedFloorItem(); - const { selectedActionSphere } = useSelectedActionSphere(); - const { selectedPath } = useSelectedPath(); + const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem(); + const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem(); + const { selectedFloorItem, setselectedFloorItem } = useselectedFloorItem(); + const { selectedActionSphere } = useSelectedActionSphere(); + const { selectedPath } = useSelectedPath(); - function flattenChildren(children: any[]) { - const allChildren: any[] = []; - children.forEach(child => { - allChildren.push(child); - if (child.children && child.children.length > 0) { - allChildren.push(...flattenChildren(child.children)); - } - }); - return allChildren; - } + function flattenChildren(children: any[]) { + const allChildren: any[] = []; + children.forEach((child) => { + allChildren.push(child); + if (child.children && child.children.length > 0) { + allChildren.push(...flattenChildren(child.children)); + } + }); + return allChildren; + } - return ( - <> - - - {deletableFloorItem && - - } - {selectedWallItem && - child.name !== "CSG_REF" - ) - } - selectionLayer={10} - width={3000} - blendFunction={BlendFunction.ALPHA} - edgeStrength={5} - resolutionScale={2} - pulseSpeed={0} - visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} - hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} - blur={true} - xRay={true} - />} - {selectedFloorItem && - - } - {selectedActionSphere && - - } - {selectedPath && - - } - - - ) -} \ No newline at end of file + return ( + <> + + + {deletableFloorItem && ( + + )} + {selectedWallItem && ( + child.name !== "CSG_REF" + )} + selectionLayer={10} + width={3000} + blendFunction={BlendFunction.ALPHA} + edgeStrength={5} + resolutionScale={2} + pulseSpeed={0} + visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} + hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} + blur={true} + xRay={true} + /> + )} + {selectedFloorItem && ( + + )} + {selectedActionSphere && ( + + )} + {selectedPath && ( + + )} + + + ); +} diff --git a/app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts b/app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts new file mode 100644 index 0000000..9620fce --- /dev/null +++ b/app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts @@ -0,0 +1,23 @@ +let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`; +export const getCategoryAsset = async (categoryName: any) => { + console.log("categoryName:api ", categoryName); + try { + const response = await fetch( + `${BackEnd_url}/api/v2/getCatagoryAssets/${categoryName}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + // body: JSON.stringify({ filename }), + } + ); + + const result = await response.json(); + console.log("result: ", result); + return result; + } catch (error: any) { + // console.error("Error fetching category:", error.message); + throw new Error(error.message); + } +}; diff --git a/app/src/types/world/worldConstants.ts b/app/src/types/world/worldConstants.ts index b14e799..66743fb 100644 --- a/app/src/types/world/worldConstants.ts +++ b/app/src/types/world/worldConstants.ts @@ -1,384 +1,390 @@ export type Controls = { - azimuthRotateSpeed: number; - polarRotateSpeed: number; - truckSpeed: number; - minDistance: number; - maxDistance: number; - maxPolarAngle: number; - leftMouse: number; - forwardSpeed: number; - backwardSpeed: number; - leftSpeed: number; - rightSpeed: number; + azimuthRotateSpeed: number; + polarRotateSpeed: number; + truckSpeed: number; + minDistance: number; + maxDistance: number; + maxPolarAngle: number; + leftMouse: number; + forwardSpeed: number; + backwardSpeed: number; + leftSpeed: number; + rightSpeed: number; }; export type ThirdPersonControls = { - azimuthRotateSpeed: number; - polarRotateSpeed: number; - truckSpeed: number; - maxDistance: number; - maxPolarAngle: number; - minZoom: number; - maxZoom: number; - targetOffset: number; - cameraHeight: number; - leftMouse: number; - rightMouse: number; - wheelMouse: number; - middleMouse: number; + azimuthRotateSpeed: number; + polarRotateSpeed: number; + truckSpeed: number; + maxDistance: number; + maxPolarAngle: number; + minZoom: number; + maxZoom: number; + targetOffset: number; + cameraHeight: number; + leftMouse: number; + rightMouse: number; + wheelMouse: number; + middleMouse: number; }; export type ControlsTransition = { - leftMouse: number; - rightMouse: number; - wheelMouse: number; - middleMouse: number; + leftMouse: number; + rightMouse: number; + wheelMouse: number; + middleMouse: number; }; export type TwoDimension = { - defaultPosition: [x: number, y: number, z: number]; - defaultTarget: [x: number, y: number, z: number]; - defaultAzimuth: number; - minDistance: number; - leftMouse: number; - rightMouse: number; + defaultPosition: [x: number, y: number, z: number]; + defaultTarget: [x: number, y: number, z: number]; + defaultAzimuth: number; + minDistance: number; + leftMouse: number; + rightMouse: number; }; export type ThreeDimension = { - defaultPosition: [x: number, y: number, z: number]; - defaultTarget: [x: number, y: number, z: number]; - defaultRotation: [x: number, y: number, z: number]; - defaultAzimuth: number; - boundaryBottom: [x: number, y: number, z: number]; - boundaryTop: [x: number, y: number, z: number]; - minDistance: number; - leftMouse: number; - rightMouse: number; + defaultPosition: [x: number, y: number, z: number]; + defaultTarget: [x: number, y: number, z: number]; + defaultRotation: [x: number, y: number, z: number]; + defaultAzimuth: number; + boundaryBottom: [x: number, y: number, z: number]; + boundaryTop: [x: number, y: number, z: number]; + minDistance: number; + leftMouse: number; + rightMouse: number; }; - export type GridConfig = { - size: number; - divisions: number; - primaryColor: string; - secondaryColor: string; + size: number; + divisions: number; + primaryColor: string; + secondaryColor: string; - position2D: [x: number, y: number, z: number]; - position3D: [x: number, y: number, z: number]; -} + position2D: [x: number, y: number, z: number]; + position3D: [x: number, y: number, z: number]; +}; export type PlaneConfig = { - position2D: [x: number, y: number, z: number]; - position3D: [x: number, y: number, z: number]; - rotation: number; + position2D: [x: number, y: number, z: number]; + position3D: [x: number, y: number, z: number]; + rotation: number; - width: number; - height: number; - color: string; -} + 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; - maxTurbidity: number; - minTurbidity: number; - defaultRayleigh: number; - mieCoefficient: number; - mieDirectionalG: number; - skyDistance: number; -} + defaultTurbidity: number; + maxTurbidity: number; + minTurbidity: number; + defaultRayleigh: number; + mieCoefficient: number; + mieDirectionalG: number; + skyDistance: number; +}; export type AssetConfig = { - defaultScaleBeforeGsap: [number, number, number]; - defaultScaleAfterGsap: [number, number, number]; -} + defaultScaleBeforeGsap: [number, number, number]; + defaultScaleAfterGsap: [number, number, number]; +}; export type PointConfig = { - defaultInnerColor: string; - defaultOuterColor: string; - deleteColor: string; - boxScale: [number, number, number]; + defaultInnerColor: string; + defaultOuterColor: string; + deleteColor: string; + boxScale: [number, number, number]; - wallOuterColor: string; - floorOuterColor: string; - aisleOuterColor: string; - zoneOuterColor: string; + wallOuterColor: string; + floorOuterColor: string; + aisleOuterColor: string; + zoneOuterColor: string; - snappingThreshold: number; -} + snappingThreshold: number; +}; export type LineConfig = { - tubularSegments: number; - radius: number; - radialSegments: number; + tubularSegments: number; + radius: number; + radialSegments: number; - wallName: string; - floorName: string; - aisleName: string; - zoneName: string; - referenceName: string; + wallName: string; + floorName: string; + aisleName: string; + zoneName: string; + referenceName: string; - lineIntersectionPoints: number; + lineIntersectionPoints: number; - defaultColor: string; + defaultColor: string; - wallColor: string; - floorColor: string; - aisleColor: string; - zoneColor: string; - helperColor: string; -} + wallColor: string; + floorColor: string; + aisleColor: string; + zoneColor: string; + helperColor: string; +}; export type WallConfig = { - defaultColor: string; - height: number; - width: number; -} + defaultColor: string; + height: number; + width: number; +}; export type FloorConfig = { - defaultColor: string; - height: number; + defaultColor: string; + height: number; - textureScale: number; -} + textureScale: number; +}; export type RoofConfig = { - defaultColor: string; - height: number; -} + defaultColor: string; + height: number; +}; export type AisleConfig = { - width: number; - height: number; + width: number; + height: number; - defaultColor: number; -} + defaultColor: number; +}; export type ZoneConfig = { - defaultColor: string; + defaultColor: string; - color: string; -} + color: string; +}; export type ColumnConfig = { - defaultColor: string; -} + defaultColor: string; +}; export type OutlineConfig = { - assetSelectColor: number; - assetDeleteColor: number; -} - - + 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 - polarRotateSpeed: 0.3, // Speed of rotation around the polar axis - truckSpeed: 10, // Speed of truck movement - minDistance: 0, // Minimum distance from the target - maxDistance: 0, // Maximum distance from the target - maxPolarAngle: Math.PI, // Maximum polar angle + azimuthRotateSpeed: 0.3, // Speed of rotation around the azimuth axis + polarRotateSpeed: 0.3, // Speed of rotation around the polar axis + truckSpeed: 10, // Speed of truck movement + minDistance: 0, // Minimum distance from the target + maxDistance: 0, // Maximum distance from the target + maxPolarAngle: Math.PI, // Maximum polar angle - leftMouse: 1, // Mouse button for rotation (ROTATE) + leftMouse: 1, // Mouse button for rotation (ROTATE) - forwardSpeed: 0.3, // Speed of forward movement - backwardSpeed: -0.3, // Speed of backward movement - leftSpeed: -0.3, // Speed of left movement - rightSpeed: 0.3, // Speed of right movement + forwardSpeed: 0.3, // Speed of forward movement + backwardSpeed: -0.3, // Speed of backward movement + leftSpeed: -0.3, // Speed of left movement + rightSpeed: 0.3, // Speed of right movement }; export const thirdPersonControls: ThirdPersonControls = { - azimuthRotateSpeed: 1, // Speed of rotation around the azimuth axis - polarRotateSpeed: 1, // Speed of rotation around the polar axis - truckSpeed: 2, // Speed of truck movement - maxDistance: 100, // Maximum distance from the target - maxPolarAngle: Math.PI / 2 - 0.05, // Maximum polar angle - minZoom: 6, // Minimum zoom level - maxZoom: 21, // Maximum zoom level - targetOffset: 20, // Offset of the target from the camera - cameraHeight: 30, // Height of the camera - leftMouse: 2, // Mouse button for panning - rightMouse: 1, // Mouse button for rotation - wheelMouse: 8, // Mouse button for zooming - middleMouse: 8, // Mouse button for zooming + azimuthRotateSpeed: 1, // Speed of rotation around the azimuth axis + polarRotateSpeed: 1, // Speed of rotation around the polar axis + truckSpeed: 2, // Speed of truck movement + maxDistance: 100, // Maximum distance from the target + maxPolarAngle: Math.PI / 2 - 0.05, // Maximum polar angle + minZoom: 6, // Minimum zoom level + maxZoom: 21, // Maximum zoom level + targetOffset: 20, // Offset of the target from the camera + cameraHeight: 30, // Height of the camera + leftMouse: 2, // Mouse button for panning + rightMouse: 1, // Mouse button for rotation + wheelMouse: 8, // Mouse button for zooming + middleMouse: 8, // Mouse button for zooming }; export const controlsTransition: ControlsTransition = { - leftMouse: 0, // Mouse button for no action - rightMouse: 0, // Mouse button for no action - wheelMouse: 0, // Mouse button for no action - middleMouse: 0, // Mouse button for no action + leftMouse: 0, // Mouse button for no action + rightMouse: 0, // Mouse button for no action + wheelMouse: 0, // Mouse button for no action + middleMouse: 0, // Mouse button for no action }; export const twoDimension: TwoDimension = { - defaultPosition: [0, 100, 0], // Default position of the camera - defaultTarget: [0, 0, 0], // Default target of the camera - defaultAzimuth: 0, // Default azimuth of the camera - minDistance: 25, // Minimum distance from the target - leftMouse: 2, // Mouse button for panning - rightMouse: 0, // Mouse button for no action + defaultPosition: [0, 100, 0], // Default position of the camera + defaultTarget: [0, 0, 0], // Default target of the camera + defaultAzimuth: 0, // Default azimuth of the camera + minDistance: 25, // Minimum distance from the target + leftMouse: 2, // Mouse button for panning + rightMouse: 0, // Mouse button for no action }; export const threeDimension: ThreeDimension = { - defaultPosition: [0, 40, 30], // Default position of the camera - defaultTarget: [0, 0, 0], // Default target of the camera - defaultRotation: [0, 0, 0], // Default rotation of the camera - defaultAzimuth: 0, // Default azimuth of the camera - boundaryBottom: [-150, 0, -150], // Bottom boundary of the camera movement - boundaryTop: [150, 100, 150], // Top boundary of the camera movement - minDistance: 1, // Minimum distance from the target - leftMouse: 2, // Mouse button for panning - rightMouse: 1, // Mouse button for rotation + defaultPosition: [0, 40, 30], // Default position of the camera + defaultTarget: [0, 0, 0], // Default target of the camera + defaultRotation: [0, 0, 0], // Default rotation of the camera + defaultAzimuth: 0, // Default azimuth of the camera + boundaryBottom: [-150, 0, -150], // Bottom boundary of the camera movement + boundaryTop: [150, 100, 150], // Top boundary of the camera movement + minDistance: 1, // Minimum distance from the target + leftMouse: 2, // Mouse button for panning + rightMouse: 1, // Mouse button for rotation }; export const camPositionUpdateInterval: number = 200; // Interval for updating the camera position export const gridConfig: GridConfig = { - size: 300, // Size of the grid - divisions: 75, // Number of divisions in the grid - primaryColor: "#d5d5d5", // Primary color of the grid - secondaryColor: "#e3e3e3", // Secondary color of the grid + size: 300, // Size of the grid + divisions: 75, // Number of divisions in the grid + primaryColor: "#d5d5d5", // Primary color of the grid + secondaryColor: "#e3e3e3", // Secondary color of the grid - position2D: [0, 0.1, 0], // Position of the grid in 2D view - position3D: [0, -0.5, 0], // Position of the grid in 3D view -} + 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 - position3D: [0, -0.65, 0], // Position of the plane - rotation: -Math.PI / 2, // Rotation of the plane + position2D: [0, -0.5, 0], // Position of the plane + position3D: [0, -0.65, 0], // Position of the plane + rotation: -Math.PI / 2, // Rotation of the plane - width: 300, // Width of the plane - height: 300, // Height of the plane - color: "#f3f3f3" // Color of the plane -} + width: 300, // Width of the plane + height: 300, // Height of the plane + color: "#f3f3f3", // Color of the plane +}; export const shadowConfig: ShadowConfig = { - shadowOffset: 50, // Offset of the shadow + shadowOffset: 50, // Offset of the shadow - shadowmapSizewidth: 1024, // Width of the shadow map - shadowmapSizeheight: 1024, // Height of the shadow map - // shadowmapSizewidth: 8192, // Width of the shadow map - // shadowmapSizeheight: 8192, // Height of the shadow map - shadowcamerafar: 70, // Far plane of the shadow camera - shadowcameranear: 0.1, // Near plane of the shadow camera - shadowcameratop: 30, // Top plane of the shadow camera - shadowcamerabottom: -30, // Bottom plane of the shadow camera - shadowcameraleft: -30, // Left plane of the shadow camera - shadowcameraright: 30, // Right plane of the shadow camera - shadowbias: -0.001, // Bias of the shadow - shadownormalBias: 0.02, // Normal bias of the shadow + shadowmapSizewidth: 1024, // Width of the shadow map + shadowmapSizeheight: 1024, // Height of the shadow map + // shadowmapSizewidth: 8192, // Width of the shadow map + // shadowmapSizeheight: 8192, // Height of the shadow map + shadowcamerafar: 70, // Far plane of the shadow camera + shadowcameranear: 0.1, // Near plane of the shadow camera + shadowcameratop: 30, // Top plane of the shadow camera + shadowcamerabottom: -30, // Bottom plane of the shadow camera + shadowcameraleft: -30, // Left plane of the shadow camera + shadowcameraright: 30, // Right plane of the shadow camera + shadowbias: -0.001, // Bias of the shadow + shadownormalBias: 0.02, // Normal bias of the shadow - shadowMaterialPosition: [0, 0.01, 0], // Position of the shadow material - shadowMaterialRotation: [-Math.PI / 2, 0, 0], // Rotation of the shadow material + 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 - maxTurbidity: 20.0, // Maximum turbidity of the sky - minTurbidity: 0.0, // Minimum turbidity of the sky - 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 -} + defaultTurbidity: 10.0, // Default turbidity of the sky + maxTurbidity: 20.0, // Maximum turbidity of the sky + minTurbidity: 0.0, // Minimum turbidity of the sky + 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 +}; 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 -} + defaultScaleBeforeGsap: [0.1, 0.1, 0.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 - defaultOuterColor: "#ffffff", // Default outer color of the points - deleteColor: "#ff0000", // Color of the points when deleting - boxScale: [0.5, 0.5, 0.5], // Scale of the points + defaultInnerColor: "#ffffff", // Default inner color of the points + defaultOuterColor: "#ffffff", // Default outer color of the points + deleteColor: "#ff0000", // Color of the points when deleting + boxScale: [0.5, 0.5, 0.5], // Scale of the points - wallOuterColor: "#C7C7C7", // Outer color of the wall points - floorOuterColor: "#808080", // Outer color of the floor points - aisleOuterColor: "#FBBC05", // Outer color of the aisle points - zoneOuterColor: "#007BFF", // Outer color of the zone points + wallOuterColor: "#C7C7C7", // Outer color of the wall points + floorOuterColor: "#808080", // Outer color of the floor points + aisleOuterColor: "#FBBC05", // Outer color of the aisle points + zoneOuterColor: "#007BFF", // Outer color of the zone points - snappingThreshold: 1, // Threshold for snapping -} + snappingThreshold: 1, // Threshold for snapping +}; export const lineConfig: LineConfig = { - tubularSegments: 64, // Number of tubular segments - radius: 0.15, // Radius of the lines - radialSegments: 8, // Number of radial segments + tubularSegments: 64, // Number of tubular segments + radius: 0.15, // Radius of the lines + radialSegments: 8, // Number of radial segments - wallName: "WallLine", // Name of the wall lines - floorName: "FloorLine", // Name of the floor lines - aisleName: "AisleLine", // Name of the aisle lines - zoneName: "ZoneLine", // Name of the zone lines - referenceName: "ReferenceLine", // Name of the reference lines + wallName: "WallLine", // Name of the wall lines + floorName: "FloorLine", // Name of the floor lines + aisleName: "AisleLine", // Name of the aisle lines + zoneName: "ZoneLine", // Name of the zone lines + referenceName: "ReferenceLine", // Name of the reference lines - lineIntersectionPoints: 300, // Number of intersection points + lineIntersectionPoints: 300, // Number of intersection points - defaultColor: "#000000", // Default color of the lines + defaultColor: "#000000", // Default color of the lines - wallColor: "#C7C7C7", // Color of the wall lines - 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 -} + wallColor: "#C7C7C7", // Color of the wall lines + 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 +}; export const wallConfig: WallConfig = { - defaultColor: "white", // Default color of the walls - height: 7, // Height of the walls - width: 0.05, // Width of the walls -} + 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 -} + 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 -} + defaultColor: "grey", // Default color 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 -} + width: 0.1, // Width of the aisles + height: 0.01, // Height 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 -} + defaultColor: "black", // Default color of the zones + color: "blue", // Color of the zones +}; export const columnConfig: ColumnConfig = { - defaultColor: "White", // Default color of the columns -} + 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 -} \ No newline at end of file + assetSelectColor: 0x0054fe, // Color of the selected assets + assetDeleteColor: 0xff0000, // Color of the deleted assets +}; + +export const distanceConfig: DistanceConfig = { + minDistance: 20, + maxDistance: 75, +}; From cacb23ea5a2533a314467f9d06453a10a24569d0 Mon Sep 17 00:00:00 2001 From: Poovizhi99 Date: Mon, 31 Mar 2025 12:59:12 +0530 Subject: [PATCH 2/2] added feneration assets --- .../components/layout/sidebarLeft/Assets.tsx | 149 ++++++++++-------- app/src/components/ui/Tools.tsx | 4 +- app/src/modules/market/AssetPreview.tsx | 2 +- app/src/modules/market/CardsContainer.tsx | 3 +- app/src/modules/market/FilterSearch.tsx | 1 + app/src/modules/market/MarketPlace.tsx | 2 + .../assest/assets/getCategoryAsset.ts | 4 - app/src/styles/layout/sidebar.scss | 10 +- 8 files changed, 100 insertions(+), 75 deletions(-) diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx index 5cd32f1..f8733dc 100644 --- a/app/src/components/layout/sidebarLeft/Assets.tsx +++ b/app/src/components/layout/sidebarLeft/Assets.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, 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"; @@ -6,19 +6,21 @@ 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; + thumbnail?: string; category: string; - description: string; - tags: string; - url: String; - uploadDate: number; - isArchieve: boolean; - animated: boolean; - price: number; - CreatedBy: 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(""); @@ -30,55 +32,64 @@ const Assets: React.FC = () => { setSelectedCategory(null); // Reset selected category when search changes }; - const categoryList = [ - { - assetName: "Doors", - assetImage: "", - category: "Feneration", - categoryImage: feneration, - }, - { - assetName: "Windows", - assetImage: "", - category: "Feneration", - categoryImage: feneration, - }, - { - assetName: "Pillars", - assetImage: "", - category: "Feneration", - categoryImage: feneration, - }, - { - category: "Vehicles", - categoryImage: vehicle, - }, - { - category: "Workstation", - categoryImage: workStation, - }, - { - category: "Machines", - categoryImage: machines, - }, - { - category: "Workers", - categoryImage: worker, - }, - ]; - - // Get unique categories - const uniqueCategories = Array.from( - new Set(categoryList.map((asset) => asset.category)) + const categoryList = useMemo( + () => [ + { + assetName: "Doors", + assetImage: "", + category: "Feneration", + categoryImage: feneration, + }, + { + assetName: "Windows", + assetImage: "", + category: "Feneration", + categoryImage: feneration, + }, + { + assetName: "Pillars", + assetImage: "", + category: "Feneration", + categoryImage: feneration, + }, + { category: "Vehicles", categoryImage: vehicle }, + { category: "Workstation", categoryImage: workStation }, + { category: "Machines", categoryImage: machines }, + { category: "Workers", categoryImage: worker }, + ], + [] ); const fetchCategoryAssets = async (asset: any) => { - try { - setSelectedCategory(asset); - const res = await getCategoryAsset(asset); - setFilteredAsset(res); - } catch (error) {} + 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 (
@@ -100,12 +111,22 @@ const Assets: React.FC = () => { {filteredAsset && filteredAsset?.map((asset: any, index: number) => (
- {asset.filename} -
{asset.filename}
+ {asset?.thumbnail && ( + {asset.filename} + )} +
+ {asset.filename + .split("_") + .map( + (word: any) => + word.charAt(0).toUpperCase() + word.slice(1) + ) + .join(" ")} +
))}
@@ -114,7 +135,9 @@ const Assets: React.FC = () => {

Categories

- {uniqueCategories.map((category, index) => { + {Array.from( + new Set(categoryList.map((asset) => asset.category)) + ).map((category, index) => { const categoryInfo = categoryList.find( (asset) => asset.category === category ); diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index 89f1553..9e7dd1b 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -68,9 +68,7 @@ const Tools: React.FC = () => { : true ); }, []); - useEffect(() => { - console.log("activeModule", activeModule); - }, [activeModule]); + useEffect(() => {}, [activeModule]); useEffect(() => { setActiveTool(activeSubTool); setActiveSubTool(activeSubTool); diff --git a/app/src/modules/market/AssetPreview.tsx b/app/src/modules/market/AssetPreview.tsx index 854ebc4..1d39920 100644 --- a/app/src/modules/market/AssetPreview.tsx +++ b/app/src/modules/market/AssetPreview.tsx @@ -94,7 +94,7 @@ const AssetPreview: React.FC = ({
{selectedCard.assetName}
- {`${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}`}
diff --git a/app/src/modules/market/CardsContainer.tsx b/app/src/modules/market/CardsContainer.tsx index c2a7e6d..cdbce81 100644 --- a/app/src/modules/market/CardsContainer.tsx +++ b/app/src/modules/market/CardsContainer.tsx @@ -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 = ({ models }) => { key={assetDetail._id} assetName={assetDetail?.filename} uploadedOn={assetDetail.uploadDate} - price={36500} + price={assetDetail?.price} rating={4.5} views={800} onSelectCard={handleCardSelect} diff --git a/app/src/modules/market/FilterSearch.tsx b/app/src/modules/market/FilterSearch.tsx index 84074b8..630942d 100644 --- a/app/src/modules/market/FilterSearch.tsx +++ b/app/src/modules/market/FilterSearch.tsx @@ -17,6 +17,7 @@ interface ModelData { thumbnail: string; uploadDate: number; _id: string; + price: number; } interface ModelsProps { models: ModelData[]; diff --git a/app/src/modules/market/MarketPlace.tsx b/app/src/modules/market/MarketPlace.tsx index d830576..cd2e0e9 100644 --- a/app/src/modules/market/MarketPlace.tsx +++ b/app/src/modules/market/MarketPlace.tsx @@ -15,6 +15,7 @@ interface ModelData { thumbnail: string; uploadDate: number; _id: string; + price: number; } const MarketPlace = () => { const [models, setModels] = useState([]); @@ -24,6 +25,7 @@ const MarketPlace = () => { const filteredAssets = async () => { try { const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6"); + setModels(filt.items); setFilteredModels(filt.items); } catch {} diff --git a/app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts b/app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts index 9620fce..522e54c 100644 --- a/app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts +++ b/app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts @@ -1,6 +1,5 @@ let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`; export const getCategoryAsset = async (categoryName: any) => { - console.log("categoryName:api ", categoryName); try { const response = await fetch( `${BackEnd_url}/api/v2/getCatagoryAssets/${categoryName}`, @@ -9,15 +8,12 @@ export const getCategoryAsset = async (categoryName: any) => { headers: { "Content-Type": "application/json", }, - // body: JSON.stringify({ filename }), } ); const result = await response.json(); - console.log("result: ", result); return result; } catch (error: any) { - // console.error("Error fetching category:", error.message); throw new Error(error.message); } }; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 1e2de3c..e8175c5 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -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; } }