ar.component.html

<ActionBar title="Augmented Reality" flat="true">
  <ActionItem ios.position="left" (tap)="toggleTheMenu()">
    <Label class="mdi-actionitem mdi-menu" [text]="'mdi-hamburger' | fonticon"></Label>
  </ActionItem>
  <Label horizontalAlignment="center" class="semibold" text="Augmented Reality" *ngIf="isIOS"></Label>
  <!-- currently, loading this would crash the app when closed (need to fix the pause/resume in AR plugin) -->
  <!--<ActionItem ios.position="right" (tap)="showPluginInfo()">-->
  <!--<Label class="mdi-actionitem mdi-actionitem-right m-r-0" [text]="'mdi-information-outline' | fonticon"></Label>-->
  <!--</ActionItem>-->
</ActionBar>

<StackLayout class="page-wrapper p-20">
  <GridLayout rows="auto, *">
    <Label row="0" [text]="hint" class="hint" textWrap="true"></Label>
    <AR row="1"
        style="border-radius: 20"
        [debugLevel]="debugLevel"
        detectPlanes="true"
        showStatistics="true"
        [planeMaterial]="planeMaterial"
        (arLoaded)="arLoaded($event)"
        (planeDetected)="planeDetected($event)"
        (planeTapped)="planeTapped($event)">
      <GridLayout rows="auto, auto, auto, auto, auto" columns="*, 80" horizontalAlignment="right"
                  verticalAlignment="bottom" class="m-b-20 m-r-10">
        <Label row="0" text="Model" class="m-b-10 m-r-10" horizontalAlignment="right"></Label>
        <DropDown
            #dropDown
            row="0"
            col="1"
            class="m-b-10 semibold"
            style="text-align: center; padding: 5"
            color="#4cd966"
            [items]="models"
            [(ngModel)]="selectedModelIndex">
        </DropDown>
        <Label row="1" text="Flashlight" class="m-b-10 m-r-10" [class.disabled]="!flashlightActive"
               horizontalAlignment="right"></Label>
        <Switch row="1" col="1" class="m-b-10" [checked]="flashlightActive"
                (checkedChange)="toggleFlashlight($event)"></Switch>
        <Label row="2" text="Show stats" class="m-b-10 m-r-10" [class.disabled]="!statsEnabled"
               horizontalAlignment="right"></Label>
        <Switch row="2" col="1" class="m-b-10" [checked]="statsEnabled" (checkedChange)="toggleStats($event)"></Switch>
        <Label row="3" text="Show planes" class="m-b-10 m-r-10" [class.disabled]="!planesVisible"
               horizontalAlignment="right"></Label>
        <Switch row="3" col="1" class="m-b-10" [checked]="planesVisible"
                (checkedChange)="togglePlaneVisibility($event)"></Switch>
        <Label row="4" text="Detect planes" class="m-b-10 m-r-10" [class.disabled]="!planeDetectionActive"
               horizontalAlignment="right"></Label>
        <Switch row="4" col="1" class="m-b-10" [checked]="planeDetectionActive"
                (checkedChange)="togglePlaneDetection($event)"></Switch>
      </GridLayout>
    </AR>
  </GridLayout>
</StackLayout>