Skip to content

Commit fac02d4

Browse files
yushulxyushulx
committed
Update
1 parent 10e86a5 commit fac02d4

File tree

5 files changed

+159
-149
lines changed

5 files changed

+159
-149
lines changed

‎src/app/mrz-reader/mrz-reader.component.css‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -43,36 +43,4 @@ textarea {
4343
display: flex;
4444
justify-content: space-between;
4545
align-items: center;
46-
}
47-
48-
.loading-indicator {
49-
position: absolute;
50-
top: 0;
51-
left: 0;
52-
width: 100%;
53-
height: 100%;
54-
background-color: rgba(0, 0, 0, 0.5);
55-
z-index: 1000;
56-
display: flex;
57-
align-items: center;
58-
justify-content: center;
59-
}
60-
61-
.spinner {
62-
width: 50px;
63-
height: 50px;
64-
border: 5px solid #fff;
65-
border-radius: 50%;
66-
animation: spin 1s linear infinite;
67-
background: linear-gradient(to right, #FF0000 0%, #FF8000 17%, #FFFF00 33%, #00FF00 50%, #00FFFF 67%, #0080FF 83%, #0000FF 100%);
68-
}
69-
70-
@keyframes spin {
71-
from {
72-
transform: rotate(0deg);
73-
}
74-
75-
to {
76-
transform: rotate(360deg);
77-
}
7846
}

‎src/app/product-list/product-list.component.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
<div *ngIf="isLoading" id="loading-indicator" class="loading-indicator">
2+
<div class="spinner"></div>
3+
</div>
4+
15
<div>
26
<div>
37
Get a License key from <a

‎src/app/product-list/product-list.component.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import Dynamsoft from 'dwt';
1919
styleUrls: ['./product-list.component.css'],
2020
})
2121
export class ProductListComponent {
22+
isLoading = false;
2223
products = products;
2324
inputText: string = '';
2425
processedText: string = '';
@@ -28,7 +29,7 @@ export class ProductListComponent {
2829
}
2930

3031
async activate(): Promise<void> {
31-
32+
this.isLoading = true;
3233
this.processedText = this.inputText.toUpperCase();
3334
// Configure the paths where the .wasm files and other necessary resources for modules are located.
3435
CoreModule.engineResourcePaths = {
@@ -65,9 +66,10 @@ export class ProductListComponent {
6566
Dynamsoft.DWT.ResourcesPath = "assets/dynamic-web-twain";
6667
Dynamsoft.DWT.UseLocalService = true;
6768
} catch (error) {
68-
alert(error);
69+
console.log(error);
6970
}
7071

72+
this.isLoading = false;
7173
}
7274

7375
toggleDivVisibility(): void {

‎src/app/products.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ export interface Product {
88
export const products = [
99
{
1010
id: 'reader',
11-
name: 'Barcode and QR Code Reader',
11+
name: 'Barcode and QR Code Reader (File)',
1212
description: 'Scan barcode and QR code from image files',
1313
},
1414
{
1515
id: 'scanner',
16-
name: 'Barcode and QR Code Scanner',
16+
name: 'Barcode and QR Code Scanner (Camera)',
1717
description: 'Scan barcode and QR code from camera stream',
1818
},
1919
{
@@ -28,28 +28,28 @@ export const products = [
2828
},
2929
{
3030
id: 'mrz-reader',
31-
name: 'MRZ Reader',
31+
name: 'MRZ Reader (File)',
3232
description: 'Scan MRZ from image files',
3333
},
3434
{
3535
id: 'mrz-scanner',
36-
name: 'MRZ Scanner',
36+
name: 'MRZ Scanner (Camera)',
3737
description: 'Scan MRZ from camera stream',
3838
},
3939
{
4040
id: 'document-viewer',
41-
name: 'Document Viewer',
41+
name: 'Document Viewer (File)',
4242
description: 'View, edit and save documents',
4343
},
4444

4545
{
4646
id: 'acquire-image',
47-
name: 'Acquire Image',
47+
name: 'Acquire Image (TWAIN/SANE/ICA Scanner)',
4848
description: 'The basic document scanning functionality',
4949
},
5050
{
5151
id: 'image-editor',
52-
name: 'Image Editor',
52+
name: 'Image Editor (TWAIN/SANE/ICA Scanner)',
5353
description: 'Image editing: rotate, mirror, flip and more',
5454
},
5555
];

‎src/styles.css‎

Lines changed: 144 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,147 @@
11
/* Global Styles */
22

33
* {
4-
font-family: 'Roboto', Arial, sans-serif;
5-
color: #616161;
6-
box-sizing: border-box;
7-
-webkit-font-smoothing: antialiased;
8-
-moz-osx-font-smoothing: grayscale;
9-
}
10-
11-
body {
12-
margin: 0;
13-
}
14-
15-
.container {
16-
display: flex;
17-
flex-direction: row;
18-
}
19-
20-
router-outlet + * {
21-
padding: 0 16px;
22-
}
23-
24-
/* Text */
25-
26-
h1 {
27-
font-size: 32px;
28-
}
29-
30-
h2 {
31-
font-size: 20px;
32-
}
33-
34-
h1, h2 {
35-
font-weight: lighter;
36-
}
37-
38-
p {
39-
font-size: 14px;
40-
}
41-
42-
/* Hyperlink */
43-
44-
a {
45-
cursor: pointer;
46-
color: #1976d2;
47-
text-decoration: none;
48-
}
49-
50-
a:hover {
51-
opacity: 0.8;
52-
}
53-
54-
/* Input */
55-
56-
input {
57-
font-size: 14px;
58-
border-radius: 2px;
59-
padding: 8px;
60-
margin-bottom: 16px;
61-
border: 1px solid #BDBDBD;
62-
}
63-
64-
label {
65-
font-size: 12px;
66-
font-weight: bold;
67-
margin-bottom: 4px;
68-
display: block;
69-
text-transform: uppercase;
70-
}
71-
72-
/* Button */
73-
.button, button {
74-
display: inline-flex;
75-
align-items: center;
76-
padding: 8px 16px;
77-
border-radius: 2px;
78-
font-size: 14px;
79-
cursor: pointer;
80-
background-color: #1976d2;
81-
color: white;
82-
border: none;
83-
}
84-
85-
.button:hover, button:hover {
86-
opacity: 0.8;
87-
font-weight: normal;
88-
}
89-
90-
.button:disabled, button:disabled {
91-
opacity: 0.5;
92-
cursor: auto;
93-
}
94-
95-
/* Top Bar */
96-
97-
app-top-bar {
98-
width: 100%;
99-
height: 68px;
100-
background-color: #1976d2;
101-
padding: 16px;
102-
display: flex;
103-
flex-direction: row;
104-
justify-content: space-between;
105-
align-items: center;
106-
}
107-
108-
app-top-bar h1 {
109-
color: white;
110-
margin: 0;
111-
}
4+
font-family: 'Roboto', Arial, sans-serif;
5+
color: #616161;
6+
box-sizing: border-box;
7+
-webkit-font-smoothing: antialiased;
8+
-moz-osx-font-smoothing: grayscale;
9+
}
10+
11+
body {
12+
margin: 0;
13+
}
14+
15+
.container {
16+
display: flex;
17+
flex-direction: row;
18+
}
19+
20+
router-outlet+* {
21+
padding: 0 16px;
22+
}
23+
24+
/* Text */
25+
26+
h1 {
27+
font-size: 32px;
28+
}
29+
30+
h2 {
31+
font-size: 20px;
32+
}
33+
34+
h1,
35+
h2 {
36+
font-weight: lighter;
37+
}
38+
39+
p {
40+
font-size: 14px;
41+
}
42+
43+
/* Hyperlink */
44+
45+
a {
46+
cursor: pointer;
47+
color: #1976d2;
48+
text-decoration: none;
49+
}
50+
51+
a:hover {
52+
opacity: 0.8;
53+
}
54+
55+
/* Input */
56+
57+
input {
58+
font-size: 14px;
59+
border-radius: 2px;
60+
padding: 8px;
61+
margin-bottom: 16px;
62+
border: 1px solid #BDBDBD;
63+
}
64+
65+
label {
66+
font-size: 12px;
67+
font-weight: bold;
68+
margin-bottom: 4px;
69+
display: block;
70+
text-transform: uppercase;
71+
}
72+
73+
/* Button */
74+
.button,
75+
button {
76+
display: inline-flex;
77+
align-items: center;
78+
padding: 8px 16px;
79+
border-radius: 2px;
80+
font-size: 14px;
81+
cursor: pointer;
82+
background-color: #1976d2;
83+
color: white;
84+
border: none;
85+
}
86+
87+
.button:hover,
88+
button:hover {
89+
opacity: 0.8;
90+
font-weight: normal;
91+
}
92+
93+
.button:disabled,
94+
button:disabled {
95+
opacity: 0.5;
96+
cursor: auto;
97+
}
98+
99+
/* Top Bar */
100+
101+
app-top-bar {
102+
width: 100%;
103+
height: 68px;
104+
background-color: #1976d2;
105+
padding: 16px;
106+
display: flex;
107+
flex-direction: row;
108+
justify-content: space-between;
109+
align-items: center;
110+
}
111+
112+
app-top-bar h1 {
113+
color: white;
114+
margin: 0;
115+
}
116+
117+
.loading-indicator {
118+
position: absolute;
119+
top: 0;
120+
left: 0;
121+
width: 100%;
122+
height: 100%;
123+
background-color: rgba(0, 0, 0, 0.5);
124+
z-index: 1000;
125+
display: flex;
126+
align-items: center;
127+
justify-content: center;
128+
}
129+
130+
.spinner {
131+
width: 50px;
132+
height: 50px;
133+
border: 5px solid #fff;
134+
border-radius: 50%;
135+
animation: spin 1s linear infinite;
136+
background: linear-gradient(to right, #FF0000 0%, #FF8000 17%, #FFFF00 33%, #00FF00 50%, #00FFFF 67%, #0080FF 83%, #0000FF 100%);
137+
}
138+
139+
@keyframes spin {
140+
from {
141+
transform: rotate(0deg);
142+
}
143+
144+
to {
145+
transform: rotate(360deg);
146+
}
147+
}

0 commit comments

Comments
 (0)