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 | 2x 2x 14x 14x 2x 14x 2x 14x 2x 2x 2x 14x 1x 1x 2x 1x 2x 2x 1x 2x 1x 2x 2x 2x 1x 1x 2x 2x 2x 1x 1x 2x 2x 2x 2x 2x 14x 2x | <div class="content__header">
<h2 class="heading-secondary">Interactions View</h2>
<p>Count: {{ interactions.raw.length }}</p>
<p>Num Events received: {{ eventId }}</p>
</div>
<div class="content__body">
<div
class="interactions__visualization"
[ngStyle]="getInteractionsViewStyle()"
#interactionVis
>
<input
type="checkbox"
class="fullscreen__checkbox"
id="visualization-toggle"
[(ngModel)]="fullScreen"
title="toggle fullscreen"
/>
<label for="visualization-toggle" class="fullscreen__button">
<span class="fullscreen__icon"> </span>
</label>
<app-history-visualization></app-history-visualization>
@for (interaction of this.calibratedInteractions; track interaction; let idx
= $index) {
<div>
<div
class="interactions__point--confidence"
[ngStyle]="{
transform:
'translate(' +
interaction.position.x +
'px, ' +
interaction.position.y +
'px) scale(' +
(1.0 + interaction.confidence / maxConfidence) +
')'
}"
></div>
<div
class="interactions__point"
[ngClass]="getClass(interaction.extremumDescription)"
[ngStyle]="{
transform:
'translate(' +
interaction.position.x +
'px, ' +
interaction.position.y +
'px) scale(' +
(0.5 + interaction.position.z) +
')'
}"
>
<p class="interactions__point--id">{{ interaction.touchId }}</p>
</div>
<div
class="interactions__description"
[ngStyle]="{
transform:
'translate(' +
interaction.position.x +
'px, ' +
interaction.position.y +
'px)'
}"
>
<table>
<tbody>
<!-- <tr>
<th scope="col" colspan="3">{{Interactions.raw[idx]?.touchId}}</th>
</tr> -->
<tr>
<th scope="col">R</th>
<td>{{ interactions.raw[idx].position.x.toFixed(0) }}</td>
<td>{{ interactions.raw[idx].position.y.toFixed(0) }}</td>
<td>{{ interactions.raw[idx].position.z.toFixed(2) }}</td>
</tr>
<tr>
<th scope="col">N</th>
<td>{{ interactions.normalized[idx].position.x.toFixed(0) }}</td>
<td>{{ interactions.normalized[idx].position.y.toFixed(0) }}</td>
<td>{{ interactions.normalized[idx].position.z.toFixed(2) }}</td>
</tr>
<tr>
<th scope="col">A</th>
<td>{{ interactions.absolute[idx].position.x.toFixed(0) }}</td>
<td>{{ interactions.absolute[idx].position.y.toFixed(0) }}</td>
<td>{{ interactions.absolute[idx].position.z.toFixed(2) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
}
</div>
<div
class="clearBg"
[ngStyle]="{ visibility: fullScreen ? 'visible' : 'collapse' }"
></div>
</div>
|