Visualization Tab

src/.vuepress/config.js

@@ -30,15 +30,13 @@ module.exports = {
       },
       {
         property: "og:description",
-        content: `${
-          frontmatter.description ? frontmatter.description : description
-        }`,
+        content: `${frontmatter.description ? frontmatter.description : description
+          }`,
       },
       {
         name: "description",
-        content: `${
-          frontmatter.description ? frontmatter.description : description
-        }`,
+        content: `${frontmatter.description ? frontmatter.description : description
+          }`,
       },
     ];
     for (const meta of default_metas) {
@@ -140,18 +138,31 @@ module.exports = {
           ],
         },
         {
-          // Enrichments
-          title: "Enrichments",
+          title: "Pupil Cloud",
           children: [
-            { title: "Overview", path: "/enrichments/" },
             {
-              title: "Reference Image Mapper",
-              path: "/enrichments/reference-image-mapper/",
+              // Enrichments
+              title: "Enrichments",
+              children: [
+                { title: "Overview", path: "/pupil-cloud/enrichments/" },
+                {
+                  title: "Reference Image Mapper",
+                  path: "/pupil-cloud/enrichments/reference-image-mapper/",
+                },
+                { title: "Marker Mapper", path: "/pupil-cloud/enrichments/marker-mapper/" },
+                { title: "Face Mapper", path: "/pupil-cloud/enrichments/face-mapper/" },
+              ],
             },
-            { title: "Marker Mapper", path: "/enrichments/marker-mapper/" },
-            { title: "Face Mapper", path: "/enrichments/face-mapper/" },
-            { title: "Gaze Overlay", path: "/enrichments/gaze-overlay/" },
-          ],
+            {
+              // Visualizations
+              title: "Visualizations",
+              children: [
+                { title: "Overview", path: "/pupil-cloud/visualizations/" },
+                { title: "Video Renderer", path: "/pupil-cloud/visualizations/video-renderer/" },
+                { title: "Heatmap", path: "/pupil-cloud/visualizations/heatmap/" },
+              ],
+            }
+          ]
         },
         {
           // How-To Guides
@@ -273,27 +284,31 @@ module.exports = {
           ],
         },
         {
-          // Enrichments
-          title: "Enrichments",
+          title: "Pupil Cloud",
           children: [
             {
-              title: "Overview",
-              path: "/enrichments",
-            },
-            {
-              title: "Reference Image Mapper",
-              path: "/enrichments/reference-image-mapper",
-            },
-            {
-              title: "Marker Mapper",
-              path: "/enrichments/marker-mapper/",
+              // Enrichments
+              title: "Enrichments",
+              children: [
+                { title: "Overview", path: "/pupil-cloud/enrichments/" },
+                {
+                  title: "Reference Image Mapper",
+                  path: "/pupil-cloud/enrichments/reference-image-mapper/",
+                },
+                { title: "Marker Mapper", path: "/pupil-cloud/enrichments/marker-mapper/" },
+                { title: "Face Mapper", path: "/pupil-cloud/enrichments/face-mapper/" },
+              ],
             },
-            { title: "Face Mapper", path: "/enrichments/face-mapper" },
             {
-              title: "Gaze Overlay",
-              path: "/enrichments/gaze-overlay",
-            },
-          ],
+              // Visualizations
+              title: "Visualizations",
+              children: [
+                { title: "Overview", path: "/pupil-cloud/visualizations/" },
+                { title: "Video Renderer", path: "/pupil-cloud/visualizations/video-renderer/" },
+                { title: "Heatmap", path: "/pupil-cloud/visualizations/heatmap/" },
+              ],
+            }
+          ]
         },
         {
           // How-To Guides

src/.vuepress/theme/layouts/Layout.vue

@@ -36,6 +36,12 @@ export default {
     return {
       isSidebarOpen: false,
       previousPageUrl: null,
+      undeclaredRoutes: [
+        "pupil-cloud",
+        "enrichments",
+        "export-formats",
+        "visualizations",
+      ],
     };
   },
 
@@ -53,8 +59,9 @@ export default {
       /* Fail safe, previousPage will be null if coming from external source, thus load neon for enrichments and export formats*/
       if (this.previousPageUrl === null) {
         if (
-          this.$page.regularPath.includes("enrichments") ||
-          this.$page.regularPath.includes("export-formats")
+          this.undeclaredRoutes.some((item) =>
+            this.$page.regularPath.includes(item)
+          )
         ) {
           this.previousPageUrl = "/neon/";
         } else {
@@ -89,29 +96,33 @@ export default {
       /* This part here checks from which page comes from and sets the previous url accordingly.*/
       if (from.path.includes("invisible")) {
         if (
-          this.$page.regularPath.includes("enrichments") ||
-          this.$page.regularPath.includes("export-formats")
+          this.undeclaredRoutes.some((item) =>
+            this.$page.regularPath.includes(item)
+          )
         ) {
           this.previousPageUrl = "/invisible/";
         } else {
           this.previousPageUrl = to.path;
         }
       } else if (
-        from.path.includes("enrichments") ||
-        from.path.includes("export-formats")
+        this.undeclaredRoutes.some((item) =>
+          this.$page.regularPath.includes(item)
+        )
       ) {
         if (
-          this.$page.regularPath.includes("enrichments") ||
-          this.$page.regularPath.includes("export-formats")
+          this.undeclaredRoutes.some((item) =>
+            this.$page.regularPath.includes(item)
+          )
         ) {
           this.previousPageUrl = from.$page.previousPageUrl;
         } else {
           this.previousPageUrl = to.path;
         }
       } else {
         if (
-          this.$page.regularPath.includes("enrichments") ||
-          this.$page.regularPath.includes("export-formats")
+          this.undeclaredRoutes.some((item) =>
+            this.$page.regularPath.includes(item)
+          )
         ) {
           this.previousPageUrl = "/neon/";
         } else {

src/enrichments/face-mapper.md → src/pupil-cloud/enrichments/face-mapper.md

@@ -7,7 +7,7 @@ permalink: /enrichments/face-mapper
 
 <div class="pb-4" style="display:flex;justify-content:center;">
   <v-img
-    :src="require('../media/enrichments/face_mapper_header.png')"
+    :src="require('../../media/enrichments/face_mapper_header.png')"
     max-width=100%
   >
   </v-img>

src/enrichments/marker-mapper.md → src/pupil-cloud/enrichments/marker-mapper.md

@@ -5,7 +5,7 @@
 # Marker Mapper
 
 <div class="mb-4" style="display:flex;justify-content:center;">
-  <v-img class="rounded" :src="require('../media/enrichments/marker_mapper_header.png')"
+  <v-img class="rounded" :src="require('../../media/enrichments/marker_mapper_header.png')"
   width="80%" 
   alt="A screenshot of the Marker Mapper enrichment on Pupil Cloud."
   title="A screenshot of the Marker Mapper enrichment on Pupil Cloud" />
@@ -18,11 +18,11 @@
 You can use these images as a template for printing markers:
 
 <div class="pb-4" style="display:grid;grid-template-columns:1fr 1fr;gap:40px;">
-  <a download="apriltags_tag36h11_0-23.jpg" href="../media/shared/imgs/apriltags_tag36h11_0-23.jpg" title="AprilTags 0-23">
-    <img src="../media/shared/imgs/apriltags_tag36h11_0-23.jpg">
+  <a download="apriltags_tag36h11_0-23.jpg" href="../../media/shared/imgs/apriltags_tag36h11_0-23.jpg" title="AprilTags 0-23">
+    <img src="../../media/shared/imgs/apriltags_tag36h11_0-23.jpg">
   </a>
-  <a download="apriltags_tag36h11_24-47.jpg" href="../../media/shared/imgs/apriltags_tag36h11_24-47.jpg" title="AprilTags 0-23">
-    <img src="../media/shared/imgs/apriltags_tag36h11_24-47.jpg">
+  <a download="apriltags_tag36h11_24-47.jpg" href="../../../media/shared/imgs/apriltags_tag36h11_24-47.jpg" title="AprilTags 0-23">
+    <img src="../../media/shared/imgs/apriltags_tag36h11_24-47.jpg">
   </a>
 </div>
 
@@ -42,7 +42,7 @@
 A surface definition always needs to contain at least 2 markers. Thus, at least 2 markers have to be visible in the video frame when initially creating the surface, and you cannot remove further markers from the surface definition when the marker count is down to 2.
 
 <div class="mb-4" style="display:flex;justify-content:center;">
-  <v-img class="rounded" :src="require('../media/enrichments/marker_mapper_additional.png')"
+  <v-img class="rounded" :src="require('../../media/enrichments/marker_mapper_additional.png')"
   width="80%" 
   alt="A screenshot of the Marker Mapper enrichment on Pupil Cloud."
   title="A screenshot of the Marker Mapper enrichment on Pupil Cloud" />

src/enrichments/overview.md → src/pupil-cloud/enrichments/overview.md

@@ -1,6 +1,6 @@
 ---
 description: Explanation of all available enrichments including setup instructions.
-permalink: /enrichments
+permalink: /pupil-cloud/enrichments
 ---
 
 # What are Enrichments? 
@@ -21,7 +21,7 @@
             aspect-ratio="1.4"
             style="margin-bottom:32px;"
             :position="item.position"
-            :src="require(`../media/enrichments/${item.img}`)"
+            :src="require(`../../media/enrichments/${item.img}`)"
           />
           <p class="caption--1 font-weight-bold pb-3">{{ item.title }}</p>
         </router-link>
@@ -47,36 +47,24 @@
       enrichments: [
         {
           title: "Reference image mapper",
-          to: "/enrichments/reference-image-mapper",
+          to: "/pupil-cloud/enrichments/reference-image-mapper",
           text: "Our markerless solution to map gaze data from the real world onto a reference image.",
           img: "reference_image_mapper_header.png",
         },
         {
           title: "Marker mapper",
-          to: "/enrichments/marker-mapper",
+          to: "/pupil-cloud/enrichments/marker-mapper",
           text: "Use apriltags to get your gaze onto a surface.",
           img: "marker_mapper_header.png",
         },
         {
           title: "Face mapper",
-          to: "/enrichments/face-mapper",
+          to: "/pupil-cloud/enrichments/face-mapper",
           text: "Map gaze data to faces in the scene video.",
           img: "face_mapper_header.png",
         },
-        {
-          title: "Gaze overlay",
-          to: "/enrichments/gaze-overlay",
-          text: "Visualise your gaze on top of the scene video and undistort the scene video.",
-          img: "gaze_overlay_header.png",
-        },
       ],
     };
   },
 }
 </script>
-
-
-
-
-
-

src/enrichments/reference-image-mapper.md → src/pupil-cloud/enrichments/reference-image-mapper.md

@@ -1,6 +1,6 @@
 ---
 description: Powerful tool to map gaze data from the scene camera onto a reference image 
-permalink: /enrichments/reference-image-mapper
+permalink: /pupil-cloud/enrichments/reference-image-mapper
 ---
 
 # Reference Image Mapper
@@ -34,10 +34,10 @@ In this guide, we will show you how the Reference Image Mapper can be used in a
 Below, gaze is mapped in four very different environments: to a **magazine cover**, a **basketball backboard**, a **supermarket shelf**, and even a **whole building**!
 
 <PhotoGrid :images="[
-  require(`../media/enrichments/rim/heatmap-0.jpg`),
-  require(`../media/enrichments/rim/heatmap-1.jpg`),
-  require(`../media/enrichments/rim/heatmap-2.jpg`),
-  require(`../media/enrichments/rim/heatmap-3.jpg`),
+  require(`../../media/enrichments/rim/heatmap-0.jpg`),
+  require(`../../media/enrichments/rim/heatmap-1.jpg`),
+  require(`../../media/enrichments/rim/heatmap-2.jpg`),
+  require(`../../media/enrichments/rim/heatmap-3.jpg`),
 ]"/>
 
 Let's take a look at what the Reference Image and Scanning Recording look like to produce these heatmaps.
@@ -50,7 +50,7 @@ Let's take a look at what the Reference Image and Scanning Recording look like t
     class="rounded" 
     style="margin-bottom:14px;"
     max-width="100%" max-height="300px" contain 
-    :src="require('../media/enrichments/rim/magazine-img.jpg')"
+    :src="require('../../media/enrichments/rim/magazine-img.jpg')"
   ></v-img>
     First, we need a high-resolution .jpeg of the page.
   </div>
@@ -71,7 +71,7 @@ Let's take a look at what the Reference Image and Scanning Recording look like t
     class="rounded" 
     style="margin-bottom:14px;"
     max-width="100%" max-height="300px" contain 
-    :src="require('../media/enrichments/rim/basketball-img.jpg')"
+    :src="require('../../media/enrichments/rim/basketball-img.jpg')"
   ></v-img>
     Here we can take a photo of the basketball hoop and court background.
   </div>
@@ -91,7 +91,7 @@ Let's take a look at what the Reference Image and Scanning Recording look like t
     class="rounded" 
     style="margin-bottom:14px;"
     max-width="100%" max-height="300px" contain 
-    :src="require('../media/enrichments/rim/supermarket-img.jpg')"
+    :src="require('../../media/enrichments/rim/supermarket-img.jpg')"
   ></v-img>
     This photo captures the assortment of packagíng in the coffee aisle of a supermarket.
   </div>
@@ -111,7 +111,7 @@ Let's take a look at what the Reference Image and Scanning Recording look like t
     class="rounded" 
     style="margin-bottom:14px;"
     max-width="100%" max-height="300px" contain 
-    :src="require('../media/enrichments/rim/building-img.jpg')"
+    :src="require('../../media/enrichments/rim/building-img.jpg')"
     ></v-img>
     This is a photo of the <i>entire</i> building
   </div>
@@ -144,7 +144,7 @@ Why not try replicating the above examples? Or even try it with your own use cas
   <v-img
     class="rounded" 
     style="margin-bottom:32px;"
-    :src="require('../media/enrichments/rim/rim-in-cloud.png')"
+    :src="require('../../media/enrichments/rim/rim-in-cloud.png')"
     max-width=90%
   >
   </v-img>
@@ -163,7 +163,7 @@ Now when you play back the recording you can see where gaze is mapped to on your
 <div class="pb-4" style="display:flex;justify-content:center;">
   <v-img
     class="rounded" 
-    :src="require('../media/enrichments/rim/basketball-occlusion.png')"
+    :src="require('../../media/enrichments/rim/basketball-occlusion.png')"
     max-width=400px
   >
   </v-img>

src/pupil-cloud/visualizations/heatmap.md

@@ -0,0 +1,15 @@
+---
+description: Create rich visualizations of gaze data by overlaying it onto scene video.
+permalink: /visualizations/heatmap
+---
+## Heatmap
+<div class="pb-4" style="display:flex;justify-content:center;">
+  <v-img
+    :src="require('../../media/enrichments/gaze_overlay_header.png')"
+    max-width=100%
+  >
+  </v-img>
+</div>
+
+TBD
+