initial setup

src/app/components/test-suite/assessments/text-legibility-assessment/text-legibility-assessment.component.css

@@ -0,0 +1,5 @@
+
+.annotation {
+    line-height: 1.4;
+  }
+  

src/app/components/test-suite/assessments/text-legibility-assessment/text-legibility-assessment.component.html

@@ -0,0 +1,56 @@
+<div class="w-full h-screen relative">
+    <div class="absolute top-0 left-0 p-6 z-10 bg-white bg-opacity-80 rounded-br-lg">
+      <h3 class="text-lg font-bold">Assessment: Text Legibility Optimization</h3>
+      <p class="text-sm mt-2"><strong>Objective:</strong> Determine optimal text scaling for ceiling-AR applications.</p>
+      <p class="text-sm"><strong>Procedure:</strong> Adjust text size using the WebXR slider until it is clearly legible.</p>
+    </div>
+  
+    <model-viewer
+      #modelViewer
+      id="text-model"
+      src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
+      ar
+      ar-modes="webxr"
+      ar-placement="ceiling"
+      camera-orbit="0deg 75deg 2m"
+      reveal="manual"
+      class="w-full h-full"
+    >
+      <button slot="ar-button" class="bg-blue-500 text-white font-bold py-2 px-4 rounded-lg absolute bottom-4 right-4 z-10">
+        Enter WebXR - Text Size Test
+      </button>
+  
+      <!-- Hotspot with annotation text -->
+      <button class="hotspot" slot="hotspot-text" data-position="0.2 0.1 0.1" data-normal="0 1 0">
+        <div 
+          class="annotation" 
+          [ngStyle]="{'font-size.px': textSize}"
+          style="background: rgba(255,255,255,0.9); padding: 10px; border-radius: 5px; color: black; width: 250px;"
+        >
+          This sample text represents typical information display requirements for ceiling-AR applications.
+          Text must remain legible despite challenging viewing angles inherent to overhead displays.
+        </div>
+      </button>
+  
+      <!-- UI container for the text size slider, visible only in WebXR -->
+      <div
+        *ngIf="isInWebXR"
+        class="absolute bottom-24 left-1/2 -translate-x-1/2 flex flex-col items-center space-y-4 bg-black bg-opacity-60 p-5 rounded-xl"
+      >
+        <div class="flex flex-col items-center text-white w-64">
+          <label for="text-size-slider" class="text-sm font-medium mb-2">Text Size: {{ textSize }}px</label>
+          <input
+            id="text-size-slider"
+            type="range"
+            min="10"
+            max="32"
+            step="1"
+            [(ngModel)]="textSize"
+            (input)="updateTextSize()"
+            class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
+          />
+        </div>
+      </div>
+    </model-viewer>
+  </div>
+  

src/app/components/test-suite/assessments/text-legibility-assessment/text-legibility-assessment.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextLegibilityAssessmentComponent } from './text-legibility-assessment.component';
+
+describe('TextLegibilityAssessmentComponent', () => {
+  let component: TextLegibilityAssessmentComponent;
+  let fixture: ComponentFixture<TextLegibilityAssessmentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TextLegibilityAssessmentComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TextLegibilityAssessmentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/test-suite/assessments/text-legibility-assessment/text-legibility-assessment.component.ts

@@ -0,0 +1,42 @@
+import { Component, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-text-legibility-assessment',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './text-legibility-assessment.component.html',
+  styleUrl: './text-legibility-assessment.component.css',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class TextLegibilityAssessmentComponent implements AfterViewInit {
+  @ViewChild('modelViewer') modelViewerRef!: ElementRef<any>;
+
+  isInWebXR = false;
+  textSize = 16;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    const modelViewerElement = this.modelViewerRef.nativeElement;
+
+    modelViewerElement.addEventListener('enter-vr', () => {
+      this.isInWebXR = true;
+      this.cdr.detectChanges();
+    });
+
+    modelViewerElement.addEventListener('exit-vr', () => {
+      this.isInWebXR = false;
+      this.resetTextSize();
+      this.cdr.detectChanges();
+    });
+  }
+
+  updateTextSize() {
+  }
+
+  resetTextSize() {
+    this.textSize = 16;
+  }
+}