All files / src/app/processing/interactions-visualization interactions-visualization.component.ts

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';
  }
}