From 2b36160a53f0bc120a43da3a556a4bdb972af776 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 23 Nov 2024 22:26:41 +0100
Subject: [PATCH] feat(Webcam): add option to overlay a nozzle crosshair for
 IDEX calibration

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../settings/Webcams/WebcamForm.vue           | 100 ++++++++++++++++++
 .../webcams/WebcamNozzleCrosshair.vue         |  94 ++++++++++++++++
 .../webcams/streamers/Mjpegstreamer.vue       |   7 ++
 .../streamers/MjpegstreamerAdaptive.vue       |   7 ++
 .../streamers/WebrtcCameraStreamer.vue        |  14 ++-
 src/locales/en.json                           |   4 +
 src/store/gui/webcams/types.ts                |   3 +
 7 files changed, 227 insertions(+), 2 deletions(-)
 create mode 100644 src/components/webcams/WebcamNozzleCrosshair.vue

diff --git a/src/components/settings/Webcams/WebcamForm.vue b/src/components/settings/Webcams/WebcamForm.vue
index 1de588da6..089339d46 100644
--- a/src/components/settings/Webcams/WebcamForm.vue
+++ b/src/components/settings/Webcams/WebcamForm.vue
@@ -143,6 +143,58 @@
                                 :label="$t('Settings.WebcamsTab.Vertically')" />
                         </v-col>
                     </v-row>
+                    <template v-if="nozzleCrosshairAvialable">
+                        <v-row>
+                            <v-col class="pt-3 pb-3">
+                                <div class="v-label v-label--active theme--dark text-subtitle-1">
+                                    {{ $t('Settings.WebcamsTab.NozzleCrosshair') }}:
+                                </div>
+                            </v-col>
+                        </v-row>
+                        <v-row class="mt-0">
+                            <v-col class="py-0">
+                                <v-checkbox
+                                    v-model="nozzleCrosshair"
+                                    class="mt-1"
+                                    hide-details
+                                    :label="$t('Settings.WebcamsTab.Enable')" />
+                            </v-col>
+                            <v-col v-if="nozzleCrosshair" class="py-0">
+                                <v-menu bottom left offset-y :close-on-content-click="false">
+                                    <template #activator="{ on, attrs }">
+                                        <v-btn
+                                            v-bind="attrs"
+                                            :color="nozzleCrosshairColor"
+                                            class="minwidth-0 px-5"
+                                            small
+                                            v-on="on" />
+                                    </template>
+                                    <v-color-picker
+                                        :value="nozzleCrosshairColor"
+                                        hide-mode-switch
+                                        mode="rgba"
+                                        @update:color="updateLogoColor" />
+                                </v-menu>
+                                <div
+                                    class="v-label v-label--active theme--dark text-subtitle-1 d-inline-block ml-2 mt-2">
+                                    {{ $t('Settings.WebcamsTab.Color') }}
+                                </div>
+                            </v-col>
+                        </v-row>
+                        <v-row v-if="nozzleCrosshair">
+                            <v-col>
+                                <v-slider
+                                    v-model="nozzleCrosshairSize"
+                                    :max="1"
+                                    :min="0.01"
+                                    :step="0.01"
+                                    thumb-label
+                                    thumb-size="24"
+                                    hide-details
+                                    :label="$t('Settings.WebcamsTab.Size')" />
+                            </v-col>
+                        </v-row>
+                    </template>
                 </v-col>
                 <v-col class="col-12 col-sm-6 text-center" align-self="center">
                     <webcam-wrapper :webcam="webcam" page="settings" />
@@ -311,6 +363,54 @@ export default class WebcamForm extends Mixins(BaseMixin, WebcamMixin) {
         this.webcam.extra_data.enableAudio = newVal
     }
 
+    get nozzleCrosshairAvialable() {
+        return ['mjpegstreamer', 'mjpegstreamer-adaptive', 'webrtc-camerastreamer'].includes(this.webcam.service)
+    }
+
+    get nozzleCrosshair() {
+        window.console.log(this.webcam.extra_data)
+
+        return this.webcam.extra_data?.nozzleCrosshair ?? false
+    }
+
+    set nozzleCrosshair(newVal) {
+        const extraData = { ...(this.webcam.extra_data ?? {}) }
+        extraData.nozzleCrosshair = newVal
+
+        this.webcam.extra_data = extraData
+    }
+
+    get nozzleCrosshairColor() {
+        return this.webcam.extra_data?.nozzleCrosshairColor ?? '#ff0000'
+    }
+
+    set nozzleCrosshairColor(newVal: string) {
+        const extraData = { ...(this.webcam.extra_data ?? {}) }
+        extraData.nozzleCrosshairColor = newVal
+
+        this.webcam.extra_data = extraData
+    }
+
+    updateLogoColor(color: string | { hex: string }) {
+        if (typeof color === 'object') {
+            this.nozzleCrosshairColor = color.hex
+            return
+        }
+
+        this.nozzleCrosshairColor = color
+    }
+
+    get nozzleCrosshairSize() {
+        return this.webcam.extra_data?.nozzleCrosshairSize ?? 0.1
+    }
+
+    set nozzleCrosshairSize(newVal: number) {
+        const extraData = { ...(this.webcam.extra_data ?? {}) }
+        extraData.nozzleCrosshairSize = newVal
+
+        this.webcam.extra_data = extraData
+    }
+
     mounted() {
         this.oldWebcamName = this.webcam.name
     }
diff --git a/src/components/webcams/WebcamNozzleCrosshair.vue b/src/components/webcams/WebcamNozzleCrosshair.vue
new file mode 100644
index 000000000..413f46b6d
--- /dev/null
+++ b/src/components/webcams/WebcamNozzleCrosshair.vue
@@ -0,0 +1,94 @@
+<template>
+    <div ref="container" class="crosshair-container">
+        <div class="line horizontal" :style="styleLines" />
+        <div class="line vertical" :style="styleLines" />
+        <div class="circle" :style="styleCircle" />
+        <resize-observer @notify="handleResize" />
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop, Ref } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+
+@Component
+export default class WebcamWrapper extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) webcam!: GuiWebcamStateWebcam
+    @Ref() container!: HTMLDivElement
+
+    clientHeight = 0
+
+    get color() {
+        return this.webcam.extra_data?.nozzleCrosshairColor ?? '#ff0000'
+    }
+
+    get styleLines() {
+        return {
+            backgroundColor: this.color,
+        }
+    }
+
+    get styleCircle() {
+        const nozzleCrosshairSize = this.webcam.extra_data?.nozzleCrosshairSize ?? 0.1
+        const size = this.clientHeight * nozzleCrosshairSize
+
+        return {
+            borderColor: this.color,
+            width: `${size}px`,
+            height: `${size}px`,
+            marginLeft: `-${size / 2}px`,
+            marginTop: `-${size / 2}px`,
+        }
+    }
+
+    mounted() {
+        this.handleResize()
+    }
+
+    handleResize() {
+        this.$nextTick(() => {
+            this.clientHeight = this.container.clientHeight
+        })
+    }
+}
+</script>
+
+<style scoped>
+.crosshair-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.line {
+    position: absolute;
+    background-color: #ff0000;
+}
+
+.horizontal {
+    height: 1px;
+    top: 50%;
+    left: 0;
+    right: 0;
+}
+
+.vertical {
+    left: 50%;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+}
+
+.circle {
+    position: absolute;
+    border: 1px solid #ff0000;
+    border-radius: 50%;
+    box-sizing: border-box;
+    top: 50%;
+    left: 50%;
+}
+</style>
diff --git a/src/components/webcams/streamers/Mjpegstreamer.vue b/src/components/webcams/streamers/Mjpegstreamer.vue
index 03706b94a..dcabf07fc 100644
--- a/src/components/webcams/streamers/Mjpegstreamer.vue
+++ b/src/components/webcams/streamers/Mjpegstreamer.vue
@@ -11,6 +11,7 @@
         <span v-if="showFpsCounter && status === 'connected'" class="webcamFpsOutput">
             {{ $t('Panels.WebcamPanel.FPS') }}: {{ fpsOutput }}
         </span>
+        <webcam-nozzle-crosshair v-if="showNozzleCrosshair" :webcam="camSettings" />
         <v-row v-if="status !== 'connected'">
             <v-col class="_webcam_mjpegstreamer_output text-center d-flex flex-column justify-center align-center">
                 <v-progress-circular v-if="status === 'connecting'" indeterminate color="primary" class="mb-3" />
@@ -99,6 +100,12 @@ export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
         return this.$store.getters['gui/getPanelExpand']('webcam-panel', this.viewport) ?? false
     }
 
+    get showNozzleCrosshair() {
+        const nozzleCrosshair = this.camSettings.extra_data?.nozzleCrosshair ?? false
+
+        return nozzleCrosshair && this.status === 'connected'
+    }
+
     // start or stop the video when the expanded state changes
     @Watch('expanded', { immediate: true })
     expandChanged(newExpanded: boolean): void {
diff --git a/src/components/webcams/streamers/MjpegstreamerAdaptive.vue b/src/components/webcams/streamers/MjpegstreamerAdaptive.vue
index cac1ee5f8..695831d31 100644
--- a/src/components/webcams/streamers/MjpegstreamerAdaptive.vue
+++ b/src/components/webcams/streamers/MjpegstreamerAdaptive.vue
@@ -12,6 +12,7 @@
         <span v-if="status === 'connected' && showFpsCounter" class="webcamFpsOutput">
             {{ $t('Panels.WebcamPanel.FPS') }}: {{ fpsOutput }}
         </span>
+        <webcam-nozzle-crosshair v-if="showNozzleCrosshair" :webcam="camSettings" />
         <v-row v-if="status !== 'connected'">
             <v-col class="_webcam_mjpegstreamer_output text-center d-flex flex-column justify-center align-center">
                 <v-progress-circular v-if="status === 'connecting'" indeterminate color="primary" class="mb-3" />
@@ -100,6 +101,12 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin, WebcamMixin
         return this.isVisibleDocument && this.isVisibleViewport
     }
 
+    get showNozzleCrosshair() {
+        const nozzleCrosshair = this.camSettings.extra_data?.nozzleCrosshair ?? false
+
+        return nozzleCrosshair && this.status === 'connected'
+    }
+
     mounted() {
         document.addEventListener('visibilitychange', this.documentVisibilityChanged)
     }
diff --git a/src/components/webcams/streamers/WebrtcCameraStreamer.vue b/src/components/webcams/streamers/WebrtcCameraStreamer.vue
index b3422bff8..3410f3cd3 100644
--- a/src/components/webcams/streamers/WebrtcCameraStreamer.vue
+++ b/src/components/webcams/streamers/WebrtcCameraStreamer.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="position-relative d-flex">
         <video
             v-show="status === 'connected'"
             ref="stream"
@@ -8,6 +8,7 @@
             autoplay
             muted
             playsinline />
+        <webcam-nozzle-crosshair v-if="nozzleCrosshair" :webcam="camSettings" />
         <v-row v-if="status !== 'connected'">
             <v-col class="_webcam_webrtc_output text-center d-flex flex-column justify-center align-center">
                 <v-progress-circular v-if="status === 'connecting'" indeterminate color="primary" class="mb-3" />
@@ -23,6 +24,7 @@ import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 import WebcamMixin from '@/components/mixins/webcam'
 import { capitalize } from '@/plugins/helpers'
+import WebcamNozzleCrosshair from '@/components/webcams/WebcamNozzleCrosshair.vue'
 
 interface CameraStreamerResponse extends RTCSessionDescriptionInit {
     id: string
@@ -30,7 +32,7 @@ interface CameraStreamerResponse extends RTCSessionDescriptionInit {
 }
 
 @Component({
-    methods: { capitalize },
+    components: { WebcamNozzleCrosshair },
 })
 export default class WebrtcCameraStreamer extends Mixins(BaseMixin, WebcamMixin) {
     capitalize = capitalize
@@ -65,6 +67,10 @@ export default class WebrtcCameraStreamer extends Mixins(BaseMixin, WebcamMixin)
         return output
     }
 
+    get nozzleCrosshair() {
+        return this.camSettings.extra_data?.nozzleCrosshair ?? false
+    }
+
     get expanded(): boolean {
         if (this.page !== 'dashboard') return true
 
@@ -243,6 +249,10 @@ export default class WebrtcCameraStreamer extends Mixins(BaseMixin, WebcamMixin)
 </script>
 
 <style scoped>
+.position-relative {
+    position: relative;
+}
+
 .webcamStream {
     width: 100%;
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 36b87a326..efed6ed28 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1278,9 +1278,11 @@
         "Update": "update",
         "WebcamsTab": {
             "AddWebcam": "add webcam",
+            "Color": "Color",
             "CreateWebcam": "Create Webcam",
             "EditCrowsnestConf": "Edit crowsnest.conf",
             "EditWebcam": "Edit Webcam",
+            "Enable": "Enable",
             "EnableAudio": "Enable audio",
             "FlipWebcam": "Flip webcam image:",
             "HideFps": "Hide FPS counter",
@@ -1300,10 +1302,12 @@
             "MjpegstreamerAdaptive": "Adaptive MJPEG-Streamer (experimental)",
             "Name": "Name",
             "NameAlreadyExists": "Name already exists",
+            "NozzleCrosshair": "Nozzle Crosshair",
             "Required": "required",
             "Rotate": "Rotate",
             "SaveWebcam": "Save Webcam",
             "Service": "Service",
+            "Size": "Size",
             "TargetFPS": "Target FPS",
             "UpdateWebcam": "Update Webcam",
             "UrlSnapshot": "URL Snapshot",
diff --git a/src/store/gui/webcams/types.ts b/src/store/gui/webcams/types.ts
index a5566b62c..2fe109a92 100644
--- a/src/store/gui/webcams/types.ts
+++ b/src/store/gui/webcams/types.ts
@@ -28,6 +28,9 @@ export interface GuiWebcamStateWebcam {
     extra_data?: {
         enableAudio?: boolean
         hideFps?: boolean
+        nozzleCrosshair?: boolean
+        nozzleCrosshairColor?: string
+        nozzleCrosshairSize?: number
     }
     source?: 'config' | 'database'
 }