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

Commit c6e9a86

Browse files
EddyVerbruggenEddyVerbruggen
authored
Merge pull request #739 from shiv19/master
iOS ML Kit UI Fixes and misc
2 parents e5591b6 + f037f09 commit c6e9a86

9 files changed

Lines changed: 3307 additions & 3289 deletions

File tree

‎demo-ng/app/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ label {
2929

3030
button {
3131
background-color: #6494AA;
32-
padding: 8 10;
32+
padding: 6 8;
3333
margin: 4 8;
3434
font-size: 13;
3535
border-radius: 4;

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@
44

55
<GridLayout>
66
<MLKitBarcodeScanner
7+
width="100%" height="100%"
78
formats="QR_CODE, EAN_8, EAN_13"
8-
processEveryNthFrame="5"
9+
android:processEveryNthFrame="5"
10+
ios:processEveryNthFrame="10"
911
(scanResult)="onBarcodeScanResult($event)">
1012
</MLKitBarcodeScanner>
1113

@@ -32,8 +34,8 @@
3234
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
3335
</StackLayout>
3436
</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+
<Label row="0" col="1" class="text-center c-white" textWrap="true" 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>
38+
<ListView row="2" col="0" colSpan="3" [items]="barcodes" class="m-t-20" backgroundColor="transparent">
3739
<ng-template let-item="item">
3840
<GridLayout columns="2*, 3*">
3941
<Label col="0" class="mlkit-result" textWrap="true" [text]="item.format"></Label>

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

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55
<GridLayout rows="6/8*, 2/8*">
66
<GridLayout row="0">
77
<MLKitFaceDetection
8+
width="100%" height="100%"
89
processEveryNthFrame="30"
910
(scanResult)="onFaceDetectionResult($event)">
1011
</MLKitFaceDetection>
1112

12-
<GridLayout rows="*, 320, *" columns="*, 5/6*, *">
13+
<GridLayout rows="*, 250, *" columns="*, 5/6*, *">
1314
<Label class="mask" row="0" col="0" colSpan="3"></Label>
1415
<Label class="mask" row="2" col="0" colSpan="3"></Label>
1516
<Label class="mask" row="1" col="0"></Label>
@@ -32,23 +33,23 @@
3233
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
3334
</StackLayout>
3435
</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+
<Label row="0" col="1" class="text-center c-white" 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>
3637
<StackLayout row="2" col="0" colSpan="3">
3738
<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>
39+
<GridLayout row="auto" columns="*, *, *" class="m-t-5">
40+
<Label row="0" col="0" class="mlkit-result font-weight-bold" textWrap="true" text="Smiling"></Label>
41+
<Label row="0" col="1" class="mlkit-result font-weight-bold" textWrap="true" text="Left 👁 open"></Label>
42+
<Label row="0" col="2" class="mlkit-result font-weight-bold" textWrap="true" text="Right 👁 open"></Label>
4243
</GridLayout>
4344
</StackLayout>
4445
</GridLayout>
4546
</GridLayout>
4647
<ListView backgroundColor="black" row="1" [items]="faces">
4748
<ng-template let-item="item">
4849
<GridLayout columns="*, *, *">
49-
<Label col="0" class="mlkit-result" [class.c-purple]="item.smilingProbability > 0.7" [text]="item.smilingProbability | number" textWrap="true"></Label>
50-
<Label col="1" class="mlkit-result" [class.c-purple]="item.leftEyeOpenProbability > 0.7" [text]="item.leftEyeOpenProbability | number" textWrap="true"></Label>
51-
<Label col="2" class="mlkit-result" [class.c-purple]="item.rightEyeOpenProbability > 0.7" [text]="item.rightEyeOpenProbability | number" textWrap="true"></Label>
50+
<Label col="0" class="mlkit-result c-white" [class.c-purple]="item.smilingProbability > 0.7" [text]="item.smilingProbability | number" textWrap="true"></Label>
51+
<Label col="1" class="mlkit-result c-white" [class.c-purple]="item.leftEyeOpenProbability > 0.7" [text]="item.leftEyeOpenProbability | number" textWrap="true"></Label>
52+
<Label col="2" class="mlkit-result c-white" [class.c-purple]="item.rightEyeOpenProbability > 0.7" [text]="item.rightEyeOpenProbability | number" textWrap="true"></Label>
5253
</GridLayout>
5354
</ng-template>
5455
</ListView>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
<GridLayout>
66
<MLKitImageLabeling
7+
width="100%" height="100%"
78
confidenceThreshold="0.6"
89
(scanResult)="onImageLabelingResult($event)">
910
</MLKitImageLabeling>
@@ -31,7 +32,7 @@
3132
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
3233
</StackLayout>
3334
</GridLayout>
34-
<ListView row="0" rowSpan="3" col="0" colSpan="3" [items]="labels" class="m-t-20">
35+
<ListView separatorColor="transparent" row="0" rowSpan="3" col="0" colSpan="3" [items]="labels" class="m-t-20" backgroundColor="transparent">
3536
<ng-template let-item="item">
3637
<GridLayout columns="3*, 2*">
3738
<Label col="0" class="mlkit-result" textWrap="true" [text]="item.text"></Label>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22

33
<Label row="0" text="Pick the image processing source:" textWrap="true"></Label>
44

5-
<StackLayout row="1" orientation="horizontal" horizontalAlignment="center">
6-
<Button text="Cameraroll" (tap)="fromCameraroll()" class="button"></Button>
5+
<FlexboxLayout row="1" flexDirection="row" justifyContent="space-around">
6+
<Button text="Cameraroll" textWrap="true" (tap)="fromCameraroll()" class="button"></Button>
77
<!-- the image may require rotation on Android, and permission may be required - not feeling like exposing this for now -->
88
<iOS>
9-
<Button text="Cam picture" (tap)="fromCameraPicture()" class="button"></Button>
9+
<Button text="Cam picture" textWrap="true" (tap)="fromCameraPicture()" class="button"></Button>
1010
</iOS>
11-
<Button text="Cam feed" (tap)="fromCameraFeed()" class="button"></Button>
12-
</StackLayout>
11+
<Button text="Cam feed" textWrap="true" (tap)="fromCameraFeed()" class="button"></Button>
12+
</FlexboxLayout>
1313

1414
<Image row="2" [src]="pickedImage" width="240" horizontalAlignment="center" (tap)="reusePickedImage()"></Image>
1515

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
<GridLayout>
66
<MLKitTextRecognition
7+
width="100%" height="100%"
78
(scanResult)="onTextRecognitionResult($event)">
89
</MLKitTextRecognition>
910

@@ -30,7 +31,7 @@
3031
<Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
3132
</StackLayout>
3233
</GridLayout>
33-
<ListView row="0" rowSpan="3" col="0" colSpan="3" [items]="blocks" class="m-t-20">
34+
<ListView separatorColor="transparent" row="0" rowSpan="3" col="0" colSpan="3" [items]="blocks" class="m-t-20" backgroundColor="transparent">
3435
<ng-template let-item="item">
3536
<Label class="mlkit-result" textWrap="true" [text]="item.text"></Label>
3637
</ng-template>

‎src/mlkit/mlkit-cameraview.android.ts‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
2525
protected rotation;
2626
protected lastVisionImage;
2727
private detector: any;
28+
private camera;
2829

2930
disposeNativeView(): void {
3031
super.disposeNativeView();
@@ -34,6 +35,18 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
3435
}
3536
this.bytesToByteBuffer = new Map();
3637
this.surfaceView = null;
38+
39+
if (this.camera != null) {
40+
this.camera.stopPreview();
41+
this.camera.setPreviewCallbackWithBuffer(null);
42+
try {
43+
this.camera.setPreviewDisplay(null);
44+
} catch (e) {
45+
console.log(e);
46+
}
47+
this.camera.release();
48+
this.camera = null;
49+
}
3750
}
3851

3952
createNativeView(): Object {
@@ -99,9 +112,9 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
99112
break;
100113
}
101114
}
102-
const camera = android.hardware.Camera.open(requestedCameraId);
115+
this.camera = android.hardware.Camera.open(requestedCameraId);
103116

104-
const sizePair = this.selectSizePair(camera, 800, 600); // TODO based on wrapping frame
117+
const sizePair = this.selectSizePair(this.camera, 800, 600); // TODO based on wrapping frame
105118

106119
if (!sizePair) {
107120
console.log("Could not find suitable preview size.");
@@ -111,15 +124,15 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
111124
let pictureSize = sizePair.pictureSize;
112125
let previewSize = sizePair.previewSize;
113126

114-
const parameters = camera.getParameters();
127+
const parameters = this.camera.getParameters();
115128

116129
if (pictureSize) {
117130
parameters.setPictureSize(pictureSize.width, pictureSize.height);
118131
}
119132
parameters.setPreviewSize(previewSize.width, previewSize.height);
120133
parameters.setPreviewFormat(android.graphics.ImageFormat.NV21);
121134

122-
this.setRotation(camera, parameters, requestedCameraId);
135+
this.setRotation(this.camera, parameters, requestedCameraId);
123136

124137
if (parameters.getSupportedFocusModes().contains(android.hardware.Camera.Parameters.FOCUS_MODE_CONTINUOUS_VIDEO)) {
125138
parameters.setFocusMode(android.hardware.Camera.Parameters.FOCUS_MODE_CONTINUOUS_VIDEO);
@@ -129,7 +142,7 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
129142
}
130143

131144
// TODO this setter seems odd, but it's part of the example: https://github.com/firebase/quickstart-android/blob/0f4c86877fc5f771cac95797dffa8bd026dd9dc7/mlkit/app/src/main/java/com/google/firebase/samples/apps/mlkit/CameraSource.java#L312
132-
camera.setParameters(parameters);
145+
this.camera.setParameters(parameters);
133146

134147
this.detector = this.createDetector();
135148
const onSuccessListener = this.createSuccessListener();
@@ -144,7 +157,7 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
144157
.build();
145158

146159
let throttle = 0;
147-
camera.setPreviewCallbackWithBuffer(new android.hardware.Camera.PreviewCallback({
160+
this.camera.setPreviewCallbackWithBuffer(new android.hardware.Camera.PreviewCallback({
148161
onPreviewFrame: (byteArray, camera) => {
149162

150163
if (this.pendingFrameData !== null) {
@@ -175,13 +188,13 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
175188
}
176189
}));
177190

178-
camera.addCallbackBuffer(this.createPreviewBuffer(previewSize));
179-
camera.addCallbackBuffer(this.createPreviewBuffer(previewSize));
180-
camera.addCallbackBuffer(this.createPreviewBuffer(previewSize));
181-
camera.addCallbackBuffer(this.createPreviewBuffer(previewSize));
191+
this.camera.addCallbackBuffer(this.createPreviewBuffer(previewSize));
192+
this.camera.addCallbackBuffer(this.createPreviewBuffer(previewSize));
193+
this.camera.addCallbackBuffer(this.createPreviewBuffer(previewSize));
194+
this.camera.addCallbackBuffer(this.createPreviewBuffer(previewSize));
182195

183-
camera.setPreviewDisplay(surfaceHolder);
184-
camera.startPreview();
196+
this.camera.setPreviewDisplay(surfaceHolder);
197+
this.camera.startPreview();
185198

186199
}, 500); // TODO 500 works fine on my device, but would be wise to explore the boundaries
187200
}

‎src/mlkit/mlkit-cameraview.ios.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
5656

5757
// begin the session
5858
this.captureSession = AVCaptureSession.new();
59-
this.captureSession.sessionPreset = AVCaptureSessionPreset1280x720;
59+
this.captureSession.sessionPreset = AVCaptureSessionPreset960x540;
6060

6161
const captureDeviceInput = AVCaptureDeviceInput.deviceInputWithDeviceError(this.captureDevice);
6262
this.captureSession.addInput(captureDeviceInput);

0 commit comments

Comments
 (0)