jspsych · jadeddelta · Jun 29, 2022 · Jun 30, 2022 · Jul 6, 2022 · Jul 6, 2022
diff --git a/examples/example-components.html b/examples/example-components.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="UTF-8" />
+  <title>An Eyetracking Experiment</title>
+  <script src="../dist/bundle.js"></script>
+</head>
+<style>
+  body {
+    margin: 0px;
+    padding: 0px;
+  }
+</style>
+<body></body>
+<script>
+  /**
+   * GOALS:
+   * Display ease of use workflow for the user.
+   * Create a simple experiment that can be used to test the eyetracker.
+   * Utilize as many custom variables as possible.
+   */
+  const Eyetracker = eyetrack.initEyetracker();
+  const comp = eyetrack.initComponents(Eyetracker);
+
+  async function start() {
+    const landing = await comp.createLanding();
+    document.body.append(landing);
+    // create a wrapper so that the button doesn't stretch b/c landing is flex
+    let wrapper = document.createElement("div");
+    let next = document.createElement("button");
+    next.innerText = "Next";
+    // invokes the next step and clears itself
+    next.addEventListener("click", () => {
+      next.parentNode.parentNode.remove();
+      selectorPrompt();
+    });
+    wrapper.append(next);
+    landing.append(wrapper);
+  }
+
+  async function selectorPrompt() {
+    // giving the html components allows us to modify the style!
+    const [selector, btn] = await comp.createSelector();
+    selector.style.margin = "50px";
+    document.body.append(selector);
+    btn.style.top = "50px";
+    document.body.append(btn);
+
+    btn.addEventListener("click", () => {
+      // i'm unsure if setTimeout is necessary
+      // wanted to make sure the components would clear, THEN calibrate.
+      setTimeout(async () => {
+        const div = document.createElement("div");
+        div.style.width = "100%";
+        div.style.height = "100%";
+        div.style.position = "fixed";
+        div.id = "cal";
+        document.body.appendChild(div);
+        await comp.preload();
+        let ret = await comp.calibrate(div);
+        console.log(ret);
+      }, 1000);
+    });
+  }
+
+  start();
+</script>
diff --git a/examples/pseudo-components.html b/examples/pseudo-components.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="../dist/bundle.js"></script>
+  </head>
+  <body></body>
+  <script>
+    const Eyetracker = eyetrack.initEyetracker();
+    const comp = eyetrack.initComponents(Eyetracker);
+
+    async function start() {
+      // deals with all the permissions and camera stuff
+      await comp.init();
+
+      // creates a landing page for the user (disclaimers, stuff like that??)
+      const landing = comp.landing();
+      document.body.appendChild(landing);
+
+      // all-purpose method for clearing components generated by the Components object
+      comp.clearComponents();
+
+      // generates selector (and handles all the stuff that happens when you select a camera)
+      const [selector, btn] = await comp.generateSelector();
+      document.body.appendChild(selector);
+
+      // asks the user if camera and facial projection is alright
+      const [video, canvas] = await comp.generateFeeds();
+      document.body.appendChild(canvas);
+    }
+
+    start();
+  </script>
+</html>
diff --git a/examples/test-components.html b/examples/test-components.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="../dist/bundle.js"></script>
+  </head>
+  <style>
+    body {
+      margin: 0px;
+      padding: 0px;
+    }
+  </style>
+  <body></body>
+  <script>
+    const Eyetracker = eyetrack.initEyetracker();
+    const comp = eyetrack.initComponents(Eyetracker);
+
+    const div = document.createElement("div");
+    div.style.width = "100%";
+    div.style.height = "100%";
+    div.style.position = "fixed";
+    div.id = "cal";
+    document.body.appendChild(div);
+
+    test(10, 10, div);
+    test(0, 0, div);
+
+    for (let i = 0; i < 10; i++) {
+      test(Math.random() * 100, Math.random() * 100, div);
+    }
+
+    comp.props.shape = "reticule";
+    comp.props.diameter = "20px";
+    comp.props.color = "black";
+    comp.drawFixation(20, 20, div);
+
+    function test(x, y, div) {
+      const color =
+        div.parentNode.style.backgroundColor === ""
+          ? "white"
+          : div.parentNode.style.backgroundColor;
+
+      const outerCircle = document.createElement("div");
+      outerCircle.style.width = "20px";
+      outerCircle.style.height = "20px";
+      outerCircle.style.backgroundColor = "green";
+      outerCircle.style.position = "absolute";
+      outerCircle.style.left = `calc(${x}% - ${10}px)`;
+      outerCircle.style.top = `calc(${y}% - ${10}px)`;
+      outerCircle.style.borderRadius = "50%";
+      outerCircle.style.zIndex = "1";
+      div.appendChild(outerCircle);
+
+      const blankCross1 = document.createElement("div");
+      blankCross1.style.width = "5px";
+      blankCross1.style.height = "20px";
+      blankCross1.style.backgroundColor = color;
+      blankCross1.style.position = "absolute";
+      blankCross1.style.left = `calc(${x}% - ${2.5}px)`;
+      blankCross1.style.top = `calc(${y}% - ${10}px)`;
+      blankCross1.style.zIndex = "2";
+      div.appendChild(blankCross1);
+
+      const blankCross2 = document.createElement("div");
+      blankCross2.style.width = "20px";
+      blankCross2.style.height = "5px";
+      blankCross2.style.backgroundColor = color;
+      blankCross2.style.position = "absolute";
+      blankCross2.style.left = `calc(${x}% - ${10}px)`;
+      blankCross2.style.top = `calc(${y}% - ${2.5}px)`;
+      blankCross2.style.zIndex = "2";
+      div.appendChild(blankCross2);
+
+      const innerCircle = document.createElement("div");
+      innerCircle.style.width = "10px";
+      innerCircle.style.height = "10px";
+      innerCircle.style.backgroundColor = "red";
+      innerCircle.style.position = "absolute";
+      innerCircle.style.left = `calc(${x}% - ${5}px)`;
+      innerCircle.style.top = `calc(${y}% - ${5}px)`;
+      innerCircle.style.borderRadius = "50%";
+      innerCircle.style.zIndex = "3";
+      div.appendChild(innerCircle);
+    }
+
+    // const clearComponentsButton = document.createElement("button");
+    // clearComponentsButton.textContent = "Next";
+    // clearComponentsButton.addEventListener("click", () => {
+    //   comp.clearComponents();
+    // });
+
+    // async function start() {
+    //   const landing = await comp.createLanding();
+    //   document.body.append(landing);
+    //   let next = clearComponentsButton;
+    //   next.addEventListener("click", () => {
+    //     selectorPrompt();
+    //     next.remove();
+    //   });
+    //   document.body.append(next);
+    // }
+
+    // async function selectorPrompt() {
+    //   const [selector, btn] = await comp.createSelector();
+    //   document.body.append(selector);
+    //   document.body.append(btn);
+
+    //   btn.addEventListener("click", () => {
+    //     setTimeout(async () => {
+    //       const div = document.createElement("div");
+    //       div.style.width = "100%";
+    //       div.style.height = "100%";
+    //       div.style.position = "fixed";
+    //       div.id = "cal";
+    //       document.body.appendChild(div);
+    //       await comp.preload();
+    //       let ret = await comp.calibrate(div);
+    //       console.log(ret);
+    //     }, 1000);
+    //   });
+    // }
+
+    //start();
+  </script>
+</html>