Skip to content

Commit 31d601d

Browse files
triniwiztriniwiz
committed
fix: detection, torch & pause
fixes : #15 fixes : #16 fixes : #17 fixes : #18 fixes : #19
1 parent 353ede1 commit 31d601d

File tree

35 files changed

+190
-114
lines changed

35 files changed

+190
-114
lines changed

‎apps/demo-angular/src/app.module.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@ import { NativeScriptModule } from '@nativescript/angular';
44
import { AppComponent } from './app.component';
55
import { AppRoutingModule } from './app-routing.module';
66
import { HomeComponent } from './home.component';
7+
import { MLKitModule } from '@nativescript/mlkit-core/angular';
78

89
@NgModule({
910
schemas: [NO_ERRORS_SCHEMA],
1011
declarations: [AppComponent, HomeComponent],
1112
bootstrap: [AppComponent],
12-
imports: [NativeScriptModule, AppRoutingModule],
13+
imports: [NativeScriptModule, AppRoutingModule, MLKitModule],
1314
})
1415
export class AppModule {}

‎apps/demo-angular/src/app.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ button, label, stack-layout {
66
}
77

88
button {
9-
font-size: 36;
9+
font-size: 16;
1010
}
1111

1212
.title {

‎apps/demo-angular/src/home.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<ActionBar title="Demos"></ActionBar>
33
</ActionBar>
44
<GridLayout>
5-
<ListView [items]="demos">
5+
<ListView [items]="demos" (itemTap)="onTap($event)">
66
<ng-template let-item="item" let-i="index">
77
<GridLayout class="p-y-10">
8-
<Label [text]="item.name" [nsRouterLink]="['/' + item.name]"></Label>
8+
<Label [text]="item.name"></Label>
99
</GridLayout>
1010
</ng-template>
1111
</ListView>

‎apps/demo-angular/src/home.component.ts

+35-27
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,45 @@
11
import { Component } from '@angular/core';
2+
import { RouterExtensions } from '@nativescript/angular';
23

34
@Component({
45
selector: 'demo-home',
56
templateUrl: 'home.component.html',
67
})
78
export class HomeComponent {
89
demos = [
9-
{
10-
name: 'mlkit-barcode-scanning'
11-
},
12-
{
13-
name: 'mlkit-core'
14-
},
15-
{
16-
name: 'mlkit-digital-ink-recognition'
17-
},
18-
{
19-
name: 'mlkit-face-detection'
20-
},
21-
{
22-
name: 'mlkit-image-labeling'
23-
},
24-
{
25-
name: 'mlkit-object-detection'
26-
},
27-
{
28-
name: 'mlkit-pose-detection'
29-
},
30-
{
31-
name: 'mlkit-selfie-segmentation'
32-
},
33-
{
34-
name: 'mlkit-text-recognition'
10+
{
11+
name: 'mlkit-barcode-scanning'
12+
},
13+
{
14+
name: 'mlkit-core'
15+
},
16+
{
17+
name: 'mlkit-digital-ink-recognition'
18+
},
19+
{
20+
name: 'mlkit-face-detection'
21+
},
22+
{
23+
name: 'mlkit-image-labeling'
24+
},
25+
{
26+
name: 'mlkit-object-detection'
27+
},
28+
{
29+
name: 'mlkit-pose-detection'
30+
},
31+
{
32+
name: 'mlkit-selfie-segmentation'
33+
},
34+
{
35+
name: 'mlkit-text-recognition'
36+
}
37+
];
38+
39+
constructor(private router: RouterExtensions) { }
40+
41+
onTap(event) {
42+
const item = this.demos[event.index];
43+
this.router.navigate(['/' + item.name]);
3544
}
36-
];
3745
}

‎apps/demo-angular/src/plugin-demos/mlkit-barcode-scanning.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Component, NgZone } from '@angular/core';
22
import { DemoSharedMlkitBarcodeScanning } from '@demo/shared';
3-
import { } from '@nativescript/mlkit-barcode-scanning';
43

54
@Component({
65
selector: 'demo-mlkit-barcode-scanning',

‎apps/demo-angular/src/plugin-demos/mlkit-core.component.html

+14-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
<ActionBar title="mlkit-core" class="action-bar"> </ActionBar>
22
<StackLayout class="p-20">
3-
<ScrollView class="h-full">
4-
<StackLayout>
5-
<Button text="Test mlkit-core" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
6-
</StackLayout>
7-
</ScrollView>
8-
</StackLayout>
3+
<GridLayout rows="*,auto,auto,auto,auto,auto,auto,auto,auto,auto" height="100%">
4+
<MLKitView [torchOn]="torchOn" [pause]="isPaused" height="100%" rowSpan="3" (loaded)="onLoaded($event)" cameraPosition="back"
5+
[detectionType]="detectorType" (detection)="onDetection($event)"></MLKitView>
6+
<Button row="1" height="40" text="Toggle Camera" (tap)="toggleCamera($event)"></Button>
7+
<Button row="2" height="40" text="Request Camera Permission" (tap)="requestPermission($event)"></Button>
8+
<Label row="3" [text]="'Detecting ' + detectorType"></Label>
9+
<Button row="4" height="40" text="Change Detector Type" (tap)="changeType($event)"></Button>
10+
<Label row="5" [text]="'isPaused : ' + isPaused"></Label>
11+
<Button row="6" height="40" text="Toggle Pause" (tap)="togglePause($event)"></Button>
12+
<Label row="7" [text]="'Torch On : ' + torchOn"></Label>
13+
<Button row="8" height="40" text="Toggle Torch" (tap)="toggleTorch($event)"></Button>
14+
<Button row="9" height="40" text="Process Still Image" (tap)="processStill($event)"></Button>
15+
</GridLayout>
16+
</StackLayout>

‎apps/demo-angular/src/plugin-demos/mlkit-core.component.ts

+70-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,83 @@
11
import { Component, NgZone } from '@angular/core';
22
import { DemoSharedMlkitCore } from '@demo/shared';
3-
import { } from '@nativescript/mlkit-core';
3+
import { Dialogs, ImageSource } from '@nativescript/core';
4+
import { DetectionEvent, DetectionType, detectWithStillImage, MLKitView } from '@nativescript/mlkit-core';
45

56
@Component({
6-
selector: 'demo-mlkit-core',
7-
templateUrl: 'mlkit-core.component.html',
7+
selector: 'demo-mlkit-core',
8+
templateUrl: 'mlkit-core.component.html',
89
})
910
export class MlkitCoreComponent {
10-
11+
12+
camera: MLKitView;
13+
detectorType = DetectionType.All;
14+
isPaused = true;
15+
torchOn = true;
1116
demoShared: DemoSharedMlkitCore;
12-
13-
constructor(private _ngZone: NgZone) {}
17+
18+
constructor(private _ngZone: NgZone) { }
1419

1520
ngOnInit() {
1621
this.demoShared = new DemoSharedMlkitCore();
1722
}
23+
onLoaded(args) {
24+
this.camera = args.object;
25+
}
26+
27+
onDetection(event: DetectionEvent) {
28+
console.log('onDetection', event.data, event.type);
29+
}
30+
31+
toggleCamera(args) {
32+
this.camera.toggleCamera();
33+
}
34+
35+
requestPermission(args) {
36+
this.camera.requestCameraPermission();
37+
}
38+
39+
changeType(args) {
40+
Dialogs.action('Change Detector Type', 'Cancel', [
41+
'all',
42+
'barcode',
43+
'digitalInk (unsupport atm)',
44+
'face',
45+
'image',
46+
'object',
47+
'pose',
48+
'text',
49+
'none'
50+
]).then(value => {
51+
if (value === 'Cancel') { return }
52+
if (value.indexOf('digitalInk') > -1) {
53+
Dialogs.alert('digitalInk is currently unsupported');
54+
this.detectorType = DetectionType.None;
55+
} else {
56+
this.detectorType = value as any;
57+
}
58+
})
59+
}
60+
61+
togglePause(args) {
62+
this.camera.pause = !this.camera.pause;
63+
this.isPaused = this.camera.pause;
64+
}
65+
66+
toggleTorch(args) {
67+
this.camera.torchOn = !this.camera.torchOn;
68+
this.torchOn = this.camera.torchOn;
69+
}
70+
71+
async processStill(args) {
72+
try {
73+
const src = await ImageSource.fromUrl('https://www.jqueryscript.net/images/jQuery-Plugin-To-Generate-International-Article-Number-Barcode-EAN13.jpg');
74+
const result = await detectWithStillImage(src, {
75+
detectorType: DetectionType.Barcode
76+
});
77+
console.log('processStill', result.barcode[0]);
78+
} catch (e) {
79+
console.log(e);
80+
}
81+
}
1882

1983
}

‎apps/demo-angular/src/plugin-demos/mlkit-digital-ink-recognition.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Component, NgZone } from '@angular/core';
22
import { DemoSharedMlkitDigitalInkRecognition } from '@demo/shared';
3-
import { } from '@nativescript/mlkit-digital-ink-recognition';
43

54
@Component({
65
selector: 'demo-mlkit-digital-ink-recognition',

‎apps/demo-angular/src/plugin-demos/mlkit-face-detection.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Component, NgZone } from '@angular/core';
22
import { DemoSharedMlkitFaceDetection } from '@demo/shared';
3-
import { } from '@nativescript/mlkit-face-detection';
43

54
@Component({
65
selector: 'demo-mlkit-face-detection',

‎apps/demo-angular/src/plugin-demos/mlkit-image-labeling.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Component, NgZone } from '@angular/core';
22
import { DemoSharedMlkitImageLabeling } from '@demo/shared';
3-
import { } from '@nativescript/mlkit-image-labeling';
43

54
@Component({
65
selector: 'demo-mlkit-image-labeling',

‎apps/demo-angular/src/plugin-demos/mlkit-object-detection.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Component, NgZone } from '@angular/core';
22
import { DemoSharedMlkitObjectDetection } from '@demo/shared';
3-
import { } from '@nativescript/mlkit-object-detection';
43

54
@Component({
65
selector: 'demo-mlkit-object-detection',

‎apps/demo-angular/src/plugin-demos/mlkit-pose-detection.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Component, NgZone } from '@angular/core';
22
import { DemoSharedMlkitPoseDetection } from '@demo/shared';
3-
import { } from '@nativescript/mlkit-pose-detection';
43

54
@Component({
65
selector: 'demo-mlkit-pose-detection',

‎apps/demo-angular/src/plugin-demos/mlkit-selfie-segmentation.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Component, NgZone } from '@angular/core';
22
import { DemoSharedMlkitSelfieSegmentation } from '@demo/shared';
3-
import { } from '@nativescript/mlkit-selfie-segmentation';
43

54
@Component({
65
selector: 'demo-mlkit-selfie-segmentation',

‎apps/demo-angular/src/plugin-demos/mlkit-text-recognition.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Component, NgZone } from '@angular/core';
22
import { DemoSharedMlkitTextRecognition } from '@demo/shared';
3-
import { } from '@nativescript/mlkit-text-recognition';
43

54
@Component({
65
selector: 'demo-mlkit-text-recognition',

‎apps/demo/src/plugin-demos/mlkit-core.xml

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</ActionBar>
55
</Page.actionBar>
66
<GridLayout rows="*,auto,auto,auto,auto,auto,auto,auto" height="100%">
7-
<ui:MLKitView pause="true" height="100%" rowSpan="3" loaded="{{ onLoaded }}" cameraPosition="back" detectionType="{{ detectorType }}" detection="{{ onDetection }}"/>
7+
<ui:MLKitView pause="false" height="100%" rowSpan="3" loaded="{{ onLoaded }}" cameraPosition="back" detectionType="{{ detectorType }}" detection="{{ onDetection }}"/>
88
<Button row="1" height="40" text="Toggle Camera" tap="{{ toggleCamera }}" />
99
<Button row="2" height="40" text="Request Camera Permission" tap="{{ requestPermission }}" />
1010
<Label row="3" text="{{'Detecting ' + detectorType }}"/>

‎packages/mlkit-barcode-scanning/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nativescript/mlkit-barcode-scanning",
3-
"version": "1.0.0-alpha.3",
3+
"version": "1.0.0-alpha.4",
44
"description": "NativeScript MLKit Barcode Scanner module",
55
"main": "index",
66
"typings": "index.d.ts",

‎packages/mlkit-core/index.ios.ts

+28-22
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,33 @@ export class MLKitView extends MLKitViewBase {
3838
#selfieSegmentationOptions: MLKSelfieSegmenterOptions;
3939

4040
#mlkitHelper: TNSMLKitHelper;
41+
_onScanCallback: (result: any, type) => void;
4142

4243
constructor() {
4344
super();
4445
this.#mlkitHelper = TNSMLKitHelper.alloc().init();
45-
this.#mlkitHelper.onScanCallback = this._onScanCallback;
46+
47+
const ref = new WeakRef(this);
48+
const _onScanCallback = (result: any, type) => {
49+
const owner = ref.get?.();
50+
if (owner) {
51+
if (owner.detectionType === DetectionType.None || !owner.hasListeners?.(MLKitView.detectionEvent)) {
52+
return;
53+
}
54+
try {
55+
const data = JSON.parse(result);
56+
owner.notify(<DetectionEvent>{
57+
eventName: MLKitView.detectionEvent,
58+
object: owner,
59+
data,
60+
type
61+
})
62+
} catch (e) { }
63+
}
64+
}
65+
66+
this._onScanCallback = _onScanCallback;
67+
this.#mlkitHelper.onScanCallback = _onScanCallback;
4668
}
4769

4870
createNativeView() {
@@ -53,6 +75,11 @@ export class MLKitView extends MLKitViewBase {
5375
return nativeView;
5476
}
5577

78+
initNativeView() {
79+
super.initNativeView();
80+
this.#setupDetectors();
81+
}
82+
5683
get _device() {
5784
return this.#device;
5885
}
@@ -199,27 +226,6 @@ export class MLKitView extends MLKitViewBase {
199226
}
200227
}
201228

202-
203-
initNativeView() {
204-
super.initNativeView();
205-
this.#setupDetectors();
206-
}
207-
208-
_onScanCallback(result: any, type) {
209-
if (this.detectionType === DetectionType.None || !this.hasListeners?.(MLKitView.detectionEvent)) {
210-
return;
211-
}
212-
try {
213-
const data = JSON.parse(result);
214-
this.notify(<DetectionEvent>{
215-
eventName: MLKitView.detectionEvent,
216-
object: this,
217-
data,
218-
type
219-
})
220-
} catch (e) { }
221-
}
222-
223229
#setSelfieSegmentation() {
224230
if (!SELFIE_SEGMENTATION_SUPPORTED()) {
225231
return;

‎packages/mlkit-core/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nativescript/mlkit-core",
3-
"version": "1.0.0-alpha.3",
3+
"version": "1.0.0-alpha.4",
44
"description": "NativeScript MLKit Core",
55
"main": "index",
66
"typings": "index.d.ts",

‎packages/mlkit-core/platforms/android/include.gradle

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ allprojects {
66
}
77

88
dependencies {
9-
implementation 'io.github.triniwiz:fancycamera:3.0.0-alpha.32'
9+
implementation 'io.github.triniwiz:fancycamera:3.0.0-alpha.34'
1010
}
1111

1212

0 commit comments

Comments
 (0)