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">
        <canvas id="source-canvas" #sourceCanvasElement 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 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>