@regulaforensics/document-reader 8.2.186-beta → 8.2.204-beta

package/RNDocumentReader.podspec

@@ -5,7 +5,7 @@ source = File.join(__dir__, 'ios')
 
 Pod::Spec.new do |s|
   s.name         = 'RNDocumentReader'
-  s.version      = '8.2.186-beta'
+  s.version      = '8.2.204-beta'
   s.summary      = package['description']
   s.license      = package['license']
 
@@ -16,6 +16,6 @@ Pod::Spec.new do |s|
   s.ios.deployment_target = '13.0'
   s.source_files = 'ios/**/*.{h,m}'
   s.exclude_files = [ 'ios/CVDDocumentReader.h', 'ios/CVDDocumentReader.m' ]
-  s.dependency 'DocumentReader', '8.1.4772'
+  s.dependency 'DocumentReaderStage', '8.2.4879'
   s.dependency 'React'
 end

package/android/build.gradle

@@ -20,7 +20,7 @@ android {
 rootProject.allprojects {
     repositories {
         maven {
-            url "https://maven.regulaforensics.com/RegulaDocumentReader"
+            url "https://maven.regulaforensics.com/RegulaDocumentReader/Stage"
         }
     }
 }
@@ -29,7 +29,7 @@ dependencies {
     //noinspection GradleDynamicVersion
     implementation 'com.facebook.react:react-native:+'
     //noinspection GradleDependency
-    implementation('com.regula.documentreader:api:8.1.11551'){
+    implementation('com.regula.documentreader:api:8.2.11640'){
         transitive = true
     }
 }

package/android/cordova.gradle

@@ -1,12 +1,12 @@
 repositories {
     maven {
-        url "https://maven.regulaforensics.com/RegulaDocumentReader"
+        url "https://maven.regulaforensics.com/RegulaDocumentReader/Stage"
     }
 }
 
 dependencies {
     //noinspection GradleDependency
-    implementation('com.regula.documentreader:api:8.1.11551'){
+    implementation('com.regula.documentreader:api:8.2.11640'){
         transitive = true
     }
 }

package/android/src/main/java/com/regula/plugin/documentreader/Config.kt

@@ -316,6 +316,7 @@ fun setCustomization(customization: ParamsCustomization, opts: JSONObject) = opt
         "torchButtonOnImage" -> editor.setTorchImageOn(v.toDrawable())
         "torchButtonOffImage" -> editor.setTorchImageOff(v.toDrawable())
         "livenessAnimationImage" -> editor.setLivenessAnimationImage(v.toDrawable())
+        "multipageButtonImage" -> editor.setMultipageButtonDrawable(v.toDrawable())
         "helpAnimationImageMatrix" -> editor.setHelpAnimationImageMatrix(matrixFromJSON(v as JSONArray?)).setHelpAnimationImageScaleType(ImageView.ScaleType.MATRIX)
         "multipageAnimationFrontImageMatrix" -> editor.setMultipageAnimationFrontImageMatrix(matrixFromJSON(v as JSONArray?)).setMultipageAnimationFrontImageScaleType(ImageView.ScaleType.MATRIX)
         "multipageAnimationBackImageMatrix" -> editor.setMultipageAnimationBackImageMatrix(matrixFromJSON(v as JSONArray?)).setMultipageAnimationBackImageScaleType(ImageView.ScaleType.MATRIX)
@@ -401,6 +402,7 @@ fun getCustomization(customization: ParamsCustomization) = mapOf(
     "torchButtonOnImage" to customization.torchImageOnDrawable.toBase64(),
     "torchButtonOffImage" to customization.torchImageOffDrawable.toBase64(),
     "livenessAnimationImage" to customization.livenessAnimationImage.toBase64(),
+    "multipageButtonImage" to customization.multipageButtonDrawable.toBase64(),
     "helpAnimationImageMatrix" to generateMatrix(customization.helpAnimationImageMatrix),
     "multipageAnimationFrontImageMatrix" to generateMatrix(customization.multipageAnimationFrontImageMatrix),
     "multipageAnimationBackImageMatrix" to generateMatrix(customization.multipageAnimationBackImageMatrix),

package/android/src/main/java/com/regula/plugin/documentreader/Main.kt

@@ -55,6 +55,8 @@ fun methodCall(method: String, callback: (Any?) -> Unit): Any = when (method) {
     "setTenant" -> setTenant(argsNullable(0))
     "getEnv" -> getEnv(callback)
     "setEnv" -> setEnv(argsNullable(0))
+    "getLocale" -> getLocale(callback)
+    "setLocale" -> setLocale(argsNullable(0))
     "getFunctionality" -> getFunctionality(callback)
     "setFunctionality" -> setFunctionality(args(0))
     "getProcessParams" -> getProcessParams(callback)
@@ -160,6 +162,10 @@ fun getEnv(callback: Callback) = callback(Instance().env)
 
 fun setEnv(tag: String?) = tag.let { Instance().env = it }
 
+fun getLocale(callback: Callback) = callback(Instance().locale)
+
+fun setLocale(locale: String?) = locale.let { Instance().locale = it }
+
 fun getFunctionality(callback: Callback) = callback(getFunctionality(Instance().functionality()))
 
 fun setFunctionality(functionality: JSONObject) = setFunctionality(Instance().functionality(), functionality)

package/examples/capacitor/package.json

@@ -6,7 +6,7 @@
     "android": "scripts/android.sh"
   },
   "dependencies": {
-    "@regulaforensics/document-reader": "8.2.186-beta",
+    "@regulaforensics/document-reader": "8.2.204-beta",
     "@regulaforensics/document-reader-core-fullauthrfid": "8.2.8-beta",
     "@regulaforensics/document-reader-btdevice": "8.2.8-beta",
     "@awesome-cordova-plugins/file": "6.6.0",

package/examples/capacitor/src/extra/bt_device.tsx

@@ -13,14 +13,14 @@ export function setupBTDevice() {
 async function connect() {
   setStatus("Searching for devices...")
   if (await DocumentReader.instance.connectBluetoothDevice(btDeviceName)) {
-    await initializeBTDevice()
+    await initialize()
     DocumentReader.instance.functionality.useAuthenticator = true
     document.getElementById("bt-device").style.display = "none"
   } else
     setStatus("Failed to connect")
 }
 
-async function initializeBTDevice() {
+async function initialize() {
   setStatus("Initializing...")
 
   var initConfig = InitConfig.withBleDevice()

package/examples/capacitor/src/extra/custom_rfid.tsx

@@ -1,31 +1,13 @@
-import { DocReaderAction, DocumentReader, Results, RFIDConfig, RFIDDataFileType, RFIDErrorCodes, RFIDNotificationCodes } from "@regulaforensics/document-reader"
-import { displayResults, handleCompletion, setStatus } from "../main"
+import { DocReaderAction, DocumentReader, RFIDConfig, RFIDDataFileType, RFIDNotificationCodes } from "@regulaforensics/document-reader"
+import { displayResults, setStatus } from "../main"
 
-export enum RfidOption {
-    Basic,
-    Advanced,
-    SelfHostedUI
-}
-
-export const rfidOption: RfidOption = RfidOption.Basic
-
-export function advancedRfid() {
-    var config = new RFIDConfig(handleCompletion)
-
-    config.onChipDetected = () => console.log("Chip detected, reading rfid.")
-    config.onRetryReadChip = async (error) => console.log(await RFIDErrorCodes.getTranslation(error.code) + ". Retrying...")
-
-    DocumentReader.instance.rfid(config)
-}
+export const useRfidSelfHostedUI = false
 
-export function selfHostedUIRfid() {
-    var config = RFIDConfig.withoutUI((action, results, error) => {
-        if (DocReaderAction.stopped(action)) finish(results)
-        if (error != null) {
-            setStatus("Try again")
-            setDescription("Error" + error.message)
-            console.log(error.code + ": " + error.message)
-        }
+export function rfidSelfHostedUI() {
+    var config = RFIDConfig.withoutUI((action, results, _) => {
+        if (DocReaderAction.stopped(action)) stop()
+        if (DocReaderAction.finished(action)) displayResults(results)
+        if (DocReaderAction.interrupted(action)) setStatus("Error reading RFID")
     })
 
     config.onProgress = async (notification) => {
@@ -40,35 +22,40 @@ export function selfHostedUIRfid() {
     DocumentReader.instance.rfid(config)
 }
 
-function finish(results: Results) {
-    DocumentReader.instance.stopRFIDReader()
-    setShowing(false)
-    displayResults(results)
-}
-
 function setup() {
-    document.getElementById("cancel-rfid").onclick = () => finish(null)
-
     setStatus("Reading RFID")
     setDescription("Place your phone on top of the NFC tag")
-    setProgress(0)
+    setProgress(-1)
+    currentProgress = -1
     setShowing(true)
+    document.getElementById("cancel-rfid").onclick = () => stop()
 }
 
-var setDescription = (data: string) => document.getElementById("rfid-description").innerHTML = data
-var setProgress = (next: number) => {
+function stop() {
+    DocumentReader.instance.stopRFIDReader()
+    displayResults(null)
+    setShowing(false)
+}
+
+function setDescription(data) {
+    document.getElementById("rfid-description").innerHTML = data
+}
+
+var currentProgress = -1
+function setProgress(next) {
     var progress = document.getElementById("progress")
-    var previous = parseInt(progress.style.width.substring(0, progress.style.width.length - 1))
     // make progress bar look better
-    if (next <= 0) return // ignore idle 0s, leave progress at 100 while its not moving
-    if (next < previous) next = 0 // move to 0 if progress finaly started moving
+    if (next == 0) return // ignore idle 0s, leave progress at 100 while its not moving
+    if (next < currentProgress) next = 0 // move to 0 if progress finaly started moving
     if (next >= 95) next = 100 // rfid never returns 100 and it looks ugly, fix it
-    if (next < previous) progress.style.transition = 'none' // instantly reset progress
+    if (next < currentProgress) progress.style.transition = 'none' // instantly reset progress
     else progress.style.transition = 'width 0.5s' // smoothly increase progress
 
     progress.style.width = next + "%"
+    currentProgress = next
 }
-var setShowing = (data: boolean) => {
+
+function setShowing(data) {
     document.getElementById("main").style.display = data ? "none" : "flex"
     document.getElementById("custom-rfid").style.display = data ? "flex" : "none"
 }

package/examples/capacitor/src/main.tsx

@@ -1,20 +1,21 @@
-import { setupIonicReact } from '@ionic/react'
 import '@ionic/react/css/core.css'
 import './main.css'
-import { File } from '@awesome-cordova-plugins/file'
-import { DocumentReader, DocReaderException, InitConfig, DocReaderAction, Results, FieldType, GraphicFieldType, ResultType, RFIDConfig, ScannerConfig, Scenario, DocReaderScenario, RecognizeConfig } from '@regulaforensics/document-reader'
+import { setupIonicReact } from '@ionic/react'
 import { StatusBar, Style } from '@capacitor/status-bar'
-import { setupBTDevice, useBtDevice } from './extra/bt_device'
-import { advancedRfid, rfidOption, RfidOption, selfHostedUIRfid } from './extra/custom_rfid'
+import { File } from '@awesome-cordova-plugins/file'
 import { Camera, DestinationType, MediaType, PictureSourceType } from '@awesome-cordova-plugins/camera'
 
-const documentReader = DocumentReader.instance
-var selectedScenario = Scenario.MRZ
+import { DocumentReader, DocReaderAction, FieldType, GraphicFieldType, InitConfig, RecognizeConfig, ResultType, RFIDConfig, ScannerConfig, Scenario } from '@regulaforensics/document-reader'
+import { setupBTDevice, useBtDevice } from './extra/bt_device'
+import { useRfidSelfHostedUI, rfidSelfHostedUI } from './extra/custom_rfid'
+
+var documentReader = DocumentReader.instance
+var selectedScenario
 var doRfid = false
 var isReadingRfid = false
 
 async function init() {
-  if (!await initializeReader()) return
+  if (!await initialize()) return
   setScenarios(documentReader.availableScenarios)
   setCanRfid(await documentReader.isRFIDAvailableForUse())
   setStatus("Ready")
@@ -31,11 +32,9 @@ async function scan() {
 
 async function recognize() {
   if (!await documentReader.isReady()) return
-  var image = await Camera.getPicture({
-    destinationType: DestinationType.DATA_URL,
-    mediaType: MediaType.PICTURE,
-    sourceType: PictureSourceType.PHOTOLIBRARY
-  })
+  var image = await pickImage()
+  if (image == null) return
+
   clearResults()
   documentReader.recognize(
     RecognizeConfig.withScenario(selectedScenario, { image: image }),
@@ -43,7 +42,7 @@ async function recognize() {
   )
 }
 
-export function handleCompletion(action: DocReaderAction, results?: Results, error?: DocReaderException) {
+export function handleCompletion(action, results, error) {
   handleException(error)
   if (DocReaderAction.stopped(action) && !shouldRfid(results)) {
     displayResults(results)
@@ -53,7 +52,7 @@ export function handleCompletion(action: DocReaderAction, results?: Results, err
   }
 }
 
-export async function displayResults(results?: Results) {
+export async function displayResults(results) {
   isReadingRfid = false
   clearResults()
   if (results == null) return
@@ -68,11 +67,17 @@ export async function displayResults(results?: Results) {
   setDocImage(docImage)
 }
 
-var readRfid = () => documentReader.rfid(new RFIDConfig(handleCompletion))
+var readRfid = () => {
+  documentReader.rfid(new RFIDConfig(handleCompletion))
+}
 
-var shouldRfid = (results?: Results) => doRfid && !isReadingRfid && results != null && results.chipPage != 0
+function shouldRfid(results) {
+  return doRfid &&
+    !isReadingRfid &&
+    results != null && results.chipPage != 0
+}
 
-async function initializeReader() {
+async function initialize() {
   setStatus("Initializing...")
 
   var license = await loadAsset("regula.license")
@@ -83,14 +88,51 @@ async function initializeReader() {
   return success
 }
 
-export function handleException(error: DocReaderException) {
+export function handleException(error) {
   if (error != null) {
     setStatus(error.message)
     console.log(error.code + ": " + error.message)
   }
 }
 
-// --------------------------------------------------------------------------------------------------------------------
+// ui --------------------------------------------------------------------------------------------------------------------
+
+export function setStatus(data) {
+  if (data != null)
+    document.getElementById("status").innerHTML = data
+}
+
+function setPortrait(data) {
+  if (data != null)
+    portraitUIImage.src = "data:image/png;base64," + data
+}
+
+function setDocImage(data) {
+  if (data != null)
+    documentUIImage.src = "data:image/png;base64," + data
+}
+
+function clearResults() {
+  setStatus("Ready")
+  portraitUIImage.src = "images/portrait.png"
+  documentUIImage.src = "images/document.png"
+}
+
+function setCanRfid(data) {
+  var checkbox // implicitly any, since cordova sample is pure js
+  checkbox = document.getElementById('rfid-checkbox')
+  var checkboxDescription = document.getElementById("rfid-checkbox-description")
+  if (data) {
+    checkbox.disabled = false
+    checkboxDescription.innerHTML = "Process rfid reading"
+    checkboxDescription.onclick = () => {
+      doRfid = !doRfid
+      checkbox.checked = doRfid
+    }
+  }
+}
+
+// not equal --------------------------------------------------------------------------------------------------------------------
 
 async function loadAsset(path: string): Promise<string> {
   var dir = await File.resolveDirectoryUrl(File.applicationDirectory + "public/assets")
@@ -105,36 +147,39 @@ async function loadAsset(path: string): Promise<string> {
   return result
 }
 
-var documentUIImage: HTMLImageElement
-var portraitUIImage: HTMLImageElement
+async function pickImage(): Promise<string | null> {
+  return await Camera.getPicture({
+    destinationType: DestinationType.DATA_URL,
+    mediaType: MediaType.PICTURE,
+    sourceType: PictureSourceType.PHOTOLIBRARY
+  })
+}
+
+var documentUIImage
+var portraitUIImage
 document.addEventListener('deviceready', () => {
-  documentUIImage = document.getElementById("document-image") as HTMLImageElement
-  portraitUIImage = document.getElementById("portrait-image") as HTMLImageElement
+  documentUIImage = document.getElementById("document-image")
+  portraitUIImage = document.getElementById("portrait-image")
   document.getElementById("scan").onclick = () => scan()
   document.getElementById("recognize").onclick = () => recognize()
 
-  // btDevice
+  // custom rfid
+  if (useRfidSelfHostedUI) readRfid = () => rfidSelfHostedUI()
+
+  // bt device
   if (!useBtDevice) init()
   else setupBTDevice()
-
-  // rfid
-  if (rfidOption == RfidOption.Advanced) readRfid = () => advancedRfid()
-  if (rfidOption == RfidOption.SelfHostedUI) readRfid = () => selfHostedUIRfid()
 })
 
-export var setStatus = (data: string) => { if (data != null) document.getElementById("status").innerHTML = data }
-var setPortrait = (data: string) => { if (data != null) portraitUIImage.src = "data:image/png;base64," + data }
-var setDocImage = (data: string) => { if (data != null) documentUIImage.src = "data:image/png;base64," + data }
-var clearResults = () => {
-  setStatus("Ready")
-  portraitUIImage.src = "images/portrait.png"
-  documentUIImage.src = "images/document.png"
-}
-var setScenarios = (data: DocReaderScenario[]) => {
+// not resolved --------------------------------------------------------------------------------------------------------------------
+
+function setScenarios(data) {
+  selectedScenario = Scenario.MRZ
   const scenariosContainer = document.getElementById("scenarios")
   data.forEach(scenario => scenariosContainer.appendChild(createScenarioElement(scenario)))
 }
-var createScenarioElement = (scenario: DocReaderScenario) => {
+
+function createScenarioElement(scenario) {
   const div = document.createElement('div')
   div.className = 'row radio'
 
@@ -149,7 +194,7 @@ var createScenarioElement = (scenario: DocReaderScenario) => {
   span.style.paddingLeft = '5px'
   span.textContent = scenario.caption
 
-  input.onclick = () => selectedScenario = scenario.name as Scenario
+  input.onclick = () => selectedScenario = scenario.name
   span.onclick = () => input.click()
 
   div.appendChild(input)
@@ -157,19 +202,6 @@ var createScenarioElement = (scenario: DocReaderScenario) => {
 
   return div
 }
-var setCanRfid = (data: boolean) => {
-  var checkbox = document.getElementById('rfid-checkbox') as HTMLInputElement
-  var checkboxDescription = document.getElementById("rfid-checkbox-description")
-  if (data) {
-    checkbox.disabled = false
-    checkbox.onclick = () => {
-      doRfid = !doRfid
-      checkbox.checked = doRfid
-    }
-    checkboxDescription.innerHTML = "Process rfid reading"
-    checkboxDescription.onclick = () => checkbox.click()
-  }
-}
 
 setupIonicReact()
 StatusBar.setStyle({ style: Style.Light })

package/examples/cordova/config.xml

@@ -3,11 +3,12 @@
     <name>DocumentReader</name>
     <platform name="android">
         <preference name="orientation" value="portrait" />
-        <preference name="GradlePluginKotlinEnabled" value="true" />
         <preference name="android-minSdkVersion" value="24" />
         <preference name="android-targetSdkVersion" value="35" />
+        <preference name="GradlePluginKotlinEnabled" value="true" />
         <config-file parent="/*" target="AndroidManifest.xml">
-            <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+            <uses-permission android:name="android.permission.NFC" />
+            <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
         </config-file>
         <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
             <application android:usesCleartextTraffic="true" />

package/examples/cordova/package.json

@@ -6,7 +6,7 @@
     "android": "scripts/android.sh"
   },
   "dependencies": {
-    "@regulaforensics/document-reader": "8.2.186-beta",
+    "@regulaforensics/document-reader": "8.2.204-beta",
     "@regulaforensics/document-reader-core-fullauthrfid": "8.2.8-beta",
     "@regulaforensics/document-reader-btdevice": "8.2.8-beta",
     "cordova-ios": "7.1.1",

package/examples/cordova/www/index.html

@@ -1,21 +1,6 @@
 <meta name="viewport" content="initial-scale=1, user-scalable=no, viewport-fit=cover">
 <link rel="stylesheet" href="src/main.css">
-<script src="cordova.js"></script>
-<script src="src/main.js"></script>
-
 <div id="content" style="height: 100%"></div>
 
-<script>
-    document.addEventListener('deviceready', () => {
-        window.resolveLocalFileSystemURL(cordova.file.applicationDirectory + 'www/src/main.html', (fileEntry) => {
-            fileEntry.file((file) => {
-                const reader = new FileReader()
-                reader.onloadend = function () {
-                    document.getElementById('content').innerHTML = this.result
-                    document.dispatchEvent(new CustomEvent("ready"))
-                }
-                reader.readAsText(file)
-            })
-        })
-    })
-</script>
+<script src="cordova.js"></script>
+<script src="index.js"></script>

package/examples/cordova/www/index.js

@@ -0,0 +1,40 @@
+document.addEventListener('deviceready', () => {
+    // imports
+    window.DocumentReader = DocumentReaderPlugin.DocumentReader
+    DocReaderAction = DocumentReaderPlugin.DocReaderAction
+    FieldType = DocumentReaderPlugin.FieldType
+    GraphicFieldType = DocumentReaderPlugin.GraphicFieldType
+    InitConfig = DocumentReaderPlugin.InitConfig
+    RecognizeConfig = DocumentReaderPlugin.RecognizeConfig
+    ResultType = DocumentReaderPlugin.ResultType
+    RFIDConfig = DocumentReaderPlugin.RFIDConfig
+    ScannerConfig = DocumentReaderPlugin.ScannerConfig
+    Scenario = DocumentReaderPlugin.Scenario
+    RFIDDataFileType = DocumentReaderPlugin.RFIDDataFileType
+    RFIDNotificationCodes = DocumentReaderPlugin.RFIDNotificationCodes
+
+    window.resolveLocalFileSystemURL(cordova.file.applicationDirectory + 'www/src/main.html', (fileEntry) => {
+        fileEntry.file((file) => {
+            const reader = new FileReader()
+            reader.onloadend = async function () {
+                await loadModule('src/main.js')
+                await loadModule('src/extra/bt_device.js')
+                await loadModule('src/extra/custom_rfid.js')
+
+                document.getElementById('content').innerHTML = this.result
+                document.dispatchEvent(new CustomEvent("ready"))
+            }
+            reader.readAsText(file)
+        })
+    })
+})
+
+function loadModule(src) {
+    return new Promise((resolve) => {
+        const script = document.createElement('script');
+        script.type = 'module';
+        script.src = src;
+        script.onload = resolve;
+        document.body.appendChild(script);
+    });
+}

package/examples/cordova/www/src/extra/bt_device.js

@@ -0,0 +1,31 @@
+import { handleException, setStatus } from "../main.js"
+
+export const useBtDevice = false
+const btDeviceName = "Regula 0000"
+
+export function setupBTDevice() {
+  document.getElementById("bt-device").style.display = "flex"
+  document.getElementById("connect").onclick = () => connect()
+  setStatus("Connect to a bluetooth device")
+}
+
+async function connect() {
+  setStatus("Searching for devices...")
+  if (await DocumentReader.instance.connectBluetoothDevice(btDeviceName)) {
+    await initialize()
+    DocumentReader.instance.functionality.useAuthenticator = true
+    document.getElementById("bt-device").style.display = "none"
+  } else
+    setStatus("Failed to connect")
+}
+
+async function initialize() {
+  setStatus("Initializing...")
+
+  var initConfig = InitConfig.withBleDevice()
+  initConfig.delayedNNLoad = true
+  var [success, error] = await DocumentReader.instance.initialize(initConfig)
+
+  handleException(error)
+  return success
+}

package/examples/cordova/www/src/extra/custom_rfid.js

@@ -0,0 +1,60 @@
+import { displayResults, setStatus } from "../main.js"
+
+export const useRfidSelfHostedUI = false
+
+export function rfidSelfHostedUI() {
+    var config = RFIDConfig.withoutUI((action, results, _) => {
+        if (DocReaderAction.stopped(action)) stop()
+        if (DocReaderAction.finished(action)) displayResults(results)
+        if (DocReaderAction.interrupted(action)) setStatus("Error reading RFID")
+    })
+
+    config.onProgress = async (notification) => {
+        if (notification.progress == 1) return
+        if (notification.notificationCode == RFIDNotificationCodes.PCSC_READING_DATAGROUP)
+            setDescription(await RFIDDataFileType.getTranslation(notification.dataFileType))
+        setStatus("Reading RFID")
+        setProgress(notification.progress)
+    }
+
+    setup()
+    DocumentReader.instance.rfid(config)
+}
+
+function setup() {
+    setStatus("Reading RFID")
+    setDescription("Place your phone on top of the NFC tag")
+    setProgress(-1)
+    currentProgress = -1
+    setShowing(true)
+    document.getElementById("cancel-rfid").onclick = () => stop()
+}
+
+function stop() {
+    DocumentReader.instance.stopRFIDReader()
+    displayResults(null)
+    setShowing(false)
+}
+
+function setDescription(data) {
+    document.getElementById("rfid-description").innerHTML = data
+}
+
+var currentProgress = -1
+function setProgress(next) {
+    var progress = document.getElementById("progress")
+    // make progress bar look better
+    if (next == 0) return // ignore idle 0s, leave progress at 100 while its not moving
+    if (next < currentProgress) next = 0 // move to 0 if progress finaly started moving
+    if (next >= 95) next = 100 // rfid never returns 100 and it looks ugly, fix it
+    if (next < currentProgress) progress.style.transition = 'none' // instantly reset progress
+    else progress.style.transition = 'width 0.5s' // smoothly increase progress
+
+    progress.style.width = next + "%"
+    currentProgress = next
+}
+
+function setShowing(data) {
+    document.getElementById("main").style.display = data ? "none" : "flex"
+    document.getElementById("custom-rfid").style.display = data ? "flex" : "none"
+}

package/examples/cordova/www/src/main.css

@@ -88,10 +88,12 @@ body {
     top: 1px;
 }
 
+.radio {
+    align-items: baseline;
+    padding: 15px;
+}
+
 input[type="checkbox"] {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     width: 20px;
     height: 20px;
     border: 2px solid black;
@@ -121,10 +123,9 @@ input[type="text"] {
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 }
 
-.progress {
+#progress {
     width: 0%;
     height: 20px;
     background-color: #4285F4;
     border-radius: 5px;
-    transition: width 0.5s ease-in-out;
-}
+}