@siliconst/metaui 1.0.2 → 1.4.4

package/src/nz/co/siliconst/ui5/metaui/controls/BaseHardwareControlRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseHardwareControlRenderer.d.ts","sourceRoot":"../../../../../../../..","sources":["src/nz/co/siliconst/ui5/metaui/controls/BaseHardwareControlRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,iEAAiE,CAAC;IACjF;;;;;OAKG;IACH,OAAO,aAAa,MAAM,2BAA2B,CAAC;IACtD,OAAO,mBAAmB,MAAM,yDAAyD,CAAC;;;qBAIhE,aAAa,WAAW,mBAAmB;;IAFrE,wBAkBE;CAED"}

package/src/nz/co/siliconst/ui5/metaui/controls/BaseHardwareControlRenderer.js

@@ -0,0 +1,2 @@
+sap.ui.define([],function(){"use strict";var n={apiVersion:2,render:function(n,e){n.openStart("div",e);n.class("sapUiSmallMarginBottom");n.openEnd();const t=e.getAggregation("_content");if(t){n.renderControl(t)}if(typeof e.renderContent==="function"){e.renderContent(n,e)}n.close("div")}};return n});
+//# sourceMappingURL=BaseHardwareControlRenderer.js.map

package/src/nz/co/siliconst/ui5/metaui/controls/BaseHardwareControlRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseHardwareControlRenderer.js","names":["__exports","apiVersion","render","rm","control","openStart","class","openEnd","content","getAggregation","renderControl","renderContent","close"],"sources":["BaseHardwareControlRenderer.ts"],"sourcesContent":["/**\n * @file BaseHardwareControlRenderer.ts\n * @description Standard renderer for all MetaUI hardware controls.\n * \n * @namespace nz.co.siliconst.ui5.metaui.controls\n */\nimport RenderManager from \"sap/ui/core/RenderManager\";\nimport BaseHardwareControl from \"./BaseHardwareControl\";\n\nexport default {\n    apiVersion: 2,\n    render: function (rm: RenderManager, control: BaseHardwareControl) {\n        rm.openStart(\"div\", control);\n        rm.class(\"sapUiSmallMarginBottom\");\n        rm.openEnd();\n        \n        const content = control.getAggregation(\"_content\") as sap.ui.core.Control;\n        if (content) {\n            rm.renderControl(content);\n        }\n        \n        if (typeof (control as unknown).renderContent === \"function\") {\n            (control as unknown).renderContent(rm, control);\n        }\n        \n        rm.close(\"div\");\n    }\n};\n"],"mappings":"yCAAA,IAAAA,EASe,CACXC,WAAY,EACZC,OAAQ,SAAUC,EAAmBC,GACjCD,EAAGE,UAAU,MAAOD,GACpBD,EAAGG,MAAM,0BACTH,EAAGI,UAEH,MAAMC,EAAUJ,EAAQK,eAAe,YACvC,GAAID,EAAS,CACTL,EAAGO,cAAcF,EACrB,CAEA,UAAYJ,EAAoBO,gBAAkB,WAAY,CACzDP,EAAoBO,cAAcR,EAAIC,EAC3C,CAEAD,EAAGS,MAAM,MACb,GACH,OAAAZ,CAAA","ignoreList":[]}

package/src/nz/co/siliconst/ui5/metaui/controls/BaseHardwareControlRenderer.ts

@@ -0,0 +1,28 @@
+/**
+ * @file BaseHardwareControlRenderer.ts
+ * @description Standard renderer for all MetaUI hardware controls.
+ * 
+ * @namespace nz.co.siliconst.ui5.metaui.controls
+ */
+import RenderManager from "sap/ui/core/RenderManager";
+import BaseHardwareControl from "./BaseHardwareControl";
+
+export default {
+    apiVersion: 2,
+    render: function (rm: RenderManager, control: BaseHardwareControl) {
+        rm.openStart("div", control);
+        rm.class("sapUiSmallMarginBottom");
+        rm.openEnd();
+        
+        const content = control.getAggregation("_content") as sap.ui.core.Control;
+        if (content) {
+            rm.renderControl(content);
+        }
+        
+        if (typeof (control as unknown).renderContent === "function") {
+            (control as unknown).renderContent(rm, control);
+        }
+        
+        rm.close("div");
+    }
+};

package/src/nz/co/siliconst/ui5/metaui/controls/CameraControl-dbg.js

@@ -0,0 +1,142 @@
+sap.ui.define(["./BaseHardwareControl", "sap/m/Button", "sap/m/VBox", "sap/ui/core/HTML", "sap/m/MessageToast", "sap/m/Image", "../utils/Logger"], function (__BaseHardwareControl, Button, VBox, HTML, MessageToast, Image, ___utils_Logger) {
+  "use strict";
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
+  }
+  const BaseHardwareControl = _interopRequireDefault(__BaseHardwareControl);
+  const Logger = ___utils_Logger["Logger"];
+  /**
+   * CameraControl
+   * Provides a live video feed to capture photos.
+   */
+  class CameraControl extends BaseHardwareControl {
+    static renderer = "nz.co.siliconst.ui5.metaui.controls.BaseHardwareControlRenderer";
+    static metadata = {
+      properties: {},
+      events: {}
+    };
+    videoEl = null;
+    mediaStream = null;
+    init() {
+      super.init();
+      this.videoHtml = new HTML({
+        content: "<video width='400' height='300' autoplay playsinline style='background-color: #000; display: none;'></video>",
+        afterRendering: this.onVideoRendered.bind(this)
+      }).addStyleClass("sapUiSmallMarginBottom");
+      this.previewImage = new Image({
+        width: "400px",
+        visible: false
+      }).addStyleClass("sapUiSmallMarginBottom");
+      this.startBtn = new Button({
+        icon: "sap-icon://video",
+        text: "Start Camera",
+        press: this.handleStartCameraPress.bind(this)
+      });
+      this.captureBtn = new Button({
+        icon: "sap-icon://camera",
+        text: "Capture",
+        visible: false,
+        press: this.captureImage.bind(this)
+      });
+      this.retakeBtn = new Button({
+        icon: "sap-icon://undo",
+        text: "Retake",
+        visible: false,
+        press: this.retakeImage.bind(this)
+      });
+      this.vBox = new VBox({
+        items: [this.videoHtml, this.previewImage, this.startBtn, this.captureBtn, this.retakeBtn]
+      });
+      this.setAggregation("_content", this.vBox);
+    }
+    async onVideoRendered() {
+      const domRef = this.videoHtml.getDomRef();
+      if (!domRef) return;
+      this.videoEl = domRef;
+      const val = this.getValue();
+      if (val && typeof val === "string" && val.startsWith("data:image")) {
+        this.showPreview(val);
+      }
+    }
+    handleStartCameraPress() {
+      this.startCamera();
+      this.startBtn.setVisible(false);
+      this.captureBtn.setVisible(true);
+      if (this.videoEl) {
+        this.videoEl.style.display = "block";
+      }
+    }
+    async startCamera() {
+      try {
+        this.mediaStream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            facingMode: "environment"
+          }
+        });
+        if (this.videoEl) {
+          this.videoEl.srcObject = this.mediaStream;
+        }
+      } catch (err) {
+        Logger.error("Camera access denied or unavailable", err.message, "CameraControl");
+        MessageToast.show("Camera access denied or unavailable.");
+      }
+    }
+    stopCamera() {
+      if (this.mediaStream) {
+        this.mediaStream.getTracks().forEach(track => track.stop());
+        this.mediaStream = null;
+      }
+    }
+    captureImage() {
+      if (!this.videoEl) return;
+      const canvas = document.createElement("canvas");
+      canvas.width = this.videoEl.videoWidth || 400;
+      canvas.height = this.videoEl.videoHeight || 300;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.drawImage(this.videoEl, 0, 0, canvas.width, canvas.height);
+        const dataUrl = canvas.toDataURL("image/jpeg", 0.8);
+        this.setValueAndFire(dataUrl);
+        this.showPreview(dataUrl);
+        MessageToast.show("Image captured successfully.");
+      }
+    }
+    retakeImage() {
+      this.setValueAndFire(null);
+      this.previewImage.setVisible(false);
+      this.videoHtml.setVisible(true);
+      this.captureBtn.setVisible(true);
+      this.retakeBtn.setVisible(false);
+
+      // Use a slight timeout to ensure DOM is ready before accessing stream again
+      setTimeout(() => this.startCamera(), 100);
+    }
+    showPreview(dataUrl) {
+      this.stopCamera();
+      this.videoHtml.setVisible(false);
+      this.previewImage.setSrc(dataUrl);
+      this.previewImage.setVisible(true);
+      this.captureBtn.setVisible(false);
+      this.retakeBtn.setVisible(true);
+    }
+    setValue(value) {
+      super.setValue(value);
+      if (value && typeof value === "string" && value.startsWith("data:image")) {
+        this.showPreview(value);
+      } else if (!value) {
+        // Only retake if we were showing a preview
+        if (this.previewImage.getVisible()) {
+          this.retakeImage();
+        }
+      }
+      return this;
+    }
+    exit() {
+      this.stopCamera();
+      super.exit();
+    }
+  }
+  return CameraControl;
+});
+//# sourceMappingURL=CameraControl-dbg.js.map

package/src/nz/co/siliconst/ui5/metaui/controls/CameraControl-dbg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CameraControl-dbg.js","names":["BaseHardwareControl","_interopRequireDefault","__BaseHardwareControl","Logger","___utils_Logger","CameraControl","renderer","metadata","properties","events","videoEl","mediaStream","init","videoHtml","HTML","content","afterRendering","onVideoRendered","bind","addStyleClass","previewImage","Image","width","visible","startBtn","Button","icon","text","press","handleStartCameraPress","captureBtn","captureImage","retakeBtn","retakeImage","vBox","VBox","items","setAggregation","domRef","getDomRef","val","getValue","startsWith","showPreview","startCamera","setVisible","style","display","navigator","mediaDevices","getUserMedia","video","facingMode","srcObject","err","error","message","MessageToast","show","stopCamera","getTracks","forEach","track","stop","canvas","document","createElement","videoWidth","height","videoHeight","ctx","getContext","drawImage","dataUrl","toDataURL","setValueAndFire","setTimeout","setSrc","setValue","value","getVisible","exit"],"sources":["CameraControl.ts"],"sourcesContent":["import BaseHardwareControl from \"./BaseHardwareControl\";\nimport Button from \"sap/m/Button\";\nimport VBox from \"sap/m/VBox\";\nimport HTML from \"sap/ui/core/HTML\";\nimport MessageToast from \"sap/m/MessageToast\";\nimport Image from \"sap/m/Image\";\nimport { Logger } from \"../utils/Logger\";\n\n/**\n * CameraControl\n * Provides a live video feed to capture photos.\n */\nexport default class CameraControl extends BaseHardwareControl {\n    static readonly renderer = \"nz.co.siliconst.ui5.metaui.controls.BaseHardwareControlRenderer\";\n    static readonly metadata = {\n        properties: {},\n        events: {}\n    };\n\n    private startBtn!: Button;\n    private vBox!: VBox;\n    private captureBtn!: Button;\n    private retakeBtn!: Button;\n    private videoHtml!: HTML;\n    private previewImage!: Image;\n    \n    private videoEl: HTMLVideoElement | null = null;\n    private mediaStream: MediaStream | null = null;\n\n    public init(): void {\n        super.init();\n\n        this.videoHtml = new HTML({\n            content: \"<video width='400' height='300' autoplay playsinline style='background-color: #000; display: none;'></video>\",\n            afterRendering: this.onVideoRendered.bind(this)\n        }).addStyleClass(\"sapUiSmallMarginBottom\");\n\n        this.previewImage = new Image({\n            width: \"400px\",\n            visible: false\n        }).addStyleClass(\"sapUiSmallMarginBottom\");\n\n        this.startBtn = new Button({\n            icon: \"sap-icon://video\",\n            text: \"Start Camera\",\n            press: this.handleStartCameraPress.bind(this)\n        });\n\n        this.captureBtn = new Button({\n            icon: \"sap-icon://camera\",\n            text: \"Capture\",\n            visible: false,\n            press: this.captureImage.bind(this)\n        });\n\n        this.retakeBtn = new Button({\n            icon: \"sap-icon://undo\",\n            text: \"Retake\",\n            visible: false,\n            press: this.retakeImage.bind(this)\n        });\n\n        this.vBox = new VBox({\n            items: [this.videoHtml, this.previewImage, this.startBtn, this.captureBtn, this.retakeBtn]\n        });\n\n        this.setAggregation(\"_content\", this.vBox);\n    }\n\n    private async onVideoRendered(): void {\n        const domRef = this.videoHtml.getDomRef() as HTMLElement;\n        if (!domRef) return;\n        \n        this.videoEl = domRef as HTMLVideoElement;\n        \n        const val = this.getValue();\n        if (val && typeof val === \"string\" && val.startsWith(\"data:image\")) {\n            this.showPreview(val);\n        }\n    }\n\n    private handleStartCameraPress(): void {\n        this.startCamera();\n        this.startBtn.setVisible(false);\n        this.captureBtn.setVisible(true);\n        if (this.videoEl) {\n            this.videoEl.style.display = \"block\";\n        }\n    }\n\n    private async startCamera(): Promise<void> {\n        try {\n            this.mediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: \"environment\" } });\n            if (this.videoEl) {\n                this.videoEl.srcObject = this.mediaStream;\n            }\n        } catch (err) {\n            Logger.error(\"Camera access denied or unavailable\", (err as Error).message, \"CameraControl\");\n            MessageToast.show(\"Camera access denied or unavailable.\");\n        }\n    }\n\n    private stopCamera(): void {\n        if (this.mediaStream) {\n            this.mediaStream.getTracks().forEach(track => track.stop());\n            this.mediaStream = null;\n        }\n    }\n\n    private captureImage(): void {\n        if (!this.videoEl) return;\n        \n        const canvas = document.createElement(\"canvas\");\n        canvas.width = this.videoEl.videoWidth || 400;\n        canvas.height = this.videoEl.videoHeight || 300;\n        \n        const ctx = canvas.getContext(\"2d\");\n        if (ctx) {\n            ctx.drawImage(this.videoEl, 0, 0, canvas.width, canvas.height);\n            const dataUrl = canvas.toDataURL(\"image/jpeg\", 0.8);\n            this.setValueAndFire(dataUrl);\n            this.showPreview(dataUrl);\n            MessageToast.show(\"Image captured successfully.\");\n        }\n    }\n\n    private retakeImage(): void {\n        this.setValueAndFire(null);\n        this.previewImage.setVisible(false);\n        this.videoHtml.setVisible(true);\n        this.captureBtn.setVisible(true);\n        this.retakeBtn.setVisible(false);\n        \n        // Use a slight timeout to ensure DOM is ready before accessing stream again\n        setTimeout(() => this.startCamera(), 100);\n    }\n\n    private showPreview(dataUrl: string): void {\n        this.stopCamera();\n        this.videoHtml.setVisible(false);\n        this.previewImage.setSrc(dataUrl);\n        this.previewImage.setVisible(true);\n        this.captureBtn.setVisible(false);\n        this.retakeBtn.setVisible(true);\n    }\n\n    public setValue(value: any): this {\n        super.setValue(value);\n        if (value && typeof value === \"string\" && value.startsWith(\"data:image\")) {\n            this.showPreview(value);\n        } else if (!value) {\n            // Only retake if we were showing a preview\n            if (this.previewImage.getVisible()) {\n                this.retakeImage();\n            }\n        }\n        return this;\n    }\n\n    public exit(): void {\n        this.stopCamera();\n        super.exit();\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/src/nz/co/siliconst/ui5/metaui/controls/CameraControl.d.ts

@@ -0,0 +1,33 @@
+declare module "nz/co/siliconst/ui5/metaui/controls/CameraControl" {
+    import BaseHardwareControl from "nz/co/siliconst/ui5/metaui/controls/BaseHardwareControl";
+    /**
+     * CameraControl
+     * Provides a live video feed to capture photos.
+     */
+    export default class CameraControl extends BaseHardwareControl {
+        static readonly renderer = "nz.co.siliconst.ui5.metaui.controls.BaseHardwareControlRenderer";
+        static readonly metadata: {
+            properties: {};
+            events: {};
+        };
+        private startBtn;
+        private vBox;
+        private captureBtn;
+        private retakeBtn;
+        private videoHtml;
+        private previewImage;
+        private videoEl;
+        private mediaStream;
+        init(): void;
+        private onVideoRendered;
+        private handleStartCameraPress;
+        private startCamera;
+        private stopCamera;
+        private captureImage;
+        private retakeImage;
+        private showPreview;
+        setValue(value: any): this;
+        exit(): void;
+    }
+}
+//# sourceMappingURL=CameraControl.d.ts.map

package/src/nz/co/siliconst/ui5/metaui/controls/CameraControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CameraControl.d.ts","sourceRoot":"../../../../../../../..","sources":["src/nz/co/siliconst/ui5/metaui/controls/CameraControl.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,mDAAmD,CAAC;IACnE,OAAO,mBAAmB,MAAM,yDAAyD,CAAC;IAQ1F;;;OAGG;IACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,mBAAmB;QAC1D,MAAM,CAAC,QAAQ,CAAC,QAAQ,qEAAqE;QAC7F,MAAM,CAAC,QAAQ,CAAC,QAAQ;;;UAGtB;QAEF,OAAO,CAAC,QAAQ,CAAU;QAC1B,OAAO,CAAC,IAAI,CAAQ;QACpB,OAAO,CAAC,UAAU,CAAU;QAC5B,OAAO,CAAC,SAAS,CAAU;QAC3B,OAAO,CAAC,SAAS,CAAQ;QACzB,OAAO,CAAC,YAAY,CAAS;QAE7B,OAAO,CAAC,OAAO,CAAiC;QAChD,OAAO,CAAC,WAAW,CAA4B;QAExC,IAAI,IAAI,IAAI;gBAwCL,eAAe;QAY7B,OAAO,CAAC,sBAAsB;gBAShB,WAAW;QAYzB,OAAO,CAAC,UAAU;QAOlB,OAAO,CAAC,YAAY;QAiBpB,OAAO,CAAC,WAAW;QAWnB,OAAO,CAAC,WAAW;QASZ,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;QAa1B,IAAI,IAAI,IAAI;KAItB;CAEA"}

package/src/nz/co/siliconst/ui5/metaui/controls/CameraControl.js

@@ -0,0 +1,2 @@
+sap.ui.define(["./BaseHardwareControl","sap/m/Button","sap/m/VBox","sap/ui/core/HTML","sap/m/MessageToast","sap/m/Image","../utils/Logger"],function(e,t,i,s,a,r,n){"use strict";function o(e){return e&&e.__esModule&&typeof e.default!=="undefined"?e.default:e}const l=o(e);const h=n["Logger"];class d extends l{static renderer="nz.co.siliconst.ui5.metaui.controls.BaseHardwareControlRenderer";static metadata={properties:{},events:{}};videoEl=null;mediaStream=null;init(){super.init();this.videoHtml=new s({content:"<video width='400' height='300' autoplay playsinline style='background-color: #000; display: none;'></video>",afterRendering:this.onVideoRendered.bind(this)}).addStyleClass("sapUiSmallMarginBottom");this.previewImage=new r({width:"400px",visible:false}).addStyleClass("sapUiSmallMarginBottom");this.startBtn=new t({icon:"sap-icon://video",text:"Start Camera",press:this.handleStartCameraPress.bind(this)});this.captureBtn=new t({icon:"sap-icon://camera",text:"Capture",visible:false,press:this.captureImage.bind(this)});this.retakeBtn=new t({icon:"sap-icon://undo",text:"Retake",visible:false,press:this.retakeImage.bind(this)});this.vBox=new i({items:[this.videoHtml,this.previewImage,this.startBtn,this.captureBtn,this.retakeBtn]});this.setAggregation("_content",this.vBox)}async onVideoRendered(){const e=this.videoHtml.getDomRef();if(!e)return;this.videoEl=e;const t=this.getValue();if(t&&typeof t==="string"&&t.startsWith("data:image")){this.showPreview(t)}}handleStartCameraPress(){this.startCamera();this.startBtn.setVisible(false);this.captureBtn.setVisible(true);if(this.videoEl){this.videoEl.style.display="block"}}async startCamera(){try{this.mediaStream=await navigator.mediaDevices.getUserMedia({video:{facingMode:"environment"}});if(this.videoEl){this.videoEl.srcObject=this.mediaStream}}catch(e){h.error("Camera access denied or unavailable",e.message,"CameraControl");a.show("Camera access denied or unavailable.")}}stopCamera(){if(this.mediaStream){this.mediaStream.getTracks().forEach(e=>e.stop());this.mediaStream=null}}captureImage(){if(!this.videoEl)return;const e=document.createElement("canvas");e.width=this.videoEl.videoWidth||400;e.height=this.videoEl.videoHeight||300;const t=e.getContext("2d");if(t){t.drawImage(this.videoEl,0,0,e.width,e.height);const i=e.toDataURL("image/jpeg",.8);this.setValueAndFire(i);this.showPreview(i);a.show("Image captured successfully.")}}retakeImage(){this.setValueAndFire(null);this.previewImage.setVisible(false);this.videoHtml.setVisible(true);this.captureBtn.setVisible(true);this.retakeBtn.setVisible(false);setTimeout(()=>this.startCamera(),100)}showPreview(e){this.stopCamera();this.videoHtml.setVisible(false);this.previewImage.setSrc(e);this.previewImage.setVisible(true);this.captureBtn.setVisible(false);this.retakeBtn.setVisible(true)}setValue(e){super.setValue(e);if(e&&typeof e==="string"&&e.startsWith("data:image")){this.showPreview(e)}else if(!e){if(this.previewImage.getVisible()){this.retakeImage()}}return this}exit(){this.stopCamera();super.exit()}}return d});
+//# sourceMappingURL=CameraControl.js.map

package/src/nz/co/siliconst/ui5/metaui/controls/CameraControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CameraControl.js","names":["BaseHardwareControl","_interopRequireDefault","__BaseHardwareControl","Logger","___utils_Logger","CameraControl","static","properties","events","videoEl","mediaStream","init","super","this","videoHtml","HTML","content","afterRendering","onVideoRendered","bind","addStyleClass","previewImage","Image","width","visible","startBtn","Button","icon","text","press","handleStartCameraPress","captureBtn","captureImage","retakeBtn","retakeImage","vBox","VBox","items","setAggregation","domRef","getDomRef","val","getValue","startsWith","showPreview","startCamera","setVisible","style","display","navigator","mediaDevices","getUserMedia","video","facingMode","srcObject","err","error","message","MessageToast","show","stopCamera","getTracks","forEach","track","stop","canvas","document","createElement","videoWidth","height","videoHeight","ctx","getContext","drawImage","dataUrl","toDataURL","setValueAndFire","setTimeout","setSrc","setValue","value","getVisible","exit"],"sources":["CameraControl.ts"],"sourcesContent":["import BaseHardwareControl from \"./BaseHardwareControl\";\nimport Button from \"sap/m/Button\";\nimport VBox from \"sap/m/VBox\";\nimport HTML from \"sap/ui/core/HTML\";\nimport MessageToast from \"sap/m/MessageToast\";\nimport Image from \"sap/m/Image\";\nimport { Logger } from \"../utils/Logger\";\n\n/**\n * CameraControl\n * Provides a live video feed to capture photos.\n */\nexport default class CameraControl extends BaseHardwareControl {\n    static readonly renderer = \"nz.co.siliconst.ui5.metaui.controls.BaseHardwareControlRenderer\";\n    static readonly metadata = {\n        properties: {},\n        events: {}\n    };\n\n    private startBtn!: Button;\n    private vBox!: VBox;\n    private captureBtn!: Button;\n    private retakeBtn!: Button;\n    private videoHtml!: HTML;\n    private previewImage!: Image;\n    \n    private videoEl: HTMLVideoElement | null = null;\n    private mediaStream: MediaStream | null = null;\n\n    public init(): void {\n        super.init();\n\n        this.videoHtml = new HTML({\n            content: \"<video width='400' height='300' autoplay playsinline style='background-color: #000; display: none;'></video>\",\n            afterRendering: this.onVideoRendered.bind(this)\n        }).addStyleClass(\"sapUiSmallMarginBottom\");\n\n        this.previewImage = new Image({\n            width: \"400px\",\n            visible: false\n        }).addStyleClass(\"sapUiSmallMarginBottom\");\n\n        this.startBtn = new Button({\n            icon: \"sap-icon://video\",\n            text: \"Start Camera\",\n            press: this.handleStartCameraPress.bind(this)\n        });\n\n        this.captureBtn = new Button({\n            icon: \"sap-icon://camera\",\n            text: \"Capture\",\n            visible: false,\n            press: this.captureImage.bind(this)\n        });\n\n        this.retakeBtn = new Button({\n            icon: \"sap-icon://undo\",\n            text: \"Retake\",\n            visible: false,\n            press: this.retakeImage.bind(this)\n        });\n\n        this.vBox = new VBox({\n            items: [this.videoHtml, this.previewImage, this.startBtn, this.captureBtn, this.retakeBtn]\n        });\n\n        this.setAggregation(\"_content\", this.vBox);\n    }\n\n    private async onVideoRendered(): void {\n        const domRef = this.videoHtml.getDomRef() as HTMLElement;\n        if (!domRef) return;\n        \n        this.videoEl = domRef as HTMLVideoElement;\n        \n        const val = this.getValue();\n        if (val && typeof val === \"string\" && val.startsWith(\"data:image\")) {\n            this.showPreview(val);\n        }\n    }\n\n    private handleStartCameraPress(): void {\n        this.startCamera();\n        this.startBtn.setVisible(false);\n        this.captureBtn.setVisible(true);\n        if (this.videoEl) {\n            this.videoEl.style.display = \"block\";\n        }\n    }\n\n    private async startCamera(): Promise<void> {\n        try {\n            this.mediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: \"environment\" } });\n            if (this.videoEl) {\n                this.videoEl.srcObject = this.mediaStream;\n            }\n        } catch (err) {\n            Logger.error(\"Camera access denied or unavailable\", (err as Error).message, \"CameraControl\");\n            MessageToast.show(\"Camera access denied or unavailable.\");\n        }\n    }\n\n    private stopCamera(): void {\n        if (this.mediaStream) {\n            this.mediaStream.getTracks().forEach(track => track.stop());\n            this.mediaStream = null;\n        }\n    }\n\n    private captureImage(): void {\n        if (!this.videoEl) return;\n        \n        const canvas = document.createElement(\"canvas\");\n        canvas.width = this.videoEl.videoWidth || 400;\n        canvas.height = this.videoEl.videoHeight || 300;\n        \n        const ctx = canvas.getContext(\"2d\");\n        if (ctx) {\n            ctx.drawImage(this.videoEl, 0, 0, canvas.width, canvas.height);\n            const dataUrl = canvas.toDataURL(\"image/jpeg\", 0.8);\n            this.setValueAndFire(dataUrl);\n            this.showPreview(dataUrl);\n            MessageToast.show(\"Image captured successfully.\");\n        }\n    }\n\n    private retakeImage(): void {\n        this.setValueAndFire(null);\n        this.previewImage.setVisible(false);\n        this.videoHtml.setVisible(true);\n        this.captureBtn.setVisible(true);\n        this.retakeBtn.setVisible(false);\n        \n        // Use a slight timeout to ensure DOM is ready before accessing stream again\n        setTimeout(() => this.startCamera(), 100);\n    }\n\n    private showPreview(dataUrl: string): void {\n        this.stopCamera();\n        this.videoHtml.setVisible(false);\n        this.previewImage.setSrc(dataUrl);\n        this.previewImage.setVisible(true);\n        this.captureBtn.setVisible(false);\n        this.retakeBtn.setVisible(true);\n    }\n\n    public setValue(value: any): this {\n        super.setValue(value);\n        if (value && typeof value === \"string\" && value.startsWith(\"data:image\")) {\n            this.showPreview(value);\n        } else if (!value) {\n            // Only retake if we were showing a preview\n            if (this.previewImage.getVisible()) {\n                this.retakeImage();\n            }\n        }\n        return this;\n    }\n\n    public exit(): void {\n        this.stopCamera();\n        super.exit();\n    }\n}\n"],"mappings":"wQAAOA,EAAmBC,EAAAC,GAAA,MAMjBC,EAAMC,EAAA,UAMA,MAAMC,UAAsBL,EACvCM,gBAA2B,kEAC3BA,gBAA2B,CACvBC,WAAY,CAAC,EACbC,OAAQ,CAAC,GAULC,QAAmC,KACnCC,YAAkC,KAEnCC,OACHC,MAAMD,OAENE,KAAKC,UAAY,IAAIC,EAAK,CACtBC,QAAS,+GACTC,eAAgBJ,KAAKK,gBAAgBC,KAAKN,QAC3CO,cAAc,0BAEjBP,KAAKQ,aAAe,IAAIC,EAAM,CAC1BC,MAAO,QACPC,QAAS,QACVJ,cAAc,0BAEjBP,KAAKY,SAAW,IAAIC,EAAO,CACvBC,KAAM,mBACNC,KAAM,eACNC,MAAOhB,KAAKiB,uBAAuBX,KAAKN,QAG5CA,KAAKkB,WAAa,IAAIL,EAAO,CACzBC,KAAM,oBACNC,KAAM,UACNJ,QAAS,MACTK,MAAOhB,KAAKmB,aAAab,KAAKN,QAGlCA,KAAKoB,UAAY,IAAIP,EAAO,CACxBC,KAAM,kBACNC,KAAM,SACNJ,QAAS,MACTK,MAAOhB,KAAKqB,YAAYf,KAAKN,QAGjCA,KAAKsB,KAAO,IAAIC,EAAK,CACjBC,MAAO,CAACxB,KAAKC,UAAWD,KAAKQ,aAAcR,KAAKY,SAAUZ,KAAKkB,WAAYlB,KAAKoB,aAGpFpB,KAAKyB,eAAe,WAAYzB,KAAKsB,KACzC,CAEA,qBAAcjB,GACV,MAAMqB,EAAS1B,KAAKC,UAAU0B,YAC9B,IAAKD,EAAQ,OAEb1B,KAAKJ,QAAU8B,EAEf,MAAME,EAAM5B,KAAK6B,WACjB,GAAID,UAAcA,IAAQ,UAAYA,EAAIE,WAAW,cAAe,CAChE9B,KAAK+B,YAAYH,EACrB,CACJ,CAEQX,yBACJjB,KAAKgC,cACLhC,KAAKY,SAASqB,WAAW,OACzBjC,KAAKkB,WAAWe,WAAW,MAC3B,GAAIjC,KAAKJ,QAAS,CACdI,KAAKJ,QAAQsC,MAAMC,QAAU,OACjC,CACJ,CAEA,iBAAcH,GACV,IACIhC,KAAKH,kBAAoBuC,UAAUC,aAAaC,aAAa,CAAEC,MAAO,CAAEC,WAAY,iBACpF,GAAIxC,KAAKJ,QAAS,CACdI,KAAKJ,QAAQ6C,UAAYzC,KAAKH,WAClC,CACJ,CAAE,MAAO6C,GACLpD,EAAOqD,MAAM,sCAAwCD,EAAcE,QAAS,iBAC5EC,EAAaC,KAAK,uCACtB,CACJ,CAEQC,aACJ,GAAI/C,KAAKH,YAAa,CAClBG,KAAKH,YAAYmD,YAAYC,QAAQC,GAASA,EAAMC,QACpDnD,KAAKH,YAAc,IACvB,CACJ,CAEQsB,eACJ,IAAKnB,KAAKJ,QAAS,OAEnB,MAAMwD,EAASC,SAASC,cAAc,UACtCF,EAAO1C,MAAQV,KAAKJ,QAAQ2D,YAAc,IAC1CH,EAAOI,OAASxD,KAAKJ,QAAQ6D,aAAe,IAE5C,MAAMC,EAAMN,EAAOO,WAAW,MAC9B,GAAID,EAAK,CACLA,EAAIE,UAAU5D,KAAKJ,QAAS,EAAG,EAAGwD,EAAO1C,MAAO0C,EAAOI,QACvD,MAAMK,EAAUT,EAAOU,UAAU,aAAc,IAC/C9D,KAAK+D,gBAAgBF,GACrB7D,KAAK+B,YAAY8B,GACjBhB,EAAaC,KAAK,+BACtB,CACJ,CAEQzB,cACJrB,KAAK+D,gBAAgB,MACrB/D,KAAKQ,aAAayB,WAAW,OAC7BjC,KAAKC,UAAUgC,WAAW,MAC1BjC,KAAKkB,WAAWe,WAAW,MAC3BjC,KAAKoB,UAAUa,WAAW,OAG1B+B,WAAW,IAAMhE,KAAKgC,cAAe,IACzC,CAEQD,YAAY8B,GAChB7D,KAAK+C,aACL/C,KAAKC,UAAUgC,WAAW,OAC1BjC,KAAKQ,aAAayD,OAAOJ,GACzB7D,KAAKQ,aAAayB,WAAW,MAC7BjC,KAAKkB,WAAWe,WAAW,OAC3BjC,KAAKoB,UAAUa,WAAW,KAC9B,CAEOiC,SAASC,GACZpE,MAAMmE,SAASC,GACf,GAAIA,UAAgBA,IAAU,UAAYA,EAAMrC,WAAW,cAAe,CACtE9B,KAAK+B,YAAYoC,EACrB,MAAO,IAAKA,EAAO,CAEf,GAAInE,KAAKQ,aAAa4D,aAAc,CAChCpE,KAAKqB,aACT,CACJ,CACA,OAAOrB,IACX,CAEOqE,OACHrE,KAAK+C,aACLhD,MAAMsE,MACV,EACH,OAAA7E,CAAA","ignoreList":[]}

package/src/nz/co/siliconst/ui5/metaui/controls/CameraControl.ts

@@ -0,0 +1,164 @@
+import BaseHardwareControl from "./BaseHardwareControl";
+import Button from "sap/m/Button";
+import VBox from "sap/m/VBox";
+import HTML from "sap/ui/core/HTML";
+import MessageToast from "sap/m/MessageToast";
+import Image from "sap/m/Image";
+import { Logger } from "../utils/Logger";
+
+/**
+ * CameraControl
+ * Provides a live video feed to capture photos.
+ */
+export default class CameraControl extends BaseHardwareControl {
+    static readonly renderer = "nz.co.siliconst.ui5.metaui.controls.BaseHardwareControlRenderer";
+    static readonly metadata = {
+        properties: {},
+        events: {}
+    };
+
+    private startBtn!: Button;
+    private vBox!: VBox;
+    private captureBtn!: Button;
+    private retakeBtn!: Button;
+    private videoHtml!: HTML;
+    private previewImage!: Image;
+    
+    private videoEl: HTMLVideoElement | null = null;
+    private mediaStream: MediaStream | null = null;
+
+    public init(): void {
+        super.init();
+
+        this.videoHtml = new HTML({
+            content: "<video width='400' height='300' autoplay playsinline style='background-color: #000; display: none;'></video>",
+            afterRendering: this.onVideoRendered.bind(this)
+        }).addStyleClass("sapUiSmallMarginBottom");
+
+        this.previewImage = new Image({
+            width: "400px",
+            visible: false
+        }).addStyleClass("sapUiSmallMarginBottom");
+
+        this.startBtn = new Button({
+            icon: "sap-icon://video",
+            text: "Start Camera",
+            press: this.handleStartCameraPress.bind(this)
+        });
+
+        this.captureBtn = new Button({
+            icon: "sap-icon://camera",
+            text: "Capture",
+            visible: false,
+            press: this.captureImage.bind(this)
+        });
+
+        this.retakeBtn = new Button({
+            icon: "sap-icon://undo",
+            text: "Retake",
+            visible: false,
+            press: this.retakeImage.bind(this)
+        });
+
+        this.vBox = new VBox({
+            items: [this.videoHtml, this.previewImage, this.startBtn, this.captureBtn, this.retakeBtn]
+        });
+
+        this.setAggregation("_content", this.vBox);
+    }
+
+    private async onVideoRendered(): void {
+        const domRef = this.videoHtml.getDomRef() as HTMLElement;
+        if (!domRef) return;
+        
+        this.videoEl = domRef as HTMLVideoElement;
+        
+        const val = this.getValue();
+        if (val && typeof val === "string" && val.startsWith("data:image")) {
+            this.showPreview(val);
+        }
+    }
+
+    private handleStartCameraPress(): void {
+        this.startCamera();
+        this.startBtn.setVisible(false);
+        this.captureBtn.setVisible(true);
+        if (this.videoEl) {
+            this.videoEl.style.display = "block";
+        }
+    }
+
+    private async startCamera(): Promise<void> {
+        try {
+            this.mediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
+            if (this.videoEl) {
+                this.videoEl.srcObject = this.mediaStream;
+            }
+        } catch (err) {
+            Logger.error("Camera access denied or unavailable", (err as Error).message, "CameraControl");
+            MessageToast.show("Camera access denied or unavailable.");
+        }
+    }
+
+    private stopCamera(): void {
+        if (this.mediaStream) {
+            this.mediaStream.getTracks().forEach(track => track.stop());
+            this.mediaStream = null;
+        }
+    }
+
+    private captureImage(): void {
+        if (!this.videoEl) return;
+        
+        const canvas = document.createElement("canvas");
+        canvas.width = this.videoEl.videoWidth || 400;
+        canvas.height = this.videoEl.videoHeight || 300;
+        
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+            ctx.drawImage(this.videoEl, 0, 0, canvas.width, canvas.height);
+            const dataUrl = canvas.toDataURL("image/jpeg", 0.8);
+            this.setValueAndFire(dataUrl);
+            this.showPreview(dataUrl);
+            MessageToast.show("Image captured successfully.");
+        }
+    }
+
+    private retakeImage(): void {
+        this.setValueAndFire(null);
+        this.previewImage.setVisible(false);
+        this.videoHtml.setVisible(true);
+        this.captureBtn.setVisible(true);
+        this.retakeBtn.setVisible(false);
+        
+        // Use a slight timeout to ensure DOM is ready before accessing stream again
+        setTimeout(() => this.startCamera(), 100);
+    }
+
+    private showPreview(dataUrl: string): void {
+        this.stopCamera();
+        this.videoHtml.setVisible(false);
+        this.previewImage.setSrc(dataUrl);
+        this.previewImage.setVisible(true);
+        this.captureBtn.setVisible(false);
+        this.retakeBtn.setVisible(true);
+    }
+
+    public setValue(value: any): this {
+        super.setValue(value);
+        if (value && typeof value === "string" && value.startsWith("data:image")) {
+            this.showPreview(value);
+        } else if (!value) {
+            // Only retake if we were showing a preview
+            if (this.previewImage.getVisible()) {
+                this.retakeImage();
+            }
+        }
+        return this;
+    }
+
+    public exit(): void {
+        this.stopCamera();
+        super.exit();
+    }
+}