From 5184543a3e7ec8cb3dce4b4c00c107a0477631cb Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Mon, 7 Aug 2023 00:38:19 +0200 Subject: [PATCH] Normalize the size of the camera frame container from window size. If the window is smaller than the camera resolution, then we should scale down the container size accordingly. --- .../src/components/panels/Camera/Mixin.vue | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/platypush/backend/http/webapp/src/components/panels/Camera/Mixin.vue b/platypush/backend/http/webapp/src/components/panels/Camera/Mixin.vue index 80877cf33..b4787332f 100644 --- a/platypush/backend/http/webapp/src/components/panels/Camera/Mixin.vue +++ b/platypush/backend/http/webapp/src/components/panels/Camera/Mixin.vue @@ -86,8 +86,21 @@ export default { onSizeChanged() { const degToRad = (deg) => (deg * Math.PI)/180 const rot = degToRad(this.params.rotate) - this.$refs.frameContainer.style.width = Math.round(this.params.scale_x * Math.abs(this.params.resolution[0] * Math.cos(rot) + this.params.resolution[1] * Math.sin(rot))) + 'px' - this.$refs.frameContainer.style.height = Math.round(this.params.scale_y * Math.abs(this.params.resolution[0] * Math.sin(rot) + this.params.resolution[1] * Math.cos(rot))) + 'px' + let width = Math.round(this.params.scale_x * Math.abs(this.params.resolution[0] * Math.cos(rot) + this.params.resolution[1] * Math.sin(rot))) + let height = Math.round(this.params.scale_y * Math.abs(this.params.resolution[0] * Math.sin(rot) + this.params.resolution[1] * Math.cos(rot))) + + if (width > window.innerWidth) { + height = Math.round(height * (window.innerWidth / width)) + width = window.innerWidth + } + + if (height > window.innerHeight) { + width = Math.round(width * (window.innerHeight / height)) + height = window.innerHeight + } + + this.$refs.frameContainer.style.width = `${width}px` + this.$refs.frameContainer.style.height = `${height}px` }, onFpsChanged() {},