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

refactor HeatMap component and integrate baked heat map functionality

Browse Source
This commit is contained in:
Gomathi
2025-09-05 17:13:51 +05:30
parent 77dc821431
commit 9ba98d0120
5 changed files with 552 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

478
app/src/components/heatMapGenerator/baked/bakedHeatMap.tsx Normal file
View File

@@ -0,0 +1,478 @@
import React, { useEffect } from "react";
import { useHeatMapStore } from "../../../store/simulation/useHeatMapStore";
function BakedHeatMap() {
const { bakedPoints, setBakedPoints } = useHeatMapStore();
useEffect(() => {
console.log("bakedPoints: ", bakedPoints);
setBakedPoints([
{
x: -13.413516772698177,
y: -12.63518978091868,
},
{
x: 1.2354600621530758,
y: -2.3794652653900545,
},
{
x: -13.228715403191334,
y: -12.110164362649389,
},
{
x: 1.2354600621530758,
y: -2.3794652653900545,
},
{
x: -12.895933084168604,
y: -11.16472202271144,
},
{
x: 1.2146364581619484,
y: -2.458777246830882,
},
{
x: -12.56388120623421,
y: -10.22135488296373,
},
{
x: 0.9606649075524938,
y: -3.426092325528903,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -11.765220568117899,
y: -10.165809057613947,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -10.947349624124,
y: -10.762161268114605,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -10.139174838325012,
y: -11.351443505760303,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -9.329222423526684,
y: -11.942021905093844,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -8.520482028503096,
y: -12.531716557820241,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -7.70091425682336,
y: -13.129306013571778,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.889992226202834,
y: -13.72059141019279,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.070909262434194,
y: -14.317827367300595,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.745374744265807,
y: -13.826039532128796,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -7.555811966975235,
y: -13.235107634151518,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -8.373925314924684,
y: -12.638578674328992,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -9.185412954772822,
y: -12.046880862625084,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -9.993991747160381,
y: -11.4573040427792,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -10.812670704337439,
y: -10.86036266787378,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -11.622542317819256,
y: -10.269843184979397,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.388054007546796,
y: -9.711668827905626,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.388054007546796,
y: -9.711668827905626,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.388054007546796,
y: -9.711668827905626,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.388054007546796,
y: -9.711668827905626,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.388054007546796,
y: -9.711668827905626,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -11.671167833596273,
y: -10.234387794329676,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -10.848529611822936,
y: -10.834216074817558,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -10.028153826960038,
y: -11.43239469497386,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -9.219090226661379,
y: -12.02232501346348,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -8.397987229934841,
y: -12.621033881583191,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -7.5732481738840844,
y: -13.222393989524333,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.755458031206697,
y: -13.818687283585831,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.6887446149645632,
y: -3.056614231646619,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.4926411078662814,
y: -2.0612481359291923,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.2993211300946861,
y: -1.0800104500460184,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.10578852161104557,
y: -0.09769351063592024,
},
{
x: -6.0721381600575395,
y: -14.316931314176879,
},
{
x: -0.04612645742123378,
y: 0.6733840789380983,
},
{
x: -6.8802321445370085,
y: -13.727707992972537,
},
{
x: -0.04612645742123378,
y: 0.6733840789380983,
},
]);
}, [bakedPoints]);
return <></>;
}
export default BakedHeatMap;

14
app/src/components/heatMapGenerator/heatMap.tsx Normal file
View File

@@ -0,0 +1,14 @@
import RealTimeHeatMap from "./realTime/realTimeHeatMap";
import BakedHeatMap from "./baked/bakedHeatMap";
function HeatMap() {
return (
<>
<RealTimeHeatMap />
<BakedHeatMap />
</>
);
}
export default HeatMap;

26
app/src/components/HeatMap/HeatMap.tsx → app/src/components/heatMapGenerator/realTime/realTimeHeatMap.tsx
View File

@@ -1,18 +1,18 @@
import * as THREE from "three";
import { useEffect, useMemo, useRef, useState } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { useProductContext } from "../../modules/simulation/products/productContext";
import { useSceneContext } from "../../modules/scene/sceneContext";
import * as CONSTANTS from "../../types/world/worldConstants";
import { determineExecutionMachineSequences } from "../../modules/simulation/simulator/functions/determineExecutionMachineSequences";
import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from "../../store/usePlayButtonStore";
import { useHeatMapStore } from "../../store/simulation/useHeatMapStore";
import { useProductContext } from "../../../modules/simulation/products/productContext";
import { useSceneContext } from "../../../modules/scene/sceneContext";
import * as CONSTANTS from "../../../types/world/worldConstants";
import { determineExecutionMachineSequences } from "../../../modules/simulation/simulator/functions/determineExecutionMachineSequences";
import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from "../../../store/usePlayButtonStore";
import { useHeatMapStore } from "../../../store/simulation/useHeatMapStore";
const DECAY_RATE = 0.01;
const GROWTH_TIME_MULTIPLIER = 20;
const RADIUS = 0.005;
const OPACITY = 0.8;
const UPDATE_INTERVAL = 0.1;
const UPDATE_INTERVAL = 1;
interface HeatPoint {
x: number;
@@ -21,19 +21,17 @@ interface HeatPoint {
lastUpdated: number;
}
const HeatMap = () => {
const RealTimeHeatMap = () => {
const isUsingBBOX = false;
const height = CONSTANTS.gridConfig.size;
const width = CONSTANTS.gridConfig.size;
const debugMode: "solid" | "grayscale" | "normal" = "normal";
const debugModeMap = { solid: 0, grayscale: 1, normal: 2 } as const;
const { productStore } = useSceneContext();
const { getProductById, products } = productStore();
const { selectedProductStore } = useProductContext();
const { selectedProduct } = selectedProductStore();
const { hasHuman, hasVehicle, monitoringHuman, monitoringVehicle, addMonitoringHuman, addMonitoringVehicle } = useHeatMapStore();
const { hasHuman, hasVehicle, monitoringHuman, monitoringVehicle, addMonitoringHuman, addMonitoringVehicle, addBakedPoint } = useHeatMapStore();
const { isPlaying } = usePlayButtonStore();
const { isReset } = useResetButtonStore();
const { isPaused } = usePauseButtonStore();
@@ -107,7 +105,7 @@ const HeatMap = () => {
delta = now - lastFrameTime.current;
}
lastFrameTime.current = now;
if (delta <= 0) return;
const updateInterval = UPDATE_INTERVAL / Math.max(speed, 0.1);
@@ -128,6 +126,8 @@ const HeatMap = () => {
})()
: model.position;
// addBakedPoint({ x: pos.x, y: pos.z });
updatedPoints.push({ x: pos.x, y: pos.z, strength: 0.3, lastUpdated: now });
});
@@ -245,4 +245,4 @@ const HeatMap = () => {
);
};
export default HeatMap;
export default RealTimeHeatMap;

48
app/src/modules/simulation/simulation.tsx
View File

@@ -1,20 +1,20 @@
import { useEffect } from 'react';
import Vehicles from './vehicle/vehicles';
import Points from './events/points/points';
import Conveyor from './conveyor/conveyor';
import RoboticArm from './roboticArm/roboticArm';
import Materials from './materials/materials';
import Machine from './machine/machine';
import StorageUnit from './storageUnit/storageUnit';
import Human from './human/human';
import Crane from './crane/crane';
import Simulator from './simulator/simulator';
import Products from './products/products';
import Trigger from './triggers/trigger';
import useModuleStore from '../../store/useModuleStore';
import SimulationAnalysis from './analysis/simulationAnalysis';
import { useSceneContext } from '../scene/sceneContext';
import HeatMap from '../../components/HeatMap/HeatMap';
import { useEffect } from "react";
import Vehicles from "./vehicle/vehicles";
import Points from "./events/points/points";
import Conveyor from "./conveyor/conveyor";
import RoboticArm from "./roboticArm/roboticArm";
import Materials from "./materials/materials";
import Machine from "./machine/machine";
import StorageUnit from "./storageUnit/storageUnit";
import Human from "./human/human";
import Crane from "./crane/crane";
import Simulator from "./simulator/simulator";
import Products from "./products/products";
import Trigger from "./triggers/trigger";
import useModuleStore from "../../store/useModuleStore";
import SimulationAnalysis from "./analysis/simulationAnalysis";
import { useSceneContext } from "../scene/sceneContext";
import HeatMap from "../../components/heatMapGenerator/heatMap";
function Simulation() {
const { activeModule } = useModuleStore();
@@ -24,21 +24,18 @@ function Simulation() {
useEffect(() => {
// console.log('events: ', events);
}, [events])
}, [events]);
useEffect(() => {
// console.log('products: ', products);
}, [products])
}, [products]);
return (
<>
<Products />
{activeModule === 'simulation' &&
{activeModule === "simulation" && (
<>
<Points />
<Materials />
@@ -64,11 +61,8 @@ function Simulation() {
<SimulationAnalysis />
<HeatMap />
</>
}
)}
</>
);
}

27
app/src/store/simulation/useHeatMapStore.ts
View File

@@ -1,9 +1,15 @@
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
interface BakedPoint {
x: number;
y: number;
}
interface HeatMapState {
monitoringVehicle: string[];
monitoringHuman: string[];
bakedPoints: BakedPoint[];
setMonitoringVehicle: (vehiclesUuid: string[]) => void;
addMonitoringVehicle: (vehicleUuid: string) => void;
@@ -17,6 +23,10 @@ interface HeatMapState {
clearAllMonitors: () => void;
setBakedPoints: (points: BakedPoint[]) => void;
addBakedPoint: (point: BakedPoint) => void;
clearBakedPoints: () => void;
hasVehicle: (vehicleUuid: string) => boolean;
hasHuman: (humanUuid: string) => boolean;
}
@@ -25,6 +35,7 @@ export const useHeatMapStore = create<HeatMapState>()(
immer((set, get) => ({
monitoringVehicle: [],
monitoringHuman: [],
bakedPoints: [],
setMonitoringVehicle: (vehiclesUuid) =>
set((state) => {
@@ -76,6 +87,20 @@ export const useHeatMapStore = create<HeatMapState>()(
state.monitoringHuman = [];
}),
setBakedPoints: (points: BakedPoint[]) =>
set((state) => {
state.bakedPoints = points;
}),
addBakedPoint: (point: BakedPoint) =>
set((state) => {
state.bakedPoints.push(point);
}),
clearBakedPoints: () =>
set((state) => {
state.bakedPoints = [];
}),
hasVehicle: (vehicleUuid) => get().monitoringVehicle.includes(vehicleUuid),
hasHuman: (humanUuid) => get().monitoringHuman.includes(humanUuid),
}))
@@ -97,4 +122,4 @@ export const useHeatMapStore = create<HeatMapState>()(
// setEvents(newEvents);
// });
// }
// }, [selectedProduct, products, monitoringHuman, monitoringVehicle]);
// }, [selectedProduct, products, monitoringHuman, monitoringVehicle]);