Skip to content

Commit 2998084

Browse files
DMGithubPublisherDMGithubPublisher
authored
Merge pull request #771 from dynamsoft-docs/preview
update to internal commit d85dca2f
2 parents 8102992 + 6d5b647 commit 2998084

File tree

2 files changed

+153
-6
lines changed

2 files changed

+153
-6
lines changed

‎license-activation/index.md‎

Lines changed: 57 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ The following shows how to set the license in the code.
3838
>- Python
3939
>
4040
>
41-
```javascript
41+
```js
4242
Dynamsoft.License.LicenseManager.initLicense("YOUR-LICENSE-KEY");
4343
```
4444
>
@@ -60,10 +60,18 @@ Dynamsoft.License.LicenseManager.initLicense("YOUR-LICENSE-KEY");
6060
```
6161
>
6262
```csharp
63+
int errorCode = 0;
6364
string errorMsg;
64-
BarcodeReader.InitLicense("YOUR-LICENSE-KEY", out errorMsg);
65-
BarcodeReader reader = new BarcodeReader();
66-
// add further process
65+
errorCode = LicenseManager.InitLicense("--Enter Your License Key Here--", out errorMsg);
66+
if (errorCode != (int)EnumErrorCode.EC_OK && errorCode != (int)EnumErrorCode.EC_LICENSE_CACHE_USED)
67+
{
68+
Console.WriteLine("License initialization error: " + errorMsg);
69+
}
70+
else
71+
{
72+
CaptureVisionRouter cvr = new CaptureVisionRouter();
73+
// add code for further process
74+
}
6775
```
6876
>
6977
```java
@@ -101,8 +109,13 @@ func onLicenseVerified(_ isSuccess: Bool, error: Error?) {
101109
```
102110
>
103111
```python
104-
error = BarcodeReader.init_license("YOUR-LICENSE-KEY")
105-
dbr = BarcodeReader()
112+
error_code = 0
113+
error_code, error_msg = LicenseManager.init_license("--Enter Your License Key Here--")
114+
if error_code != EnumErrorCode.EC_OK.value and error_code != EnumErrorCode.EC_LICENSE_CACHE_USED.value:
115+
print("License initialization error: " + error_msg)
116+
else:
117+
CaptureVisionRouter cvr = new CaptureVisionRouter()
118+
# add code for further process
106119
```
107120

108121
If you are using a **concurrent instance license**, you need to apply two more operations:
@@ -112,6 +125,8 @@ If you are using a **concurrent instance license**, you need to apply two more o
112125

113126
<div class="sample-code-prefix template2"></div>
114127
>- C++
128+
>- C#
129+
>- Python
115130
>
116131
>
117132
```cpp
@@ -131,3 +146,39 @@ If you are using a **concurrent instance license**, you need to apply two more o
131146
cvr->UpdateSettings(CPresetTemplate::PT_READ_BARCODES, &setting);
132147
// add further process
133148
```
149+
>
150+
```csharp
151+
int licenseCount = YOUR-PURCHASED-LICENSE-COUNT;
152+
int errorCode = 0;
153+
string errorMsg;
154+
errorCode = LicenseManager.InitLicense("YOUR-LICENSE-KEY", out errorMsg);
155+
LicenseManager.SetMaxConcurrentInstanceCount(licenseCount)
156+
if (errorCode != (int)EnumErrorCode.EC_OK && errorCode != (int)EnumErrorCode.EC_LICENSE_CACHE_USED)
157+
{
158+
Console.WriteLine("License initialization error: " + errorMsg);
159+
}
160+
else
161+
{
162+
CaptureVisionRouter cvr = new CaptureVisionRouter();
163+
SimplifiedCaptureVisionSettings settings;
164+
cvr.GetSimplifiedSettings(PresetTemplate.PT_READ_BARCODES, out settings);
165+
setting.maxParallelTasks = licenseCount;
166+
cvr.UpdateSettings(PresetTemplate.PT_READ_BARCODES, settings, out errorMsg);
167+
// add code for further process
168+
}
169+
```
170+
>
171+
```python
172+
license_count = YOUR-PURCHASED-LICENSE-COUNT
173+
error_code = 0
174+
LicenseManager.set_max_concurrent_instance_count(license_count)
175+
error_code, error_msg = LicenseManager.init_license("YOUR-LICENSE-KEY")
176+
if error_code != EnumErrorCode.EC_OK.value and error_code != EnumErrorCode.EC_LICENSE_CACHE_USED.value:
177+
print("License initialization error: " + error_msg)
178+
else:
179+
CaptureVisionRouter cvr = new CaptureVisionRouter()
180+
error_code, error_msg, settings = cvr.get_simplified_settings(EnumPresetTemplate.PT_READ_BARCODES.value)
181+
settings.max_parallel_tasks = license_count
182+
error_code, error_msg = cvr.update_settings(EnumPresetTemplate.PT_READ_BARCODES.value, settings)
183+
# add code for further process
184+
```

‎programming/features/ui-customization-js.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
layout: default-layout
3+
title: Customize the UI - Dynamsoft Barcode Reader SDK
4+
description: This page describes how to customize the UI in Dynamsoft Barcode Reader SDK.
5+
keywords: UI customization
6+
needAutoGenerateSidebar: true
7+
needGenerateH3Content: true
8+
noTitleIndex: true
9+
---
10+
11+
# Customize the UI
12+
13+
When you want to customize the UI, we can leverage the extensive customization features provided by Dynamsoft Camera Enhancer (DCE) to achieve this.
14+
15+
## Use the built-in UI
16+
17+
DCE includes several pre-defined UIs in the `DCE-LIB-PACKAGE/dist/xxxx.ui.html` (or `node_modules/dynamsoft-camera-enhancer/dist/xxxx.ui.html`).
18+
19+
* `dce.ui.html`: The default UI used by CameraView.createInstance() for simple use cases.
20+
* `dce.mobile-native.ui.html`: A mobile-inspired UI with auto flash, suitable for most websites. Activate it with `CameraView.createInstance('@engineResourcePath/dce.mobile-native.ui.html')`.
21+
22+
When `cameraEnhancer.open()` is called, the UI elements are dynamically bound to functions based on their class names, such as `dce-xxxx`.
23+
24+
## Modify the UI dynamically
25+
26+
To customize the UI, call `view.getUIElement()` to access the HTMLElement containing all UI elements. Before `cameraEnhancer.open()`, you can modify the UI by editing CSS, adding/removing elements, or restructuring the HTML. This usually works without issues, though testing is recommended.
27+
28+
After `cameraEnhancer.open()`, UI adjustments are possible via JavaScript, but handle elements with `dce-` prefixed class names carefully, as they may be linked to specific logic.
29+
30+
## Define the UI in a separate HTML
31+
32+
For less dynamic but more structured customization, create a copy of the desired `xxxx.ui.html`, modify it as needed, and store it in your project's `public` folder. Use this customized UI with `CameraView.createInstance('PATH-TO/xxxx.ui.html')`.
33+
34+
## Integrate HTML into Your Project
35+
36+
Alternatively, `CameraView.createInstance()` accepts an `HTMLElement` directly. This allows you to build and manage the UI within your webpage. For example, set the UI using `CameraView.createInstance(document.getElementById('my-custom-ui'))`.
37+
38+
Let's see the following example.
39+
40+
**Practise: customize base on `dce.ui.html`**
41+
42+
Start by opening dce.ui.html in your editor to review its content. You can copy several elements from this file.
43+
44+
Next, create a new HTML page, beginning by embedding only the video:
45+
46+
```html
47+
<div id="enhancerUIContainer" style="width:1280px;height:720px;background:#ddd;" >
48+
<div class="dce-video-container" style="width:100%;height:100%;"></div>
49+
</div>
50+
<script>
51+
(async () => {
52+
// Initializes the license for using the SDK in the application.
53+
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
54+
// Create 'CameraView' instance and pass the element "enhancerUIContainer" as its UI.
55+
let cameraView = await Dynamsoft.DCE.CameraView.createInstance(document.getElementById("enhancerUIContainer"));
56+
let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
57+
await cameraEnhancer.open();
58+
})();
59+
</script>
60+
```
61+
62+
> The video element will automatically be created and appended to the `dce-video-container` div.
63+
64+
Next, add the camera and resolution list. If the classes match the default ones (`dce-sel-camera` and `dce-sel-resolution`), the SDK will populate them and manage switching.
65+
66+
```html
67+
<div id="enhancerUIContainer" style="position:relative;width:1280px;height:720px;background:#ddd;" >
68+
<div class="dce-video-container" style="width:100%;height:100%;"></div>
69+
<div style="position: absolute;left: 0;top: 0;">
70+
<select class="dce-sel-camera" style="display: block;"></select>
71+
</div>
72+
</div>
73+
```
74+
75+
```html
76+
<div id="enhancerUIContainer" style="position:relative;width:1280px;height:720px;background:#ddd;" >
77+
<div class="dce-video-container" style="width:100%;height:100%;"></div>
78+
<div style="position:absolute;left:0;top:0;">
79+
<select class="dce-sel-camera" style="display:block;"></select>
80+
<select class="dce-sel-resolution" style="display:block;margin-top:5px;"></select>
81+
</div>
82+
</div>
83+
```
84+
85+
> By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720, 640 x 480) are available. You can show a customized set of options by hardcoding them.
86+
87+
```html
88+
<select class="dce-sel-resolution">
89+
<option class="dce-opt-gotResolution" value="got"></option>
90+
<option data-width="1920" data-height="1080">1920x1080</option>
91+
<option data-width="1280" data-height="720">1280x720</option>
92+
<option data-width="640" data-height="480">640x480</option>
93+
</select>
94+
```
95+
96+
> Ensure the selected resolution is supported by the camera. If not, the closest supported resolution will be used. The `dce-opt-gotResolution` class shows the **actual resolution**.

0 commit comments

Comments
 (0)