Working eye tracking

wmodes · Dec 22, 2023 · 9a11ddd · 9a11ddd
1 parent 37d1e53
commit 9a11ddd
Show file tree

Hide file tree

Showing 25 changed files with 7,260 additions and 4 deletions.
diff --git a/eye/css/eye.css b/eye/css/eye.css
@@ -31,6 +31,7 @@
     left: 0;
     max-width: 100%; /* Element won't exceed the container's width */
     max-height: 100%; /* Element won't exceed the container's height */ 
+    background-color: white;
   }
 
   #eye>* {
@@ -56,4 +57,37 @@
 
 .get-wiggly {
   animation: wiggle 0.5s ease infinite;
-}
+}
+
+.wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh; 
+  overflow: hidden;
+}
+
+/* The video can be full width but not cover the screen, because we hide it behind the scenes */
+.wrapper video{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+  max-width: 640px;
+  max-height: 400px;
+  /* We don't even have to mirror is, because it's hidden and we mirror the canvas coordinates. */
+  /* transform: scaleX(-1); */
+  border: solid 1px red;
+}
+
+/* The canvas should cover the screen  */
+.wrapper canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh; 
+  border: solid 1px orange;
+}
diff --git a/eye/index.html b/eye/index.html
@@ -3,13 +3,18 @@
 <head>
     <title>The Eye</title>
     <link rel="stylesheet" type="text/css" href="css/eye.css">
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
-    <script src="js/eye.js" defer></script>
+    <script src="lib/face-api.js"></script>
+    <script src="js/eye2.js" defer></script>
 
 </head>
 <body>
     <div id="content">
+        <div class="wrapper">
+            <video id="input-video" autoplay muted></video>
+            <canvas id="canvas">
+        </div>
         <div id="eye">
           <div id="iris">
             <img src="img/iris-handdrawn.png" alt="iris" />