improve tracking logic
parent
9446e3b2de
commit
99d98aba71
|
|
@ -3,166 +3,155 @@ import { inject, Injectable } from '@angular/core';
|
|||
import { interval, Subscription, tap } from 'rxjs';
|
||||
|
||||
export interface InteractionEvent {
|
||||
timestamp: number;
|
||||
type: string;
|
||||
elementId?: string;
|
||||
elementTag?: string;
|
||||
elementClasses?: string;
|
||||
value?: any;
|
||||
timestamp: number;
|
||||
type: string;
|
||||
elementId?: string;
|
||||
elementTag?: string;
|
||||
elementClasses?: string;
|
||||
value?: any;
|
||||
}
|
||||
|
||||
export interface DeviceOrientation {
|
||||
timestamp: number;
|
||||
alpha: number | null;
|
||||
beta: number | null;
|
||||
gamma: number | null;
|
||||
timestamp: number;
|
||||
alpha: number | null;
|
||||
beta: number | null;
|
||||
gamma: number | null;
|
||||
}
|
||||
|
||||
export interface ArTrackingData {
|
||||
timestamp: number;
|
||||
anchor: string | null;
|
||||
cameraOrbit: {
|
||||
theta: number;
|
||||
phi: number;
|
||||
radius: number;
|
||||
} | null;
|
||||
cameraTarget: {
|
||||
x: number;
|
||||
y: number;
|
||||
z: number;
|
||||
} | null;
|
||||
timestamp: number;
|
||||
anchor: string | null;
|
||||
cameraOrbit: {
|
||||
theta: number;
|
||||
phi: number;
|
||||
radius: number;
|
||||
} | null;
|
||||
cameraTarget: {
|
||||
x: number;
|
||||
y: number;
|
||||
z: number;
|
||||
} | null;
|
||||
}
|
||||
|
||||
export interface MetricsLog {
|
||||
interactions: InteractionEvent[];
|
||||
deviceOrientations: DeviceOrientation[];
|
||||
arData: ArTrackingData[];
|
||||
interactions: InteractionEvent[];
|
||||
deviceOrientations: DeviceOrientation[];
|
||||
arData: ArTrackingData[];
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MetricsTrackerService {
|
||||
private http = inject(HttpClient);
|
||||
private serverUrl = '/api/log';
|
||||
private http = inject(HttpClient);
|
||||
private serverUrl = '/api/log';
|
||||
|
||||
private metricsLog: MetricsLog = {
|
||||
interactions: [],
|
||||
deviceOrientations: [],
|
||||
arData: []
|
||||
};
|
||||
|
||||
private deviceOrientationSubscription: Subscription | null = null;
|
||||
private arTrackingSubscription: Subscription | null = null;
|
||||
private lastDeviceOrientation: DeviceOrientationEvent | null = null;
|
||||
|
||||
constructor() {
|
||||
this.handleDeviceOrientation = this.handleDeviceOrientation.bind(this);
|
||||
}
|
||||
|
||||
private handleDeviceOrientation(event: DeviceOrientationEvent): void {
|
||||
this.lastDeviceOrientation = event;
|
||||
}
|
||||
|
||||
// --- Public API ---
|
||||
public logInteraction(event: Event): void {
|
||||
if (event.target) {
|
||||
const target = event.target as HTMLElement;
|
||||
const interaction: InteractionEvent = {
|
||||
timestamp: Date.now(),
|
||||
type: event.type,
|
||||
elementId: target.id || undefined,
|
||||
elementTag: target.tagName,
|
||||
elementClasses: target.className,
|
||||
value: (target as any).value ?? undefined
|
||||
};
|
||||
this.metricsLog.interactions.push(interaction);
|
||||
}
|
||||
else if (event instanceof CustomEvent && event.detail) {
|
||||
const interaction: InteractionEvent = {
|
||||
timestamp: Date.now(),
|
||||
type: event.type,
|
||||
value: event.detail
|
||||
};
|
||||
this.metricsLog.interactions.push(interaction);
|
||||
}
|
||||
else {
|
||||
console.warn("logInteraction called with an unknown event type:", event);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public startDeviceOrientationTracking(): void {
|
||||
if (this.deviceOrientationSubscription || typeof window === 'undefined') return;
|
||||
|
||||
window.addEventListener('deviceorientation', this.handleDeviceOrientation);
|
||||
|
||||
this.deviceOrientationSubscription = interval(500).subscribe(() => {
|
||||
if (this.lastDeviceOrientation) {
|
||||
const orientation: DeviceOrientation = {
|
||||
timestamp: this.lastDeviceOrientation.timeStamp,
|
||||
alpha: this.lastDeviceOrientation.alpha,
|
||||
beta: this.lastDeviceOrientation.beta,
|
||||
gamma: this.lastDeviceOrientation.gamma
|
||||
};
|
||||
this.metricsLog.deviceOrientations.push(orientation);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
public startArTracking(modelViewerElement: any): void {
|
||||
if (this.arTrackingSubscription || !modelViewerElement) return;
|
||||
|
||||
this.arTrackingSubscription = interval(500).subscribe(() => {
|
||||
if (!modelViewerElement.arActive) {
|
||||
return;
|
||||
}
|
||||
|
||||
const anchor = modelViewerElement.getAnchor ? modelViewerElement.getAnchor() : 'getAnchor not available';
|
||||
const orbit = modelViewerElement.getCameraOrbit();
|
||||
const target = modelViewerElement.getCameraTarget();
|
||||
|
||||
const arData: ArTrackingData = {
|
||||
timestamp: Date.now(),
|
||||
anchor: anchor.includes('not placed') ? null : anchor,
|
||||
cameraOrbit: orbit ? { theta: orbit.theta, phi: orbit.phi, radius: orbit.radius } : null,
|
||||
cameraTarget: target ? { x: target.x, y: target.y, z: target.z } : null,
|
||||
};
|
||||
|
||||
this.metricsLog.arData.push(arData);
|
||||
});
|
||||
}
|
||||
|
||||
public sendMetricsToServer(testName: string, formData?: any) {
|
||||
const payload = {
|
||||
testName,
|
||||
metricsLog: this.metricsLog,
|
||||
...(formData && { formData })
|
||||
private metricsLog: MetricsLog = {
|
||||
interactions: [],
|
||||
deviceOrientations: [],
|
||||
arData: []
|
||||
};
|
||||
console.log(payload)
|
||||
return this.http.post(this.serverUrl, payload).pipe(
|
||||
tap({
|
||||
next: (response) => {
|
||||
console.log(`Metrics for '${testName}' sent successfully:`, response);
|
||||
this.resetMetrics();
|
||||
},
|
||||
error: (err) => console.error(`Failed to send metrics for '${testName}':`, err)
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
public cleanup(): void {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.removeEventListener('deviceorientation', this.handleDeviceOrientation);
|
||||
private trackingSubscription: Subscription | null = null;
|
||||
private lastDeviceOrientation: DeviceOrientationEvent | null = null;
|
||||
|
||||
private handleDeviceOrientation(event: DeviceOrientationEvent): void {
|
||||
this.lastDeviceOrientation = event;
|
||||
}
|
||||
// --- Public API ---
|
||||
public logInteraction(event: Event): void {
|
||||
if (event.target) {
|
||||
const target = event.target as HTMLElement;
|
||||
const interaction: InteractionEvent = {
|
||||
timestamp: Date.now(),
|
||||
type: event.type,
|
||||
elementId: target.id || undefined,
|
||||
elementTag: target.tagName,
|
||||
elementClasses: target.className,
|
||||
value: (target as any).value ?? undefined
|
||||
};
|
||||
this.metricsLog.interactions.push(interaction);
|
||||
}
|
||||
else if (event instanceof CustomEvent && event.detail) {
|
||||
const interaction: InteractionEvent = {
|
||||
timestamp: Date.now(),
|
||||
type: event.type,
|
||||
value: event.detail
|
||||
};
|
||||
this.metricsLog.interactions.push(interaction);
|
||||
}
|
||||
else {
|
||||
console.warn("logInteraction called with an unknown event type:", event);
|
||||
}
|
||||
}
|
||||
this.deviceOrientationSubscription?.unsubscribe();
|
||||
this.arTrackingSubscription?.unsubscribe();
|
||||
this.deviceOrientationSubscription = null;
|
||||
this.arTrackingSubscription = null;
|
||||
}
|
||||
|
||||
public resetMetrics(): void {
|
||||
this.metricsLog = { interactions: [], deviceOrientations: [], arData: [] };
|
||||
}
|
||||
|
||||
public startTracking(modelViewerElement: any): void {
|
||||
if (this.trackingSubscription || !modelViewerElement) return;
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('deviceorientation', this.handleDeviceOrientation);
|
||||
}
|
||||
|
||||
this.trackingSubscription = interval(500).subscribe(() => {
|
||||
if (!modelViewerElement.arActive) {
|
||||
return;
|
||||
}
|
||||
|
||||
const timestamp = Date.now();
|
||||
|
||||
const anchor = modelViewerElement.getAnchor ? modelViewerElement.getAnchor() : 'getAnchor not available';
|
||||
const orbit = modelViewerElement.getCameraOrbit ? modelViewerElement.getCameraOrbit() : null;
|
||||
const target = modelViewerElement.getCameraTarget ? modelViewerElement.getCameraTarget() : null;
|
||||
|
||||
const arData: ArTrackingData = {
|
||||
timestamp: timestamp,
|
||||
anchor: anchor.includes('not placed') ? null : anchor,
|
||||
cameraOrbit: orbit ? { theta: orbit.theta, phi: orbit.phi, radius: orbit.radius } : null,
|
||||
cameraTarget: target ? { x: target.x, y: target.y, z: target.z } : null,
|
||||
};
|
||||
this.metricsLog.arData.push(arData);
|
||||
|
||||
let orientation: DeviceOrientation | null = null;
|
||||
if (this.lastDeviceOrientation) {
|
||||
orientation = {
|
||||
timestamp: timestamp,
|
||||
alpha: this.lastDeviceOrientation.alpha,
|
||||
beta: this.lastDeviceOrientation.beta,
|
||||
gamma: this.lastDeviceOrientation.gamma
|
||||
};
|
||||
this.metricsLog.deviceOrientations.push(orientation);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public sendMetricsToServer(testName: string, formData?: any) {
|
||||
const payload = {
|
||||
testName,
|
||||
metricsLog: this.metricsLog,
|
||||
...(formData && { formData })
|
||||
};
|
||||
console.log(payload)
|
||||
return this.http.post(this.serverUrl, payload).pipe(
|
||||
tap({
|
||||
next: (response) => {
|
||||
console.log(`Metrics for '${testName}' sent successfully:`, response);
|
||||
this.resetMetrics();
|
||||
},
|
||||
error: (err) => console.error(`Failed to send metrics for '${testName}':`, err)
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
public cleanup(): void {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.removeEventListener('deviceorientation', this.handleDeviceOrientation);
|
||||
}
|
||||
this.trackingSubscription?.unsubscribe();
|
||||
this.trackingSubscription = null;
|
||||
}
|
||||
|
||||
public resetMetrics(): void {
|
||||
this.metricsLog = { interactions: [], deviceOrientations: [], arData: [] };
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue