Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 1x 7x 7x 7x 7x 7x 7x 7x 14x 1x 6x 5x 1x 1x 7x 14x 1x 13x 2x 2x 2x 2x 6x 6x 6x 3x 3x 1x 2x 1x 1x 1x | import { CommonModule } from '@angular/common';
import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { CompleteInteractionData, ElementPosition, ExtremumDescription, ExtremumType, FrameSizeDefinition, Interaction } from '@reflex/shared-types';
import { Subscription } from 'rxjs';
import { LogService } from 'src/app/log/log.service';
import { CalibrationService } from 'src/shared/services/calibration.service';
import { HistoryVisualizationComponent } from '../history-visualization/history-visualization.component';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-interactions-visualization',
templateUrl: './interactions-visualization.component.html',
styleUrls: ['./interactions-visualization.component.scss'],
imports: [
CommonModule,
FormsModule,
HistoryVisualizationComponent
]
})
export class InteractionsVisualizationComponent implements OnInit, OnDestroy {
@ViewChild('interactionVis')
public container?: ElementRef;
public interactions: CompleteInteractionData = { raw: [], absolute: [], normalized: [] };
public calibratedInteractions: Array<Interaction> = [];
public fullScreen = false;
public maxConfidence = 30;
private frameSizeSubscription?: Subscription;
private frameSize: FrameSizeDefinition = { top: 0, left: 0, width: 500, height: 400 };
private pEventId = 0;
public constructor(private readonly calibrationService: CalibrationService, private readonly logService: LogService) { }
public get eventId(): number {
return this.pEventId;
}
@Input()
public set eventId(value: number) {
this.pEventId = value;
}
public ngOnInit(): void {
this.frameSizeSubscription = this.calibrationService.getFrameSize().subscribe((result) => {
this.frameSize = result;
}, (error) => {
console.error(error);
this.logService.sendErrorLog(`${error}`);
});
}
public ngOnDestroy(): void {
this.frameSizeSubscription?.unsubscribe();
}
public getInteractionsViewStyle(): ElementPosition {
if (this.fullScreen) {
return {
position: 'absolute',
top: `${this.frameSize.top}px`,
left: `${this.frameSize.left}px`,
width: `${this.frameSize.width}px`,
height: `${this.frameSize.height}px`
};
}
return {
position: 'relative',
top: `0`,
left: `0`,
width: `100%`,
height: `40vh`
};
}
public updateCalibratedInteractions(result: CompleteInteractionData): void {
this.interactions = result;
this.calibratedInteractions = this.fullScreen ? result.absolute : result.normalized;
Iif (this.container === undefined) {
return;
}
this.calibratedInteractions.forEach((int) => {
int.position.x = this.fullScreen ? int.position.x - this.frameSize.left : int.position.x * ((this.container?.nativeElement as HTMLElement | undefined)?.clientWidth ?? 0);
int.position.y = this.fullScreen ? int.position.y - this.frameSize.top : int.position.y * ((this.container?.nativeElement as HTMLElement | undefined)?.clientHeight ?? 0);
int.position.z = Math.abs(int.position.z) * 2;
});
}
public getClass(extremum: ExtremumDescription): string {
const extremumDef = extremum.type;
if (extremumDef === ExtremumType.Undefined) {
return 'interaction-undefined';
}
if (extremumDef === ExtremumType.Maximum) {
return 'interaction-maximum';
}
if (extremumDef === ExtremumType.Minimum) {
return 'interaction-minimum';
}
return 'interaction-invalid';
}
}
|