156 lines
3.5 KiB
TypeScript
156 lines
3.5 KiB
TypeScript
import {
|
|
Component,
|
|
AfterViewInit,
|
|
OnDestroy,
|
|
ViewChild,
|
|
ElementRef,
|
|
ChangeDetectorRef,
|
|
CUSTOM_ELEMENTS_SCHEMA,
|
|
EventEmitter,
|
|
Output,
|
|
inject
|
|
} from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { MetricsTrackerService } from '../../../../services/metrics-tracker.service';
|
|
import '../../../../../assets/scripts/model-viewer';
|
|
|
|
|
|
@Component({
|
|
selector: 'app-text-legibility-assessment',
|
|
standalone: true,
|
|
imports: [CommonModule, FormsModule],
|
|
templateUrl: './text-legibility-assessment.component.html',
|
|
styleUrls: ['./text-legibility-assessment.component.css'],
|
|
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
|
})
|
|
export class TextLegibilityAssessmentComponent implements AfterViewInit, OnDestroy {
|
|
@ViewChild('modelViewer') modelViewerRef!: ElementRef<any>;
|
|
@Output() testComplete = new EventEmitter<void>();
|
|
@Output() redoTest = new EventEmitter<number>();
|
|
|
|
|
|
private metricsService = inject(MetricsTrackerService);
|
|
|
|
|
|
minSize = 2;
|
|
maxSize = 64;
|
|
currentSize = 16;
|
|
|
|
|
|
minSizeResult: number | null = null;
|
|
maxSizeResult: number | null = null;
|
|
comfortableSizeResult: number | null = null;
|
|
|
|
|
|
phase: 'min' | 'confirmedMin' | 'max' | 'confirmedMax' | 'comfortable' | 'confirmedComfort' = 'min';
|
|
|
|
|
|
private offsetApplied = false;
|
|
|
|
|
|
constructor(private cdr: ChangeDetectorRef) {
|
|
this.logInteraction = this.logInteraction.bind(this);
|
|
}
|
|
|
|
|
|
ngAfterViewInit() {
|
|
const mv = this.modelViewerRef.nativeElement;
|
|
mv.addEventListener('ar-status', (event: any) => {
|
|
if (event.detail.status === 'session-started') {
|
|
console.log('AR session started. Delaying startTracking call to ensure session is ready.');
|
|
this.metricsService.startTracking(mv, "text-legibility");
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
public logInteraction(event: Event) {
|
|
this.metricsService.logInteraction(event);
|
|
}
|
|
|
|
|
|
decrease() {
|
|
if (this.currentSize > this.minSize) this.currentSize--;
|
|
}
|
|
|
|
|
|
increase() {
|
|
if (this.currentSize < this.maxSize) this.currentSize++;
|
|
}
|
|
|
|
|
|
nextPhase() {
|
|
switch (this.phase) {
|
|
case 'min':
|
|
this.minSizeResult = this.currentSize;
|
|
this.phase = 'confirmedMin';
|
|
break;
|
|
case 'confirmedMin':
|
|
this.currentSize = this.maxSize;
|
|
this.phase = 'max';
|
|
break;
|
|
case 'max':
|
|
this.maxSizeResult = this.currentSize;
|
|
this.phase = 'confirmedMax';
|
|
break;
|
|
case 'confirmedMax':
|
|
this.currentSize = Math.floor((this.minSizeResult! + this.maxSizeResult!) / 2);
|
|
this.phase = 'comfortable';
|
|
break;
|
|
case 'comfortable':
|
|
this.comfortableSizeResult = this.currentSize;
|
|
this.phase = 'confirmedComfort';
|
|
break;
|
|
case 'confirmedComfort':
|
|
this.finishAssessment();
|
|
break;
|
|
}
|
|
}
|
|
resetToMid() {
|
|
this.currentSize = Math.floor((this.minSize + this.maxSize) / 2);
|
|
this.phase = 'min';
|
|
this.minSizeResult = null;
|
|
this.maxSizeResult = null;
|
|
this.comfortableSizeResult = null;
|
|
}
|
|
|
|
|
|
retry() {
|
|
this.redoTest.emit(1);
|
|
}
|
|
|
|
|
|
finishAssessment() {
|
|
const finalResults = {
|
|
minReadableSize: this.minSizeResult,
|
|
maxReadableSize: this.maxSizeResult,
|
|
comfortableReadableSize: this.comfortableSizeResult
|
|
};
|
|
|
|
|
|
this.metricsService.logInteraction(new CustomEvent('test-results', {
|
|
detail: {
|
|
testName: 'TextLegibility',
|
|
results: finalResults
|
|
}
|
|
}));
|
|
|
|
|
|
console.log(finalResults);
|
|
|
|
|
|
this.testComplete.emit();
|
|
}
|
|
|
|
|
|
ngOnDestroy() {
|
|
|
|
|
|
this.metricsService.stopTracking();
|
|
}
|
|
|
|
|
|
|
|
}
|