├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── resources
    │   └── dwt
    │       ├── dynamsoft.webtwain.min.js
    │       └── dynamsoft.webtwain.min.mjs
└── src
    ├── App.vue
    ├── assets
        ├── logo.png
        └── logo.svg
    ├── components
        ├── DWT.vue
        ├── HelloWorld.vue
        └── panel
        │   ├── OCR.vue
        │   ├── Scan.vue
        │   ├── Viewer.vue
        │   └── Webcam.vue
    ├── main.js
    └── plugins
        └── vuetify.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 
25 | public/
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # dwt-vue
 2 | 
 3 | ## Project Description
 4 | 
 5 | dwt-vue is a document scanning web app which uses Dynamic Web TWAIN and Vue.js technologies. It can provides scan, webcam capture, and OCR features to end users. 
 6 | 
 7 | ![dwt-vue app screenshot](https://www.dynamsoft.com/codepool/wp-content/uploads/2020/09/component_dwt-final_deliverable-1000x494.png)
 8 | 
 9 | ### Dynamic Web TWAIN
10 | 
11 | Dynamic Web TWAIN is a commercial development SDK that caters to TWAIN standard for web developers. Besides the functionalities provided by dwt-vue, it can also offer barcode reading and scanning upload features. For more details (introduction, download, demos, trial license), please reach https://www.dynamsoft.com/Products/WebTWAIN_Overview.aspx.
12 | 
13 | ## Project document
14 | 
15 | [Make a component-based document scanning application](https://www.dynamsoft.com/codepool/vue-document-scanning-app.html)
16 | 
17 | ## Project setup
18 | ```
19 | npm install
20 | ```
21 | 
22 | ### Compiles and hot-reloads for development
23 | ```
24 | npm run serve
25 | ```
26 | 
27 | ### Compiles and minifies for production
28 | ```
29 | npm run build
30 | ```
31 | 
32 | ### Lints and fixes files
33 | ```
34 | npm run lint
35 | ```
36 | 
37 | ### Customize configuration
38 | See [Configuration Reference](https://cli.vuejs.org/config/).
39 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dwt-vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "ncp node_modules/dwt/dist public/resources/dwt && vue-cli-service serve",
 7 |     "build": "vue-cli-service build && ncp node_modules/dwt/dist public/resources/dwt",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@mdi/font": "^3.6.95",
12 |     "core-js": "^3.6.5",
13 |     "dwt": "^16.1.2",
14 |     "ncp": "^2.0.0",
15 |     "roboto-fontface": "*",
16 |     "vue": "^2.6.11",
17 |     "vuetify": "^2.2.11"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "~4.5.0",
21 |     "@vue/cli-plugin-eslint": "~4.5.0",
22 |     "@vue/cli-service": "~4.5.0",
23 |     "babel-eslint": "^10.1.0",
24 |     "eslint": "^6.7.2",
25 |     "eslint-plugin-vue": "^6.2.2",
26 |     "vue-cli-plugin-vuetify": "~2.0.7",
27 |     "vue-template-compiler": "^2.6.11"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YutongZhang-dynamsoft/dwt-vue/8fd5e8a5f374f5c5c1deaf3b374c4a0f8fe29113/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-app-bar
 4 |       app
 5 |       color="primary"
 6 |       dark
 7 |     >
 8 |     Dynamic Web TWAIN
 9 |     </v-app-bar>
10 | 
11 |     <v-main>
12 |       <DWT />
13 |     </v-main>
14 |   </v-app>
15 | </template>
16 | 
17 | <script>
18 | import DWT from './components/DWT';
19 | 
20 | export default {
21 |   name: 'App',
22 | 
23 |   components: {
24 |     DWT
25 |   },
26 | 
27 |   data: () => ({
28 |     //
29 |   }),
30 | };
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YutongZhang-dynamsoft/dwt-vue/8fd5e8a5f374f5c5c1deaf3b374c4a0f8fe29113/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/components/DWT.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="dwt-container">
  3 |     <Viewer 
  4 |       :id="this.viewer.id" 
  5 |       :ref="this.viewer.id"
  6 |       :dwtRef="this.dwt.obj"
  7 |       :width="this.viewer.width"
  8 |       :height="this.viewer.height"
  9 |     >
 10 |       <!-- DWT viewer -->
 11 |     </Viewer>
 12 |     <v-tabs id="dwt-control">
 13 |       <v-tab :key="0" @click="handleTabChange(0)">Scan</v-tab>
 14 |       <v-tab :key="1" @click="handleTabChange(1)">Webcam Capture</v-tab>
 15 |       <v-tab :key="2" @click="handleTabChange(2)">OCR</v-tab>
 16 |       <v-tab-item :key="0">
 17 |         <Scan :ref="'scan-panel'"></Scan>
 18 |       </v-tab-item>
 19 |       <v-tab-item :key="1">
 20 |         <Webcam :ref="'webcam-panel'"></Webcam>
 21 |       </v-tab-item>
 22 |       <v-tab-item>
 23 |         <OCR :ref="'ocr-panel'"/>
 24 |       </v-tab-item>
 25 |     </v-tabs>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | import dwt from 'dwt'
 31 | import Viewer from '@/components/panel/Viewer'
 32 | import Scan from '@/components/panel/Scan'
 33 | import Webcam from '@/components/panel/Webcam.vue'
 34 | import OCR from '@/components/panel/OCR.vue'
 35 | 
 36 | export default {
 37 |   name: 'dwt',
 38 |   components: {
 39 |     Viewer,
 40 |     Scan,
 41 |     Webcam,
 42 |     OCR
 43 |   },
 44 |   data () {
 45 |     return {
 46 |       dwt: {
 47 |         obj: null,
 48 |         id: 'dwtObject',
 49 |         licenseKey: 't01016QAAADyBe7yfb9oPaRKoDodUi2D6w3Dj/XeSforvLiBX6PXItwyqx3NL/4Uso1U/t4Gol58RCjB9B1q+RjxJ2qOVHa1eGzRmGbzga3PGGn1/tDAWpk/DKsyhQmO9F1PDDdxIL+c='
 50 |       },
 51 |       viewer: {
 52 |         id: 'dwtViewer',
 53 |         width: '100%',
 54 |         height: '600px'
 55 |       }
 56 |     }
 57 |   },
 58 |   mounted () {
 59 |     this.mountDWT()
 60 |       .then(() => {
 61 |         // this.handleTabChange(0)
 62 |         this.initPanels()
 63 |         this.bindViewer()
 64 |       })
 65 |   },
 66 |   methods: {
 67 |     bindViewer () {
 68 |       this.$refs[this.viewer.id].mountViewer(this.dwt.obj)
 69 |     },
 70 |     mountDWT () {
 71 |       return new Promise((res, rej) => {
 72 |         this.unmountDWT()
 73 |           .then(() => {
 74 |             dwt.WebTwainEnv.UseLocalService = true;
 75 |             dwt.WebTwainEnv.ResourcesPath = "resources/dwt";
 76 |             dwt.WebTwainEnv.ProductKey = this.dwt.licenseKey
 77 |             dwt.WebTwainEnv.AutoLoad = false;
 78 |             dwt.WebTwainEnv.Containers = [];
 79 |             dwt.WebTwainEnv.IfAddMD5InUploadHeader = false;
 80 |             dwt.WebTwainEnv.IfConfineMaskWithinTheViewer = false;
 81 |             let dwtConfig = { WebTwainId: this.dwt.id }
 82 |             // By default, use local service is true
 83 |             dwt.WebTwainEnv.CreateDWTObjectEx(
 84 |                   dwtConfig, 
 85 |                   (dwtObject) => { this.dwt.obj = dwtObject; res(true);},
 86 |                   (errStr) => { console.log(`failed to initialize dwt, message: ${errStr}`); rej(false);}
 87 |             )
 88 |           })
 89 |       })
 90 |     },
 91 |     /**
 92 |      * Delete dwt instance
 93 |      */
 94 |     unmountDWT () {
 95 |       return new Promise((res, rej) => {
 96 |         if (dwt.WebTwainEnv.DeleteDWTObject(this.dwt.id)) {
 97 |           res(true)
 98 |         } else {
 99 |           rej(false)
100 |         }
101 |       })
102 |     },
103 |     initPanels () {
104 |       window.refs = this.$refs
105 |       this.$refs['scan-panel'].setupScan(this.dwt.obj)
106 |     },
107 |     handleTabChange (key) {
108 |       let loadOnSwitch = () => {
109 |         switch(key) {
110 |           case 0: { this.$refs['scan-panel'].setupScan(this.dwt.obj); break; }
111 |           case 1: { this.$refs['webcam-panel'].setupWebcam(dwt.Lib.detect.ssl, dwt.EnumDWT_VideoRotateMode, this.dwt.obj); break; }
112 |           case 2: { this.$refs['ocr-panel'].setupOcr(dwt.WebTwainEnv.ResourcesPath, true, this.dwt.obj, dwt.Lib); break; }
113 |         }
114 |       }
115 |       setTimeout(loadOnSwitch, 100)
116 |     }
117 |   },
118 | }
119 | </script>
120 | 
121 | <style scoped>
122 | #dwt-container {
123 |   display: flex;
124 |   height: inherit;
125 |   width: inherit;
126 | }
127 | #dwt-control {
128 |   max-width: 400px;
129 | }
130 | </style>


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-row class="text-center">
  4 |       <v-col cols="12">
  5 |         <v-img
  6 |           :src="require('../assets/logo.svg')"
  7 |           class="my-3"
  8 |           contain
  9 |           height="200"
 10 |         />
 11 |       </v-col>
 12 | 
 13 |       <v-col class="mb-4">
 14 |         <h1 class="display-2 font-weight-bold mb-3">
 15 |           Welcome to Vuetify
 16 |         </h1>
 17 | 
 18 |         <p class="subheading font-weight-regular">
 19 |           For help and collaboration with other Vuetify developers,
 20 |           <br>please join our online
 21 |           <a
 22 |             href="https://community.vuetifyjs.com"
 23 |             target="_blank"
 24 |           >Discord Community</a>
 25 |         </p>
 26 |       </v-col>
 27 | 
 28 |       <v-col
 29 |         class="mb-5"
 30 |         cols="12"
 31 |       >
 32 |         <h2 class="headline font-weight-bold mb-3">
 33 |           What's next?
 34 |         </h2>
 35 | 
 36 |         <v-row justify="center">
 37 |           <a
 38 |             v-for="(next, i) in whatsNext"
 39 |             :key="i"
 40 |             :href="next.href"
 41 |             class="subheading mx-3"
 42 |             target="_blank"
 43 |           >
 44 |             {{ next.text }}
 45 |           </a>
 46 |         </v-row>
 47 |       </v-col>
 48 | 
 49 |       <v-col
 50 |         class="mb-5"
 51 |         cols="12"
 52 |       >
 53 |         <h2 class="headline font-weight-bold mb-3">
 54 |           Important Links
 55 |         </h2>
 56 | 
 57 |         <v-row justify="center">
 58 |           <a
 59 |             v-for="(link, i) in importantLinks"
 60 |             :key="i"
 61 |             :href="link.href"
 62 |             class="subheading mx-3"
 63 |             target="_blank"
 64 |           >
 65 |             {{ link.text }}
 66 |           </a>
 67 |         </v-row>
 68 |       </v-col>
 69 | 
 70 |       <v-col
 71 |         class="mb-5"
 72 |         cols="12"
 73 |       >
 74 |         <h2 class="headline font-weight-bold mb-3">
 75 |           Ecosystem
 76 |         </h2>
 77 | 
 78 |         <v-row justify="center">
 79 |           <a
 80 |             v-for="(eco, i) in ecosystem"
 81 |             :key="i"
 82 |             :href="eco.href"
 83 |             class="subheading mx-3"
 84 |             target="_blank"
 85 |           >
 86 |             {{ eco.text }}
 87 |           </a>
 88 |         </v-row>
 89 |       </v-col>
 90 |     </v-row>
 91 |   </v-container>
 92 | </template>
 93 | 
 94 | <script>
 95 |   export default {
 96 |     name: 'HelloWorld',
 97 | 
 98 |     data: () => ({
 99 |       ecosystem: [
100 |         {
101 |           text: 'vuetify-loader',
102 |           href: 'https://github.com/vuetifyjs/vuetify-loader',
103 |         },
104 |         {
105 |           text: 'github',
106 |           href: 'https://github.com/vuetifyjs/vuetify',
107 |         },
108 |         {
109 |           text: 'awesome-vuetify',
110 |           href: 'https://github.com/vuetifyjs/awesome-vuetify',
111 |         },
112 |       ],
113 |       importantLinks: [
114 |         {
115 |           text: 'Documentation',
116 |           href: 'https://vuetifyjs.com',
117 |         },
118 |         {
119 |           text: 'Chat',
120 |           href: 'https://community.vuetifyjs.com',
121 |         },
122 |         {
123 |           text: 'Made with Vuetify',
124 |           href: 'https://madewithvuejs.com/vuetify',
125 |         },
126 |         {
127 |           text: 'Twitter',
128 |           href: 'https://twitter.com/vuetifyjs',
129 |         },
130 |         {
131 |           text: 'Articles',
132 |           href: 'https://medium.com/vuetify',
133 |         },
134 |       ],
135 |       whatsNext: [
136 |         {
137 |           text: 'Explore components',
138 |           href: 'https://vuetifyjs.com/components/api-explorer',
139 |         },
140 |         {
141 |           text: 'Select a layout',
142 |           href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
143 |         },
144 |         {
145 |           text: 'Frequently Asked Questions',
146 |           href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
147 |         },
148 |       ],
149 |     }),
150 |   }
151 | </script>
152 | 


--------------------------------------------------------------------------------
/src/components/panel/OCR.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="ocr-panel">
 3 |     <v-btn depressed color="primary" @click="doOCR">Recognize</v-btn>
 4 |     <div class="outlined-box">
 5 |       <p v-for="(text, idx) in result" :key="idx">{{ text }}</p>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: 'ocr-panel',
13 |   data () {
14 |     return {
15 |       ocrObj: null,
16 |       dwtLib: null,
17 |       result: ''
18 |     }
19 |   },
20 |   methods: {
21 |     setupOcr (resPath, downloadDLL, dwtObj, dwtLib) {
22 |       new Promise((res, rej) => {
23 |         const ocrObj = dwtObj.Addon.OCR
24 |         let corePath = resPath + '/addon/OCR.zip'
25 |         let langPath = resPath + '/addon/OCRBasicLanguages/English.zip'
26 | 
27 |         if (downloadDLL) {
28 |           ocrObj.Download(
29 |             corePath, 
30 |             this.setupOcr(resPath, false, dwtObj, dwtLib), 
31 |             (errCode, errStr) => {
32 |               rej({errCode: errCode, errStr: errStr})
33 |             }
34 |           )
35 |         } else {
36 |           ocrObj.DownloadLangData(
37 |             langPath,
38 |             () => { res([ocrObj, dwtLib]); },
39 |             (errCode, errStr) => { 
40 |               rej({errCode: errCode, errStr: errStr})
41 |             }
42 |           )
43 |         }
44 |       })
45 |       .then((ocr) => {
46 |         this.ocrObj = ocr[0]
47 |         this.dwtLib = ocr[1]
48 |       })
49 |     },
50 |     doOCR () {
51 |       this.ocrObj.SetLanguage('eng')
52 |       this.ocrObj.SetOutputFormat(0)
53 |       this.ocrObj.RecognizeSelectedImages(
54 |         (result) => {
55 |           let _textResult = this.dwtLib.base64.decode(result.Get()).split(/\r?\n/g)
56 |           let res = []
57 |            for (let i = 0; i < _textResult.length; i++) {
58 |             if (!_textResult[i].trim()) { continue }
59 |             res.push(_textResult[i].trim() + '\n')
60 |           }
61 |           this.result = res
62 |         },
63 |         (errCode, errStr) => {
64 |           console.error(`${errCode} - ${errStr}`)
65 |         }
66 |       )
67 |     }
68 |   }
69 | }
70 | </script>
71 | 
72 | <style scoped>
73 | .outlined-box {
74 |   border: 1px solid black;
75 | }
76 | </style>


--------------------------------------------------------------------------------
/src/components/panel/Scan.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="scan-panel">
  3 |     <!-- Source selection -->
  4 |     <v-select
  5 |       v-model="selectScanner"
  6 |       :items="scanners"
  7 |       item-value="id"
  8 |       item-text="text"
  9 |       label="Scanner Sources"
 10 |       outlined
 11 |     ></v-select>
 12 |     <!-- Resolution setting -->
 13 |     <v-select
 14 |       v-model="resolution"
 15 |       :items="resolutionOptions"
 16 |       item-text="text"
 17 |       item-value="val"
 18 |       label="Resolution"
 19 |       outlined
 20 |       return-object
 21 |     ></v-select>
 22 |     <!-- Color Mode -->
 23 |     <v-select
 24 |       v-model="colorMode"
 25 |       :items="colorModeOptions"
 26 |       item-text="text"
 27 |       item-value="val"
 28 |       label="Color Mode"
 29 |       outlined
 30 |       return-object
 31 |     ></v-select>
 32 |     <div class="flex">
 33 |       <!-- Show UI Control -->
 34 |       <v-switch
 35 |         v-model="showUI"
 36 |         label="Show UI"
 37 |       ></v-switch>
 38 |       <!-- Auto Feeder Control -->
 39 |       <v-switch
 40 |         v-model="autoFeeder"
 41 |         label="Auto Feeder"
 42 |       ></v-switch>
 43 |       <!-- Duplex Control -->
 44 |       <v-switch
 45 |         v-model="duplex"
 46 |         label="Duplex"
 47 |       ></v-switch>
 48 |     </div>
 49 |     <!-- Scan button -->
 50 |     <v-btn color="primary" depressed large @click="acquireImage">Scan</v-btn>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 | export default {
 56 |   name: 'scan-panel',
 57 |   props: [''],
 58 |   data () {
 59 |     return {
 60 |       dwtObj: null,
 61 |       selectScanner: null,
 62 |       scanners: [],
 63 |       colorMode: { val: 2, text: 'Color' },
 64 |       colorModeOptions: [
 65 |         { val: 0, text: 'Black & White' }, 
 66 |         { val: 1, text: 'Grayscale' },
 67 |         { val: 2, text: 'Color' }
 68 |       ],
 69 |       resolution: { val: 300, text: '300' },
 70 |       resolutionOptions: [
 71 |         { val: 100, text: '100' }, 
 72 |         { val: 150, text:'150' }, 
 73 |         { val: 300, text: '300' }
 74 |       ],
 75 |       showUI: true,
 76 |       autoFeeder: false,
 77 |       duplex: false
 78 |     }
 79 |   },
 80 |   methods: {
 81 |     acquireImage () {
 82 |       const DWObject = this.dwtObj;
 83 |       if (DWObject) {
 84 |         if (DWObject.UseLocalService) {
 85 |           let configure = {
 86 |             IfShowUI: this.showUI,
 87 |             PixelType: this.colorMode,
 88 |             Resolution: this.resolution,
 89 |             IfFeederEnabled: this.autoFeeder,
 90 |             IfDuplexEnabled: this.duplex,
 91 |             IfDisableSourceAfterAcquire: true,
 92 |             // Advance settings
 93 |             IfGetImageInfo: true,
 94 |             IfGetExtImageInfo: true,
 95 |             extendedImageInfoQueryLevel: 0
 96 |           }
 97 |           DWObject.SelectSourceByIndex(this.selectScanner)
 98 |           DWObject.AcquireImage(
 99 |             configure,
100 |             () => { DWObject.CloseSource() },
101 |             () => { DWObject.CloseSource() }
102 |           )
103 |         }
104 |       }
105 |     },
106 |     setupScan (dwtObj) {
107 |       this.dwtObj = dwtObj
108 |       this.scanners = dwtObj.GetSourceNames().map((scanner, idx) => { return { id: idx, text: scanner } })
109 |     }
110 |   }
111 | }
112 | </script>
113 | 
114 | <style scoped>
115 | .flex {
116 |   display: flex;
117 |   justify-content: left;
118 | }
119 | .flex > * {
120 |   margin-right: 12px;;
121 | }
122 | </style>


--------------------------------------------------------------------------------
/src/components/panel/Viewer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="viewer-container" :style="{ width:width, height: height }">
 3 |     <div :id="id" style="height: inherit;"></div>
 4 |     <div id="edit-button-group">
 5 |       <v-btn outlined tile color="grey darken-1" small @click="rotate(-1)">Rotate Left</v-btn>
 6 |       <v-btn outlined tile color="grey darken-1" small @click="rotate(1)">Rotate Right</v-btn>
 7 |       <v-btn outlined tile color="grey darken-1" small @click="flip()">Flip</v-btn>
 8 |       <v-btn outlined tile color="grey darken-1" small @click="mirror()">Mirror</v-btn>
 9 |       <v-btn tile dark depressed small @click="openEditor">Open Editor</v-btn>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name:'dwt-viewer',
17 |   props: ['id', 'width', 'height', 'dwtRef'],
18 |   data () {
19 |     return {
20 |       dwtObj: null,
21 |       viewerObj: null,  // reference of viewer instance
22 |       currIdx: 0,  // indicator of selected image
23 |     }
24 |   },
25 |   methods: {
26 |     mountViewer (dwtObj) {
27 |       if (!dwtObj) {
28 |         alert('WebTwain Object has not been initialized yet.')
29 |       } else {
30 |         let viewOptions = {
31 |           width: this.width,
32 |           height: this.height,
33 |           view: {
34 |             bShow: true,
35 |             Width: this.width,
36 |             Height: this.height
37 |           }
38 |         }
39 |         if (dwtObj.BindViewer(this.id, viewOptions)) {
40 |           this.dwtObj = dwtObj
41 |           this.viewerObj = this.dwtRef.Viewer
42 |           dwtObj.RegisterEvent('OnMouseClick', (idx) => { this.currIdx = idx })
43 |         }
44 |       }
45 |     },
46 |     rotate (direction) {
47 |       switch (direction) {
48 |         case -1:
49 |         case '-1': {
50 |           this.dwtObj.Rotate(this.currIdx, -90, true);
51 |           break;
52 |         }
53 |         case 1:
54 |         case '1': {
55 |           this.dwtObj.Rotate(this.currIdx, 90, true);
56 |           break;
57 |         }
58 |       }
59 |     },
60 |     flip: function() {
61 |       this.dwtObj.Flip(this.currIdx);
62 |     },
63 |     mirror: function() {
64 |       this.dwtObj.Mirror(this.currIdx);
65 |     },
66 |     openEditor: function () {
67 |       if (this.dwtObj) {
68 |         this.dwtObj.ShowImageEditor()
69 |       }
70 |     }
71 |   }
72 | }
73 | </script>
74 | 
75 | <style scoped>
76 | #viewer-container {
77 |   box-sizing: content-box;
78 |   text-align: center;
79 |   /* width: 100%;
80 |   height: inherit; */
81 | }
82 | #edit-button-group {
83 |   display: inline-block;
84 | }
85 | .inherit-width {
86 |   width: inherit;
87 | }
88 | .inherit-height {
89 |   height: inherit;
90 | }
91 | </style>
92 | 


--------------------------------------------------------------------------------
/src/components/panel/Webcam.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="webcam-panel">
  3 |     <!-- Source selection -->
  4 |     <v-select
  5 |       v-model="selectedWebcam"
  6 |       :items="webcamSources"
  7 |       item-value="val"
  8 |       item-text="text"
  9 |       label="Webcam Sources"
 10 |       outlined
 11 |     ></v-select>
 12 |     <!-- Resolution setting -->
 13 |     <v-select
 14 |       v-model="resolution"
 15 |       :items="resolutionOptions"
 16 |       item-text="text"
 17 |       item-value="val"
 18 |       label="Resolution"
 19 |       outlined
 20 |     ></v-select>
 21 |     <!-- Framerates -->
 22 |     <v-select
 23 |       v-model="framerate"
 24 |       :items="framerateOptions"
 25 |       item-text="text"
 26 |       item-value="val"
 27 |       label="Frame Rate"
 28 |       outlined
 29 |     ></v-select>
 30 |     <!-- Color Mode -->
 31 |     <v-select
 32 |       v-model="mediaType"
 33 |       :items="mediaTypeOptions"
 34 |       item-text="text"
 35 |       item-value="val"
 36 |       label="Media Type"
 37 |       outlined
 38 |     ></v-select>
 39 |     <!-- Rotation -->
 40 |     <v-select
 41 |       v-model="rotate"
 42 |       :items="rotationOptions"
 43 |       item-text="text"
 44 |       item-value="val"
 45 |       label="Rotation"
 46 |       outlined
 47 |     ></v-select>
 48 |     <!-- Operation button group -->
 49 |     <v-btn color="primary" depressed large @click="capture">Capture</v-btn>
 50 |     <v-btn depressed large @click="toggleLiveView">Live Viewing {{ liveViewing ? 'OFF':'ON' }}</v-btn>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 | export default {
 56 |   name: 'webcam-panel',
 57 |   props: ['ssl', 'rotateMode'],
 58 |   data () {
 59 |     return {
 60 |       dwtObj: null,
 61 |       webcamObj: null,
 62 |       selectedWebcam: null,
 63 |       webcamSources: [],
 64 |       resolution: null,
 65 |       resolutionOptions: [],
 66 |       mediaType: null,
 67 |       mediaTypeOptions: [],
 68 |       framerate: null,
 69 |       framerateOptions: [],
 70 |       rotate: 0,
 71 |       rotationOptions: [],
 72 |       liveViewing: false
 73 |     }
 74 |   },
 75 |   watch: {
 76 |     selectedWebcam () {
 77 |         this.updateWebcamOptions()
 78 |     }
 79 |   },
 80 |   methods: {
 81 |     setupWebcam (ssl, rotateMode, dwtObj) {
 82 |       this.dwtObj = dwtObj
 83 |       this.webcamObj = dwtObj.Addon.Webcam
 84 |       // Set rotate mode
 85 |       const rotation = [
 86 |         { text: 'OFF', val: rotateMode.VRM_NONE },
 87 |         { text: 'CLOCKWISE 90°', val: rotateMode.VRM_90_DEGREES_CLOCKWISE },
 88 |         { text: 'CLOCKWISE 180°', val: rotateMode.VRM_180_DEGREES_CLOCKWISE },
 89 |         { text: 'CLOCKWISE 270°', val: rotateMode.VRM_270_DEGREES_CLOCKWISE },
 90 |         { text: 'FLIP VERTICAL', val: rotateMode.VRM_FLIP_VERTICAL },
 91 |         { text: 'FLIP HORIZONTAL', val: rotateMode.VRM_FLIP_HORIZONTAL }
 92 |       ]
 93 |       this.rotationOptions = rotation
 94 |       // Set Default Webcam
 95 |       if (ssl) {
 96 |         dwtObj.IfSSL = true
 97 |         dwtObj.HTTPPort = 443
 98 |       }
 99 |       this.webcamSources = this.webcamObj.GetSourceList().map(e => { return { text: e, val: e } })
100 |     },
101 |     updateWebcamOptions () {
102 |       this.webcamObj.StopVideo()
103 |       this.webcamObj.SelectSource(this.selectedWebcam)
104 |       
105 |       function ObjToArr(obj) {
106 |         let count = obj.GetCount()
107 |         let arr = []
108 |         for (let i = 0; i < count; i++) {
109 |           arr.push({ text: obj.Get(i), val: obj.Get(i) })
110 |         }
111 |         return arr
112 |       }
113 | 
114 |       new Promise((res) => {
115 |         this.framerateOptions = ObjToArr(this.webcamObj.GetFrameRate())
116 |         this.resolutionOptions = ObjToArr(this.webcamObj.GetResolution())
117 |         this.mediaTypeOptions = ObjToArr(this.webcamObj.GetMediaType())
118 |         res()
119 |       })
120 |       .then(() => {
121 |         this.resolution = this.resolutionOptions[0]
122 |         this.mediaType = this.mediaTypeOptions[0]
123 |         this.framerate = this.framerateOptions[0]
124 |       })
125 |     },
126 |     updateWebcamSetting () {
127 |       if (this.liveViewing) { this.webcamObj.StopVideo() }
128 |       this.webcamObj.SetFrameRate(this.framerate)
129 |       this.webcamObj.SetMediaType(this.mediaType)
130 |       this.webcamObj.SetResolution(this.resolution)
131 |       this.webcamObj.SetVideoRotateMode(this.rotate)
132 |       if (this.liveViewing) { this.webcamObj.PlayVideo() }
133 |     },
134 |     capture () {
135 |       if (this.liveViewing) { this.toggleLiveView(false) }
136 |       this.webcamObj.CaptureImage(()=>{}, (errCode, errStr) => { console.error(`${errCode} - ${errStr}`) })
137 |     },
138 |     toggleLiveView () {
139 |       if (this.liveViewing) { this.setVideoPlayback(false) }
140 |       else { this.setVideoPlayback(true) }
141 |     },
142 |     setVideoPlayback (show) {
143 |       if (show) {
144 |         this.webcamObj.StopVideo()
145 |         setTimeout(
146 |           () => {
147 |             this.webcamObj.PlayVideo(this.dwtObj, 80, () => {})
148 |             this.liveViewing = true
149 |           },
150 |           30
151 |         )
152 |       } else {
153 |         this.webcamObj.StopVideo()
154 |         this.liveViewing = false
155 |       }
156 |     }
157 |   },
158 | }
159 | </script>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import vuetify from './plugins/vuetify';
 4 | import 'roboto-fontface/css/roboto/roboto-fontface.css'
 5 | import '@mdi/font/css/materialdesignicons.css'
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | new Vue({
10 |   vuetify,
11 |   render: h => h(App)
12 | }).$mount('#app')
13 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Vuetify from 'vuetify';
3 | import 'vuetify/dist/vuetify.min.css';
4 | 
5 | Vue.use(Vuetify);
6 | 
7 | export default new Vuetify({
8 | });
9 | 


--------------------------------------------------------------------------------