kxip-app/src/app/ar-fan-cam/ar-fan-cam.page.html

<ion-content>
    
    <button class="back-button" (click)="back()"> <ion-icon name="close-outline"></ion-icon> </button>

    <div class="container" #containerElement>
        <img #glassesElement class="glass-image" [ngStyle]="glassProperties" src="/assets/ar-accessories/glass.png" alt=""/>
        <video id="playback-video" width="{{ width }}" height="{{ height }}" #videoElement autoPlay></video>
        <canvas id="result-canvas" #canvasElement width="{{ width }}" height="{{ height }}"></canvas>
    </div>

    <section class="temp-image" [ngClass]="{'active' : tempImg }">
        <img *ngIf="tempImg" src="{{ tempImg }}">
    </section>

    <div class="action-buttons" *ngIf="!tempImg">
        <!-- <button *ngIf="areNeuralNetsLoaded" (click)="stopCameraStream()">Stop stream</button> -->
        <!-- <button *ngIf="areNeuralNetsLoaded" (click)="toggleDetection()">{{ isDetecting ? 'Stop detection' : 'Detect and draw' }}</button> -->

        <button class="camera-button" (click)="capture()"> <ion-icon name="camera"></ion-icon> </button>

        <button class="skin-button" *ngIf="areNeuralNetsLoaded" (click)="toggleDetection()" 
        [ngClass]="{'active' : isDetecting }"> <ion-icon name="glasses"></ion-icon> </button>
    </div>

    <section class="image-action-buttons" *ngIf="tempImg">
        <button (click)="approveImage()"> <img src="assets/icons/emojis/thumb-up.png"> </button>
        <button (click)="tempImg = null"> <img src="assets/icons/emojis/thumb-up.png"> </button>
        
        <button> <ion-icon name="share-social-outline"></ion-icon> </button>
    </section>
</ion-content>