From dea6cd2df30db037857d64287f77569671cd0501 Mon Sep 17 00:00:00 2001 From: Keillion-Dynamsoft Date: Thu, 27 Aug 2026 18:19:25 +0800 Subject: [PATCH 1/5] Update ui-customization-js.md --- programming/features/ui-customization-js.md | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/programming/features/ui-customization-js.md b/programming/features/ui-customization-js.md index 341c92ba..323ecd14 100644 --- a/programming/features/ui-customization-js.md +++ b/programming/features/ui-customization-js.md @@ -13,6 +13,8 @@ noTitleIndex: true The official UI uses the `.xml` extension to prevent build tools or hot-reload mechanisms (such as Live Server, Five Server, or Hot Module Replacement) from processing or overwriting these files. **Despite the extension, the content is HTML**, not XML. In reality, you can use any file extension, provided the browser can correctly retrieve the file's text content. +> In the bottom right corner of the VSCode graphical interface, you can click "Select Language Mode" to switch any file to HTML mode. + You can choose from [legacy UI definition format](#legacy-ui-definition-format) or [new UI definition format](#new-ui-definition-format). ## Legacy UI Definition Format @@ -364,23 +366,15 @@ The UI definition accepts external scripts and styles, so you can easily write c // Since the 'dynamsoft-barcode-reader-bundle' package // has already been imported in the business logic, // importing it again in the UI definition is unnecessary. -// -// Some types have been renamed to versions with underscores -// to avoid conflicts with variables imported from `exportToUI`. -// You can also choose to change the names of the variables imported from `exportToUI` instead. -import type { - CameraEnhancer, - CaptureVisionRouter, - beep as _beep, - vibrate as _vibrate, -} from 'dynamsoft-barcode-reader-bundle'; +import type * as Types from 'dynamsoft-barcode-reader-bundle'; +type CaptureVisionRouter = Types.CaptureVisionRouter; +type CameraEnhancer = Types.CameraEnhancer; const camera = (document.currentScript as any).currentDMCamera as CameraEnhancer; -const { cvRouter, beep, vibrate, handleBarcodeText } = (camera as any).exportToUI as { +const { beep, vibrate } = (camera as any).exportToUI as (typeof Types); +const { cvRouter, handleBarcodeText } = (camera as any).exportToUI as { cvRouter: CaptureVisionRouter; - beep: typeof _beep; - vibrate: typeof _vibrate; handleBarcodeText: (text: string) => void; }; From 7461f8d83634192e92be337d4e329ebcea502276 Mon Sep 17 00:00:00 2001 From: Keillion-Dynamsoft Date: Fri, 28 Aug 2026 16:15:19 +0800 Subject: [PATCH 2/5] AI suggest: exportToUI=>uiContext --- programming/features/ui-customization-js.md | 22 ++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/programming/features/ui-customization-js.md b/programming/features/ui-customization-js.md index 341c92ba..d5e5e7e2 100644 --- a/programming/features/ui-customization-js.md +++ b/programming/features/ui-customization-js.md @@ -137,7 +137,7 @@ Please take a look at the ` ``` -The first line, `const camera = document.currentScript.currentDMCamera;`, allows you to access the `camera` object. When the camera is bound to the UI definition file, it will automatically assign the value `script.currentDMCamera = camera` to all script tags in the UI definition. If you wish to access other objects—such as `cvRouter`—you can assign `camera.exportToUI.cvRouter` within your business logic, then get it back in UI definition. +The first line, `const camera = document.currentScript.currentDMCamera;`, allows you to access the `camera` object. When the camera is bound to the UI definition file, it will automatically assign the value `script.currentDMCamera = camera` to all script tags in the UI definition. If you wish to access other objects—such as `cvRouter`—you can assign `camera.uiContext.cvRouter` within your business logic, then get it back in UI definition. ```diff // in business logic @@ -146,7 +146,7 @@ The first line, `const camera = document.currentScript.currentDMCamera;`, allows /* other logic */ const cvRouter = await CaptureVisionRouter.createInstance(); const camera = await CameraEnhancer.createInstance('url/to/my/dce.ui.v5.xml'); -+ camera.exportToUI = { cvRouter }; ++ camera.uiContext = { cvRouter }; cameraContainer.append(camera.getUIElement()); cvRouter.setInput(camera); ``` @@ -156,7 +156,7 @@ The first line, `const camera = document.currentScript.currentDMCamera;`, allows (()=>{ const camera = document.currentScript.currentDMCamera; -+ const cvRouter = camera.exportToUI.cvRouter; ++ const cvRouter = camera.uiContext.cvRouter; /* other logic */ })(); ``` @@ -228,13 +228,13 @@ Import `beep` and `vibrate` from the business logic, listen for barcode results import { CaptureVisionRouter, CameraEnhancer, beep, vibrate } from 'dynamsoft-barcode-reader-bundle'; /* other logic */ -camera.exportToUI = { cvRouter, beep, vibrate }; +camera.uiContext = { cvRouter, beep, vibrate }; ``` ```js // in ui.xml -const { cvRouter, beep, vibrate } = camera.exportToUI; +const { cvRouter, beep, vibrate } = camera.uiContext; /* other logic */ cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (result.barcodeResultItems?.length) { @@ -303,7 +303,7 @@ Listen for the `pointerdown` event on the "take photo" button. ```js // in ui.xml -const { cvRouter, beep, vibrate, handleBarcodeText } = camera.exportToUI; +const { cvRouter, beep, vibrate, handleBarcodeText } = camera.uiContext; elTakePhoto.addEventListener('pointerdown', async()=>{ let captureResult = await cvRouter.capture(camera.getFrame()); @@ -322,7 +322,7 @@ elTakePhoto.addEventListener('pointerdown', async()=>{ /* other logic */ const cvRouter = await CaptureVisionRouter.createInstance(); const camera = await CameraEnhancer.createInstance('url/to/my/dce.ui.v5.xml'); - camera.exportToUI = { + camera.uiContext = { cvRouter, beep, vibrate, + handleBarcodeText: handleBarcodeText.bind(this) }; @@ -366,8 +366,8 @@ The UI definition accepts external scripts and styles, so you can easily write c // importing it again in the UI definition is unnecessary. // // Some types have been renamed to versions with underscores -// to avoid conflicts with variables imported from `exportToUI`. -// You can also choose to change the names of the variables imported from `exportToUI` instead. +// to avoid conflicts with variables imported from `uiContext`. +// You can also choose to change the names of the variables imported from `uiContext` instead. import type { CameraEnhancer, CaptureVisionRouter, @@ -377,7 +377,7 @@ import type { const camera = (document.currentScript as any).currentDMCamera as CameraEnhancer; -const { cvRouter, beep, vibrate, handleBarcodeText } = (camera as any).exportToUI as { +const { cvRouter, beep, vibrate, handleBarcodeText } = (camera as any).uiContext as { cvRouter: CaptureVisionRouter; beep: typeof _beep; vibrate: typeof _vibrate; @@ -468,7 +468,7 @@ const currentScript = getCurrentModuleScript(); const camera = (currentScript as any).currentDMCamera as CameraEnhancer; -const { cvRouter, beep, vibrate, handleBarcodeText } = (camera as any).exportToUI as { +const { cvRouter, beep, vibrate, handleBarcodeText } = (camera as any).uiContext as { cvRouter: CaptureVisionRouter; beep: typeof _beep; vibrate: typeof _vibrate; From 5ae59cd50e1be2d1e3b4a61782e4ef8ec3bf53d6 Mon Sep 17 00:00:00 2001 From: Keillion-Dynamsoft Date: Fri, 28 Aug 2026 16:17:54 +0800 Subject: [PATCH 3/5] Update ui-customization-js.md --- programming/features/ui-customization-js.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/programming/features/ui-customization-js.md b/programming/features/ui-customization-js.md index d5e5e7e2..6096f138 100644 --- a/programming/features/ui-customization-js.md +++ b/programming/features/ui-customization-js.md @@ -364,10 +364,6 @@ The UI definition accepts external scripts and styles, so you can easily write c // Since the 'dynamsoft-barcode-reader-bundle' package // has already been imported in the business logic, // importing it again in the UI definition is unnecessary. -// -// Some types have been renamed to versions with underscores -// to avoid conflicts with variables imported from `uiContext`. -// You can also choose to change the names of the variables imported from `uiContext` instead. import type { CameraEnhancer, CaptureVisionRouter, From 542d3cb1c491202a907d45cc17af14dae48ee217 Mon Sep 17 00:00:00 2001 From: Justin Date: Wed, 2 Sep 2026 14:57:30 +0800 Subject: [PATCH 4/5] refactor: rename exportToUI to uiContext for clarity --- programming/features/ui-customization-js.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/programming/features/ui-customization-js.md b/programming/features/ui-customization-js.md index edf38643..117167b4 100644 --- a/programming/features/ui-customization-js.md +++ b/programming/features/ui-customization-js.md @@ -372,8 +372,8 @@ type CameraEnhancer = Types.CameraEnhancer; const camera = (document.currentScript as any).currentDMCamera as CameraEnhancer; -const { beep, vibrate } = (camera as any).exportToUI as (typeof Types); -const { cvRouter, handleBarcodeText } = (camera as any).exportToUI as { +const { beep, vibrate } = (camera as any).uiContext as (typeof Types); +const { cvRouter, handleBarcodeText } = (camera as any).uiContext as { cvRouter: CaptureVisionRouter; handleBarcodeText: (text: string) => void; }; From ede65059a059e33c59080f5a5977d70c6d1a6760 Mon Sep 17 00:00:00 2001 From: Justin Date: Mon, 7 Sep 2026 13:08:46 +0800 Subject: [PATCH 5/5] docs: add version 11.6.3200 to release notes --- release-notes/dbr-rn-11.md | 1 + 1 file changed, 1 insertion(+) diff --git a/release-notes/dbr-rn-11.md b/release-notes/dbr-rn-11.md index 2c97672d..7938b6eb 100644 --- a/release-notes/dbr-rn-11.md +++ b/release-notes/dbr-rn-11.md @@ -37,6 +37,7 @@ noTitleIndex: true | Versions | Available Editions | | -------- | ------------------ | +| 11.6.3200 | [JavaScript]({{ site.js_release_notes}}js-11.html#1163200-09072026){:target="_blank"} | | 11.6.3000 | [JavaScript]({{ site.js_release_notes}}js-11.html#1163000-08252026){:target="_blank"} / [C++]({{ site.cpp_release_notes}}cpp-11.html#1163000-08202026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1163000-08202026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1163000-08202026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1163000-08202026){:target="_blank"} | | 11.6.2100 | [JavaScript]({{ site.js_release_notes}}js-11.html#1162100-08182026){:target="_blank"} | | 11.6.2000 | [JavaScript]({{ site.js_release_notes}}js-11.html#1162000-08132026){:target="_blank"} / [Android]({{ site.android_release_notes}}android-11.html#1162000-08142026){:target="_blank"} / [iOS]({{ site.oc_release_notes }}ios-11.html#1162000-08142026){:target="_blank"} / [React Native]({{ site.react_native_release_notes }}react-native-11.html#1162000-08252026){:target="_blank"} |