Merge pull request #663 from dynamsoft-docs/preview

Preview

Author: kyle-ds

_data/full_tree.yml

@@ -51,6 +51,8 @@ tree_list:
         path: /indepth/development/react.html
       - name: Use Web TWAIN in Vue
         path: /indepth/development/vue.html
+      # - name: Use Web TWAIN in Vue 3
+      #   path: /indepth/development/vue3.html
       - name: Simple Demo
         path: https://www.dynamsoft.com/web-twain/resources/code-gallery/
   - name: API Reference

faq/difference-between-Twain-and-wia.md

@@ -11,12 +11,15 @@ permalink: /faq/difference-between-Twain-and-wia.html
 
 # Capture/Image Source
 
-## What are the differences between TWAIN and WIA?
+## What are the differences between TWAIN and WIA drivers?
 
-TWAIN driver TWAIN is the most widely used protocol for physical document scanners. Almost all scanners in the market come with a TWAIN driver and are supported by TWAIN applications like the Dynamic Web TWAIN SDK.
+TWAIN is the most widely used protocol for physical document scanners. Almost all scanners in the market come with a TWAIN driver and are supported by TWAIN applications like the Dynamic Web TWAIN SDK.
+
+`WIA` stands for <a href="https://docs.microsoft.com/en-us/windows/win32/wia/-wia-startpage" target="_blank">Windows Image Acquisition</a>, which is a Microsoft driver model for capturing digital images from various devices, such as scanners, cameras and other imaging devices. The WIA protocol is built-in and supported by Windows OS, so no extra driver installation is required. WIA offers standardized hardware compatibility and a stable driver environment, making it easier to integrate imaging capabilities into web scanning applications. 
+
+Prior to Dynamic Web TWAIN version 18.2, WIA drivers are not officially supported. But `WIA` devices can be used by `TWAIN` applications like `Dynamic Web TWAIN` through a `TWAIN compatibility layer`. This means `WIA` is not supported natively; therefore, when a device supports both `TWAIN` and `WIA`, `TWAIN` is the better option.
+
+As of Dynamic Web TWAIN version 18.2, we officially support WIA 2.0 drivers. To make sure your web application works with WIA scanner drivers, please refer to the article: <a href="{{site.faq}}support-wia-scanner-drivers.html" target="_blank">How do I support WIA scanner drivers in my application?</a>
 
-`WIA` refers to <a href="https://docs.microsoft.com/en-us/windows/win32/wia/-wia-startpage" target="_blank">Windows Image Acquisition</a>, which is the still image acquisition platform in the Windows family that enables imaging/graphics applications to interact with imaging hardware and standardizes the interaction between different applications and scanners.
 
-`WIA` devices can be used by `TWAIN` applications like `Dynamic Web TWAIN` through a `TWAIN compatibility layer`. This means `WIA` is not supported natively; therefore, when a device supports both `TWAIN` and `WIA`, `TWAIN` is the better option.
 
-By comparison, `WIA` can only control a very limited set of general capabilities of the device while `TWAIN` can control all standard and even custom capabilities of the device. Another thing is that `TWAIN` has three transfer modes (Native, Memory, File), while `WIA` only has two (Memory, File).

faq/index.md

@@ -92,6 +92,9 @@ permalink: /faq/
 <li><a href="{{site.faq}}scanner-not-shown-or-not-responding-in-the browser.html">Why is my scanner not shown or not responding in the browser?</a></li>
 
 <li><a href="{{site.faq}}download-virtual-scanner-for-testing.html">Download virtual scanner for testing</a></li>
+
+<li><a href="{{site.faq}}support-wia-scanner-drivers.html">How can I support WIA scanner drivers in my application?</a></li>
+
 </ol>
 
 ## Image Viewer
@@ -361,6 +364,8 @@ permalink: /faq/
 <li><a href="{{site.faq}}type-error-appendchild.html">Error Message - Uncaught TypeError: Cannot read properties of null (reading 'appendChild') or Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'</a></li>
 
 <li><a href="{{site.faq}}error-message-user-cancelled-the-operation.html">Error Message - User cancelled the operation</a></li>
+
+<li><a href="{{site.faq}}the-loading-bar-keeps-spinning-when-capture-the-image-with-iphone.html">The loading bar keeps spinning when capture the image with iPhone.</a></li>
  </ol>
 
 ## Licensing and Purchase

faq/support-wia-scanner-drivers.md

@@ -0,0 +1,45 @@
+---
+layout: default-layout
+noTitleIndex: true
+needAutoGenerateSidebar: true
+title: How can I support WIA scanner drivers in my application?
+keywords: Dynamic Web TWAIN, Capture/ Image Source, WIA
+breadcrumbText: How can I support WIA scanner drivers in my application?
+description: How can I support WIA scanner drivers in my application?
+permalink: /faq/support-wia-scanner-drivers.html
+---
+
+# Capture/Image Source
+
+## How can I support WIA scanner drivers in my application?
+
+Prior to Dynamic Web TWAIN version 18.2, WIA drivers are not supported and TWAIN drivers are recommended. Please refer to <a href="{{site.faq}}difference-between-Twain-and-wia.html" target="_blank">this article</a> for the differences between WIA and TWAIN drivers.
+
+As of Dynamic Web TWAIN version 18.2, we officially support WIA 2.0. By comparison, `WIA` can only control a very limited set of general capabilities of the device, while `TWAIN` can control all standard and even custom capabilities of the device. In addition, `WIA` has only two transfer modes (Memory, File), while `TWAIN` has three (Native, Memory, File).
+
+Since Dynamic Web TWAIN v18.0, we introduced a new set of scanner related APIs.
+To compatible with both TWAIN and WIA 2.0, 
+- If your application is already using the new set of APIs below, no application change is required.
+- If not, replace the old APIs with the matching new APIs.
+
+| New APIs (supports WIA) | Old APIs |
+|:-|:-|
+| [GetDeviceAsync()](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_Acquire.html#getdevicesasync) | [GetSourceNames()](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_Acquire.html#getsourcenames), [GetSourceNamesAsync()](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_Acquire.html#getsourcenamesasync)|
+| [SelectDeviceAsync()](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_Acquire.html#selectdeviceasync) | [SelectSourceByIndex()](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_Acquire.html#selectsourcebyindex), [SelectSourceByIndexAsync()](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_Acquire.html#selectsourcebyindexasync) |
+| [SelectSourceAsync()](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_Acquire.html#selectsourceasync) | [SelectSource()](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_Acquire.html#selectsource) |
+| [AcquireImageAsync()](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_Acquire.html#acquireimageasync) | [AcquireImage()](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_Acquire.html#acquireimage) |
+
+### Example Code
+
+```javascript
+DWObject.GetDevicesAsync(Dynamsoft.DWT.EnumDWT_DeviceType.TWAINSCANNER|Dynamsoft.DWT.EnumDWT_DeviceType.WIASCANNER).then((deviceList)=>{
+  return DWObject.SelectDeviceAsync(deviceList[0])  //Select the first device
+}).then(()=>{
+    return DWObject.AcquireImageAsync({}) 
+}).catch((e)=>{
+    console.error(e)
+})
+```
+
+### Difference between the WIASCANNER and WIATWAINSCANNER DeviceType
+To support the WIA protocol in v18.2+, we added a new Enumaration `WIASCANNER` to [Dynamsoft.DWT.EnumDWT_DeviceType](https://www.dynamsoft.com/web-twain/docs/info/api/Dynamsoft_Enum.html?ver=latest&&cVer=true#dynamsoftdwtenumdwt_devicetype) . The enumaration named `WIATWAINSCANNER` represents WIA sources mapped through the TWAIN protocol after packaging by Microsoft. It was used in previous versions of Dynamic Web TWAIN and it will continue to be supported.

faq/the-loading-bar-keeps-spinning-when-capture-the-image-with-iphone.md

@@ -0,0 +1,34 @@
+---
+layout: default-layout
+noTitleIndex: true
+needAutoGenerateSidebar: true
+title: The loading bar keeps spinning when capture the image with iPhone.
+keywords: Dynamic Web TWAIN, Error Troubleshooting, wasm, iphone
+breadcrumbText: The loading bar keeps spinning when capture the image with iPhone.
+description: The loading bar keeps spinning when capture the image with iPhone.
+permalink: /faq/the-loading-bar-keeps-spinning-when-capture-the-image-with-iphone.html
+---
+
+# Error Troubleshooting
+
+## The loading bar keeps spinning when capturing images with iPhone.
+
+### Symptom
+
+iOS 16.4 was released on March 27th, 2023. In this version, all browsers on iOS have begun to support `OffscreenCanvas`. Unfortunately, Apple's implementation of the API is still incomplete and is missing an important feature: "webgl context". Please see the MDN docs on [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) for more details.
+
+### Cause
+
+`OffscreenCanvas` is utilized in all versions of the Dynamic Web TWAIN Mobile Web Capture Edition. After you upgrade your iOS to v16.4, the loading bar will keep spinning when you try to capture an image. Note that the Service Edition is not affected by this issue.
+
+### Resolution
+
+Add the following lines of code to disable the API.
+
+```javascript
+if (Dynamsoft.navInfoSync.biPhone || Dynamsoft.navInfoSync.biPad) {
+    window.OffscreenCanvas = null
+}
+```
+
+> If the resolution doesn't work for you, please [contact us](https://www.dynamsoft.com/company/contact/).

getstarted/vue.md

@@ -12,6 +12,13 @@ permalink: /indepth/development/vue.html
 
 [Vue](https://vuejs.org/) is a progressive framework for building user interfaces. Check out the following guide on how to integrate `DWT` into a Vue application.
 
+<div class="multi-panel-switching-prefix"></div>
+
+- [Vue](#vue)
+- [Vue 3](#vue3)
+
+<div class="multi-panel-start"></div>
+
 ## Preparation
 
 Make sure you have [node](https://nodejs.org/), [yarn](https://yarnpkg.com/cli/install), and [Vue CLI](https://cli.vuejs.org/) installed. `node 14.4.0` , `yarn 1.22.4`, and `@vue/cli 4.46` are used in the example below.
@@ -203,9 +210,200 @@ If you have installed `DWT` and have configured a valid `ProductKey` . You will
 
 You should be able to open a file or capture an image.
 
+<div class="multi-panel-end"></div>
+
+<div class="multi-panel-start"></div>
+
+## Preparation
+
+The recommended version for Vue and Node is `v3.2.22` and `v16+` respectively.
+
+## Create the sample project
+
+### Create a bootstrapped raw Vue 3 application
+
+Assume the project name is "dwt-vue3"
+
+``` cmd
+npm init vue@latest
+```
+
+### Navigate to the root directory of the application and install the `dwt` and `ncp` package
+
+``` cmd
+cd dwt-vue3
+```
+
+``` cmd
+npm install
+```
+
+``` cmd
+npm install dwt
+```
+
+``` cmd
+npm install ncp
+```
+
+## Configure the project
+
+Open `package.json` and change `scripts` as seen below:
+
+``` json
+"scripts": {
+    "dev": "ncp node_modules/dwt/dist public/dwt-resources && vite",
+    "build": "ncp node_modules/dwt/dist public/dwt-resources && vite build",
+    "preview": "vite preview"
+},
+```
+
+> The change ensures the static files required to run `DWT` are copied over to the resulting built project.
+
+## Start to implement
+
+### Edit the default component
+
+Create `localScan.vue` in the folder /src/components
+
+```html
+<script setup>
+import Dynamsoft from "dwt";
+import { onMounted, onUnmounted, ref } from "vue";
+let selectedIndex = ref(0);
+let sourceList=ref([]);
+let DWObject;
+const containerId = "dwtcontrolContainer";
+onMounted(() => {
+  /**
+   * ResourcesPath & ProductKey must be set in order to use the library!
+   */
+  Dynamsoft.DWT.AutoLoad = false;
+  Dynamsoft.DWT.ResourcesPath = "/dwt-resources";
+  Dynamsoft.DWT.ProductKey ="YOUR-PRODUCT-KEY";
+  Dynamsoft.DWT.Containers = [
+    {
+      WebTwainId: "dwtObject",
+      ContainerId: containerId,
+      Width: "500px",
+      Height: "600px",
+    },
+  ];
+  Dynamsoft.DWT.RegisterEvent("OnWebTwainReady", () => {
+    Dynamsoft_OnReady();
+  });
+  Dynamsoft.DWT.Load();
+});
+onUnmounted(()=>{
+    Dynamsoft.DWT.Unload();
+})
+function Dynamsoft_OnReady() {
+  DWObject = Dynamsoft.DWT.GetWebTwain(containerId);
+  DWObject.GetDevicesAsync()
+    .then((deviceList) => {
+      sourceList.value = deviceList;
+    })
+    .catch((e) => {
+      console.error(e);
+    });
+}
+/**
+ * Acquire images from scanners
+ */
+function acquireImage() {
+    DWObject.SelectDeviceAsync(sourceList.value[selectedIndex.value])
+      .then(() => {
+        return DWObject.AcquireImageAsync({IfCloseSourceAfterAcquire:true});
+      })
+      .catch((e) => {
+        console.error(e);
+      })
+}
+
+/**
+ * Open local images.
+ */
+function openImage() {
+  DWObject.IfShowFileDialog = true;
+  /**
+   * Note:
+   * This following line of code uses the PDF Rasterizer which is an extra add-on that is licensed seperately
+   */
+  DWObject.Addon.PDF.SetConvertMode(Dynamsoft.DWT.EnumDWT_ConvertMode.CM_RENDERALL);
+  DWObject.LoadImageEx(
+    "",
+    Dynamsoft.DWT.EnumDWT_ImageType.IT_ALL,
+    () => {
+      //success
+    },
+    () => {
+      //failure
+    }
+  );
+}
+</script>
+
+<template>
+  <div>
+    <select v-model="selectedIndex">
+      <option
+        v-for="(source, index) in sourceList"
+        :value="index"
+        :key="index"
+      >
+        {{ source.displayName }}
+      </option>
+    </select>
+    <button @click="acquireImage()">Acquire Images</button>
+    <button @click="openImage()">Open Documents</button>
+    <div :id="containerId"></div>
+  </div>
+</template>
+
+<style scoped></style>
+```
+
+> Note:
+> * `containerId` specifies the DIV to create `DWT` viewer, which is defined in the `template`.
+> * `OnWebTwainReady` is the callback triggered when `DWT` initialization succeeds.
+> * `ProductKey` must be set to a valid trial or full key.
+> * `ResourcesPath` is set to the location of the static files mentioned in [Configure the project](#configure-the-project).
+
+Change the file /src/App.vue
+
+```html
+<script setup>
+import HelloWorld from './components/localScan.vue'
+</script>
+
+<template>
+    <HelloWorld />
+</template>
+
+<style scoped>
+</style>
+```
+
+### Try running the project
+
+``` cmd
+npm run dev
+```
+
+#### On desktop
+
+If you have installed `DWT` and have configured a valid `ProductKey` . You will have a working page to scan documents from your scanner now. Otherwise, you should see instructions on [this page]({{site.indepth}}features/initialize.html#installation-of-the-dynamsoft-service) that guides you on installing the library.
+
+#### On mobile
+
+For Android, the scanners that support ESCL can be used.
+
 ## Official Samples
 
 Check out the following sample project:
 
 * [dwt-vue](https://github.com/Dynamsoft/web-twain-vue-advanced)
 
+<div class="multi-panel-end"></div>
+
+<div class="multi-panel-switching-end"></div>