Fixing broken links and ordering issue

codegallery/dwt-mrz/index.md

@@ -147,10 +147,11 @@ async function readMRZ() {
         return;
     }
 
-    extractedResults = extractDocumentFields(parsedResults[0]);
-    console.log(recognizedResults);
-    console.log(extractedResults);
-    console.log("Please See Detailed MRZ Result in Console");
+    let extractedResults = JSON.stringify(extractDocumentFields(parsedResults[0]));
+    console.log(extractedResults); // print the result to the console
+    extractedResults = extractedResults.split(",").join("\n");
+    extractedResults = extractedResults.replace(/{"text":|[{"}]/g, "");
+    document.getElementById("divNoteMessage").innerHTML = extractedResults; // print the result to the result div
 }
 
 /**
@@ -166,7 +167,6 @@ function extractDocumentFields(result) {
 
     const fieldWithStatus = (fieldName, raw=false) => ({
     text: raw ? result.getFieldRawValue(fieldName) : result.getFieldValue(fieldName),
-    status: result.getFieldValidationStatus(fieldName),
     });
 
     const parseDate = (yearField, monthField, dayField) => {
@@ -177,11 +177,6 @@ function extractDocumentFields(result) {
 
         return {
             text: `${baseYear}${year}-${result.getFieldValue(monthField)}-${result.getFieldValue(dayField)}`,
-            status: [yearField, monthField, dayField].every(
-            (field) => result.getFieldValidationStatus(field) === Dynamsoft.DCP.EnumValidationStatus.VS_SUCCEEDED
-            )
-            ? Dynamsoft.DCP.EnumValidationStatus.VS_SUCCEEDED
-            : Dynamsoft.DCP.EnumValidationStatus.VS_FAILED,
         };
     };
 
@@ -210,7 +205,7 @@ function extractDocumentFields(result) {
     "Document Number": getDocumentNumber(codeType),
     "Document Type": documentTypeLabel(codeType),
     "Issuing State": fieldWithStatus("issuingState", true),
-    Sex: fieldWithStatus("sex"),
+    Sex: fieldWithStatus("sex", true),
     "Date of Birth (YYYY-MM-DD)": parseDate("birthYear", "birthMonth", "birthDay"),
     "Date of Expiry (YYYY-MM-DD)": parseDate("expiryYear", "expiryMonth", "expiryDay"),
     "Document Type": JSON.parse(result.jsonString).CodeType,

codegallery/index.md

@@ -26,12 +26,6 @@ The demo implementation adds a bit more colour and character to the Hello World
 
 The full code of the Demo can be found [**here**](demo/index.md).
 
-## Dynamic Web TWAIN integration with MRZ
-
-There could be some cases where the use of a camera is not the target input source. In this sample, we explore the integration of the MRZ Scanner with one of Dynamsoft's star products, Dynamic Web TWAIN (DWT for short). DWT is mainly used to acquire images from a physical scanner or loading/downloading images. Using Dynamsoft Capture Vision's foundational API, we demonstrate how you can integrate MRZ reading capabilities into a DWT application.
-
-The full code and breakdown can be found [**here**](dwt-mrz/index.md).
-
 ## Official Dynamsoft MRZ Scanner Online Demo
 
 For the best demonstration of the full capabilities of the MRZ Scanner JavaScript Edition, please visit the [official Dynamsoft MRZ Scanner JavaScript demo](https://demo.dynamsoft.com/mrz-scanner/).

guides/mrz-scanner-customization.md

@@ -15,11 +15,11 @@ permalink: /guides/mrz-scanner-customization.html
 >
 >Before going into the ways that you can customize the MRZ Scanner, please read the [MRZ Scanner JavaScript Edition User Guide]({{ site.guides }}mrz-scanner.html).
 
-This guide expands on the User Guide that explored the MRZ Scanner Hello World sample project. Here we explore ways to customize the UI as well as the performance of the MRZ Scanner. We will walk through the three main configuration interfaces - **`MRZScannerConfig`**, **`MRZScannerViewConfig`**, and **`MRZResultViewConfig`**. These configuration interfaces make customizing the MRZ Scanner as easy as adding or changing a few properties in the instance constructor. Every sample is a variation on the previous Hello World sample with a few additional properties defined in the configuration interfaces, and so we only show the differing portion rather than all the code.
+This guide expands on the User Guide that explored the MRZ Scanner Hello World sample project. Here we explore ways to customize the UI as well as the performance of the MRZ Scanner. We will walk through the three main configuration interfaces - [**`MRZScannerConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerconfig), [**`MRZScannerViewConfig`**][**`MRZScannerViewConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerviewconfig), and [**`MRZResultViewConfig`**][**`MRZScannerViewConfig`**]({{ site.api }}mrz-scanner.html#mrzresultviewconfig). These configuration interfaces make customizing the MRZ Scanner as easy as adding or changing a few properties in the instance constructor. Every sample is a variation on the previous Hello World sample with a few additional properties defined in the configuration interfaces, and so we only show the differing portion rather than all the code.
 
 ## `MRZScannerConfig` Overview
 
-The **`MRZScannerConfig`** interface is capable of configuring almost all customization options applicable to MRZ scanning use cases with the MRZ Scanner. The MRZ Scanner uses passes an `MRZScannerConfig` object to the constructor when creating an MRZ Scanner instance. `MRZScannerConfig` contains the following properties:
+The [**`MRZScannerConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerconfig) interface is capable of configuring almost all customization options applicable to MRZ scanning use cases with the MRZ Scanner. The MRZ Scanner uses passes an `MRZScannerConfig` object to the constructor when creating an MRZ Scanner instance. `MRZScannerConfig` contains the following properties:
 
 1. **`license`** - the license key is the only property whose ***value must be specified when instantiating the MRZ Scanner instance***. If the license is undefined, invalid, or expired, the MRZ Scanner cannot proceed with scanning, and instead displays a pop-up error message instructing the user to contact the site administrator to resolve this license issue.
 
@@ -35,7 +35,7 @@ The **`MRZScannerConfig`** interface is capable of configuring almost all custom
 
 7. **`resultViewConfig`** - this is the configuration interface for the `MRZResultView`, which is responsible for displaying the scanned MRZ document and its parsed data after a successful scan. You can find the breakdown of the `MRZResultView` settings in the [`MRZResultView` overview](#mrzresultviewconfig-overview).
 
-8. **`mrzFormatType`** - configure the available MRTD formats that the MRZ Scanner can read. The formats set in `mrzFormatType` are the formats that appear in the format selector box within the `MRZScannerView`. By default, the library will include all of the supported MRTD formats.To learn more about the different MRTD formats the library supports, visit the introduction page for [more details]({{ site.introduction }}index.md#supported-mrz-formats).
+8. **`mrzFormatType`** - configure the available MRTD formats that the MRZ Scanner can read. The formats set in `mrzFormatType` are the formats that appear in the format selector box within the `MRZScannerView`. By default, the library will include all of the supported MRTD formats.To learn more about the different MRTD formats the library supports, visit the introduction page for [more details]({{ site.introduction }}index.html#supported-mrz-formats).
 
 9. **`showResultView`** (default value `true`) -  toggle the visibility of the `MRZResultView`. If `false`, the MRZ Scanner immediately closes upon a successful scan rather than going into the `MRZResultView`, then proceeds to the next step of the web application's workflow (outside the purview of the MRZ Scanner SDK). In the case of the Hello World sample, the next step just takes the user back to the landing page.
 
@@ -70,7 +70,7 @@ const mrzScanner = new Dynamsoft.MRZScanner({
 
 ## `MRZScannerViewConfig` Overview
 
-**`MRZScannerViewConfig`** control the UI elements of the `**MRZScannerView**`, which is the view responsible for scanning operations. Here are its properties in detail:
+[**`MRZScannerViewConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerviewconfig) controls the UI elements of the `**MRZScannerView**`, which is the view responsible for scanning operations. Here are its properties in detail:
 
 1. **`cameraEnhancerUIPath`** - define the path to a custom HTML user interface file for the `MRZScannerView`, which is based on the UI for the Dynamsoft Camera Enhancer SDK used by the MRZ Scanner. Setting the path to a custom file allows this custom UI to take effect for any `MRZScanner` instance created within your application. We recommend you to reach out to the [Dynamsoft Technical Support Team](https://www.dynamsoft.com/company/contact/) to assist you in creating such a custom UI.
 
@@ -129,7 +129,7 @@ Please contact the [Dynamsoft Support Team](https://www.dynamsoft.com/company/co
 
 ## `MRZResultViewConfig` Overview
 
-The **`MRZResultView`** user interface displays the parsed MRZ results as well as the cropped image of the MRTD document to save the time and resources needed to build your own viewer. The `MRZResultViewConfig` contains the following settings used to customize this View:
+The **`MRZResultView`** user interface displays the parsed MRZ results as well as the cropped image of the MRTD document to save the time and resources needed to build your own viewer. The [**`MRZResultViewConfig`**]({{ site.api }}mrz-scanner.html#mrzresultviewconfig) contains the following settings used to customize this View:
 
 1. **`container`** - assign a specific DOM element to contain the `**MRZResultView**` in. By default, when not specified, the MRZScanner creates its own container for this View automatically.
 
@@ -143,7 +143,7 @@ The **`MRZResultView`** user interface displays the parsed MRZ results as well a
 
 ### Using the `MRZResultViewConfig`
 
-Now that we have learned about the properties of the `MRZResultViewConfig` interface, let's now demonstrate how to use it in a simple code snippet:
+Now that we have learned about the properties of the [**`MRZResultViewConfig`**]({{ site.api }}mrz-scanner.html#mrzresultviewconfig) interface, let's now demonstrate how to use it in a simple code snippet:
 
 ```ts
 const mrzScanner = new Dynamsoft.MRZScanner({
@@ -174,7 +174,7 @@ const mrzScanner = new Dynamsoft.MRZScanner({
 
 ### Configuring the `onDone` Callback
 
-By default, once the user clicks the *Done* button in the `MRZResultView`, the scanner closes and the user is taken back to the landing page. The `onDone` callback function defined within **`MRZResultViewConfig`** serves to add useful behavior here, typically to connect the end of the MRZ Scanner workflow to the overall workflow of your entire web application by passing the MRZ scan result (stored as an `MRZResult` object) out of the MRZ Scanner. For example:
+By default, once the user clicks the *Done* button in the `MRZResultView`, the scanner closes and the user is taken back to the landing page. The `onDone` callback function defined within [**`MRZResultViewConfig`**]({{ site.api }}mrz-scanner.html#mrzresultviewconfig) serves to add useful behavior here, typically to connect the end of the MRZ Scanner workflow to the overall workflow of your entire web application by passing the MRZ scan result (stored as an `MRZResult` object) out of the MRZ Scanner. For example:
 
 ```ts
 const mrzScanner = new Dynamsoft.MRZScanner({

guides/mrz-scanner.md

@@ -183,7 +183,7 @@ const mrzscanner = new Dynamsoft.MRZScanner({
 });
 ```
 
-Above is the **simplest** way to initialize the MRZ Scanner. Note the configuration object used to set the behaviour of the MRZ Scanner instance. The single property that is **required** to be defined in this configuration object is the **license key**. Without a valid license, the MRZ Scanner view fails to launch, and the user will be met with a license key error message. Please refer to the [licensing](#license) section of the guide for instructions on acquiring a license key.
+Above is the **simplest** way to initialize the [**`MRZScanner`**]({{ site.api }}mrz-scanner.html#mrzscanner). Note the configuration object used to set the behaviour of the MRZ Scanner instance. The single property that is **required** to be defined in this configuration object is the **license key**. Without a valid license, the MRZ Scanner view fails to launch, and the user will be met with a license key error message. Please refer to the [licensing](#license) section of the guide for instructions on acquiring a license key.
 
 ### Step 3: Launching the MRZ Scanner
 
@@ -195,21 +195,21 @@ Above is the **simplest** way to initialize the MRZ Scanner. Note the configurat
 })();
 ```
 
-Now that the MRZ Scanner has been initialized and configured, it is ready to be launched! Upon launch, the MRZ Scanner presents the main **`MRZScannerView`** UI in its container on the page, and is ready to start scanning. Upon scanning an MRZ (via video or static image), the MRZ Scanner then switches to the **`MRZResultView`** , which displays a cropped image of the MRZ document as well as the parsed fields of the MRZ text. Let's break down these two Views:
+Now that the [**`MRZScanner`**]({{ site.api }}mrz-scanner.html#mrzscanner) has been initialized and configured, it is ready to be launched! Upon launch, the MRZ Scanner presents the main **`MRZScannerView`** UI in its container on the page, and is ready to start scanning. Upon scanning an MRZ (via video or static image), the MRZ Scanner then switches to the **`MRZResultView`** , which displays a cropped image of the MRZ document as well as the parsed fields of the MRZ text. Let's break down these two Views:
 
 #### `MRZScannerView`
 
-The `MRZScannerView` is composed of the following UI elements:
+The `MRZScannerView` is configured using [**`MRZScannerViewConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerviewconfig), which is composed of the following UI elements:
 
 1. **Camera View**: The Camera View is the camera viewfinder UI component within the `MRZScannerView`. This viewfinder occupies the majority of the space within the MRZScannerView to give the user a clear view and precise control of the image being scanned.
 
-2. **Scan Guide Frame**: The Scan Guide Frame is an overlay placed on top of the Camera View that guides the user to place the MRZ document in the middle of the Camera View, in order to achieve a fast and accurate scan. The guide frame is enabled **by default**, but may be hidden via the **`MRZScannerViewConfig`** interface. Note that if scan guide frame is enabled, the scanner also crops out the region outside the guide frame.
+2. **Scan Guide Frame**: The Scan Guide Frame is an overlay placed on top of the Camera View that guides the user to place the MRZ document in the middle of the Camera View, in order to achieve a fast and accurate scan. The guide frame is enabled **by default**, but may be hidden via the [**`MRZScannerViewConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerviewconfig) interface. Note that if scan guide frame is enabled, the scanner also crops out the region outside the guide frame.
 
 <div align="center">
    <img src="../assets/imgs/mrz-scan-guides.png" alt="Scan Guide Frames" width="80%" />
 </div>
 
-3. **Format Selector**: Below the scan guide frame, you will also notice a selector box that allows the user to choose which formats the MRZ Scanner should recognize. The formats that show up in the format selector are configurable via the **`MRZScannerConfig`** interface, while the visibility of the format selector itself is configurable via the **`MRZScannerViewConfig`** interface. To learn about MRZ formats, please refer to the [Introduction]({{ site.introduction }}index.html#supported-mrz-formats) page.
+3. **Format Selector**: Below the scan guide frame, you will also notice a selector box that allows the user to choose which formats the MRZ Scanner should recognize. The formats that show up in the format selector are configurable via the [**`MRZScannerConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerconfig) interface, while the visibility of the format selector itself is configurable via the [**`MRZScannerViewConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerviewconfig) interface. To learn about MRZ formats, please refer to the [Introduction]({{ site.introduction }}index.html#supported-mrz-formats) page.
 
 <div align="center">
    <img src="../assets/imgs/format-selector.png" alt="Scan Guide Frames" width="40%" />
@@ -227,7 +227,7 @@ The `MRZScannerView` is composed of the following UI elements:
 
 #### `MRZResultView`
 
-Here is a quick breakdown of the constituent UI elements of the result view:
+Here is a quick breakdown of the constituent UI elements of the result view, controlled by [**`MRZResultViewConfig`**]({{ site.api }}mrz-scanner.html#mrzresultviewconfig):
 
 1. **Original Image**: A cropped image of the scanned MRZ document - this gets displayed at the top of the `MRZResultView` by default.