WIP eye tracking demo

2025-05-10 11:10:54 +00:00 · 2021-08-27 16:28:42 -04:00 · 2021-08-27 16:28:42 -04:00 · 462c262231
commit 462c262231
parent 2cb45137ad
3 changed files with 97 additions and 0 deletions
--- a/docs/demos/eye-tracking-with-webgazer.html
+++ b/docs/demos/eye-tracking-with-webgazer.html
@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-keyboard-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-webgazer-init-camera.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-webgazer-calibrate.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-webgazer-validate.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/js/webgazer/webgazer.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/extensions/jspsych-ext-webgazer.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+
+      var preload = {
+        type: 'preload',
+        images: ['img/blue.png']
+      }
+
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var init_camera = {
+        type: 'webgazer-init-camera'
+      }
+
+      var calibration = {
+        type: 'webgazer-calibrate'
+      }
+
+      var validation = {
+        type: 'webgazer-validate'
+      }
+
+      var begin = {
+        type: 'html-keyboard-response',
+        stimulus: 'Press any key to start.'
+      }
+
+      var trial = {
+        type: 'image-keyboard-response',
+        stimulus: 'img/blue.png',
+        choices: jsPsych.NO_KEYS,
+        trial_duration: 1000,
+        extensions: [
+          {
+            type: 'webgazer', 
+            params: {targets: ['#jspsych-image-keyboard-response-stimulus']}
+          }
+        ]
+      }
+
+      var trial_loop = {
+        timeline: [calibration, validation, begin, trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [preload, start, init_camera, trial_loop],
+          extensions: [
+            {type: 'webgazer'}
+          ]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/img/blue.png
+++ b/docs/demos/img/blue.png
--- a/docs/demos/img/orange.png
+++ b/docs/demos/img/orange.png