regulaforensics · ArtsiomTsybulko · Jun 17, 2025 · Jun 17, 2025
diff --git a/controller/index.html → controller/common/index.html b/controller/index.html → controller/common/index.html
@@ -45,7 +45,6 @@
         <p><span>Status: </span><span id="status">service disconnected</span></p>
     </div>
 </div>
-<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@2.6.1/dist/main.js"></script>
-<script type="module" src="./index.js"></script>
+<script type="module" src="index.js"></script>
 </body>
 </html>
diff --git a/controller/index.js → controller/common/index.js b/controller/index.js → controller/common/index.js
@@ -1,7 +1,6 @@
-const { DocumentReaderController } = window.Regula;
-const service = new DocumentReaderController();
+import { DocumentReaderController } from '@regulaforensics/vp-frontend-document-device';
 
-service.serviceUrl = 'SERVICE_URL';
+const service = new DocumentReaderController('SERVICE_URL')
 
 const connectButton = document.getElementById('connect');
 const disconnectButton = document.getElementById('disconnect');
@@ -21,7 +20,7 @@ const responseListener = async () => {
 };
 
 const autoScanButtonHandler = async () => {
-    await service.setProperty('AutoScan', !autoScan);
+    await service.setPropertyValue('AutoScan', !autoScan);
 
     autoScan = !autoScan;
     autoScanButton.textContent = autoScan ? 'Auto-scan: on' : 'Auto-scan: off';
@@ -47,13 +46,13 @@ const connectButtonHandler = async () => {
             dateFormat: 'yyyy.MM.dd',
         },
     };
-    await service.setProperty('processingParams', JSON.stringify(processParam));
+    await service.setPropertyValue('processingParams', JSON.stringify(processParam));
 
     toggleButtons(true);
 };
 
 const disconnectButtonHandler = () => {
-    service.disconnect();
+    service.stop();
     service.hubProxy?.off('OnProcessingFinished', responseListener);
 
     toggleButtons(false);

diff --git a/controller/package.json → controller/common/package.json b/controller/package.json → controller/common/package.json
@@ -7,9 +7,9 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@regulaforensics/vp-frontend-document-components": "*"
+    "@regulaforensics/vp-frontend-document-device": "*"
   },
   "devDependencies": {
-    "vite": "^6.2.0"
+    "vite": "^6.3.5"
   }
 }
diff --git a/controller/rfid/index.html b/controller/rfid/index.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>My app</title>
+</head>
+<style>
+    .container {
+        display: flex;
+        position: absolute;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        justify-content: center;
+        align-items: center;
+        font-family: Arial, sans-serif;
+    }
+
+    button {
+        padding: 10px 30px;
+        color: white;
+        font-size: 16px;
+        border-radius: 2px;
+        background-color: #bd7dff;
+        border: 1px solid #bd7dff;
+        cursor: pointer;
+    }
+
+    button:disabled {
+        background-color: #7c7c7c;
+        border: 1px solid #7c7c7c;
+    }
+</style>
+<body>
+<div class="container">
+    <div class="buttons">
+        <button id="process" disabled>Process</button>
+        <button id="connect">Connect</button>
+        <button id="disconnect" disabled>Disconnect</button>
+    </div>
+    <div class="status">
+        <p><span>Status: </span><span id="status">service disconnected</span></p>
+    </div>
+</div>
+<script type="module" src="index.js"></script>
+</body>
+</html>
diff --git a/controller/rfid/index.js b/controller/rfid/index.js
@@ -0,0 +1,56 @@
+import { DocumentReaderController } from '@regulaforensics/vp-frontend-document-device';
+
+const service = new DocumentReaderController('SERVICE_URL')
+
+const connectButton = document.getElementById('connect');
+const disconnectButton = document.getElementById('disconnect');
+const processButton = document.getElementById('process');
+const status = document.getElementById('status');
+
+const responseListener = async () => {
+    const response = await service.getLastResults();
+
+    processButton.removeAttribute('disabled');
+    status.textContent = 'You can see the result in the console';
+
+    console.log(response);
+};
+
+const toggleButtons = (connected) => {
+    connectButton.disabled = connected;
+    disconnectButton.disabled = !connected;
+    processButton.disabled = !connected;
+    status.textContent = connected ? 'Service connected' : 'Service disconnected';
+};
+
+const connectButtonHandler = async () => {
+    status.textContent = 'Connecting...';
+
+    await service.initRegulaReader();
+    service.hubProxy?.on('OnProcessingFinished', responseListener);
+
+    // If you have multiple RFID readers, you can choose the one you need, just specify its index.
+    // await service.current.setPropertyValue('ActiveRFIDDeviceIdx', 0);
+
+    toggleButtons(true);
+};
+
+const disconnectButtonHandler = () => {
+    service.stop();
+    service.hubProxy?.off('OnProcessingFinished', responseListener);
+
+    toggleButtons(false);
+};
+
+const processButtonHandler = async () => {
+    // The MRZ of the document must be installed to read the RFID data. Replace DOCUMENT_MRZ with the real MRZ string.
+    await service.setPropertyValue('RFIDMRZ', 'DOCUMENT_MRZ');
+    await service.waitAndReadRFID();
+
+    processButton.disabled = true;
+    status.textContent = 'Processing...';
+};
+
+connectButton.addEventListener('click', connectButtonHandler);
+disconnectButton.addEventListener('click', disconnectButtonHandler);
+processButton.addEventListener('click', processButtonHandler);
diff --git a/controller/rfid/package.json b/controller/rfid/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "sample",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "serve": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@regulaforensics/vp-frontend-document-device": "*"
+  },
+  "devDependencies": {
+    "vite": "^6.3.5"
+  }
+}