TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- enhancedcamera settings and region painter.

Browse Source 
- Can send to the back end
This commit is contained in:
Toba Ojo
2025-12-01 14:36:25 +00:00
parent 6cb2e88b3b
commit ce79591de0
8 changed files with 139 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/features/cameras/components/CameraSettings/RegionSelector.tsx
View File

@@ -1,6 +1,7 @@
import type { PaintedCell, Region } from "../../../../types/types";
import type { ColourData, PaintedCell, Region } from "../../../../types/types";
import ColourPicker from "./ColourPicker";
import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
import { useColourDectection } from "../../hooks/useColourDetection";
type RegionSelectorProps = {
regions: Region[];
@@ -10,7 +11,10 @@ type RegionSelectorProps = {
};
const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: RegionSelectorProps) => {
const { dispatch } = useCameraFeedContext();
const { colourMutation } = useColourDectection();
const { state, dispatch } = useCameraFeedContext();
const paintedCells = state.paintedCells[cameraFeedID];
const handleChange = (e: { target: { value: string } }) => {
dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
};
@@ -54,6 +58,53 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
});
};
const handleSaveclick = () => {
const regions: ColourData[] = [];
const test = Array.from(paintedCells.entries());
const region1 = test.filter(([, cell]) => cell.region.name === "Region 1");
const region2 = test.filter(([, cell]) => cell.region.name === "Region 2");
const region3 = test.filter(([, cell]) => cell.region.name === "Region 3");
const region4 = test.filter(([, cell]) => cell.region.name === "Region 4");
const region5 = test.filter(([, cell]) => cell.region.name === "Region 5");
const region1Data = {
id: 1,
cells: region1.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
};
const region2Data = {
id: 2,
cells: region2.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
};
const region3Data = {
id: 3,
cells: region3.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
};
const region4Data = {
id: 4,
cells: region4.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
};
const region5Data = {
id: 5,
cells: region5.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
};
if (region1Data.cells.length > 0) {
regions.push(region1Data);
}
if (region2Data.cells.length > 0) {
regions.push(region2Data);
}
if (region3Data.cells.length > 0) {
regions.push(region3Data);
}
if (region4Data.cells.length > 0) {
regions.push(region4Data);
}
if (region5Data.cells.length > 0) {
regions.push(region5Data);
}
colourMutation.mutate({ cameraFeedID, regions: regions });
};
return (
<div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
<div className="p-2 border border-gray-600 rounded-lg flex flex-col">
@@ -103,7 +154,7 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
<label
htmlFor={inputId}
key={region.name}
className={`items-center p-4 m-4 rounded-xl border flex flex-row justify-between
className={`items-center p-4 m-1 rounded-xl border flex flex-row justify-between
${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
>
<div className="flex flex-row gap-4 items-center">
@@ -121,16 +172,16 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
<span className="text-xl">{region.name}</span>
</div>
<ColourPicker colour={region.brushColour} setColour={(c: string) => handleRegionColourChange(idx, c)} />
<p className="text-slate-400">{region.brushColour}</p>
<div></div>
</label>
);
})}
</>
<div className=" mx-auto flex flex-row gap-4 mt-4">
<button className="border border-blue-900 bg-blue-700 px-4 rounded-md" onClick={handleAddRegionClick}>
<button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
Add Region
</button>
<button className="border border-red-900 px-4 rounded-md" onClick={handleRemoveClick}>
<button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
Remove Region
</button>
</div>
@@ -139,6 +190,12 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
<div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">
<div className="flex flex-col">
<h2 className="text-2xl mb-2">Actions</h2>
<button
onClick={handleSaveclick}
className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-[40%] hover:bg-blue-700 hover:cursor-pointer"
>
Save Region
</button>
<button
onClick={handleResetRegion}
className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"