Skip to content

AI suggest: exportToUI=>uiContext #849

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Keillion wants to merge 2 commits into
base: preview
Choose a base branch
from
Open

AI suggest: exportToUI=>uiContext #849

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7461f8d
AI suggest: exportToUI=>uiContext
Keillion Aug 28, 2026
5ae59cd
Update ui-customization-js.md
Keillion Aug 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 9 additions & 13 deletions programming/features/ui-customization-js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ Please take a look at the `<script>` tag; we have wrapped all the logic in a sel
</script>
```

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
Expand All @@ -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);
```
Expand All @@ -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 */
})();
```
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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());
Expand All @@ -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)
};
Expand Down Expand Up @@ -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 `exportToUI`.
// You can also choose to change the names of the variables imported from `exportToUI` instead.
import type {
CameraEnhancer,
CaptureVisionRouter,
Expand All @@ -377,7 +373,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;
Expand Down Expand Up @@ -468,7 +464,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;
Expand Down