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

feature/settingsPage #10

Merged
TobaOjo merged 3 commits from feature/settingsPage into develop 2025-12-02 13:54:56 +00:00
Conversation 0 Commits 3 Files Changed 15 +139 -21
8 changed files with 139 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ce79591de0 - Show all commits

13
src/app/reducers/cameraFeedReducer.ts
View File

@@ -12,12 +12,23 @@ export const initialState: CameraFeedState = {
{ name: "Region 1", brushColour: "#ff0000" },
{ name: "Region 2", brushColour: "#00ff00" },
{ name: "Region 3", brushColour: "#0400ff" },
{ name: "Region 4", brushColour: "#ffff00" },
{ name: "Region 5", brushColour: "#fc35db" },
],
B: [
{ name: "Region 1", brushColour: "#ff0000" },
{ name: "Region 2", brushColour: "#00ff00" },
{ name: "Region 3", brushColour: "#0400ff" },
{ name: "Region 4", brushColour: "#ffff00" },
{ name: "Region 5", brushColour: "#fc35db" },
],
C: [
{ name: "Region 1", brushColour: "#ff0000" },
{ name: "Region 2", brushColour: "#00ff00" },
{ name: "Region 3", brushColour: "#0400ff" },
{ name: "Region 4", brushColour: "#ffff00" },
{ name: "Region 5", brushColour: "#fc35db" },
],
C: [{ name: "Region 1", brushColour: "#ff0000" }],
},
selectedRegionIndex: 0,

2
src/features/cameras/components/CameraSettings/CameraSettings.tsx
View File

@@ -10,7 +10,7 @@ type CameraSettingsProps = {
const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
return (
<Card className="p-4 col-span-3 row-span-5 col-start-3 md:col-span-3 md:row-span-5 max-h-screen overflow-auto">
<Card className="p-4 col-span-2 row-span-5 col-start-3 md:col-span-3 md:row-span-5 overflow-auto">
<Tabs
selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
className="react-tabs"

1
src/features/cameras/components/CameraSettings/ColourPicker.tsx
View File

@@ -10,6 +10,7 @@ const ColourPicker = ({ colour, setColour }: ColourPickerProps) => {
name=""
id=""
value={colour}
disabled
onChange={(e) => setColour(e.target.value)}
className="h-8 w-8 p-0 rounded-md border border-slate-500 cursor-pointer"
/>

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"

31
src/features/cameras/components/Video/VideoFeedGridPainter.tsx
View File

@@ -3,12 +3,14 @@ import { Stage, Layer, Image, Shape } from "react-konva";
import type { KonvaEventObject } from "konva/lib/Node";
import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
import Card from "../../../../ui/Card";
import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
const rows = 40;
const BACKEND_WIDTH = 640;
const BACKEND_HEIGHT = 360;
const BACKEND_CELL_SIZE = 16;
const rows = 22.5;
const cols = 40;
const size = 20;
const gap = 0;
const VideoFeedGridPainter = () => {
@@ -19,9 +21,12 @@ const VideoFeedGridPainter = () => {
const selectedRegionIndex = state.selectedRegionIndex;
const mode = state.modeByCamera[cameraFeedID];
const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
const [stageSize, setStageSize] = useState({ width: 740, height: 460 });
const [stageSize, setStageSize] = useState({ width: BACKEND_WIDTH, height: BACKEND_HEIGHT });
const isDrawingRef = useRef(false);
const currentScale = stageSize.width / BACKEND_WIDTH;
const size = BACKEND_CELL_SIZE * currentScale;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const paintLayerRef = useRef<any>(null);
@@ -60,7 +65,7 @@ const VideoFeedGridPainter = () => {
if (existing && existing.colour === currentColour) return;
map.set(key, { colour: currentColour });
map.set(key, { colour: currentColour, region: activeRegion });
paintLayerRef.current?.batchDraw();
};
@@ -87,25 +92,25 @@ const VideoFeedGridPainter = () => {
const handleResize = () => {
const width = window.innerWidth;
const aspectRatio = 740 / 460;
const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
const newWidth = width * 0.39;
const newHeight = newWidth / aspectRatio;
setStageSize({ width: newWidth, height: newHeight });
};
handleResize();
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
if (image === null || isloading)
if (image === null || isloading) return <span className="text-slate-500">Loading Video feed…</span>;
return (
<Card className="row-span-3 col-span-2 rounded-lg p-4 w-full">
<span className="text-slate-500">Loading Video feed…</span>
</Card>
);
return (
<div className="mt-4.5 row-span-1 col-span-2">
<div
className={`mt-4.5 row-span-1 col-span-2 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
mode === "eraser" ? "hover:cursor-pointer" : ""
}`}
>
<Stage
width={stageSize.width}
height={stageSize.height}

24
src/features/cameras/hooks/useColourDetection.ts Normal file
View File

@@ -0,0 +1,24 @@
import { useMutation } from "@tanstack/react-query";
import { CAMBASE } from "../../../utils/config";
import type { ColourDetectionPayload } from "../../../types/types";
const sendColourDetectionData = async (colourData: ColourDetectionPayload) => {
const regions = {
regions: colourData.regions,
};
const response = await fetch(`${CAMBASE}/TargetDetectionColour${colourData.cameraFeedID}-region-update`, {
method: "POST",
body: JSON.stringify(regions),
});
if (!response.ok) throw new Error("Cannot send data to colour detection endpoint");
return response.json();
};
export const useColourDectection = () => {
const colourMutation = useMutation({
mutationKey: ["colour detection"],
mutationFn: (colourData: ColourDetectionPayload) => sendColourDetectionData(colourData),
});
return { colourMutation };
};

11
src/types/types.ts
View File

@@ -76,6 +76,7 @@ export type OutputDataResponse = {
export type PaintedCell = {
colour: string;
region: Region;
};
export type DispatcherConfig = {
@@ -164,3 +165,13 @@ export type DecodeReading = {
firstSeenTimeHumane: string;
lastSeenTimeHumane: string;
};
export type ColourData = {
id: string | number;
cells: number[][];
};
export type ColourDetectionPayload = {
cameraFeedID: "A" | "B" | "C";
regions: ColourData[];
};

9
src/utils/utils.ts
View File

@@ -9,3 +9,12 @@ export const convertObjtoArray = (obj: Record<string, SystemHealthStatus[]>) =>
const statusCategoryArray = Object.entries(obj);
return statusCategoryArray;
};
// const data = {
// camera: cameraFeedID,
// cells: Array.from(paintedCells.entries()).map(([key, cell]) => ({
// position: key,
// ...cell,
// region: regions[selectedRegionIndex]?.name || "Unnamed",
// })),
// };