Skip to content

Commit c177e0c

Browse files
author
coheedandcambria
committed
Finalized one README and added a new one for the UI customization set
1 parent a4cd3f2 commit c177e0c

File tree

2 files changed

+23
-4
lines changed

2 files changed

+23
-4
lines changed

1.hello-world/README.md

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@ In this sample, a listener is set up so that the SDK decodes any image that the
3333

3434
### Hello World - Angular
3535

36-
This sample demonstrates how to use the library in an Angular application in the most basic manner.
36+
This sample demonstrates how to use the library in an Angular application in the most basic manner. [Angular CLI](https://github.com/angular/angular-cli) v11.2.4 is used to generate this sample project.
3737

3838
As mentioned in the user guide, when working with Angular aplications, it is recommended to use the `dynamsoft-javascript-barcode` npm package. The library is then set up as its own component, in this case defined in `barcode-scanner`.
3939

40-
The majority of the `DBR` (short for Dynamsoft Barcode Reader) operations are grouped in the `barcode-scanner` folder. Since we are using the npm package, the engine files are not in the same location as the main library file, `dbr.ts`. Therefore, the `engineResourcePath` must be defined so that the library knows where to find the engine files.
40+
The majority of the `DBR` (short for Dynamsoft Barcode Reader) operations are grouped in the `barcode-scanner` folder. Since we are using the npm package, the engine files are not in the same location as the main library file, `src/app/dbr.ts`. Therefore, the `engineResourcePath` must be defined so that the library knows where to find the engine files.
4141

4242
In our sample, we assign the `engineResourcePath` to our jsDelivr CDN URL as it is the easiest way to go. However, you can choose to use the engine files in installed npm package instead as such:
4343
```js
@@ -58,8 +58,16 @@ Let's do a quick breakdown of the `barcode-scanner` folder where the barcode sca
5858
The `hello-world` component in turn implements the `barcode-scanner` component, with the main operation being defined in `hello-world.component.ts` and the UI in `hello-world.component.html`.
5959

6060
### Hello World - React JS
61-
Much like the Angular implementation, the library is set up as its own component, based on the npm package `dynamsoft-javascript-barcode`.
61+
Much like the Angular implementation, the library is set up as its own component in the React JS implementation, based on the npm package `dynamsoft-javascript-barcode`. This sample project is bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
6262

6363
The barcode scanner component is defined in the `components` folder. `BarcodeScanner.js` is the most basic implementation of the library as a React component. The `BarcodeScanner` component is then used in the parent component, `HelloWorld`.
6464

65-
Please note that since we are using the npm package, the `engineResourcePath` must be defined in the `dbr.js` file, similar to the Angular implementation. In addition, the license must be specified via `organizationID` or `productKeys`, depending on the version of the library you are using.
65+
Please note that since we are using the npm package, the `engineResourcePath` must be defined in the `src/dbr.js` file, similar to the Angular implementation. In addition, the license must be specified via `organizationID` or `productKeys`, depending on the version of the library you are using.
66+
67+
### Hello World - Vue JS
68+
The Vue implementation of the Hello World sample is very similar to the React and Angular implementations. Of course, this implementation will be based on the npm package `dynamsoft-javascript-barcode`.
69+
70+
The `BarcodeScanner.vue` component, defined in the `components` folder, includes the basic `DBR` methods to get the video scanner up and running. The `BarcodeScanner.vue` component is then used in the parent component, `HelloWorld`.
71+
72+
Like the previous implementations, the `engineResourcePath` and license will need to be defined in `src/dbr.js`
73+

2.ui-tweaking/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# UI Customization Sample Set
2+
3+
In this sample set, we will focus on the library's flexible UI that allows developers to create the look and feel for their web application that they desire. To learn more about UI customization, please refer to its corresponding [section](https://github.com/Dynamsoft/javascript-barcode#233-customize-the-ui) in the user guide.
4+
5+
Let's begin by breaking down each of the samples in this set
6+
7+
### Read Barcodes via Video and Display Results
8+
9+
In this sample, we perform simple tweak of the default UI to include a couple of `span` elements that will display the barcode text and barcode format as they are detected via video. Our basic 'Hello World' samples displayed the results in the console or via an alert box, so this sample will offer a more user-friendly way of showing the results as they are found.
10+
11+
In the `onFrameRead` event function, a pair of `span` elements are created for each found barcode. The `span` elements are then populated with the barcode text and the barcode format. Afterwards, the scanner UI (via `getUIElement`) is appended to the newly created `span` elements to complete this custom UI.

0 commit comments

Comments
 (0)