Eye Tracking Demo: SVGs als AOIs
Übersicht
In dieser Demo ist unser Ziel, Blickdaten des Eye Trackings zu erfassen. Insbesondere möchten wir die Blickdaten erfassen, die mit bestimmten Interessensgebieten (AOIs) verbunden sind, die in der Studie als SVG Formobjekte enthalten sind.
Eine Vorschau der Demo in Aktion wird unten gezeigt, wobei der rote Kreis Feedback gibt, indem er den Standort des Blicks in Echtzeit anzeigt:
![]()
- HINWEIS: Die Aufnahme der Demo wurde mit einer Kalibrierungsoption von 5,5 Minuten erreicht; der rote Kreis ist ein Objekt, das den Blick des Teilnehmers in Echtzeit darstellt und die gesamte Einrichtung wird weiter unten erklärt.
Schauen Sie sich dieses kurze Video an, das die Demo in Aktion zeigt sowie eine Vorschau der am Ende aufgezeichneten Daten:
Objekte
In dieser Demo gibt es ein Hintergrundbild eines Kaianlegers, auf dem vier SVG-Objekte von Personen platziert sind. Es gibt auch ein Blickfeedback-Objekt (roter Kreis). Für die Zwecke dieser Demo wollten wir den Blick in Echtzeit darstellen, und dieser rote Kreis spiegelt das wider.
![]()
Erstellte benutzerdefinierte Variablen
Um Daten aufzuzeichnen, sind Variablen erforderlich. Eine Liste aller benutzerdefinierten Variablen, die für diese Demo erstellt wurden, wird unten angezeigt, zugänglich über das ‘Variablen’ Tab. Das Bild unten zeigt die Details und Einstellungen für die Variablen, die diese Demo verwendet:
![]()
Unten finden Sie eine Erklärung der Variablen und ihrer Zwecke:
| Variablenname | Beschreibung | Aufzeichnertyp |
|---|---|---|
Alle Blickdaten | Wird verwendet, um das Array von x/y-Koordinaten [X,Y] sowie die Zeitaufnahme [T] und das Vertrauensniveau [C] der Messung zu speichern. | Alle Änderungen / Zeitreihe |
AOI1_blickdaten | Wird verwendet, um das Array von [X,Y,T,C] zu speichern, wenn der Teilnehmer auf das SVG-Objekt mit dem Namen AOI1 schaut. | Alle Änderungen / Zeitreihe |
SVG1_pfad | Zeichnet den Pfad des SVG-Knotens auf, auf dem der Blick auf AOI1 verweilte (weiter unten erklärt). | Alle Änderungen / Zeitreihe |
AOI2_blickdaten | Wird verwendet, um das Array von [X,Y,T,C] zu speichern, wenn der Teilnehmer auf das SVG-Objekt mit dem Namen AOI2 schaut. | Alle Änderungen / Zeitreihe |
SVG2_pfad | Zeichnet den Pfad des SVG-Knotens auf, auf dem der Blick auf AOI2 verweilte. | Alle Änderungen / Zeitreihe |
Und so weiter…
Ereignisse eingerichtet
Da wir daran interessiert sind, Blickdaten zu erfassen, werden die folgenden Ereignisse verwendet:
- Alle Blickdaten: Dieses Ereignis beginnt, sobald die Aufgabe beginnt und zeichnet kontinuierlich die Blickdaten des Eye Trackings auf.
- AOI-Blickdaten: Dieses Ereignis beginnt, sobald der Teilnehmer auf ein bestimmtes AOI (d.h. eine der vier Personen) schaut und zeichnet die blickbezogenen Werte auf.
- Experiment beenden: Ein Ereignis, das die Sitzung akzeptiert / beendet und die Daten aufzeichnet, sobald das Subjekt auf die Schaltfläche ‘Fertig’ klickt.
Ereignis 1: Alle Blickdaten
Für das erste Ereignis wollen wir Folgendes erreichen:
- Alle Eye-Tracking-Daten während der Dauer der Studie aufzeichnen
- Den erkannten Standort des Blicks in Echtzeit auf dem Bildschirm anzeigen (damit Sie als Forscher ein Gefühl dafür haben, wie das Webcam-Tracking funktioniert, wenn Sie die Demo ausprobieren)
Auslöser
Daher verwenden wir einen Auslöser für das Eye Tracking, um dieses Ereignis zu initiieren.
![]()
Aktion
Sobald der Blick erkannt wird, treten die folgenden Aktionen ein: Zuerst rufen wir die Alle Blickdaten-Variable auf, die wir zuvor in einer Set / Record Variable Aktion erstellt haben, um die Daten als [X,Y,T,C] Array aufzuzeichnen.
![]()
Das oben beschriebene wird (wie unten gezeigt) erreicht, indem man die grüne Schaltfläche klickt, die Zielvariable auswählt, dann auf das Bleistiftsymbol Wertauswahlmenü klickt und dann das [X,Y,T,C] Array aus dem auslöserspezifischen (Eyetracking-Blick) Menü, auswählt, wie unten gezeigt:
![]()
Wir fügen auch die Set Object Property Aktion hinzu, um das rote Kreisobjekt (genannt ‘Blick’) so einzustellen, dass seine X-Eigenschaft gleich der und die Y-Eigenschaft auf die Koordinate X und die Koordinate Y gesetzt wird. Mit anderen Worten, wir setzen die x- und y-Werte des Objekts auf die x- und y-Koordinaten ... letztendlich lässt dies das Objekt in Echtzeit bewegen.
![]()
HINWEIS: Die Optionen für Koordinate X und Koordinate Y werden aus dem auslöserspezifischen (Eyetracking-Blick) Menü. ausgewählt.
Ereignis 2: AOI-Blickdaten
In diesem Ereignis möchten wir die Ereignisse so einrichten, dass:
- der Blick auch aufgezeichnet wird, wenn er speziell auf die Ziel-AOIs (d.h. die hochgeladenen SVG-Objekte) gerichtet ist
- die spezifischen SVG-Knotendaten des AOIs gemeldet werden
Auslöser
Der Eyetracking-Blick Auslöser wird hier ebenfalls verwendet. Aber in diesem Kontext geben wir an, dass wir nur an bestimmten Elementen interessiert sind, indem wir die jeweilige Option auswählen und dann die 4 SVG-Objekte auswählen, die als Interessensgebiete (AOIs) fungieren.
![]()
Aktion
Um den Aufruf für jedes AOI festzulegen, benötigen wir eine Control Action → Requirement Action (If…Then). Grundsätzlich wollen wir, dass Labvanced Folgendes tut: „Wenn der Teilnehmer auf AOI1 schaut, möchten wir die spezifischen Daten dafür in einer bestimmten Variablen sowie den SVG-Pfad dieses Blicks aufzeichnen.“
Zuerst klicken wir auf die + Anforderung-Schaltfläche und die beiden Bleistiftsymbolwerte erscheinen.
- Erstes Bleistiftsymbol: Für das erste Feld wählen wir aus dem auslöserspezifischen (Eyetracking-Blick) Menü, die Option
Stimulus Name, die den Objektname des Stimulus verwendet, auf dem der Auslöser (in diesem Fall Blick) war. - Zweites Bleistiftsymbol: Wählen Sie
Konstanter Wertund dann dieString-Option aus und geben Sie den Objektname ein (d.h. AOI1):
![]()
Bis zu diesem Punkt haben wir festgestellt, dass wenn der Auslöser (Blick) auf dem Stimulus mit dem Namen AOI1 liegt... dann:
![]()
- Die Variable
AOI_blickdaten, die wir zuvor erstellt haben, wird das [X,Y,T,C] Array aufzeichnen. - Außerdem wird die Variable
SVG1_pfadaufgezeichnet, um dieStimulus Infozu enthalten, die in diesem Fall, da das Ziel von Interesse (AOI1) ein SVG ist, die Stimulus-Info die Knoten des SVG enthalten wird.
Um das nächste AOI zu spezifizieren, fügen Sie den Button +Add Else If Case im Dialogfeld hinzu und wiederholen Sie einfach die Struktur / Einrichtung, wie sie oben gezeigt wurde, wobei die Hauptunterschiede darin bestehen, den Stimulus Name als AOI2 einzustellen und dann auch die spezifischen Variablen für die Speicherung der Daten, d.h. AOI2_blickdaten und SVG2_Pfad aufzurufen, wie unten gezeigt:
![]()
Als Nächstes wählen wir für AOI3 wieder Add Else If Case und folgen der gleichen Struktur, jedoch mit den benutzerdefinierten Variablen, die wir erstellt haben, um die Daten für dieses spezifische AOI zu speichern:
![]()
Wiederum wählen wir für AOI4 erneut Add Else If Case und folgen der gleichen Struktur, jedoch mit den benutzerdefinierten Variablen, die wir erstellt haben, um die Daten für dieses spezifische AOI zu speichern:
![]()
Ereignis 3: Experiment beenden / Daten speichern
Schließlich, um die Daten aufzuzeichnen und zu speichern, müssen wir die Jump Action zur Accept / End Session Aktion wählen, sobald die Fertig-Schaltfläche darauf geklickt wird (was der Auslöser ist), wie unten gezeigt.
Auslöser
Der Auslöser wird so festgelegt, dass er eintritt, wenn die 'Fertig-Schaltfläche' verwendet wird:
![]()
Aktion
Die Aktion, die eintreten wird, ist, dass die Sitzung akzeptiert wird, was zur Folge hat, dass die Daten aufgezeichnet werden.
![]()
Aufgezeichnete Daten
Die aufgezeichneten Daten umfassen alle benutzerdefinierten Variablen sowie experiment-spezifische Werte wie die Aufgabenummer, die Sitzungsnummer usw.
Im folgenden Beispiel zeigt der ‘Dataview & Export’ Tab, wie die Daten aussehen, wenn sie nach Zeitreihen-Dateien getrennt sind. Jede Zeitreihe-Variable (d.h. die Variablen, die alle Änderungen aufzeichnen) wird mit ihrer eigenen CSV-Datei im linken Bereich angezeigt. Dies kann durch Festlegung der entsprechenden Einstellung unter Verwendung der Exportformat-Einstellungen.
Wenn die Alle Blickdaten.csv ausgewählt wird, werden zahlreiche Variablen aufgezeichnet, einschließlich der unten gezeigten. Die ‚Wert‘-Spalte erfasst das [X,Y,T,C] Array, bei dem die Werte durch Kommas getrennt sind:
![]()
Das Bild unten zeigt eine Vorschau der Arrays, die speziell aufgezeichnet wurden, als der Blick auf AOI1 war, wie in der ′Wert‘-Spalte gezeigt:
![]()
Das Bild unten zeigt eine Vorschau der SVG-Pfade, die speziell aufgezeichnet wurden, als der Blick auf AOI1 war, wie in der ’Wert‘-Spalte gezeigt:
![]()
Fazit
Diese Demo zielt darauf ab, zu zeigen, wie man Blickdaten aufzeichnet und SVG-Objekte nutzt, um den Blick speziell im Kontext dessen aufzuzeichnen, wann er auf ein Interessensgebiet (AOI) erfolgt.
Wenn Sie Fragen haben, wenden Sie sich bitte an uns und lassen Sie uns die Einzelheiten Ihres Experiments wissen, insbesondere wenn Sie eine Machbarkeitsprüfung durchführen müssen!