Skip to content

Commit

Permalink
add directional movement, expand/shrink functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@JahnabDutta
JahnabDutta committed Jul 15, 2023
1 parent 886bdf4 commit d0dd9a4
Show file tree
Hide file tree
Showing 4 changed files with 260 additions and 91 deletions.
57 changes: 9 additions & 48 deletions src/Components/Assets/AssetType/ONVIFCamera.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@ interface ONVIFCameraProps {
asset: any;
}

type direction = "left" | "right" | "up" | "down";

const ONVIFCamera = (props: ONVIFCameraProps) => {
const { assetId, facilityId, asset } = props;
const [isLoading, setIsLoading] = useState(true);
Expand All @@ -44,11 +42,11 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
const [newPreset, setNewPreset] = useState("");
const [loadingAddPreset, setLoadingAddPreset] = useState(false);
const [loadingSetConfiguration, setLoadingSetConfiguration] = useState(false);
const [direction, setDirection] = useState<direction>("left");
const [refreshPresetsHash, setRefreshPresetsHash] = useState(
Number(new Date())
);
const [boundaryPreset, setBoundaryPreset] = useState<any>(null);
const [refBoundaryPreset, setRefBoundaryPreset] = useState<any>(null); // to reference in case modification of boundary preset is cancelled.
const [presets, setPresets] = useState<any[]>([]);
const dispatch = useDispatch<any>();

Expand Down Expand Up @@ -174,8 +172,10 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
});
if (boundaryPreset) {
setBoundaryPreset(boundaryPreset);
setRefBoundaryPreset(boundaryPreset);
} else {
setBoundaryPreset(null);
setRefBoundaryPreset(null);
}
setPresets(bedAssets);
}
Expand Down Expand Up @@ -265,55 +265,17 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
setLoadingAddPreset(false);
};

const updateBoundaryPreset = async () => {
const config = getCameraConfig(asset as AssetData);
const updateBoundaryPreset = async (action: any) => {
if (boundaryPreset) {
try {
const presetData = await axios.get(
`https://${facilityMiddlewareHostname}/status?hostname=${config.hostname}&port=${config.port}&username=${config.username}&password=${config.password}`
);
const cameraPosition = presetData.data.position;
const boundaryRange = boundaryPreset.meta.range;
console.log("boundary range", boundaryRange);
console.log("camera position", cameraPosition);
let range;
if (direction == "left") {
if (cameraPosition?.x > boundaryRange?.max_x) {
Notification.Error({
msg: "Cannot exceeed right boundary",
});
return;
}
range = { ...boundaryRange, min_x: cameraPosition?.x };
} else if (direction == "right") {
if (cameraPosition?.x < boundaryRange?.min_x) {
Notification.Error({
msg: "Cannot exceeed left boundary",
});
return;
}
range = { ...boundaryRange, max_x: cameraPosition?.x };
} else if (direction == "up") {
if (cameraPosition?.y < boundaryRange?.min_y) {
Notification.Error({
msg: "Cannot exceeed bottom boundary",
});
return;
}
range = { ...boundaryRange, min_y: cameraPosition?.y };
} else if (direction == "down") {
if (cameraPosition?.y > boundaryRange?.max_y) {
Notification.Error({
msg: "Cannot exceeed top boundary",
});
return;
}
range = { ...boundaryRange, max_y: cameraPosition?.y };
if (action == "cancel") {
setBoundaryPreset(refBoundaryPreset);
return;
}
const data = {
asset: boundaryPreset.asset_object.id,
bed: boundaryPreset.bed_object.id,
meta: { ...boundaryPreset.meta, range: range },
meta: boundaryPreset.meta,
};
const res = await Promise.resolve(
dispatch(partialUpdateAssetBed(data, boundaryPreset.id as string))
Expand Down Expand Up @@ -475,8 +437,7 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
refreshPresetsHash={refreshPresetsHash}
facilityMiddlewareHostname={facilityMiddlewareHostname}
boundaryPreset={boundaryPreset}
direction={direction}
setDirection={setDirection}
setBoundaryPreset={setBoundaryPreset}
addBoundaryPreset={addBoundaryPreset}
updateBoundaryPreset={updateBoundaryPreset}
deleteBoundaryPreset={deleteBoundaryPreset}
Expand Down
196 changes: 162 additions & 34 deletions src/Components/Assets/configure/CameraBoundayConfigure.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
import { useState } from "react";
import { BedModel } from "../../Facility/models";
import ButtonV2, { Submit } from "../../Common/components/ButtonV2";
import { SelectFormField } from "../../Form/FormFields/SelectFormField";
import TextFormField from "../../Form/FormFields/TextFormField";
import Card from "../../../CAREUI/display/Card";
type direction = "left" | "right" | "up" | "down";
import CareIcon from "../../../CAREUI/icons/CareIcon";
type direction = "left" | "right" | "up" | "down" | null;

interface CameraBoundaryConfigureProps {
addBoundaryPreset(e: any): void;
updateBoundaryPreset(e: any): void;
updateBoundaryPreset(action: any): void;
deleteBoundaryPreset(e: any): void;
boundaryPreset: any;
bed: BedModel;
}

interface UpdateCameraBoundaryConfigureProps {
cameraPTZ: any;
direction: direction;
setDirection(direction: direction): void;
changeDirectionalBoundary(action: "expand" | "shrink"): void;
updateBoundaryPreset(e: any): void;
}

// interface UpdateCameraBoundaryConfigureProps {
// placeholder: any;
// }
export default function CameraBoundaryConfigure(
props: CameraBoundaryConfigureProps
) {
Expand All @@ -28,8 +30,6 @@ export default function CameraBoundaryConfigure(
deleteBoundaryPreset,
boundaryPreset,
bed,
direction,
setDirection,
} = props;
const [toUpdate, setToUpdate] = useState<boolean>(false);
return (
Expand Down Expand Up @@ -64,23 +64,13 @@ export default function CameraBoundaryConfigure(
</div>
{toUpdate ? (
<div>
<SelectFormField
className="mt-2"
name="direction"
id="direction"
label="Direction"
required={true}
options={["left", "right", "up", "down"]}
optionLabel={(option) => option}
value={direction}
onChange={(option) => setDirection(option.value)}
error=""
/>
<div className="flex justify-start gap-4 mt-2">
<div>
<ButtonV2
variant="primary"
onClick={updateBoundaryPreset}
onClick={() => {
updateBoundaryPreset("confirm");
}}
id="confirm-update-boundary-preset"
>
Confirm
Expand All @@ -91,6 +81,7 @@ export default function CameraBoundaryConfigure(
variant="secondary"
border={true}
onClick={() => {
updateBoundaryPreset("cancel");
setToUpdate(false);
}}
id="cancel-modify-boundary-preset"
Expand Down Expand Up @@ -132,19 +123,156 @@ export default function CameraBoundaryConfigure(
);
}

export function UpdateCameraBoundaryConfigure() {
// props: UpdateCameraBoundaryConfigureProps,
export function UpdateCameraBoundaryConfigure(
props: UpdateCameraBoundaryConfigureProps
) {
const {
cameraPTZ,
direction,
setDirection,
changeDirectionalBoundary,
updateBoundaryPreset,
} = props;

return (
<Card>
<div className="gid gap-2 grid-cols-1">
<div>Boundary preset name</div>
<div className="grid gap-2 grid-cols-3">
<div>direction buttons</div>
<div>precision, zoom in and out</div>
<div>expand and contract</div>
<div className="mt-4 max-w-lg">
<Card>
<div className="flex flex-col space-y-4">
<div>
<label id="asset-name">Name</label>
<div className="text-lg font-semibold">Boundary Preset</div>
</div>
<div className="grid gap-2 grid-cols-3">
<div className="grid grid-cols-3">
{[
false,
"up",
false,
"left",
false,
"right",
false,
"down",
false,
].map((button, index) => {
let out = <div className="w-[20px] h-[20px]" key={index}></div>;
if (button) {
out = (
<ButtonV2
size="small"
circle={true}
variant={direction === button ? "primary" : "secondary"}
border={true}
key={index}
onClick={() => {
if (direction === button) {
setDirection(null);
} else {
setDirection(button as direction);
}
}}
>
{button}
</ButtonV2>
);
}
return out;
})}
</div>
<div className="flex flex-col justify-end gap-2">
{[cameraPTZ[4], cameraPTZ[5], cameraPTZ[6]].map(
(option, index) => {
const shortcutKeyDescription =
option.shortcutKey &&
option.shortcutKey
.join(" + ")
.replace("Control", "Ctrl")
.replace("ArrowUp", "↑")
.replace("ArrowDown", "↓")
.replace("ArrowLeft", "←")
.replace("ArrowRight", "→");

return (
<div key={index}>
<button
className="bg-green-100 hover:bg-green-200 border border-green-100 p-2 tooltip"
onClick={option.callback}
>
{/* <span className="sr-only">{option.label}</span> */}
{option.icon ? (
<CareIcon className={`care-${option.icon}`} />
) : (
<span className="px-2 font-bold h-full w-8 flex items-center justify-center ">
{option.value}x
</span>
)}
<span className="tooltip-text tooltip-top -translate-x-1/2 text-sm font-semibold">{`${option.label} (${shortcutKeyDescription})`}</span>
</button>
</div>
);
}
)}
</div>
<div className="flex flex-col justify-center gap-2">
<div>
<ButtonV2
size="small"
variant="primary"
onClick={() => {
changeDirectionalBoundary("expand");
}}
>
Expand
</ButtonV2>
</div>
<div>
<ButtonV2
size="small"
variant="primary"
onClick={() => {
changeDirectionalBoundary("shrink");
}}
>
Shrink
</ButtonV2>
</div>
</div>
</div>
<div className="flex flex-row justify-center gap-2">
<ButtonV2
variant="primary"
size="small"
onClick={() => {
console.log("preview");
}}
id="preview-update-boundary-preset"
>
Preview
</ButtonV2>
<ButtonV2
variant="primary"
size="small"
onClick={() => {
updateBoundaryPreset("confirm");
}}
id="confirm-update-boundary-preset"
>
Confirm
</ButtonV2>
<ButtonV2
variant="secondary"
size="small"
border={true}
onClick={() => {
updateBoundaryPreset("cancel");
}}
id="cancel-modify-boundary-preset"
>
Cancel
</ButtonV2>
</div>
</div>
<div>confirm/cancel</div>
</div>
</Card>
</Card>
</div>
);
}
13 changes: 6 additions & 7 deletions src/Components/Assets/configure/CameraConfigure.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Submit } from "../../Common/components/ButtonV2";
import TextFormField from "../../Form/FormFields/TextFormField";
import Card from "../../../CAREUI/display/Card";
import CameraBoundaryConfigure from "./CameraBoundayConfigure";
type direction = "left" | "right" | "up" | "down";

interface CameraConfigureProps {
asset: AssetData;
addPreset(e: React.SyntheticEvent): void;
Expand All @@ -20,8 +20,7 @@ interface CameraConfigureProps {
facilityMiddlewareHostname: string;
isLoading: boolean;
boundaryPreset: any;
direction: direction;
setDirection(direction: direction): void;
setBoundaryPreset: (preset: any) => void;
addBoundaryPreset(e: any): void;
updateBoundaryPreset(e: any): void;
deleteBoundaryPreset(e: any): void;
Expand All @@ -38,8 +37,7 @@ export default function CameraConfigure(props: CameraConfigureProps) {
refreshPresetsHash,
facilityMiddlewareHostname,
boundaryPreset,
direction,
setDirection,
setBoundaryPreset,
addBoundaryPreset,
updateBoundaryPreset,
deleteBoundaryPreset,
Expand Down Expand Up @@ -88,8 +86,6 @@ export default function CameraConfigure(props: CameraConfigureProps) {
updateBoundaryPreset={updateBoundaryPreset}
deleteBoundaryPreset={deleteBoundaryPreset}
boundaryPreset={boundaryPreset}
direction={direction}
setDirection={setDirection}
bed={bed}
/>
</div>
Expand All @@ -100,6 +96,9 @@ export default function CameraConfigure(props: CameraConfigureProps) {
asset={getCameraConfig(asset)}
showRefreshButton={true}
refreshPresetsHash={refreshPresetsHash}
boundaryPreset={boundaryPreset}
setBoundaryPreset={setBoundaryPreset}
updateBoundaryPreset={updateBoundaryPreset}
/>
</Card>
</div>
Expand Down
Loading

0 comments on commit d0dd9a4

Please sign in to comment.