What are the different ways to customize the UI?

« Back to FAQ index

Version 10 and above

The UI is part of the Dynamsoft Camera Enhancer module, read more on how to customize the UI

Version 9

There are three different ways to customize the UI -

• The first is to modify the file dist/dbr.ui.html directly. However, this means that the resource files should be hosted on your own server, rather than using the CDN.

• The second is to make a copy of the dist/dbr.ui.html and include it in your application, modifying the copy as you wish. Afterwards, you can tell the SDK to use the modified copy using the defaultUIElement property:

Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";

Note - This needs to be set before createInstance is called.

• The third and most popular way is to build the UI element by incorporating the HTML element yourself, and then point to that HTML element during initialization using the setUIElement(HTMLElement) method.
  1. The first part of this is to embed the video element. Please note that the classnames of the different sub-elements must match the ones in dist/dbr.ui.html.
  2. The second part is to add the camera list and resolution list and as before, the classnames must match the ones listed in dist/dbr.ui.html.

Note - For more info on how to customize the UI, please refer to this section of the user guide.