feat(example-app): add partial mode to example-app

Author: michaelwolz

example-app/src/app/home/home.page.html

@@ -25,6 +25,9 @@
         Camera Preview</ion-button>
       <ion-button expand="block" color="secondary" class="action-button" (click)="showRearCameraPreview()">Show Rear
         Camera Preview</ion-button>
+      <div style="text-align: center; margin: 20px 0;">
+        <ion-checkbox label-placement="end" [(ngModel)]="partialMode">Partial</ion-checkbox>
+      </div>
       <ion-button expand="block" color="tertiary" class="action-button" (click)="stop()">Stop</ion-button>
       <ion-button expand="block" color="success" class="action-button" (click)="flip()">Flip</ion-button>
       <ion-button expand="block" color="warning" class="action-button" (click)="captureSample()">Capture

example-app/src/app/home/home.page.ts

@@ -1,44 +1,64 @@
 import { Component } from '@angular/core';
 import { NgIf } from '@angular/common';
 import {
-  IonHeader, IonButton, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent
+  IonHeader, IonButton, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonCheckbox
 } from '@ionic/angular/standalone';
 
 // NATIVE
 import { CameraPreview } from '@capacitor-community/camera-preview';
+import type { CameraPreviewOptions } from '@capacitor-community/camera-preview';
+import { FormsModule } from '@angular/forms';
+
+const DEFAULT_PREVIEW_OPTIONS: CameraPreviewOptions = {
+  parent: 'content',
+  disableAudio: true,
+  toBack: true,
+};
 
 @Component({
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
   imports: [
-    IonButton, IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, NgIf
+    IonButton, IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonCheckbox, NgIf, FormsModule
   ]
 })
 export class HomePage {
 
   public imageData: string | undefined;
 
+  protected partialMode = false;
+
   constructor() { }
 
   public async showFrontCameraPreview(): Promise<void> {
     this.imageData = undefined;
-    await CameraPreview.start({
-      parent: 'content',
-      toBack: true,
-      position: 'front',
-      disableAudio: true
-    });
+
+    const options = { ...DEFAULT_PREVIEW_OPTIONS, position: 'front' };
+    if (this.partialMode) {
+      options.x = 50;
+      options.y = 500;
+      options.width = 200;
+      options.height = 200;
+      options.toBack = false;
+    }
+
+    await CameraPreview.start(options);
   }
 
   public async showRearCameraPreview(): Promise<void> {
     this.imageData = undefined;
-    await CameraPreview.start({
-      parent: 'content',
-      toBack: true,
-      position: 'rear',
-      disableAudio: true
-    });
+
+    const options = { ...DEFAULT_PREVIEW_OPTIONS, position: 'rear' };
+    if (this.partialMode) {
+      options.x = 50;
+      options.y = 500;
+      options.width = 200;
+      options.height = 200;
+      options.toBack = false;
+    }
+
+    await CameraPreview.start(options);
   }
 
   public async stop(): Promise<void> {