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

folder structure change

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-04-21 11:53:42 +05:30
parent 31561428ef
commit 54cc3deb98
118 changed files with 3014 additions and 13419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/modules/visualization/RealTimeVisulization.tsx
View File

@@ -3,7 +3,7 @@ import { usePlayButtonStore } from "../../store/usePlayButtonStore";
import Panel from "./widgets/panel/Panel";
import AddButtons from "./widgets/panel/AddButtons";
import { useSelectedZoneStore } from "../../store/useZoneStore";
import DisplayZone from "./DisplayZone";
import DisplayZone from "./zone/DisplayZone";
import Scene from "../scene/scene";
import useModuleStore from "../../store/useModuleStore";
@@ -17,10 +17,10 @@ import {
useWidgetSubOption,
useZones,
} from "../../store/store";
import { getZone2dData } from "../../services/realTimeVisulization/zoneData/getZoneData";
import { getZone2dData } from "../../services/visulization/zone/getZoneData";
import { generateUniqueId } from "../../functions/generateUniqueId";
import { determinePosition } from "./functions/determinePosition";
import { addingFloatingWidgets } from "../../services/realTimeVisulization/zoneData/addFloatingWidgets";
import { addingFloatingWidgets } from "../../services/visulization/zone/addFloatingWidgets";
import SocketRealTimeViz from "./socket/realTimeVizSocket.dev";
import RenderOverlay from "../../components/templates/Overlay";
import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
@@ -31,7 +31,6 @@ import {
useRightClickSelected,
useRightSelected,
} from "../../store/useZone3DWidgetStore";
import Dropped3dWidgets from "./widgets/3d/Dropped3dWidget";
import OuterClick from "../../utils/outerClick";
import { useWidgetStore } from "../../store/useWidgetStore";
import { getActiveProperties } from "./functions/getActiveProperties";

109
app/src/modules/visualization/mqttTemp/drieHtmlTemp.tsx Normal file
View File

@@ -0,0 +1,109 @@
import { Html } from "@react-three/drei";
import * as THREE from "three";
import * as Types from "../../../types/world/worldTypes";
import { useDrieTemp, useDrieUIValue } from "../../../store/store"
import UI from "./ui";
import { useEffect } from "react";
import { useThree } from "@react-three/fiber";
export default function DrieHtmlTemp({ itemsGroup }: { itemsGroup: Types.RefGroup }) {
const { drieTemp, setDrieTemp } = useDrieTemp();
const { drieUIValue, setDrieUIValue } = useDrieUIValue();
const state = useThree();
const { camera, raycaster } = state;
useEffect(() => {
const canvasElement = state.gl.domElement;
let drag = false;
let isLeftMouseDown = false;
const onMouseDown = (evt: any) => {
if (evt.button === 0) {
isLeftMouseDown = true;
drag = false;
}
};
const onMouseMove = () => {
if (isLeftMouseDown) {
drag = true;
}
};
const onMouseUp = (evt: any) => {
if (evt.button === 0) {
isLeftMouseDown = false;
if (drag) return;
if (!itemsGroup.current) return
let intersects = raycaster.intersectObjects(itemsGroup.current.children, true);
if (intersects.length > 0) {
let currentObject = intersects[0].object;
while (currentObject) {
if (currentObject.name === "Scene") {
break;
}
currentObject = currentObject.parent as THREE.Object3D;
}
if (currentObject && (currentObject.userData.name === "SV2 Controll pannel" || currentObject.userData.name === "forklift")) {
const worldPos = new THREE.Vector3();
currentObject.getWorldPosition(worldPos);
const rightOffset = new THREE.Vector3(1, 0, 0);
const upOffset = new THREE.Vector3(0, 1, 0);
currentObject.localToWorld(rightOffset);
currentObject.localToWorld(upOffset);
const finalPosition = worldPos.clone().addScaledVector(rightOffset.sub(currentObject.position).normalize(), 2.5).addScaledVector(upOffset.sub(currentObject.position).normalize(), 2.3);
setDrieTemp(finalPosition);
} else {
setDrieTemp(undefined);
}
}
else {
setDrieTemp(undefined);
}
}
};
canvasElement.addEventListener("mousedown", onMouseDown);
canvasElement.addEventListener("mouseup", onMouseUp);
canvasElement.addEventListener("mousemove", onMouseMove);
return () => {
canvasElement.removeEventListener("mousedown", onMouseDown);
canvasElement.removeEventListener("mouseup", onMouseUp);
canvasElement.removeEventListener("mousemove", onMouseMove);
};
}, [])
return (
<>
{drieTemp &&
<mesh position={[drieTemp.x, drieTemp.y, drieTemp.z]}>
<Html
as="div"
center
zIndexRange={[1, 0]}
transform
sprite
style={{
padding: "10px",
color: "white",
borderRadius: "8px",
textAlign: "center",
fontFamily: "Arial, sans-serif",
}}
scale={[0.3, 0.3, 0.3]}
// occlude
>
<UI temperature={drieUIValue.temperature} humidity={drieUIValue.humidity} touch={drieUIValue.touch} header={""} />
</Html>
</mesh>
}
</>
)
}

141
app/src/modules/visualization/mqttTemp/ui.jsx Normal file
View File

@@ -0,0 +1,141 @@
export default function UI({ temperature, humidity, touch, header }) {
return (
<div
className="temp-visualization-wrapper"
style={{
padding: "24px",
width: "fit-content",
background: "white",
borderRadius: "20px",
color: "#282829",
// transform: "translate(0, -100%)"
}}
>
<div
className="header"
style={{ paddingBottom: "22px", fontWeight: "600" }}
>
{header ? header : "Sensor Details"}
</div>
<div className="container-1" style={{ display: "flex", gap: "24px" }}>
<div
className="temperature-container"
style={{
padding: "12px",
borderRadius: "12px",
background: "white",
boxShadow: "7px 7px 14px #e3e3e3, -7px -7px 14px #f4f4f4",
display: "flex",
gap: "6px",
flexDirection: "column",
width: "92px",
}}
>
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "12px" }}>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.73109 11.6758L9 11.5357V11.2324V4C9 2.61929 10.1193 1.5 11.5 1.5C12.8807 1.5 14 2.61929 14 4V11.2324V11.5357L14.2689 11.6758C16.1901 12.6771 17.5 14.6861 17.5 17.0002C17.5 20.3139 14.8137 23.0002 11.5 23.0002C8.18629 23.0002 5.5 20.3139 5.5 17.0002C5.5 14.6861 6.80994 12.6771 8.73109 11.6758Z"
stroke="#FE4519"
/>
<path d="M11.5 7V16" stroke="#FE4519" strokeLinecap="round" />
<circle cx="11.5" cy="17" r="3" fill="#FE4519" />
</svg>
</div>
<div className="key" style={{ fontSize: "12px" }}>
Temperature
</div>
<div
className="value"
style={{ fontSize: "18px", fontWeight: "600" }}
>
{temperature}
</div>
</div>
<div
className="humidity-container"
style={{
padding: "12px",
borderRadius: "12px",
background: "white",
boxShadow: "7px 7px 14px #e3e3e3, -7px -7px 14px #f4f4f4",
display: "flex",
gap: "6px",
flexDirection: "column",
width: "92px",
}}
>
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "12px" }}>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.8041 19.1765C15.2714 17.4843 14.6826 15.891 12.6962 13.7257C12.3217 13.3175 11.6786 13.3192 11.305 13.7284C9.1738 16.0628 8.77326 17.5784 9.16555 19.0737C9.32805 19.6931 9.79837 20.1765 10.3593 20.4854C11.742 21.2468 12.2655 21.3361 13.7514 20.4639C14.2463 20.1734 14.6514 19.7296 14.8041 19.1765Z"
stroke="#0F96F5"
strokeWidth="1.5"
/>
<path
d="M20.8104 9.0293C21.2043 7.39129 20.5932 5.82808 18.6645 3.72574C18.2899 3.31747 17.6469 3.3192 17.2733 3.72838C15.1959 6.00386 14.7629 7.50129 15.1056 8.96027C15.2684 9.65314 15.8159 10.18 16.4679 10.4655C17.7279 11.0173 18.291 11.0385 19.5446 10.4598C20.1511 10.1799 20.6542 9.6787 20.8104 9.0293Z"
stroke="#0F96F5"
strokeWidth="1.5"
/>
<path
d="M8.81041 9.0293C9.20431 7.39129 8.59319 5.82808 6.66448 3.72574C6.28992 3.31747 5.64687 3.3192 5.27331 3.72838C3.19591 6.00386 2.76287 7.50129 3.1056 8.96027C3.26837 9.65314 3.81593 10.18 4.46789 10.4655C5.72785 11.0173 6.29105 11.0385 7.54464 10.4598C8.15106 10.1799 8.65424 9.6787 8.81041 9.0293Z"
stroke="#0F96F5"
strokeWidth="1.5"
/>
</svg>
</div>
<div className="key" style={{ fontSize: "12px" }}>
Humidity
</div>
<div
className="value"
style={{ fontSize: "18px", fontWeight: "600" }}
>
{humidity}
</div>
</div>
</div>
<div className="container-2">
<div
className="touch-container"
style={{
display: "flex",
borderRadius: "12px",
background: "white",
boxShadow: "7px 7px 14px #e3e3e3, -7px -7px 14px #f4f4f4",
padding: "16px",
marginTop: "16px",
gap: "18px",
alignItems: "center",
fontWeight: "600",
}}
>
<div className="key" style={{ fontSize: "14px" }}>
Touch Sensor
</div>
<div
className="value"
style={
touch === "True"
? { color: "#2AA553", fontWeight: 500 }
: { color: "#FE4519", fontWeight: 500 }
}
>
{touch === "True" ? "Active" : "In active"}
</div>
</div>
</div>
</div>
);
}

2
app/src/modules/visualization/template/Templates.tsx
View File

@@ -2,7 +2,7 @@ import { useEffect } from "react";
import useTemplateStore from "../../../store/useTemplateStore";
import { useSelectedZoneStore } from "../../../store/useZoneStore";
import { useSocketStore } from "../../../store/store";
import { getTemplateData } from "../../../services/realTimeVisulization/zoneData/getTemplate";
import { getTemplateData } from "../../../services/visulization/zone/getTemplate";
import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
import RenameInput from "../../../components/ui/inputs/RenameInput";

22
app/src/modules/visualization/visualization.tsx Normal file
View File

@@ -0,0 +1,22 @@
import React from 'react'
import Dropped3dWidgets from './widgets/3d/Dropped3dWidget'
import ZoneCentreTarget from './zone/zoneCameraTarget'
import ZoneAssets from './zone/zoneAssets'
// import MqttEvents from '../../services/factoryBuilder/mqtt/mqttEvents'
const Visualization = () => {
return (
<>
<Dropped3dWidgets />
{/* <ZoneCentreTarget />
<ZoneAssets />
<MqttEvents /> */}
</>
)
}
export default Visualization;

2
app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
View File

@@ -13,8 +13,6 @@ import {
KebabIcon,
} from "../../../../components/icons/ExportCommonIcons";
import { useEffect, useRef, useState } from "react";
import { duplicateWidgetApi } from "../../../../services/realTimeVisulization/zoneData/duplicateWidget";
import { deleteWidgetApi } from "../../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
import { useClickOutside } from "../../functions/handleWidgetsOuterClick";
import { useSocketStore } from "../../../../store/store";
import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";

6
app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
View File

@@ -7,7 +7,7 @@ import { ThreeState } from "../../../../types/world/worldTypes";
import { useSelectedZoneStore } from "../../../../store/useZoneStore";
import { useEditWidgetOptionsStore, useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../../store/useZone3DWidgetStore";
import { use3DWidget } from "../../../../store/useDroppedObjectsStore";
import { get3dWidgetZoneData } from "../../../../services/realTimeVisulization/zoneData/get3dWidgetData";
import { get3dWidgetZoneData } from "../../../../services/visulization/zone/get3dWidgetData";
import { generateUniqueId } from "../../../../functions/generateUniqueId";
import ProductionCapacity from "./cards/ProductionCapacity";
import ReturnOfInvestment from "./cards/ReturnOfInvestment";
@@ -16,10 +16,6 @@ import Throughput from "./cards/Throughput";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import useChartStore from "../../../../store/useChartStore";
type WidgetData = {
id: string;
type: string;

4
app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
View File

@@ -7,14 +7,14 @@ import {
import useModuleStore from "../../../../store/useModuleStore";
import { determinePosition } from "../../functions/determinePosition";
import { getActiveProperties } from "../../functions/getActiveProperties";
import { addingFloatingWidgets } from "../../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
import { addingFloatingWidgets } from "../../../../services/visulization/zone/addFloatingWidgets";
import {
DublicateIcon,
KebabIcon,
DeleteIcon,
} from "../../../../components/icons/ExportCommonIcons";
import DistanceLines from "./DistanceLines"; // Import the DistanceLines component
import { deleteFloatingWidgetApi } from "../../../../services/realTimeVisulization/zoneData/deleteFloatingWidget";
import { deleteFloatingWidgetApi } from "../../../../services/visulization/zone/deleteFloatingWidget";
import TotalCardComponent from "./cards/TotalCardComponent";
import WarehouseThroughputComponent from "./cards/WarehouseThroughputComponent";

4
app/src/modules/visualization/widgets/panel/AddButtons.tsx
View File

@@ -6,8 +6,8 @@ import {
} from "../../../../components/icons/RealTimeVisulationIcons";
import { AddIcon } from "../../../../components/icons/ExportCommonIcons";
import { useSocketStore } from "../../../../store/store";
import { clearPanel } from "../../../../services/realTimeVisulization/zoneData/clearPanel";
import { lockPanel } from "../../../../services/realTimeVisulization/zoneData/lockPanel";
import { clearPanel } from "../../../../services/visulization/zone/clearPanel";
import { lockPanel } from "../../../../services/visulization/zone/lockPanel";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";

14
app/src/modules/visualization/DisplayZone.tsx → app/src/modules/visualization/zone/DisplayZone.tsx
View File

@@ -1,18 +1,18 @@
import React, { useEffect, useRef, useState, useCallback } from "react";
import { useWidgetStore, Widget } from "../../store/useWidgetStore";
import { useWidgetStore, Widget } from "../../../store/useWidgetStore";
import {
useDroppedObjectsStore,
useFloatingWidget,
} from "../../store/useDroppedObjectsStore";
import { getSelect2dZoneData } from "../../services/realTimeVisulization/zoneData/getSelect2dZoneData";
import { getFloatingZoneData } from "../../services/realTimeVisulization/zoneData/getFloatingData";
import { get3dWidgetZoneData } from "../../services/realTimeVisulization/zoneData/get3dWidgetData";
} from "../../../store/useDroppedObjectsStore";
import { getSelect2dZoneData } from "../../../services/visulization/zone/getSelect2dZoneData";
import { getFloatingZoneData } from "../../../services/visulization/zone/getFloatingData";
import { get3dWidgetZoneData } from "../../../services/visulization/zone/get3dWidgetData";
import {
MoveArrowLeft,
MoveArrowRight,
} from "../../components/icons/SimulationIcons";
import { InfoIcon } from "../../components/icons/ExportCommonIcons";
} from "../../../components/icons/SimulationIcons";
import { InfoIcon } from "../../../components/icons/ExportCommonIcons";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";

8
app/src/modules/visualization/zoneAssets.tsx → app/src/modules/visualization/zone/zoneAssets.tsx
View File

@@ -1,8 +1,8 @@
import React, { useEffect, useRef } from 'react'
import { useSelectedFloorItem, useZoneAssetId } from '../../store/store';
import { useSelectedFloorItem, useZoneAssetId } from '../../../store/store';
import * as THREE from "three";
import { useThree } from '@react-three/fiber';
import * as Types from "../../types/world/worldTypes";
import * as Types from "../../../types/world/worldTypes";
export default function ZoneAssets() {
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
const { setSelectedFloorItem } = useSelectedFloorItem();
@@ -10,7 +10,6 @@ export default function ZoneAssets() {
useEffect(() => {
// console.log('zoneAssetId: ', zoneAssetId);
if (!zoneAssetId) return
console.log('zoneAssetId: ', zoneAssetId);
let AssetMesh = scene.getObjectByProperty("uuid", zoneAssetId.id);
if (AssetMesh) {
const bbox = new THREE.Box3().setFromObject(AssetMesh);
@@ -30,20 +29,17 @@ export default function ZoneAssets() {
setSelectedFloorItem(AssetMesh);
} else {
console.log('zoneAssetId: ', zoneAssetId)
if (Array.isArray(zoneAssetId.position) && zoneAssetId.position.length >= 3) {
let selectedAssetPosition = [
zoneAssetId.position[0],
10,
zoneAssetId.position[2]
];
console.log('selectedAssetPosition: ', selectedAssetPosition);
let selectedAssetTarget = [
zoneAssetId.position[0],
zoneAssetId.position[1],
zoneAssetId.position[2]
];
console.log('selectedAssetTarget: ', selectedAssetTarget);
const setCam = async () => {
await controls?.setLookAt(...selectedAssetPosition, ...selectedAssetTarget, true);
setTimeout(() => {

0
app/src/modules/visualization/functions/zoneCameraTarget.tsx → app/src/modules/visualization/zone/zoneCameraTarget.tsx
View File