Skip to content
This repository was archived by the owner on Apr 4, 2023. It is now read-only.

Commit 327744a

Browse files
shiv19shiv19
committed
chore(UI): New UI for scanning screens
1 parent 733f9b1 commit 327744a

5 files changed

Lines changed: 202 additions & 66 deletions

File tree

‎demo-ng/app/app.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,4 +78,64 @@ button {
7878
Label.mlkit-result {
7979
margin: 5;
8080
text-align: left;
81+
color: white;
82+
}
83+
84+
.mask {
85+
background-color: rgba(0,0,0,0.2);
86+
}
87+
88+
.frame-top-left {
89+
border-top-width: 3;
90+
border-left-width: 3;
91+
border-color: #51B8ED;
92+
}
93+
94+
.frame-top-right {
95+
border-top-width: 3;
96+
border-right-width: 3;
97+
border-color: #51B8ED;
98+
}
99+
100+
.frame-bottom-left {
101+
border-bottom-width: 3;
102+
border-left-width: 3;
103+
border-color: #51B8ED;
104+
}
105+
106+
.frame-bottom-right {
107+
border-bottom-width: 3;
108+
border-right-width: 3;
109+
border-color: #51B8ED;
110+
}
111+
112+
.swing {
113+
animation-name: swingAnimation;
114+
animation-duration: 6s;
115+
animation-iteration-count: infinite;
116+
animation-timing-function: cubic-bezier(0.42,0,1,1);
117+
}
118+
119+
@keyframes swingAnimation {
120+
0% {
121+
transform: translate(0, 0);
122+
}
123+
50% {
124+
transform: translate(0, 300);
125+
}
126+
100% {
127+
transform: translate(0, 0);
128+
}
129+
}
130+
131+
.close-btn {
132+
border-radius: 15;
133+
background-color: rgba(0, 0, 0, 0.2);
134+
height: 25;
135+
width: 25;
136+
text-align: center;
137+
vertical-align: top;
138+
margin-top: 10;
139+
color: white;
140+
padding: 3;
81141
}

‎demo-ng/app/tabs/mlkit/barcodescanning/barcodescanning.component.html‎

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,44 @@
22
<Label class="action-bar-title" text="Barcode scanning"></Label>
33
</ActionBar>
44

5-
<GridLayout rows="auto, auto, *">
6-
7-
<Label row="0" text="The scanner has been configured to detect QR codes, EAN 8 and EAN 13. It processes every 5th frame (default 10). These settings can be tweaked in your usage of the plugin." textWrap="true"></Label>
8-
5+
<GridLayout>
96
<MLKitBarcodeScanner
10-
row="1"
11-
width="260"
12-
height="340"
137
formats="QR_CODE, EAN_8, EAN_13"
148
processEveryNthFrame="5"
159
(scanResult)="onBarcodeScanResult($event)">
1610
</MLKitBarcodeScanner>
17-
18-
<ListView row="2" [items]="barcodes" class="m-t-20">
19-
<ng-template let-item="item">
20-
<GridLayout columns="2*, 3*">
21-
<Label col="0" class="mlkit-result" textWrap="true" [text]="item.format"></Label>
22-
<Label col="1" class="mlkit-result" textWrap="true" [text]="item.value"></Label>
23-
</GridLayout>
24-
</ng-template>
25-
</ListView>
26-
11+
12+
<GridLayout rows="*, 320, *" columns="*, 5/6*, *">
13+
<Label class="mask" row="0" col="0" colSpan="3"></Label>
14+
<Label class="mask" row="2" col="0" colSpan="3"></Label>
15+
<Label class="mask" row="1" col="0"></Label>
16+
<Label class="mask" row="1" col="2"></Label>
17+
<GridLayout row="1" col="1" rows="1/6*, *, 1/6*" columns="1/6*, *, 1/6*">
18+
<Label class="frame-top-left" row="0" col="0"></Label>
19+
<Label class="frame-top-right" row="0" col="2"></Label>
20+
<Label class="frame-bottom-left" row="2" col="0"></Label>
21+
<Label class="frame-bottom-right" row="2" col="2"></Label>
22+
<StackLayout class="swing" row="0" col="0" colSpan="3">
23+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.1)"></Label>
24+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.2)"></Label>
25+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.3)"></Label>
26+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.4)"></Label>
27+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.5)"></Label>
28+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.6)"></Label>
29+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.7)"></Label>
30+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.8)"></Label>
31+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.9)"></Label>
32+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
33+
</StackLayout>
34+
</GridLayout>
35+
<Label row="0" col="1" class="text-center" textWrap="true" color="white" verticalAlignment="center" text="The scanner has been configured to detect QR codes, EAN 8 and EAN 13. It processes every 5th frame (default 10). These settings can be tweaked in your usage of the plugin."></Label>
36+
<ListView row="2" col="0" colSpan="3" [items]="barcodes" class="m-t-20">
37+
<ng-template let-item="item">
38+
<GridLayout columns="2*, 3*">
39+
<Label col="0" class="mlkit-result" textWrap="true" [text]="item.format"></Label>
40+
<Label col="1" class="mlkit-result" textWrap="true" [text]="item.value"></Label>
41+
</GridLayout>
42+
</ng-template>
43+
</ListView>
44+
</GridLayout>
2745
</GridLayout>

‎demo-ng/app/tabs/mlkit/facedetection/facedetection.component.html‎

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,48 @@
22
<Label class="action-bar-title" text="Face detection"></Label>
33
</ActionBar>
44

5-
<GridLayout rows="auto, auto, auto, auto, *">
6-
7-
<Label row="0" text="The scanner has been configured to detect faces every 30th frame (default is 10). You can tweak this in your usage of the plugin." textWrap="true"></Label>
8-
9-
<MLKitFaceDetection
10-
row="1"
11-
width="260"
12-
height="340"
13-
processEveryNthFrame="30"
14-
(scanResult)="onFaceDetectionResult($event)">
15-
</MLKitFaceDetection>
16-
17-
<Label row="2" [text]="mlKitAllOK" textWrap="true" class="m-t-10 c-purple"></Label>
18-
19-
<GridLayout row="3" columns="*, *, *" class="m-t-5">
20-
<Label col="0" class="mlkit-result font-weight-bold" textWrap="true" text="Smiling"></Label>
21-
<Label col="1" class="mlkit-result font-weight-bold" textWrap="true" text="Left 👁 open"></Label>
22-
<Label col="2" class="mlkit-result font-weight-bold" textWrap="true" text="Right 👁 open"></Label>
5+
<GridLayout rows="6/8*, 2/8*">
6+
<GridLayout row="0">
7+
<MLKitFaceDetection
8+
processEveryNthFrame="30"
9+
(scanResult)="onFaceDetectionResult($event)">
10+
</MLKitFaceDetection>
11+
12+
<GridLayout rows="*, 320, *" columns="*, 5/6*, *">
13+
<Label class="mask" row="0" col="0" colSpan="3"></Label>
14+
<Label class="mask" row="2" col="0" colSpan="3"></Label>
15+
<Label class="mask" row="1" col="0"></Label>
16+
<Label class="mask" row="1" col="2"></Label>
17+
<GridLayout row="1" col="1" rows="1/6*, *, 1/6*" columns="1/6*, *, 1/6*">
18+
<Label class="frame-top-left" row="0" col="0"></Label>
19+
<Label class="frame-top-right" row="0" col="2"></Label>
20+
<Label class="frame-bottom-left" row="2" col="0"></Label>
21+
<Label class="frame-bottom-right" row="2" col="2"></Label>
22+
<StackLayout class="swing" row="0" col="0" colSpan="3">
23+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.1)"></Label>
24+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.2)"></Label>
25+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.3)"></Label>
26+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.4)"></Label>
27+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.5)"></Label>
28+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.6)"></Label>
29+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.7)"></Label>
30+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.8)"></Label>
31+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.9)"></Label>
32+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
33+
</StackLayout>
34+
</GridLayout>
35+
<Label row="0" col="1" class="text-center" textWrap="true" color="white" verticalAlignment="center" text="The scanner has been configured to detect faces every 30th frame (default is 10). You can tweak this in your usage of the plugin."></Label>
36+
<StackLayout row="2" col="0" colSpan="3">
37+
<Label [text]="mlKitAllOK" textWrap="true" class="m-t-5 c-purple"></Label>
38+
<GridLayout columns="*, *, *" class="m-t-5">
39+
<Label col="0" class="mlkit-result font-weight-bold" textWrap="true" text="Smiling"></Label>
40+
<Label col="1" class="mlkit-result font-weight-bold" textWrap="true" text="Left 👁 open"></Label>
41+
<Label col="2" class="mlkit-result font-weight-bold" textWrap="true" text="Right 👁 open"></Label>
42+
</GridLayout>
43+
</StackLayout>
44+
</GridLayout>
2345
</GridLayout>
24-
25-
<ListView row="4" [items]="faces">
46+
<ListView backgroundColor="black" row="1" [items]="faces">
2647
<ng-template let-item="item">
2748
<GridLayout columns="*, *, *">
2849
<Label col="0" class="mlkit-result" [class.c-purple]="item.smilingProbability > 0.7" [text]="item.smilingProbability | number" textWrap="true"></Label>
@@ -31,5 +52,4 @@
3152
</GridLayout>
3253
</ng-template>
3354
</ListView>
34-
3555
</GridLayout>

‎demo-ng/app/tabs/mlkit/imagelabeling/imagelabeling.component.html‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,42 @@
22
<Label class="action-bar-title" text="Image labeling"></Label>
33
</ActionBar>
44

5-
<GridLayout rows="auto, *">
6-
5+
<GridLayout>
76
<MLKitImageLabeling
8-
row="0"
9-
width="260"
10-
height="340"
117
confidenceThreshold="0.6"
128
(scanResult)="onImageLabelingResult($event)">
139
</MLKitImageLabeling>
14-
15-
<ListView row="1" [items]="labels" class="m-t-20">
16-
<ng-template let-item="item">
17-
<GridLayout columns="3*, 2*">
18-
<Label col="0" class="mlkit-result" textWrap="true" [text]="item.text"></Label>
19-
<Label col="1" class="mlkit-result" textWrap="true" [text]="item.confidence | number"></Label>
20-
</GridLayout>
21-
</ng-template>
22-
</ListView>
23-
10+
11+
<GridLayout rows="*, 320, *" columns="*, 5/6*, *">
12+
<Label class="mask" row="0" col="0" colSpan="3"></Label>
13+
<Label class="mask" row="2" col="0" colSpan="3"></Label>
14+
<Label class="mask" row="1" col="0"></Label>
15+
<Label class="mask" row="1" col="2"></Label>
16+
<GridLayout row="1" col="1" rows="1/6*, *, 1/6*" columns="1/6*, *, 1/6*">
17+
<Label class="frame-top-left" row="0" col="0"></Label>
18+
<Label class="frame-top-right" row="0" col="2"></Label>
19+
<Label class="frame-bottom-left" row="2" col="0"></Label>
20+
<Label class="frame-bottom-right" row="2" col="2"></Label>
21+
<StackLayout class="swing" row="0" col="0" colSpan="3">
22+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.1)"></Label>
23+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.2)"></Label>
24+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.3)"></Label>
25+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.4)"></Label>
26+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.5)"></Label>
27+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.6)"></Label>
28+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.7)"></Label>
29+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.8)"></Label>
30+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.9)"></Label>
31+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
32+
</StackLayout>
33+
</GridLayout>
34+
<ListView row="0" rowSpan="3" col="0" colSpan="3" [items]="labels" class="m-t-20">
35+
<ng-template let-item="item">
36+
<GridLayout columns="3*, 2*">
37+
<Label col="0" class="mlkit-result" textWrap="true" [text]="item.text"></Label>
38+
<Label col="1" class="mlkit-result" textWrap="true" [text]="item.confidence | number"></Label>
39+
</GridLayout>
40+
</ng-template>
41+
</ListView>
42+
</GridLayout>
2443
</GridLayout>

‎demo-ng/app/tabs/mlkit/textrecognition/textrecognition.component.html‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,38 @@
22
<Label class="action-bar-title" text="Text recognition"></Label>
33
</ActionBar>
44

5-
<GridLayout rows="auto, *">
6-
5+
<GridLayout>
76
<MLKitTextRecognition
8-
row="0"
9-
width="260"
10-
height="340"
11-
(scanResult)="onTextRecognitionResult($event)">
7+
(scanResult)="onTextRecognitionResult($event)">
128
</MLKitTextRecognition>
13-
14-
<ListView row="1" [items]="blocks" class="m-t-20">
15-
<ng-template let-item="item">
16-
<Label class="mlkit-result" textWrap="true" [text]="item.text"></Label>
17-
</ng-template>
18-
</ListView>
19-
9+
10+
<GridLayout rows="*, 320, *" columns="*, 5/6*, *">
11+
<Label class="mask" row="0" col="0" colSpan="3"></Label>
12+
<Label class="mask" row="2" col="0" colSpan="3"></Label>
13+
<Label class="mask" row="1" col="0"></Label>
14+
<Label class="mask" row="1" col="2"></Label>
15+
<GridLayout row="1" col="1" rows="1/6*, *, 1/6*" columns="1/6*, *, 1/6*">
16+
<Label class="frame-top-left" row="0" col="0"></Label>
17+
<Label class="frame-top-right" row="0" col="2"></Label>
18+
<Label class="frame-bottom-left" row="2" col="0"></Label>
19+
<Label class="frame-bottom-right" row="2" col="2"></Label>
20+
<StackLayout class="swing" row="0" col="0" colSpan="3">
21+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.1)"></Label>
22+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.2)"></Label>
23+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.3)"></Label>
24+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.4)"></Label>
25+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.5)"></Label>
26+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.6)"></Label>
27+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.7)"></Label>
28+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.8)"></Label>
29+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.9)"></Label>
30+
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
31+
</StackLayout>
32+
</GridLayout>
33+
<ListView row="0" rowSpan="3" col="0" colSpan="3" [items]="blocks" class="m-t-20">
34+
<ng-template let-item="item">
35+
<Label class="mlkit-result" textWrap="true" [text]="item.text"></Label>
36+
</ng-template>
37+
</ListView>
38+
</GridLayout>
2039
</GridLayout>

0 commit comments

Comments
 (0)