All files / tools/ReFlex.TrackingServer/ClientApp/src/app/tracking tracking.component.html

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
114
115
116
117
118
119
120
121
122
123
124
125
126
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="content-panel">
  <div class="settings content">
    <app-panel-header
      class="content__header"
      elementTitle="Camera Configuration"
      elementId="tracking-camera"
      [(data)]="isActive"
      (change)="start()"
      [disabled]="selectedCameraIdx < 0 || selectedConfigurationIdx < 0"
    >
    </app-panel-header>
    <h3
      class="heading-tertiary"
      [ngClass]="{ success: isActive, error: !isActive }"
    >
      {{ statusText }}
    </h3>
    <p class="settings__status-detail">{{ statusDetailsText }}</p>
    <app-value-selection
      Title="Camera"
      ElementId="tracking-camera-select"
      class="settings__item"
    >
      <select
        selection
        [(ngModel)]="selectedCameraIdx"
        class="custom-select"
        data-enpassusermodified="yes"
        name="tracking-camera-select"
        id="tracking-camera-select"
        (change)="updateConfigurations()"
        title="Camera Selection"
      >
        @for (cam of cameras; track cam; let i = $index) {
        <option [ngValue]="i">{{ cam.modelDescription }}</option>
        }
      </select>
      <p description>
        Select one of the available Cameras from the list. If camera is not
        listed, check log for details.
      </p>
    </app-value-selection>
 
    <app-value-selection
      Title="Configuration"
      ElementId="tracking-configuration-select"
      class="settings__item"
    >
      <select
        selection
        [(ngModel)]="selectedConfigurationIdx"
        class="custom-select"
        data-enpassusermodified="yes"
        name="tracking-configuration-select"
        id="tracking-configuration-select"
        (change)="updateState()"
        title="Camera Configuration Selection"
      >
        @for (cfg of configurations; track cfg; let i = $index) {
        <option [ngValue]="i">
          {{ getConfigDescription(cfg) }}
        </option>
        }
      </select>
      <p description>
        Select the resolution and framerate of the depth sensor. Changing
        configuration of a running camera running may require to (manually)
        restart tracking.
      </p>
    </app-value-selection>
    <div class="settings__item">
      <div class="settings__item--content">
        <label for="checkbox-autostart" class="settings__item--label">Autostart</label>
        <div class="slider checkbox">
          <input
            type="checkbox"
            value="None"
            id="checkbox-autostart"
            class="checkbox-toggle"
            name="checkbox-autostart"
            [(ngModel)]="autostart"
            (ngModelChange)="saveAutoStart()"
          />
          <label class="checkbox-toggle-label" for="checkbox-autostart"
            ><span class="on">ON</span><span class="off">OFF</span></label
          >
        </div>
      </div>
      <div class="settings__item--info">
        Specify whether Camera should be started automatically on next program
        start.
      </div>
    </div>
    <app-recording
      [recordingName]="
        selectedCameraIdx > 0 && selectedCameraIdx < cameras.length
          ? cameras[selectedCameraIdx].id
          : ''
      "
    ></app-recording>
    <app-settings></app-settings>
  </div>
  <div class="visualization__panel">
    @if (displayPointCloud) {
    <div class="point-cloud content">
      <div class="point-cloud__visualization" #pointCloudContainer>
        <app-point-cloud
          (fullScreenChanged)="onPointCloudFullScreenChanged($event)"
          [width]="pointCloudContainer.offsetWidth - 20"
          [livePreviewEnabled]="isActive"
        ></app-point-cloud>
      </div>
    </div>
    } @if (displayDepthImage) {
    <div class="depth-image">
      <div>
        <app-depth-image
          (fullScreenChanged)="onDepthImageFullScreenChanged($event)"
          [livePreviewEnabled]="isActive"
        ></app-depth-image>
      </div>
    </div>
    }
  </div>
</div>