diff --git a/photon-client/src/components/app/photon-camera-stream.vue b/photon-client/src/components/app/photon-camera-stream.vue index 2868ae7180..1349da2f9d 100644 --- a/photon-client/src/components/app/photon-camera-stream.vue +++ b/photon-client/src/components/app/photon-camera-stream.vue @@ -4,13 +4,14 @@ import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore"; import { useStateStore } from "@/stores/StateStore"; import loadingImage from "@/assets/images/loading.svg"; import type { StyleValue } from "vue/types/jsx"; +import CvIcon from "@/components/common/cv-icon.vue"; const props = defineProps<{ streamType: "Raw" | "Processed"; id?: string; }>(); -const src = computed(() => { +const streamSrc = computed(() => { const port = useCameraSettingsStore().currentCameraSettings.stream[props.streamType === "Raw" ? "inputPort" : "outputPort"]; @@ -20,25 +21,74 @@ const src = computed(() => { return `http://${inject("backendHostname")}:${port}/stream.mjpg`; }); -const alt = computed(() => `${props.streamType} Stream View`); - -const style = computed(() => { +const streamDesc = computed(() => `${props.streamType} Stream View`); +const streamStyle = computed(() => { if (useStateStore().colorPickingMode) { - return { cursor: "crosshair" }; - } else if (src.value !== loadingImage) { - return { cursor: "pointer" }; + return { width: "100%", cursor: "crosshair" }; + } else if (streamSrc.value !== loadingImage) { + return { width: "100%", cursor: "pointer" }; } - return {}; + return { width: "100%" }; }); -const handleClick = () => { - if (!useStateStore().colorPickingMode && src.value !== loadingImage) { - window.open(src.value); +const overlayStyle = computed(() => { + if (useStateStore().colorPickingMode || streamSrc.value == loadingImage) { + return { display: "none" }; + } else { + return {}; + } +}); + +const handleStreamClick = () => { + if (!useStateStore().colorPickingMode && streamSrc.value !== loadingImage) { + window.open(streamSrc.value); + } +}; +const handleCaptureClick = () => { + if (props.streamType === "Raw") { + useCameraSettingsStore().saveInputSnapshot(); + } else { + useCameraSettingsStore().saveOutputSnapshot(); } }; + + diff --git a/photon-client/src/components/cameras/CameraCalibrationCard.vue b/photon-client/src/components/cameras/CameraCalibrationCard.vue index fb12224656..969dffa86b 100644 --- a/photon-client/src/components/cameras/CameraCalibrationCard.vue +++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue @@ -384,7 +384,7 @@ const endCalibration = () => { color="secondary" style="width: 100%" :disabled="!settingsValid" - @click="isCalibrating ? useCameraSettingsStore().takeCalibrationSnapshot(true) : startCalibration()" + @click="isCalibrating ? useCameraSettingsStore().takeCalibrationSnapshot() : startCalibration()" > {{ isCalibrating ? "Take Snapshot" : "Start Calibration" }} diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue index 8b7f1785dc..c9e3d32cb9 100644 --- a/photon-client/src/components/cameras/CamerasView.vue +++ b/photon-client/src/components/cameras/CamerasView.vue @@ -41,7 +41,7 @@ const fpsTooLow = computed(() => {