Skip to content

Commit

Permalink
Merge branch 'stevejcl:apiV2' into apiV2
Browse files Browse the repository at this point in the history
  • Loading branch information
@acocalypso
acocalypso authored May 14, 2024
2 parents be805bf + 4cbcb7f commit b2239a5
Show file tree
Hide file tree
Showing 11 changed files with 202 additions and 160 deletions.
173 changes: 77 additions & 96 deletions src/components/imaging/CameraAddOn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,9 @@ export default function CameraAddOn(props: PropTypes) {
let WidthSlidePane = useRef("1500px");
let WidthCircularSlider = useRef(150);
let trackSize = useRef(24);
let intervalTimer = useRef<ReturnType<typeof setInterval> | undefined>(
undefined
);

let gLastTimeMotorCmd = Date.now();
let gMotorState = false;
Expand All @@ -89,9 +92,9 @@ export default function CameraAddOn(props: PropTypes) {
let PhotoMode =
!connectionCtx.imagingSession.isRecording &&
!connectionCtx.imagingSession.endRecording;
setShowModal((prev) => prev && PhotoMode);

useEffect(() => {
setShowModal((prev) => prev && PhotoMode);
const handleResize = () => {
//setWindowWidth(window.innerWidth);
update_control();
Expand All @@ -101,8 +104,11 @@ export default function CameraAddOn(props: PropTypes) {

return () => {
window.removeEventListener("resize", handleResize);
if (intervalTimer.current) {
clearInterval(intervalTimer.current);
}
};
}, []);
}, []); // Empty dependency array means this effect runs only once on mount

const PhotosModeActions = [
"Photo",
Expand Down Expand Up @@ -162,6 +168,16 @@ export default function CameraAddOn(props: PropTypes) {
setActiveBtnSettings(buttonName);
};

function changeColorButton(ImgID, Force = false) {
const imgElementButton = document.getElementById(ImgID) as HTMLImageElement;
if (imgElementButton) {
if (Force) imgElementButton.src = "/images/photo-camera-red.png";
else if (imgElementButton.src.includes("photo-camera-white"))
imgElementButton.src = "/images/photo-camera-red.png";
else imgElementButton.src = "/images/photo-camera-white.png";
}
}

// action Click Photo
const handleClickActionPhoto: GenericMouseEventHandler<
HTMLImageElement
Expand All @@ -175,12 +191,12 @@ export default function CameraAddOn(props: PropTypes) {
if (imgElement) {
imgElement.src = "/images/photo-camera-red.png";
}
// Reset the image source back to its original source after a delay (3000 milliseconds)
// Reset the image source back to its original source after a delay
setTimeout(() => {
if (imgElement) {
imgElement.src = "/images/photo-camera-white.png";
}
}, 3000);
}, 2000);
// Reset the active action after the photo is taken
setActiveAction(undefined);
};
Expand All @@ -195,16 +211,8 @@ export default function CameraAddOn(props: PropTypes) {
// Wait for startVideo() to finish before continuing
await startVideo(CameraType[activeBtnVideo], connectionCtx, setErrorTxt);
// Change the image source using the ID
const imgElement = document.getElementById("TakeVideo") as HTMLImageElement;
if (imgElement) {
imgElement.src = "/images/photo-camera-red.png";
}
// Reset the image source back to its original source after a delay (3000 milliseconds)
setTimeout(() => {
if (imgElement) {
imgElement.src = "/images/photo-camera-white.png";
}
}, 3000);
changeColorButton("TakeVideo", true);
intervalTimer.current = setInterval(changeColorButton, 2000, "TakeVideo");
};

// action Click Stop Video
Expand All @@ -214,16 +222,9 @@ export default function CameraAddOn(props: PropTypes) {
// Wait for stopVideo() to finish before continuing
await stopVideo(CameraType[activeBtnVideo], connectionCtx, setErrorTxt);
// Change the image source using the ID
const imgElement = document.getElementById("TakeVideo") as HTMLImageElement;
if (imgElement) {
imgElement.src = "/images/photo-camera-red.png";
}
// Reset the image source back to its original source after a delay (3000 milliseconds)
setTimeout(() => {
if (imgElement) {
imgElement.src = "/images/photo-camera-white.png";
}
}, 3000);
clearInterval(intervalTimer.current);
changeColorButton("TakeVideo", true);
setTimeout(changeColorButton, 2000, "TakeVideo");
// Reset the active action after the photo is taken
setActiveAction(undefined);
};
Expand All @@ -242,18 +243,12 @@ export default function CameraAddOn(props: PropTypes) {
colValue,
connectionCtx,
setErrorTxt,
setActiveAction
setActiveAction,
stopPanoAuto
);
const imgElement = document.getElementById("TakePano") as HTMLImageElement;
if (imgElement) {
imgElement.src = "/images/photo-camera-red.png";
}
// Reset the image source back to its original source after a delay (3000 milliseconds)
setTimeout(() => {
if (imgElement) {
imgElement.src = "/images/photo-camera-white.png";
}
}, 3000);
// Change the image source using the ID
changeColorButton("TakePano", true);
intervalTimer.current = setInterval(changeColorButton, 2000, "TakePano");
};

// action Click Stop Pano
Expand All @@ -262,16 +257,19 @@ export default function CameraAddOn(props: PropTypes) {
> = async () => {
// Wait for stopPano() to finish before continuing
await stopPano(CameraType[activeBtnPano], connectionCtx, setErrorTxt);
const imgElement = document.getElementById("TakePano") as HTMLImageElement;
if (imgElement) {
imgElement.src = "/images/photo-camera-red.png";
}
// Reset the image source back to its original source after a delay (3000 milliseconds)
setTimeout(() => {
if (imgElement) {
imgElement.src = "/images/photo-camera-white.png";
}
}, 3000);
// Change the image source using the ID
clearInterval(intervalTimer.current);
changeColorButton("TakePano", true);
setTimeout(changeColorButton, 2000, "TakePano");
// Reset the active action after the photo is taken
setActiveAction(undefined);
};

const stopPanoAuto = () => {
// Change the image source using the ID
clearInterval(intervalTimer.current);
changeColorButton("TakePano", true);
setTimeout(changeColorButton, 2000, "TakePano");
// Reset the active action after the photo is taken
setActiveAction(undefined);
};
Expand All @@ -290,21 +288,16 @@ export default function CameraAddOn(props: PropTypes) {
intervalBurstValue,
connectionCtx,
setErrorTxt,
setActiveAction
setActiveAction,
stopBurstAuto
);
// Change the image source using the ID
const imgElement = document.getElementById(
changeColorButton("TakeBurstPhoto", true);
intervalTimer.current = setInterval(
changeColorButton,
2000,
"TakeBurstPhoto"
) as HTMLImageElement;
if (imgElement) {
imgElement.src = "/images/photo-camera-red.png";
}
// Reset the image source back to its original source after a delay (3000 milliseconds)
setTimeout(() => {
if (imgElement) {
imgElement.src = "/images/photo-camera-white.png";
}
}, 3000);
);
};

// action Click Stop Burst
Expand All @@ -314,20 +307,18 @@ export default function CameraAddOn(props: PropTypes) {
// Wait for stopBurst() to finish before continuing
await stopBurst(CameraType[activeBtnBurst], connectionCtx, setErrorTxt);
// Change the image source using the ID
const imgElement = document.getElementById(
"TakeBurstPhoto"
) as HTMLImageElement;
if (imgElement) {
imgElement.src = "/images/photo-camera-red.png";
}
// Reset the image source back to its original source after a delay (3000 milliseconds)
setTimeout(() => {
if (imgElement) {
imgElement.src = "/images/photo-camera-white.png";
}
}, 3000);
clearInterval(intervalTimer.current);
changeColorButton("TakeBurstPhoto", true);
setTimeout(changeColorButton, 2000, "TakeBurstPhoto");
// Reset the active action after the photo is taken
setActiveAction(undefined);
};

const stopBurstAuto = () => {
// Change the image source using the ID
clearInterval(intervalTimer.current);
changeColorButton("TakeBurstPhoto", true);
setTimeout(changeColorButton, 2000, "TakeBurstPhoto");
// Reset the active action after the photo is taken
setActiveAction(undefined);
};
Expand All @@ -339,28 +330,23 @@ export default function CameraAddOn(props: PropTypes) {
// Update state to set the active button
setActiveAction(PhotosModeActions[4].toString());

// Wait for startBurst() to finish before continuing
// Wait for startTimeLapse() to finish before continuing
await startTimeLapse(
CameraType[activeBtnBurst],
CameraType[activeBtnTimeLapse],
intervalIndexValue,
totalTimeIndexValue,
connectionCtx,
setErrorTxt,
setActiveAction
setActiveAction,
stopTimeLapseAuto
);
// Change the image source using the ID
const imgElement = document.getElementById(
changeColorButton("TakeTimeLapse", true);
intervalTimer.current = setInterval(
changeColorButton,
2000,
"TakeTimeLapse"
) as HTMLImageElement;
if (imgElement) {
imgElement.src = "/images/photo-camera-red.png";
}
// Reset the image source back to its original source after a delay (3000 milliseconds)
setTimeout(() => {
if (imgElement) {
imgElement.src = "/images/photo-camera-white.png";
}
}, 3000);
);
};

// action Click Stop Time Lapse
Expand All @@ -369,19 +355,14 @@ export default function CameraAddOn(props: PropTypes) {
> = async () => {
// Wait for stopTimeLapse() to finish before continuing
await stopTimeLapse(CameraType[activeBtnBurst], connectionCtx, setErrorTxt);
// stopTimeLapseAuto is called
};

const stopTimeLapseAuto = () => {
// Change the image source using the ID
const imgElement = document.getElementById(
"TakeTimeLapse"
) as HTMLImageElement;
if (imgElement) {
imgElement.src = "/images/photo-camera-red.png";
}
// Reset the image source back to its original source after a delay (3000 milliseconds)
setTimeout(() => {
if (imgElement) {
imgElement.src = "/images/photo-camera-white.png";
}
}, 3000);
clearInterval(intervalTimer.current);
changeColorButton("TakeTimeLapse", true);
setTimeout(changeColorButton, 2000, "TakeTimeLapse");
// Reset the active action after the photo is taken
setActiveAction(undefined);
};
Expand Down Expand Up @@ -956,7 +937,7 @@ export default function CameraAddOn(props: PropTypes) {
</div>
<div className="column">
<div className="header">
<div className="title">{t("cCameraAddonTimeLapse")}</div>
<div className="title">{t("cCameraAddOnTimeLapse")}</div>
<Link href="#" className="" title="Show Settings">
<OverlayTrigger
trigger="click"
Expand Down
Loading

0 comments on commit b2239a5

Please sign in to comment.